@bikdotai/bik-component-library 0.0.786-beta.13 → 0.0.786-beta.2
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/assets/icons/Icons.stories.d.ts +31 -0
- package/dist/cjs/components/bik-layout/BikSidebarV2/BikSidebarV2.js +1 -1
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +13 -18
- package/dist/cjs/components/icon-button/IconButton.js +1 -1
- package/dist/cjs/components/icon-button/IconButton.styled.d.ts +0 -1
- package/dist/cjs/components/icon-button/IconButton.styled.js +3 -3
- package/dist/cjs/components/icon-button/model.d.ts +0 -5
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.model.d.ts +0 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +2 -8
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +28 -31
- package/dist/cjs/components/whats-new/WhatsNew.d.ts +0 -2
- package/dist/cjs/components/whats-new/WhatsNew.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +0 -2
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/esm/assets/icons/Icons.stories.d.ts +31 -0
- package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js +1 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +16 -21
- package/dist/esm/components/icon-button/IconButton.js +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.d.ts +0 -1
- package/dist/esm/components/icon-button/IconButton.styled.js +1 -1
- package/dist/esm/components/icon-button/model.d.ts +0 -5
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/input/Input.model.d.ts +0 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +2 -8
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +26 -29
- package/dist/esm/components/whats-new/WhatsNew.d.ts +0 -2
- package/dist/esm/components/whats-new/WhatsNew.js +1 -1
- package/dist/esm/components/whats-new/WhatsNew.types.d.ts +0 -2
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
|
+
declare const _default: ComponentMeta<({ color, size, }: {
|
|
3
|
+
color?: string | undefined;
|
|
4
|
+
size?: number | undefined;
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
6
|
+
export default _default;
|
|
7
|
+
export declare const AllIcons: ComponentStory<({ color, size, }: {
|
|
8
|
+
color?: string | undefined;
|
|
9
|
+
size?: number | undefined;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
11
|
+
export declare const ActiveChecklist: ComponentStory<any>;
|
|
12
|
+
export declare const CheckIndicator: ComponentStory<any>;
|
|
13
|
+
export declare const CompletedChecklist: ComponentStory<any>;
|
|
14
|
+
export declare const InactiveChecklist: ComponentStory<any>;
|
|
15
|
+
export declare const ProgressBadge: ComponentStory<any>;
|
|
16
|
+
export declare const Redirect2: ComponentStory<any>;
|
|
17
|
+
export declare const SearchIconComponent: ComponentStory<any>;
|
|
18
|
+
export declare const SmallCheck: ComponentStory<any>;
|
|
19
|
+
export declare const Customise: ComponentStory<any>;
|
|
20
|
+
export declare const Enable: ComponentStory<any>;
|
|
21
|
+
export declare const GoLive: ComponentStory<any>;
|
|
22
|
+
export declare const Headset: ComponentStory<any>;
|
|
23
|
+
export declare const ListChecks: ComponentStory<any>;
|
|
24
|
+
export declare const Marketing: ComponentStory<any>;
|
|
25
|
+
export declare const Nudges: ComponentStory<any>;
|
|
26
|
+
export declare const OnboardingLogoStory: ComponentStory<any>;
|
|
27
|
+
export declare const OrderTracking: ComponentStory<any>;
|
|
28
|
+
export declare const PlusIconComponent: ComponentStory<any>;
|
|
29
|
+
export declare const Shopping: ComponentStory<any>;
|
|
30
|
+
export declare const Support: ComponentStory<any>;
|
|
31
|
+
export declare const Training: ComponentStory<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/Bik_logo.svg.js"),n=require("../../../assets/icons/locked.svg.js"),t=require("react"),o=require("../../progress-bar/CircularProgressBar.js"),s=require("../../../constants/Theme.js"),r=require("../../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarV2Popup.js"),u=require("./SidebarV2Styles.js"),d=require("./SimpleSidebarV2.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:o}=i,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/Bik_logo.svg.js"),n=require("../../../assets/icons/locked.svg.js"),t=require("react"),o=require("../../progress-bar/CircularProgressBar.js"),s=require("../../../constants/Theme.js"),r=require("../../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarV2Popup.js"),u=require("./SidebarV2Styles.js"),d=require("./SimpleSidebarV2.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:o,hoverStateIcon:r,isHovered:l}=i,u=n,d=o,a=r;return e.jsx(e.Fragment,{children:t&&l||t?e.jsx(d,{width:16,height:16,color:s.COLORS.content.primaryInverse}):l?e.jsx(a,{width:16,height:16,color:s.COLORS.content.primaryInverse}):e.jsx(u,{width:16,height:16,color:s.COLORS.content.secondaryInverse})})},c=i=>{let{option:t,index:o,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:l,mainActiveMenu:d,hoveredComp:c,popupMenu:v,onMouseLeaveMenuItem:p}=i;var g,h,S,y,k,m;return e.jsx(u.SibeBarV2MenuItem,{children:e.jsxs(u.SidebarMainMenu,Object.assign({id:(null===(h=null===(g=t.displayName)||void 0===g?void 0:g.split(" "))||void 0===h?void 0:h.join(""))||t.key.toString(),onClick:()=>!l&&s(t),onMouseEnter:()=>{r(t)},onMouseLeave:p,onFocus:()=>{},"aria-hidden":"true"},{children:[t.isNew&&e.jsx(u.SidebarNewTag,Object.assign({isLastSticky:t.isLastSticky},{children:"NEW"})),t.isLocked&&e.jsx(u.SidebarLockedChannel,Object.assign({isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky},{children:e.jsx(n.default,{height:16,width:16})})),e.jsxs(u.SidebarMenuItemInner,Object.assign({id:(null===(y=null===(S=t.displayName)||void 0===S?void 0:S.split(" "))||void 0===y?void 0:y.join(""))+"_sub"||t.key.toString()+"_sub",isActive:(null==d?void 0:d.key)===t.key,isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky,isHovered:t.key===(null==c?void 0:c.key),isNew:t.isNew},{children:[e.jsx(a,{icon:t.icon,isActive:t.key==(null==d?void 0:d.key),activeStateIcon:null!==(k=t.activeIcon)&&void 0!==k?k:{},hoverStateIcon:null!==(m=t.hoverIcon)&&void 0!==m?m:{},isHovered:t.key==(null==c?void 0:c.key)||t.key==(null==v?void 0:v.key)}),e.jsx(u.SidebarMenuItemContainer,{children:e.jsx(u.SidebarMenuItemText,Object.assign({isActive:(null==t?void 0:t.key)===(null==d?void 0:d.key)},{children:t.displayName}))})]}),o)]}),o)})};exports.BikSidebarV2=n=>{const{logoSvg:s,allMenuList:a,activeMainMenu:v,activeSubMenu:p,router:g,onClickingMainMenu:h,onClickingSubMenu:S,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:k,popupMinHeight:m,isNewSidebar:M,menuStyle:b}=n,[j,x]=t.useState(v),[L,C]=t.useState(),[w,I]=t.useState(p),[f,O]=t.useState(!1),[H,N]=t.useState(),[B,P]=t.useState(),[E,q]=t.useState(),A=t.useRef(null),F=t.useMemo((()=>a.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[a]);t.useEffect((()=>{x(v)}),[v]),t.useEffect((()=>{I(p)}),[p]);const V=t.useCallback((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(N(void 0),C(void 0),O(!0),x(e),e.path||h(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?I(null==e?void 0:e.children[0]):I({}),C(void 0),setTimeout((()=>{O(!1)}),1e3))}),[h]),_=t.useCallback((e=>{var i,n;if(D(),C(void 0),N(void 0),"popup"==(null==e?void 0:e.layout)){const i=z();i&&P(i),N(e)}else{const t=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(t){const i=R(t,e);q(i)}C(e)}}),[]),R=(e,i)=>{const n=e.getBoundingClientRect();let t=n.top;if(window.innerHeight<=768)return t;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;t=n.top+e-200}return t};t.useEffect((()=>{const e=()=>{const e=z();e&&P(e),T()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const T=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},D=t.useCallback((()=>{A.current&&(clearTimeout(A.current),A.current=null)}),[]),U=t.useCallback((()=>{D(),A.current=setTimeout((()=>{C(void 0),N(void 0)}),150)}),[D]),z=()=>{var e,i;if(H){const n=(null===(i=null===(e=H.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||H.key.toString()+"_sub",t=document.getElementById(n);if(t){const e=t.getBoundingClientRect();let i=e.top;const n=null!=m?m:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e.jsxs(u.SideBarV2Container,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:s||e.jsx(i.default,{})})),e.jsxs(u.MainSideBarV2MenuWrapper,Object.assign({style:b},{children:[null==a?void 0:a.map(((i,n)=>{var o,s;return e.jsxs(t.Fragment,{children:[i.path?e.jsx(r.NavigationHyperlink,Object.assign({href:i.path,router:g},{children:e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:f,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:H,onMouseLeaveMenuItem:U})})):e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:f,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:H,onMouseLeaveMenuItem:U}),e.jsxs(e.Fragment,{children:["popup"===i.layout&&(null===(o=null==H?void 0:H.children)||void 0===o?void 0:o.length)&&e.jsx(l.SidebarV2Popup,{top:null!=B?B:void 0,menuList:null==H?void 0:H.children,onClickingPopupMenu:e=>{k&&k(e),N(void 0)},onMouseEnterOnMenu:D,onMouseLeaveOnMenu:U}),(null===(s=null==L?void 0:L.children)||void 0===s?void 0:s.length)&&e.jsx(d.SimpleSidebarV2,{menuList:null==L?void 0:L.children,width:200,activeMenu:w,onMouseEnterOnMenu:D,onMouseLeaveOnMenu:()=>C(void 0),left:78,postion:"fixed",header:L.displayName,theme:"brand",router:g,showAccessUpgradePanel:L.showAccessUpgradePanel,onMenuClick:(e,i)=>{I(e),x(L),C(void 0),N(void 0),i&&S(e)},onUpgrade:y,top:M&&E||0,isNewSidebar:M})]})]},n)})),"number"==typeof n.onboardingPercentage&&e.jsx(u.SibeBarV2MenuItem,{children:e.jsx(u.SidebarMainMenu,{children:e.jsx(u.SidebarMenuItemInner,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===F?0:1===F?64:128},{children:e.jsx(o.default,{percentage:n.onboardingPercentage,width:48})}))})})]}))]})};
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
}
|
|
26
26
|
`,a=o.default.div`
|
|
27
27
|
margin: 0px 0px 16px;
|
|
28
|
-
padding-bottom: 8px;
|
|
29
28
|
`,d=o.default.div``,s=o.default.div`
|
|
30
|
-
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
padding: 0px 8px;
|
|
31
31
|
margin-bottom: 6px;
|
|
32
32
|
> * {
|
|
33
33
|
gap: 4px;
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
z-index: 1;
|
|
65
65
|
}
|
|
66
66
|
`}}
|
|
67
|
-
`,
|
|
67
|
+
`,c=o.default.div`
|
|
68
68
|
display: flex;
|
|
69
69
|
flex-direction: column;
|
|
70
70
|
border-radius: 10px;
|
|
@@ -93,27 +93,23 @@
|
|
|
93
93
|
`}}
|
|
94
94
|
|
|
95
95
|
${t=>{let{isActive:r,isHovered:o}=t;return r&&o&&e.css`
|
|
96
|
-
|
|
97
|
-
border: 1px solid ${i.BASE_COLORS.brand[700]};
|
|
98
|
-
background-color: ${i.BASE_COLORS.brand[800]};
|
|
96
|
+
background-color: ${i.BASE_COLORS.brand[700]};
|
|
99
97
|
`}}
|
|
100
98
|
|
|
101
99
|
|
|
102
100
|
${t=>{let{isLastSticky:i}=t;return i&&e.css`
|
|
103
101
|
@media (min-height: 768px) {
|
|
104
102
|
position: absolute;
|
|
105
|
-
bottom:
|
|
106
|
-
|
|
107
|
-
right: 6px;
|
|
103
|
+
bottom: 64px;
|
|
104
|
+
width: 85%;
|
|
108
105
|
}
|
|
109
106
|
`}}
|
|
110
107
|
|
|
111
108
|
${t=>{let{is2ndLastSticky:i}=t;return i&&e.css`
|
|
112
109
|
@media (min-height: 768px) {
|
|
113
110
|
position: absolute;
|
|
114
|
-
bottom:
|
|
115
|
-
|
|
116
|
-
right: 6px;
|
|
111
|
+
bottom: 0px;
|
|
112
|
+
width: 85%;
|
|
117
113
|
}
|
|
118
114
|
`}}
|
|
119
115
|
|
|
@@ -121,15 +117,14 @@
|
|
|
121
117
|
@media (min-height: 768px) {
|
|
122
118
|
position: absolute;
|
|
123
119
|
bottom: ${i}px;
|
|
124
|
-
|
|
125
|
-
right: 6px;
|
|
120
|
+
width: 85%;
|
|
126
121
|
}
|
|
127
122
|
`}}
|
|
128
|
-
`,
|
|
123
|
+
`,u=o.default.div`
|
|
129
124
|
display: flex;
|
|
130
125
|
flex-direction: row;
|
|
131
126
|
cursor: pointer;
|
|
132
|
-
`,
|
|
127
|
+
`,x=o.default(t.BodyTiny)`
|
|
133
128
|
user-select: none;
|
|
134
129
|
color: ${e=>{let{isActive:t}=e;return t?i.COLORS.content.primaryInverse:i.COLORS.content.secondaryInverse}};
|
|
135
130
|
margin-bottom: 0px;
|
|
@@ -166,7 +161,7 @@
|
|
|
166
161
|
position: absolute;
|
|
167
162
|
right: 100%;
|
|
168
163
|
top: 0;
|
|
169
|
-
width:
|
|
164
|
+
width: 24px;
|
|
170
165
|
height: 100%;
|
|
171
166
|
}
|
|
172
167
|
}
|
|
@@ -284,4 +279,4 @@
|
|
|
284
279
|
border-radius: 8px;
|
|
285
280
|
}
|
|
286
281
|
}
|
|
287
|
-
`;exports.MainSideBarV2MenuWrapper=a,exports.SibeBarV2MenuItem=d,exports.SideBarV2Container=n,exports.SidebarLockedChannel=b,exports.SidebarMainMenu=s,exports.SidebarMenuItemContainer=
|
|
282
|
+
`;exports.MainSideBarV2MenuWrapper=a,exports.SibeBarV2MenuItem=d,exports.SideBarV2Container=n,exports.SidebarLockedChannel=b,exports.SidebarMainMenu=s,exports.SidebarMenuItemContainer=u,exports.SidebarMenuItemInner=c,exports.SidebarMenuItemText=x,exports.SidebarNewTag=p,exports.SidebarV2PopupContainer=g,exports.SimpleSidebarV2Container=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),l=require("./theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(o);const n=o.forwardRef(((o,s)=>{var{id:n,iconButtonType:c="default",Icon:a,height:u=20,width:b=20,bordered:y,disabled:p,isSelected:j,style:h,svgStyle:f,iconColor:g,disabledTooltip:v}=o,B=e.__rest(o,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const I=l.getIconColor(c,p,j),T=t.jsx(r.IconButton,Object.assign({id:n,ref:s,style:h,iconButtonType:c,bordered:y,disabled:p,isSelected:j},B,{children:d.default.createElement(a,{height:u,width:b,color:g||I,style:Object.assign({display:"block"},null!=f?f:{})})}));return p&&v?t.jsx(i.Tooltip,Object.assign({body:v},{children:t.jsx("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:T}))})):T}));n.displayName="IconButton",exports.IconButton=n;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),
|
|
2
|
-
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding:
|
|
3
|
-
`;exports.IconButton=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js"),n=require("./theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=r(t).default.button`
|
|
2
|
+
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${e.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${n.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
|
|
3
|
+
`;exports.IconButton=o;
|
|
@@ -40,10 +40,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
40
40
|
*/
|
|
41
41
|
isSelected?: boolean;
|
|
42
42
|
iconColor?: string;
|
|
43
|
-
/**
|
|
44
|
-
* Custom padding for the icon button container
|
|
45
|
-
* @default 6
|
|
46
|
-
*/
|
|
47
|
-
iconPadding?: number;
|
|
48
43
|
disabledTooltip?: string;
|
|
49
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),l=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/errorInfo.svg.js"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,p,g,x,j,f,b
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),l=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/errorInfo.svg.js"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,p,g,x,j,f,m,b;const{placeholder:y,leftIcon:C,rightIcon:O,labelText:T,maxCharLimit:I,isRequired:S,hintText:w,type:E,state:k,validate:H,variant:q,button:B,suffixText:L,prefixText:F,onChangeText:M,value:P,noErrorHint:R,reset:z,rangeValidation:D,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:U,labelTextBold:V,truncateText:$,maxCharLimitPosition:J,hightlightInputColor:Q,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te,isDisabled:ne=!1,allowUnsafeInput:ie}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},d),se=null==C?void 0:C.icon,le=null==O?void 0:O.icon,[re,ae]=n.useState(!1),[oe,ue]=n.useState(!1),[ce,de]=n.useState(),he="x-small"===q?"12px":"small"===q?"18px":"22px",ve=n.useContext(u.InputStyleContext),[pe,ge]=n.useState(""),xe=n.useRef(null),je=null!=h?h:xe;n.useEffect((()=>{ge(P||""),!P&&W&&(je.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;je.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,je.current))}),[je]),n.useEffect((()=>{const e=je.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",ye,{passive:!1}),()=>{e.removeEventListener("wheel",ye)}}),[]),n.useEffect((()=>{z&&ge("")}),[z]),n.useEffect((()=>{var e;ue(!!d.isActive),d.isActive&&(null===(e=je.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{de(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;ae(!1),("invalid"===d.state||ce||"disabled-invalid"===d.state)&&ae(!0),"active"===d.state&&(null===(e=je.current)||void 0===e||e.focus())}),[d.state,ce]),n.useEffect((()=>{ae(!!ce||"invalid"===d.state)}),[ce,d.state]);const fe=function(e){if(s.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},me=()=>"zip"===E?6:2e3,be=e=>{const t=0!==I?I:me(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||M(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},ye=e=>{e.preventDefault()},Ce=e=>{let t=e.target.value;const n=0!==I?I+1:me(),i=te;if(!ie&&s.shouldSanitizeForType(E)&&(t=s.sanitizeUnsafeInput(t)),!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||ge(t||""),i&&t&&t.length<i)return;M(t,e),W&&(je.current.style.height=`${je.current.scrollHeight}px`,t||(je.current.style.height=G||"48px"));const l=H||s.validateInput;if(!l||!s.isFunction(l))return;const[r,a]=l(t,E,D);ae(!r),de(d.errorMessage?d.errorMessage:a)},Oe=e=>{var t;d.skipFocus||ue(!0),fe(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Te=e=>{var t;d.skipFocus||ue(!1),fe(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Ie=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:$?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==ve?void 0:ve.input)&&void 0!==t?t:{},ref:je,disabled:ne,type:["phonenumber","zip","number"].includes(E)?"number":E,value:pe,onFocus:e=>Oe(e),onBlur:e=>Te(e),placeholder:y||"Enter here",onChange:Ce,onClick:e=>fe(d.onClick),onKeyDown:e=>be(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:pe,ref:je,onFocus:e=>Oe(e),onBlur:e=>Te(e),onClick:e=>fe(d.onClick),disabled:ne,placeholder:y||"Enter here",onChange:Ce,onKeyDown:e=>be(e),maxLength:I>0?I:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:k,type:E,style:null!==(v=null==ve?void 0:ve.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!ce)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!ce},{children:[!!ce&&e.jsx(o.default,{width:16,height:16}),ce||w]})),I>0&&"BOTTOM"===J&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(g=null===(p=(null!=P?P:"").toString())||void 0===p?void 0:p.length)&&void 0!==g?g:0,"/",I]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:q,state:k,width:d.width,isActive:"active"===k||oe,isInvalid:re,style:null!==(j=null!==(x=null==ve?void 0:ve.InputWrapper)&&void 0!==x?x:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:Q,hideBorder:Z},{children:[!!se&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:he,onClick:()=>fe(null==C?void 0:C.callback),isLeft:!0,style:null!==(f=null==ve?void 0:ve.IconHolder)&&void 0!==f?f:{}},{children:e.jsx(se,{})})),!!F&&e.jsx(c.PrefixHolder,Object.assign({variant:q},{children:F})),"default"===q&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:U,autoGrow:W},{children:Ie()})),["x-small","small"].includes(q)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Ie()})),!!le&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:he,onClick:()=>fe(null==O?void 0:O.callback),isLeft:!1},{children:e.jsx(le,{})})),!!L&&e.jsx(c.SuffixHolder,Object.assign({variant:q},{children:L})),B&&B.text&&e.jsx(i.Button,{buttonText:B.text,onClick:()=>fe(null==B?void 0:B.onClick)}),B&&B.buttonProps&&e.jsx(i.Button,Object.assign({},B.buttonProps))]})),!Y&&(!!T||!!I)&&e.jsxs(c.InputHeader,Object.assign({invalid:re},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[V?e.jsxs(r.TitleSmall,{children:[T,S?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[T,S?e.jsx("span",{children:"*"}):""]}),d.tooltipText&&e.jsx(l.Tooltip,Object.assign({body:d.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:re?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),I>0&&"TOP"===J&&e.jsxs(c.MaxCharStyle,{children:[null!==(b=null===(m=(null!=P?P:"").toString())||void 0===m?void 0:m.length)&&void 0!==b?b:0,"/",I]})]}))]}))}));d.displayName="Input",exports.Input=d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:l,option:u,parents:p,allowParentSelection:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:l,option:u,parents:p,allowParentSelection:d,maxLevels:a,hideGroupLabel:c,currentLevel:x,renderNestedMenu:j,version:m}=s;return e.jsxs(o.GroupedMenuListContainer,{children:[!c&&e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:l,option:r,parents:p,allowParentSelection:d,maxLevels:a,currentLevel:x,renderNestedMenu:j,version:m},t)))]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./MultiLevelDropdown.styled.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(n);exports.MenuItem=s=>{let{width:a,onDropdownItemClick:d,option:c,parents:u,allowParentSelection:p,maxLevels:O,currentLevel:v,renderNestedMenu:h,version:g}=s;var j,C,b,x,S,m,L;const[y,f]=l.default.useState(!1),[R,M]=l.default.useState(!1),[I,T]=l.default.useState({top:0,left:0}),w=n.useRef({top:0,left:0}),q=!!c.children&&c.children.length>0,k=q&&(void 0===O||v<O);return e.jsxs(o.MenuItemWrapper,Object.assign({
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./MultiLevelDropdown.styled.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(n);exports.MenuItem=s=>{let{width:a,onDropdownItemClick:d,option:c,parents:u,allowParentSelection:p,maxLevels:O,currentLevel:v,renderNestedMenu:h,version:g}=s;var j,C,b,x,S,m,L;const[y,f]=l.default.useState(!1),[R,M]=l.default.useState(!1),[I,T]=l.default.useState({top:0,left:0}),w=n.useRef({top:0,left:0}),q=!!c.children&&c.children.length>0,k=q&&(void 0===O||v<O);return e.jsxs(o.MenuItemWrapper,Object.assign({onMouseEnter:e=>{k&&(f(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();T({top:t.top,left:t.right}),w.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{f(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!d||null!==(e=c.disabled)&&void 0!==e&&e||q&&!p||d(c,u)})()},id:"menuItemWrapper",style:{cursor:null!==(j=c.disabled)&&void 0!==j&&j?"not-allowed":"pointer",backgroundColor:null!==(C=c.disabled)&&void 0!==C&&C?i.COLORS.surface.standard:"transparent"}},{children:[c.customComponent?c.customComponent:e.jsxs(o.MenuItemContainer,Object.assign({isSelected:c.selected,isSubMenuOpen:y,isHovered:R,isDisabled:null!==(b=c.disabled)&&void 0!==b&&b,version:g},{children:[e.jsxs(o.ContentContainer,{children:[c.leadingIcon&&e.jsx(o.LeadingIconContainer,{children:c.leadingIcon}),e.jsxs("div",{children:[e.jsx(r.BodyCaption,Object.assign({style:{color:null!==(x=c.disabled)&&void 0!==x&&x?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary}},{children:c.label})),c.subText&&e.jsx(r.BodyTiny,Object.assign({style:{color:null!==(S=c.disabled)&&void 0!==S&&S?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:c.subText}))]})]}),q?e.jsx(o.TrailingIconContainer,{children:e.jsx(t.default,{width:16,height:16,color:!k||null!==(m=c.disabled)&&void 0!==m&&m?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary})}):c.trailingIcon?e.jsx(o.TrailingIconContainer,{children:c.trailingIcon}):e.jsx(e.Fragment,{})]})),!(null!==(L=c.disabled)&&void 0!==L&&L)&&c.children&&c.children.length>0&&k&&y&&e.jsx(o.SubMenuContainer,Object.assign({width:a,className:"submenu",onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:e.jsx(o.StyledSubMenuWrapper,Object.assign({width:a,top:I.top,left:I.left},{children:e.jsx(o.SubMenuListContainer,Object.assign({version:g},{children:h(c.children,[...u,c],v+1)}))}))}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../zeroState/ZeroState.js"),r=require("../../constants/Theme.js"),s=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("../floater/floater.js"),i=require("./MenuList.js"),l=require("./MultiLevelDropdown.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(t);exports.MultiLevelDropdown=a=>{let{options:c,width:d,isSearchable:p,onDropdownItemClick:f,refElement:h,topOffset:j,leftOffset:x,isDropdownOpen:w,onDropdownOutsideClick:b,allowParentSelection:O,maxLevels:g,hideGroupLabel:v,version:m="1.0"}=a;const L=u.default.useRef(null),[S,y]=t.useState(c),C=e=>{const t=Array.isArray(c)?[...c]:[],n=[];for(;t.length>0;){const r=t.shift();r&&r.label.toLowerCase().includes(e.toLowerCase())&&n.push(r),r&&"children"in r&&r.children?t.push(...r.children):r&&"options"in r&&r.options&&t.push(...r.options)}const r=e=>e.map((e=>{if(n.includes(e))return e;if("children"in e&&e.children){const t=r(e.children);if(t.length>0)return Object.assign(Object.assign({},e),{children:t})}if("options"in e&&e.options){const t=r(e.options);if(t.length>0)return Object.assign(Object.assign({},e),{options:t})}return null})).filter((e=>null!==e));y(r(c))},q=e=>{L.current&&!L.current.contains(e.target)?b&&b(!0):b&&b(!1)};return t.useEffect((()=>{w&&C("")}),[w]),t.useEffect((()=>(document.addEventListener("mousedown",q),()=>{document.removeEventListener("mousedown",q)})),[]),t.useEffect((()=>{y(c)}),[c]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:x},{children:w&&e.jsx("div",Object.assign({ref:L,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999,borderRadius:"3.0"===m?"4px":"8px",whiteSpace:"normal"}},{children:e.jsxs(l.DropdownContainer,Object.assign({width:d,version:m},{children:[p&&e.jsx("div",Object.assign({style:{padding:"4px",width:null!=d?d:"200px"}},{children:e.jsx(s.SearchBox,{onSearch:C,version:"3.0"===m?"3.0":"2.0"})})),e.jsx(l.OptionsContainer,Object.assign({width:d},{children:(null!=S?S:[]).length>0&&e.jsx(i.MenuList,{width:null!=d?d:"200px",onDropdownItemClick:f,options:S,parents:[],allowParentSelection:O,maxLevels:g,hideGroupLabel:v,currentLevel:1,version:m})})),0===(null!=S?S:[]).length&&e.jsx(l.NoResultsContainer,Object.assign({style:{width:null!=d?d:"200px"}},{children:e.jsx(n.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};
|
|
@@ -4,19 +4,13 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
|
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
width?: string | undefined;
|
|
7
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
8
7
|
}, never>;
|
|
9
8
|
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
10
9
|
width?: string | undefined;
|
|
11
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
12
|
-
}, never>;
|
|
13
|
-
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
|
|
14
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
15
10
|
}, never>;
|
|
11
|
+
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
12
|
export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
|
-
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
18
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
19
|
-
}, never>;
|
|
13
|
+
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
14
|
export interface MenuItemContainerProps {
|
|
21
15
|
isSelected?: boolean;
|
|
22
16
|
isHovered?: boolean;
|
|
@@ -1,101 +1,98 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const n=r.default.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
4
4
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
-
padding-bottom:
|
|
6
|
-
`,o=
|
|
5
|
+
padding-bottom: 4px;
|
|
6
|
+
`,o=r.default.div`
|
|
7
7
|
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
8
8
|
max-width: 300px;
|
|
9
9
|
max-height: 280px;
|
|
10
10
|
overflow-y: scroll;
|
|
11
|
-
padding:
|
|
11
|
+
padding: 4px 0 0;
|
|
12
12
|
&::-webkit-scrollbar {
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
|
-
`,
|
|
16
|
-
margin-top:
|
|
17
|
-
height:
|
|
15
|
+
`,d=r.default.div`
|
|
16
|
+
margin-top: 64px;
|
|
17
|
+
height: 200px;
|
|
18
18
|
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
19
|
-
|
|
20
|
-
align-items: center;
|
|
21
|
-
justify-content: center;
|
|
22
|
-
`,d=n.default.div`
|
|
19
|
+
`,a=r.default.div`
|
|
23
20
|
width: 100%;
|
|
24
21
|
justify-content: center;
|
|
25
22
|
cursor: pointer;
|
|
26
23
|
align-items: center;
|
|
27
24
|
justify-content: space-between;
|
|
28
|
-
margin:
|
|
29
|
-
`,
|
|
25
|
+
margin: 4px 0;
|
|
26
|
+
`,p=r.default.div`
|
|
30
27
|
z-index: 1000;
|
|
31
28
|
position: relative;
|
|
32
29
|
margin: 0px;
|
|
33
30
|
padding: 0px;
|
|
34
31
|
width: 100%;
|
|
35
|
-
`,
|
|
32
|
+
`,s=r.default.div`
|
|
36
33
|
position: relative;
|
|
37
|
-
padding:
|
|
34
|
+
padding: 1px 4px;
|
|
38
35
|
cursor: pointer;
|
|
39
36
|
width: 100%;
|
|
40
37
|
&:hover > .submenu,
|
|
41
38
|
&:focus-within > .submenu {
|
|
42
39
|
display: block;
|
|
43
40
|
}
|
|
44
|
-
`,
|
|
41
|
+
`,u=r.default.div`
|
|
45
42
|
position: relative;
|
|
46
|
-
padding:
|
|
43
|
+
padding: 4px 8px 4px 8px;
|
|
47
44
|
transition: background-color 0.2s;
|
|
48
45
|
width: 100%;
|
|
49
|
-
border-radius:
|
|
46
|
+
border-radius: 8px;
|
|
50
47
|
justify-content: center;
|
|
51
|
-
background-color: ${e=>{let{isSelected:
|
|
52
|
-
color: ${e=>{let{isSelected:
|
|
48
|
+
background-color: ${e=>{let{isSelected:i,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?t.COLORS.surface.standard:i||n?"3.0"===d?t.COLORS.background.brandLight:t.COLORS.background.positive.light:r?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
|
|
49
|
+
color: ${e=>{let{isSelected:i,isSubMenuOpen:r,version:n}=e;return i||r?"3.0"===n?t.COLORS.text.primary:t.COLORS.content.positive:t.COLORS.content.primary}};
|
|
53
50
|
display: flex;
|
|
54
51
|
align-items: center;
|
|
55
52
|
justify-content: space-between;
|
|
56
53
|
|
|
57
54
|
&:hover {
|
|
58
|
-
background-color: ${e=>{let{isSelected:
|
|
55
|
+
background-color: ${e=>{let{isSelected:i,isDisabled:r,version:n}=e;return r?t.COLORS.surface.standard:i?"3.0"===n?t.COLORS.background.brandLight:t.COLORS.background.positive.light:t.COLORS.surface.hovered}};
|
|
59
56
|
}
|
|
60
|
-
`,
|
|
57
|
+
`,l=r.default.div`
|
|
61
58
|
display: flex;
|
|
62
59
|
align-items: center;
|
|
63
60
|
gap: 8px;
|
|
64
|
-
`,x=
|
|
61
|
+
`,x=r.default.div`
|
|
65
62
|
z-index: 1001;
|
|
66
63
|
position: fixed;
|
|
67
64
|
border-left: 4px solid transparent;
|
|
68
|
-
`,c=
|
|
65
|
+
`,c=r.default.div`
|
|
69
66
|
margin: 4px;
|
|
70
67
|
background-color: ${t.COLORS.surface.standard};
|
|
71
68
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
72
69
|
border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
|
|
73
|
-
padding-top:
|
|
70
|
+
padding-top: 4px;
|
|
74
71
|
max-height: 480px;
|
|
75
|
-
padding-bottom:
|
|
72
|
+
padding-bottom: 4px;
|
|
76
73
|
overflow-y: scroll;
|
|
77
74
|
|
|
78
75
|
&::-webkit-scrollbar {
|
|
79
76
|
display: none;
|
|
80
77
|
}
|
|
81
|
-
`,
|
|
78
|
+
`,f=r.default.div`
|
|
82
79
|
width: 16px;
|
|
83
80
|
height: 16px;
|
|
84
81
|
display: flex;
|
|
85
82
|
align-items: center;
|
|
86
83
|
justify-content: center;
|
|
87
84
|
margin-right: 4px;
|
|
88
|
-
`,
|
|
85
|
+
`,g=r.default.div`
|
|
89
86
|
width: 16px;
|
|
90
87
|
height: 16px;
|
|
91
88
|
display: flex;
|
|
92
89
|
align-items: center;
|
|
93
90
|
justify-content: center;
|
|
94
91
|
margin-left: 4px;
|
|
95
|
-
`,
|
|
92
|
+
`,b=r.default.div`
|
|
96
93
|
width: ${e=>e.width};
|
|
97
|
-
`,
|
|
94
|
+
`,h=r.default(x)`
|
|
98
95
|
width: ${e=>e.width};
|
|
99
96
|
top: ${e=>e.top}px;
|
|
100
97
|
left: ${e=>e.left}px;
|
|
101
|
-
`;exports.ContentContainer=
|
|
98
|
+
`;exports.ContentContainer=l,exports.DropdownContainer=n,exports.GroupedMenuListContainer=a,exports.LeadingIconContainer=f,exports.MenuItemContainer=u,exports.MenuItemWrapper=s,exports.NoResultsContainer=d,exports.OptionsContainer=o,exports.StyledMenuList=p,exports.StyledSubMenuWrapper=h,exports.SubMenuContainer=b,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x,exports.TrailingIconContainer=g;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=r=>{let{title:i="What's new",tooltip:a="What's new",searchPlaceholder:u="Search posts",emptyStateTitle:c="Nothing new!",emptyStateDescription:h="There are no new updates or features at the moment. Check back soon!",noResultsText:l="Sorry, no results found.",width:d="480px",onContentClick:w,renderCustomContent:C,buttonTestId:p="whats-new-button",iconWidth:m=32,iconHeight:W=32,customIcon:x}=r;const[N,j]=t.useState(!1),{whatsNewContent:g,isLoading:S,newContentCount:y}=s.useWhatsNewContext();return e.jsxs(e.Fragment,{children:[e.jsx(n.WhatsNewButton,{onClick:()=>j(!0),newContentCount:y,isOpen:N,isLoading:S,tooltip:a,testId:p,iconWidth:m,iconHeight:W,customIcon:x}),e.jsx(o.WhatsNewPanel,{isOpen:N,onClose:()=>j(!1),content:g,isLoading:S,title:i,searchPlaceholder:u,emptyStateTitle:c,emptyStateDescription:h,noResultsText:l,width:d,onContentClick:e=>{w&&w(e)},renderCustomContent:C})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),s=require("../../constants/Theme.js"),n=require("../tooltips/Tooltip.js"),i=require("./WhatsNew.styles.js");exports.WhatsNewButton=o=>{let{onClick:r,newContentCount:a=0,isOpen:c=!1,isLoading:d=!1,tooltip:l="What's new",testId:h="whats-new-button",iconWidth:j=32,iconHeight:u=32,customIcon:x}=o;return d?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsx(i.WhatsNewIconContainer,Object.assign({count:a},{children:t.jsxs("div",Object.assign({className:"main-icon-class "+(c?"icon-active":""),style:{color:c?s.COLORS.content.brand:s.COLORS.content.primary},onClick:r,"data-testid":h},{children:[t.jsx(n.Tooltip,Object.assign({body:l,placement:"bottom"},{children:t.jsx("div",{children:x?t.jsx(x,{width:j,height:u,color:c?s.COLORS.content.brand:s.COLORS.content.primary}):t.jsx(e.default,{width:j,height:u})})})),a>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
2
|
+
declare const _default: ComponentMeta<({ color, size, }: {
|
|
3
|
+
color?: string | undefined;
|
|
4
|
+
size?: number | undefined;
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
6
|
+
export default _default;
|
|
7
|
+
export declare const AllIcons: ComponentStory<({ color, size, }: {
|
|
8
|
+
color?: string | undefined;
|
|
9
|
+
size?: number | undefined;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element>;
|
|
11
|
+
export declare const ActiveChecklist: ComponentStory<any>;
|
|
12
|
+
export declare const CheckIndicator: ComponentStory<any>;
|
|
13
|
+
export declare const CompletedChecklist: ComponentStory<any>;
|
|
14
|
+
export declare const InactiveChecklist: ComponentStory<any>;
|
|
15
|
+
export declare const ProgressBadge: ComponentStory<any>;
|
|
16
|
+
export declare const Redirect2: ComponentStory<any>;
|
|
17
|
+
export declare const SearchIconComponent: ComponentStory<any>;
|
|
18
|
+
export declare const SmallCheck: ComponentStory<any>;
|
|
19
|
+
export declare const Customise: ComponentStory<any>;
|
|
20
|
+
export declare const Enable: ComponentStory<any>;
|
|
21
|
+
export declare const GoLive: ComponentStory<any>;
|
|
22
|
+
export declare const Headset: ComponentStory<any>;
|
|
23
|
+
export declare const ListChecks: ComponentStory<any>;
|
|
24
|
+
export declare const Marketing: ComponentStory<any>;
|
|
25
|
+
export declare const Nudges: ComponentStory<any>;
|
|
26
|
+
export declare const OnboardingLogoStory: ComponentStory<any>;
|
|
27
|
+
export declare const OrderTracking: ComponentStory<any>;
|
|
28
|
+
export declare const PlusIconComponent: ComponentStory<any>;
|
|
29
|
+
export declare const Shopping: ComponentStory<any>;
|
|
30
|
+
export declare const Support: ComponentStory<any>;
|
|
31
|
+
export declare const Training: ComponentStory<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../../assets/icons/Bik_logo.svg.js";import t from"../../../assets/icons/locked.svg.js";import{useState as
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../../assets/icons/Bik_logo.svg.js";import t from"../../../assets/icons/locked.svg.js";import{useState as s,useRef as l,useMemo as r,useEffect as d,useCallback as c,Fragment as u}from"react";import a from"../../progress-bar/CircularProgressBar.js";import{COLORS as v}from"../../../constants/Theme.js";import{NavigationHyperlink as p}from"../../navigation-hyperlink/NavigationHyperlink.js";import{SidebarV2Popup as h}from"./SidebarV2Popup.js";import{SideBarV2Container as g,MainSideBarV2MenuWrapper as m,SibeBarV2MenuItem as y,SidebarMainMenu as k,SidebarMenuItemInner as M,SidebarNewTag as b,SidebarLockedChannel as S,SidebarMenuItemContainer as L,SidebarMenuItemText as w}from"./SidebarV2Styles.js";import{SimpleSidebarV2 as j}from"./SimpleSidebarV2.js";const f=t=>{const{logoSvg:v,allMenuList:b,activeMainMenu:S,activeSubMenu:L,router:w,onClickingMainMenu:f,onClickingSubMenu:C,onClickingAccessUpgradePanel:I,onClickingPopupMenuItem:N,popupMinHeight:O,isNewSidebar:P,menuStyle:A}=t,[B,E]=s(S),[F,_]=s(),[x,D]=s(L),[T,U]=s(!1),[R,V]=s(),[z,K]=s(),[W,q]=s(),G=l(null),J=r((()=>b.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[b]);d((()=>{E(S)}),[S]),d((()=>{D(L)}),[L]);const Q=c((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(V(void 0),_(void 0),U(!0),E(e),e.path||f(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?D(null==e?void 0:e.children[0]):D({}),_(void 0),setTimeout((()=>{U(!1)}),1e3))}),[f]),X=c((e=>{var i,n;if($(),_(void 0),V(void 0),"popup"==(null==e?void 0:e.layout)){const i=ie();i&&K(i),V(e)}else{const o=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(o){const i=Y(o,e);q(i)}_(e)}}),[]),Y=(e,i)=>{const n=e.getBoundingClientRect();let o=n.top;if(window.innerHeight<=768)return o;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;o=n.top+e-200}return o};d((()=>{const e=()=>{const e=ie();e&&K(e),Z()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const Z=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},$=c((()=>{G.current&&(clearTimeout(G.current),G.current=null)}),[]),ee=c((()=>{$(),G.current=setTimeout((()=>{_(void 0),V(void 0)}),150)}),[$]),ie=()=>{var e,i;if(R){const n=(null===(i=null===(e=R.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||R.key.toString()+"_sub",o=document.getElementById(n);if(o){const e=o.getBoundingClientRect();let i=e.top;const n=null!=O?O:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e(g,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:v||i(o,{})})),e(m,Object.assign({style:A},{children:[null==b?void 0:b.map(((o,t)=>{var s,l;return e(u,{children:[o.path?i(p,Object.assign({href:o.path,router:w},{children:i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee})})):i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee}),e(n,{children:["popup"===o.layout&&(null===(s=null==R?void 0:R.children)||void 0===s?void 0:s.length)&&i(h,{top:null!=z?z:void 0,menuList:null==R?void 0:R.children,onClickingPopupMenu:e=>{N&&N(e),V(void 0)},onMouseEnterOnMenu:$,onMouseLeaveOnMenu:ee}),(null===(l=null==F?void 0:F.children)||void 0===l?void 0:l.length)&&i(j,{menuList:null==F?void 0:F.children,width:200,activeMenu:x,onMouseEnterOnMenu:$,onMouseLeaveOnMenu:()=>_(void 0),left:78,postion:"fixed",header:F.displayName,theme:"brand",router:w,showAccessUpgradePanel:F.showAccessUpgradePanel,onMenuClick:(e,i)=>{D(e),E(F),_(void 0),V(void 0),i&&C(e)},onUpgrade:I,top:P&&W||0,isNewSidebar:P})]})]},t)})),"number"==typeof t.onboardingPercentage&&i(y,{children:i(k,{children:i(M,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===J?0:1===J?64:128},{children:i(a,{percentage:t.onboardingPercentage,width:48})}))})})]}))]})},C=e=>{const{icon:o,isActive:t,activeStateIcon:s,hoverStateIcon:l,isHovered:r}=e,d=o,c=s,u=l;return i(n,{children:t&&r||t?i(c,{width:16,height:16,color:v.content.primaryInverse}):r?i(u,{width:16,height:16,color:v.content.primaryInverse}):i(d,{width:16,height:16,color:v.content.secondaryInverse})})},H=n=>{let{option:o,index:s,onClickMainMenuLogic:l,setHandleHoverForFullLayout:r,isDisabled:d,mainActiveMenu:c,hoveredComp:u,popupMenu:a,onMouseLeaveMenuItem:v}=n;var p,h,g,m,j,f;return i(y,{children:e(k,Object.assign({id:(null===(h=null===(p=o.displayName)||void 0===p?void 0:p.split(" "))||void 0===h?void 0:h.join(""))||o.key.toString(),onClick:()=>!d&&l(o),onMouseEnter:()=>{r(o)},onMouseLeave:v,onFocus:()=>{},"aria-hidden":"true"},{children:[o.isNew&&i(b,Object.assign({isLastSticky:o.isLastSticky},{children:"NEW"})),o.isLocked&&i(S,Object.assign({isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky},{children:i(t,{height:16,width:16})})),e(M,Object.assign({id:(null===(m=null===(g=o.displayName)||void 0===g?void 0:g.split(" "))||void 0===m?void 0:m.join(""))+"_sub"||o.key.toString()+"_sub",isActive:(null==c?void 0:c.key)===o.key,isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky,isHovered:o.key===(null==u?void 0:u.key),isNew:o.isNew},{children:[i(C,{icon:o.icon,isActive:o.key==(null==c?void 0:c.key),activeStateIcon:null!==(j=o.activeIcon)&&void 0!==j?j:{},hoverStateIcon:null!==(f=o.hoverIcon)&&void 0!==f?f:{},isHovered:o.key==(null==u?void 0:u.key)||o.key==(null==a?void 0:a.key)}),i(L,{children:i(w,Object.assign({isActive:(null==o?void 0:o.key)===(null==c?void 0:c.key)},{children:o.displayName}))})]}),s)]}),s)})};export{f as BikSidebarV2};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,FONTS as n}from"../../../constants/Theme.js";const
|
|
1
|
+
import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,FONTS as n}from"../../../constants/Theme.js";const a=e.div`
|
|
2
2
|
background-color: #28034e;
|
|
3
3
|
width: 72px;
|
|
4
4
|
justify-content: space-between;
|
|
@@ -23,11 +23,11 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
23
23
|
object-fit: container;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
`,
|
|
26
|
+
`,d=e.div`
|
|
27
27
|
margin: 0px 0px 16px;
|
|
28
|
-
padding-bottom: 8px;
|
|
29
28
|
`,p=e.div``,s=e.div`
|
|
30
|
-
|
|
29
|
+
overflow-y: auto;
|
|
30
|
+
padding: 0px 8px;
|
|
31
31
|
margin-bottom: 6px;
|
|
32
32
|
> * {
|
|
33
33
|
gap: 4px;
|
|
@@ -48,7 +48,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
48
48
|
z-index: 1;
|
|
49
49
|
}
|
|
50
50
|
`}}
|
|
51
|
-
`,
|
|
51
|
+
`,c=e.div`
|
|
52
52
|
position: absolute;
|
|
53
53
|
right: 10px;
|
|
54
54
|
margin-top: -5px;
|
|
@@ -64,7 +64,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
64
64
|
z-index: 1;
|
|
65
65
|
}
|
|
66
66
|
`}}
|
|
67
|
-
`,
|
|
67
|
+
`,x=e.div`
|
|
68
68
|
display: flex;
|
|
69
69
|
flex-direction: column;
|
|
70
70
|
border-radius: 10px;
|
|
@@ -93,27 +93,23 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
93
93
|
`}}
|
|
94
94
|
|
|
95
95
|
${e=>{let{isActive:i,isHovered:o}=e;return i&&o&&t`
|
|
96
|
-
|
|
97
|
-
border: 1px solid ${r.brand[700]};
|
|
98
|
-
background-color: ${r.brand[800]};
|
|
96
|
+
background-color: ${r.brand[700]};
|
|
99
97
|
`}}
|
|
100
98
|
|
|
101
99
|
|
|
102
100
|
${e=>{let{isLastSticky:i}=e;return i&&t`
|
|
103
101
|
@media (min-height: 768px) {
|
|
104
102
|
position: absolute;
|
|
105
|
-
bottom:
|
|
106
|
-
|
|
107
|
-
right: 6px;
|
|
103
|
+
bottom: 64px;
|
|
104
|
+
width: 85%;
|
|
108
105
|
}
|
|
109
106
|
`}}
|
|
110
107
|
|
|
111
108
|
${e=>{let{is2ndLastSticky:i}=e;return i&&t`
|
|
112
109
|
@media (min-height: 768px) {
|
|
113
110
|
position: absolute;
|
|
114
|
-
bottom:
|
|
115
|
-
|
|
116
|
-
right: 6px;
|
|
111
|
+
bottom: 0px;
|
|
112
|
+
width: 85%;
|
|
117
113
|
}
|
|
118
114
|
`}}
|
|
119
115
|
|
|
@@ -121,15 +117,14 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
121
117
|
@media (min-height: 768px) {
|
|
122
118
|
position: absolute;
|
|
123
119
|
bottom: ${i}px;
|
|
124
|
-
|
|
125
|
-
right: 6px;
|
|
120
|
+
width: 85%;
|
|
126
121
|
}
|
|
127
122
|
`}}
|
|
128
|
-
`,
|
|
123
|
+
`,u=e.div`
|
|
129
124
|
display: flex;
|
|
130
125
|
flex-direction: row;
|
|
131
126
|
cursor: pointer;
|
|
132
|
-
`,
|
|
127
|
+
`,l=e(i)`
|
|
133
128
|
user-select: none;
|
|
134
129
|
color: ${e=>{let{isActive:t}=e;return t?o.content.primaryInverse:o.content.secondaryInverse}};
|
|
135
130
|
margin-bottom: 0px;
|
|
@@ -166,7 +161,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
166
161
|
position: absolute;
|
|
167
162
|
right: 100%;
|
|
168
163
|
top: 0;
|
|
169
|
-
width:
|
|
164
|
+
width: 24px;
|
|
170
165
|
height: 100%;
|
|
171
166
|
}
|
|
172
167
|
}
|
|
@@ -284,4 +279,4 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
|
|
|
284
279
|
border-radius: 8px;
|
|
285
280
|
}
|
|
286
281
|
}
|
|
287
|
-
`;export{
|
|
282
|
+
`;export{d as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,a as SideBarV2Container,c as SidebarLockedChannel,s as SidebarMainMenu,u as SidebarMenuItemContainer,x as SidebarMenuItemInner,l as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as
|
|
1
|
+
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as l}from"../tooltips/Tooltip.js";import{IconButton as s}from"./IconButton.styled.js";import{getIconColor as r}from"./theme.js";const d=i(((i,d)=>{var{id:n,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:u,svgStyle:g,iconColor:j,disabledTooltip:f}=i,B=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const T=r(c,y,h),I=e(s,Object.assign({id:n,ref:d,style:u,iconButtonType:c,bordered:m,disabled:y,isSelected:h},B,{children:o.createElement(a,{height:p,width:b,color:j||T,style:Object.assign({display:"block"},null!=g?g:{})})}));return y&&f?e(l,Object.assign({body:f},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:I}))})):I}));d.displayName="IconButton";export{d as IconButton};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
|
|
2
|
-
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding:
|
|
2
|
+
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
|
|
3
3
|
`;export{r as IconButton};
|
|
@@ -40,10 +40,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
40
40
|
*/
|
|
41
41
|
isSelected?: boolean;
|
|
42
42
|
iconColor?: string;
|
|
43
|
-
/**
|
|
44
|
-
* Custom padding for the icon button container
|
|
45
|
-
* @default 6
|
|
46
|
-
*/
|
|
47
|
-
iconPadding?: number;
|
|
48
43
|
disabledTooltip?: string;
|
|
49
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as v}from"./Input-helper.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{TitleSmall as p,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import x from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as j,MaxCharStyle as C,InputWrapper as T,IconHolder as O,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as B,InputHeader as L}from"./Input.styled.js";const H=l(((l,H)=>{var D,E,M,P,S,z,A,F;const{placeholder:K,leftIcon:N,rightIcon:R,labelText:G,maxCharLimit:W,isRequired:_,hintText:q,type:U,state:V,validate:$,variant:J,button:Q,suffixText:X,prefixText:Y,onChangeText:Z,value:ee,noErrorHint:te,reset:ie,rangeValidation:ne,noKeyDownChange:le,version:re,noMaxCharCheck:oe,labelElement:ae,autoGrow:se,minHeight:ce,maxHeight:he,labelTextBold:de,truncateText:ue,maxCharLimitPosition:ve,hightlightInputColor:ge,onKeyDownEvent:pe,hideInputHeader:me,hideBorder:be,inputWrapperStyles:xe,minCharsToTrigger:fe,isDisabled:ye=!1,allowUnsafeInput:je}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),Ce=null==N?void 0:N.icon,Te=null==R?void 0:R.icon,[Oe,we]=r(!1),[Ie,ke]=r(!1),[Be,Le]=r(),He="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(f),[Ee,Me]=r(""),Pe=a(null),Se=null!=H?H:Pe;s((()=>{Me(ee||""),!ee&&se&&(Se.current.style.height=ce||"48px")}),[ee]),s((()=>{var e;Se.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Se.current))}),[Se]),s((()=>{const e=Se.current;if(e&&["phonenumber","zip","number"].includes(U))return e.addEventListener("wheel",Ke,{passive:!1}),()=>{e.removeEventListener("wheel",Ke)}}),[]),s((()=>{ie&&Me("")}),[ie]),s((()=>{var e;ke(!!l.isActive),l.isActive&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Le(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;we(!1),("invalid"===l.state||Be||"disabled-invalid"===l.state)&&we(!0),"active"===l.state&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.state,Be]),s((()=>{we(!!Be||"invalid"===l.state)}),[Be,l.state]);const ze=function(e){if(h(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},Ae=()=>"zip"===U?6:2e3,Fe=e=>{const t=0!==W?W:Ae(),i=fe,n=e.target.value;pe&&(!n.length||n.length>=i)&&pe(e),le||n.length&&!(n.length>=i)||Z(ee||"",e),oe||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Ke=e=>{e.preventDefault()},Ne=e=>{let t=e.target.value;const i=0!==W?W+1:Ae(),n=fe;if(!je&&d(U)&&(t=u(t)),!oe&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),l.textControl||Me(t||""),n&&t&&t.length<n)return;Z(t,e),se&&(Se.current.style.height=`${Se.current.scrollHeight}px`,t||(Se.current.style.height=ce||"48px"));const r=$||v;if(!r||!h(r))return;const[o,a]=r(t,U,ne);we(!o),Le(l.errorMessage?l.errorMessage:a)},Re=e=>{var t;l.skipFocus||ke(!0),ze(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Ge=e=>{var t;l.skipFocus||ke(!1),ze(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},We=()=>{var n;return e(i,{children:["multiline"!==U&&t("input",{className:ue?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==De?void 0:De.input)&&void 0!==n?n:{},ref:Se,disabled:ye,type:["phonenumber","zip","number"].includes(U)?"number":U,value:Ee,onFocus:e=>Re(e),onBlur:e=>Ge(e),placeholder:K||"Enter here",onChange:Ne,onClick:e=>ze(l.onClick),onKeyDown:e=>Fe(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:Se,onFocus:e=>Re(e),onBlur:e=>Ge(e),onClick:e=>ze(l.onClick),disabled:ye,placeholder:K||"Enter here",onChange:Ne,onKeyDown:e=>Fe(e),maxLength:W>0?W:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:V,type:U,style:null!==(D=null==De?void 0:De.RootContainer)&&void 0!==D?D:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Be)&&e(j,Object.assign({invalid:!!Be},{children:[!!Be&&t(x,{width:16,height:16}),Be||q]})),W>0&&"BOTTOM"===ve&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(M=null===(E=(null!=ee?ee:"").toString())||void 0===E?void 0:E.length)&&void 0!==M?M:0,"/",W]}))]})),e(T,Object.assign({variant:J,state:V,width:l.width,isActive:"active"===V||Ie,isInvalid:Oe,style:null!==(S=null!==(P=null==De?void 0:De.InputWrapper)&&void 0!==P?P:xe)&&void 0!==S?S:{},version:re,height:l.height,hightlightInputColor:ge,hideBorder:be},{children:[!!Ce&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==N?void 0:N.callback),isLeft:!0,style:null!==(z=null==De?void 0:De.IconHolder)&&void 0!==z?z:{}},{children:t(Ce,{})})),!!Y&&t(w,Object.assign({variant:J},{children:Y})),"default"===J&&t(I,Object.assign({height:l.height,type:l.type,minHeight:ce,maxHeight:he,autoGrow:se},{children:We()})),["x-small","small"].includes(J)&&t(k,Object.assign({height:l.height,type:l.type},{children:We()})),!!Te&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==R?void 0:R.callback),isLeft:!1},{children:t(Te,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,onClick:()=>ze(null==Q?void 0:Q.onClick)}),Q&&Q.buttonProps&&t(c,Object.assign({},Q.buttonProps))]})),!me&&(!!G||!!W)&&e(L,Object.assign({invalid:Oe},{children:[ae&&ae,e("div",Object.assign({className:"label__container"},{children:[e(de?p:m,{children:[G,_?t("span",{children:"*"}):""]}),l.tooltipText&&t(g,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:Oe?b.content.negative:b.content.primary})})}))]})),W>0&&"TOP"===ve&&e(C,{children:[null!==(F=null===(A=(null!=ee?ee:"").toString())||void 0===A?void 0:A.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));H.displayName="Input";export{H as Input};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as t}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const
|
|
1
|
+
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as t}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const p=p=>{let{width:i,onDropdownItemClick:s,option:a,parents:m,allowParentSelection:d,maxLevels:c,hideGroupLabel:u,currentLevel:h,renderNestedMenu:x,version:v}=p;return e(l,{children:[!u&&o(t,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.content.placeholder},{children:a.label})),a.options.map(((e,r)=>o(n,{width:i,onDropdownItemClick:s,option:e,parents:m,allowParentSelection:d,maxLevels:c,currentLevel:h,renderNestedMenu:x,version:v},r)))]})};export{p as GroupedMenuList};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:y,option:j,parents:x,allowParentSelection:w,maxLevels:O,currentLevel:M,renderNestedMenu:S,version:C}=b;var I,T,L,k,D,E,N;const[P,R]=o.useState(!1),[B,H]=o.useState(!1),[W,q]=o.useState({top:0,left:0}),z=r({top:0,left:0}),A=!!j.children&&j.children.length>0,F=A&&(void 0===O||M<O);return e(d,Object.assign({
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:y,option:j,parents:x,allowParentSelection:w,maxLevels:O,currentLevel:M,renderNestedMenu:S,version:C}=b;var I,T,L,k,D,E,N;const[P,R]=o.useState(!1),[B,H]=o.useState(!1),[W,q]=o.useState({top:0,left:0}),z=r({top:0,left:0}),A=!!j.children&&j.children.length>0,F=A&&(void 0===O||M<O);return e(d,Object.assign({onMouseEnter:e=>{F&&(R(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();q({top:t.top,left:t.right}),z.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{R(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!y||null!==(e=j.disabled)&&void 0!==e&&e||A&&!w||y(j,x)})()},id:"menuItemWrapper",style:{cursor:null!==(I=j.disabled)&&void 0!==I&&I?"not-allowed":"pointer",backgroundColor:null!==(T=j.disabled)&&void 0!==T&&T?l.surface.standard:"transparent"}},{children:[j.customComponent?j.customComponent:e(a,Object.assign({isSelected:j.selected,isSubMenuOpen:P,isHovered:B,isDisabled:null!==(L=j.disabled)&&void 0!==L&&L,version:C},{children:[e(p,{children:[j.leadingIcon&&t(u,{children:j.leadingIcon}),e("div",{children:[t(s,Object.assign({style:{color:null!==(k=j.disabled)&&void 0!==k&&k?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary}},{children:j.label})),j.subText&&t(c,Object.assign({style:{color:null!==(D=j.disabled)&&void 0!==D&&D?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.secondary,marginTop:"2px"}},{children:j.subText}))]})]}),A?t(h,{children:t(i,{width:16,height:16,color:!F||null!==(E=j.disabled)&&void 0!==E&&E?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary})}):j.trailingIcon?t(h,{children:j.trailingIcon}):t(n,{})]})),!(null!==(N=j.disabled)&&void 0!==N&&N)&&j.children&&j.children.length>0&&F&&P&&t(m,Object.assign({width:f,className:"submenu",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:t(v,Object.assign({width:f,top:W.top,left:W.left},{children:t(g,Object.assign({version:C},{children:S(j.children,[...x,j],M+1)}))}))}))]}))};export{b as MenuItem};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as a}from"./MenuList.js";import{DropdownContainer as d,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const h=h=>{let{options:f,width:m,isSearchable:w,onDropdownItemClick:b,refElement:g,topOffset:j,leftOffset:O,isDropdownOpen:
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as a}from"./MenuList.js";import{DropdownContainer as d,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const h=h=>{let{options:f,width:m,isSearchable:w,onDropdownItemClick:b,refElement:g,topOffset:j,leftOffset:O,isDropdownOpen:v,onDropdownOutsideClick:x,allowParentSelection:L,maxLevels:y,hideGroupLabel:S,version:C="1.0"}=h;const D=t.useRef(null),[k,E]=o(f),I=e=>{const n=Array.isArray(f)?[...f]:[],t=[];for(;n.length>0;){const o=n.shift();o&&o.label.toLowerCase().includes(e.toLowerCase())&&t.push(o),o&&"children"in o&&o.children?n.push(...o.children):o&&"options"in o&&o.options&&n.push(...o.options)}const o=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=o(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=o(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));E(o(f))},z=e=>{D.current&&!D.current.contains(e.target)?x&&x(!0):x&&x(!1)};return r((()=>{v&&I("")}),[v]),r((()=>(document.addEventListener("mousedown",z),()=>{document.removeEventListener("mousedown",z)})),[]),r((()=>{E(f)}),[f]),e(c,Object.assign({refElement:g,topOffset:j,leftOffset:O},{children:v&&e("div",Object.assign({ref:D,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"3.0"===C?"4px":"8px",whiteSpace:"normal"}},{children:n(d,Object.assign({width:m,version:C},{children:[w&&e("div",Object.assign({style:{padding:"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:I,version:"3.0"===C?"3.0":"2.0"})})),e(p,Object.assign({width:m},{children:(null!=k?k:[]).length>0&&e(a,{width:null!=m?m:"200px",onDropdownItemClick:b,options:k,parents:[],allowParentSelection:L,maxLevels:y,hideGroupLabel:S,currentLevel:1,version:C})})),0===(null!=k?k:[]).length&&e(u,Object.assign({style:{width:null!=m?m:"200px"}},{children:e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{h as MultiLevelDropdown};
|
|
@@ -4,19 +4,13 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
|
|
|
4
4
|
}, never>;
|
|
5
5
|
export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
width?: string | undefined;
|
|
7
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
8
7
|
}, never>;
|
|
9
8
|
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
10
9
|
width?: string | undefined;
|
|
11
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
12
|
-
}, never>;
|
|
13
|
-
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
|
|
14
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
15
10
|
}, never>;
|
|
11
|
+
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
12
|
export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
|
-
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
18
|
-
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
19
|
-
}, never>;
|
|
13
|
+
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
14
|
export interface MenuItemContainerProps {
|
|
21
15
|
isSelected?: boolean;
|
|
22
16
|
isHovered?: boolean;
|
|
@@ -1,78 +1,75 @@
|
|
|
1
|
-
import e from"styled-components";import{COLORS as
|
|
1
|
+
import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
border-radius: ${e=>{let{version:
|
|
3
|
+
border-radius: ${e=>{let{version:i}=e;return"3.0"===i?4:8}}px;
|
|
4
4
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
-
padding-bottom:
|
|
5
|
+
padding-bottom: 4px;
|
|
6
6
|
`,r=e.div`
|
|
7
|
-
width: ${e=>{let{width:
|
|
7
|
+
width: ${e=>{let{width:i}=e;return i||"200px"}};
|
|
8
8
|
max-width: 300px;
|
|
9
9
|
max-height: 280px;
|
|
10
10
|
overflow-y: scroll;
|
|
11
|
-
padding:
|
|
11
|
+
padding: 4px 0 0;
|
|
12
12
|
&::-webkit-scrollbar {
|
|
13
13
|
width: 0px;
|
|
14
14
|
}
|
|
15
15
|
`,n=e.div`
|
|
16
|
-
margin-top:
|
|
17
|
-
height:
|
|
18
|
-
width: ${e=>{let{width:
|
|
19
|
-
display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
|
|
20
|
-
align-items: center;
|
|
21
|
-
justify-content: center;
|
|
16
|
+
margin-top: 64px;
|
|
17
|
+
height: 200px;
|
|
18
|
+
width: ${e=>{let{width:i}=e;return i||"200px"}};
|
|
22
19
|
`,o=e.div`
|
|
23
20
|
width: 100%;
|
|
24
21
|
justify-content: center;
|
|
25
22
|
cursor: pointer;
|
|
26
23
|
align-items: center;
|
|
27
24
|
justify-content: space-between;
|
|
28
|
-
margin:
|
|
25
|
+
margin: 4px 0;
|
|
29
26
|
`,d=e.div`
|
|
30
27
|
z-index: 1000;
|
|
31
28
|
position: relative;
|
|
32
29
|
margin: 0px;
|
|
33
30
|
padding: 0px;
|
|
34
31
|
width: 100%;
|
|
35
|
-
`,
|
|
32
|
+
`,p=e.div`
|
|
36
33
|
position: relative;
|
|
37
|
-
padding:
|
|
34
|
+
padding: 1px 4px;
|
|
38
35
|
cursor: pointer;
|
|
39
36
|
width: 100%;
|
|
40
37
|
&:hover > .submenu,
|
|
41
38
|
&:focus-within > .submenu {
|
|
42
39
|
display: block;
|
|
43
40
|
}
|
|
44
|
-
`,
|
|
41
|
+
`,s=e.div`
|
|
45
42
|
position: relative;
|
|
46
|
-
padding:
|
|
43
|
+
padding: 4px 8px 4px 8px;
|
|
47
44
|
transition: background-color 0.2s;
|
|
48
45
|
width: 100%;
|
|
49
|
-
border-radius:
|
|
46
|
+
border-radius: 8px;
|
|
50
47
|
justify-content: center;
|
|
51
|
-
background-color: ${e=>{let{isSelected:
|
|
52
|
-
color: ${e=>{let{isSelected:
|
|
48
|
+
background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?i.surface.standard:t||n?"3.0"===d?i.background.brandLight:i.background.positive.light:r?i.surface.hovered:i.surface.standard}};
|
|
49
|
+
color: ${e=>{let{isSelected:t,isSubMenuOpen:r,version:n}=e;return t||r?"3.0"===n?i.text.primary:i.content.positive:i.content.primary}};
|
|
53
50
|
display: flex;
|
|
54
51
|
align-items: center;
|
|
55
52
|
justify-content: space-between;
|
|
56
53
|
|
|
57
54
|
&:hover {
|
|
58
|
-
background-color: ${e=>{let{isSelected:
|
|
55
|
+
background-color: ${e=>{let{isSelected:t,isDisabled:r,version:n}=e;return r?i.surface.standard:t?"3.0"===n?i.background.brandLight:i.background.positive.light:i.surface.hovered}};
|
|
59
56
|
}
|
|
60
57
|
`,a=e.div`
|
|
61
58
|
display: flex;
|
|
62
59
|
align-items: center;
|
|
63
60
|
gap: 8px;
|
|
64
|
-
`,
|
|
61
|
+
`,x=e.div`
|
|
65
62
|
z-index: 1001;
|
|
66
63
|
position: fixed;
|
|
67
64
|
border-left: 4px solid transparent;
|
|
68
|
-
`,
|
|
65
|
+
`,l=e.div`
|
|
69
66
|
margin: 4px;
|
|
70
|
-
background-color: ${
|
|
67
|
+
background-color: ${i.surface.standard};
|
|
71
68
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
72
|
-
border-radius: ${e=>{let{version:
|
|
73
|
-
padding-top:
|
|
69
|
+
border-radius: ${e=>{let{version:i}=e;return"3.0"===i?4:8}}px;
|
|
70
|
+
padding-top: 4px;
|
|
74
71
|
max-height: 480px;
|
|
75
|
-
padding-bottom:
|
|
72
|
+
padding-bottom: 4px;
|
|
76
73
|
overflow-y: scroll;
|
|
77
74
|
|
|
78
75
|
&::-webkit-scrollbar {
|
|
@@ -92,10 +89,10 @@ import e from"styled-components";import{COLORS as t}from"../../constants/Theme.j
|
|
|
92
89
|
align-items: center;
|
|
93
90
|
justify-content: center;
|
|
94
91
|
margin-left: 4px;
|
|
95
|
-
`,
|
|
92
|
+
`,g=e.div`
|
|
96
93
|
width: ${e=>e.width};
|
|
97
|
-
`,
|
|
94
|
+
`,h=e(x)`
|
|
98
95
|
width: ${e=>e.width};
|
|
99
96
|
top: ${e=>e.top}px;
|
|
100
97
|
left: ${e=>e.left}px;
|
|
101
|
-
`;export{a as ContentContainer,
|
|
98
|
+
`;export{a as ContentContainer,t as DropdownContainer,o as GroupedMenuListContainer,c as LeadingIconContainer,s as MenuItemContainer,p as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,d as StyledMenuList,h as StyledSubMenuWrapper,g as SubMenuContainer,l as SubMenuListContainer,x as SubMenuWrapper,u as TrailingIconContainer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const
|
|
1
|
+
import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const a=a=>{let{title:c="What's new",tooltip:h="What's new",searchPlaceholder:m="Search posts",emptyStateTitle:l="Nothing new!",emptyStateDescription:p="There are no new updates or features at the moment. Check back soon!",noResultsText:d="Sorry, no results found.",width:u="480px",onContentClick:C,renderCustomContent:w,buttonTestId:f="whats-new-button",iconWidth:W=32,iconHeight:g=32,customIcon:S}=a;const[T,k]=n(!1),{whatsNewContent:x,isLoading:y,newContentCount:N}=r();return t(e,{children:[o(i,{onClick:()=>k(!0),newContentCount:N,isOpen:T,isLoading:y,tooltip:h,testId:f,iconWidth:W,iconHeight:g,customIcon:S}),o(s,{isOpen:T,onClose:()=>k(!1),content:x,isLoading:y,title:c,searchPlaceholder:m,emptyStateTitle:l,emptyStateDescription:p,noResultsText:d,width:u,onContentClick:t=>{C&&C(t)},renderCustomContent:w})]})};export{a as WhatsNew};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as n}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as t,jsx as n}from"react/jsx-runtime";import i from"../../assets/icons/whatsNew.svg.js";import{COLORS as e}from"../../constants/Theme.js";import{Tooltip as o}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as s}from"./WhatsNew.styles.js";const r=r=>{let{onClick:c,newContentCount:a=0,isOpen:d=!1,isLoading:l=!1,tooltip:m="What's new",testId:h="whats-new-button",iconWidth:p=32,iconHeight:g=32,customIcon:b}=r;return l?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[n("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),n("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):n(s,Object.assign({count:a},{children:t("div",Object.assign({className:"main-icon-class "+(d?"icon-active":""),style:{color:d?e.content.brand:e.content.primary},onClick:c,"data-testid":h},{children:[n(o,Object.assign({body:m,placement:"bottom"},{children:n("div",{children:b?n(b,{width:p,height:g,color:d?e.content.brand:e.content.primary}):n(i,{width:p,height:g})})})),a>0&&n("div",Object.assign({className:"notification--count"},{children:n("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};export{r as WhatsNewButton};
|