@propellerads/button-drop-down 2.1.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+### `2.4.0`
+
+* migrated to TypeScript
+
+### `2.3.0`
+
+* updated peerDependencies
+
+#### `2.2.0`
+
+* added props mouse enter and leave
+
 #### `2.1.0`
 
 * edit package json main and module data
@@ -19,4 +31,4 @@ Fix items height
 
 #### `1.0.0`
 
-Add '@propellerads/button-drop-down' component
+Add '@propellerads/button-drop-down' component

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

@@ -1,10 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
 var Button = require('@propellerads/button');
 var Button__default = _interopDefault(Button);
 var styled = _interopDefault(require('styled-components'));
@@ -29,35 +30,28 @@ var BUTTON_DROPDOWN_TYPE = Button.BUTTON_TYPE;
 var ButtonDropDownList = function ButtonDropDownList(props) {
   var option = props.option,
       _onClick = props.onClick;
-  return /*#__PURE__*/React__default.createElement(Button__default, {
+  return React__default.createElement(Button__default, {
     elementId: option.id,
     type: Button.BUTTON_TYPE.PLAIN,
     onClick: function onClick() {
       return _onClick(option);
     }
-  }, /*#__PURE__*/React__default.createElement(ButtonDropDownListItemContainer, null, option.title));
-};
-
-var ButtonDropDownListProps = /*#__PURE__*/PropTypes.shape({
-  id: /*#__PURE__*/PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  title: PropTypes.string.isRequired
-}).isRequired;
-ButtonDropDownList.propTypes = {
-  option: ButtonDropDownListProps,
-  onClick: PropTypes.func.isRequired
-};
-ButtonDropDownList.defaultProps = {
-  option: {}
+  }, React__default.createElement(ButtonDropDownListItemContainer, null, option.title));
 };
 
 var ButtonDropDown = function ButtonDropDown(props) {
-  var type = props.type,
+  var _props$type = props.type,
+      type = _props$type === void 0 ? Button.BUTTON_TYPE.ADVANCED : _props$type,
       isLoading = props.isLoading,
       isDisabled = props.isDisabled,
       elementId = props.elementId,
       options = props.options,
       title = props.title,
-      onClick = props.onClick;
+      onClick = props.onClick,
+      _props$onMouseEnter = props.onMouseEnter,
+      onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
+      _props$onMouseLeave = props.onMouseLeave,
+      onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
   var containerRef = React.useRef(null);
 
   var _useState = React.useState(false),
@@ -86,18 +80,20 @@ var ButtonDropDown = function ButtonDropDown(props) {
     onClick(value);
   };
 
-  return /*#__PURE__*/React__default.createElement(ButtonDropDownContainer, {
+  return React__default.createElement(ButtonDropDownContainer, {
     ref: containerRef
-  }, /*#__PURE__*/React__default.createElement(Button__default, {
+  }, React__default.createElement(Button__default, {
     type: type,
     isLoading: isLoading,
     isDisabled: isDisabled,
     elementId: elementId,
     onClick: function onClick() {
       return setExpanded(!isExpanded);
-    }
-  }, title), isExpanded && options.length > 0 && /*#__PURE__*/React__default.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
-    return /*#__PURE__*/React__default.createElement(ButtonDropDownList, {
+    },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, title), isExpanded && options.length > 0 && React__default.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
+    return React__default.createElement(ButtonDropDownList, {
       option: option,
       key: option.id,
       onClick: onItemClick
@@ -105,22 +101,6 @@ var ButtonDropDown = function ButtonDropDown(props) {
   })));
 };
 
-ButtonDropDown.propTypes = {
-  type: /*#__PURE__*/PropTypes.oneOf( /*#__PURE__*/Object.values(BUTTON_DROPDOWN_TYPE)),
-  options: /*#__PURE__*/PropTypes.arrayOf(ButtonDropDownListProps),
-  elementId: PropTypes.string.isRequired,
-  isLoading: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  title: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired
-};
-ButtonDropDown.defaultProps = {
-  type: BUTTON_DROPDOWN_TYPE.ADVANCED,
-  isLoading: false,
-  isDisabled: false,
-  options: []
-};
-
 exports.BUTTON_DROPDOWN_TYPE = BUTTON_DROPDOWN_TYPE;
 exports.default = ButtonDropDown;
 //# sourceMappingURL=button-drop-down.cjs.development.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.cjs.development.js","sources":["../src/style.jsx","../src/index.jsx"],"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 PropTypes from 'prop-types';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style.jsx';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\nconst ButtonDropDownList = (props) => {\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\nconst ButtonDropDownListProps = PropTypes.shape({\n  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n  title: PropTypes.string.isRequired,\n}).isRequired;\n\nButtonDropDownList.propTypes = {\n  option: ButtonDropDownListProps,\n  onClick: PropTypes.func.isRequired,\n};\n\nButtonDropDownList.defaultProps = {\n  option: {},\n};\n\nconst ButtonDropDown = (props) => {\n  const {\n    type,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n  } = props;\n\n  const containerRef = useRef(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event) => {\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) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\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\nButtonDropDown.propTypes = {\n  type: PropTypes.oneOf(Object.values(BUTTON_DROPDOWN_TYPE)),\n  options: PropTypes.arrayOf(ButtonDropDownListProps),\n  elementId: PropTypes.string.isRequired,\n  isLoading: PropTypes.bool,\n  isDisabled: PropTypes.bool,\n  title: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nButtonDropDown.defaultProps = {\n  type: BUTTON_DROPDOWN_TYPE.ADVANCED,\n  isLoading: false,\n  isDisabled: false,\n  options: [],\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","id","PLAIN","title","ButtonDropDownListProps","PropTypes","shape","oneOfType","number","string","isRequired","propTypes","func","defaultProps","ButtonDropDown","type","isLoading","isDisabled","elementId","options","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","length","map","oneOf","Object","values","arrayOf","bool","ADVANCED"],"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};\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":";;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,GAAV,uIAA7B;AAKA,IAAMC,2BAA2B,gBAAGF,MAAM,CAACC,GAAV,0WAMXE,qBANW,EAOdC,2BAPc,EAQXC,oBARW,EASpBC,sBAAO,GAAG,CATU,EAWlBC,yBAXkB,CAAjC;AAeA,IAAMC,+BAA+B,gBAAGR,MAAM,CAACC,GAAV,kOAIxBK,sBAAO,GAAG,CAJc,EAIPA,sBAAO,GAAG,CAJH,EAObG,qBAPa,CAArC;;ICrBaC,oBAAoB,GAAGC;;AAOpC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD;AACzB,MACEC,MADF,GAGID,KAHJ,CACEC,MADF;AAAA,MAEEC,QAFF,GAGIF,KAHJ,CAEEE,OAFF;AAKA,SACEC,4BAAA,CAACC,eAAD;AACEC,IAAAA,SAAS,EAAEJ,MAAM,CAACK;AAClBC,IAAAA,IAAI,EAAET,kBAAW,CAACU;AAClBN,IAAAA,OAAO,EAAE;AAAA,aAAMA,QAAO,CAACD,MAAD,CAAb;AAAA;GAHX,EAKEE,4BAAA,CAACR,+BAAD,MAAA,EACGM,MAAM,CAACQ,KADV,CALF,CADF;AAWD,CAjBD;;AA+BA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACV,KAAD;AACrB,oBAUIA,KAVJ,CACEO,IADF;AAAA,MACEA,IADF,4BACST,kBAAW,CAACa,QADrB;AAAA,MAEEC,SAFF,GAUIZ,KAVJ,CAEEY,SAFF;AAAA,MAGEC,UAHF,GAUIb,KAVJ,CAGEa,UAHF;AAAA,MAIER,SAJF,GAUIL,KAVJ,CAIEK,SAJF;AAAA,MAKES,OALF,GAUId,KAVJ,CAKEc,OALF;AAAA,MAMEL,KANF,GAUIT,KAVJ,CAMES,KANF;AAAA,MAOEP,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,YAAM,CAAiB,IAAjB,CAA3B;;AAEA,kBAAkCC,cAAQ,CAAC,KAAD,CAA1C;AAAA,MAAOC,UAAP;AAAA,MAAmBC,WAAnB;;AAEAC,EAAAA,eAAS,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,4BAAA,CAACjB,uBAAD;AACEgD,IAAAA,GAAG,EAAEhB;GADP,EAKEf,4BAAA,CAACC,eAAD;AACEG,IAAAA,IAAI,EAAEA;AACNK,IAAAA,SAAS,EAAEA;AACXC,IAAAA,UAAU,EAAEA;AACZR,IAAAA,SAAS,EAAEA;AACXH,IAAAA,OAAO,EAAE;AAAA,aAAMoB,WAAW,CAAC,CAACD,UAAF,CAAjB;AAAA;AACTN,IAAAA,YAAY,EAAEA;AACdE,IAAAA,YAAY,EAAEA;GAPhB,EASGR,KATH,CALF,EAiBGY,UAAU,IAAIP,OAAO,CAACqB,MAAR,GAAiB,CAA/B,IACChC,4BAAA,CAACd,2BAAD,MAAA,EACGyB,OAAO,CAACsB,GAAR,CAAY,UAACnC,MAAD;AAAA,WACXE,4BAAA,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/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}var n,t,i,r=require("react"),o=e(r),s=e(require("prop-types")),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 p=d.div(n||(n=c(["\n  position: relative;\n  width: fit-content;\n"]))),f=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),m=d.div(i||(i=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),g=u.BUTTON_TYPE,v=function(e){var n=e.option,t=e.onClick;return o.createElement(a,{elementId:n.id,type:u.BUTTON_TYPE.PLAIN,onClick:function(){return t(n)}},o.createElement(m,null,n.title))},b=s.shape({id:s.oneOfType([s.number,s.string]).isRequired,title:s.string.isRequired}).isRequired;v.propTypes={option:b,onClick:s.func.isRequired},v.defaultProps={option:{}};var y=function(e){var n=e.type,t=e.isLoading,i=e.isDisabled,s=e.elementId,u=e.options,d=e.title,l=e.onClick,c=r.useRef(null),m=r.useState(!1),g=m[0],b=m[1];r.useEffect((function(){var e=function(e){var n=c.current;n&&!n.contains(e.target)&&b(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[c]);var y=function(e){b(!1),l(e)};return o.createElement(p,{ref:c},o.createElement(a,{type:n,isLoading:t,isDisabled:i,elementId:s,onClick:function(){return b(!g)}},d),g&&u.length>0&&o.createElement(f,null,u.map((function(e){return o.createElement(v,{option:e,key:e.id,onClick:y})}))))};y.propTypes={type:s.oneOf(Object.values(g)),options:s.arrayOf(b),elementId:s.string.isRequired,isLoading:s.bool,isDisabled:s.bool,title:s.string.isRequired,onClick:s.func.isRequired},y.defaultProps={type:g.ADVANCED,isLoading:!1,isDisabled:!1,options:[]},exports.BUTTON_DROPDOWN_TYPE=g,exports.default=y;
+"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})}))))};
 //# 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.jsx","../src/index.jsx"],"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 PropTypes from 'prop-types';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style.jsx';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\nconst ButtonDropDownList = (props) => {\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\nconst ButtonDropDownListProps = PropTypes.shape({\n  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n  title: PropTypes.string.isRequired,\n}).isRequired;\n\nButtonDropDownList.propTypes = {\n  option: ButtonDropDownListProps,\n  onClick: PropTypes.func.isRequired,\n};\n\nButtonDropDownList.defaultProps = {\n  option: {},\n};\n\nconst ButtonDropDown = (props) => {\n  const {\n    type,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n  } = props;\n\n  const containerRef = useRef(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event) => {\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) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\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\nButtonDropDown.propTypes = {\n  type: PropTypes.oneOf(Object.values(BUTTON_DROPDOWN_TYPE)),\n  options: PropTypes.arrayOf(ButtonDropDownListProps),\n  elementId: PropTypes.string.isRequired,\n  isLoading: PropTypes.bool,\n  isDisabled: PropTypes.bool,\n  title: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nButtonDropDown.defaultProps = {\n  type: BUTTON_DROPDOWN_TYPE.ADVANCED,\n  isLoading: false,\n  isDisabled: false,\n  options: [],\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","ButtonDropDownListProps","PropTypes","shape","oneOfType","number","string","isRequired","propTypes","func","defaultProps","ButtonDropDown","isLoading","isDisabled","options","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key","oneOf","Object","values","arrayOf","bool","ADVANCED"],"mappings":"0TAUA,IAAMA,EAA0BC,EAAOC,oEAKjCC,EAA8BF,EAAOC,8RAMrBE,SACHC,eACGC,QACC,EAAVC,UAEEC,cAITC,EAAkCR,EAAOC,wJAIxB,EAAVK,UAA2B,EAAVA,UAGNG,UC3BXC,EAAuBC,cAE9BC,EAAqB,SAACC,OAExBC,EAEED,EAFFC,OACAC,EACEF,EADFE,eAIAC,gBAACC,GACCC,UAAWJ,EAAOK,GAClBC,KAAMT,cAAYU,MAClBN,QAAS,kBAAMA,EAAQD,KAEvBE,gBAACR,OACEM,EAAOQ,SAMVC,EAA0BC,EAAUC,MAAM,CAC9CN,GAAIK,EAAUE,UAAU,CAACF,EAAUG,OAAQH,EAAUI,SAASC,WAC9DP,MAAOE,EAAUI,OAAOC,aACvBA,WAEHjB,EAAmBkB,UAAY,CAC7BhB,OAAQS,EACRR,QAASS,EAAUO,KAAKF,YAG1BjB,EAAmBoB,aAAe,CAChClB,OAAQ,IAGV,IAAMmB,EAAiB,SAACpB,OAEpBO,EAOEP,EAPFO,KACAc,EAMErB,EANFqB,UACAC,EAKEtB,EALFsB,WACAjB,EAIEL,EAJFK,UACAkB,EAGEvB,EAHFuB,QACAd,EAEET,EAFFS,MACAP,EACEF,EADFE,QAGIsB,EAAeC,SAAO,QAEMC,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,GACZ1B,EAAQqC,WAIRpC,gBAACjB,GACCsD,IAAKhB,GAELrB,gBAACC,GACCG,KAAMA,EACNc,UAAWA,EACXC,WAAYA,EACZjB,UAAWA,EACXH,QAAS,kBAAM0B,GAAaD,KAE3BlB,GAGFkB,GAAcJ,EAAQkB,OAAS,GAC9BtC,gBAACd,OACEkC,EAAQmB,KAAI,SAACzC,UACZE,gBAACJ,GACCE,OAAQA,EACR0C,IAAK1C,EAAOK,GACZJ,QAASoC,UASvBlB,EAAeH,UAAY,CACzBV,KAAMI,EAAUiC,MAAMC,OAAOC,OAAOjD,IACpC0B,QAASZ,EAAUoC,QAAQrC,GAC3BL,UAAWM,EAAUI,OAAOC,WAC5BK,UAAWV,EAAUqC,KACrB1B,WAAYX,EAAUqC,KACtBvC,MAAOE,EAAUI,OAAOC,WACxBd,QAASS,EAAUO,KAAKF,YAG1BI,EAAeD,aAAe,CAC5BZ,KAAMV,EAAqBoD,SAC3B5B,WAAW,EACXC,YAAY,EACZC,QAAS"}
+{"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"}

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

@@ -1,5 +1,4 @@
 import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import Button, { BUTTON_TYPE } from '@propellerads/button';
 import styled from 'styled-components';
 import { gray80, borderRadius, white, spacing, fontNormal, gray95 } from '@propellerads/stylevariables';
@@ -23,35 +22,28 @@ var BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;
 var ButtonDropDownList = function ButtonDropDownList(props) {
   var option = props.option,
       _onClick = props.onClick;
-  return /*#__PURE__*/React.createElement(Button, {
+  return React.createElement(Button, {
     elementId: option.id,
     type: BUTTON_TYPE.PLAIN,
     onClick: function onClick() {
       return _onClick(option);
     }
-  }, /*#__PURE__*/React.createElement(ButtonDropDownListItemContainer, null, option.title));
-};
-
-var ButtonDropDownListProps = /*#__PURE__*/PropTypes.shape({
-  id: /*#__PURE__*/PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  title: PropTypes.string.isRequired
-}).isRequired;
-ButtonDropDownList.propTypes = {
-  option: ButtonDropDownListProps,
-  onClick: PropTypes.func.isRequired
-};
-ButtonDropDownList.defaultProps = {
-  option: {}
+  }, React.createElement(ButtonDropDownListItemContainer, null, option.title));
 };
 
 var ButtonDropDown = function ButtonDropDown(props) {
-  var type = props.type,
+  var _props$type = props.type,
+      type = _props$type === void 0 ? BUTTON_TYPE.ADVANCED : _props$type,
       isLoading = props.isLoading,
       isDisabled = props.isDisabled,
       elementId = props.elementId,
       options = props.options,
       title = props.title,
-      onClick = props.onClick;
+      onClick = props.onClick,
+      _props$onMouseEnter = props.onMouseEnter,
+      onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
+      _props$onMouseLeave = props.onMouseLeave,
+      onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
   var containerRef = useRef(null);
 
   var _useState = useState(false),
@@ -80,18 +72,20 @@ var ButtonDropDown = function ButtonDropDown(props) {
     onClick(value);
   };
 
-  return /*#__PURE__*/React.createElement(ButtonDropDownContainer, {
+  return React.createElement(ButtonDropDownContainer, {
     ref: containerRef
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, React.createElement(Button, {
     type: type,
     isLoading: isLoading,
     isDisabled: isDisabled,
     elementId: elementId,
     onClick: function onClick() {
       return setExpanded(!isExpanded);
-    }
-  }, title), isExpanded && options.length > 0 && /*#__PURE__*/React.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
-    return /*#__PURE__*/React.createElement(ButtonDropDownList, {
+    },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, title), isExpanded && options.length > 0 && React.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
+    return React.createElement(ButtonDropDownList, {
       option: option,
       key: option.id,
       onClick: onItemClick
@@ -99,22 +93,6 @@ var ButtonDropDown = function ButtonDropDown(props) {
   })));
 };
 
-ButtonDropDown.propTypes = {
-  type: /*#__PURE__*/PropTypes.oneOf( /*#__PURE__*/Object.values(BUTTON_DROPDOWN_TYPE)),
-  options: /*#__PURE__*/PropTypes.arrayOf(ButtonDropDownListProps),
-  elementId: PropTypes.string.isRequired,
-  isLoading: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  title: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired
-};
-ButtonDropDown.defaultProps = {
-  type: BUTTON_DROPDOWN_TYPE.ADVANCED,
-  isLoading: false,
-  isDisabled: false,
-  options: []
-};
-
 export default ButtonDropDown;
 export { BUTTON_DROPDOWN_TYPE };
 //# sourceMappingURL=button-drop-down.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.jsx","../src/index.jsx"],"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 PropTypes from 'prop-types';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {\n  ButtonDropDownContainer,\n  ButtonDropDownListContainer,\n  ButtonDropDownListItemContainer,\n} from './style.jsx';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\nconst ButtonDropDownList = (props) => {\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\nconst ButtonDropDownListProps = PropTypes.shape({\n  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n  title: PropTypes.string.isRequired,\n}).isRequired;\n\nButtonDropDownList.propTypes = {\n  option: ButtonDropDownListProps,\n  onClick: PropTypes.func.isRequired,\n};\n\nButtonDropDownList.defaultProps = {\n  option: {},\n};\n\nconst ButtonDropDown = (props) => {\n  const {\n    type,\n    isLoading,\n    isDisabled,\n    elementId,\n    options,\n    title,\n    onClick,\n  } = props;\n\n  const containerRef = useRef(null);\n\n  const [isExpanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    const handleClickOutside = (event) => {\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) => {\n    setExpanded(false);\n    onClick(value);\n  };\n\n  return (\n    <ButtonDropDownContainer\n      ref={containerRef}\n    >\n      <Button\n        type={type}\n        isLoading={isLoading}\n        isDisabled={isDisabled}\n        elementId={elementId}\n        onClick={() => setExpanded(!isExpanded)}\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\nButtonDropDown.propTypes = {\n  type: PropTypes.oneOf(Object.values(BUTTON_DROPDOWN_TYPE)),\n  options: PropTypes.arrayOf(ButtonDropDownListProps),\n  elementId: PropTypes.string.isRequired,\n  isLoading: PropTypes.bool,\n  isDisabled: PropTypes.bool,\n  title: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nButtonDropDown.defaultProps = {\n  type: BUTTON_DROPDOWN_TYPE.ADVANCED,\n  isLoading: false,\n  isDisabled: false,\n  options: [],\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","id","PLAIN","title","ButtonDropDownListProps","PropTypes","shape","oneOfType","number","string","isRequired","propTypes","func","defaultProps","ButtonDropDown","type","isLoading","isDisabled","elementId","options","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","length","map","oneOf","Object","values","arrayOf","bool","ADVANCED"],"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};\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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"}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { BUTTON_TYPE } from '@propellerads/button';
+export declare const BUTTON_DROPDOWN_TYPE: typeof BUTTON_TYPE;
+declare type DROPDOWN_OPTION_TYPE = {
+    id: string;
+    title: string;
+};
+interface IProps {
+    type: typeof BUTTON_TYPE;
+    options: DROPDOWN_OPTION_TYPE[];
+    elementId: string;
+    isLoading: boolean;
+    isDisabled: boolean;
+    title: string;
+    onClick: (value: DROPDOWN_OPTION_TYPE) => void;
+    onMouseEnter: () => void | undefined;
+    onMouseLeave: () => void | undefined;
+}
+declare const ButtonDropDown: (props: IProps) => JSX.Element;
+export default ButtonDropDown;

package/dist/style.d.ts

@@ -0,0 +1,4 @@
+declare const ButtonDropDownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ButtonDropDownListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const ButtonDropDownListItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propellerads/button-drop-down",
-  "version": "2.1.0",
+  "version": "2.4.0",
   "description": "ButtonDropDown component",
   "main": "dist/index.js",
   "module": "dist/button-drop-down.esm.js",
@@ -23,10 +23,7 @@
   "dependencies": {
     "@propellerads/button": "^5.2.1",
     "@propellerads/stylevariables": "^1.3.1",
-    "add": "^2.0.6",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "styled-components": "^5.3.0"
+    "add": "^2.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
@@ -37,5 +34,9 @@
     "tslib": "^2.3.1",
     "typescript": "^4.4.2"
   },
-  "gitHead": "f6e70f7118c524db447a2eb4cde6fa909b5cf547"
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "styled-components": "5.1.1"
+  },
+  "gitHead": "82824622b4ac991d78567c473a46b5044cd72035"
 }

package/dist/AdFormat/index.d.ts

@@ -1,27 +0,0 @@
-export namespace componentProps {
-    export const ads: string[];
-}
-export default AdFormat;
-declare function AdFormat({ name, classNames, isPreview, }: {
-    name: any;
-    classNames: any;
-    isPreview: any;
-}): JSX.Element | null;
-declare namespace AdFormat {
-    export namespace propTypes {
-        export const name: PropTypes.Validator<string>;
-        export const classNames: PropTypes.Requireable<string>;
-        export const isPreview: PropTypes.Requireable<boolean>;
-    }
-    export namespace defaultProps {
-        const classNames_1: string;
-        export { classNames_1 as classNames };
-        const isPreview_1: boolean;
-        export { isPreview_1 as isPreview };
-    }
-}
-import { FORMATS } from "./style";
-import { SVGS } from "./style";
-import { PREVIEWS } from "./style";
-import PropTypes from "prop-types";
-export { FORMATS, SVGS, PREVIEWS };

package/dist/AdFormat/style.d.ts

@@ -1,22 +0,0 @@
-export const StyledAdFormat: any;
-export const StyledPreview: any;
-export const PREVIEWS: {
-    [x: string]: any;
-};
-export namespace FORMATS {
-    export const INTERSTITIAL: string;
-    export const NATIVE: string;
-    export const ONCLICK: string;
-    export const NATIVEADS: string;
-    export const LINK: string;
-    export const DIRECT_LINK: string;
-    export const PUSH_LINK: string;
-    export const WEBSITE: string;
-    export const LANDING_PAGE: string;
-    export const IN_PAGE_PUSH: string;
-    export const NATIVE_WIDGET: string;
-    export const MULTITAG: string;
-}
-export const SVGS: {
-    [x: string]: any;
-};

package/dist/Alert/src/index.d.ts

@@ -1,4 +0,0 @@
-import { ALERT_TYPES, AlertProps } from './types';
-declare const Alert: ({ type, children, icon }: AlertProps) => JSX.Element;
-export default Alert;
-export { ALERT_TYPES };

package/dist/Alert/src/style.d.ts

@@ -1,8 +0,0 @@
-import { ALERT_TYPES } from './types';
-interface StyledAlertProps {
-    type: ALERT_TYPES;
-}
-declare const StyledAlert: import("styled-components").StyledComponent<"div", any, StyledAlertProps, never>;
-declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { StyledAlert, StyledIcon, StyledMessage, ALERT_TYPES, };

package/dist/Alert/src/types.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export declare enum ALERT_TYPES {
-    WARNING = "warning",
-    SUCCESS = "success",
-    DANGER = "danger",
-    INFO = "info"
-}
-export interface AlertProps {
-    type?: ALERT_TYPES;
-    icon?: React.ComponentElement<any, any> | undefined;
-    children: React.ReactChildren | string | React.ComponentElement<any, any>;
-}
-export default class Alert extends React.Component<AlertProps> {
-}

package/dist/ArrowButton/index.d.ts

@@ -1,20 +0,0 @@
-export namespace ARROW_TYPE {
-    export const FIRST: string;
-    export const PREVIOUS: string;
-    export const NEXT: string;
-    export const LAST: string;
-}
-export default ArrowButton;
-declare function ArrowButton(props: any): JSX.Element;
-declare namespace ArrowButton {
-    export const propTypes: {
-        type: PropTypes.Validator<string>;
-        isDisabled: PropTypes.Requireable<boolean>;
-        elementId: PropTypes.Validator<string>;
-        onClick: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    export namespace defaultProps {
-        export const isDisabled: boolean;
-    }
-}
-import PropTypes from "prop-types";

package/dist/ArrowButton/style.d.ts

@@ -1 +0,0 @@
-export const StyledArrowButton: any;

package/dist/Badge/src/index.d.ts

@@ -1,4 +0,0 @@
-import { BADGE_TYPE, BadgeProps, CustomStyle } from './types';
-declare const Badge: ({ label, type, customStyle, icon, }: BadgeProps) => JSX.Element;
-export default Badge;
-export { BADGE_TYPE, CustomStyle };

package/dist/Badge/src/style.d.ts

@@ -1,8 +0,0 @@
-import { BADGE_TYPE, CustomStyle } from './types';
-interface StyledBadgeContainerProps {
-    type: BADGE_TYPE;
-    customStyle: CustomStyle;
-}
-declare const StyledBadgeContainer: import("styled-components").StyledComponent<"div", any, StyledBadgeContainerProps, never>;
-declare const StyledBadgeIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
-export { StyledBadgeContainer, StyledBadgeIcon };

package/dist/Badge/src/types.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-export declare enum BADGE_TYPE {
-    INFO = "info",
-    WARNING = "warning",
-    DANGER = "danger",
-    SUCCESS = "success"
-}
-export interface CustomStyle {
-    color?: string;
-    background?: string;
-}
-export interface BadgeProps {
-    label?: React.ReactChildren | string | React.ComponentElement<any, any>;
-    type?: BADGE_TYPE;
-    customStyle?: CustomStyle;
-    icon?: React.ComponentElement<any, any>;
-}
-export default class Badge extends React.Component<BadgeProps> {
-}

package/dist/Button/src/index.d.ts

@@ -1,4 +0,0 @@
-import { ButtonProps, BUTTON_TYPE, BUTTON_SIZE, BUTTON_HTML_TYPE } from './types';
-declare const Button: ({ isLoading, htmlType, type, size, onClick, isFullWidth, elementId, isAsync, isDisabled, children, gtmAction, gtmLabel, onMouseEnter, onMouseLeave, }: ButtonProps) => JSX.Element;
-export default Button;
-export { BUTTON_TYPE, BUTTON_SIZE, BUTTON_HTML_TYPE };

package/dist/Button/src/style.d.ts

@@ -1,13 +0,0 @@
-import { BUTTON_TYPE, BUTTON_SIZE, THEME } from './types';
-interface StyledButtonProps {
-    isDisabled: boolean;
-    isLoading: boolean;
-    styledType: BUTTON_TYPE;
-    isFullWidth: boolean;
-    size: BUTTON_SIZE;
-    theme: THEME;
-}
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, {
-    disabled: boolean;
-} & StyledButtonProps, "disabled">;
-export { StyledButton };