@propellerads/button-drop-down 4.0.1 → 4.1.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.
- package/README.md +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.js +56 -68
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { ReactNode, FC } from 'react';
|
|
2
2
|
import { ButtonProps } from '@propellerads/button';
|
|
3
3
|
|
|
4
4
|
type DropDownOptionType = {
|
|
5
5
|
id: string;
|
|
6
|
-
title:
|
|
6
|
+
title: ReactNode;
|
|
7
7
|
isDisabled?: boolean;
|
|
8
8
|
};
|
|
9
9
|
type ButtonDropDownOptionProps = {
|
|
@@ -12,7 +12,7 @@ type ButtonDropDownOptionProps = {
|
|
|
12
12
|
};
|
|
13
13
|
type ButtonDropDownProps = {
|
|
14
14
|
options: ButtonDropDownOptionProps['option'][];
|
|
15
|
-
title:
|
|
15
|
+
title: ReactNode;
|
|
16
16
|
} & Pick<ButtonDropDownOptionProps, 'onClick'> & Pick<ButtonProps, 'isLoading' | 'isDisabled' | 'elementId' | 'type' | 'onMouseEnter' | 'onMouseLeave'>;
|
|
17
17
|
declare const ButtonDropDown: FC<ButtonDropDownProps>;
|
|
18
18
|
|
package/dist/index.js
CHANGED
|
@@ -1,84 +1,72 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import d from "
|
|
5
|
-
import {
|
|
6
|
-
|
|
1
|
+
import { useEffect as e, useRef as t, useState as n } from "react";
|
|
2
|
+
import r, { ButtonType as i } from "@propellerads/button";
|
|
3
|
+
import a from "styled-components";
|
|
4
|
+
import { borderRadius as o, fontNormal as s, gray80 as c, gray95 as l, spacing as u, white as d } from "@propellerads/stylevariables";
|
|
5
|
+
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
6
|
+
//#region src/style.tsx
|
|
7
|
+
var m = a.div`
|
|
7
8
|
position: relative;
|
|
8
9
|
width: fit-content;
|
|
9
|
-
`,
|
|
10
|
+
`, h = a.div`
|
|
10
11
|
position: absolute;
|
|
11
12
|
display: flex;
|
|
12
13
|
flex-direction: column;
|
|
13
14
|
min-width: 100%;
|
|
14
15
|
width: fit-content;
|
|
15
|
-
border: 1px solid ${
|
|
16
|
-
border-radius: ${
|
|
17
|
-
background-color: ${
|
|
18
|
-
padding: ${
|
|
16
|
+
border: 1px solid ${c};
|
|
17
|
+
border-radius: ${o}px;
|
|
18
|
+
background-color: ${d};
|
|
19
|
+
padding: ${u * 2}px 0;
|
|
19
20
|
margin-top: 2px;
|
|
20
|
-
font-size: ${
|
|
21
|
+
font-size: ${s}px;
|
|
21
22
|
z-index: 1;
|
|
22
|
-
`,
|
|
23
|
+
`, g = a.div`
|
|
23
24
|
width: 100%;
|
|
24
25
|
text-align: left;
|
|
25
26
|
min-height: 32px;
|
|
26
|
-
padding: ${
|
|
27
|
+
padding: ${u * 2}px ${u * 3}px;
|
|
27
28
|
|
|
28
29
|
&:hover {
|
|
29
|
-
background-color: ${
|
|
30
|
+
background-color: ${l};
|
|
30
31
|
}
|
|
31
|
-
`,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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
|
|
32
|
+
`, _ = ({ option: e, onClick: t }) => /* @__PURE__ */ f(r, {
|
|
33
|
+
elementId: e.id,
|
|
34
|
+
type: i.Plain,
|
|
35
|
+
onClick: () => t(e),
|
|
36
|
+
isDisabled: e.isDisabled ?? !1,
|
|
37
|
+
children: /* @__PURE__ */ f(g, { children: e.title })
|
|
38
|
+
}), v = ({ options: i, title: a, onClick: o, isLoading: s, isDisabled: c, elementId: l, type: u, onMouseEnter: d, onMouseLeave: g }) => {
|
|
39
|
+
let v = t(null), [y, b] = n(!1);
|
|
40
|
+
e(() => {
|
|
41
|
+
let e = (e) => {
|
|
42
|
+
let { current: t } = v, { target: n } = e;
|
|
43
|
+
t && n instanceof Node && !t.contains(n) && b(!1);
|
|
44
|
+
};
|
|
45
|
+
return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e), () => {
|
|
46
|
+
document.removeEventListener("mousedown", e), document.removeEventListener("touchstart", e);
|
|
47
|
+
};
|
|
48
|
+
}, []);
|
|
49
|
+
let x = (e) => {
|
|
50
|
+
b(!1), o(e);
|
|
51
|
+
};
|
|
52
|
+
return /* @__PURE__ */ p(m, {
|
|
53
|
+
ref: v,
|
|
54
|
+
children: [/* @__PURE__ */ f(r, {
|
|
55
|
+
type: u,
|
|
56
|
+
isLoading: s,
|
|
57
|
+
isDisabled: c,
|
|
58
|
+
elementId: l,
|
|
59
|
+
onClick: () => b(!y),
|
|
60
|
+
onMouseEnter: d,
|
|
61
|
+
onMouseLeave: g,
|
|
62
|
+
children: a
|
|
63
|
+
}), y && i.length > 0 && /* @__PURE__ */ f(h, { children: i.map((e) => /* @__PURE__ */ f(_, {
|
|
64
|
+
option: e,
|
|
65
|
+
onClick: x
|
|
66
|
+
}, e.id)) })]
|
|
67
|
+
});
|
|
83
68
|
};
|
|
84
|
-
//#
|
|
69
|
+
//#endregion
|
|
70
|
+
export { v as default };
|
|
71
|
+
|
|
72
|
+
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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:
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"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, ReactNode} from 'react';\nimport Button, {ButtonProps, ButtonType} from '@propellerads/button';\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\ntype DropDownOptionType = {\n id: string;\n title: ReactNode;\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: ReactNode;\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"],"mappings":";;;;;;AAGA,IAAM,IAA0B,EAAO,GAAG;;;GAKpC,IAA8B,EAAO,GAAG;;;;;;sBAMxB,EAAO;mBACV,EAAa;sBACV,EAAM;aACf,IAAU,EAAE;;eAEV,EAAW;;GAIpB,IAAkC,EAAO,GAAG;;;;aAIrC,IAAU,EAAE,KAAK,IAAU,EAAE;;;wBAGlB,EAAO;;GCfzB,KAAqD,EAAC,WAAQ,iBAEhE,kBAAC,GAAD;CACE,WAAW,EAAO;CAClB,MAAM,EAAW;CACjB,eAAe,EAAQ,EAAO;CAC9B,YAAY,EAAO,cAAc;WAEjC,kBAAC,GAAD,EAAA,UAAkC,EAAO,OAAwC,CAAA;CAC1E,CAAA,EAUP,KAA2C,EAC/C,YACA,UACA,YACA,cACA,eACA,cACA,SACA,iBACA,sBACI;CACJ,IAAM,IAAe,EAAuB,KAAK,EAE3C,CAAC,GAAY,KAAe,EAAS,GAAM;CAEjD,QAAgB;EACd,IAAM,KAAsB,MAAmC;GAC7D,IAAM,EAAC,eAAW,GACZ,EAAC,cAAU;GAEjB,AAAI,KAAW,aAAkB,QAAQ,CAAC,EAAQ,SAAS,EAAO,IAChE,EAAY,GAAM;;EAOtB,OAHA,SAAS,iBAAiB,aAAa,EAAmB,EAC1D,SAAS,iBAAiB,cAAc,EAAmB,QAE9C;GAEX,AADA,SAAS,oBAAoB,aAAa,EAAmB,EAC7D,SAAS,oBAAoB,cAAc,EAAmB;;IAE/D,EAAE,CAAC;CAEN,IAAM,KAAe,MAA8B;EAEjD,AADA,EAAY,GAAM,EAClB,EAAQ,EAAM;;CAGhB,OACE,kBAAC,GAAD;EAAyB,KAAK;YAA9B,CACE,kBAAC,GAAD;GACQ;GACK;GACC;GACD;GACX,eAAe,EAAY,CAAC,EAAW;GACzB;GACA;aAEb;GACM,CAAA,EAER,KAAc,EAAQ,SAAS,KAC9B,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAA4B;GAAwB,SAAS;GAAe,EAAnC,EAAO,GAA4B,CAC5E,EAC0B,CAAA,CAER"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/button-drop-down",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "https://github.com/propellerads/ui-components/issues"
|
|
20
20
|
},
|
|
21
21
|
"scripts": {
|
|
22
|
-
"build": "tsc && vite build && rollup -c rollup.dts.config.mjs"
|
|
22
|
+
"build": "tsc && vite build && bunx rollup -c rollup.dts.config.mjs"
|
|
23
23
|
},
|
|
24
24
|
"homepage": "https://github.com/propellerads/ui-components#readme",
|
|
25
25
|
"private": false,
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@propellerads/button": "^9.0.
|
|
27
|
+
"@propellerads/button": "^9.0.3",
|
|
28
28
|
"@propellerads/stylevariables": "^2.0.2"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/react": "^19.2.14",
|
|
36
|
-
"@vitejs/plugin-react": "^
|
|
37
|
-
"rollup": "^4.
|
|
38
|
-
"rollup-plugin-dts": "^6.
|
|
39
|
-
"typescript": "^
|
|
40
|
-
"vite": "^
|
|
36
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
37
|
+
"rollup": "^4.60.3",
|
|
38
|
+
"rollup-plugin-dts": "^6.4.1",
|
|
39
|
+
"typescript": "^6.0.3",
|
|
40
|
+
"vite": "^8.0.10"
|
|
41
41
|
}
|
|
42
42
|
}
|