@k-int/stripes-kint-components 1.5.0 → 2.0.0

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/TypeDown/README.md

@@ -1 +0,0 @@
-DEPRECATED - DO NOT USE. You probably want Typedown

package/src/lib/TypeDown/TypeDown.js

@@ -1,226 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import get from 'lodash/get';
-
-import { EndOfList, IconButton, Popper } from '@folio/stripes/components';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { interactionStyles } from '@folio/stripes-components/lib/sharedStyles/interactionStyles.css';
-
-import SearchField from '../SearchField';
-import css from '../../../styles/TypeDown.css';
-
-import { useTypedown, useTypedownData } from '../hooks/typedownHooks';
-import selectorSafe from '../utils/selectorSafe';
-
-/* @deprecated
- * Replaced by Typedown and QueryTypedown.
- */
-const TypeDown = ({
-  input,
-  meta,
-  onChange,
-  path,
-  pathMutator,
-  renderFooter = null,
-  renderListItem = null,
-  uniqueIdentificationPath = 'id'
-}) => {
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn('TypeDown component is deprecated, you likely want either Typedown or QueryTypedown');
-    }
-  }, []);
-
-  const selectedUniqueId = get(input.value, uniqueIdentificationPath);
-
-  const [callPath, setCallPath] = useState(pathMutator(null, path));
-  const data = useTypedownData(callPath);
-
-  // Hook to set up all the essentials
-  const {
-    refs: {
-      listRef,
-      triggerRef,
-      overlayRef,
-      footerRef
-    },
-    handlers: {
-      handleNextFocus,
-      listKeyDownHandler,
-      searchFieldKeyDownHandler
-    },
-    variables: {
-      open,
-      portal,
-      resizeRef,
-      searchWidth
-    }
-  } = useTypedown(input.name);
-
-  const renderItem = useCallback((option) => (
-    <div
-      className={css.listItem}
-    >
-      {renderListItem ?
-        renderListItem(option) :
-        get(option, uniqueIdentificationPath)
-      }
-    </div>
-  ), [renderListItem, uniqueIdentificationPath]);
-
-  const handleChange = value => {
-    input.onChange(value);
-
-    if (typeof onChange === 'function') {
-      onChange(value);
-    }
-  };
-
-  const dropDown = useCallback(() => {
-    return (
-      <div
-        className={css.dropdownMenu}
-        id={`typedown-parent-${selectorSafe(input.name)}-menu`}
-        style={{ '--searchWidth': `${searchWidth}px` }}
-      >
-        <div
-          ref={listRef}
-          className={css.listContainer}
-          id="typedown-list"
-        >
-          {data?.length ? data?.map((d, index) => {
-            const isSelected = get(input.value, uniqueIdentificationPath) === get(d, uniqueIdentificationPath);
-            return (
-              <button
-                key={`typedown-button-[${index}]`}
-                className={classnames(
-                  interactionStyles,
-                  css.fullWidth,
-                  css.menuButton
-                )}
-                data-selected={isSelected}
-                id={`typedown-button-[${index}]`}
-                onClick={() => {
-                  handleChange(d);
-                  handleNextFocus();
-                }}
-                onKeyDown={listKeyDownHandler}
-                type="button"
-              >
-                {renderItem(d)}
-              </button>
-            );
-          }) :
-          // TODO test this
-          <EndOfList />
-          }
-        </div>
-        {renderFooter &&
-          <div
-            ref={footerRef}
-            className={css.footer}
-            id="typedown-footer"
-          >
-            {renderFooter()}
-          </div>
-        }
-      </div>
-    );
-  }, [
-    data,
-    footerRef,
-    handleNextFocus,
-    input,
-    listKeyDownHandler,
-    listRef,
-    renderFooter,
-    renderItem,
-    searchWidth,
-    uniqueIdentificationPath
-  ]);
-
-  const renderSearchField = () => {
-    return (
-      <div
-        ref={triggerRef}
-        id={`typedown-parent-${selectorSafe(input.name)}-searchField`}
-      >
-        <SearchField
-          // Pass meta through so correct styling gets applied to the TextField
-          id="typedown-searchField"
-          marginBottom0
-          meta={meta}
-          onChange={e => {
-            setCallPath(pathMutator(e.target.value, path));
-          }}
-          onKeyDown={searchFieldKeyDownHandler}
-        />
-      </div>
-    );
-  };
-
-  return (
-    <div
-      ref={resizeRef}
-    >
-      {renderSearchField()}
-      <Popper
-        key="typedown-menu-toggle"
-        anchorRef={triggerRef}
-        className={classnames(
-          css.dropdown,
-          css.fullWidth
-        )}
-        isOpen={open}
-        modifiers={{
-          flip: { boundariesElement: 'viewport', padding: 10 },
-          preventOverflow: { boundariesElement: 'viewport', padding: 10 }
-        }}
-        overlayProps={{
-          'ref': overlayRef,
-          'tabIndex': '-1',
-          'onClick': (e) => { e.stopPropagation(); }  // prevent propagation of click events
-        }}
-        overlayRef={overlayRef}
-        portal={portal}
-      >
-        {dropDown()}
-      </Popper>
-      {selectedUniqueId && !open &&
-        <div
-          className={classnames(
-            css.selected,
-            css.selectedDisplay
-          )}
-        >
-          <div
-            className={css.selectedItem}
-          >
-            {renderItem(input.value)}
-          </div>
-          <IconButton
-            className={css.clearItem}
-            icon="times-circle-solid"
-            onClick={() => handleChange()}
-          />
-        </div>
-      }
-    </div>
-  );
-};
-
-TypeDown.propTypes = {
-  input: PropTypes.object,
-  meta: PropTypes.object,
-  onChange: PropTypes.func,
-  path: PropTypes.string,
-  pathMutator: PropTypes.func,
-  renderFooter: PropTypes.func,
-  renderListItem: PropTypes.func,
-  uniqueIdentificationPath: PropTypes.string
-};
-
-export default TypeDown;

package/src/lib/TypeDown/index.js

@@ -1 +0,0 @@
-export { default } from './TypeDown';

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));
-}