@uncinc/uncinc-react-kitchen-sink 2.16.8 → 2.16.9

package/dist/components/SkipNav/index.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import './style.scss';
 export type SkipNavProps = {
     className?: string;
     linkClassName?: string;
     skipToSearch?: boolean;
     mainContentId?: string;
-    searchId?: string;
     skipToContentText?: string;
     skipToSearchText?: string;
     customLinks?: {
         href: string;
         text: string;
     }[];
+    searchRef?: RefObject<HTMLInputElement>;
 };
 declare const SkipNav: React.FC<SkipNavProps>;
 export default SkipNav;

package/dist/components/SkipNav/index.js

@@ -6,32 +6,41 @@ var SkipNav = function SkipNav(_ref) {
   var className = _ref.className,
     linkClassName = _ref.linkClassName,
     _ref$skipToSearch = _ref.skipToSearch,
-    skipToSearch = _ref$skipToSearch === void 0 ? false : _ref$skipToSearch,
+    skipToSearch = _ref$skipToSearch === void 0 ? true : _ref$skipToSearch,
     _ref$mainContentId = _ref.mainContentId,
     mainContentId = _ref$mainContentId === void 0 ? 'main-content' : _ref$mainContentId,
-    _ref$searchId = _ref.searchId,
-    searchId = _ref$searchId === void 0 ? 'search' : _ref$searchId,
     skipToContentText = _ref.skipToContentText,
     skipToSearchText = _ref.skipToSearchText,
     _ref$customLinks = _ref.customLinks,
-    customLinks = _ref$customLinks === void 0 ? [] : _ref$customLinks;
+    customLinks = _ref$customLinks === void 0 ? [] : _ref$customLinks,
+    searchRef = _ref.searchRef;
   var classes = c('SkipNav', className);
   var linkClasses = c('focusable skip-link', linkClassName);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var defaultContentText = skipToContentText || t('atoms.skip_nav.skipto_content');
-  var defaultSearchText = skipToSearchText || t('atoms.skip_nav.skipto_search');
+  var defaultContentText = skipToContentText || t('atoms.skip_nav.skip_to_content');
+  var defaultSearchText = skipToSearchText || t('atoms.skip_nav.skip_to_search');
+  var main = document.getElementById(mainContentId);
   var links = useMemo(function () {
     var generatedLinks = [];
-    generatedLinks.push( /*#__PURE__*/React.createElement("a", {
-      key: "skip-to".concat(mainContentId),
-      href: "#".concat(mainContentId),
-      className: linkClasses
-    }, defaultContentText));
-    if (skipToSearch) {
-      generatedLinks.push( /*#__PURE__*/React.createElement("a", {
+    if (main) {
+      generatedLinks.push( /*#__PURE__*/React.createElement("button", {
+        onClick: function onClick() {
+          return main.focus();
+        },
+        type: "button",
+        key: "skip-to".concat(mainContentId),
+        className: linkClasses
+      }, defaultContentText));
+    }
+    if (skipToSearch && searchRef && 'current' in searchRef && searchRef.current) {
+      generatedLinks.push( /*#__PURE__*/React.createElement("button", {
+        onClick: function onClick() {
+          var _searchRef$current;
+          return (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus();
+        },
+        type: "button",
         key: "skip-to-search",
-        href: "#".concat(searchId),
         className: linkClasses
       }, defaultSearchText));
     }
@@ -46,7 +55,7 @@ var SkipNav = function SkipNav(_ref) {
       });
     }
     return generatedLinks;
-  }, [mainContentId, skipToSearch, searchId, defaultContentText, defaultSearchText, customLinks, linkClasses]);
+  }, [mainContentId, main, skipToSearch, searchRef, defaultContentText, defaultSearchText, customLinks, linkClasses]);
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, links);

package/dist/config/i18next/locales/nl.json

@@ -66,8 +66,8 @@
       "delete": "Verwijder tag"
     },
     "skip_nav": {
-      "skipto_content": "Overslaan en naar de inhoud gaan",
-      "skipto_search": "Naar zoekfunctie"
+      "skip_to_content": "Overslaan en naar de inhoud gaan",
+      "skip_to_search": "Naar zoekfunctie"
     }
   },
   "organisms": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.16.8",
+  "version": "2.16.9",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",