@propellerads/button-drop-down 2.4.0 → 3.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/README.md +6 -3
- package/dist/button-drop-down.cjs.development.js +2 -1
- package/dist/button-drop-down.cjs.development.js.map +1 -1
- package/dist/button-drop-down.cjs.production.min.js +1 -1
- package/dist/button-drop-down.cjs.production.min.js.map +1 -1
- package/dist/button-drop-down.esm.js +2 -1
- package/dist/button-drop-down.esm.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/style.d.ts +1 -1
- package/package.json +4 -5
- package/CHANGELOG.md +0 -34
package/README.md
CHANGED
|
@@ -7,11 +7,14 @@
|
|
|
7
7
|
[Github](https://github.com/propellerads/ui-components/tree/master/Components/ButtonDropDown)
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
|
-
|
|
10
|
+
|
|
11
|
+
- `yarn add @propellerads/button-drop-down` or `npm install @propellerads/button-drop-down -S`
|
|
11
12
|
|
|
12
13
|
### How to use
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
- `import ButtonDropDown from '@propellerads/button-drop-down';`
|
|
16
|
+
- And render
|
|
17
|
+
|
|
15
18
|
```
|
|
16
19
|
<ButtonDropDown
|
|
17
20
|
options={[{id: 'button-drop-down-0', title: 'Option'}]}
|
|
@@ -35,7 +35,8 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
|
35
35
|
type: Button.BUTTON_TYPE.PLAIN,
|
|
36
36
|
onClick: function onClick() {
|
|
37
37
|
return _onClick(option);
|
|
38
|
-
}
|
|
38
|
+
},
|
|
39
|
+
isDisabled: option.isDisabled
|
|
39
40
|
}, React__default.createElement(ButtonDropDownListItemContainer, null, option.title));
|
|
40
41
|
};
|
|
41
42
|
|
|
@@ -1 +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 {
|
|
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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
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
|
|
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,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})}))))};
|
|
2
2
|
//# sourceMappingURL=button-drop-down.cjs.production.min.js.map
|
|
@@ -1 +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 {
|
|
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"}
|
|
@@ -27,7 +27,8 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
|
27
27
|
type: BUTTON_TYPE.PLAIN,
|
|
28
28
|
onClick: function onClick() {
|
|
29
29
|
return _onClick(option);
|
|
30
|
-
}
|
|
30
|
+
},
|
|
31
|
+
isDisabled: option.isDisabled
|
|
31
32
|
}, React.createElement(ButtonDropDownListItemContainer, null, option.title));
|
|
32
33
|
};
|
|
33
34
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {
|
|
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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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { BUTTON_TYPE } from '@propellerads/button';
|
|
2
3
|
export declare const BUTTON_DROPDOWN_TYPE: typeof BUTTON_TYPE;
|
|
3
4
|
declare type DROPDOWN_OPTION_TYPE = {
|
|
4
5
|
id: string;
|
|
5
6
|
title: string;
|
|
7
|
+
isDisabled?: boolean;
|
|
6
8
|
};
|
|
7
9
|
interface IProps {
|
|
8
10
|
type: typeof BUTTON_TYPE;
|
|
@@ -15,5 +17,5 @@ interface IProps {
|
|
|
15
17
|
onMouseEnter: () => void | undefined;
|
|
16
18
|
onMouseLeave: () => void | undefined;
|
|
17
19
|
}
|
|
18
|
-
declare const ButtonDropDown: (props: IProps) => JSX.Element;
|
|
20
|
+
declare const ButtonDropDown: (props: IProps) => React.JSX.Element;
|
|
19
21
|
export default ButtonDropDown;
|
package/dist/style.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
declare const ButtonDropDownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
declare const ButtonDropDownListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
declare const ButtonDropDownListItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export { ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer
|
|
4
|
+
export { ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/button-drop-down",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "ButtonDropDown component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/button-drop-down.esm.js",
|
|
@@ -32,11 +32,10 @@
|
|
|
32
32
|
"@babel/preset-react": "^7.10.1",
|
|
33
33
|
"tsdx": "^0.14.1",
|
|
34
34
|
"tslib": "^2.3.1",
|
|
35
|
-
"typescript": "^4.
|
|
35
|
+
"typescript": "^4.9.5"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"react": "
|
|
38
|
+
"react": ">=18 <19",
|
|
39
39
|
"styled-components": "5.1.1"
|
|
40
|
-
}
|
|
41
|
-
"gitHead": "82824622b4ac991d78567c473a46b5044cd72035"
|
|
40
|
+
}
|
|
42
41
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
### `2.4.0`
|
|
2
|
-
|
|
3
|
-
* migrated to TypeScript
|
|
4
|
-
|
|
5
|
-
### `2.3.0`
|
|
6
|
-
|
|
7
|
-
* updated peerDependencies
|
|
8
|
-
|
|
9
|
-
#### `2.2.0`
|
|
10
|
-
|
|
11
|
-
* added props mouse enter and leave
|
|
12
|
-
|
|
13
|
-
#### `2.1.0`
|
|
14
|
-
|
|
15
|
-
* edit package json main and module data
|
|
16
|
-
|
|
17
|
-
#### `2.0.0`
|
|
18
|
-
|
|
19
|
-
* update dependencies, remove rollup add tdx
|
|
20
|
-
|
|
21
|
-
#### `1.2.0`
|
|
22
|
-
* update dependencies
|
|
23
|
-
|
|
24
|
-
#### `1.1.0`
|
|
25
|
-
* update dependencies
|
|
26
|
-
|
|
27
|
-
#### `1.0.1`
|
|
28
|
-
|
|
29
|
-
Add hover state
|
|
30
|
-
Fix items height
|
|
31
|
-
|
|
32
|
-
#### `1.0.0`
|
|
33
|
-
|
|
34
|
-
Add '@propellerads/button-drop-down' component
|