@sb1/ffe-accordion-react 9.2.15 → 9.3.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.
Files changed (6) hide show
  1. package/es/Accordion.js +6 -96
  2. package/es/AccordionItem.js +42 -56
  3. package/lib/Accordion.js +6 -107
  4. package/lib/AccordionItem.js +42 -68
  5. package/lib/index.js +0 -3
  6. package/package.json +45 -44
package/es/Accordion.js CHANGED
@@ -1,118 +1,28 @@
1
1
  var _excluded = ["children", "headingLevel", "className"];
2
-
3
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
-
5
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
6
-
7
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
8
-
9
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
10
-
11
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
12
-
13
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
14
-
15
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
16
-
17
3
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
18
-
19
4
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
20
-
21
- import React, { createRef, useEffect, useState } from 'react';
5
+ import React from 'react';
22
6
  import { node, oneOf, string } from 'prop-types';
23
7
  import classNames from 'classnames';
24
- var ARROW_UP = 'ArrowUp';
25
- var ARROW_DOWN = 'ArrowDown';
26
- var HOME = 'Home';
27
- var END = 'End';
28
-
29
8
  var Accordion = function Accordion(_ref) {
30
9
  var children = _ref.children,
31
- headingLevel = _ref.headingLevel,
32
- className = _ref.className,
33
- rest = _objectWithoutProperties(_ref, _excluded);
34
-
35
- var _useState = useState(false),
36
- _useState2 = _slicedToArray(_useState, 2),
37
- isHeadingFocused = _useState2[0],
38
- setIsHeadingFocuses = _useState2[1];
39
-
40
- var _useState3 = useState([]),
41
- _useState4 = _slicedToArray(_useState3, 2),
42
- refs = _useState4[0],
43
- setRefs = _useState4[1];
44
-
45
- var handleFocus = function handleFocus() {
46
- return setIsHeadingFocuses(true);
47
- };
48
-
49
- var handleBlur = function handleBlur() {
50
- return setIsHeadingFocuses(false);
51
- };
52
-
53
- useEffect(function () {
54
- setRefs(function (prevRefs) {
55
- return Array(children.length).fill(null).map(function (_, i) {
56
- return prevRefs[i] || /*#__PURE__*/createRef();
57
- });
58
- });
59
- }, [children.length]);
60
-
61
- var handleKeyDown = function handleKeyDown(event) {
62
- if (isHeadingFocused) {
63
- if ([HOME, END, ARROW_UP, ARROW_DOWN].some(function (key) {
64
- return key === event.key;
65
- })) {
66
- event.preventDefault();
67
- }
68
-
69
- var focusIndex = refs.findIndex(function (ref) {
70
- return ref.current === document.activeElement;
71
- });
72
-
73
- if (event.key === HOME) {
74
- refs[0].current.focus();
75
- } else if (event.key === END) {
76
- refs[refs.length - 1].current.focus();
77
- } else if (event.key === ARROW_UP) {
78
- if (focusIndex === 0) {
79
- refs[refs.length - 1].current.focus();
80
- } else {
81
- refs[focusIndex - 1].current.focus();
82
- }
83
- } else if (event.key === ARROW_DOWN) {
84
- if (focusIndex === refs.length - 1) {
85
- refs[0].current.focus();
86
- } else {
87
- refs[focusIndex + 1].current.focus();
88
- }
89
- }
90
- }
91
- };
92
-
10
+ headingLevel = _ref.headingLevel,
11
+ className = _ref.className,
12
+ rest = _objectWithoutProperties(_ref, _excluded);
93
13
  return /*#__PURE__*/React.createElement("div", _extends({
94
- // eslint-disable-line jsx-a11y/no-static-element-interactions
95
- onKeyDown: handleKeyDown,
96
- className: classNames(className, 'ffe-accordion', {
97
- 'ffe-accordion--focus': isHeadingFocused
98
- })
14
+ className: classNames(className, 'ffe-accordion')
99
15
  }, rest), React.Children.map(children, function (child, index) {
100
16
  return /*#__PURE__*/React.cloneElement(child, {
101
- headingLevel: headingLevel,
102
- ref: refs[index],
103
- onFocus: handleFocus,
104
- onBlur: handleBlur
17
+ headingLevel: headingLevel
105
18
  });
106
19
  }));
107
20
  };
108
-
109
21
  Accordion.propTypes = {
110
22
  /** Accordion items */
111
23
  children: node,
112
-
113
24
  /** The level of headings in the AccordionItems */
114
25
  headingLevel: oneOf([1, 2, 3, 4, 5, 6]).isRequired,
115
-
116
26
  /** Class assigned the container */
117
27
  className: string
118
28
  };
package/es/AccordionItem.js CHANGED
@@ -1,52 +1,43 @@
1
1
  var _excluded = ["children", "heading", "defaultOpen", "isOpen", "className", "onToggleOpen", "ariaLabel"],
2
- _excluded2 = ["headingLevel", "onFocus", "onBlur", "forwardedRef"];
3
-
2
+ _excluded2 = ["headingLevel", "forwardedRef"];
4
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
5
-
6
4
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
7
-
8
5
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
9
-
10
6
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
11
-
12
7
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
13
-
14
8
  function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
15
-
16
9
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
17
-
18
10
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
19
-
20
11
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
21
-
22
12
  import React, { useEffect, useRef, useState } from 'react';
23
13
  import { bool, func, node, string } from 'prop-types';
24
14
  import { v4 as uuid } from 'uuid';
25
15
  import ChevronIkon from "@sb1/ffe-icons-react/es/chevron-ikon";
26
16
  import Collapse from '@sb1/ffe-collapse-react';
27
17
  import classNames from 'classnames';
28
-
18
+ import { Heading6 } from '@sb1/ffe-core-react';
29
19
  var AccordionItem = function AccordionItem(_ref) {
30
20
  var children = _ref.children,
31
- heading = _ref.heading,
32
- defaultOpen = _ref.defaultOpen,
33
- isOpen = _ref.isOpen,
34
- className = _ref.className,
35
- _ref$onToggleOpen = _ref.onToggleOpen,
36
- onToggleOpen = _ref$onToggleOpen === void 0 ? Function.prototype : _ref$onToggleOpen,
37
- ariaLabel = _ref.ariaLabel,
38
- accordionProps = _objectWithoutProperties(_ref, _excluded);
39
-
21
+ heading = _ref.heading,
22
+ defaultOpen = _ref.defaultOpen,
23
+ isOpen = _ref.isOpen,
24
+ className = _ref.className,
25
+ _ref$onToggleOpen = _ref.onToggleOpen,
26
+ onToggleOpen = _ref$onToggleOpen === void 0 ? Function.prototype : _ref$onToggleOpen,
27
+ ariaLabel = _ref.ariaLabel,
28
+ accordionProps = _objectWithoutProperties(_ref, _excluded);
40
29
  var _useState = useState(defaultOpen),
41
- _useState2 = _slicedToArray(_useState, 2),
42
- isExpanded = _useState2[0],
43
- setIsExpanded = _useState2[1];
44
-
30
+ _useState2 = _slicedToArray(_useState, 2),
31
+ isExpanded = _useState2[0],
32
+ setIsExpanded = _useState2[1];
45
33
  var _useState3 = useState(false),
46
- _useState4 = _slicedToArray(_useState3, 2),
47
- isAnimating = _useState4[0],
48
- setIsAnimating = _useState4[1];
49
-
34
+ _useState4 = _slicedToArray(_useState3, 2),
35
+ isAnimating = _useState4[0],
36
+ setIsAnimating = _useState4[1];
37
+ var _useState5 = useState(false),
38
+ _useState6 = _slicedToArray(_useState5, 2),
39
+ isFocused = _useState6[0],
40
+ setFocus = _useState6[1];
50
41
  var buttonId = useRef(uuid());
51
42
  var contentId = useRef(uuid());
52
43
  useEffect(function () {
@@ -55,29 +46,25 @@ var AccordionItem = function AccordionItem(_ref) {
55
46
  setIsExpanded(isOpen);
56
47
  }
57
48
  }, [isOpen]);
58
-
59
49
  var handleOnClick = function handleOnClick() {
60
50
  onToggleOpen(!isExpanded);
61
-
62
51
  if (isOpen == null) {
63
52
  setIsAnimating(true);
64
53
  setIsExpanded(!isExpanded);
65
54
  }
66
55
  };
67
-
68
56
  var headingLevel = accordionProps.headingLevel,
69
- onFocus = accordionProps.onFocus,
70
- onBlur = accordionProps.onBlur,
71
- forwardedRef = accordionProps.forwardedRef,
72
- rest = _objectWithoutProperties(accordionProps, _excluded2);
73
-
57
+ forwardedRef = accordionProps.forwardedRef,
58
+ rest = _objectWithoutProperties(accordionProps, _excluded2);
74
59
  var collapseHidden = !isExpanded && !isAnimating;
75
60
  return /*#__PURE__*/React.createElement("div", _extends({
76
61
  className: classNames(className, 'ffe-accordion-item', {
77
- 'ffe-accordion-item--open': isExpanded
62
+ 'ffe-accordion-item--open': isExpanded,
63
+ 'ffe-accordion-item--focus': isFocused
78
64
  })
79
- }, rest), /*#__PURE__*/React.createElement("h".concat(headingLevel), {
80
- className: 'ffe-h6'
65
+ }, rest), /*#__PURE__*/React.createElement(Heading6, {
66
+ className: "ffe-accordion-item__heading",
67
+ "aria-level": headingLevel
81
68
  }, /*#__PURE__*/React.createElement("button", {
82
69
  type: "button",
83
70
  id: buttonId.current,
@@ -85,17 +72,23 @@ var AccordionItem = function AccordionItem(_ref) {
85
72
  "aria-expanded": isExpanded ? 'true' : 'false',
86
73
  "aria-controls": contentId.current,
87
74
  "aria-label": ariaLabel,
88
- className: classNames('ffe-accordion__heading-button', {
89
- 'ffe-accordion__heading-button--open': isExpanded
75
+ className: classNames('ffe-accordion-item__heading-button', {
76
+ 'ffe-accordion-item__heading-button--open': isExpanded
90
77
  }),
91
78
  onClick: handleOnClick,
92
- onFocus: onFocus,
93
- onBlur: onBlur
79
+ onFocus: function onFocus() {
80
+ return setFocus(true);
81
+ },
82
+ onBlur: function onBlur() {
83
+ return setFocus(false);
84
+ }
94
85
  }, /*#__PURE__*/React.createElement("span", {
95
- className: "ffe-accordion__heading-button-content"
96
- }, heading, /*#__PURE__*/React.createElement(ChevronIkon, {
97
- className: "ffe-accordion__heading-icon"
98
- })))), /*#__PURE__*/React.createElement(Collapse, {
86
+ className: "ffe-accordion-item__heading-button-content"
87
+ }, heading, /*#__PURE__*/React.createElement("span", {
88
+ className: "ffe-accordion-item__heading-icon-wrapper"
89
+ }, /*#__PURE__*/React.createElement(ChevronIkon, {
90
+ className: "ffe-accordion-item__heading-icon"
91
+ }))))), /*#__PURE__*/React.createElement(Collapse, {
99
92
  isOpen: isExpanded,
100
93
  onRest: function onRest() {
101
94
  return setIsAnimating(false);
@@ -105,29 +98,22 @@ var AccordionItem = function AccordionItem(_ref) {
105
98
  hidden: collapseHidden,
106
99
  role: "region"
107
100
  }, !collapseHidden && /*#__PURE__*/React.createElement("div", {
108
- className: "ffe-accordion-body"
101
+ className: "ffe-accordion-item__body"
109
102
  }, children)));
110
103
  };
111
-
112
104
  AccordionItem.propTypes = {
113
105
  /** The heading */
114
106
  heading: node.isRequired,
115
-
116
107
  /** The content to appear when expanded */
117
108
  children: node.isRequired,
118
-
119
109
  /** Should it be open by default */
120
110
  defaultOpen: bool,
121
-
122
111
  /** Is the item open or collapsed? Used for overriding default behaviour */
123
112
  isOpen: bool,
124
-
125
113
  /** Class assigned the container */
126
114
  className: string,
127
-
128
115
  /** Callback when the item is open/closed */
129
116
  onToggleOpen: func,
130
-
131
117
  /** aria-label for the button */
132
118
  ariaLabel: string
133
119
  };
package/lib/Accordion.js CHANGED
@@ -1,136 +1,35 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports.default = void 0;
9
-
10
- var _react = _interopRequireWildcard(require("react"));
11
-
7
+ var _react = _interopRequireDefault(require("react"));
12
8
  var _propTypes = require("prop-types");
13
-
14
9
  var _classnames = _interopRequireDefault(require("classnames"));
15
-
16
10
  var _excluded = ["children", "headingLevel", "className"];
17
-
18
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
-
22
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
-
24
12
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
25
-
26
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
27
-
28
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
29
-
30
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
31
-
32
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
33
-
34
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
35
-
36
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
37
-
38
13
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
39
-
40
14
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
41
-
42
- var ARROW_UP = 'ArrowUp';
43
- var ARROW_DOWN = 'ArrowDown';
44
- var HOME = 'Home';
45
- var END = 'End';
46
-
47
15
  var Accordion = function Accordion(_ref) {
48
16
  var children = _ref.children,
49
- headingLevel = _ref.headingLevel,
50
- className = _ref.className,
51
- rest = _objectWithoutProperties(_ref, _excluded);
52
-
53
- var _useState = (0, _react.useState)(false),
54
- _useState2 = _slicedToArray(_useState, 2),
55
- isHeadingFocused = _useState2[0],
56
- setIsHeadingFocuses = _useState2[1];
57
-
58
- var _useState3 = (0, _react.useState)([]),
59
- _useState4 = _slicedToArray(_useState3, 2),
60
- refs = _useState4[0],
61
- setRefs = _useState4[1];
62
-
63
- var handleFocus = function handleFocus() {
64
- return setIsHeadingFocuses(true);
65
- };
66
-
67
- var handleBlur = function handleBlur() {
68
- return setIsHeadingFocuses(false);
69
- };
70
-
71
- (0, _react.useEffect)(function () {
72
- setRefs(function (prevRefs) {
73
- return Array(children.length).fill(null).map(function (_, i) {
74
- return prevRefs[i] || /*#__PURE__*/(0, _react.createRef)();
75
- });
76
- });
77
- }, [children.length]);
78
-
79
- var handleKeyDown = function handleKeyDown(event) {
80
- if (isHeadingFocused) {
81
- if ([HOME, END, ARROW_UP, ARROW_DOWN].some(function (key) {
82
- return key === event.key;
83
- })) {
84
- event.preventDefault();
85
- }
86
-
87
- var focusIndex = refs.findIndex(function (ref) {
88
- return ref.current === document.activeElement;
89
- });
90
-
91
- if (event.key === HOME) {
92
- refs[0].current.focus();
93
- } else if (event.key === END) {
94
- refs[refs.length - 1].current.focus();
95
- } else if (event.key === ARROW_UP) {
96
- if (focusIndex === 0) {
97
- refs[refs.length - 1].current.focus();
98
- } else {
99
- refs[focusIndex - 1].current.focus();
100
- }
101
- } else if (event.key === ARROW_DOWN) {
102
- if (focusIndex === refs.length - 1) {
103
- refs[0].current.focus();
104
- } else {
105
- refs[focusIndex + 1].current.focus();
106
- }
107
- }
108
- }
109
- };
110
-
17
+ headingLevel = _ref.headingLevel,
18
+ className = _ref.className,
19
+ rest = _objectWithoutProperties(_ref, _excluded);
111
20
  return /*#__PURE__*/_react.default.createElement("div", _extends({
112
- // eslint-disable-line jsx-a11y/no-static-element-interactions
113
- onKeyDown: handleKeyDown,
114
- className: (0, _classnames.default)(className, 'ffe-accordion', {
115
- 'ffe-accordion--focus': isHeadingFocused
116
- })
21
+ className: (0, _classnames.default)(className, 'ffe-accordion')
117
22
  }, rest), _react.default.Children.map(children, function (child, index) {
118
23
  return /*#__PURE__*/_react.default.cloneElement(child, {
119
- headingLevel: headingLevel,
120
- ref: refs[index],
121
- onFocus: handleFocus,
122
- onBlur: handleBlur
24
+ headingLevel: headingLevel
123
25
  });
124
26
  }));
125
27
  };
126
-
127
28
  Accordion.propTypes = {
128
29
  /** Accordion items */
129
30
  children: _propTypes.node,
130
-
131
31
  /** The level of headings in the AccordionItems */
132
32
  headingLevel: (0, _propTypes.oneOf)([1, 2, 3, 4, 5, 6]).isRequired,
133
-
134
33
  /** Class assigned the container */
135
34
  className: _propTypes.string
136
35
  };
package/lib/AccordionItem.js CHANGED
@@ -1,72 +1,53 @@
1
1
  "use strict";
2
2
 
3
3
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _react = _interopRequireWildcard(require("react"));
11
-
12
9
  var _propTypes = require("prop-types");
13
-
14
10
  var _uuid = require("uuid");
15
-
16
11
  var _chevronIkon = _interopRequireDefault(require("@sb1/ffe-icons-react/lib/chevron-ikon"));
17
-
18
12
  var _ffeCollapseReact = _interopRequireDefault(require("@sb1/ffe-collapse-react"));
19
-
20
13
  var _classnames = _interopRequireDefault(require("classnames"));
21
-
14
+ var _ffeCoreReact = require("@sb1/ffe-core-react");
22
15
  var _excluded = ["children", "heading", "defaultOpen", "isOpen", "className", "onToggleOpen", "ariaLabel"],
23
- _excluded2 = ["headingLevel", "onFocus", "onBlur", "forwardedRef"];
24
-
16
+ _excluded2 = ["headingLevel", "forwardedRef"];
25
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
-
27
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
28
-
29
19
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
30
-
31
20
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
32
-
33
21
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
34
-
35
22
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
36
-
37
23
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
38
-
39
24
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
40
-
41
25
  function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
42
-
43
26
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
44
-
45
27
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
46
-
47
28
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
48
-
49
29
  var AccordionItem = function AccordionItem(_ref) {
50
30
  var children = _ref.children,
51
- heading = _ref.heading,
52
- defaultOpen = _ref.defaultOpen,
53
- isOpen = _ref.isOpen,
54
- className = _ref.className,
55
- _ref$onToggleOpen = _ref.onToggleOpen,
56
- onToggleOpen = _ref$onToggleOpen === void 0 ? Function.prototype : _ref$onToggleOpen,
57
- ariaLabel = _ref.ariaLabel,
58
- accordionProps = _objectWithoutProperties(_ref, _excluded);
59
-
31
+ heading = _ref.heading,
32
+ defaultOpen = _ref.defaultOpen,
33
+ isOpen = _ref.isOpen,
34
+ className = _ref.className,
35
+ _ref$onToggleOpen = _ref.onToggleOpen,
36
+ onToggleOpen = _ref$onToggleOpen === void 0 ? Function.prototype : _ref$onToggleOpen,
37
+ ariaLabel = _ref.ariaLabel,
38
+ accordionProps = _objectWithoutProperties(_ref, _excluded);
60
39
  var _useState = (0, _react.useState)(defaultOpen),
61
- _useState2 = _slicedToArray(_useState, 2),
62
- isExpanded = _useState2[0],
63
- setIsExpanded = _useState2[1];
64
-
40
+ _useState2 = _slicedToArray(_useState, 2),
41
+ isExpanded = _useState2[0],
42
+ setIsExpanded = _useState2[1];
65
43
  var _useState3 = (0, _react.useState)(false),
66
- _useState4 = _slicedToArray(_useState3, 2),
67
- isAnimating = _useState4[0],
68
- setIsAnimating = _useState4[1];
69
-
44
+ _useState4 = _slicedToArray(_useState3, 2),
45
+ isAnimating = _useState4[0],
46
+ setIsAnimating = _useState4[1];
47
+ var _useState5 = (0, _react.useState)(false),
48
+ _useState6 = _slicedToArray(_useState5, 2),
49
+ isFocused = _useState6[0],
50
+ setFocus = _useState6[1];
70
51
  var buttonId = (0, _react.useRef)((0, _uuid.v4)());
71
52
  var contentId = (0, _react.useRef)((0, _uuid.v4)());
72
53
  (0, _react.useEffect)(function () {
@@ -75,29 +56,25 @@ var AccordionItem = function AccordionItem(_ref) {
75
56
  setIsExpanded(isOpen);
76
57
  }
77
58
  }, [isOpen]);
78
-
79
59
  var handleOnClick = function handleOnClick() {
80
60
  onToggleOpen(!isExpanded);
81
-
82
61
  if (isOpen == null) {
83
62
  setIsAnimating(true);
84
63
  setIsExpanded(!isExpanded);
85
64
  }
86
65
  };
87
-
88
66
  var headingLevel = accordionProps.headingLevel,
89
- onFocus = accordionProps.onFocus,
90
- onBlur = accordionProps.onBlur,
91
- forwardedRef = accordionProps.forwardedRef,
92
- rest = _objectWithoutProperties(accordionProps, _excluded2);
93
-
67
+ forwardedRef = accordionProps.forwardedRef,
68
+ rest = _objectWithoutProperties(accordionProps, _excluded2);
94
69
  var collapseHidden = !isExpanded && !isAnimating;
95
70
  return /*#__PURE__*/_react.default.createElement("div", _extends({
96
71
  className: (0, _classnames.default)(className, 'ffe-accordion-item', {
97
- 'ffe-accordion-item--open': isExpanded
72
+ 'ffe-accordion-item--open': isExpanded,
73
+ 'ffe-accordion-item--focus': isFocused
98
74
  })
99
- }, rest), /*#__PURE__*/_react.default.createElement("h".concat(headingLevel), {
100
- className: 'ffe-h6'
75
+ }, rest), /*#__PURE__*/_react.default.createElement(_ffeCoreReact.Heading6, {
76
+ className: "ffe-accordion-item__heading",
77
+ "aria-level": headingLevel
101
78
  }, /*#__PURE__*/_react.default.createElement("button", {
102
79
  type: "button",
103
80
  id: buttonId.current,
@@ -105,17 +82,23 @@ var AccordionItem = function AccordionItem(_ref) {
105
82
  "aria-expanded": isExpanded ? 'true' : 'false',
106
83
  "aria-controls": contentId.current,
107
84
  "aria-label": ariaLabel,
108
- className: (0, _classnames.default)('ffe-accordion__heading-button', {
109
- 'ffe-accordion__heading-button--open': isExpanded
85
+ className: (0, _classnames.default)('ffe-accordion-item__heading-button', {
86
+ 'ffe-accordion-item__heading-button--open': isExpanded
110
87
  }),
111
88
  onClick: handleOnClick,
112
- onFocus: onFocus,
113
- onBlur: onBlur
89
+ onFocus: function onFocus() {
90
+ return setFocus(true);
91
+ },
92
+ onBlur: function onBlur() {
93
+ return setFocus(false);
94
+ }
114
95
  }, /*#__PURE__*/_react.default.createElement("span", {
115
- className: "ffe-accordion__heading-button-content"
116
- }, heading, /*#__PURE__*/_react.default.createElement(_chevronIkon.default, {
117
- className: "ffe-accordion__heading-icon"
118
- })))), /*#__PURE__*/_react.default.createElement(_ffeCollapseReact.default, {
96
+ className: "ffe-accordion-item__heading-button-content"
97
+ }, heading, /*#__PURE__*/_react.default.createElement("span", {
98
+ className: "ffe-accordion-item__heading-icon-wrapper"
99
+ }, /*#__PURE__*/_react.default.createElement(_chevronIkon.default, {
100
+ className: "ffe-accordion-item__heading-icon"
101
+ }))))), /*#__PURE__*/_react.default.createElement(_ffeCollapseReact.default, {
119
102
  isOpen: isExpanded,
120
103
  onRest: function onRest() {
121
104
  return setIsAnimating(false);
@@ -125,37 +108,28 @@ var AccordionItem = function AccordionItem(_ref) {
125
108
  hidden: collapseHidden,
126
109
  role: "region"
127
110
  }, !collapseHidden && /*#__PURE__*/_react.default.createElement("div", {
128
- className: "ffe-accordion-body"
111
+ className: "ffe-accordion-item__body"
129
112
  }, children)));
130
113
  };
131
-
132
114
  AccordionItem.propTypes = {
133
115
  /** The heading */
134
116
  heading: _propTypes.node.isRequired,
135
-
136
117
  /** The content to appear when expanded */
137
118
  children: _propTypes.node.isRequired,
138
-
139
119
  /** Should it be open by default */
140
120
  defaultOpen: _propTypes.bool,
141
-
142
121
  /** Is the item open or collapsed? Used for overriding default behaviour */
143
122
  isOpen: _propTypes.bool,
144
-
145
123
  /** Class assigned the container */
146
124
  className: _propTypes.string,
147
-
148
125
  /** Callback when the item is open/closed */
149
126
  onToggleOpen: _propTypes.func,
150
-
151
127
  /** aria-label for the button */
152
128
  ariaLabel: _propTypes.string
153
129
  };
154
-
155
130
  var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
156
131
  return /*#__PURE__*/_react.default.createElement(AccordionItem, _extends({}, props, {
157
132
  forwardedRef: ref
158
133
  }));
159
134
  });
160
-
161
135
  exports.default = _default;
package/lib/index.js CHANGED
@@ -15,9 +15,6 @@ Object.defineProperty(exports, "AccordionItem", {
15
15
  return _AccordionItem.default;
16
16
  }
17
17
  });
18
-
19
18
  var _Accordion = _interopRequireDefault(require("./Accordion"));
20
-
21
19
  var _AccordionItem = _interopRequireDefault(require("./AccordionItem"));
22
-
23
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
package/package.json CHANGED
@@ -1,46 +1,47 @@
1
1
  {
2
- "name": "@sb1/ffe-accordion-react",
3
- "version": "9.2.15",
4
- "license": "MIT",
5
- "author": "SpareBank 1",
6
- "files": [
7
- "lib",
8
- "es",
9
- "types"
10
- ],
11
- "main": "lib/index.js",
12
- "module": "es/index.js",
13
- "types": "types/index.d.ts",
14
- "sideEffects": false,
15
- "repository": {
16
- "type": "git",
17
- "url": "ssh://git@github.com:SpareBank1/designsystem.git"
18
- },
19
- "scripts": {
20
- "build": "ffe-buildtool babel",
21
- "watch": "ffe-buildtool babel-watch",
22
- "lint": "eslint src",
23
- "test": "ffe-buildtool jest",
24
- "test:watch": "ffe-buildtool jest --watch"
25
- },
26
- "dependencies": {
27
- "@sb1/ffe-collapse-react": "^1.1.14",
28
- "@sb1/ffe-icons-react": "^7.3.3",
29
- "classnames": "^2.3.1",
30
- "prop-types": "^15.7.2",
31
- "uuid": "^8.3.2"
32
- },
33
- "devDependencies": {
34
- "@sb1/ffe-buildtool": "^0.4.1",
35
- "react": "^16.9.0",
36
- "react-dom": "^16.9.0"
37
- },
38
- "peerDependencies": {
39
- "@sb1/ffe-accordion": "*",
40
- "react": ">=16.9.0"
41
- },
42
- "publishConfig": {
43
- "access": "public"
44
- },
45
- "gitHead": "20645a84ff31b513ef2568a7eefbed950f7e1c40"
2
+ "name": "@sb1/ffe-accordion-react",
3
+ "version": "9.3.1",
4
+ "license": "MIT",
5
+ "author": "SpareBank 1",
6
+ "files": [
7
+ "lib",
8
+ "es",
9
+ "types"
10
+ ],
11
+ "main": "lib/index.js",
12
+ "module": "es/index.js",
13
+ "types": "types/index.d.ts",
14
+ "sideEffects": false,
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "ssh://git@github.com:SpareBank1/designsystem.git"
18
+ },
19
+ "scripts": {
20
+ "build": "ffe-buildtool babel",
21
+ "watch": "ffe-buildtool babel-watch",
22
+ "lint": "eslint src",
23
+ "test": "ffe-buildtool jest",
24
+ "test:watch": "ffe-buildtool jest --watch"
25
+ },
26
+ "dependencies": {
27
+ "@sb1/ffe-collapse-react": "^1.1.14",
28
+ "@sb1/ffe-core-react": "^6.0.0",
29
+ "@sb1/ffe-icons-react": "^7.3.3",
30
+ "classnames": "^2.3.1",
31
+ "prop-types": "^15.7.2",
32
+ "uuid": "^8.3.2"
33
+ },
34
+ "devDependencies": {
35
+ "@sb1/ffe-buildtool": "^0.4.1",
36
+ "react": "^16.9.0",
37
+ "react-dom": "^16.9.0"
38
+ },
39
+ "peerDependencies": {
40
+ "@sb1/ffe-accordion": "*",
41
+ "react": ">=16.9.0"
42
+ },
43
+ "publishConfig": {
44
+ "access": "public"
45
+ },
46
+ "gitHead": "98d9ceeaa9bebcd35d5a730227aac61fd28937cf"
46
47
  }