@propellerads/button-drop-down 3.0.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.d.ts +20 -29
  2. package/dist/index.js +83 -7
  3. package/dist/index.js.map +1 -0
  4. package/package.json +22 -19
  5. package/dist/button-drop-down.cjs.development.js +0 -94
  6. package/dist/button-drop-down.cjs.development.js.map +0 -1
  7. package/dist/button-drop-down.cjs.production.min.js +0 -2
  8. package/dist/button-drop-down.cjs.production.min.js.map +0 -1
  9. package/dist/button-drop-down.esm.js +0 -86
  10. package/dist/button-drop-down.esm.js.map +0 -1
  11. package/dist/style.d.ts +0 -4
package/dist/index.d.ts CHANGED
@@ -1,29 +1,20 @@
1
- import React from 'react';
2
- import { ButtonType } from '@propellerads/button';
3
- export declare const BUTTON_DROPDOWN_TYPE: {
4
- readonly Primary: "isPrimary";
5
- readonly Secondary: "isSecondary";
6
- readonly Advanced: "isAdvanced";
7
- readonly Link: "isLink";
8
- readonly Plain: "isPlain";
9
- readonly Danger: "isDanger";
10
- readonly Success: "isSuccess";
11
- };
12
- declare type DROPDOWN_OPTION_TYPE = {
13
- id: string;
14
- title: string;
15
- isDisabled?: boolean;
16
- };
17
- interface IProps {
18
- type: ButtonType;
19
- options: DROPDOWN_OPTION_TYPE[];
20
- elementId: string;
21
- isLoading: boolean;
22
- isDisabled: boolean;
23
- title: string;
24
- onClick: (value: DROPDOWN_OPTION_TYPE) => void;
25
- onMouseEnter: () => void | undefined;
26
- onMouseLeave: () => void | undefined;
27
- }
28
- declare const ButtonDropDown: (props: IProps) => React.JSX.Element;
29
- export default ButtonDropDown;
1
+ import { FC } from 'react';
2
+ import { ButtonProps } from '@propellerads/button';
3
+
4
+ type DropDownOptionType = {
5
+ id: string;
6
+ title: string;
7
+ isDisabled?: boolean;
8
+ };
9
+ type ButtonDropDownOptionProps = {
10
+ option: DropDownOptionType;
11
+ onClick: (value: DropDownOptionType) => void;
12
+ };
13
+ type ButtonDropDownProps = {
14
+ options: ButtonDropDownOptionProps['option'][];
15
+ title: string;
16
+ } & Pick<ButtonDropDownOptionProps, 'onClick'> & Pick<ButtonProps, 'isLoading' | 'isDisabled' | 'elementId' | 'type' | 'onMouseEnter' | 'onMouseLeave'>;
17
+ declare const ButtonDropDown: FC<ButtonDropDownProps>;
18
+
19
+ export { ButtonDropDown as default };
20
+ export type { ButtonDropDownProps, DropDownOptionType };
package/dist/index.js CHANGED
@@ -1,8 +1,84 @@
1
+ import { jsxs as b, jsx as n } from "react/jsx-runtime";
2
+ import { useRef as C, useState as $, useEffect as k } from "react";
3
+ import u, { ButtonType as B } from "@propellerads/button";
4
+ import d from "styled-components";
5
+ import { gray80 as E, borderRadius as L, white as y, fontNormal as I, spacing as r, gray95 as R } from "@propellerads/stylevariables";
6
+ const j = d.div`
7
+ position: relative;
8
+ width: fit-content;
9
+ `, z = d.div`
10
+ position: absolute;
11
+ display: flex;
12
+ flex-direction: column;
13
+ min-width: 100%;
14
+ width: fit-content;
15
+ border: 1px solid ${E};
16
+ border-radius: ${L}px;
17
+ background-color: ${y};
18
+ padding: ${r * 2}px 0;
19
+ margin-top: 2px;
20
+ font-size: ${I}px;
21
+ z-index: 1;
22
+ `, N = d.div`
23
+ width: 100%;
24
+ text-align: left;
25
+ min-height: 32px;
26
+ padding: ${r * 2}px ${r * 3}px;
1
27
 
2
- 'use strict'
3
-
4
- if (process.env.NODE_ENV === 'production') {
5
- module.exports = require('./button-drop-down.cjs.production.min.js')
6
- } else {
7
- module.exports = require('./button-drop-down.cjs.development.js')
8
- }
28
+ &:hover {
29
+ background-color: ${R};
30
+ }
31
+ `, O = ({ option: e, onClick: o }) => /* @__PURE__ */ n(
32
+ u,
33
+ {
34
+ elementId: e.id,
35
+ type: B.Plain,
36
+ onClick: () => o(e),
37
+ isDisabled: e.isDisabled ?? !1,
38
+ children: /* @__PURE__ */ n(N, { children: e.title })
39
+ }
40
+ ), F = ({
41
+ options: e,
42
+ title: o,
43
+ onClick: m,
44
+ isLoading: p,
45
+ isDisabled: f,
46
+ elementId: h,
47
+ type: x,
48
+ onMouseEnter: g,
49
+ onMouseLeave: w
50
+ }) => {
51
+ const s = C(null), [c, i] = $(!1);
52
+ k(() => {
53
+ const t = (v) => {
54
+ const { current: a } = s, { target: l } = v;
55
+ a && l instanceof Node && !a.contains(l) && i(!1);
56
+ };
57
+ return document.addEventListener("mousedown", t), document.addEventListener("touchstart", t), () => {
58
+ document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", t);
59
+ };
60
+ }, []);
61
+ const D = (t) => {
62
+ i(!1), m(t);
63
+ };
64
+ return /* @__PURE__ */ b(j, { ref: s, children: [
65
+ /* @__PURE__ */ n(
66
+ u,
67
+ {
68
+ type: x,
69
+ isLoading: p,
70
+ isDisabled: f,
71
+ elementId: h,
72
+ onClick: () => i(!c),
73
+ onMouseEnter: g,
74
+ onMouseLeave: w,
75
+ children: o
76
+ }
77
+ ),
78
+ c && e.length > 0 && /* @__PURE__ */ n(z, { children: e.map((t) => /* @__PURE__ */ n(O, { option: t, onClick: D }, t.id)) })
79
+ ] });
80
+ };
81
+ export {
82
+ F as default
83
+ };
84
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.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 {useState, useEffect, useRef, FC} from 'react';\nimport Button, {ButtonProps, ButtonType} from '@propellerads/button';\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\ntype DropDownOptionType = {\n id: string;\n title: string;\n isDisabled?: boolean;\n};\n\ntype ButtonDropDownOptionProps = {\n option: DropDownOptionType;\n onClick: (value: DropDownOptionType) => void;\n};\n\nconst ButtonDropDownList: FC<ButtonDropDownOptionProps> = ({option, onClick}) => {\n return (\n <Button\n elementId={option.id}\n type={ButtonType.Plain}\n onClick={() => onClick(option)}\n isDisabled={option.isDisabled ?? false}\n >\n <ButtonDropDownListItemContainer>{option.title}</ButtonDropDownListItemContainer>\n </Button>\n );\n};\n\ntype ButtonDropDownProps = {\n options: ButtonDropDownOptionProps['option'][];\n title: string;\n} & Pick<ButtonDropDownOptionProps, 'onClick'> &\n Pick<ButtonProps, 'isLoading' | 'isDisabled' | 'elementId' | 'type' | 'onMouseEnter' | 'onMouseLeave'>;\n\nconst ButtonDropDown: FC<ButtonDropDownProps> = ({\n options,\n title,\n onClick,\n isLoading,\n isDisabled,\n elementId,\n type,\n onMouseEnter,\n onMouseLeave,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [isExpanded, setExpanded] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n const {current} = containerRef;\n const {target} = event;\n\n if (current && target instanceof Node && !current.contains(target)) {\n setExpanded(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('touchstart', handleClickOutside);\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('touchstart', handleClickOutside);\n };\n }, []);\n\n const onItemClick = (value: DropDownOptionType) => {\n setExpanded(false);\n onClick(value);\n };\n\n return (\n <ButtonDropDownContainer ref={containerRef}>\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\nexport type {ButtonDropDownProps, DropDownOptionType};\n"],"names":["ButtonDropDownContainer","styled","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","ButtonDropDownList","option","onClick","jsx","Button","ButtonType","ButtonDropDown","options","title","isLoading","isDisabled","elementId","type","onMouseEnter","onMouseLeave","containerRef","useRef","isExpanded","setExpanded","useState","useEffect","handleClickOutside","event","current","target","onItemClick","value","jsxs"],"mappings":";;;;;AAGA,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA,GAKjCC,IAA8BD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMrBE,CAAM;AAAA,mBACTC,CAAY;AAAA,sBACTC,CAAK;AAAA,aACdC,IAAU,CAAC;AAAA;AAAA,eAETC,CAAU;AAAA;AAAA,GAInBC,IAAkCP,EAAO;AAAA;AAAA;AAAA;AAAA,aAIlCK,IAAU,CAAC,MAAMA,IAAU,CAAC;AAAA;AAAA;AAAA,wBAGjBG,CAAM;AAAA;AAAA,GCfxBC,IAAoD,CAAC,EAAC,QAAAC,GAAQ,SAAAC,QAEhE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAWH,EAAO;AAAA,IAClB,MAAMI,EAAW;AAAA,IACjB,SAAS,MAAMH,EAAQD,CAAM;AAAA,IAC7B,YAAYA,EAAO,cAAc;AAAA,IAEjC,UAAA,gBAAAE,EAACL,GAAA,EAAiC,UAAAG,EAAO,MAAA,CAAM;AAAA,EAAA;AAAA,GAW/CK,IAA0C,CAAC;AAAA,EAC/C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAN;AAAA,EACA,WAAAO;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAMC,IAAeC,EAAuB,IAAI,GAE1C,CAACC,GAAYC,CAAW,IAAIC,EAAS,EAAK;AAEhD,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAqB,CAACC,MAAmC;AAC7D,YAAM,EAAC,SAAAC,MAAWR,GACZ,EAAC,QAAAS,MAAUF;AAEjB,MAAIC,KAAWC,aAAkB,QAAQ,CAACD,EAAQ,SAASC,CAAM,KAC/DN,EAAY,EAAK;AAAA,IAErB;AAEA,oBAAS,iBAAiB,aAAaG,CAAkB,GACzD,SAAS,iBAAiB,cAAcA,CAAkB,GAEnD,MAAM;AACX,eAAS,oBAAoB,aAAaA,CAAkB,GAC5D,SAAS,oBAAoB,cAAcA,CAAkB;AAAA,IAC/D;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAMI,IAAc,CAACC,MAA8B;AACjD,IAAAR,EAAY,EAAK,GACjBhB,EAAQwB,CAAK;AAAA,EACf;AAEA,SACE,gBAAAC,EAACrC,GAAA,EAAwB,KAAKyB,GAC5B,UAAA;AAAA,IAAA,gBAAAZ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAQ;AAAA,QACA,WAAAH;AAAA,QACA,YAAAC;AAAA,QACA,WAAAC;AAAA,QACA,SAAS,MAAMO,EAAY,CAACD,CAAU;AAAA,QACtC,cAAAJ;AAAA,QACA,cAAAC;AAAA,QAEC,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAGFS,KAAcV,EAAQ,SAAS,KAC9B,gBAAAJ,EAACX,GAAA,EACE,YAAQ,IAAI,CAACS,MACZ,gBAAAE,EAACH,KAAmB,QAAAC,GAAgC,SAASwB,KAApBxB,EAAO,EAA0B,CAC3E,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}
package/package.json CHANGED
@@ -1,9 +1,14 @@
1
1
  {
2
2
  "name": "@propellerads/button-drop-down",
3
- "version": "3.0.2",
4
- "description": "ButtonDropDown component",
5
- "main": "dist/index.js",
6
- "module": "dist/button-drop-down.esm.js",
3
+ "version": "4.0.0",
4
+ "type": "module",
5
+ "types": "dist/index.d.ts",
6
+ "exports": {
7
+ ".": {
8
+ "types": "./dist/index.d.ts",
9
+ "import": "./dist/index.js"
10
+ }
11
+ },
7
12
  "files": [
8
13
  "dist"
9
14
  ],
@@ -14,27 +19,25 @@
14
19
  "url": "https://github.com/propellerads/ui-components/issues"
15
20
  },
16
21
  "scripts": {
17
- "start": "tsdx watch",
18
- "build": "tsdx build"
22
+ "build": "tsc && vite build && rollup -c rollup.dts.config.mjs"
19
23
  },
20
24
  "homepage": "https://github.com/propellerads/ui-components#readme",
21
25
  "private": false,
22
26
  "dependencies": {
23
27
  "@propellerads/button": "^9.0.0",
24
- "@propellerads/stylevariables": "^2.0.2",
25
- "add": "2.0.6"
26
- },
27
- "devDependencies": {
28
- "@babel/core": "7.15.0",
29
- "@babel/plugin-proposal-object-rest-spread": "7.14.7",
30
- "@babel/preset-env": "7.15.0",
31
- "@babel/preset-react": "7.14.5",
32
- "tsdx": "0.14.1",
33
- "tslib": "2.3.1",
34
- "typescript": "4.9.5"
28
+ "@propellerads/stylevariables": "^2.0.2"
35
29
  },
36
30
  "peerDependencies": {
37
- "react": ">=18 <19",
38
- "styled-components": "5.1.1"
31
+ "react": "^18.0.0 || ^19.0.0",
32
+ "styled-components": "^5.1.1 || ^6.0.0"
33
+ },
34
+ "devDependencies": {
35
+ "@types/react": "^19.2.14",
36
+ "@types/styled-components": "^5.1.36",
37
+ "@vitejs/plugin-react": "^5.1.4",
38
+ "rollup": "^4.58.0",
39
+ "rollup-plugin-dts": "^6.3.0",
40
+ "typescript": "^5.9.3",
41
+ "vite": "^7.3.1"
39
42
  }
40
43
  }
package/dist/button-drop-down.cjs.development.js DELETED
@@ -1,94 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
- var React = require('react');
8
- var React__default = _interopDefault(React);
9
- var Button = require('@propellerads/button');
10
- var Button__default = _interopDefault(Button);
11
- var styled = _interopDefault(require('styled-components'));
12
- var stylevariables = require('@propellerads/stylevariables');
13
-
14
- function _taggedTemplateLiteralLoose(e, t) {
15
- return t || (t = e.slice(0)), e.raw = t, e;
16
- }
17
-
18
- var _templateObject, _templateObject2, _templateObject3;
19
- var ButtonDropDownContainer = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
20
- 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);
21
- 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);
22
-
23
- var BUTTON_DROPDOWN_TYPE = Button.ButtonType;
24
- var ButtonDropDownList = function ButtonDropDownList(props) {
25
- var option = props.option,
26
- _onClick = props.onClick;
27
- return React__default.createElement(Button__default, {
28
- elementId: option.id,
29
- type: Button.ButtonType.Plain,
30
- onClick: function onClick() {
31
- return _onClick(option);
32
- },
33
- isDisabled: option.isDisabled
34
- }, React__default.createElement(ButtonDropDownListItemContainer, null, option.title));
35
- };
36
- var ButtonDropDown = function ButtonDropDown(props) {
37
- var _props$type = props.type,
38
- type = _props$type === void 0 ? Button.ButtonType.Advanced : _props$type,
39
- isLoading = props.isLoading,
40
- isDisabled = props.isDisabled,
41
- elementId = props.elementId,
42
- options = props.options,
43
- title = props.title,
44
- onClick = props.onClick,
45
- _props$onMouseEnter = props.onMouseEnter,
46
- onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
47
- _props$onMouseLeave = props.onMouseLeave,
48
- onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
49
- var containerRef = React.useRef(null);
50
- var _useState = React.useState(false),
51
- isExpanded = _useState[0],
52
- setExpanded = _useState[1];
53
- React.useEffect(function () {
54
- var handleClickOutside = function handleClickOutside(event) {
55
- var current = containerRef.current;
56
- if (current && !current.contains(event.target)) {
57
- setExpanded(false);
58
- }
59
- };
60
- document.addEventListener('mousedown', handleClickOutside);
61
- document.addEventListener('touchstart', handleClickOutside);
62
- return function () {
63
- document.removeEventListener('mousedown', handleClickOutside);
64
- document.removeEventListener('touchstart', handleClickOutside);
65
- };
66
- }, [containerRef]);
67
- var onItemClick = function onItemClick(value) {
68
- setExpanded(false);
69
- onClick(value);
70
- };
71
- return React__default.createElement(ButtonDropDownContainer, {
72
- ref: containerRef
73
- }, React__default.createElement(Button__default, {
74
- type: type,
75
- isLoading: isLoading,
76
- isDisabled: isDisabled,
77
- elementId: elementId,
78
- onClick: function onClick() {
79
- return setExpanded(!isExpanded);
80
- },
81
- onMouseEnter: onMouseEnter,
82
- onMouseLeave: onMouseLeave
83
- }, title), isExpanded && options.length > 0 && React__default.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
84
- return React__default.createElement(ButtonDropDownList, {
85
- option: option,
86
- key: option.id,
87
- onClick: onItemClick
88
- });
89
- })));
90
- };
91
-
92
- exports.BUTTON_DROPDOWN_TYPE = BUTTON_DROPDOWN_TYPE;
93
- exports.default = ButtonDropDown;
94
- //# sourceMappingURL=button-drop-down.cjs.development.js.map
package/dist/button-drop-down.cjs.development.js.map DELETED
@@ -1 +0,0 @@
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, {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 DELETED
@@ -1,2 +0,0 @@
1
- "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})}))))};
2
- //# sourceMappingURL=button-drop-down.cjs.production.min.js.map
package/dist/button-drop-down.cjs.production.min.js.map DELETED
@@ -1 +0,0 @@
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, {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 DELETED
@@ -1,86 +0,0 @@
1
- import React, { useRef, useState, useEffect } from 'react';
2
- import Button, { ButtonType } from '@propellerads/button';
3
- import styled from 'styled-components';
4
- import { gray80, borderRadius, white, spacing, fontNormal, gray95 } from '@propellerads/stylevariables';
5
-
6
- function _taggedTemplateLiteralLoose(e, t) {
7
- return t || (t = e.slice(0)), e.raw = t, e;
8
- }
9
-
10
- var _templateObject, _templateObject2, _templateObject3;
11
- var ButtonDropDownContainer = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
12
- 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);
13
- 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);
14
-
15
- var BUTTON_DROPDOWN_TYPE = ButtonType;
16
- var ButtonDropDownList = function ButtonDropDownList(props) {
17
- var option = props.option,
18
- _onClick = props.onClick;
19
- return React.createElement(Button, {
20
- elementId: option.id,
21
- type: ButtonType.Plain,
22
- onClick: function onClick() {
23
- return _onClick(option);
24
- },
25
- isDisabled: option.isDisabled
26
- }, React.createElement(ButtonDropDownListItemContainer, null, option.title));
27
- };
28
- var ButtonDropDown = function ButtonDropDown(props) {
29
- var _props$type = props.type,
30
- type = _props$type === void 0 ? ButtonType.Advanced : _props$type,
31
- isLoading = props.isLoading,
32
- isDisabled = props.isDisabled,
33
- elementId = props.elementId,
34
- options = props.options,
35
- title = props.title,
36
- onClick = props.onClick,
37
- _props$onMouseEnter = props.onMouseEnter,
38
- onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
39
- _props$onMouseLeave = props.onMouseLeave,
40
- onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
41
- var containerRef = useRef(null);
42
- var _useState = useState(false),
43
- isExpanded = _useState[0],
44
- setExpanded = _useState[1];
45
- useEffect(function () {
46
- var handleClickOutside = function handleClickOutside(event) {
47
- var current = containerRef.current;
48
- if (current && !current.contains(event.target)) {
49
- setExpanded(false);
50
- }
51
- };
52
- document.addEventListener('mousedown', handleClickOutside);
53
- document.addEventListener('touchstart', handleClickOutside);
54
- return function () {
55
- document.removeEventListener('mousedown', handleClickOutside);
56
- document.removeEventListener('touchstart', handleClickOutside);
57
- };
58
- }, [containerRef]);
59
- var onItemClick = function onItemClick(value) {
60
- setExpanded(false);
61
- onClick(value);
62
- };
63
- return React.createElement(ButtonDropDownContainer, {
64
- ref: containerRef
65
- }, React.createElement(Button, {
66
- type: type,
67
- isLoading: isLoading,
68
- isDisabled: isDisabled,
69
- elementId: elementId,
70
- onClick: function onClick() {
71
- return setExpanded(!isExpanded);
72
- },
73
- onMouseEnter: onMouseEnter,
74
- onMouseLeave: onMouseLeave
75
- }, title), isExpanded && options.length > 0 && React.createElement(ButtonDropDownListContainer, null, options.map(function (option) {
76
- return React.createElement(ButtonDropDownList, {
77
- option: option,
78
- key: option.id,
79
- onClick: onItemClick
80
- });
81
- })));
82
- };
83
-
84
- export default ButtonDropDown;
85
- export { BUTTON_DROPDOWN_TYPE };
86
- //# sourceMappingURL=button-drop-down.esm.js.map
package/dist/button-drop-down.esm.js.map DELETED
@@ -1 +0,0 @@
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, {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/style.d.ts DELETED
@@ -1,4 +0,0 @@
1
- declare const ButtonDropDownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- declare const ButtonDropDownListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- declare const ButtonDropDownListItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export { ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer };