@bikdotai/bik-component-library 0.0.507-beta.filter-4 → 0.0.507-beta.filters-1

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.
Files changed (31) hide show
  1. package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
  2. package/dist/cjs/components/checkBox/CheckBox.d.ts +0 -2
  3. package/dist/cjs/components/checkBox/CheckBox.js +1 -1
  4. package/dist/cjs/components/checkBox/CheckBox.styled.d.ts +0 -1
  5. package/dist/cjs/components/checkBox/CheckBox.styled.js +3 -4
  6. package/dist/cjs/components/checkList/CheckList.d.ts +0 -1
  7. package/dist/cjs/components/checkList/CheckList.js +1 -1
  8. package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
  9. package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts +0 -1
  10. package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js +1 -1
  11. package/dist/cjs/components/dropdown/type.d.ts +0 -2
  12. package/dist/cjs/components/radioButton/RadioButton.d.ts +0 -1
  13. package/dist/cjs/components/radioButton/RadioButton.js +1 -1
  14. package/dist/cjs/components/radioList/RadioList.d.ts +0 -1
  15. package/dist/cjs/components/radioList/RadioList.js +1 -1
  16. package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
  17. package/dist/esm/components/checkBox/CheckBox.d.ts +0 -2
  18. package/dist/esm/components/checkBox/CheckBox.js +1 -1
  19. package/dist/esm/components/checkBox/CheckBox.styled.d.ts +0 -1
  20. package/dist/esm/components/checkBox/CheckBox.styled.js +5 -6
  21. package/dist/esm/components/checkList/CheckList.d.ts +0 -1
  22. package/dist/esm/components/checkList/CheckList.js +1 -1
  23. package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
  24. package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts +0 -1
  25. package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js +1 -1
  26. package/dist/esm/components/dropdown/type.d.ts +0 -2
  27. package/dist/esm/components/radioButton/RadioButton.d.ts +0 -1
  28. package/dist/esm/components/radioButton/RadioButton.js +1 -1
  29. package/dist/esm/components/radioList/RadioList.d.ts +0 -1
  30. package/dist/esm/components/radioList/RadioList.js +1 -1
  31. package/package.json +1 -1
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
@@ -10,7 +10,5 @@ export type CheckBoxProps = {
10
10
  skipHoverState?: boolean;
11
11
  labelSize?: 'DEFAULT' | 'SMALL';
12
12
  rightComponent?: JSX.Element;
13
- checkboxBorderColor?: string;
14
- boldOnChecked?: boolean;
15
13
  };
16
14
  export declare const CheckBox: React.FC<CheckBoxProps>;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),i=require("./CheckBox.styled.js"),l=require("../TypographyStyle.js"),t=require("../../constants/Theme.js");const a=s=>e.jsxs("svg",Object.assign({width:s.isSmall?"16":"18",height:s.isSmall?"16":"18",viewBox:s.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0",y:"0",width:s.isSmall?"16":"18",height:s.isSmall?"16":"18",rx:"4",fill:s.isDisabled?t.COLORS.content.inactive:t.COLORS.background.positive.vibrant}),!s.isPartial&&e.jsx("svg",Object.assign({width:s.isSmall?"8":"10",height:s.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),s.isPartial&&e.jsx("rect",{x:"5",y:s.isSmall?"7":"8",width:s.isSmall?"6":"8",height:"2",rx:"1",fill:t.COLORS.surface.standard})]}));exports.CheckBox=r=>{const[o,c]=s.useState(r.isChecked||!1),[d,n]=s.useState(r.isPartiallyChecked||!1),[h,x]=s.useState(r.isDisabled||!1),[b,S]=s.useState(!1),[C,u]=s.useState(!1);s.useEffect((()=>{c(r.isChecked)}),[r.isChecked]),s.useEffect((()=>{x(r.isDisabled||!1)}),[r.isDisabled]),s.useEffect((()=>{n(r.isPartiallyChecked||!1)}),[r.isPartiallyChecked]);return e.jsxs(i.CheckboxContainer,Object.assign({onClick:e=>{var s;if(!r.isDisabled){const i=!o;d?n(!d):c(i),null===(s=r.onValueChange)||void 0===s||s.call(r,i,r.value,e)}},onMouseEnter:()=>S(!r.skipHoverState),onMouseLeave:()=>S(!1),onMouseDown:()=>u(!r.skipHoverState),onMouseUp:()=>u(!1)},{children:[e.jsx(i.CheckboxIcon,Object.assign({checked:o,hovered:b,clicked:C,isDisabled:h,size:r.size,borderColor:r.checkboxBorderColor},{children:o&&e.jsx(a,{isPartial:d||!1,isDisabled:h,isSmall:"SMALL"===r.size})})),r.label?r.boldOnChecked&&o?e.jsx(l.TitleSmall,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):"SMALL"===r.size||"SMALL"===r.labelSize?e.jsx(l.BodySecondary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):e.jsx(l.BodyPrimary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})):e.jsx(e.Fragment,{}),r.rightComponent]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./CheckBox.styled.js"),l=require("../TypographyStyle.js"),t=require("../../constants/Theme.js");const a=i=>e.jsxs("svg",Object.assign({width:i.isSmall?"16":"18",height:i.isSmall?"16":"18",viewBox:i.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0",y:"0",width:i.isSmall?"16":"18",height:i.isSmall?"16":"18",rx:"4",fill:i.isDisabled?t.COLORS.content.inactive:t.COLORS.background.positive.vibrant}),!i.isPartial&&e.jsx("svg",Object.assign({width:i.isSmall?"8":"10",height:i.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),i.isPartial&&e.jsx("rect",{x:"5",y:i.isSmall?"7":"8",width:i.isSmall?"6":"8",height:"2",rx:"1",fill:t.COLORS.surface.standard})]}));exports.CheckBox=r=>{const[c,n]=i.useState(r.isChecked||!1),[o,d]=i.useState(r.isPartiallyChecked||!1),[h,S]=i.useState(r.isDisabled||!1),[x,u]=i.useState(!1),[b,C]=i.useState(!1);return i.useEffect((()=>{n(r.isChecked)}),[r.isChecked]),i.useEffect((()=>{S(r.isDisabled||!1)}),[r.isDisabled]),i.useEffect((()=>{d(r.isPartiallyChecked||!1)}),[r.isPartiallyChecked]),e.jsxs(s.CheckboxContainer,Object.assign({onClick:e=>{var i;if(!r.isDisabled){const s=!c;o?d(!o):n(s),null===(i=r.onValueChange)||void 0===i||i.call(r,s,r.value,e)}},onMouseEnter:()=>u(!r.skipHoverState),onMouseLeave:()=>u(!1),onMouseDown:()=>C(!r.skipHoverState),onMouseUp:()=>C(!1)},{children:[e.jsx(s.CheckboxIcon,Object.assign({checked:c,hovered:x,clicked:b,isDisabled:h,size:r.size},{children:c&&e.jsx(a,{isPartial:o||!1,isDisabled:h,isSmall:"SMALL"===r.size})})),r.label&&"SMALL"!==r.size&&"SMALL"!==r.labelSize&&e.jsx(l.BodyPrimary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})),r.label&&("SMALL"===r.size||"SMALL"===r.labelSize)&&e.jsx(l.BodySecondary,Object.assign({color:r.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary},{children:r.label})),r.rightComponent]}))};
@@ -5,5 +5,4 @@ export declare const CheckboxIcon: import("styled-components").StyledComponent<"
5
5
  clicked: boolean;
6
6
  isDisabled: boolean;
7
7
  size?: "SMALL" | "DEFAULT" | undefined;
8
- borderColor?: string | undefined;
9
8
  }, never>;
@@ -12,13 +12,12 @@
12
12
  justify-content: center;
13
13
  align-items: center;
14
14
  box-sizing: content-box;
15
- ${s=>{var t;return s.isDisabled?e.css`
15
+ ${s=>s.isDisabled?e.css`
16
16
  border: ${"SMALL"===s.size?1.5:2}px solid
17
17
  ${i.COLORS.content.inactive};
18
18
  `:e.css`
19
- border: ${"SMALL"===s.size?1.5:2}px solid
20
- ${null!==(t=s.borderColor)&&void 0!==t?t:"black"};
21
- `}}
19
+ border: ${"SMALL"===s.size?1.5:2}px solid black;
20
+ `}
22
21
  ${i=>i.checked&&e.css`
23
22
  border: 0px;
24
23
  width: 18px;
@@ -8,7 +8,6 @@ export type CheckListProps = {
8
8
  subTitle?: string;
9
9
  listItems: CheckListItem[];
10
10
  onChange: (options: CheckListItem[]) => void;
11
- listContainerStyles?: React.CSSProperties;
12
11
  };
13
12
  export declare const CheckList: React.FC<CheckListProps>;
14
13
  export {};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),t=require("../checkBox/CheckBox.js"),i=require("./CheckList.styled.js"),r=require("../TypographyStyle.js"),c=require("../../constants/Theme.js");exports.CheckList=l=>{var n;const[a,o]=s.useState(l.listItems);s.useEffect((()=>{o(l.listItems)}),[l.listItems]);const u=(e,s)=>{const t=[...a],i=a.find((e=>e.value===s));i&&(i.isChecked=e),o(t);const r=t.filter((e=>e.isChecked));l.onChange(r)};return e.jsxs(i.CheckListStyled,{children:[(l.title||l.subTitle)&&e.jsxs("div",Object.assign({className:"title__container"},{children:[l.title&&e.jsx(r.TitleRegular,{children:l.title}),l.subTitle&&e.jsx(r.BodySecondary,Object.assign({color:c.COLORS.text.secondary},{children:l.subTitle}))]})),e.jsx("div",Object.assign({style:null!==(n=l.listContainerStyles)&&void 0!==n?n:{},className:"list__container"},{children:a.map((s=>e.jsx(t.CheckBox,Object.assign({},s,{onValueChange:u}),s.value)))}))]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),t=require("../checkBox/CheckBox.js"),i=require("./CheckList.styled.js"),r=require("../TypographyStyle.js"),c=require("../../constants/Theme.js");exports.CheckList=l=>{const[n,a]=s.useState(l.listItems);s.useEffect((()=>{a(l.listItems)}),[l.listItems]);const o=(e,s)=>{const t=[...n],i=n.find((e=>e.value===s));i&&(i.isChecked=e),a(t);const r=t.filter((e=>e.isChecked));l.onChange(r)};return e.jsxs(i.CheckListStyled,{children:[(l.title||l.subTitle)&&e.jsxs("div",Object.assign({className:"title__container"},{children:[l.title&&e.jsx(r.TitleRegular,{children:l.title}),l.subTitle&&e.jsx(r.BodySecondary,Object.assign({color:c.COLORS.text.secondary},{children:l.subTitle}))]})),e.jsx("div",Object.assign({className:"list__container"},{children:n.map((s=>e.jsx(t.CheckBox,Object.assign({},s,{onValueChange:o}),s.value)))}))]})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),n=require("../../hooks/useDropdown.js"),o=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),p=require("./searchbox/SearchBox.js"),d=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:x,isSearchable:f,isMultiSelect:g,width:v,allowFreeForm:w,height:b,onClose:y,onSelect:m,onSearch:O,version:q,skipSorting:M,hideSelectAll:C,primaryButtonText:D}=j;const{dropdownOptions:L,search:F,searchedString:A,searchedOptions:k,onApplyHandler:B,selectAllHandler:H,onMultiSelectClear:Z,onFreeFormSelect:T,onMultiSelectApply:P,latestDropdownOptionsRef:R,getSelectedOptions:_}=n.useDropdown(q,x,m,M,g,O),[z,E]=t.useState(null!=v?v:S),[I,K]=t.useState(null),N=t.useRef(null);s.useOutside(N,(()=>{if(K(null),g&&"2.0"===q){const e=_(R.current);null==y||y(e)}else null==y||y(L)}));const W=null!=b?b:h,G="number"==typeof W?f&&g?W-96:f&&!g||!f&&g?W-48:W:W;t.useEffect((()=>{const e=null!=v?v:S;if(null===I)E(e);else if("number"==typeof e)E(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));E(t)}}),[I]);const J=[],Q=(A&&O?k:L).map((e=>{var t,r;if(A&&!O){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(A.toLowerCase()))&&(J.push(!A||e.label===A),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(A.toLowerCase()))||(null===(r=e.searchKey)||void 0===r?void 0:r.toLowerCase().includes(A.toLowerCase()))?(J.push(!A||e.label===A),e):null}return e})).filter((e=>null!==e)),U=!!f&&A&&0===Q.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:q,ref:N,style:{width:z}},{children:[e.jsxs("div",Object.assign({style:{width:I?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!f&&e.jsx(p.SearchBox,{onSearch:F,version:q}),Q.length||A?e.jsxs(a.MenuListContainer,Object.assign({minHeight:W,maxHeight:G},{children:[!!g&&!U&&!C&&e.jsx(u.SelectAllMenu,{version:q,options:A&&O?k:L,onSelect:H}),!w&&U&&e.jsx(d.SearchZeroState,{height:G,searchedString:A}),w&&(U||!!J.length&&J.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:q,isMultiSelect:g,onSelect:T,searchedString:A}),e.jsx(l.MenuList,{version:q,onSelect:B,showDescription:function(e,t){K(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:Q})]})):e.jsx("div",Object.assign({style:{height:W,display:"flex"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!Q.length&&!A)&&"2.0"!==q&&e.jsx(c.default,{onClear:Z,onApply:P,list:A&&O?k:L,buttonText:D})]})),!!I&&e.jsx(o.Description,{title:I.title,description:I.description,version:q})]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),n=require("../../hooks/useDropdown.js"),o=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),p=require("./searchbox/SearchBox.js"),d=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:f,isSearchable:x,isMultiSelect:g,width:v,allowFreeForm:w,height:b,onClose:y,onSelect:m,onSearch:O,version:q,skipSorting:M}=j;const{dropdownOptions:C,search:D,searchedString:L,searchedOptions:F,onApplyHandler:A,selectAllHandler:k,onMultiSelectClear:B,onFreeFormSelect:H,onMultiSelectApply:Z,latestDropdownOptionsRef:P,getSelectedOptions:R}=n.useDropdown(q,f,m,M,g,O),[_,z]=t.useState(null!=v?v:S),[E,I]=t.useState(null),K=t.useRef(null);s.useOutside(K,(()=>{if(I(null),g&&"2.0"===q){const e=R(P.current);null==y||y(e)}else null==y||y(C)}));const N=null!=b?b:h,T="number"==typeof N?x&&g?N-96:x&&!g||!x&&g?N-48:N:N;t.useEffect((()=>{const e=null!=v?v:S;if(null===E)z(e);else if("number"==typeof e)z(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));z(t)}}),[E]);const W=[],G=(L&&O?F:C).map((e=>{var t,r;if(L&&!O){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(L.toLowerCase()))&&(W.push(!L||e.label===L),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(L.toLowerCase()))||(null===(r=e.searchKey)||void 0===r?void 0:r.toLowerCase().includes(L.toLowerCase()))?(W.push(!L||e.label===L),e):null}return e})).filter((e=>null!==e)),J=!!x&&L&&0===G.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:q,ref:K,style:{width:_}},{children:[e.jsxs("div",Object.assign({style:{width:E?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!x&&e.jsx(p.SearchBox,{onSearch:D,version:q}),G.length||L?e.jsxs(a.MenuListContainer,Object.assign({minHeight:N,maxHeight:T},{children:[!!g&&!J&&e.jsx(u.SelectAllMenu,{version:q,options:L&&O?F:C,onSelect:k}),!w&&J&&e.jsx(d.SearchZeroState,{height:T,searchedString:L}),w&&(J||!!W.length&&W.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:q,isMultiSelect:g,onSelect:H,searchedString:L}),e.jsx(l.MenuList,{version:q,onSelect:A,showDescription:function(e,t){I(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:G})]})):e.jsx("div",Object.assign({style:{height:N,display:"flex"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!G.length&&!L)&&"2.0"!==q&&e.jsx(c.default,{onClear:B,onApply:Z,list:L&&O?F:C})]})),!!E&&e.jsx(o.Description,{title:E.title,description:E.description,version:q})]}))};
@@ -4,6 +4,5 @@ declare const MultiSelectDropdownBottomBar: React.FC<{
4
4
  onClear?: () => void;
5
5
  onApply: () => void;
6
6
  list: DropdownOption[];
7
- buttonText?: string;
8
7
  }>;
9
8
  export default MultiSelectDropdownBottomBar;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),s=require("../../../../../constants/Theme.js"),n=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=o=>{let{onApply:l,onClear:i,list:u,buttonText:a}=o;const c=u.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(n.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:s.COLORS.content.primary}},{children:c?`${c} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{l()}})]}))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),s=require("../../../../../constants/Theme.js"),n=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=o=>{let{onApply:l,onClear:i,list:a}=o;const c=a.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(n.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:s.COLORS.content.primary}},{children:c?`${c} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:"Apply",onClick:()=>{l()}})]}))]}))};
@@ -16,8 +16,6 @@ export interface OpenDropdownProps {
16
16
  onSearch?: (key: string) => Promise<DropdownOption[]>;
17
17
  version?: '1.0' | '2.0';
18
18
  skipSorting?: boolean;
19
- hideSelectAll?: boolean;
20
- primaryButtonText?: string;
21
19
  }
22
20
  export type GroupedOption = {
23
21
  label?: string;
@@ -8,6 +8,5 @@ export type RadioButtonProps = {
8
8
  skipHoverState?: boolean;
9
9
  size?: 'DEFAULT' | 'SMALL';
10
10
  labelSize?: 'DEFAULT' | 'MEDIUM';
11
- boldOnChecked?: boolean;
12
11
  };
13
12
  export declare const RadioButton: React.FC<RadioButtonProps>;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./RadioButton.styled.js"),t=require("../TypographyStyle.js"),l=require("../../constants/Theme.js");const a=i=>{const s=i.isDisabled?l.COLORS.content.inactive:i.isActive?l.COLORS.background.positive.vibrant:l.COLORS.content.primary;return e.jsxs("svg",Object.assign({width:i.isSmall?"16":"20",height:i.isSmall?"16":"20",viewBox:i.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?6:9,stroke:s,strokeWidth:i.isSmall?1.5:2}),i.isActive&&e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?3:5,fill:i.isDisabled?l.COLORS.content.inactive:l.COLORS.background.positive.vibrant})]}))};exports.RadioButton=r=>{const[o,n]=i.useState(r.isActive||!1),[c,d]=i.useState(!1),[O,S]=i.useState(!1);i.useEffect((()=>{n(r.isActive)}),[r.isActive]);return e.jsxs(s.RadioButtonContainer,Object.assign({onClick:()=>{var e;if(!r.isDisabled){const i=!o;n(i),null===(e=r.onValueChange)||void 0===e||e.call(r,i,r.value)}},onMouseEnter:()=>d(!r.skipHoverState),onMouseLeave:()=>d(!1),onMouseDown:()=>S(!r.skipHoverState),onMouseUp:()=>S(!1)},{children:[e.jsx(s.RadioButtonIcon,Object.assign({checked:o,hovered:c,clicked:O,isDisabled:r.isDisabled||!1,size:r.size},{children:e.jsx(a,{isSmall:"SMALL"===r.size,isActive:o,isDisabled:r.isDisabled||!1})})),r.label?r.boldOnChecked&&o?e.jsx(t.TitleSmall,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):"SMALL"===r.size?e.jsx(t.BodyCaption,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):"MEDIUM"===r.labelSize?e.jsx(t.BodySecondary,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):e.jsx(t.BodyPrimary,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):e.jsx(e.Fragment,{})]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),s=require("./RadioButton.styled.js"),t=require("../TypographyStyle.js"),l=require("../../constants/Theme.js");const a=i=>{const s=i.isDisabled?l.COLORS.content.inactive:i.isActive?l.COLORS.background.positive.vibrant:l.COLORS.content.primary;return e.jsxs("svg",Object.assign({width:i.isSmall?"16":"20",height:i.isSmall?"16":"20",viewBox:i.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?6:9,stroke:s,strokeWidth:i.isSmall?1.5:2}),i.isActive&&e.jsx("circle",{cx:i.isSmall?"8":"10",cy:i.isSmall?"8":"10",r:i.isSmall?3:5,fill:i.isDisabled?l.COLORS.content.inactive:l.COLORS.background.positive.vibrant})]}))};exports.RadioButton=r=>{const[o,n]=i.useState(r.isActive||!1),[c,d]=i.useState(!1),[S,b]=i.useState(!1);i.useEffect((()=>{n(r.isActive)}),[r.isActive]);return e.jsxs(s.RadioButtonContainer,Object.assign({onClick:()=>{var e;if(!r.isDisabled){const i=!o;n(i),null===(e=r.onValueChange)||void 0===e||e.call(r,i,r.value)}},onMouseEnter:()=>d(!r.skipHoverState),onMouseLeave:()=>d(!1),onMouseDown:()=>b(!r.skipHoverState),onMouseUp:()=>b(!1)},{children:[e.jsx(s.RadioButtonIcon,Object.assign({checked:o,hovered:c,clicked:S,isDisabled:r.isDisabled||!1,size:r.size},{children:e.jsx(a,{isSmall:"SMALL"===r.size,isActive:o,isDisabled:r.isDisabled||!1})})),r.label?"SMALL"===r.size?e.jsx(t.BodyCaption,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):"MEDIUM"===r.labelSize?e.jsx(t.BodySecondary,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):e.jsx(t.BodyPrimary,Object.assign({color:r.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary},{children:r.label})):e.jsx(e.Fragment,{})]}))};
@@ -8,7 +8,6 @@ export type RadioListProps = {
8
8
  subTitle?: string;
9
9
  listItems: RadioListItem[];
10
10
  onChange: (option: RadioListItem) => void;
11
- listContainerStyles?: React.CSSProperties;
12
11
  };
13
12
  export declare const RadioList: React.FC<RadioListProps>;
14
13
  export {};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../radioButton/RadioButton.js"),i=require("./RadioList.styled.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js");exports.RadioList=l=>{var n;const[o,c]=t.useState(l.listItems);t.useEffect((()=>{c(l.listItems)}),[l.listItems]);const u=(e,t)=>{let s;const i=[...o];i.forEach((i=>{i.value===t?(s=i,i.isActive=e):i.isActive=!e})),c(i),l.onChange(s)};return e.jsxs(i.RadioListStyled,{children:[(l.title||l.subTitle)&&e.jsxs("div",Object.assign({className:"title__container"},{children:[l.title&&e.jsx(r.TitleRegular,{children:l.title}),l.subTitle&&e.jsx(r.BodySecondary,Object.assign({color:a.COLORS.text.secondary},{children:l.subTitle}))]})),e.jsx("div",Object.assign({style:null!==(n=l.listContainerStyles)&&void 0!==n?n:{},className:"list__container"},{children:o.map((t=>e.jsx(s.RadioButton,Object.assign({},t,{onValueChange:u}),t.value)))}))]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../radioButton/RadioButton.js"),i=require("./RadioList.styled.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js");exports.RadioList=l=>{const[n,c]=t.useState(l.listItems);t.useEffect((()=>{c(l.listItems)}),[l.listItems]);const o=(e,t)=>{let s;const i=[...n];i.forEach((i=>{i.value===t?(s=i,i.isActive=e):i.isActive=!e})),c(i),l.onChange(s)};return e.jsxs(i.RadioListStyled,{children:[(l.title||l.subTitle)&&e.jsxs("div",Object.assign({className:"title__container"},{children:[l.title&&e.jsx(r.TitleRegular,{children:l.title}),l.subTitle&&e.jsx(r.BodySecondary,Object.assign({color:a.COLORS.text.secondary},{children:l.subTitle}))]})),e.jsx("div",Object.assign({className:"list__container"},{children:n.map((t=>e.jsx(s.RadioButton,Object.assign({},t,{onValueChange:o}),t.value)))}))]})};
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
@@ -10,7 +10,5 @@ export type CheckBoxProps = {
10
10
  skipHoverState?: boolean;
11
11
  labelSize?: 'DEFAULT' | 'SMALL';
12
12
  rightComponent?: JSX.Element;
13
- checkboxBorderColor?: string;
14
- boldOnChecked?: boolean;
15
13
  };
16
14
  export declare const CheckBox: React.FC<CheckBoxProps>;
@@ -1 +1 @@
1
- import{jsxs as e,jsx as i,Fragment as l}from"react/jsx-runtime";import{useState as s,useEffect as t}from"react";import{CheckboxContainer as a,CheckboxIcon as r}from"./CheckBox.styled.js";import{TitleSmall as o,BodySecondary as d,BodyPrimary as n}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const h=l=>e("svg",Object.assign({width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",viewBox:l.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("rect",{x:"0",y:"0",width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",rx:"4",fill:l.isDisabled?c.content.inactive:c.background.positive.vibrant}),!l.isPartial&&i("svg",Object.assign({width:l.isSmall?"8":"10",height:l.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),l.isPartial&&i("rect",{x:"5",y:l.isSmall?"7":"8",width:l.isSmall?"6":"8",height:"2",rx:"1",fill:c.surface.standard})]})),b=b=>{const[m,g]=s(b.isChecked||!1),[p,x]=s(b.isPartiallyChecked||!1),[v,C]=s(b.isDisabled||!1),[S,w]=s(!1),[k,f]=s(!1);t((()=>{g(b.isChecked)}),[b.isChecked]),t((()=>{C(b.isDisabled||!1)}),[b.isDisabled]),t((()=>{x(b.isPartiallyChecked||!1)}),[b.isPartiallyChecked]);return e(a,Object.assign({onClick:e=>{var i;if(!b.isDisabled){const l=!m;p?x(!p):g(l),null===(i=b.onValueChange)||void 0===i||i.call(b,l,b.value,e)}},onMouseEnter:()=>w(!b.skipHoverState),onMouseLeave:()=>w(!1),onMouseDown:()=>f(!b.skipHoverState),onMouseUp:()=>f(!1)},{children:[i(r,Object.assign({checked:m,hovered:S,clicked:k,isDisabled:v,size:b.size,borderColor:b.checkboxBorderColor},{children:m&&i(h,{isPartial:p||!1,isDisabled:v,isSmall:"SMALL"===b.size})})),b.label?b.boldOnChecked&&m?i(o,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):"SMALL"===b.size||"SMALL"===b.labelSize?i(d,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):i(n,Object.assign({color:b.isDisabled?c.text.disabled:c.text.primary},{children:b.label})):i(l,{}),b.rightComponent]}))};export{b as CheckBox};
1
+ import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useState as l,useEffect as s}from"react";import{CheckboxContainer as a,CheckboxIcon as t}from"./CheckBox.styled.js";import{BodyPrimary as r,BodySecondary as o}from"../TypographyStyle.js";import{COLORS as n}from"../../constants/Theme.js";const d=l=>e("svg",Object.assign({width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",viewBox:l.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("rect",{x:"0",y:"0",width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",rx:"4",fill:l.isDisabled?n.content.inactive:n.background.positive.vibrant}),!l.isPartial&&i("svg",Object.assign({width:l.isSmall?"8":"10",height:l.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:i("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})})),l.isPartial&&i("rect",{x:"5",y:l.isSmall?"7":"8",width:l.isSmall?"6":"8",height:"2",rx:"1",fill:n.surface.standard})]})),c=c=>{const[h,m]=l(c.isChecked||!1),[b,g]=l(c.isPartiallyChecked||!1),[S,p]=l(c.isDisabled||!1),[v,w]=l(!1),[x,C]=l(!1);return s((()=>{m(c.isChecked)}),[c.isChecked]),s((()=>{p(c.isDisabled||!1)}),[c.isDisabled]),s((()=>{g(c.isPartiallyChecked||!1)}),[c.isPartiallyChecked]),e(a,Object.assign({onClick:e=>{var i;if(!c.isDisabled){const l=!h;b?g(!b):m(l),null===(i=c.onValueChange)||void 0===i||i.call(c,l,c.value,e)}},onMouseEnter:()=>w(!c.skipHoverState),onMouseLeave:()=>w(!1),onMouseDown:()=>C(!c.skipHoverState),onMouseUp:()=>C(!1)},{children:[i(t,Object.assign({checked:h,hovered:v,clicked:x,isDisabled:S,size:c.size},{children:h&&i(d,{isPartial:b||!1,isDisabled:S,isSmall:"SMALL"===c.size})})),c.label&&"SMALL"!==c.size&&"SMALL"!==c.labelSize&&i(r,Object.assign({color:c.isDisabled?n.text.disabled:n.text.primary},{children:c.label})),c.label&&("SMALL"===c.size||"SMALL"===c.labelSize)&&i(o,Object.assign({color:c.isDisabled?n.text.disabled:n.text.primary},{children:c.label})),c.rightComponent]}))};export{c as CheckBox};
@@ -5,5 +5,4 @@ export declare const CheckboxIcon: import("styled-components").StyledComponent<"
5
5
  clicked: boolean;
6
6
  isDisabled: boolean;
7
7
  size?: "SMALL" | "DEFAULT" | undefined;
8
- borderColor?: string | undefined;
9
8
  }, never>;
@@ -3,7 +3,7 @@ import e,{css as i}from"styled-components";import{COLORS as o}from"../../constan
3
3
  gap: 8px;
4
4
  align-items: center;
5
5
  cursor: pointer;
6
- `,r=e.div`
6
+ `,s=e.div`
7
7
  width: ${e=>"SMALL"===e.size?12:14}px;
8
8
  height: ${e=>"SMALL"===e.size?12:14}px;
9
9
  border-radius: 4px;
@@ -12,13 +12,12 @@ import e,{css as i}from"styled-components";import{COLORS as o}from"../../constan
12
12
  justify-content: center;
13
13
  align-items: center;
14
14
  box-sizing: content-box;
15
- ${e=>{var t;return e.isDisabled?i`
15
+ ${e=>e.isDisabled?i`
16
16
  border: ${"SMALL"===e.size?1.5:2}px solid
17
17
  ${o.content.inactive};
18
18
  `:i`
19
- border: ${"SMALL"===e.size?1.5:2}px solid
20
- ${null!==(t=e.borderColor)&&void 0!==t?t:"black"};
21
- `}}
19
+ border: ${"SMALL"===e.size?1.5:2}px solid black;
20
+ `}
22
21
  ${e=>e.checked&&i`
23
22
  border: 0px;
24
23
  width: 18px;
@@ -32,4 +31,4 @@ import e,{css as i}from"styled-components";import{COLORS as o}from"../../constan
32
31
  ${e.checked?o.stroke.positive.lightAlt:o.surface.hovered};
33
32
  outline-offset: 2px;
34
33
  `}
35
- `;export{t as CheckboxContainer,r as CheckboxIcon};
34
+ `;export{t as CheckboxContainer,s as CheckboxIcon};
@@ -8,7 +8,6 @@ export type CheckListProps = {
8
8
  subTitle?: string;
9
9
  listItems: CheckListItem[];
10
10
  onChange: (options: CheckListItem[]) => void;
11
- listContainerStyles?: React.CSSProperties;
12
11
  };
13
12
  export declare const CheckList: React.FC<CheckListProps>;
14
13
  export {};
@@ -1 +1 @@
1
- import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as s,useEffect as i}from"react";import{CheckBox as n}from"../checkBox/CheckBox.js";import{CheckListStyled as o}from"./CheckList.styled.js";import{TitleRegular as r,BodySecondary as l}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const a=a=>{var m;const[h,d]=s(a.listItems);i((()=>{d(a.listItems)}),[a.listItems]);const p=(t,e)=>{const s=[...h],i=h.find((t=>t.value===e));i&&(i.isChecked=t),d(s);const n=s.filter((t=>t.isChecked));a.onChange(n)};return t(o,{children:[(a.title||a.subTitle)&&t("div",Object.assign({className:"title__container"},{children:[a.title&&e(r,{children:a.title}),a.subTitle&&e(l,Object.assign({color:c.text.secondary},{children:a.subTitle}))]})),e("div",Object.assign({style:null!==(m=a.listContainerStyles)&&void 0!==m?m:{},className:"list__container"},{children:h.map((t=>e(n,Object.assign({},t,{onValueChange:p}),t.value)))}))]})};export{a as CheckList};
1
+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as s,useEffect as i}from"react";import{CheckBox as c}from"../checkBox/CheckBox.js";import{CheckListStyled as o}from"./CheckList.styled.js";import{TitleRegular as r,BodySecondary as n}from"../TypographyStyle.js";import{COLORS as l}from"../../constants/Theme.js";const a=a=>{const[m,h]=s(a.listItems);i((()=>{h(a.listItems)}),[a.listItems]);const d=(t,e)=>{const s=[...m],i=m.find((t=>t.value===e));i&&(i.isChecked=t),h(s);const c=s.filter((t=>t.isChecked));a.onChange(c)};return t(o,{children:[(a.title||a.subTitle)&&t("div",Object.assign({className:"title__container"},{children:[a.title&&e(r,{children:a.title}),a.subTitle&&e(n,Object.assign({color:l.text.secondary},{children:a.subTitle}))]})),e("div",Object.assign({className:"list__container"},{children:m.map((t=>e(c,Object.assign({},t,{onValueChange:d}),t.value)))}))]})};export{a as CheckList};
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as i}from"react";import{ZeroState as n}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as p}from"./menu/MenuList.js";import{SelectAllMenu as u}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as h,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,b=290,v=v=>{let{options:j,isSearchable:w,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:L,version:A,skipSorting:F,hideSelectAll:k,primaryButtonText:B}=v;const{dropdownOptions:H,search:T,searchedString:Z,searchedOptions:q,onApplyHandler:z,selectAllHandler:I,onMultiSelectClear:K,onFreeFormSelect:N,onMultiSelectApply:P,latestDropdownOptionsRef:R,getSelectedOptions:W}=s(A,j,D,F,y,L),[E,G]=o(null!=x?x:b),[J,Q]=o(null),U=r(null);l(U,(()=>{if(Q(null),y&&"2.0"===A){const e=W(R.current);null==M||M(e)}else null==M||M(H)}));const V=null!=C?C:g,X="number"==typeof V?w&&y?V-96:w&&!y||!w&&y?V-48:V:V;i((()=>{const e=null!=x?x:b;if(null===J)G(e);else if("number"==typeof e)G(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));G(t)}}),[J]);const Y=[],$=(Z&&L?q:H).map((e=>{var t,o;if(Z&&!L){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))&&(Y.push(!Z||e.label===Z),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(Z.toLowerCase()))?(Y.push(!Z||e.label===Z),e):null}return e})).filter((e=>null!==e)),_=!!w&&Z&&0===$.length;return e(h,Object.assign({version:A,ref:U,style:{width:E}},{children:[e("div",Object.assign({style:{width:J?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(f,{onSearch:T,version:A}),$.length||Z?e(m,Object.assign({minHeight:V,maxHeight:X},{children:[!!y&&!_&&!k&&t(u,{version:A,options:Z&&L?q:H,onSelect:I}),!O&&_&&t(S,{height:X,searchedString:Z}),O&&(_||!!Y.length&&Y.every((e=>!1===e)))&&t(a,{version:A,isMultiSelect:y,onSelect:N,searchedString:Z}),t(p,{version:A,onSelect:z,showDescription:function(e,t){Q(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:$})]})):t("div",Object.assign({style:{height:V,display:"flex"}},{children:t(n,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!$.length&&!Z)&&"2.0"!==A&&t(d,{onClear:K,onApply:P,list:Z&&L?q:H,buttonText:B})]})),!!J&&t(c,{title:J.title,description:J.description,version:A})]}))};export{v as OpenedDropdown};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as i}from"react";import{ZeroState as n}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as p}from"./menu/MenuList.js";import{SelectAllMenu as u}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as h,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,v=290,b=b=>{let{options:j,isSearchable:w,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:L,version:F,skipSorting:k}=b;const{dropdownOptions:A,search:H,searchedString:B,searchedOptions:Z,onApplyHandler:q,selectAllHandler:z,onMultiSelectClear:I,onFreeFormSelect:K,onMultiSelectApply:N,latestDropdownOptionsRef:P,getSelectedOptions:R}=s(F,j,D,k,y,L),[T,W]=o(null!=x?x:v),[E,G]=o(null),J=r(null);l(J,(()=>{if(G(null),y&&"2.0"===F){const e=R(P.current);null==M||M(e)}else null==M||M(A)}));const Q=null!=C?C:g,U="number"==typeof Q?w&&y?Q-96:w&&!y||!w&&y?Q-48:Q:Q;i((()=>{const e=null!=x?x:v;if(null===E)W(e);else if("number"==typeof e)W(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));W(t)}}),[E]);const V=[],X=(B&&L?Z:A).map((e=>{var t,o;if(B&&!L){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(B.toLowerCase()))&&(V.push(!B||e.label===B),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(B.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(B.toLowerCase()))?(V.push(!B||e.label===B),e):null}return e})).filter((e=>null!==e)),Y=!!w&&B&&0===X.length;return e(h,Object.assign({version:F,ref:J,style:{width:T}},{children:[e("div",Object.assign({style:{width:E?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(f,{onSearch:H,version:F}),X.length||B?e(m,Object.assign({minHeight:Q,maxHeight:U},{children:[!!y&&!Y&&t(u,{version:F,options:B&&L?Z:A,onSelect:z}),!O&&Y&&t(S,{height:U,searchedString:B}),O&&(Y||!!V.length&&V.every((e=>!1===e)))&&t(a,{version:F,isMultiSelect:y,onSelect:K,searchedString:B}),t(p,{version:F,onSelect:q,showDescription:function(e,t){G(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:X})]})):t("div",Object.assign({style:{height:Q,display:"flex"}},{children:t(n,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!X.length&&!B)&&"2.0"!==F&&t(d,{onClear:I,onApply:N,list:B&&L?Z:A})]})),!!E&&t(c,{title:E.title,description:E.description,version:F})]}))};export{b as OpenedDropdown};
@@ -4,6 +4,5 @@ declare const MultiSelectDropdownBottomBar: React.FC<{
4
4
  onClear?: () => void;
5
5
  onApply: () => void;
6
6
  list: DropdownOption[];
7
- buttonText?: string;
8
7
  }>;
9
8
  export default MultiSelectDropdownBottomBar;
@@ -1 +1 @@
1
- import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{BottomBarContainer as n}from"./MultiSelectDropdownBottomBar.styled.js";const s=s=>{let{onApply:i,onClear:c,list:p,buttonText:a}=s;const m=p.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(n,Object.assign({style:{justifyContent:"space-between"}},{children:[e(r,Object.assign({style:{flex:1,color:l.content.primary}},{children:m?`${m} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:c}),e(o,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{i()}})]}))]}))};export{s as default};
1
+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{BottomBarContainer as n}from"./MultiSelectDropdownBottomBar.styled.js";const s=s=>{let{onApply:i,onClear:c,list:p}=s;const a=p.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(n,Object.assign({style:{justifyContent:"space-between"}},{children:[e(r,Object.assign({style:{flex:1,color:l.content.primary}},{children:a?`${a} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:c}),e(o,{size:"small",buttonText:"Apply",onClick:()=>{i()}})]}))]}))};export{s as default};
@@ -16,8 +16,6 @@ export interface OpenDropdownProps {
16
16
  onSearch?: (key: string) => Promise<DropdownOption[]>;
17
17
  version?: '1.0' | '2.0';
18
18
  skipSorting?: boolean;
19
- hideSelectAll?: boolean;
20
- primaryButtonText?: string;
21
19
  }
22
20
  export type GroupedOption = {
23
21
  label?: string;
@@ -8,6 +8,5 @@ export type RadioButtonProps = {
8
8
  skipHoverState?: boolean;
9
9
  size?: 'DEFAULT' | 'SMALL';
10
10
  labelSize?: 'DEFAULT' | 'MEDIUM';
11
- boldOnChecked?: boolean;
12
11
  };
13
12
  export declare const RadioButton: React.FC<RadioButtonProps>;
@@ -1 +1 @@
1
- import{jsxs as i,jsx as e,Fragment as s}from"react/jsx-runtime";import{useState as l,useEffect as t}from"react";import{RadioButtonContainer as a,RadioButtonIcon as r}from"./RadioButton.styled.js";import{TitleSmall as o,BodyCaption as c,BodySecondary as n,BodyPrimary as d}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";const m=s=>{const l=s.isDisabled?b.content.inactive:s.isActive?b.background.positive.vibrant:b.content.primary;return i("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:l,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?b.content.inactive:b.background.positive.vibrant})]}))},v=v=>{const[p,h]=l(v.isActive||!1),[S,g]=l(!1),[x,u]=l(!1);t((()=>{h(v.isActive)}),[v.isActive]);return i(a,Object.assign({onClick:()=>{var i;if(!v.isDisabled){const e=!p;h(e),null===(i=v.onValueChange)||void 0===i||i.call(v,e,v.value)}},onMouseEnter:()=>g(!v.skipHoverState),onMouseLeave:()=>g(!1),onMouseDown:()=>u(!v.skipHoverState),onMouseUp:()=>u(!1)},{children:[e(r,Object.assign({checked:p,hovered:S,clicked:x,isDisabled:v.isDisabled||!1,size:v.size},{children:e(m,{isSmall:"SMALL"===v.size,isActive:p,isDisabled:v.isDisabled||!1})})),v.label?v.boldOnChecked&&p?e(o,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):"SMALL"===v.size?e(c,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):"MEDIUM"===v.labelSize?e(n,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):e(d,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):e(s,{})]}))};export{v as RadioButton};
1
+ import{jsxs as i,jsx as e,Fragment as s}from"react/jsx-runtime";import{useState as l,useEffect as t}from"react";import{RadioButtonContainer as a,RadioButtonIcon as o}from"./RadioButton.styled.js";import{BodyCaption as r,BodySecondary as c,BodyPrimary as n}from"../TypographyStyle.js";import{COLORS as d}from"../../constants/Theme.js";const b=s=>{const l=s.isDisabled?d.content.inactive:s.isActive?d.background.positive.vibrant:d.content.primary;return i("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:l,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?d.content.inactive:d.background.positive.vibrant})]}))},m=m=>{const[v,p]=l(m.isActive||!1),[S,h]=l(!1),[g,u]=l(!1);t((()=>{p(m.isActive)}),[m.isActive]);return i(a,Object.assign({onClick:()=>{var i;if(!m.isDisabled){const e=!v;p(e),null===(i=m.onValueChange)||void 0===i||i.call(m,e,m.value)}},onMouseEnter:()=>h(!m.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>u(!m.skipHoverState),onMouseUp:()=>u(!1)},{children:[e(o,Object.assign({checked:v,hovered:S,clicked:g,isDisabled:m.isDisabled||!1,size:m.size},{children:e(b,{isSmall:"SMALL"===m.size,isActive:v,isDisabled:m.isDisabled||!1})})),m.label?"SMALL"===m.size?e(r,Object.assign({color:m.isDisabled?d.text.disabled:d.text.primary},{children:m.label})):"MEDIUM"===m.labelSize?e(c,Object.assign({color:m.isDisabled?d.text.disabled:d.text.primary},{children:m.label})):e(n,Object.assign({color:m.isDisabled?d.text.disabled:d.text.primary},{children:m.label})):e(s,{})]}))};export{m as RadioButton};
@@ -8,7 +8,6 @@ export type RadioListProps = {
8
8
  subTitle?: string;
9
9
  listItems: RadioListItem[];
10
10
  onChange: (option: RadioListItem) => void;
11
- listContainerStyles?: React.CSSProperties;
12
11
  };
13
12
  export declare const RadioList: React.FC<RadioListProps>;
14
13
  export {};
@@ -1 +1 @@
1
- import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{RadioButton as o}from"../radioButton/RadioButton.js";import{RadioListStyled as r}from"./RadioList.styled.js";import{TitleRegular as n,BodySecondary as l}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";const c=c=>{var m;const[d,u]=i(c.listItems);s((()=>{u(c.listItems)}),[c.listItems]);const h=(t,e)=>{let i;const s=[...d];s.forEach((s=>{s.value===e?(i=s,s.isActive=t):s.isActive=!t})),u(s),c.onChange(i)};return t(r,{children:[(c.title||c.subTitle)&&t("div",Object.assign({className:"title__container"},{children:[c.title&&e(n,{children:c.title}),c.subTitle&&e(l,Object.assign({color:a.text.secondary},{children:c.subTitle}))]})),e("div",Object.assign({style:null!==(m=c.listContainerStyles)&&void 0!==m?m:{},className:"list__container"},{children:d.map((t=>e(o,Object.assign({},t,{onValueChange:h}),t.value)))}))]})};export{c as RadioList};
1
+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{RadioButton as o}from"../radioButton/RadioButton.js";import{RadioListStyled as r}from"./RadioList.styled.js";import{TitleRegular as n,BodySecondary as a}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const l=l=>{const[m,d]=i(l.listItems);s((()=>{d(l.listItems)}),[l.listItems]);const h=(t,e)=>{let i;const s=[...m];s.forEach((s=>{s.value===e?(i=s,s.isActive=t):s.isActive=!t})),d(s),l.onChange(i)};return t(r,{children:[(l.title||l.subTitle)&&t("div",Object.assign({className:"title__container"},{children:[l.title&&e(n,{children:l.title}),l.subTitle&&e(a,Object.assign({color:c.text.secondary},{children:l.subTitle}))]})),e("div",Object.assign({className:"list__container"},{children:m.map((t=>e(o,Object.assign({},t,{onValueChange:h}),t.value)))}))]})};export{l as RadioList};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.507-beta.filter-4",
3
+ "version": "0.0.507-beta.filters-1",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",