@sb1/ffe-accordion-react 13.2.3 → 13.2.5

package/es/AccordionItem.js

@@ -25,8 +25,10 @@ import { Icon } from '@sb1/ffe-icons-react';
 import { Collapse } from '@sb1/ffe-collapse-react';
 import classNames from 'classnames';
 import { AccordionContext } from './AccordionContext';
+import { useTabPressed } from './useTabPressed';
 export var AccordionItem = function (_a) {
     var children = _a.children, heading = _a.heading, defaultOpen = _a.defaultOpen, isOpen = _a.isOpen, className = _a.className, _b = _a.onToggleOpen, onToggleOpen = _b === void 0 ? Function.prototype : _b, ariaLabel = _a.ariaLabel, _c = _a.noPadding, noPadding = _c === void 0 ? false : _c, rest = __rest(_a, ["children", "heading", "defaultOpen", "isOpen", "className", "onToggleOpen", "ariaLabel", "noPadding"]);
+    var tabPressed = useTabPressed();
     var _d = useState(defaultOpen), isExpanded = _d[0], setIsExpanded = _d[1];
     var _e = useState(false), isAnimating = _e[0], setIsAnimating = _e[1];
     var _f = useState(false), isFocused = _f[0], setFocus = _f[1];
@@ -54,12 +56,12 @@ export var AccordionItem = function (_a) {
         }) }, rest),
         React.createElement("h".concat(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', {
                 'ffe-accordion-item__heading-button--open': isExpanded,
-            }), onClick: handleOnClick, onFocus: function () { return setFocus(true); }, onBlur: function () { return setFocus(false); } },
+            }), onClick: handleOnClick, onFocus: function () { return setFocus(tabPressed); }, onBlur: function () { return setFocus(false); } },
             React.createElement("span", { className: "ffe-accordion-item__heading-button-content" },
                 heading,
                 React.createElement("span", { className: "ffe-accordion-item__heading-icon-wrapper" },
                     React.createElement(Icon, { className: "ffe-accordion-item__heading-icon", fileUrl: expandMoreIcon, size: "sm" }))))),
-        React.createElement(Collapse, { isOpen: !!isExpanded, onRest: function () { return setIsAnimating(false); }, id: contentId, "aria-labelledby": buttonId, role: "region" }, !collapseHidden && (React.createElement("div", { className: classNames("ffe-accordion-item__body", {
-                "ffe-accordion-item__body--no-padding": noPadding,
+        React.createElement(Collapse, { isOpen: !!isExpanded, onRest: function () { return setIsAnimating(false); }, id: contentId, "aria-labelledby": buttonId, role: "region" }, !collapseHidden && (React.createElement("div", { className: classNames('ffe-accordion-item__body', {
+                'ffe-accordion-item__body--no-padding': noPadding,
             }) }, children)))));
 };

package/es/tsconfig.esm.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/Accordion.tsx","../src/AccordionContext.tsx","../src/AccordionItem.tsx","../src/index.ts"],"version":"5.9.2"}
+{"root":["../src/Accordion.tsx","../src/AccordionContext.tsx","../src/AccordionItem.tsx","../src/index.ts","../src/useTabPressed.ts"],"version":"5.9.2"}

package/es/useTabPressed.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+export function useTabPressed() {
+    var _a = useState(false), tabPressed = _a[0], setTabPressed = _a[1];
+    useEffect(function () {
+        var handleKeyDown = function (e) {
+            if (e.key === 'Tab') {
+                setTabPressed(true);
+            }
+        };
+        var handleKeyUp = function (e) {
+            if (e.key === 'Tab') {
+                setTabPressed(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+    return tabPressed;
+}

package/lib/AccordionItem.js

@@ -64,8 +64,10 @@ var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
 var ffe_collapse_react_1 = require("@sb1/ffe-collapse-react");
 var classnames_1 = __importDefault(require("classnames"));
 var AccordionContext_1 = require("./AccordionContext");
+var useTabPressed_1 = require("./useTabPressed");
 var AccordionItem = function (_a) {
     var children = _a.children, heading = _a.heading, defaultOpen = _a.defaultOpen, isOpen = _a.isOpen, className = _a.className, _b = _a.onToggleOpen, onToggleOpen = _b === void 0 ? Function.prototype : _b, ariaLabel = _a.ariaLabel, _c = _a.noPadding, noPadding = _c === void 0 ? false : _c, rest = __rest(_a, ["children", "heading", "defaultOpen", "isOpen", "className", "onToggleOpen", "ariaLabel", "noPadding"]);
+    var tabPressed = (0, useTabPressed_1.useTabPressed)();
     var _d = (0, react_1.useState)(defaultOpen), isExpanded = _d[0], setIsExpanded = _d[1];
     var _e = (0, react_1.useState)(false), isAnimating = _e[0], setIsAnimating = _e[1];
     var _f = (0, react_1.useState)(false), isFocused = _f[0], setFocus = _f[1];
@@ -93,13 +95,13 @@ var AccordionItem = function (_a) {
         }) }, rest),
         react_1.default.createElement("h".concat(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', {
                 'ffe-accordion-item__heading-button--open': isExpanded,
-            }), onClick: handleOnClick, onFocus: function () { return setFocus(true); }, onBlur: function () { return setFocus(false); } },
+            }), onClick: handleOnClick, onFocus: function () { return setFocus(tabPressed); }, onBlur: function () { return setFocus(false); } },
             react_1.default.createElement("span", { className: "ffe-accordion-item__heading-button-content" },
                 heading,
                 react_1.default.createElement("span", { className: "ffe-accordion-item__heading-icon-wrapper" },
                     react_1.default.createElement(ffe_icons_react_1.Icon, { className: "ffe-accordion-item__heading-icon", fileUrl: expandMoreIcon, size: "sm" }))))),
-        react_1.default.createElement(ffe_collapse_react_1.Collapse, { isOpen: !!isExpanded, onRest: function () { return setIsAnimating(false); }, id: contentId, "aria-labelledby": buttonId, role: "region" }, !collapseHidden && (react_1.default.createElement("div", { className: (0, classnames_1.default)("ffe-accordion-item__body", {
-                "ffe-accordion-item__body--no-padding": noPadding,
+        react_1.default.createElement(ffe_collapse_react_1.Collapse, { isOpen: !!isExpanded, onRest: function () { return setIsAnimating(false); }, id: contentId, "aria-labelledby": buttonId, role: "region" }, !collapseHidden && (react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-accordion-item__body', {
+                'ffe-accordion-item__body--no-padding': noPadding,
             }) }, children)))));
 };
 exports.AccordionItem = AccordionItem;

package/lib/tsconfig.cjs.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/Accordion.tsx","../src/AccordionContext.tsx","../src/AccordionItem.tsx","../src/index.ts"],"version":"5.9.2"}
+{"root":["../src/Accordion.tsx","../src/AccordionContext.tsx","../src/AccordionItem.tsx","../src/index.ts","../src/useTabPressed.ts"],"version":"5.9.2"}

package/lib/useTabPressed.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabPressed = useTabPressed;
+var react_1 = require("react");
+function useTabPressed() {
+    var _a = (0, react_1.useState)(false), tabPressed = _a[0], setTabPressed = _a[1];
+    (0, react_1.useEffect)(function () {
+        var handleKeyDown = function (e) {
+            if (e.key === 'Tab') {
+                setTabPressed(true);
+            }
+        };
+        var handleKeyUp = function (e) {
+            if (e.key === 'Tab') {
+                setTabPressed(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+    return tabPressed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-accordion-react",
-    "version": "13.2.3",
+    "version": "13.2.5",
     "license": "MIT",
     "author": "SpareBank 1",
     "files": [
@@ -24,8 +24,8 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-accordion": "^13.1.2",
-        "@sb1/ffe-collapse-react": "^5.1.36",
+        "@sb1/ffe-accordion": "^13.1.4",
+        "@sb1/ffe-collapse-react": "^5.1.37",
         "@sb1/ffe-icons-react": "^12.0.9",
         "classnames": "^2.3.1"
     },
@@ -40,5 +40,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9e0970976a31bca1c380a5e2f95e30e297278efb"
+    "gitHead": "53c34d08133242835303097e394af121b2e4fffd"
 }

package/types/tsconfig.types.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/Accordion.tsx","../src/AccordionContext.tsx","../src/AccordionItem.tsx","../src/index.ts"],"version":"5.9.2"}
+{"root":["../src/Accordion.tsx","../src/AccordionContext.tsx","../src/AccordionItem.tsx","../src/index.ts","../src/useTabPressed.ts"],"version":"5.9.2"}

package/types/useTabPressed.d.ts

@@ -0,0 +1 @@
+export declare function useTabPressed(): boolean;