carbon-react 106.6.9 → 107.0.0

package/lib/components/scrollable-list/scrollable-list-item.component.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
-
-const ScrollableListItem = _styledComponents.default.li`
-  ${({
-  isSelectable
-}) => isSelectable && (0, _styledComponents.css)`
-      cursor: pointer;
-    `}
-  ${({
-  isSelected
-}) => isSelected && (0, _styledComponents.css)`
-      background-color: var(--colorsUtilityMajor025);
-    `}
-  box-sizing: content-box;
-  padding: 5px 6px;
-  width: 100%;
-`;
-ScrollableListItem.propTypes = {
-  id: _propTypes.default.any,
-  isSelected: _propTypes.default.bool
-};
-ScrollableListItem.defaultProps = {
-  isSelectable: true // defaulted to true so it integrates with ScrollableList by default,
-
-};
-var _default = ScrollableListItem;
-exports.default = _default;

package/lib/components/scrollable-list/scrollable-list.component.d.ts

@@ -1,52 +0,0 @@
-export default ScrollableList;
-declare class ScrollableList extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        selectedItem: number;
-    };
-    blockOptionsHover: boolean;
-    scrollBox: React.RefObject<any>;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    componentDidUpdate(prevProps: any): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    updateScroll(item: any): void;
-    setScrollTop({ item, children, listHeight, itemHeight }: {
-        item: any;
-        children: any;
-        listHeight: any;
-        itemHeight: any;
-    }): any;
-    buildHeightReducer(acc: any, { offsetHeight }: {
-        offsetHeight: any;
-    }): any;
-    nextSelectable(direction: any, position: any): any;
-    isSelectable(node: any): any;
-    selectLastItem(): any;
-    selectFirstItem(): any;
-    renderChildren(children: any): any;
-    selectItem: (itemIndex: any) => void;
-    handleMouseMove: () => void;
-    handleMouseOver: (selectedItem: any) => void;
-    handleScroll: ({ target: { scrollTop, scrollHeight } }: {
-        target: {
-            scrollTop: any;
-            scrollHeight: any;
-        };
-    }) => void;
-    handleKeyDown: (e: any) => void;
-    render(): JSX.Element;
-}
-declare namespace ScrollableList {
-    namespace propTypes {
-        const alwaysHighlight: PropTypes.Requireable<boolean>;
-        const isLoopable: PropTypes.Requireable<boolean>;
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const keyNavigation: PropTypes.Requireable<boolean>;
-        const maxHeight: PropTypes.Requireable<string>;
-        const onLazyLoad: PropTypes.Requireable<(...args: any[]) => any>;
-        const onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import React from "react";
-import PropTypes from "prop-types";

package/lib/components/scrollable-list/scrollable-list.component.js

@@ -1,328 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
-
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
-
-var _asScrollableListItem = _interopRequireDefault(require("./as-scrollable-list-item.wrapper"));
-
-var _scrollableList = _interopRequireDefault(require("./scrollable-list.context"));
-
-var _scrollableList2 = _interopRequireDefault(require("./scrollable-list.style"));
-
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
-
-function _extends() { _extends = Object.assign || 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); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-let deprecatedWarnTriggered = false;
-
-let ScrollableList = /*#__PURE__*/function (_Component) {
-  _inherits(ScrollableList, _Component);
-
-  var _super = _createSuper(ScrollableList);
-
-  function ScrollableList(props) {
-    var _this;
-
-    _classCallCheck(this, ScrollableList);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      selectedItem: -1 // defaults to nothing being highlighted
-
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "blockOptionsHover", false);
-
-    _defineProperty(_assertThisInitialized(_this), "scrollBox", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "selectItem", itemIndex => {
-      const selectedItem = _this.props.children[itemIndex];
-      if (!_this.props.onSelect || !selectedItem) return;
-
-      _this.props.onSelect(selectedItem.props.id);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", () => {
-      _this.blockOptionsHover = false;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", selectedItem => {
-      if (!_this.blockOptionsHover) {
-        _this.setState({
-          selectedItem
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleScroll", ({
-      target: {
-        scrollTop,
-        scrollHeight
-      }
-    }) => {
-      if (!_this.props.onLazyLoad) return;
-      if (scrollHeight - scrollTop < 300) _this.props.onLazyLoad();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", e => {
-      _this.blockOptionsHover = true;
-      const {
-        selectedItem
-      } = _this.state;
-      let newPos = selectedItem;
-
-      if (_events.default.isUpKey(e)) {
-        e.preventDefault();
-        newPos = _this.nextSelectable("up", newPos);
-      } else if (_events.default.isDownKey(e)) {
-        e.preventDefault();
-        newPos = _this.nextSelectable("down", newPos);
-      } else if (_events.default.isEndKey(e)) {
-        e.preventDefault();
-        newPos = _this.selectLastItem();
-      } else if (_events.default.isHomeKey(e)) {
-        e.preventDefault();
-        newPos = _this.selectFirstItem();
-      } else if (_events.default.isEnterKey(e)) {
-        e.preventDefault();
-
-        _this.selectItem(selectedItem);
-
-        return;
-      } else if (_events.default.isTabKey(e)) {
-        const index = _this.state.selectedItem;
-        if (index > -1) _this.selectItem(index);
-        return;
-      } else {
-        return;
-      }
-
-      _this.updateScroll(newPos);
-
-      _this.setState({
-        selectedItem: newPos
-      });
-    });
-
-    if (!deprecatedWarnTriggered) {
-      deprecatedWarnTriggered = true; // eslint-disable-next-line max-len
-
-      _logger.default.deprecate("`Scrollable List` component is deprecated and will soon be removed.");
-    }
-
-    return _this;
-  }
-
-  _createClass(ScrollableList, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      // if selected item is beyond the number of children then reset it (eg. through filtering)
-      if (this.state.selectedItem + 1 > _react.default.Children.count(nextProps.children)) {
-        let selectedItem = -1;
-        if (nextProps.alwaysHighlight) selectedItem = this.nextSelectable("down", selectedItem);
-        this.setState({
-          selectedItem
-        });
-        this.scrollBox.current.scrollTop = 0;
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.keyNavigation && !this.props.keyNavigation) {
-        document.removeEventListener("keydown", this.handleKeyDown);
-      } else if (!prevProps.keyNavigation && this.props.keyNavigation) {
-        document.addEventListener("keydown", this.handleKeyDown);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.keyNavigation) {
-        document.addEventListener("keydown", this.handleKeyDown);
-      }
-
-      if (this.props.alwaysHighlight) {
-        const selectedItem = this.nextSelectable("down", -1);
-        this.setState({
-          selectedItem
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener("keydown", this.handleKeyDown);
-    }
-  }, {
-    key: "updateScroll",
-    value: function updateScroll(item) {
-      const {
-        current: list
-      } = this.scrollBox;
-      if (!list) return;
-      const {
-        offsetHeight: listHeight,
-        children
-      } = list;
-      if (!children[item]) return;
-      const {
-        offsetTop: itemTop,
-        offsetHeight: itemHeight
-      } = children[item];
-
-      if (itemTop + itemHeight > listHeight) {
-        // set the bottom of the scroll box to the bottom of the selected item
-        list.scrollTop = this.setScrollTop({
-          item,
-          children,
-          listHeight,
-          itemHeight
-        });
-      } else {
-        list.scrollTop = 0;
-      }
-    }
-  }, {
-    key: "setScrollTop",
-    value: function setScrollTop({
-      item,
-      children,
-      listHeight,
-      itemHeight
-    }) {
-      // total height of list up to selected item
-      const scrollPos = [...children].slice(0, item).reduce(this.buildHeightReducer, 0);
-      return scrollPos - listHeight + itemHeight;
-    }
-  }, {
-    key: "buildHeightReducer",
-    value: function buildHeightReducer(acc, {
-      offsetHeight
-    }) {
-      return acc + offsetHeight;
-    }
-  }, {
-    key: "nextSelectable",
-    value: function nextSelectable(direction, position) {
-      const {
-        isLoopable,
-        children
-      } = this.props;
-      if (!children) return null;
-      const limit = children.length;
-      if (!limit) return null;
-      const change = direction === "down" ? 1 : -1;
-      const nextPosition = position + change;
-
-      if (nextPosition <= -1) {
-        return isLoopable ? this.nextSelectable(direction, limit) : this.nextSelectable("down", -1);
-      }
-
-      if (nextPosition === limit) {
-        return isLoopable ? this.nextSelectable(direction, -1) : this.nextSelectable("up", limit);
-      }
-
-      const testNode = children[nextPosition];
-      return this.isSelectable(testNode) ? nextPosition : this.nextSelectable(direction, nextPosition);
-    }
-  }, {
-    key: "isSelectable",
-    value: function isSelectable(node) {
-      return node.props.isSelectable;
-    }
-  }, {
-    key: "selectLastItem",
-    value: function selectLastItem() {
-      const limit = this.props.children.length;
-      return this.nextSelectable("up", limit);
-    }
-  }, {
-    key: "selectFirstItem",
-    value: function selectFirstItem() {
-      return this.nextSelectable("down", -1);
-    }
-  }, {
-    key: "renderChildren",
-    value: function renderChildren(children) {
-      return _react.default.Children.map(children, (child, index) => {
-        if (!child.props.isSelectable) return child;
-        const isSelected = index === this.state.selectedItem;
-        return (0, _asScrollableListItem.default)(child, index, isSelected);
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      const {
-        children,
-        onLazyLoad,
-        ...props
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_scrollableList2.default, _extends({
-        ref: this.scrollBox,
-        onScroll: this.handleScroll,
-        onMouseMove: this.handleMouseMove
-      }, props, (0, _tags.default)("scrollable-list", props)), /*#__PURE__*/_react.default.createElement(_scrollableList.default.Provider, {
-        value: {
-          onMouseOver: this.handleMouseOver,
-          onClick: this.selectItem
-        }
-      }, this.renderChildren(children)));
-    }
-  }]);
-
-  return ScrollableList;
-}(_react.Component);
-
-ScrollableList.propTypes = {
-  alwaysHighlight: _propTypes.default.bool,
-  // ensures an item is always highlighted
-  isLoopable: _propTypes.default.bool,
-  children: _propTypes.default.node,
-  keyNavigation: _propTypes.default.bool,
-  maxHeight: _propTypes.default.string,
-  onLazyLoad: _propTypes.default.func,
-  onSelect: _propTypes.default.func
-};
-var _default = ScrollableList;
-exports.default = _default;

package/lib/components/scrollable-list/scrollable-list.context.d.ts

@@ -1,3 +0,0 @@
-declare var _default: React.Context<any>;
-export default _default;
-import React from "react";

package/lib/components/scrollable-list/scrollable-list.context.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = /*#__PURE__*/_react.default.createContext();
-
-exports.default = _default;

package/lib/components/scrollable-list/scrollable-list.style.d.ts

@@ -1,2 +0,0 @@
-export default ScrollableListContainer;
-declare const ScrollableListContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;

package/lib/components/scrollable-list/scrollable-list.style.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ScrollableListContainer = _styledComponents.default.ul`
-  background-color: white;
-  border: 1px solid rgb(20, 20, 20, 0.5);
-  box-sizing: border-box;
-  box-shadow: 0 5px 5px 0 rgba(0, 20, 29, 0.2),
-    0 10px 10px 0 rgba(0, 20, 29, 0.1);
-  list-style-type: none;
-  max-height: ${props => `${props.maxHeight}`};
-  margin: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding: 0;
-  width: 100%;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    background-color: #eee;
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #777777;
-    border-radius: 4px;
-  }
-`;
-ScrollableListContainer.defaultProps = {
-  maxHeight: "180px"
-};
-var _default = ScrollableListContainer;
-exports.default = _default;

package/lib/components/scrollable-list/test-utils.d.ts

@@ -1,2 +0,0 @@
-export default renderListItems;
-declare function renderListItems(opts: any): any[];

package/lib/components/scrollable-list/test-utils.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _testUtils = require("../../__spec_helper__/test-utils");
-
-var _scrollableListItem = _interopRequireDefault(require("./scrollable-list-item.component"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const listItemReducer = ({
-  nonSelectables = [],
-  customSelectables = []
-}) => {
-  // generate jsx for selectable list items, based on indexes in config
-  return (acc, item, index) => {
-    if (nonSelectables.includes(item)) return [...acc, /*#__PURE__*/_react.default.createElement("div", null)];
-    if (customSelectables.includes(item)) return [...acc, /*#__PURE__*/_react.default.createElement("div", {
-      isSelectable: true
-    })];
-    return [...acc, /*#__PURE__*/_react.default.createElement(_scrollableListItem.default, {
-      id: index
-    })];
-  };
-};
-
-const renderListItems = opts => {
-  return (0, _testUtils.makeArrayKeys)(opts.num).reduce(listItemReducer(opts), []);
-};
-
-var _default = renderListItems;
-exports.default = _default;