@festo-ui/react 11.1.0 → 11.2.0-dev.1059
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/components/accordion/accordion-item/AccordionItem.css +3 -3
- package/dist/components/card/CardHeader.js +5 -2
- package/dist/components/pagination/Pagination.css +2 -2
- package/dist/components/pagination/Pagination.d.ts +1 -1
- package/dist/components/pagination/Pagination.js +54 -57
- package/dist/components/popovers/popover/Popover.d.ts +1 -0
- package/dist/components/popovers/popover/Popover.js +6 -3
- package/dist/components/progress/Progress.js +1 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.fr-accordion-item {
|
|
2
2
|
border-top: 1px solid var(--fwe-gray-100);
|
|
3
3
|
border-bottom: 1px solid var(--fwe-gray-100);
|
|
4
|
-
padding: 0
|
|
4
|
+
padding: 0 24px;
|
|
5
5
|
position: relative;
|
|
6
6
|
}
|
|
7
7
|
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
.fr-accordion-item:after {
|
|
30
30
|
pointer-events: none;
|
|
31
31
|
content: "";
|
|
32
|
-
background-image: url(data:image/svg+xml;base64,
|
|
32
|
+
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0eiIgZGF0YS1uYW1lPSJjb250ZW50Ii8+PC9zdmc+DQoNCg0KDQoNCg0K);
|
|
33
33
|
width: 24px;
|
|
34
34
|
height: 24px;
|
|
35
35
|
transition: transform .2s;
|
|
36
36
|
position: absolute;
|
|
37
37
|
top: 23px;
|
|
38
|
-
right:
|
|
38
|
+
right: 24px;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.fr-accordion-item--expanded .fr-accordion-item-header {
|
|
@@ -9,7 +9,7 @@ const CardHeader = /*#__PURE__*/ forwardRef(({ title, subtitle, action, image, c
|
|
|
9
9
|
src: image.src
|
|
10
10
|
}) : null,
|
|
11
11
|
/*#__PURE__*/ jsxs("div", {
|
|
12
|
-
className: classnames('fwe-card-header', className),
|
|
12
|
+
className: classnames('fwe-card-header', 'fwe-d-flex', 'fwe-justify-content-space-between', className),
|
|
13
13
|
ref: ref,
|
|
14
14
|
...props,
|
|
15
15
|
children: [
|
|
@@ -17,6 +17,7 @@ const CardHeader = /*#__PURE__*/ forwardRef(({ title, subtitle, action, image, c
|
|
|
17
17
|
className: "fwe-card-title",
|
|
18
18
|
children: [
|
|
19
19
|
/*#__PURE__*/ jsx("h5", {
|
|
20
|
+
className: "fwe-overflow-ellipsis-2-lines",
|
|
20
21
|
children: title
|
|
21
22
|
}),
|
|
22
23
|
subtitle && /*#__PURE__*/ jsx("p", {
|
|
@@ -24,7 +25,9 @@ const CardHeader = /*#__PURE__*/ forwardRef(({ title, subtitle, action, image, c
|
|
|
24
25
|
})
|
|
25
26
|
]
|
|
26
27
|
}),
|
|
27
|
-
|
|
28
|
+
/*#__PURE__*/ jsx("div", {
|
|
29
|
+
children: action
|
|
30
|
+
})
|
|
28
31
|
]
|
|
29
32
|
})
|
|
30
33
|
]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './Pagination.scss';
|
|
2
|
-
export type PaginationType = 'SIMPLE' | 'NUMERIC' | 'DOTS';
|
|
2
|
+
export type PaginationType = 'basic' | 'numeric' | 'dots' | 'dots-lg' | 'SIMPLE' | 'NUMERIC' | 'DOTS';
|
|
3
3
|
export interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
|
|
4
4
|
readonly type?: PaginationType;
|
|
5
5
|
readonly onChange?: (page: number, event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import "./Pagination.css";
|
|
3
3
|
import classnames from "classnames";
|
|
4
4
|
import { forwardRef, useEffect, useState } from "react";
|
|
5
|
-
const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = '
|
|
5
|
+
const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = 'numeric', className, ...props }, ref)=>{
|
|
6
6
|
const controlled = void 0 !== pageCurrent;
|
|
7
7
|
const dotArray = Array.from(new Array(pageMax).keys());
|
|
8
8
|
const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
|
|
@@ -32,66 +32,63 @@ const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, d
|
|
|
32
32
|
const newPageCurrent = index + 1;
|
|
33
33
|
handleChange(newPageCurrent, event);
|
|
34
34
|
}
|
|
35
|
-
return /*#__PURE__*/
|
|
36
|
-
children:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
className: classnames('fwe-navigate-btn-down', {
|
|
46
|
-
'fwe-disabled': innerPageCurrent <= 1
|
|
47
|
-
}),
|
|
48
|
-
onClick: onBtnDown,
|
|
35
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
36
|
+
children: 'dots' === type || 'dots-lg' === type || 'DOTS' === type ? /*#__PURE__*/ jsx("div", {
|
|
37
|
+
...props,
|
|
38
|
+
className: classnames({
|
|
39
|
+
'fwe-d-none': pageMax < 2
|
|
40
|
+
}, className),
|
|
41
|
+
ref: ref,
|
|
42
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
43
|
+
className: "fwe-pagination",
|
|
44
|
+
children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
|
|
49
45
|
type: "button",
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
46
|
+
className: classnames(`fwe-page-dot${'dots-lg' === type ? '-lg' : ''}`, {
|
|
47
|
+
'fwe-selected': index + 1 === innerPageCurrent
|
|
48
|
+
}),
|
|
49
|
+
onClick: (e)=>onDotClick(index, e),
|
|
50
|
+
"aria-label": `Go to page ${index + 1}`,
|
|
51
|
+
"aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
|
|
52
|
+
}, index))
|
|
53
|
+
})
|
|
54
|
+
}) : /*#__PURE__*/ jsxs("div", {
|
|
55
|
+
...props,
|
|
56
|
+
className: classnames('fwe-pagination', {
|
|
57
|
+
'fwe-d-none': pageMax < 2
|
|
58
|
+
}, className),
|
|
59
|
+
ref: ref,
|
|
60
|
+
children: [
|
|
61
|
+
/*#__PURE__*/ jsx("button", {
|
|
62
|
+
className: classnames('fwe-navigate-btn-down', {
|
|
63
|
+
'fwe-disabled': innerPageCurrent <= 1
|
|
63
64
|
}),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
onClick: onBtnDown,
|
|
66
|
+
type: "button",
|
|
67
|
+
"aria-label": "navigate-btn-down"
|
|
68
|
+
}),
|
|
69
|
+
('numeric' === type || 'NUMERIC' === type) && /*#__PURE__*/ jsxs(Fragment, {
|
|
70
|
+
children: [
|
|
71
|
+
/*#__PURE__*/ jsx("span", {
|
|
72
|
+
className: "fwe-page-current",
|
|
73
|
+
children: innerPageCurrent
|
|
68
74
|
}),
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
|
|
84
|
-
type: "button",
|
|
85
|
-
className: classnames('fwe-page-dot', {
|
|
86
|
-
'fwe-selected': index + 1 === innerPageCurrent
|
|
87
|
-
}),
|
|
88
|
-
onClick: (e)=>onDotClick(index, e),
|
|
89
|
-
"aria-label": `Go to page ${index + 1}`,
|
|
90
|
-
"aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
|
|
91
|
-
}, index))
|
|
75
|
+
/*#__PURE__*/ jsx("span", {
|
|
76
|
+
className: "fwe-page-max",
|
|
77
|
+
children: pageMax
|
|
78
|
+
})
|
|
79
|
+
]
|
|
80
|
+
}),
|
|
81
|
+
/*#__PURE__*/ jsx("button", {
|
|
82
|
+
className: classnames('fwe-navigate-btn-up', {
|
|
83
|
+
'fwe-disabled': innerPageCurrent >= pageMax,
|
|
84
|
+
'fwe-ml-4': 'SIMPLE' === type
|
|
85
|
+
}),
|
|
86
|
+
onClick: onBtnUp,
|
|
87
|
+
type: "button",
|
|
88
|
+
"aria-label": "navigate-btn-up"
|
|
92
89
|
})
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
]
|
|
91
|
+
})
|
|
95
92
|
});
|
|
96
93
|
});
|
|
97
94
|
Pagination.displayName = 'Pagination';
|
|
@@ -13,6 +13,7 @@ export interface PopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>
|
|
|
13
13
|
readonly onChange?: (isOpen: boolean) => void;
|
|
14
14
|
readonly flip?: boolean;
|
|
15
15
|
readonly showArrow?: boolean;
|
|
16
|
+
readonly keepMounted?: boolean;
|
|
16
17
|
readonly onTriggerClick?: (event: MouseEvent) => void;
|
|
17
18
|
readonly stopPropagation?: boolean;
|
|
18
19
|
}
|
|
@@ -5,7 +5,7 @@ import classnames from "classnames";
|
|
|
5
5
|
import { forwardRef, useRef } from "react";
|
|
6
6
|
import { useControlled } from "../../../utils/useControlled.js";
|
|
7
7
|
import { useForkRef } from "../../../utils/useForkRef.js";
|
|
8
|
-
const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
|
|
8
|
+
const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, keepMounted = false, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
|
|
9
9
|
const [showPopover, setShowPopover] = useControlled({
|
|
10
10
|
controlled: isOpen,
|
|
11
11
|
default: openByDefault
|
|
@@ -85,11 +85,14 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containe
|
|
|
85
85
|
}),
|
|
86
86
|
children: children
|
|
87
87
|
}),
|
|
88
|
-
showPopover && /*#__PURE__*/ jsx(FloatingPortal, {
|
|
88
|
+
(showPopover || keepMounted) && /*#__PURE__*/ jsx(FloatingPortal, {
|
|
89
89
|
children: /*#__PURE__*/ jsxs("div", {
|
|
90
90
|
className: "fwe-popover-container",
|
|
91
91
|
ref: refs.setFloating,
|
|
92
|
-
style:
|
|
92
|
+
style: {
|
|
93
|
+
...floatingStyles,
|
|
94
|
+
display: showPopover ? void 0 : 'none'
|
|
95
|
+
},
|
|
93
96
|
...getFloatingProps(),
|
|
94
97
|
children: [
|
|
95
98
|
showArrow && /*#__PURE__*/ jsx(FloatingArrow, {
|
|
@@ -5,9 +5,7 @@ const Progress = /*#__PURE__*/ forwardRef(({ background = 'white', error = false
|
|
|
5
5
|
const classes = classnames('fwe-progress-bar', {
|
|
6
6
|
'fwe-bg-red': error
|
|
7
7
|
}, {
|
|
8
|
-
'fwe-progress-bar
|
|
9
|
-
}, {
|
|
10
|
-
'fwe-progress-bar-background': 'background' === background
|
|
8
|
+
'fwe-progress-bar--background': 'background' === background
|
|
11
9
|
});
|
|
12
10
|
return /*#__PURE__*/ jsx("div", {
|
|
13
11
|
className: classnames('fwe-progress', className),
|