@propellerads/button-drop-down 3.0.0 → 3.0.2

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

@@ -11,13 +11,8 @@ var Button__default = _interopDefault(Button);
 var styled = _interopDefault(require('styled-components'));
 var stylevariables = require('@propellerads/stylevariables');
 
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
 }
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -25,49 +20,43 @@ var ButtonDropDownContainer = /*#__PURE__*/styled.div(_templateObject || (_templ
 var ButtonDropDownListContainer = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])), stylevariables.gray80, stylevariables.borderRadius, stylevariables.white, stylevariables.spacing * 2, stylevariables.fontNormal);
 var ButtonDropDownListItemContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ", "px ", "px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), stylevariables.spacing * 2, stylevariables.spacing * 3, stylevariables.gray95);
 
-var BUTTON_DROPDOWN_TYPE = Button.BUTTON_TYPE;
-
+var BUTTON_DROPDOWN_TYPE = Button.ButtonType;
 var ButtonDropDownList = function ButtonDropDownList(props) {
   var option = props.option,
-      _onClick = props.onClick;
+    _onClick = props.onClick;
   return React__default.createElement(Button__default, {
     elementId: option.id,
-    type: Button.BUTTON_TYPE.PLAIN,
+    type: Button.ButtonType.Plain,
     onClick: function onClick() {
       return _onClick(option);
     },
     isDisabled: option.isDisabled
   }, React__default.createElement(ButtonDropDownListItemContainer, null, option.title));
 };
-
 var ButtonDropDown = function ButtonDropDown(props) {
   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,
-      _props$onMouseEnter = props.onMouseEnter,
-      onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
-      _props$onMouseLeave = props.onMouseLeave,
-      onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
+    type = _props$type === void 0 ? Button.ButtonType.Advanced : _props$type,
+    isLoading = props.isLoading,
+    isDisabled = props.isDisabled,
+    elementId = props.elementId,
+    options = props.options,
+    title = props.title,
+    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),
-      isExpanded = _useState[0],
-      setExpanded = _useState[1];
-
+    isExpanded = _useState[0],
+    setExpanded = _useState[1];
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
       var current = containerRef.current;
-
       if (current && !current.contains(event.target)) {
         setExpanded(false);
       }
     };
-
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
     return function () {
@@ -75,12 +64,10 @@ var ButtonDropDown = function ButtonDropDown(props) {
       document.removeEventListener('touchstart', handleClickOutside);
     };
   }, [containerRef]);
-
   var onItemClick = function onItemClick(value) {
     setExpanded(false);
     onClick(value);
   };
-
   return React__default.createElement(ButtonDropDownContainer, {
     ref: containerRef
   }, React__default.createElement(Button__default, {

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

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} 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 {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} 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 {option, onClick} = 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>{option.title}</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 ref={containerRef}>\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 option={option} key={option.id} onClick={onItemClick} />\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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"}
+{"version":3,"file":"button-drop-down.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} 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 {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = ButtonType;\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 {option, onClick} = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={ButtonType.Plain}\n      onClick={() => onClick(option)}\n      isDisabled={option.isDisabled}\n    >\n      <ButtonDropDownListItemContainer>{option.title}</ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: ButtonType;\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 = ButtonType.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 ref={containerRef}>\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 option={option} key={option.id} onClick={onItemClick} />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","_templateObject","_taggedTemplateLiteralLoose","ButtonDropDownListContainer","_templateObject2","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","_templateObject3","gray95","BUTTON_DROPDOWN_TYPE","ButtonType","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","Plain","isDisabled","title","ButtonDropDown","_props$type","Advanced","isLoading","options","_props$onMouseEnter","onMouseEnter","undefined","_props$onMouseLeave","onMouseLeave","containerRef","useRef","_useState","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,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})}))))};
+"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),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),v=u.div(o||(o=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),f=function(e){var n=e.option,t=e.onClick;return r.createElement(d,{elementId:n.id,type:a.ButtonType.Plain,onClick:function(){return t(n)},isDisabled:n.isDisabled},r.createElement(v,null,n.title))};exports.BUTTON_DROPDOWN_TYPE=a.ButtonType,exports.default=function(e){var n=e.type,t=void 0===n?a.ButtonType.Advanced:n,o=e.isLoading,u=e.isDisabled,l=e.elementId,s=e.options,v=e.title,m=e.onClick,g=e.onMouseEnter,x=void 0===g?void 0:g,b=e.onMouseLeave,y=void 0===b?void 0:b,E=i.useRef(null),h=i.useState(!1),k=h[0],w=h[1];i.useEffect((function(){var e=function(e){var n=E.current;n&&!n.contains(e.target)&&w(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[E]);var L=function(e){w(!1),m(e)};return r.createElement(c,{ref:E},r.createElement(d,{type:t,isLoading:o,isDisabled:u,elementId:l,onClick:function(){return w(!k)},onMouseEnter:x,onMouseLeave:y},v),k&&s.length>0&&r.createElement(p,null,s.map((function(e){return r.createElement(f,{option:e,key:e.id,onClick:L})}))))};
 //# sourceMappingURL=button-drop-down.cjs.production.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} 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 {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} 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 {option, onClick} = 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>{option.title}</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 ref={containerRef}>\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 option={option} key={option.id} onClick={onItemClick} />\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":"sVAGA,IAAMA,EAA0BC,EAAOC,oEAKjCC,EAA8BF,EAAOC,8RAMrBE,SACHC,eACGC,QACC,EAAVC,UAEEC,cAITC,EAAkCR,EAAOC,wJAIxB,EAAVK,UAA2B,EAAVA,UAGNG,UCjBlBC,EAAqB,SAACC,OACnBC,EAAmBD,EAAnBC,OAAQC,EAAWF,EAAXE,eAGbC,gBAACC,GACCC,UAAWJ,EAAOK,GAClBC,KAAMC,cAAYC,MAClBP,QAAS,kBAAMA,EAAQD,IACvBS,WAAYT,EAAOS,YAEnBP,gBAACN,OAAiCI,EAAOU,sCAlBXH,8BAmCb,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,GAAwB8C,IAAKhB,GAG5Bf,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,GAAmBE,OAAQA,EAAQoC,IAAKpC,EAAOK,GAAIJ,QAAS8B"}
+{"version":3,"file":"button-drop-down.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} 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 {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = ButtonType;\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 {option, onClick} = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={ButtonType.Plain}\n      onClick={() => onClick(option)}\n      isDisabled={option.isDisabled}\n    >\n      <ButtonDropDownListItemContainer>{option.title}</ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: ButtonType;\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 = ButtonType.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 ref={containerRef}>\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 option={option} key={option.id} onClick={onItemClick} />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","_templateObject","_taggedTemplateLiteralLoose","ButtonDropDownListContainer","_templateObject2","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","_templateObject3","gray95","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","ButtonType","Plain","isDisabled","title","_props$type","Advanced","isLoading","options","_props$onMouseEnter","onMouseEnter","undefined","_props$onMouseLeave","onMouseLeave","containerRef","useRef","_useState","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"sVAGA,IAAMA,EAA0BC,EAAOC,IAAGC,IAAAA,EAAAC,0DAKpCC,EAA8BJ,EAAOC,IAAGI,IAAAA,EAAAF,oRAMxBG,SACHC,eACGC,QACC,EAAVC,UAEEC,cAITC,EAAkCX,EAAOC,IAAGW,IAAAA,EAAAT,8IAI3B,EAAVM,UAA2B,EAAVA,UAGNI,UCjBlBC,EAAqB,SAACC,GAC1B,IAAOC,EAAmBD,EAAnBC,OAAQC,EAAWF,EAAXE,QAEf,OACEC,gBAACC,GACCC,UAAWJ,EAAOK,GAClBC,KAAMC,aAAWC,MACjBP,QAAS,WAAF,OAAQA,EAAQD,IACvBS,WAAYT,EAAOS,YAEnBP,gBAACP,OAAiCK,EAAOU,sCAlBXH,6BAmCb,SAACR,GACtB,IAAAY,EAUIZ,EATFO,KAAAA,WAAIK,EAAGJ,aAAWK,SAAQD,EAC1BE,EAQEd,EARFc,UACAJ,EAOEV,EAPFU,WACAL,EAMEL,EANFK,UACAU,EAKEf,EALFe,QACAJ,EAIEX,EAJFW,MACAT,EAGEF,EAHFE,QAAOc,EAGLhB,EAFFiB,aAAAA,WAAYD,OAAGE,EAASF,EAAAG,EAEtBnB,EADFoB,aAAAA,WAAYD,OAAGD,EAASC,EAGpBE,EAAeC,SAAuB,MAE5CC,EAAkCC,YAAS,GAApCC,EAAUF,KAAEG,EAAWH,KAE9BI,aAAU,WACR,IAAMC,EAAqB,SAACC,GAC1B,IAAOC,EAAWT,EAAXS,QAEHA,IAAYA,EAAQC,SAASF,EAAMG,SACrCN,GAAY,IAMhB,OAFAO,SAASC,iBAAiB,YAAaN,GACvCK,SAASC,iBAAiB,aAAcN,GACjC,WACLK,SAASE,oBAAoB,YAAaP,GAC1CK,SAASE,oBAAoB,aAAcP,MAE5C,CAACP,IAEJ,IAAMe,EAAc,SAACC,GACnBX,GAAY,GACZxB,EAAQmC,IAGV,OACElC,gBAACnB,GAAwBsD,IAAKjB,GAG5BlB,gBAACC,GACCG,KAAMA,EACNO,UAAWA,EACXJ,WAAYA,EACZL,UAAWA,EACXH,QAAS,WAAF,OAAQwB,GAAaD,IAC5BR,aAAcA,EACdG,aAAcA,GAEbT,GAGFc,GAAcV,EAAQwB,OAAS,GAC9BpC,gBAACd,OACE0B,EAAQyB,KAAI,SAACvC,GAAM,OAClBE,gBAACJ,GAAmBE,OAAQA,EAAQwC,IAAKxC,EAAOK,GAAIJ,QAASkC"}

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

@@ -1,15 +1,10 @@
 import React, { useRef, useState, useEffect } from 'react';
-import Button, { BUTTON_TYPE } from '@propellerads/button';
+import Button, { ButtonType } from '@propellerads/button';
 import styled from 'styled-components';
 import { gray80, borderRadius, white, spacing, fontNormal, gray95 } from '@propellerads/stylevariables';
 
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
 }
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -17,49 +12,43 @@ var ButtonDropDownContainer = /*#__PURE__*/styled.div(_templateObject || (_templ
 var ButtonDropDownListContainer = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])), gray80, borderRadius, white, spacing * 2, fontNormal);
 var ButtonDropDownListItemContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  text-align: left;\n  min-height: 32px;\n  padding: ", "px ", "px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), spacing * 2, spacing * 3, gray95);
 
-var BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;
-
+var BUTTON_DROPDOWN_TYPE = ButtonType;
 var ButtonDropDownList = function ButtonDropDownList(props) {
   var option = props.option,
-      _onClick = props.onClick;
+    _onClick = props.onClick;
   return React.createElement(Button, {
     elementId: option.id,
-    type: BUTTON_TYPE.PLAIN,
+    type: ButtonType.Plain,
     onClick: function onClick() {
       return _onClick(option);
     },
     isDisabled: option.isDisabled
   }, React.createElement(ButtonDropDownListItemContainer, null, option.title));
 };
-
 var ButtonDropDown = function ButtonDropDown(props) {
   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,
-      _props$onMouseEnter = props.onMouseEnter,
-      onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
-      _props$onMouseLeave = props.onMouseLeave,
-      onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
+    type = _props$type === void 0 ? ButtonType.Advanced : _props$type,
+    isLoading = props.isLoading,
+    isDisabled = props.isDisabled,
+    elementId = props.elementId,
+    options = props.options,
+    title = props.title,
+    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),
-      isExpanded = _useState[0],
-      setExpanded = _useState[1];
-
+    isExpanded = _useState[0],
+    setExpanded = _useState[1];
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
       var current = containerRef.current;
-
       if (current && !current.contains(event.target)) {
         setExpanded(false);
       }
     };
-
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
     return function () {
@@ -67,12 +56,10 @@ var ButtonDropDown = function ButtonDropDown(props) {
       document.removeEventListener('touchstart', handleClickOutside);
     };
   }, [containerRef]);
-
   var onItemClick = function onItemClick(value) {
     setExpanded(false);
     onClick(value);
   };
-
   return React.createElement(ButtonDropDownContainer, {
     ref: containerRef
   }, React.createElement(Button, {

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

@@ -1 +1 @@
-{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} 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 {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} 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 {option, onClick} = 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>{option.title}</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 ref={containerRef}>\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 option={option} key={option.id} onClick={onItemClick} />\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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"}
+{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} 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 {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = ButtonType;\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 {option, onClick} = props;\n\n  return (\n    <Button\n      elementId={option.id}\n      type={ButtonType.Plain}\n      onClick={() => onClick(option)}\n      isDisabled={option.isDisabled}\n    >\n      <ButtonDropDownListItemContainer>{option.title}</ButtonDropDownListItemContainer>\n    </Button>\n  );\n};\n\ninterface IProps {\n  type: ButtonType;\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 = ButtonType.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 ref={containerRef}>\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 option={option} key={option.id} onClick={onItemClick} />\n          ))}\n        </ButtonDropDownListContainer>\n      )}\n    </ButtonDropDownContainer>\n  );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","_templateObject","_taggedTemplateLiteralLoose","ButtonDropDownListContainer","_templateObject2","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","_templateObject3","gray95","BUTTON_DROPDOWN_TYPE","ButtonType","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","Plain","isDisabled","title","ButtonDropDown","_props$type","Advanced","isLoading","options","_props$onMouseEnter","onMouseEnter","undefined","_props$onMouseLeave","onMouseLeave","containerRef","useRef","_useState","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

@@ -1,13 +1,21 @@
 import React from 'react';
-import { BUTTON_TYPE } from '@propellerads/button';
-export declare const BUTTON_DROPDOWN_TYPE: typeof BUTTON_TYPE;
+import { ButtonType } from '@propellerads/button';
+export declare const BUTTON_DROPDOWN_TYPE: {
+    readonly Primary: "isPrimary";
+    readonly Secondary: "isSecondary";
+    readonly Advanced: "isAdvanced";
+    readonly Link: "isLink";
+    readonly Plain: "isPlain";
+    readonly Danger: "isDanger";
+    readonly Success: "isSuccess";
+};
 declare type DROPDOWN_OPTION_TYPE = {
     id: string;
     title: string;
     isDisabled?: boolean;
 };
 interface IProps {
-    type: typeof BUTTON_TYPE;
+    type: ButtonType;
     options: DROPDOWN_OPTION_TYPE[];
     elementId: string;
     isLoading: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propellerads/button-drop-down",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "ButtonDropDown component",
   "main": "dist/index.js",
   "module": "dist/button-drop-down.esm.js",
@@ -14,25 +14,24 @@
     "url": "https://github.com/propellerads/ui-components/issues"
   },
   "scripts": {
-    "prepublishOnly": "tsdx build",
     "start": "tsdx watch",
     "build": "tsdx build"
   },
   "homepage": "https://github.com/propellerads/ui-components#readme",
   "private": false,
   "dependencies": {
-    "@propellerads/button": "^5.2.1",
-    "@propellerads/stylevariables": "^1.3.1",
-    "add": "^2.0.6"
+    "@propellerads/button": "^9.0.0",
+    "@propellerads/stylevariables": "^2.0.2",
+    "add": "2.0.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.10.3",
-    "@babel/preset-env": "^7.10.3",
-    "@babel/preset-react": "^7.10.1",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.9.5"
+    "@babel/core": "7.15.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.14.7",
+    "@babel/preset-env": "7.15.0",
+    "@babel/preset-react": "7.14.5",
+    "tsdx": "0.14.1",
+    "tslib": "2.3.1",
+    "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": ">=18 <19",