@propellerads/button-drop-down 2.2.0 → 2.5.0

package/CHANGELOG.md

@@ -1,26 +1,40 @@
-#### `2.2.0`
+## `2.5.0`
+
+* Added `isDisabled` prop for a single drop-down `option`
+
+## `2.4.0`
+
+* migrated to TypeScript
+
+## `2.3.0`
+
+* updated peerDependencies
+
+## `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

@@ -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,29 +30,19 @@ 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: {}
+    },
+    isDisabled: option.isDisabled
+  }, 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,
@@ -90,9 +81,9 @@ 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,
@@ -102,8 +93,8 @@ var ButtonDropDown = function ButtonDropDown(props) {
     },
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, title), isExpanded && options.length > 0 && /*#__PURE__*/React__default.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
-    return /*#__PURE__*/React__default.createElement(ButtonDropDownList, {
+  }, 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
@@ -111,26 +102,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,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
-};
-ButtonDropDown.defaultProps = {
-  type: BUTTON_DROPDOWN_TYPE.ADVANCED,
-  isLoading: false,
-  isDisabled: false,
-  options: [],
-  onMouseEnter: undefined,
-  onMouseLeave: undefined
-};
-
 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    onMouseEnter = undefined,\n    onMouseLeave = undefined,\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        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\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  onMouseEnter: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n};\n\nButtonDropDown.defaultProps = {\n  type: BUTTON_DROPDOWN_TYPE.ADVANCED,\n  isLoading: false,\n  isDisabled: false,\n  options: [],\n  onMouseEnter: undefined,\n  onMouseLeave: undefined,\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","onMouseEnter","undefined","onMouseLeave","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  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}var n,t,i,o=require("react"),r=e(o),s=e(require("prop-types")),u=require("@propellerads/button"),d=e(u),a=e(require("styled-components")),l=require("@propellerads/stylevariables");function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var p=a.div(n||(n=c(["\n  position: relative;\n  width: fit-content;\n"]))),f=a.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),v=a.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),m=u.BUTTON_TYPE,g=function(e){var n=e.option,t=e.onClick;return r.createElement(d,{elementId:n.id,type:u.BUTTON_TYPE.PLAIN,onClick:function(){return t(n)}},r.createElement(v,null,n.title))},E=s.shape({id:s.oneOfType([s.number,s.string]).isRequired,title:s.string.isRequired}).isRequired;g.propTypes={option:E,onClick:s.func.isRequired},g.defaultProps={option:{}};var b=function(e){var n=e.type,t=e.isLoading,i=e.isDisabled,s=e.elementId,u=e.options,a=e.title,l=e.onClick,c=e.onMouseEnter,v=void 0===c?void 0:c,m=e.onMouseLeave,E=void 0===m?void 0:m,b=o.useRef(null),y=o.useState(!1),x=y[0],L=y[1];o.useEffect((function(){var e=function(e){var n=b.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)}}),[b]);var h=function(e){L(!1),l(e)};return r.createElement(p,{ref:b},r.createElement(d,{type:n,isLoading:t,isDisabled:i,elementId:s,onClick:function(){return L(!x)},onMouseEnter:v,onMouseLeave:E},a),x&&u.length>0&&r.createElement(f,null,u.map((function(e){return r.createElement(g,{option:e,key:e.id,onClick:h})}))))};b.propTypes={type:s.oneOf(Object.values(m)),options:s.arrayOf(E),elementId:s.string.isRequired,isLoading:s.bool,isDisabled:s.bool,title:s.string.isRequired,onClick:s.func.isRequired,onMouseEnter:s.func,onMouseLeave:s.func},b.defaultProps={type:m.ADVANCED,isLoading:!1,isDisabled:!1,options:[],onMouseEnter:void 0,onMouseLeave:void 0},exports.BUTTON_DROPDOWN_TYPE=m,exports.default=b;
+"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.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    onMouseEnter = undefined,\n    onMouseLeave = undefined,\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        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\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  onMouseEnter: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n};\n\nButtonDropDown.defaultProps = {\n  type: BUTTON_DROPDOWN_TYPE.ADVANCED,\n  isLoading: false,\n  isDisabled: false,\n  options: [],\n  onMouseEnter: undefined,\n  onMouseLeave: undefined,\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","onMouseEnter","undefined","onMouseLeave","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,EASEP,EATFO,KACAc,EAQErB,EARFqB,UACAC,EAOEtB,EAPFsB,WACAjB,EAMEL,EANFK,UACAkB,EAKEvB,EALFuB,QACAd,EAIET,EAJFS,MACAP,EAGEF,EAHFE,UAGEF,EAFFwB,aAAAA,kBAAeC,MAEbzB,EADF0B,aAAAA,kBAAeD,IAGXE,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,GACZ7B,EAAQwC,WAIRvC,gBAACjB,GACCyD,IAAKhB,GAELxB,gBAACC,GACCG,KAAMA,EACNc,UAAWA,EACXC,WAAYA,EACZjB,UAAWA,EACXH,QAAS,kBAAM6B,GAAaD,IAC5BN,aAAcA,EACdE,aAAcA,GAEbjB,GAGFqB,GAAcP,EAAQqB,OAAS,GAC9BzC,gBAACd,OACEkC,EAAQsB,KAAI,SAAC5C,UACZE,gBAACJ,GACCE,OAAQA,EACR6C,IAAK7C,EAAOK,GACZJ,QAASuC,UASvBrB,EAAeH,UAAY,CACzBV,KAAMI,EAAUoC,MAAMC,OAAOC,OAAOpD,IACpC0B,QAASZ,EAAUuC,QAAQxC,GAC3BL,UAAWM,EAAUI,OAAOC,WAC5BK,UAAWV,EAAUwC,KACrB7B,WAAYX,EAAUwC,KACtB1C,MAAOE,EAAUI,OAAOC,WACxBd,QAASS,EAAUO,KAAKF,WACxBQ,aAAcb,EAAUO,KACxBQ,aAAcf,EAAUO,MAG1BE,EAAeD,aAAe,CAC5BZ,KAAMV,EAAqBuD,SAC3B/B,WAAW,EACXC,YAAY,EACZC,QAAS,GACTC,kBAAcC,EACdC,kBAAcD"}
+{"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

@@ -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,29 +22,19 @@ 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: {}
+    },
+    isDisabled: option.isDisabled
+  }, 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,
@@ -84,9 +73,9 @@ 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,
@@ -96,8 +85,8 @@ var ButtonDropDown = function ButtonDropDown(props) {
     },
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, title), isExpanded && options.length > 0 && /*#__PURE__*/React.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
-    return /*#__PURE__*/React.createElement(ButtonDropDownList, {
+  }, title), isExpanded && options.length > 0 && React.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
+    return React.createElement(ButtonDropDownList, {
       option: option,
       key: option.id,
       onClick: onItemClick
@@ -105,26 +94,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,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
-};
-ButtonDropDown.defaultProps = {
-  type: BUTTON_DROPDOWN_TYPE.ADVANCED,
-  isLoading: false,
-  isDisabled: false,
-  options: [],
-  onMouseEnter: undefined,
-  onMouseLeave: undefined
-};
-
 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    onMouseEnter = undefined,\n    onMouseLeave = undefined,\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        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\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  onMouseEnter: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n};\n\nButtonDropDown.defaultProps = {\n  type: BUTTON_DROPDOWN_TYPE.ADVANCED,\n  isLoading: false,\n  isDisabled: false,\n  options: [],\n  onMouseEnter: undefined,\n  onMouseLeave: undefined,\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","onMouseEnter","undefined","onMouseLeave","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  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/index.d.ts

@@ -0,0 +1,20 @@
+import { BUTTON_TYPE } from '@propellerads/button';
+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;
+    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.2.0",
+  "version": "2.5.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": "7c6e78b4236ce45b20e573ff3f7fa035ec5d9296"
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "styled-components": "5.1.1"
+  },
+  "gitHead": "444f80c0ee88777023f510ac9a0aa739f333e914"
 }

package/dist/AdFormat/index.d.ts

@@ -1,32 +0,0 @@
-export namespace componentProps {
-    export const ads: string[];
-}
-export default AdFormat;
-declare function AdFormat({ name, classNames, isPreview, isSvgPreview, }: {
-    name: any;
-    classNames: any;
-    isPreview: any;
-    isSvgPreview: 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 const isSvgPreview: PropTypes.Requireable<boolean>;
-    }
-    export namespace defaultProps {
-        const classNames_1: string;
-        export { classNames_1 as classNames };
-        const isPreview_1: boolean;
-        export { isPreview_1 as isPreview };
-        const isSvgPreview_1: boolean;
-        export { isSvgPreview_1 as isSvgPreview };
-    }
-}
-import { FORMATS } from "./style";
-import { SVGS } from "./style";
-import { PREVIEWS } from "./style";
-import { SVG_PREVIEWS } from "./style";
-import PropTypes from "prop-types";
-export { FORMATS, SVGS, PREVIEWS, SVG_PREVIEWS };

package/dist/AdFormat/style.d.ts

@@ -1,29 +0,0 @@
-export const StyledAdFormat: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledPreview: import("styled-components").StyledComponent<"img", any, {
-    src: any;
-    alt: string;
-}, "alt" | "src">;
-export const PREVIEWS: {
-    [x: string]: any;
-};
-export const SVG_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 VIGNETTE: 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: import("styled-components").StyledComponent<"div", any, {}, never>;

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 };