@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-b4257f67

package/cjs/utils/Kitchensink/KitchensinkComponent.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KitchensinkComponent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _KitchenSinkCard = require("@digigov/react-core/KitchenSinkCard");
+
+var _KitchenSinkContent = require("@digigov/react-core/KitchenSinkContent");
+
+var _KitchenSinkContentInfo = require("@digigov/react-core/KitchenSinkContentInfo");
+
+var _KitchenSinkContentTags = require("@digigov/react-core/KitchenSinkContentTags");
+
+var _ServiceBadge = require("../../feedback/ServiceBadge");
+
+var _SectionBreak = _interopRequireDefault(require("../../layouts/SectionBreak"));
+
+var _Link = _interopRequireDefault(require("../../navigation/Link"));
+
+var _typography = require("../../typography");
+
+var _Heading = _interopRequireDefault(require("../../typography/Heading"));
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], null);
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], null);
+
+var KitchensinkComponent = function KitchensinkComponent(_ref) {
+  var _ref$tags = _ref.tags,
+      tags = _ref$tags === void 0 ? [] : _ref$tags,
+      title = _ref.title,
+      description = _ref.description,
+      link = _ref.link,
+      stories = _ref.stories,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'md' : _ref$width;
+  return /*#__PURE__*/_react["default"].createElement(_KitchenSinkContent.KitchenSinkContent, {
+    wide: width === 'lg'
+  }, /*#__PURE__*/_react["default"].createElement(_KitchenSinkContentInfo.KitchenSinkContentInfo, null, /*#__PURE__*/_react["default"].createElement(_KitchenSinkContentTags.KitchenSinkContentTags, null, tags && tags.map(function (tag, index) {
+    return /*#__PURE__*/_react["default"].createElement(_ServiceBadge.ServiceBadge, {
+      label: tag,
+      key: index
+    });
+  })), /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    size: "lg"
+  }, title), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, description), link && /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    href: link
+  }, "View on GOV.GR Design System"), _ref2), Object.keys(stories).filter(function (story) {
+    return story !== 'default';
+  }).map(function (story, index) {
+    var Component = stories[story];
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index
+    }, _ref3, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      size: "sm"
+    }, story), /*#__PURE__*/_react["default"].createElement(_KitchenSinkCard.KitchenSinkCard, null, /*#__PURE__*/_react["default"].createElement(Component, null)));
+  }));
+};
+
+exports.KitchensinkComponent = KitchensinkComponent;

package/cjs/utils/Kitchensink/KitchensinkDashboard.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KitchenSinkDashboard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _KitchenSinkAllComponents = require("@digigov/react-core/KitchenSinkAllComponents");
+
+var _Paragraph = _interopRequireDefault(require("@digigov/react-core/Paragraph"));
+
+var _KitchensinkByCategory = require("./KitchensinkByCategory");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Paragraph["default"], {
+  fontSize: 72,
+  fontWeight: "bold"
+}, "Components");
+
+var KitchenSinkDashboard = function KitchenSinkDashboard(_ref) {
+  var stories = _ref.stories;
+  var categoryOrder = Object.keys(stories).reduce(function (catStories, componentStoriesKey) {
+    var componentStories = stories[componentStoriesKey];
+
+    if (componentStories["default"].ignore) {
+      return catStories;
+    }
+
+    if (!componentStories["default"].component) {
+      throw new Error("no component was found in ".concat(componentStoriesKey));
+    }
+
+    var title = componentStories["default"].title.split('/')[1];
+
+    if (!title) {
+      throw new Error("no title was found for ".concat(componentStoriesKey));
+    }
+
+    var category = title;
+
+    if (catStories[category]) {
+      catStories[category].push(componentStories);
+    } else {
+      catStories[category] = [componentStories];
+    }
+
+    return catStories;
+  }, {});
+  return /*#__PURE__*/_react["default"].createElement("div", null, _ref2, /*#__PURE__*/_react["default"].createElement(_KitchenSinkAllComponents.KitchenSinkAllComponents, null, Object.keys(categoryOrder).sort(function (a, b) {
+    return a > b ? -1 : 1;
+  }).map(function (category, index) {
+    return /*#__PURE__*/_react["default"].createElement(_KitchensinkByCategory.KitchensinkByCategory, {
+      category: category,
+      stories: categoryOrder[category],
+      key: index
+    });
+  })));
+};
+
+exports.KitchenSinkDashboard = KitchenSinkDashboard;

package/cjs/utils/SvgIcon/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _SvgIcon = _interopRequireWildcard(require("@digigov/react-core/SvgIcon"));
+
+Object.keys(_SvgIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SvgIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SvgIcon[key];
+    }
+  });
+});
+
+var _reactIcons = require("@digigov/react-icons");
+
+Object.keys(_reactIcons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _reactIcons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _reactIcons[key];
+    }
+  });
+});
+
+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); }
+
+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; }
+
+var _default = _SvgIcon["default"];
+exports["default"] = _default;

package/cjs/utils/Typography/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function get() {
+    return _Typography["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _Typography = _interopRequireDefault(require("@digigov/react-core/Typography"));
+
+var _default = _Typography["default"];
+exports["default"] = _default;

package/cjs/utils/VisuallyHidden/VisuallyHidden.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _ = _interopRequireDefault(require("./"));
+
+var _Default = require("./__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov UI/utils/VisuallyHidden',
+  component: _["default"],
+  displayName: 'VisuallyHidden'
+};
+exports["default"] = _default;

package/cjs/utils/VisuallyHidden/__stories__/Default.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("../../../form/Button");
+
+var _Link = require("../../../navigation/Link");
+
+var _Paragraph = require("../../../typography/Paragraph");
+
+var _ = require("./..");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Paragraph.Paragraph, null, "\u039A\u03AC\u03C0\u03BF\u03B9\u03BF \u03C3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03BF \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BF\u03C0\u03C4\u03B9\u03BA\u03AC \u03BA\u03C1\u03C5\u03BC\u03BC\u03AD\u03BD\u03BF. \u0395\u03AF\u03BD\u03B1\u03B9 \u03C0\u03C1\u03BF\u03C3\u03B2\u03AC\u03C3\u03B9\u03BC\u03BF \u03BC\u03CC\u03BD\u03BF \u03B3\u03B9\u03B1 \u03C0\u03C1\u03BF\u03B3\u03C1\u03AC\u03BC\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC\u03B3\u03BD\u03C9\u03C3\u03B7\u03C2 \u03BF\u03B8\u03CC\u03BD\u03B7\u03C2 \u03BA\u03B1\u03B9 \u03BF\u03C0\u03BF\u03B9\u03B1\u03B4\u03AE\u03C0\u03BF\u03C4\u03B5 \u03B5\u03C1\u03B3\u03B1\u03BB\u03B5\u03AF\u03B1 \u03B1\u03BD\u03B1\u03BB\u03CD\u03BF\u03C5\u03BD \u03C4\u03BF DOM.");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, null, " \u0394\u03BF\u03BA\u03B9\u03BC\u03AE"), /*#__PURE__*/_react["default"].createElement(_Link.Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/_react["default"].createElement(_.VisuallyHidden, null, " \u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")));
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref, _ref2);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/cjs/utils/VisuallyHidden/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _VisuallyHidden = _interopRequireWildcard(require("@digigov/react-core/VisuallyHidden"));
+
+Object.keys(_VisuallyHidden).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _VisuallyHidden[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _VisuallyHidden[key];
+    }
+  });
+});
+
+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); }
+
+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; }
+
+var _default = _VisuallyHidden["default"];
+exports["default"] = _default;

package/cjs/utils/hooks/useDebounce.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDebounceCallback = exports.useDebounce = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useLatest = _interopRequireDefault(require("./useLatest"));
+
+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); }
+
+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; }
+
+var useDebounceCallback = function useDebounceCallback(callback) {
+  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+  var leading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var storedCallback = (0, _useLatest["default"])(callback);
+  var timeout = React.useRef();
+  var deps = [wait, leading, storedCallback]; // Cleans up pending timeouts when the deps change
+
+  React.useEffect(function () {
+    return function () {
+      timeout.current && clearTimeout(timeout.current);
+      timeout.current = void 0;
+    };
+  }, deps);
+  return React.useCallback(function () {
+    // eslint-disable-next-line prefer-rest-params
+    var args = arguments;
+    var current = timeout.current; // Calls on leading edge
+
+    if (current === void 0 && leading) {
+      timeout.current = setTimeout(function () {
+        timeout.current = void 0;
+      }, wait); // eslint-disable-next-line prefer-spread
+
+      return storedCallback.current.apply(null, args);
+    } // Clear the timeout every call and start waiting again
+
+
+    current && clearTimeout(current); // Waits for `wait` before invoking the callback
+
+    timeout.current = setTimeout(function () {
+      timeout.current = void 0;
+      storedCallback.current.apply(null, args);
+    }, wait);
+  }, deps);
+};
+
+exports.useDebounceCallback = useDebounceCallback;
+
+var useDebounce = function useDebounce(initialState, wait, leading) {
+  var state = React.useState(initialState);
+  return [state[0], useDebounceCallback(state[1], wait, leading)];
+};
+
+exports.useDebounce = useDebounce;

package/cjs/utils/hooks/useKeypress.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeypress = exports["default"] = void 0;
+
+var _react = require("react");
+
+var useKeypress = function useKeypress(key, callback) {
+  var keyCallback = (0, _react.useCallback)(function (e) {
+    if (e.key === key && callback) {
+      callback(e);
+    }
+  }, [key, callback]);
+  (0, _react.useEffect)(function () {
+    if (callback) {
+      document.addEventListener('keydown', keyCallback);
+    }
+
+    return function () {
+      if (callback) {
+        document.removeEventListener('keydown', keyCallback);
+      }
+    };
+  }, [keyCallback]);
+};
+
+exports.useKeypress = useKeypress;
+var _default = useKeypress;
+exports["default"] = _default;

package/cjs/utils/hooks/useLatest.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+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); }
+
+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; }
+
+// copied from https://github.com/jaredLunde/react-hook/blob/master/packages/latest/src/index.tsx
+var useLatest = function useLatest(current) {
+  var storedValue = React.useRef(current);
+  React.useEffect(function () {
+    storedValue.current = current;
+  });
+  return storedValue;
+};
+
+var _default = useLatest;
+exports["default"] = _default;

package/cjs/utils/hooks/useSearch.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.fullTextSearch = fullTextSearch;
+exports.normalizeGreek = normalizeGreek;
+exports.useSearch = useSearch;
+
+var _react = require("react");
+
+function normalizeGreek(text) {
+  text = text.replace(/Ά|Α|ά/g, 'α').replace(/Έ|Ε|έ/g, 'ε').replace(/Ή|Η|ή/g, 'η').replace(/Ί|Ϊ|Ι|ί|ΐ|ϊ/g, 'ι').replace(/Ό|Ο|ό/g, 'ο').replace(/Ύ|Ϋ|Υ|ύ|ΰ|ϋ/g, 'υ').replace(/Ώ|Ω|ώ/g, 'ω').replace(/Σ|ς/g, 'σ');
+  return text;
+}
+
+function fullTextSearch(data, search) {
+  if (!search) {
+    return true;
+  }
+
+  var q = normalizeGreek(search.normalize('NFC').replace(/[\u0300-\u036f]/g, '').toLowerCase());
+  var index = Object.keys(data).map(function (k) {
+    return data[k] ? data[k].toString().toLowerCase() : '';
+  }).join('');
+  return normalizeGreek(index.normalize('NFC').replace(/[\u0300-\u036f]/g, '')).includes(q);
+}
+
+function useSearch(data, query) {
+  if (!query) return data;
+  return (0, _react.useMemo)(function () {
+    return data.filter(function (t) {
+      return fullTextSearch(t, query);
+    });
+  }, [data, query]);
+}
+
+var _default = useSearch;
+exports["default"] = _default;

package/cjs/utils/hooks/useTogglableTab.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTogglableTab = useTogglableTab;
+
+var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+/* eslint-disable react-hooks/exhaustive-deps */
+function useTogglableTab(_ref) {
+  var toggleProperty = _ref.toggleProperty,
+      singleOpen = _ref.singleOpen,
+      onToggleProperty = _ref.onToggleProperty,
+      initial = _ref.initial,
+      firstOpen = _ref.firstOpen,
+      ariaNavigation = _ref.ariaNavigation,
+      toggleHook = _ref.toggleHook;
+
+  var _useState = (0, _react.useState)(initial || {}),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      opened = _useState2[0],
+      setOpened = _useState2[1];
+
+  var registered = (0, _react.useRef)({});
+  var sectionsOrder = (0, _react.useRef)([]);
+  var registerRef = (0, _react.useCallback)(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = el;
+    sectionsOrder.current.push(key);
+
+    if (firstOpen && sectionsOrder.current.length === 1) {
+      setOpened((0, _defineProperty2["default"])({}, key, true));
+    }
+  }, []);
+  var toggle = (0, _react.useCallback)(function (e) {
+    var key = e.currentTarget.getAttribute('aria-controls');
+
+    if (toggleHook) {
+      toggleHook(key);
+    }
+
+    e.preventDefault();
+
+    if (singleOpen) {
+      setOpened((0, _defineProperty2["default"])({}, key, true));
+    } else {
+      setOpened(function (prev) {
+        return (0, _extends4["default"])({}, prev, (0, _defineProperty2["default"])({}, key, !prev[key]));
+      });
+    }
+  }, []);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var key = e.target.getAttribute('aria-controls');
+    var currentIndex = sectionsOrder.current.findIndex(function (k) {
+      return k === key;
+    });
+    var nextKey = sectionsOrder.current[currentIndex + 1];
+    var previousKey = sectionsOrder.current[currentIndex - 1];
+
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        if (nextKey) {
+          registered.current[nextKey].focus();
+        }
+
+        break;
+
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        if (previousKey) {
+          registered.current[previousKey].focus();
+        }
+
+        break;
+
+      case ' ':
+      case 'Enter':
+        toggle(e);
+        break;
+    }
+  }, []);
+  var register = (0, _react.useCallback)(function (key) {
+    var _extends3;
+
+    var isOpen = !!opened[key];
+    return (0, _extends4["default"])((_extends3 = {
+      ref: registerRef
+    }, (0, _defineProperty2["default"])(_extends3, toggleProperty, isOpen), (0, _defineProperty2["default"])(_extends3, onToggleProperty, toggle), (0, _defineProperty2["default"])(_extends3, 'aria-controls', "".concat(key)), _extends3), ariaNavigation && {
+      onKeyDown: onKeyDown,
+      tabIndex: opened[key] ? 0 : -1
+    });
+  }, [opened]);
+  return (0, _react.useMemo)(function () {
+    return {
+      register: register,
+      registered: registered,
+      opened: opened,
+      toggle: toggle,
+      setOpened: setOpened
+    };
+  }, [opened]);
+}

package/cjs/utils/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Base = require("./Base");
+
+Object.keys(_Base).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Base[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Base[key];
+    }
+  });
+});
+
+var _SvgIcon = require("./SvgIcon");
+
+Object.keys(_SvgIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SvgIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SvgIcon[key];
+    }
+  });
+});
+
+var _VisuallyHidden = require("./VisuallyHidden");
+
+Object.keys(_VisuallyHidden).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _VisuallyHidden[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _VisuallyHidden[key];
+    }
+  });
+});