@propellerads/button-drop-down 4.1.0 → 5.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.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +18 -17
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ type ButtonDropDownOptionProps = {
|
|
|
13
13
|
type ButtonDropDownProps = {
|
|
14
14
|
options: ButtonDropDownOptionProps['option'][];
|
|
15
15
|
title: ReactNode;
|
|
16
|
-
} & Pick<ButtonDropDownOptionProps, 'onClick'> & Pick<ButtonProps, 'isLoading' | 'isDisabled' | '
|
|
16
|
+
} & Pick<ButtonDropDownOptionProps, 'onClick'> & Pick<ButtonProps, 'isLoading' | 'isDisabled' | 'id' | 'variant' | 'tone' | 'onMouseEnter' | 'onMouseLeave'>;
|
|
17
17
|
declare const ButtonDropDown: FC<ButtonDropDownProps>;
|
|
18
18
|
|
|
19
19
|
export { ButtonDropDown as default };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect as e, useRef as t, useState as n } from "react";
|
|
2
|
-
import r, {
|
|
2
|
+
import r, { ButtonVariant as i } from "@propellerads/button";
|
|
3
3
|
import a from "styled-components";
|
|
4
4
|
import { borderRadius as o, fontNormal as s, gray80 as c, gray95 as l, spacing as u, white as d } from "@propellerads/stylevariables";
|
|
5
5
|
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
@@ -30,39 +30,40 @@ var m = a.div`
|
|
|
30
30
|
background-color: ${l};
|
|
31
31
|
}
|
|
32
32
|
`, _ = ({ option: e, onClick: t }) => /* @__PURE__ */ f(r, {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
id: e.id,
|
|
34
|
+
variant: i.Plain,
|
|
35
35
|
onClick: () => t(e),
|
|
36
36
|
isDisabled: e.isDisabled ?? !1,
|
|
37
37
|
children: /* @__PURE__ */ f(g, { children: e.title })
|
|
38
|
-
}), v = ({ options: i, title: a, onClick: o, isLoading: s, isDisabled: c,
|
|
39
|
-
let
|
|
38
|
+
}), v = ({ options: i, title: a, onClick: o, isLoading: s, isDisabled: c, id: l, variant: u, tone: d, onMouseEnter: g, onMouseLeave: v }) => {
|
|
39
|
+
let y = t(null), [b, x] = n(!1);
|
|
40
40
|
e(() => {
|
|
41
41
|
let e = (e) => {
|
|
42
|
-
let { current: t } =
|
|
43
|
-
t && n instanceof Node && !t.contains(n) &&
|
|
42
|
+
let { current: t } = y, { target: n } = e;
|
|
43
|
+
t && n instanceof Node && !t.contains(n) && x(!1);
|
|
44
44
|
};
|
|
45
45
|
return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e), () => {
|
|
46
46
|
document.removeEventListener("mousedown", e), document.removeEventListener("touchstart", e);
|
|
47
47
|
};
|
|
48
48
|
}, []);
|
|
49
|
-
let
|
|
50
|
-
|
|
49
|
+
let S = (e) => {
|
|
50
|
+
x(!1), o(e);
|
|
51
51
|
};
|
|
52
52
|
return /* @__PURE__ */ p(m, {
|
|
53
|
-
ref:
|
|
53
|
+
ref: y,
|
|
54
54
|
children: [/* @__PURE__ */ f(r, {
|
|
55
|
-
|
|
55
|
+
variant: u,
|
|
56
|
+
tone: d,
|
|
56
57
|
isLoading: s,
|
|
57
58
|
isDisabled: c,
|
|
58
|
-
|
|
59
|
-
onClick: () =>
|
|
60
|
-
onMouseEnter:
|
|
61
|
-
onMouseLeave:
|
|
59
|
+
id: l,
|
|
60
|
+
onClick: () => x(!b),
|
|
61
|
+
onMouseEnter: g,
|
|
62
|
+
onMouseLeave: v,
|
|
62
63
|
children: a
|
|
63
|
-
}),
|
|
64
|
+
}), b && i.length > 0 && /* @__PURE__ */ f(h, { children: i.map((e) => /* @__PURE__ */ f(_, {
|
|
64
65
|
option: e,
|
|
65
|
-
onClick:
|
|
66
|
+
onClick: S
|
|
66
67
|
}, e.id)) })]
|
|
67
68
|
});
|
|
68
69
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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, ButtonVariant} 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 id={option.id}\n variant={ButtonVariant.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' | 'id' | 'variant' | 'tone' | 'onMouseEnter' | 'onMouseLeave'>;\n\nconst ButtonDropDown: FC<ButtonDropDownProps> = ({\n options,\n title,\n onClick,\n isLoading,\n isDisabled,\n id,\n variant,\n tone,\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 variant={variant}\n tone={tone}\n isLoading={isLoading}\n isDisabled={isDisabled}\n id={id}\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,IAAI,EAAO;CACX,SAAS,EAAc;CACvB,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,OACA,YACA,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;GACW;GACH;GACK;GACC;GACR;GACJ,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": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"homepage": "https://github.com/propellerads/ui-components#readme",
|
|
25
25
|
"private": false,
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@propellerads/button": "^
|
|
27
|
+
"@propellerads/button": "^10.0.0",
|
|
28
28
|
"@propellerads/stylevariables": "^2.0.2"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|