@bundle-stats/ui 4.9.3-beta.0 → 4.9.3-beta.1
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/lib/ui/dropdown/dropdown.js +4 -3
- package/lib/ui/dropdown/dropdown.js.map +1 -1
- package/lib/ui/dropdown/dropdown.module.css +24 -0
- package/lib-esm/ui/dropdown/dropdown.js +4 -3
- package/lib-esm/ui/dropdown/dropdown.js.map +1 -1
- package/lib-esm/ui/dropdown/dropdown.module.css +24 -0
- package/package.json +8 -8
- package/src/ui/dropdown/dropdown.jsx +7 -6
- package/src/ui/dropdown/dropdown.module.css +24 -0
- package/types/ui/dropdown/dropdown.d.ts +3 -0
|
@@ -9,7 +9,6 @@ const prop_types_1 = __importDefault(require("prop-types"));
|
|
|
9
9
|
const classnames_1 = __importDefault(require("classnames"));
|
|
10
10
|
const menu_1 = require("ariakit/menu");
|
|
11
11
|
const flex_stack_1 = require("../../layout/flex-stack");
|
|
12
|
-
const button_1 = require("../button");
|
|
13
12
|
const icon_1 = require("../icon");
|
|
14
13
|
const dropdown_module_css_1 = __importDefault(require("./dropdown.module.css"));
|
|
15
14
|
const Item = ({ className = '', isActive = false, ...restProps }) => (react_1.default.createElement(menu_1.MenuItem, { className: (0, classnames_1.default)(dropdown_module_css_1.default.item, className, isActive && dropdown_module_css_1.default.itemActive), ...restProps }));
|
|
@@ -22,11 +21,11 @@ Item.defaultProps = {
|
|
|
22
21
|
isActive: false,
|
|
23
22
|
};
|
|
24
23
|
const Dropdown = (props) => {
|
|
25
|
-
const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
|
|
24
|
+
const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
|
|
26
25
|
const rootClassName = (0, classnames_1.default)(dropdown_module_css_1.default.root, className);
|
|
27
26
|
const menuState = (0, menu_1.useMenuState)();
|
|
28
27
|
return (react_1.default.createElement("div", { className: rootClassName },
|
|
29
|
-
react_1.default.createElement(menu_1.MenuButton, {
|
|
28
|
+
react_1.default.createElement(menu_1.MenuButton, { state: menuState, className: (0, classnames_1.default)(dropdown_module_css_1.default.button, buttonClassName), disabled: disabled, tabIndex: null },
|
|
30
29
|
react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", className: dropdown_module_css_1.default.label },
|
|
31
30
|
glyph && react_1.default.createElement(icon_1.Icon, { className: dropdown_module_css_1.default.labelIcon, glyph: glyph }),
|
|
32
31
|
label && react_1.default.createElement("span", { className: dropdown_module_css_1.default.labelText }, label))),
|
|
@@ -46,6 +45,7 @@ exports.Dropdown.defaultProps = {
|
|
|
46
45
|
label: null,
|
|
47
46
|
ariaLabel: '',
|
|
48
47
|
glyph: null,
|
|
48
|
+
disabled: false,
|
|
49
49
|
};
|
|
50
50
|
exports.Dropdown.propTypes = {
|
|
51
51
|
className: prop_types_1.default.string,
|
|
@@ -53,6 +53,7 @@ exports.Dropdown.propTypes = {
|
|
|
53
53
|
label: prop_types_1.default.node,
|
|
54
54
|
ariaLabel: prop_types_1.default.string,
|
|
55
55
|
glyph: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
|
|
56
|
+
disabled: prop_types_1.default.bool,
|
|
56
57
|
children: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.element, prop_types_1.default.func]).isRequired,
|
|
57
58
|
};
|
|
58
59
|
exports.Dropdown.Item = Item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAC5B,uCAAwE;AAExE,wDAAoD;AACpD,
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,33 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.button {
|
|
6
|
+
background: none;
|
|
7
|
+
border: none;
|
|
8
|
+
padding: 0;
|
|
9
|
+
|
|
10
|
+
border: 1px solid var(--color-outline);
|
|
11
|
+
border-radius: var(--radius-small);
|
|
12
|
+
padding: calc(var(--space-xxsmall) - 1px);
|
|
13
|
+
|
|
14
|
+
appearance: none;
|
|
15
|
+
background: none;
|
|
6
16
|
font-size: var(--size-small);
|
|
7
17
|
line-height: var(--space-small);
|
|
8
18
|
white-space: nowrap;
|
|
19
|
+
color: var(--color-text-light);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.button[aria-expanded=true],
|
|
23
|
+
.button:hover,
|
|
24
|
+
.button:focus,
|
|
25
|
+
.button:active {
|
|
26
|
+
outline: none;
|
|
27
|
+
box-shadow: var(--outline-hover);
|
|
28
|
+
color: var(--color-text);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.button[disabled] {
|
|
32
|
+
color: var(--color-text-ultra-light);
|
|
9
33
|
}
|
|
10
34
|
|
|
11
35
|
.dropdown {
|
|
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
|
|
5
5
|
import { FlexStack } from '../../layout/flex-stack';
|
|
6
|
-
import { Button } from '../button';
|
|
7
6
|
import { Icon } from '../icon';
|
|
8
7
|
import css from './dropdown.module.css';
|
|
9
8
|
const Item = ({ className = '', isActive = false, ...restProps }) => (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
|
|
@@ -16,11 +15,11 @@ Item.defaultProps = {
|
|
|
16
15
|
isActive: false,
|
|
17
16
|
};
|
|
18
17
|
export const Dropdown = (props) => {
|
|
19
|
-
const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
|
|
18
|
+
const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
|
|
20
19
|
const rootClassName = cx(css.root, className);
|
|
21
20
|
const menuState = useMenuState();
|
|
22
21
|
return (React.createElement("div", { className: rootClassName },
|
|
23
|
-
React.createElement(MenuButton, {
|
|
22
|
+
React.createElement(MenuButton, { state: menuState, className: cx(css.button, buttonClassName), disabled: disabled, tabIndex: null },
|
|
24
23
|
React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", className: css.label },
|
|
25
24
|
glyph && React.createElement(Icon, { className: css.labelIcon, glyph: glyph }),
|
|
26
25
|
label && React.createElement("span", { className: css.labelText }, label))),
|
|
@@ -39,6 +38,7 @@ Dropdown.defaultProps = {
|
|
|
39
38
|
label: null,
|
|
40
39
|
ariaLabel: '',
|
|
41
40
|
glyph: null,
|
|
41
|
+
disabled: false,
|
|
42
42
|
};
|
|
43
43
|
Dropdown.propTypes = {
|
|
44
44
|
className: PropTypes.string,
|
|
@@ -46,6 +46,7 @@ Dropdown.propTypes = {
|
|
|
46
46
|
label: PropTypes.node,
|
|
47
47
|
ariaLabel: PropTypes.string,
|
|
48
48
|
glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
49
|
+
disabled: PropTypes.bool,
|
|
49
50
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
|
|
50
51
|
};
|
|
51
52
|
Dropdown.Item = Item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,33 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.button {
|
|
6
|
+
background: none;
|
|
7
|
+
border: none;
|
|
8
|
+
padding: 0;
|
|
9
|
+
|
|
10
|
+
border: 1px solid var(--color-outline);
|
|
11
|
+
border-radius: var(--radius-small);
|
|
12
|
+
padding: calc(var(--space-xxsmall) - 1px);
|
|
13
|
+
|
|
14
|
+
appearance: none;
|
|
15
|
+
background: none;
|
|
6
16
|
font-size: var(--size-small);
|
|
7
17
|
line-height: var(--space-small);
|
|
8
18
|
white-space: nowrap;
|
|
19
|
+
color: var(--color-text-light);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.button[aria-expanded=true],
|
|
23
|
+
.button:hover,
|
|
24
|
+
.button:focus,
|
|
25
|
+
.button:active {
|
|
26
|
+
outline: none;
|
|
27
|
+
box-shadow: var(--outline-hover);
|
|
28
|
+
color: var(--color-text);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.button[disabled] {
|
|
32
|
+
color: var(--color-text-ultra-light);
|
|
9
33
|
}
|
|
10
34
|
|
|
11
35
|
.dropdown {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.9.3-beta.
|
|
3
|
+
"version": "4.9.3-beta.1",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"@babel/preset-env": "7.23.9",
|
|
40
40
|
"@babel/preset-react": "7.23.3",
|
|
41
41
|
"@babel/preset-typescript": "7.23.3",
|
|
42
|
-
"@storybook/addon-essentials": "7.6.
|
|
43
|
-
"@storybook/react": "7.6.
|
|
44
|
-
"@storybook/react-webpack5": "7.6.
|
|
42
|
+
"@storybook/addon-essentials": "7.6.14",
|
|
43
|
+
"@storybook/react": "7.6.14",
|
|
44
|
+
"@storybook/react-webpack5": "7.6.14",
|
|
45
45
|
"@types/react": "18.2.55",
|
|
46
46
|
"@types/react-router-dom": "5.3.3",
|
|
47
47
|
"babel-plugin-require-context-hook": "1.0.0",
|
|
@@ -59,9 +59,9 @@
|
|
|
59
59
|
"react-dom": "18.2.0",
|
|
60
60
|
"react-router-dom": "5.3.4",
|
|
61
61
|
"rimraf": "5.0.5",
|
|
62
|
-
"storybook": "7.6.
|
|
62
|
+
"storybook": "7.6.14",
|
|
63
63
|
"typescript": "5.1.6",
|
|
64
|
-
"typescript-plugin-css-modules": "5.0
|
|
64
|
+
"typescript-plugin-css-modules": "5.1.0"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"classnames": "^2.0.0",
|
|
@@ -72,10 +72,10 @@
|
|
|
72
72
|
"react-router-dom": "^5.0.0"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@bundle-stats/utils": "4.9.3-beta.
|
|
75
|
+
"@bundle-stats/utils": "4.9.3-beta.1",
|
|
76
76
|
"ariakit": "2.0.0-next.44",
|
|
77
77
|
"modern-css-reset": "1.4.0",
|
|
78
78
|
"use-query-params": "2.2.1"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "b9d91632ef75366b05184a82c52fead61497babe"
|
|
81
81
|
}
|
|
@@ -4,7 +4,6 @@ import cx from 'classnames';
|
|
|
4
4
|
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
|
|
5
5
|
|
|
6
6
|
import { FlexStack } from '../../layout/flex-stack';
|
|
7
|
-
import { Button } from '../button';
|
|
8
7
|
import { Icon } from '../icon';
|
|
9
8
|
import css from './dropdown.module.css';
|
|
10
9
|
|
|
@@ -23,19 +22,17 @@ Item.defaultProps = {
|
|
|
23
22
|
};
|
|
24
23
|
|
|
25
24
|
export const Dropdown = (props) => {
|
|
26
|
-
const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
|
|
25
|
+
const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
|
|
27
26
|
const rootClassName = cx(css.root, className);
|
|
28
27
|
const menuState = useMenuState();
|
|
29
28
|
|
|
30
29
|
return (
|
|
31
30
|
<div className={rootClassName}>
|
|
32
31
|
<MenuButton
|
|
33
|
-
as={Button}
|
|
34
|
-
outline
|
|
35
|
-
size={Button.SIZE.SMALL}
|
|
36
32
|
state={menuState}
|
|
37
|
-
tabIndex={null}
|
|
38
33
|
className={cx(css.button, buttonClassName)}
|
|
34
|
+
disabled={disabled}
|
|
35
|
+
tabIndex={null}
|
|
39
36
|
>
|
|
40
37
|
<FlexStack space="xxxsmall" alignItems="center" className={css.label}>
|
|
41
38
|
{glyph && <Icon className={css.labelIcon} glyph={glyph} />}
|
|
@@ -62,6 +59,7 @@ Dropdown.defaultProps = {
|
|
|
62
59
|
label: null,
|
|
63
60
|
ariaLabel: '',
|
|
64
61
|
glyph: null,
|
|
62
|
+
disabled: false,
|
|
65
63
|
};
|
|
66
64
|
|
|
67
65
|
Dropdown.propTypes = {
|
|
@@ -80,6 +78,9 @@ Dropdown.propTypes = {
|
|
|
80
78
|
/** Icon glyph */
|
|
81
79
|
glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
82
80
|
|
|
81
|
+
/** Dropdown button disabled attribute */
|
|
82
|
+
disabled: PropTypes.bool,
|
|
83
|
+
|
|
83
84
|
/** Content */
|
|
84
85
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
|
|
85
86
|
};
|
|
@@ -3,9 +3,33 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.button {
|
|
6
|
+
background: none;
|
|
7
|
+
border: none;
|
|
8
|
+
padding: 0;
|
|
9
|
+
|
|
10
|
+
border: 1px solid var(--color-outline);
|
|
11
|
+
border-radius: var(--radius-small);
|
|
12
|
+
padding: calc(var(--space-xxsmall) - 1px);
|
|
13
|
+
|
|
14
|
+
appearance: none;
|
|
15
|
+
background: none;
|
|
6
16
|
font-size: var(--size-small);
|
|
7
17
|
line-height: var(--space-small);
|
|
8
18
|
white-space: nowrap;
|
|
19
|
+
color: var(--color-text-light);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.button[aria-expanded=true],
|
|
23
|
+
.button:hover,
|
|
24
|
+
.button:focus,
|
|
25
|
+
.button:active {
|
|
26
|
+
outline: none;
|
|
27
|
+
box-shadow: var(--outline-hover);
|
|
28
|
+
color: var(--color-text);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.button[disabled] {
|
|
32
|
+
color: var(--color-text-ultra-light);
|
|
9
33
|
}
|
|
10
34
|
|
|
11
35
|
.dropdown {
|
|
@@ -6,6 +6,7 @@ export namespace Dropdown {
|
|
|
6
6
|
let label: null;
|
|
7
7
|
let ariaLabel: string;
|
|
8
8
|
let glyph: null;
|
|
9
|
+
let disabled: boolean;
|
|
9
10
|
}
|
|
10
11
|
export namespace propTypes {
|
|
11
12
|
let className_1: PropTypes.Requireable<string>;
|
|
@@ -18,6 +19,8 @@ export namespace Dropdown {
|
|
|
18
19
|
export { ariaLabel_1 as ariaLabel };
|
|
19
20
|
let glyph_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
20
21
|
export { glyph_1 as glyph };
|
|
22
|
+
let disabled_1: PropTypes.Requireable<boolean>;
|
|
23
|
+
export { disabled_1 as disabled };
|
|
21
24
|
export let children: PropTypes.Validator<NonNullable<NonNullable<string | PropTypes.ReactElementLike | ((...args: any[]) => any) | null | undefined>>>;
|
|
22
25
|
}
|
|
23
26
|
export { Item };
|