@k-int/stripes-kint-components 1.3.0 → 1.7.0

package/es/lib/Settings/utils/renderHelpText.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactIntl = require("react-intl");
-
-var _renderHelpText = _interopRequireDefault(require("../../../../styles/renderHelpText.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var renderHelpText = function renderHelpText(id) {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _renderHelpText["default"].help
-  }, /*#__PURE__*/_react["default"].createElement(_reactIntl.FormattedMessage, {
-    id: id,
-    values: {
-      b: function b(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("b", null, chunks);
-      },
-      i: function i(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("i", null, chunks);
-      },
-      em: function em(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("em", null, chunks);
-      },
-      strong: function strong(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("strong", null, chunks);
-      },
-      span: function span(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("span", null, chunks);
-      },
-      div: function div(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("div", null, chunks);
-      },
-      p: function p(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("p", null, chunks);
-      },
-      ul: function ul(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("ul", null, chunks);
-      },
-      ol: function ol(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("ol", null, chunks);
-      },
-      li: function li(chunks) {
-        return /*#__PURE__*/_react["default"].createElement("li", null, chunks);
-      }
-    }
-  }));
-};
-
-var _default = renderHelpText;
-exports["default"] = _default;

package/es/lib/Settings/utils/sortByLabel.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var sortByLabel = function sortByLabel(a, b) {
-  var _a$label$toLowerCase, _a$label, _a$id, _b$label$toLowerCase, _b$label, _b$id;
-
-  var al = (_a$label$toLowerCase = (_a$label = a.label) === null || _a$label === void 0 ? void 0 : _a$label.toLowerCase()) !== null && _a$label$toLowerCase !== void 0 ? _a$label$toLowerCase : (_a$id = a.id) === null || _a$id === void 0 ? void 0 : _a$id.toLowerCase();
-  var bl = (_b$label$toLowerCase = (_b$label = b.label) === null || _b$label === void 0 ? void 0 : _b$label.toLowerCase()) !== null && _b$label$toLowerCase !== void 0 ? _b$label$toLowerCase : (_b$id = b.id) === null || _b$id === void 0 ? void 0 : _b$id.toLowerCase();
-
-  if (al < bl) {
-    return -1;
-  }
-
-  if (al > bl) {
-    return 1;
-  }
-
-  return 0;
-};
-
-var _default = sortByLabel;
-exports["default"] = _default;

package/es/lib/Settings/utils/toCamelCase.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var toCamelCase = function toCamelCase(str) {
-  return (// First split string on any capital letters
-    str.split(/(?=[A-Z])/).join(' ') // Remove all non alpha-numeric chars, and replace _ with ' '
-    .replace(/[_]/gi, ' ').replace(/[^0-9a-zA-Z\s]/gi, '') // CamelCase the remains
-    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (ltr, idx) {
-      return idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase();
-    }).replace(/\s+/g, '')
-  );
-};
-
-var _default = toCamelCase;
-exports["default"] = _default;

package/es/lib/hooks/typedownHooks/useTypedownFooter.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = require("react");
-
-var _getFocusableElements = require("../../utils/getFocusableElements");
-
-var _eventCodes = require("../../constants/eventCodes");
-
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-var useTypedownFooter = function useTypedownFooter(searchField) {
-  var footerRef = (0, _react.useRef)();
-  var footer = document.getElementById('typedown-footer'); // Add an event listener to the footer, so that we can control tab behaviour between footer elements
-
-  (0, _react.useEffect)(function () {
-    if (footer) {
-      footer.addEventListener('keydown', function (e) {
-        // We want special behaviour on tab
-        if (e.code === _eventCodes.TAB) {
-          // Prevent the default behaviour
-          e.preventDefault();
-          var focusFunc = e.shiftKey ? _getFocusableElements.getPreviousFocusable : _getFocusableElements.getNextFocusable;
-          var elem = focusFunc(footerRef.current, true, true, false, true);
-
-          if (elem) {
-            // Focus on next focusable element
-            elem.focus();
-          } else if (e.shiftKey) {
-            // We are at the beginning of the list, refocus on search bar
-            searchField.focus();
-          } else {
-            // We are at the end of the list, move onto next focusable element in page
-            (0, _getFocusableElements.getNextFocusable)(searchField, false).focus();
-          }
-        }
-      });
-    }
-  }, [footer, searchField]);
-  return footerRef;
-};
-
-var _default = useTypedownFooter;
-exports["default"] = _default;

package/es/lib/hooks/typedownHooks/useTypedownList.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _getFocusableElements = require("../../utils/getFocusableElements");
-
-var _eventCodes = require("../../constants/eventCodes");
-
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-var useTypedownList = function useTypedownList(listRef, footerRef, searchField) {
-  return function (e) {
-    if (e.code === _eventCodes.DOWN_ARROW) {
-      var elem = (0, _getFocusableElements.getNextFocusable)(listRef.current, true, true);
-      elem.focus();
-    }
-
-    if (e.code === _eventCodes.UP_ARROW) {
-      var _elem = (0, _getFocusableElements.getPreviousFocusable)(listRef.current, true, true);
-
-      _elem.focus();
-    }
-
-    if (e.code === _eventCodes.TAB) {
-      e.preventDefault();
-
-      var _elem2;
-
-      if (!e.shiftKey && !footerRef.current) {
-        _elem2 = (0, _getFocusableElements.getNextFocusable)(searchField, false);
-      } else if (!e.shiftKey) {
-        _elem2 = (0, _getFocusableElements.getNextFocusable)(footerRef.current, true, true, true, true);
-      } else {
-        _elem2 = searchField;
-      }
-
-      _elem2.focus();
-    }
-  };
-};
-
-var _default = useTypedownList;
-exports["default"] = _default;

package/es/lib/hooks/typedownHooks/useTypedownSearchField.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _getFocusableElements = require("../../utils/getFocusableElements");
-
-var _eventCodes = require("../../constants/eventCodes");
-
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-var useTypedownSearchField = function useTypedownSearchField(listRef, footerRef, searchField) {
-  return function (e) {
-    if (e.code === _eventCodes.UP_ARROW) {
-      var elem = (0, _getFocusableElements.getLastFocusable)(listRef.current, true, true);
-
-      if (elem) {
-        elem.focus();
-      }
-    }
-
-    if (e.code === _eventCodes.DOWN_ARROW) {
-      var _elem = (0, _getFocusableElements.getFirstFocusable)(listRef.current, true, true);
-
-      if (_elem) {
-        _elem.focus();
-      }
-    } // Tab key (But not while shifting)
-
-
-    if (e.code === _eventCodes.TAB && !e.shiftKey) {
-      e.preventDefault(); // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
-
-      var _elem2 = (0, _getFocusableElements.getNextFocusable)(footerRef.current, true, true, true, true);
-
-      if (_elem2) {
-        _elem2.focus();
-      } else {
-        (0, _getFocusableElements.getNextFocusable)(searchField, false).focus();
-      }
-    }
-  };
-};
-
-var _default = useTypedownSearchField;
-exports["default"] = _default;

package/es/lib/utils/getFocusableElements.js

@@ -1,132 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getFirstFocusable = getFirstFocusable;
-exports.getLastFocusable = getLastFocusable;
-exports.getNextFocusable = getNextFocusable;
-exports.getPreviousFocusable = getPreviousFocusable;
-
-var _contains = _interopRequireDefault(require("dom-helpers/query/contains"));
-
-var _matches = _interopRequireDefault(require("dom-helpers/query/matches"));
-
-var _first = _interopRequireDefault(require("lodash/first"));
-
-var _last = _interopRequireDefault(require("lodash/last"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-// THIS FILE IS ADAPTED FROM https://github.com/folio-org/stripes-components/blob/master/util/getFocusableElements.js
-// With the option included to return null if run out of options
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-function getVisibleFocusableElements() {
-  var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-  var includeContained = arguments.length > 1 ? arguments[1] : undefined;
-  var currentElement = arguments.length > 2 ? arguments[2] : undefined;
-
-  if (container.querySelectorAll) {
-    // eslint-disable-next-line max-len
-    var focusableSelector = 'a:not([disabled]), button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"]), [tabIndex="-1"]:not([disabled]):focus';
-    return Array.from(container.querySelectorAll(focusableSelector)).filter(function (element) {
-      if (!includeContained) {
-        if (element === currentElement) {
-          return true;
-        }
-
-        if (currentElement && (0, _contains["default"])(currentElement, element)) {
-          return false;
-        }
-      }
-
-      if ((0, _matches["default"])(element, '[data-focus-exclude]')) {
-        return false;
-      } // check for visibility while always include the current activeElement
-
-
-      return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement;
-    });
-  }
-
-  return [];
-}
-
-function getNextorPrevious(collection, current, loop, next) {
-  var nullOnExit = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var index = collection.indexOf(current);
-
-  if (index === -1) {
-    index = collection.indexOf(document.activeElement);
-  }
-
-  var nextElement = collection[index + 1];
-  var previousElement = collection[index - 1]; // First determine if travelling forwards or backwards through the list
-
-  if (next) {
-    // If looping then loop to beginning if nextElement is null
-    if (loop) {
-      return nextElement || collection[0];
-    } // If nullOnExit then return null if nextElement is null
-
-
-    if (nullOnExit) {
-      return nextElement;
-    } // Else return end of the list if nextElement is null
-
-
-    return collection[index + 1] || collection[collection.length - 1];
-  } else {
-    // If looping then loop to end if previousElement is null
-    if (loop) {
-      return previousElement || collection[collection.length - 1];
-    } // If nullOnExit then return null if previousElement is null
-
-
-    if (nullOnExit) {
-      return previousElement;
-    } // Else return beginning of the list if previousElement is null
-
-
-    return collection[index - 1] || collection[0];
-  }
-}
-
-function getFocusableElement(next, currentElement) {
-  var includeContained = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  var onlyContained = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var loop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  var nullOnExit = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var container = includeContained && onlyContained ? currentElement : document;
-  var focusable = getVisibleFocusableElements(container, includeContained, currentElement);
-
-  if (focusable.length > 0) {
-    return getNextorPrevious(focusable, currentElement, loop, next, nullOnExit);
-  }
-
-  return null;
-}
-
-function getNextFocusable() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  return getFocusableElement.apply(void 0, [true].concat(args));
-}
-
-function getPreviousFocusable() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
-
-  return getFocusableElement.apply(void 0, [false].concat(args));
-}
-
-function getLastFocusable(container) {
-  return (0, _last["default"])(getVisibleFocusableElements(container));
-}
-
-function getFirstFocusable(container) {
-  return (0, _first["default"])(getVisibleFocusableElements(container));
-}

package/src/lib/Settings/index.js

@@ -1,8 +0,0 @@
-export { default as EditableSettingsList } from './EditableSettingsList';
-export { default as EditableSettingsListFieldArray } from './EditableSettingsListFieldArray';
-export { default as SettingField } from './SettingField';
-export { default as SettingPagePane } from './SettingPagePane';
-export { default as SettingPage } from './SettingPage';
-export { default as RefdataButtons } from './RefdataButtons';
-export { default as useSettings } from './useSettings';
-export { default as SettingsContext } from './SettingsContext';

package/src/lib/Settings/utils/index.js

@@ -1,3 +0,0 @@
-export { default as renderHelpText } from './renderHelpText';
-export { default as toCamelCase } from './toCamelCase';
-export { default as sortByLabel } from './sortByLabel';

package/src/lib/hooks/typedownHooks/useTypedownFooter.js

@@ -1,43 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-import {
-  getNextFocusable,
-  getPreviousFocusable,
-} from '../../utils/getFocusableElements';
-import { TAB } from '../../constants/eventCodes';
-
-const useTypedownFooter = (searchField) => {
-  const footerRef = useRef();
-
-  const footer = document.getElementById('typedown-footer');
-  // Add an event listener to the footer, so that we can control tab behaviour between footer elements
-  useEffect(() => {
-    if (footer) {
-      footer.addEventListener('keydown', e => {
-        // We want special behaviour on tab
-        if (e.code === TAB) {
-          // Prevent the default behaviour
-          e.preventDefault();
-          const focusFunc = e.shiftKey ? getPreviousFocusable : getNextFocusable;
-          const elem = focusFunc(footerRef.current, true, true, false, true);
-
-          if (elem) {
-            // Focus on next focusable element
-            elem.focus();
-          } else if (e.shiftKey) {
-            // We are at the beginning of the list, refocus on search bar
-            searchField.focus();
-          } else {
-            // We are at the end of the list, move onto next focusable element in page
-            getNextFocusable(searchField, false).focus();
-          }
-        }
-      });
-    }
-  }, [footer, searchField]);
-
-  return footerRef;
-};
-
-export default useTypedownFooter;

package/src/lib/hooks/typedownHooks/useTypedownList.js

@@ -1,36 +0,0 @@
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-import {
-  getNextFocusable,
-  getPreviousFocusable,
-} from '../../utils/getFocusableElements';
-
-import { UP_ARROW, DOWN_ARROW, TAB } from '../../constants/eventCodes';
-
-const useTypedownList = (listRef, footerRef, searchField) => {
-  return e => {
-    if (e.code === DOWN_ARROW) {
-      const elem = getNextFocusable(listRef.current, true, true);
-      elem.focus();
-    }
-
-    if (e.code === UP_ARROW) {
-      const elem = getPreviousFocusable(listRef.current, true, true);
-      elem.focus();
-    }
-
-    if (e.code === TAB) {
-      e.preventDefault();
-      let elem;
-      if (!e.shiftKey && !footerRef.current) {
-        elem = getNextFocusable(searchField, false);
-      } else if (!e.shiftKey) {
-        elem = getNextFocusable(footerRef.current, true, true, true, true);
-      } else {
-        elem = searchField;
-      }
-      elem.focus();
-    }
-  };
-};
-
-export default useTypedownList;

package/src/lib/hooks/typedownHooks/useTypedownSearchField.js

@@ -1,39 +0,0 @@
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-import {
-  getNextFocusable,
-  getFirstFocusable,
-  getLastFocusable
-} from '../../utils/getFocusableElements';
-import { UP_ARROW, DOWN_ARROW, TAB } from '../../constants/eventCodes';
-
-const useTypedownSearchField = (listRef, footerRef, searchField) => {
-  return e => {
-    if (e.code === UP_ARROW) {
-      const elem = getLastFocusable(listRef.current, true, true);
-      if (elem) {
-        elem.focus();
-      }
-    }
-
-    if (e.code === DOWN_ARROW) {
-      const elem = getFirstFocusable(listRef.current, true, true);
-      if (elem) {
-        elem.focus();
-      }
-    }
-
-    // Tab key (But not while shifting)
-    if (e.code === TAB && !e.shiftKey) {
-      e.preventDefault();
-      // If we have focusable elements in the footer, then focus on them, else unfocus searchbar
-      const elem = getNextFocusable(footerRef.current, true, true, true, true);
-      if (elem) {
-        elem.focus();
-      } else {
-        getNextFocusable(searchField, false).focus();
-      }
-    }
-  };
-};
-
-export default useTypedownSearchField;

package/src/lib/utils/getFocusableElements.js

@@ -1,99 +0,0 @@
-// THIS FILE IS ADAPTED FROM https://github.com/folio-org/stripes-components/blob/master/util/getFocusableElements.js
-// With the option included to return null if run out of options
-// TODO swap to stripes-components export once available (Will need <= peer dep bump)
-
-import contains from 'dom-helpers/query/contains';
-import matches from 'dom-helpers/query/matches';
-import first from 'lodash/first';
-import last from 'lodash/last';
-
-function getVisibleFocusableElements(container = document, includeContained, currentElement) {
-  if (container.querySelectorAll) {
-    // eslint-disable-next-line max-len
-    const focusableSelector = 'a:not([disabled]), button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"]), [tabIndex="-1"]:not([disabled]):focus';
-    return Array.from(container.querySelectorAll(focusableSelector))
-      .filter((element) => {
-        if (!includeContained) {
-          if (element === currentElement) {
-            return true;
-          }
-          if (currentElement && contains(currentElement, element)) {
-            return false;
-          }
-        }
-
-        if (matches(element, '[data-focus-exclude]')) {
-          return false;
-        }
-
-        // check for visibility while always include the current activeElement
-        return element.offsetWidth > 0 ||
-        element.offsetHeight > 0 ||
-        element === document.activeElement;
-      });
-  }
-  return [];
-}
-
-function getNextorPrevious(collection, current, loop, next, nullOnExit = false) {
-  let index = collection.indexOf(current);
-  if (index === -1) {
-    index = collection.indexOf(document.activeElement);
-  }
-  const nextElement = collection[index + 1];
-  const previousElement = collection[index - 1];
-
-  // First determine if travelling forwards or backwards through the list
-  if (next) {
-    // If looping then loop to beginning if nextElement is null
-    if (loop) {
-      return nextElement || collection[0];
-    }
-
-    // If nullOnExit then return null if nextElement is null
-    if (nullOnExit) {
-      return nextElement;
-    }
-
-    // Else return end of the list if nextElement is null
-    return collection[index + 1] || collection[collection.length - 1];
-  } else {
-    // If looping then loop to end if previousElement is null
-    if (loop) {
-      return previousElement || collection[collection.length - 1];
-    }
-
-    // If nullOnExit then return null if previousElement is null
-    if (nullOnExit) {
-      return previousElement;
-    }
-
-    // Else return beginning of the list if previousElement is null
-    return collection[index - 1] || collection[0];
-  }
-}
-
-function getFocusableElement(next, currentElement, includeContained = true, onlyContained = false, loop = true, nullOnExit = false) {
-  const container = includeContained && onlyContained ? currentElement : document;
-  const focusable = getVisibleFocusableElements(container, includeContained, currentElement);
-  if (focusable.length > 0) {
-    return getNextorPrevious(focusable, currentElement, loop, next, nullOnExit);
-  }
-  return null;
-}
-
-export function getNextFocusable(...args) {
-  return getFocusableElement(true, ...args);
-}
-
-export function getPreviousFocusable(...args) {
-  return getFocusableElement(false, ...args);
-}
-
-export function getLastFocusable(container) {
-  return last(getVisibleFocusableElements(container));
-}
-
-export function getFirstFocusable(container) {
-  return first(getVisibleFocusableElements(container));
-}