@sb1/ffe-accordion-react 100.12.4 → 101.0.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/es/Accordion.js +2 -25
- package/es/AccordionContext.js +3 -4
- package/es/AccordionItem.js +17 -40
- package/es/useTabPressed.js +5 -5
- package/lib/Accordion.js +5 -28
- package/lib/AccordionContext.js +3 -4
- package/lib/AccordionItem.js +23 -46
- package/lib/useTabPressed.js +6 -6
- package/package.json +7 -7
package/es/Accordion.js
CHANGED
|
@@ -1,30 +1,7 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { AccordionProvider } from './AccordionContext';
|
|
26
|
-
export
|
|
27
|
-
var children = _a.children, headingLevel = _a.headingLevel, className = _a.className, rest = __rest(_a, ["children", "headingLevel", "className"]);
|
|
4
|
+
export const Accordion = ({ children, headingLevel, className, ...rest }) => {
|
|
28
5
|
return (React.createElement(AccordionProvider, { headingLevel: headingLevel },
|
|
29
|
-
React.createElement("div",
|
|
6
|
+
React.createElement("div", { className: classNames(className, 'ffe-accordion', 'ffe-default-mode'), role: "group", "aria-label": "Trekkspillmeny", ...rest }, children)));
|
|
30
7
|
};
|
package/es/AccordionContext.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React, { createContext } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export const AccordionContext = createContext({
|
|
3
3
|
headingLevel: 2,
|
|
4
4
|
});
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
return (React.createElement(AccordionContext.Provider, { value: { headingLevel: headingLevel } }, children));
|
|
5
|
+
export const AccordionProvider = ({ children, headingLevel, }) => {
|
|
6
|
+
return (React.createElement(AccordionContext.Provider, { value: { headingLevel } }, children));
|
|
8
7
|
};
|
package/es/AccordionItem.js
CHANGED
|
@@ -1,67 +1,44 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useEffect, useState, useContext, useId } from 'react';
|
|
24
2
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
25
3
|
import { Collapse } from '@sb1/ffe-collapse-react';
|
|
26
4
|
import classNames from 'classnames';
|
|
27
5
|
import { AccordionContext } from './AccordionContext';
|
|
28
6
|
import { useTabPressed } from './useTabPressed';
|
|
29
|
-
export
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
useEffect(function () {
|
|
7
|
+
export const AccordionItem = ({ children, heading, defaultOpen, isOpen, className, onToggleOpen = Function.prototype, ariaLabel, noPadding = false, ...rest }) => {
|
|
8
|
+
const tabPressed = useTabPressed();
|
|
9
|
+
const [isExpanded, setIsExpanded] = useState(defaultOpen);
|
|
10
|
+
const [isAnimating, setIsAnimating] = useState(false);
|
|
11
|
+
const [isFocused, setFocus] = useState(false);
|
|
12
|
+
const buttonId = useId();
|
|
13
|
+
const contentId = useId();
|
|
14
|
+
const { headingLevel } = useContext(AccordionContext);
|
|
15
|
+
const expandMoreIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+';
|
|
16
|
+
useEffect(() => {
|
|
40
17
|
if (isOpen != null) {
|
|
41
18
|
setIsAnimating(true);
|
|
42
19
|
setIsExpanded(isOpen);
|
|
43
20
|
}
|
|
44
21
|
}, [isOpen]);
|
|
45
|
-
|
|
22
|
+
const handleOnClick = () => {
|
|
46
23
|
onToggleOpen(!isExpanded);
|
|
47
24
|
if (isOpen == null) {
|
|
48
25
|
setIsAnimating(true);
|
|
49
26
|
setIsExpanded(!isExpanded);
|
|
50
27
|
}
|
|
51
28
|
};
|
|
52
|
-
|
|
53
|
-
return (React.createElement("div",
|
|
29
|
+
const collapseHidden = !isExpanded && !isAnimating;
|
|
30
|
+
return (React.createElement("div", { className: classNames(className, 'ffe-accordion-item', {
|
|
54
31
|
'ffe-accordion-item--open': isExpanded,
|
|
55
32
|
'ffe-accordion-item--focus': isFocused,
|
|
56
|
-
})
|
|
57
|
-
React.createElement(
|
|
33
|
+
}), ...rest },
|
|
34
|
+
React.createElement(`h${headingLevel}`, { className: 'ffe-h6 ffe-accordion-item__heading' }, React.createElement("button", { type: "button", id: buttonId, "aria-expanded": isExpanded ? 'true' : 'false', "aria-controls": contentId, "aria-label": ariaLabel, className: classNames('ffe-accordion-item__heading-button', {
|
|
58
35
|
'ffe-accordion-item__heading-button--open': isExpanded,
|
|
59
|
-
}), onClick: handleOnClick, onFocus:
|
|
36
|
+
}), onClick: handleOnClick, onFocus: () => setFocus(tabPressed), onBlur: () => setFocus(false) },
|
|
60
37
|
React.createElement("span", { className: "ffe-accordion-item__heading-button-content" },
|
|
61
38
|
heading,
|
|
62
39
|
React.createElement("span", { className: "ffe-accordion-item__heading-icon-wrapper" },
|
|
63
40
|
React.createElement(Icon, { className: "ffe-accordion-item__heading-icon", fileUrl: expandMoreIcon, size: "sm" }))))),
|
|
64
|
-
React.createElement(Collapse, { isOpen: !!isExpanded, onRest:
|
|
41
|
+
React.createElement(Collapse, { isOpen: !!isExpanded, onRest: () => setIsAnimating(false), id: contentId, "aria-labelledby": buttonId, role: "region" }, !collapseHidden && (React.createElement("div", { className: classNames('ffe-accordion-item__body', {
|
|
65
42
|
'ffe-accordion-item__body--no-padding': noPadding,
|
|
66
43
|
}) }, children)))));
|
|
67
44
|
};
|
package/es/useTabPressed.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
2
|
export function useTabPressed() {
|
|
3
|
-
|
|
4
|
-
useEffect(
|
|
5
|
-
|
|
3
|
+
const [tabPressed, setTabPressed] = useState(false);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
const handleKeyDown = (e) => {
|
|
6
6
|
if (e.key === 'Tab') {
|
|
7
7
|
setTabPressed(true);
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
|
-
|
|
10
|
+
const handleKeyUp = (e) => {
|
|
11
11
|
if (e.key === 'Tab') {
|
|
12
12
|
setTabPressed(false);
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
window.addEventListener('keydown', handleKeyDown);
|
|
16
16
|
window.addEventListener('keyup', handleKeyUp);
|
|
17
|
-
return
|
|
17
|
+
return () => {
|
|
18
18
|
window.removeEventListener('keydown', handleKeyDown);
|
|
19
19
|
window.removeEventListener('keyup', handleKeyUp);
|
|
20
20
|
};
|
package/lib/Accordion.js
CHANGED
|
@@ -1,37 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.Accordion = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var children = _a.children, headingLevel = _a.headingLevel, className = _a.className, rest = __rest(_a, ["children", "headingLevel", "className"]);
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
const AccordionContext_1 = require("./AccordionContext");
|
|
10
|
+
const Accordion = ({ children, headingLevel, className, ...rest }) => {
|
|
34
11
|
return (react_1.default.createElement(AccordionContext_1.AccordionProvider, { headingLevel: headingLevel },
|
|
35
|
-
react_1.default.createElement("div",
|
|
12
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)(className, 'ffe-accordion', 'ffe-default-mode'), role: "group", "aria-label": "Trekkspillmeny", ...rest }, children)));
|
|
36
13
|
};
|
|
37
14
|
exports.Accordion = Accordion;
|
package/lib/AccordionContext.js
CHANGED
|
@@ -34,12 +34,11 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
exports.AccordionProvider = exports.AccordionContext = void 0;
|
|
37
|
-
|
|
37
|
+
const react_1 = __importStar(require("react"));
|
|
38
38
|
exports.AccordionContext = (0, react_1.createContext)({
|
|
39
39
|
headingLevel: 2,
|
|
40
40
|
});
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
return (react_1.default.createElement(exports.AccordionContext.Provider, { value: { headingLevel: headingLevel } }, children));
|
|
41
|
+
const AccordionProvider = ({ children, headingLevel, }) => {
|
|
42
|
+
return (react_1.default.createElement(exports.AccordionContext.Provider, { value: { headingLevel } }, children));
|
|
44
43
|
};
|
|
45
44
|
exports.AccordionProvider = AccordionProvider;
|
package/lib/AccordionItem.js
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -43,64 +32,52 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
43
32
|
return result;
|
|
44
33
|
};
|
|
45
34
|
})();
|
|
46
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
-
var t = {};
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
-
t[p] = s[p];
|
|
50
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
-
t[p[i]] = s[p[i]];
|
|
54
|
-
}
|
|
55
|
-
return t;
|
|
56
|
-
};
|
|
57
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
58
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
59
37
|
};
|
|
60
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
61
39
|
exports.AccordionItem = void 0;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
(0, react_1.useEffect)(function () {
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
|
|
42
|
+
const ffe_collapse_react_1 = require("@sb1/ffe-collapse-react");
|
|
43
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
44
|
+
const AccordionContext_1 = require("./AccordionContext");
|
|
45
|
+
const useTabPressed_1 = require("./useTabPressed");
|
|
46
|
+
const AccordionItem = ({ children, heading, defaultOpen, isOpen, className, onToggleOpen = Function.prototype, ariaLabel, noPadding = false, ...rest }) => {
|
|
47
|
+
const tabPressed = (0, useTabPressed_1.useTabPressed)();
|
|
48
|
+
const [isExpanded, setIsExpanded] = (0, react_1.useState)(defaultOpen);
|
|
49
|
+
const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
|
|
50
|
+
const [isFocused, setFocus] = (0, react_1.useState)(false);
|
|
51
|
+
const buttonId = (0, react_1.useId)();
|
|
52
|
+
const contentId = (0, react_1.useId)();
|
|
53
|
+
const { headingLevel } = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
|
|
54
|
+
const expandMoreIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+';
|
|
55
|
+
(0, react_1.useEffect)(() => {
|
|
79
56
|
if (isOpen != null) {
|
|
80
57
|
setIsAnimating(true);
|
|
81
58
|
setIsExpanded(isOpen);
|
|
82
59
|
}
|
|
83
60
|
}, [isOpen]);
|
|
84
|
-
|
|
61
|
+
const handleOnClick = () => {
|
|
85
62
|
onToggleOpen(!isExpanded);
|
|
86
63
|
if (isOpen == null) {
|
|
87
64
|
setIsAnimating(true);
|
|
88
65
|
setIsExpanded(!isExpanded);
|
|
89
66
|
}
|
|
90
67
|
};
|
|
91
|
-
|
|
92
|
-
return (react_1.default.createElement("div",
|
|
68
|
+
const collapseHidden = !isExpanded && !isAnimating;
|
|
69
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, 'ffe-accordion-item', {
|
|
93
70
|
'ffe-accordion-item--open': isExpanded,
|
|
94
71
|
'ffe-accordion-item--focus': isFocused,
|
|
95
|
-
})
|
|
96
|
-
react_1.default.createElement(
|
|
72
|
+
}), ...rest },
|
|
73
|
+
react_1.default.createElement(`h${headingLevel}`, { className: 'ffe-h6 ffe-accordion-item__heading' }, react_1.default.createElement("button", { type: "button", id: buttonId, "aria-expanded": isExpanded ? 'true' : 'false', "aria-controls": contentId, "aria-label": ariaLabel, className: (0, classnames_1.default)('ffe-accordion-item__heading-button', {
|
|
97
74
|
'ffe-accordion-item__heading-button--open': isExpanded,
|
|
98
|
-
}), onClick: handleOnClick, onFocus:
|
|
75
|
+
}), onClick: handleOnClick, onFocus: () => setFocus(tabPressed), onBlur: () => setFocus(false) },
|
|
99
76
|
react_1.default.createElement("span", { className: "ffe-accordion-item__heading-button-content" },
|
|
100
77
|
heading,
|
|
101
78
|
react_1.default.createElement("span", { className: "ffe-accordion-item__heading-icon-wrapper" },
|
|
102
79
|
react_1.default.createElement(ffe_icons_react_1.Icon, { className: "ffe-accordion-item__heading-icon", fileUrl: expandMoreIcon, size: "sm" }))))),
|
|
103
|
-
react_1.default.createElement(ffe_collapse_react_1.Collapse, { isOpen: !!isExpanded, onRest:
|
|
80
|
+
react_1.default.createElement(ffe_collapse_react_1.Collapse, { isOpen: !!isExpanded, onRest: () => setIsAnimating(false), id: contentId, "aria-labelledby": buttonId, role: "region" }, !collapseHidden && (react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-accordion-item__body', {
|
|
104
81
|
'ffe-accordion-item__body--no-padding': noPadding,
|
|
105
82
|
}) }, children)))));
|
|
106
83
|
};
|
package/lib/useTabPressed.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useTabPressed = useTabPressed;
|
|
4
|
-
|
|
4
|
+
const react_1 = require("react");
|
|
5
5
|
function useTabPressed() {
|
|
6
|
-
|
|
7
|
-
(0, react_1.useEffect)(
|
|
8
|
-
|
|
6
|
+
const [tabPressed, setTabPressed] = (0, react_1.useState)(false);
|
|
7
|
+
(0, react_1.useEffect)(() => {
|
|
8
|
+
const handleKeyDown = (e) => {
|
|
9
9
|
if (e.key === 'Tab') {
|
|
10
10
|
setTabPressed(true);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
const handleKeyUp = (e) => {
|
|
14
14
|
if (e.key === 'Tab') {
|
|
15
15
|
setTabPressed(false);
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
window.addEventListener('keydown', handleKeyDown);
|
|
19
19
|
window.addEventListener('keyup', handleKeyUp);
|
|
20
|
-
return
|
|
20
|
+
return () => {
|
|
21
21
|
window.removeEventListener('keydown', handleKeyDown);
|
|
22
22
|
window.removeEventListener('keyup', handleKeyUp);
|
|
23
23
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-accordion-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "101.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "SpareBank 1",
|
|
6
6
|
"files": [
|
|
@@ -24,13 +24,13 @@
|
|
|
24
24
|
"test:watch": "ffe-buildtool jest --watch"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@sb1/ffe-accordion": "^
|
|
28
|
-
"@sb1/ffe-collapse-react": "^
|
|
29
|
-
"@sb1/ffe-icons-react": "^
|
|
30
|
-
"classnames": "^2.
|
|
27
|
+
"@sb1/ffe-accordion": "^101.0.1",
|
|
28
|
+
"@sb1/ffe-collapse-react": "^101.0.1",
|
|
29
|
+
"@sb1/ffe-icons-react": "^101.0.1",
|
|
30
|
+
"classnames": "^2.5.1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@sb1/ffe-buildtool": "^
|
|
33
|
+
"@sb1/ffe-buildtool": "^101.0.1",
|
|
34
34
|
"react": "^18.2.0",
|
|
35
35
|
"react-dom": "^18.2.0"
|
|
36
36
|
},
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "2f1f2f2f93e52a5fc5429cbe29538f6016702cf3"
|
|
44
44
|
}
|