@propellerads/button-drop-down 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -1,34 +1,40 @@
-### `2.4.0`
+## `2.5.0`
+
+* Added `isDisabled` prop for a single drop-down `option`
+
+## `2.4.0`
 
 * migrated to TypeScript
 
-### `2.3.0`
+## `2.3.0`
 
 * updated peerDependencies
 
-#### `2.2.0`
+## `2.2.0`
 
 * added props mouse enter and leave
 
-#### `2.1.0`
+## `2.1.0`
 
 * edit package json main and module data
 
-#### `2.0.0`
+## `2.0.0`
 
 * update dependencies, remove rollup add tdx 
 
-#### `1.2.0`
+## `1.2.0`
+
 * update dependencies
 
-#### `1.1.0`
+## `1.1.0`
+
 * update dependencies
 
-#### `1.0.1`
+## `1.0.1`
 
-Add hover state
-Fix items height
+* Add hover state
+* Fix items height
 
-#### `1.0.0`
+## `1.0.0`
 
-Add '@propellerads/button-drop-down' component
+* Add '@propellerads/button-drop-down' component

package/dist/button-drop-down.cjs.development.js

@@ -35,7 +35,8 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
     type: Button.BUTTON_TYPE.PLAIN,
     onClick: function onClick() {
       return _onClick(option);
-    }
+    },
+    isDisabled: option.isDisabled
   }, React__default.createElement(ButtonDropDownListItemContainer, null, option.title));
 };
 

package/dist/button-drop-down.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  gray80,\n  gray95,\n  white,\n  spacing,\n  fontNormal,\n  borderRadius,\n} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n  position: relative;\n  width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ${gray80};\n  border-radius: ${borderRadius}px;\n  background-color: ${white};\n  padding: ${spacing * 2}px 0;\n  margin-top: 2px;\n  font-size: ${fontNormal}px;\n  z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ${spacing * 2}px ${spacing * 3}px;\n\n  &:hover {\n    background-color: ${gray95};\n  }\n`;\n\nexport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n  id: string,\n  title: string,\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE, onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n  const {\n    option,\n    onClick,\n  } = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={BUTTON_TYPE.PLAIN}\n      onClick={() => onClick(option)}\n    >\n      <ButtonDropDownListItemContainer>\n        {option.title}\n      </ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: typeof BUTTON_TYPE,\n  options: DROPDOWN_OPTION_TYPE[],\n  elementId: string,\n  isLoading: boolean,\n  isDisabled: boolean,\n  title: string,\n  onClick: (value: DROPDOWN_OPTION_TYPE) => void,\n  onMouseEnter: () => void | undefined,\n  onMouseLeave: () => void | undefined,\n}\n\nconst ButtonDropDown = (props: IProps) => {\n  const {\n    type = BUTTON_TYPE.ADVANCED,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n    onMouseEnter = undefined,\n    onMouseLeave = undefined,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const {current} = containerRef;\n\n      if (current && !current.contains(event.target)) {\n        setExpanded(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [containerRef]);\n\n  const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n      {/* @ts-ignore */}\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {title}\n      </Button>\n\n      {isExpanded && options.length > 0 && (\n        <ButtonDropDownListContainer>\n          {options.map((option) => (\n            <ButtonDropDownList\n              option={option}\n              key={option.id}\n              onClick={onItemClick}\n            />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","title","ButtonDropDown","ADVANCED","isLoading","isDisabled","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"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"}
+{"version":3,"file":"button-drop-down.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  gray80,\n  gray95,\n  white,\n  spacing,\n  fontNormal,\n  borderRadius,\n} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n  position: relative;\n  width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ${gray80};\n  border-radius: ${borderRadius}px;\n  background-color: ${white};\n  padding: ${spacing * 2}px 0;\n  margin-top: 2px;\n  font-size: ${fontNormal}px;\n  z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ${spacing * 2}px ${spacing * 3}px;\n\n  &:hover {\n    background-color: ${gray95};\n  }\n`;\n\nexport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n  id: string,\n  title: string,\n  isDisabled?: boolean,\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE, onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n  const {\n    option,\n    onClick,\n  } = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={BUTTON_TYPE.PLAIN}\n      onClick={() => onClick(option)}\n      isDisabled={option.isDisabled}\n    >\n      <ButtonDropDownListItemContainer>\n        {option.title}\n      </ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: typeof BUTTON_TYPE,\n  options: DROPDOWN_OPTION_TYPE[],\n  elementId: string,\n  isLoading: boolean,\n  isDisabled: boolean,\n  title: string,\n  onClick: (value: DROPDOWN_OPTION_TYPE) => void,\n  onMouseEnter: () => void | undefined,\n  onMouseLeave: () => void | undefined,\n}\n\nconst ButtonDropDown = (props: IProps) => {\n  const {\n    type = BUTTON_TYPE.ADVANCED,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n    onMouseEnter = undefined,\n    onMouseLeave = undefined,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const {current} = containerRef;\n\n      if (current && !current.contains(event.target)) {\n        setExpanded(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [containerRef]);\n\n  const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n      {/* @ts-ignore */}\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {title}\n      </Button>\n\n      {isExpanded && options.length > 0 && (\n        <ButtonDropDownListContainer>\n          {options.map((option) => (\n            <ButtonDropDownList\n              option={option}\n              key={option.id}\n              onClick={onItemClick}\n            />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","isDisabled","title","ButtonDropDown","ADVANCED","isLoading","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"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"}

package/dist/button-drop-down.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,o,i=require("react"),r=e(i),u=require("@propellerads/button"),a=e(u),d=e(require("styled-components")),l=require("@propellerads/stylevariables");function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var s=d.div(n||(n=c(["\n  position: relative;\n  width: fit-content;\n"]))),p=d.div(t||(t=c(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ",";\n  border-radius: ","px;\n  background-color: ",";\n  padding: ","px 0;\n  margin-top: 2px;\n  font-size: ","px;\n  z-index: 1;\n"])),l.gray80,l.borderRadius,l.white,2*l.spacing,l.fontNormal),f=d.div(o||(o=c(["\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ","px ","px;\n\n  &:hover {\n    background-color: ",";\n  }\n"])),2*l.spacing,3*l.spacing,l.gray95),v=function(e){var n=e.option,t=e.onClick;return r.createElement(a,{elementId:n.id,type:u.BUTTON_TYPE.PLAIN,onClick:function(){return t(n)}},r.createElement(f,null,n.title))};exports.BUTTON_DROPDOWN_TYPE=u.BUTTON_TYPE,exports.default=function(e){var n=e.type,t=void 0===n?u.BUTTON_TYPE.ADVANCED:n,o=e.isLoading,d=e.isDisabled,l=e.elementId,c=e.options,f=e.title,m=e.onClick,E=e.onMouseEnter,g=void 0===E?void 0:E,x=e.onMouseLeave,b=void 0===x?void 0:x,T=i.useRef(null),h=i.useState(!1),y=h[0],L=h[1];i.useEffect((function(){var e=function(e){var n=T.current;n&&!n.contains(e.target)&&L(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[T]);var k=function(e){L(!1),m(e)};return r.createElement(s,{ref:T},r.createElement(a,{type:t,isLoading:o,isDisabled:d,elementId:l,onClick:function(){return L(!y)},onMouseEnter:g,onMouseLeave:b},f),y&&c.length>0&&r.createElement(p,null,c.map((function(e){return r.createElement(v,{option:e,key:e.id,onClick:k})}))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,i,o=require("react"),r=e(o),a=require("@propellerads/button"),d=e(a),u=e(require("styled-components")),l=require("@propellerads/stylevariables");function s(e,n){return n||(n=e.slice(0)),e.raw=n,e}var c=u.div(n||(n=s(["\n  position: relative;\n  width: fit-content;\n"]))),p=u.div(t||(t=s(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ",";\n  border-radius: ","px;\n  background-color: ",";\n  padding: ","px 0;\n  margin-top: 2px;\n  font-size: ","px;\n  z-index: 1;\n"])),l.gray80,l.borderRadius,l.white,2*l.spacing,l.fontNormal),f=u.div(i||(i=s(["\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ","px ","px;\n\n  &:hover {\n    background-color: ",";\n  }\n"])),2*l.spacing,3*l.spacing,l.gray95),v=function(e){var n=e.option,t=e.onClick;return r.createElement(d,{elementId:n.id,type:a.BUTTON_TYPE.PLAIN,onClick:function(){return t(n)},isDisabled:n.isDisabled},r.createElement(f,null,n.title))};exports.BUTTON_DROPDOWN_TYPE=a.BUTTON_TYPE,exports.default=function(e){var n=e.type,t=void 0===n?a.BUTTON_TYPE.ADVANCED:n,i=e.isLoading,u=e.isDisabled,l=e.elementId,s=e.options,f=e.title,m=e.onClick,E=e.onMouseEnter,g=void 0===E?void 0:E,x=e.onMouseLeave,b=void 0===x?void 0:x,T=o.useRef(null),h=o.useState(!1),y=h[0],L=h[1];o.useEffect((function(){var e=function(e){var n=T.current;n&&!n.contains(e.target)&&L(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[T]);var k=function(e){L(!1),m(e)};return r.createElement(c,{ref:T},r.createElement(d,{type:t,isLoading:i,isDisabled:u,elementId:l,onClick:function(){return L(!y)},onMouseEnter:g,onMouseLeave:b},f),y&&s.length>0&&r.createElement(p,null,s.map((function(e){return r.createElement(v,{option:e,key:e.id,onClick:k})}))))};
 //# sourceMappingURL=button-drop-down.cjs.production.min.js.map

package/dist/button-drop-down.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  gray80,\n  gray95,\n  white,\n  spacing,\n  fontNormal,\n  borderRadius,\n} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n  position: relative;\n  width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ${gray80};\n  border-radius: ${borderRadius}px;\n  background-color: ${white};\n  padding: ${spacing * 2}px 0;\n  margin-top: 2px;\n  font-size: ${fontNormal}px;\n  z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ${spacing * 2}px ${spacing * 3}px;\n\n  &:hover {\n    background-color: ${gray95};\n  }\n`;\n\nexport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n  id: string,\n  title: string,\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE, onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n  const {\n    option,\n    onClick,\n  } = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={BUTTON_TYPE.PLAIN}\n      onClick={() => onClick(option)}\n    >\n      <ButtonDropDownListItemContainer>\n        {option.title}\n      </ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: typeof BUTTON_TYPE,\n  options: DROPDOWN_OPTION_TYPE[],\n  elementId: string,\n  isLoading: boolean,\n  isDisabled: boolean,\n  title: string,\n  onClick: (value: DROPDOWN_OPTION_TYPE) => void,\n  onMouseEnter: () => void | undefined,\n  onMouseLeave: () => void | undefined,\n}\n\nconst ButtonDropDown = (props: IProps) => {\n  const {\n    type = BUTTON_TYPE.ADVANCED,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n    onMouseEnter = undefined,\n    onMouseLeave = undefined,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const {current} = containerRef;\n\n      if (current && !current.contains(event.target)) {\n        setExpanded(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [containerRef]);\n\n  const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n      {/* @ts-ignore */}\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {title}\n      </Button>\n\n      {isExpanded && options.length > 0 && (\n        <ButtonDropDownListContainer>\n          {options.map((option) => (\n            <ButtonDropDownList\n              option={option}\n              key={option.id}\n              onClick={onItemClick}\n            />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","BUTTON_TYPE","PLAIN","title","ADVANCED","isLoading","isDisabled","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"sVAUA,IAAMA,EAA0BC,EAAOC,oEAKjCC,EAA8BF,EAAOC,8RAMrBE,SACHC,eACGC,QACC,EAAVC,UAEEC,cAITC,EAAkCR,EAAOC,wJAIxB,EAAVK,UAA2B,EAAVA,UAGNG,UCrBlBC,EAAqB,SAACC,OAExBC,EAEED,EAFFC,OACAC,EACEF,EADFE,eAIAC,gBAACC,GACCC,UAAWJ,EAAOK,GAClBC,KAAMC,cAAYC,MAClBP,QAAS,kBAAMA,EAAQD,KAEvBE,gBAACN,OACEI,EAAOS,sCApBoBF,8BAsCb,SAACR,SAWlBA,EATFO,KAAAA,aAAOC,cAAYG,WACnBC,EAQEZ,EARFY,UACAC,EAOEb,EAPFa,WACAR,EAMEL,EANFK,UACAS,EAKEd,EALFc,QACAJ,EAIEV,EAJFU,MACAR,EAGEF,EAHFE,UAGEF,EAFFe,aAAAA,kBAAeC,MAEbhB,EADFiB,aAAAA,kBAAeD,IAGXE,EAAeC,SAAuB,QAEVC,YAAS,GAApCC,OAAYC,OAEnBC,aAAU,eACFC,EAAqB,SAACC,OACnBC,EAAWR,EAAXQ,QAEHA,IAAYA,EAAQC,SAASF,EAAMG,SACrCN,GAAY,WAIhBO,SAASC,iBAAiB,YAAaN,GACvCK,SAASC,iBAAiB,aAAcN,GACjC,WACLK,SAASE,oBAAoB,YAAaP,GAC1CK,SAASE,oBAAoB,aAAcP,MAE5C,CAACN,QAEEc,EAAc,SAACC,GACnBX,GAAY,GACZpB,EAAQ+B,WAIR9B,gBAACf,GACC8C,IAAKhB,GAILf,gBAACC,GACCG,KAAMA,EACNK,UAAWA,EACXC,WAAYA,EACZR,UAAWA,EACXH,QAAS,kBAAMoB,GAAaD,IAC5BN,aAAcA,EACdE,aAAcA,GAEbP,GAGFW,GAAcP,EAAQqB,OAAS,GAC9BhC,gBAACZ,OACEuB,EAAQsB,KAAI,SAACnC,UACZE,gBAACJ,GACCE,OAAQA,EACRoC,IAAKpC,EAAOK,GACZJ,QAAS8B"}
+{"version":3,"file":"button-drop-down.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  gray80,\n  gray95,\n  white,\n  spacing,\n  fontNormal,\n  borderRadius,\n} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n  position: relative;\n  width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ${gray80};\n  border-radius: ${borderRadius}px;\n  background-color: ${white};\n  padding: ${spacing * 2}px 0;\n  margin-top: 2px;\n  font-size: ${fontNormal}px;\n  z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ${spacing * 2}px ${spacing * 3}px;\n\n  &:hover {\n    background-color: ${gray95};\n  }\n`;\n\nexport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n  id: string,\n  title: string,\n  isDisabled?: boolean,\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE, onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n  const {\n    option,\n    onClick,\n  } = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={BUTTON_TYPE.PLAIN}\n      onClick={() => onClick(option)}\n      isDisabled={option.isDisabled}\n    >\n      <ButtonDropDownListItemContainer>\n        {option.title}\n      </ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: typeof BUTTON_TYPE,\n  options: DROPDOWN_OPTION_TYPE[],\n  elementId: string,\n  isLoading: boolean,\n  isDisabled: boolean,\n  title: string,\n  onClick: (value: DROPDOWN_OPTION_TYPE) => void,\n  onMouseEnter: () => void | undefined,\n  onMouseLeave: () => void | undefined,\n}\n\nconst ButtonDropDown = (props: IProps) => {\n  const {\n    type = BUTTON_TYPE.ADVANCED,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n    onMouseEnter = undefined,\n    onMouseLeave = undefined,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const {current} = containerRef;\n\n      if (current && !current.contains(event.target)) {\n        setExpanded(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [containerRef]);\n\n  const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n      {/* @ts-ignore */}\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {title}\n      </Button>\n\n      {isExpanded && options.length > 0 && (\n        <ButtonDropDownListContainer>\n          {options.map((option) => (\n            <ButtonDropDownList\n              option={option}\n              key={option.id}\n              onClick={onItemClick}\n            />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","BUTTON_TYPE","PLAIN","isDisabled","title","ADVANCED","isLoading","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"sVAUA,IAAMA,EAA0BC,EAAOC,oEAKjCC,EAA8BF,EAAOC,8RAMrBE,SACHC,eACGC,QACC,EAAVC,UAEEC,cAITC,EAAkCR,EAAOC,wJAIxB,EAAVK,UAA2B,EAAVA,UAGNG,UCpBlBC,EAAqB,SAACC,OAExBC,EAEED,EAFFC,OACAC,EACEF,EADFE,eAIAC,gBAACC,GACCC,UAAWJ,EAAOK,GAClBC,KAAMC,cAAYC,MAClBP,QAAS,kBAAMA,EAAQD,IACvBS,WAAYT,EAAOS,YAEnBP,gBAACN,OACEI,EAAOU,sCAtBoBH,8BAwCb,SAACR,SAWlBA,EATFO,KAAAA,aAAOC,cAAYI,WACnBC,EAQEb,EARFa,UACAH,EAOEV,EAPFU,WACAL,EAMEL,EANFK,UACAS,EAKEd,EALFc,QACAH,EAIEX,EAJFW,MACAT,EAGEF,EAHFE,UAGEF,EAFFe,aAAAA,kBAAeC,MAEbhB,EADFiB,aAAAA,kBAAeD,IAGXE,EAAeC,SAAuB,QAEVC,YAAS,GAApCC,OAAYC,OAEnBC,aAAU,eACFC,EAAqB,SAACC,OACnBC,EAAWR,EAAXQ,QAEHA,IAAYA,EAAQC,SAASF,EAAMG,SACrCN,GAAY,WAIhBO,SAASC,iBAAiB,YAAaN,GACvCK,SAASC,iBAAiB,aAAcN,GACjC,WACLK,SAASE,oBAAoB,YAAaP,GAC1CK,SAASE,oBAAoB,aAAcP,MAE5C,CAACN,QAEEc,EAAc,SAACC,GACnBX,GAAY,GACZpB,EAAQ+B,WAIR9B,gBAACf,GACC8C,IAAKhB,GAILf,gBAACC,GACCG,KAAMA,EACNM,UAAWA,EACXH,WAAYA,EACZL,UAAWA,EACXH,QAAS,kBAAMoB,GAAaD,IAC5BN,aAAcA,EACdE,aAAcA,GAEbN,GAGFU,GAAcP,EAAQqB,OAAS,GAC9BhC,gBAACZ,OACEuB,EAAQsB,KAAI,SAACnC,UACZE,gBAACJ,GACCE,OAAQA,EACRoC,IAAKpC,EAAOK,GACZJ,QAAS8B"}

package/dist/button-drop-down.esm.js

@@ -27,7 +27,8 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
     type: BUTTON_TYPE.PLAIN,
     onClick: function onClick() {
       return _onClick(option);
-    }
+    },
+    isDisabled: option.isDisabled
   }, React.createElement(ButtonDropDownListItemContainer, null, option.title));
 };
 

package/dist/button-drop-down.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  gray80,\n  gray95,\n  white,\n  spacing,\n  fontNormal,\n  borderRadius,\n} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n  position: relative;\n  width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ${gray80};\n  border-radius: ${borderRadius}px;\n  background-color: ${white};\n  padding: ${spacing * 2}px 0;\n  margin-top: 2px;\n  font-size: ${fontNormal}px;\n  z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ${spacing * 2}px ${spacing * 3}px;\n\n  &:hover {\n    background-color: ${gray95};\n  }\n`;\n\nexport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n  id: string,\n  title: string,\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE, onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n  const {\n    option,\n    onClick,\n  } = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={BUTTON_TYPE.PLAIN}\n      onClick={() => onClick(option)}\n    >\n      <ButtonDropDownListItemContainer>\n        {option.title}\n      </ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: typeof BUTTON_TYPE,\n  options: DROPDOWN_OPTION_TYPE[],\n  elementId: string,\n  isLoading: boolean,\n  isDisabled: boolean,\n  title: string,\n  onClick: (value: DROPDOWN_OPTION_TYPE) => void,\n  onMouseEnter: () => void | undefined,\n  onMouseLeave: () => void | undefined,\n}\n\nconst ButtonDropDown = (props: IProps) => {\n  const {\n    type = BUTTON_TYPE.ADVANCED,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n    onMouseEnter = undefined,\n    onMouseLeave = undefined,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const {current} = containerRef;\n\n      if (current && !current.contains(event.target)) {\n        setExpanded(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [containerRef]);\n\n  const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n      {/* @ts-ignore */}\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {title}\n      </Button>\n\n      {isExpanded && options.length > 0 && (\n        <ButtonDropDownListContainer>\n          {options.map((option) => (\n            <ButtonDropDownList\n              option={option}\n              key={option.id}\n              onClick={onItemClick}\n            />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","title","ButtonDropDown","ADVANCED","isLoading","isDisabled","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"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"}
+{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n  gray80,\n  gray95,\n  white,\n  spacing,\n  fontNormal,\n  borderRadius,\n} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n  position: relative;\n  width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  min-width: 100%;\n  width: fit-content;\n  border: 1px solid ${gray80};\n  border-radius: ${borderRadius}px;\n  background-color: ${white};\n  padding: ${spacing * 2}px 0;\n  margin-top: 2px;\n  font-size: ${fontNormal}px;\n  z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ${spacing * 2}px ${spacing * 3}px;\n\n  &:hover {\n    background-color: ${gray95};\n  }\n`;\n\nexport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n  id: string,\n  title: string,\n  isDisabled?: boolean,\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE, onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n  const {\n    option,\n    onClick,\n  } = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={BUTTON_TYPE.PLAIN}\n      onClick={() => onClick(option)}\n      isDisabled={option.isDisabled}\n    >\n      <ButtonDropDownListItemContainer>\n        {option.title}\n      </ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: typeof BUTTON_TYPE,\n  options: DROPDOWN_OPTION_TYPE[],\n  elementId: string,\n  isLoading: boolean,\n  isDisabled: boolean,\n  title: string,\n  onClick: (value: DROPDOWN_OPTION_TYPE) => void,\n  onMouseEnter: () => void | undefined,\n  onMouseLeave: () => void | undefined,\n}\n\nconst ButtonDropDown = (props: IProps) => {\n  const {\n    type = BUTTON_TYPE.ADVANCED,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n    onMouseEnter = undefined,\n    onMouseLeave = undefined,\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const {current} = containerRef;\n\n      if (current && !current.contains(event.target)) {\n        setExpanded(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    document.addEventListener('touchstart', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('touchstart', handleClickOutside);\n    };\n  }, [containerRef]);\n\n  const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n      {/* @ts-ignore */}\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {title}\n      </Button>\n\n      {isExpanded && options.length > 0 && (\n        <ButtonDropDownListContainer>\n          {options.map((option) => (\n            <ButtonDropDownList\n              option={option}\n              key={option.id}\n              onClick={onItemClick}\n            />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","isDisabled","title","ButtonDropDown","ADVANCED","isLoading","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":";;;;;;;;;;;;;;;AAUA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,GAAV,uIAA7B;AAKA,IAAMC,2BAA2B,gBAAGF,MAAM,CAACC,GAAV,0WAMXE,MANW,EAOdC,YAPc,EAQXC,KARW,EASpBC,OAAO,GAAG,CATU,EAWlBC,UAXkB,CAAjC;AAeA,IAAMC,+BAA+B,gBAAGR,MAAM,CAACC,GAAV,kOAIxBK,OAAO,GAAG,CAJc,EAIPA,OAAO,GAAG,CAJH,EAObG,MAPa,CAArC;;ICrBaC,oBAAoB,GAAGC,WAA7B;;AAQP,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD;AACzB,MACEC,MADF,GAGID,KAHJ,CACEC,MADF;AAAA,MAEEC,QAFF,GAGIF,KAHJ,CAEEE,OAFF;AAKA,SACEC,mBAAA,CAACC,MAAD;AACEC,IAAAA,SAAS,EAAEJ,MAAM,CAACK;AAClBC,IAAAA,IAAI,EAAET,WAAW,CAACU;AAClBN,IAAAA,OAAO,EAAE;AAAA,aAAMA,QAAO,CAACD,MAAD,CAAb;AAAA;AACTQ,IAAAA,UAAU,EAAER,MAAM,CAACQ;GAJrB,EAMEN,mBAAA,CAACR,+BAAD,MAAA,EACGM,MAAM,CAACS,KADV,CANF,CADF;AAYD,CAlBD;;AAgCA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACX,KAAD;AACrB,oBAUIA,KAVJ,CACEO,IADF;AAAA,MACEA,IADF,4BACST,WAAW,CAACc,QADrB;AAAA,MAEEC,SAFF,GAUIb,KAVJ,CAEEa,SAFF;AAAA,MAGEJ,UAHF,GAUIT,KAVJ,CAGES,UAHF;AAAA,MAIEJ,SAJF,GAUIL,KAVJ,CAIEK,SAJF;AAAA,MAKES,OALF,GAUId,KAVJ,CAKEc,OALF;AAAA,MAMEJ,KANF,GAUIV,KAVJ,CAMEU,KANF;AAAA,MAOER,OAPF,GAUIF,KAVJ,CAOEE,OAPF;AAAA,4BAUIF,KAVJ,CAQEe,YARF;AAAA,MAQEA,YARF,oCAQiBC,SARjB;AAAA,4BAUIhB,KAVJ,CASEiB,YATF;AAAA,MASEA,YATF,oCASiBD,SATjB;AAYA,MAAME,YAAY,GAAGC,MAAM,CAAiB,IAAjB,CAA3B;;AAEA,kBAAkCC,QAAQ,CAAC,KAAD,CAA1C;AAAA,MAAOC,UAAP;AAAA,MAAmBC,WAAnB;;AAEAC,EAAAA,SAAS,CAAC;AACR,QAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD;AACzB,UAAOC,OAAP,GAAkBR,YAAlB,CAAOQ,OAAP;;AAEA,UAAIA,OAAO,IAAI,CAACA,OAAO,CAACC,QAAR,CAAiBF,KAAK,CAACG,MAAvB,CAAhB,EAAgD;AAC9CN,QAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,KAND;;AAQAO,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCN,kBAAvC;AACAK,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,YAA1B,EAAwCN,kBAAxC;AACA,WAAO;AACLK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CP,kBAA1C;AACAK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,YAA7B,EAA2CP,kBAA3C;AACD,KAHD;AAID,GAfQ,EAeN,CAACN,YAAD,CAfM,CAAT;;AAiBA,MAAMc,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;AAClBX,IAAAA,WAAW,CAAC,KAAD,CAAX;AACApB,IAAAA,OAAO,CAAC+B,KAAD,CAAP;AACD,GAHD;;AAKA,SACE9B,mBAAA,CAACjB,uBAAD;AACEgD,IAAAA,GAAG,EAAEhB;GADP,EAKEf,mBAAA,CAACC,MAAD;AACEG,IAAAA,IAAI,EAAEA;AACNM,IAAAA,SAAS,EAAEA;AACXJ,IAAAA,UAAU,EAAEA;AACZJ,IAAAA,SAAS,EAAEA;AACXH,IAAAA,OAAO,EAAE;AAAA,aAAMoB,WAAW,CAAC,CAACD,UAAF,CAAjB;AAAA;AACTN,IAAAA,YAAY,EAAEA;AACdE,IAAAA,YAAY,EAAEA;GAPhB,EASGP,KATH,CALF,EAiBGW,UAAU,IAAIP,OAAO,CAACqB,MAAR,GAAiB,CAA/B,IACChC,mBAAA,CAACd,2BAAD,MAAA,EACGyB,OAAO,CAACsB,GAAR,CAAY,UAACnC,MAAD;AAAA,WACXE,mBAAA,CAACJ,kBAAD;AACEE,MAAAA,MAAM,EAAEA;AACRoC,MAAAA,GAAG,EAAEpC,MAAM,CAACK;AACZJ,MAAAA,OAAO,EAAE8B;KAHX,CADW;AAAA,GAAZ,CADH,CAlBJ,CADF;AA+BD,CAtED;;;;;"}

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export declare const BUTTON_DROPDOWN_TYPE: typeof BUTTON_TYPE;
 declare type DROPDOWN_OPTION_TYPE = {
     id: string;
     title: string;
+    isDisabled?: boolean;
 };
 interface IProps {
     type: typeof BUTTON_TYPE;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propellerads/button-drop-down",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "ButtonDropDown component",
   "main": "dist/index.js",
   "module": "dist/button-drop-down.esm.js",
@@ -38,5 +38,5 @@
     "react": "^17.0.2",
     "styled-components": "5.1.1"
   },
-  "gitHead": "82824622b4ac991d78567c473a46b5044cd72035"
+  "gitHead": "444f80c0ee88777023f510ac9a0aa739f333e914"
 }