@instructure/ui-tree-browser 11.6.0 → 11.6.1-snapshot-129

package/lib/TreeBrowser/v2/TreeCollection/index.js

@@ -0,0 +1,372 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TreeCollection = void 0;
+var _react = require("react");
+var _emotion = require("@instructure/emotion");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _TreeButton = require("../TreeButton");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _react2 = require("@emotion/react");
+var _dec, _class, _TreeCollection;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+parent: TreeBrowser
+id: TreeBrowser.Collection
+---
+**/
+let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, 'TreeBrowserTreeCollection'), _dec(_class = (_TreeCollection = class TreeCollection extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.handleFocus = (e, item) => {
+      e.stopPropagation();
+      this.setState({
+        focused: `${item.type}_${item.id}`
+      });
+    };
+    this.handleBlur = (e, _item) => {
+      e.stopPropagation();
+      this.setState({
+        focused: ''
+      });
+    };
+    this.handleCollectionClick = e => {
+      const _this$props = this.props,
+        id = _this$props.id,
+        onCollectionClick = _this$props.onCollectionClick,
+        expanded = _this$props.expanded;
+      const collection = {
+        id,
+        expanded: !expanded,
+        type: 'collection'
+      };
+      if (onCollectionClick && typeof onCollectionClick === 'function') {
+        onCollectionClick(e, collection);
+      }
+    };
+    this.handleCollectionKeyDown = e => {
+      const _this$props2 = this.props,
+        id = _this$props2.id,
+        onKeyDown = _this$props2.onKeyDown,
+        expanded = _this$props2.expanded;
+      const collection = {
+        id,
+        expanded: !expanded,
+        type: 'collection'
+      };
+      if (onKeyDown && typeof onKeyDown === 'function') {
+        onKeyDown(e, collection);
+      }
+    };
+    this.state = {
+      focused: ''
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props3, _this$context;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, {
+      animation: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.animation
+    });
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props4, _this$context2;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, {
+      animation: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.animation
+    });
+  }
+  get itemsLevel() {
+    const _this$props5 = this.props,
+      level = _this$props5.level,
+      isCollectionFlattened = _this$props5.isCollectionFlattened;
+    return isCollectionFlattened ? level : level + 1;
+  }
+  get collectionsCount() {
+    const collections = this.props.collections;
+    return collections && collections.length > 0 ? collections.length : 0;
+  }
+  get itemsCount() {
+    const items = this.props.items;
+    return items && items.length > 0 ? items.length : 0;
+  }
+  get childCount() {
+    return this.collectionsCount + this.itemsCount + (this.props.renderBeforeItems ? 1 : 0) + (this.props.renderAfterItems ? 1 : 0);
+  }
+  sortChildren() {
+    const _this$props6 = this.props,
+      collections = _this$props6.collections,
+      items = _this$props6.items,
+      compareFunc = _this$props6.compareFunc;
+    if (!compareFunc) return [];
+    const collections_ = collections ? collections.map(collection => {
+      return {
+        ...collection,
+        type: 'collection'
+      };
+    }) : [];
+    const items_ = items ? items.map(item => {
+      return {
+        ...item,
+        type: 'item'
+      };
+    }) : [];
+    const renderQueue = collections_.concat(items_);
+    renderQueue.sort(compareFunc);
+    return renderQueue;
+  }
+  renderChildren() {
+    const _this$props7 = this.props,
+      collections = _this$props7.collections,
+      items = _this$props7.items,
+      id = _this$props7.id,
+      renderBeforeItems = _this$props7.renderBeforeItems,
+      renderAfterItems = _this$props7.renderAfterItems,
+      compareFunc = _this$props7.compareFunc;
+    let position = 1;
+    const sortedChildren = this.sortChildren();
+    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [renderBeforeItems && this.renderCollectionChildren(id, renderBeforeItems, position++, 'before'), !compareFunc && collections.map(collection => {
+        return this.renderCollectionNode(collection, position++);
+      }), !compareFunc && items.map(item => {
+        return this.renderItemNode(item, position++);
+      }), compareFunc && sortedChildren.map(child => {
+        if (child.type === 'collection') {
+          return this.renderCollectionNode(child, position++);
+        } else {
+          return this.renderItemNode(child, position++);
+        }
+      }), renderAfterItems && this.renderCollectionChildren(id, renderAfterItems, position++, 'after')]
+    });
+  }
+  renderCollectionChildren(collectionId, child, position, keyword) {
+    const _this$props8 = this.props,
+      selection = _this$props8.selection,
+      onKeyDown = _this$props8.onKeyDown,
+      getItemProps = _this$props8.getItemProps,
+      styles = _this$props8.styles;
+    const key = `${collectionId}_${keyword}`;
+    const ariaSelected = {};
+    if (selection) {
+      ariaSelected['aria-selected'] = selection === `child_${key}`;
+    }
+    const itemHash = {
+      id: key,
+      type: 'child'
+    };
+    const itemProps = getItemProps({
+      key: key,
+      selected: selection === `child_${key}`,
+      focused: this.state.focused === `child_${key}`,
+      level: this.itemsLevel,
+      size: this.props.size,
+      variant: this.props.variant
+    });
+    return (0, _jsxRuntime.jsx)("li", {
+      id: key
+      /* eslint-disable-next-line jsx-a11y/role-has-required-aria-props */,
+      role: "treeitem",
+      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      tabIndex: -1,
+      "aria-posinset": position,
+      "aria-setsize": this.childCount,
+      "aria-level": this.itemsLevel,
+      ...ariaSelected,
+      onClick: e => {
+        if (typeof child.props.onClick === 'function') {
+          child.props.onClick(e);
+        } else {
+          e.stopPropagation();
+        }
+      },
+      onFocus: e => this.handleFocus(e, itemHash),
+      onKeyDown: e => {
+        if (typeof child.props.onKeyDown === 'function') {
+          child.props.onKeyDown(e);
+        } else {
+          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash);
+        }
+      },
+      onBlur: e => this.handleBlur(e, itemHash),
+      children: (0, _safeCloneElement.safeCloneElement)(child, itemProps)
+    }, key);
+  }
+  renderCollectionNode(collection, position) {
+    return (0, _react2.createElement)(TreeCollection, {
+      ...this.props,
+      key: `c${position}`,
+      id: collection.id,
+      name: collection.name,
+      descriptor: collection.descriptor,
+      expanded: collection.expanded,
+      items: collection.items,
+      collections: collection.collections,
+      numChildren: this.childCount,
+      level: this.itemsLevel,
+      containerRef: collection.containerRef,
+      position: position,
+      renderBeforeItems: collection.renderBeforeItems,
+      renderAfterItems: collection.renderAfterItems,
+      isCollectionFlattened: false // only the root needs to be flattened
+      ,
+      compareFunc: collection.compareFunc
+    });
+  }
+  renderItemNode(item, position) {
+    const _this$props9 = this.props,
+      selection = _this$props9.selection,
+      onItemClick = _this$props9.onItemClick,
+      onKeyDown = _this$props9.onKeyDown,
+      getItemProps = _this$props9.getItemProps,
+      styles = _this$props9.styles;
+    const ariaSelected = {};
+    if (selection) {
+      ariaSelected['aria-selected'] = selection === `item_${item.id}`;
+    }
+    const itemHash = {
+      id: item.id,
+      type: 'item'
+    };
+    const itemProps = getItemProps({
+      ...this.getCommonButtonProps(),
+      id: item.id,
+      name: item.name,
+      descriptor: item.descriptor,
+      thumbnail: item.thumbnail,
+      selected: selection === `item_${item.id}`,
+      focused: this.state.focused === `item_${item.id}`,
+      type: 'item'
+    });
+    return (0, _jsxRuntime.jsx)("li", {
+      tabIndex: -1
+      /* eslint-disable-next-line jsx-a11y/role-has-required-aria-props */,
+      role: "treeitem",
+      "aria-label": item.name,
+      css: styles === null || styles === void 0 ? void 0 : styles.item,
+      "aria-level": this.itemsLevel,
+      "aria-posinset": position,
+      "aria-setsize": this.childCount,
+      onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(e, itemHash),
+      onKeyDown: e => onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e, itemHash),
+      onFocus: e => this.handleFocus(e, itemHash),
+      onBlur: e => this.handleBlur(e, itemHash),
+      ...ariaSelected,
+      children: (0, _jsxRuntime.jsx)(_TreeButton.TreeButton, {
+        ...itemProps
+      })
+    }, `i${position}`);
+  }
+  getCommonButtonProps() {
+    return {
+      id: this.props.id,
+      name: this.props.name,
+      descriptor: this.props.descriptor,
+      size: this.props.size,
+      variant: this.props.variant,
+      itemIcon: this.props.itemIcon,
+      level: this.itemsLevel,
+      renderContent: this.props.renderContent
+    };
+  }
+  render() {
+    const _this$props0 = this.props,
+      id = _this$props0.id,
+      name = _this$props0.name,
+      expanded = _this$props0.expanded,
+      collectionIcon = _this$props0.collectionIcon,
+      collectionIconExpanded = _this$props0.collectionIconExpanded,
+      isCollectionFlattened = _this$props0.isCollectionFlattened,
+      getCollectionProps = _this$props0.getCollectionProps,
+      level = _this$props0.level,
+      position = _this$props0.position,
+      styles = _this$props0.styles;
+    const collectionProps = getCollectionProps({
+      ...this.getCommonButtonProps(),
+      expanded: expanded,
+      collectionIcon: collectionIcon,
+      collectionIconExpanded: collectionIconExpanded,
+      type: 'collection',
+      containerRef: this.props.containerRef,
+      selected: this.props.selection === `collection_${id}`,
+      focused: this.state.focused === `collection_${id}`,
+      level
+    });
+    const ariaSelected = {
+      'aria-selected': void 0
+    };
+    if (this.props.selection) ariaSelected['aria-selected'] = this.props.selection === `collection_${id}`;
+    return isCollectionFlattened ? this.renderChildren() : (0, _jsxRuntime.jsxs)("li", {
+      ref: el => {
+        this.ref = el;
+      },
+      css: styles === null || styles === void 0 ? void 0 : styles.treeCollection,
+      tabIndex: -1
+      /* eslint-disable-next-line jsx-a11y/role-has-required-aria-props */,
+      role: "treeitem",
+      "aria-label": `${this.props.name}${this.props.descriptor ? ` ${this.props.descriptor}` : ''}`,
+      "aria-level": level,
+      "aria-posinset": position,
+      "aria-setsize": this.props.numChildren,
+      "aria-expanded": expanded,
+      onClick: this.handleCollectionClick,
+      onKeyDown: this.handleCollectionKeyDown,
+      onFocus: e => this.handleFocus(e, {
+        id: id,
+        type: 'collection'
+      }),
+      onBlur: e => this.handleBlur(e, {
+        id: id,
+        type: 'collection'
+      }),
+      ...ariaSelected,
+      "data-cid": "TreeCollection",
+      children: [(0, _jsxRuntime.jsx)(_TreeButton.TreeButton, {
+        ...collectionProps
+      }), expanded && this.childCount > 0 && (0, _jsxRuntime.jsx)("ul", {
+        "aria-label": name,
+        css: styles === null || styles === void 0 ? void 0 : styles.list,
+        role: "group",
+        children: this.renderChildren()
+      })]
+    });
+  }
+}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = _props.allowedProps, _TreeCollection.contextType = _TreeBrowserContext.default, _TreeCollection.defaultProps = {
+  collections: [],
+  items: [],
+  expanded: false,
+  selection: '',
+  size: 'medium',
+  variant: 'folderTree',
+  getItemProps: props => props,
+  getCollectionProps: props => props,
+  isCollectionFlattened: false
+}, _TreeCollection)) || _class);
+var _default = exports.default = TreeCollection;

package/lib/TreeBrowser/v2/TreeCollection/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['id', 'name', 'descriptor', 'items', 'collections', 'expanded', 'selection', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'onItemClick', 'onCollectionClick', 'onKeyDown', 'numChildren', 'level', 'position', 'renderBeforeItems', 'renderAfterItems', 'containerRef', 'isCollectionFlattened', 'renderContent'];

package/lib/TreeBrowser/v2/TreeCollection/styles.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const list = (0, _emotion.keyframes)`
+  to {
+    transform: scaleY(1);
+  }`;
+
+/**
+ *  ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared token object that stores common values for the theme.
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+
+const generateStyles = (componentTheme, props, sharedTokens, state) => {
+  const size = props.size,
+    variant = props.variant;
+  const sizeMap = {
+    small: {
+      indent: {
+        marginInlineStart: `calc(${componentTheme.baseSpacingSmall} * 3)`,
+        marginInlineEnd: 0
+      },
+      folderTree: {
+        marginInlineStart: `calc(${componentTheme.baseSpacingSmall} * 2)`,
+        marginInlineEnd: 0,
+        paddingTop: `calc(1.75 * ${componentTheme.baseSpacingSmall})`,
+        marginTop: `calc(-1.75 * ${componentTheme.baseSpacingSmall})`
+      }
+    },
+    medium: {
+      indent: {
+        marginInlineStart: `calc(${componentTheme.baseSpacingMedium} * 3)`,
+        marginInlineEnd: 0
+      },
+      folderTree: {
+        marginInlineStart: `calc(${componentTheme.baseSpacingMedium} * 2)`,
+        marginInlineEnd: 0,
+        paddingTop: componentTheme.baseSpacingMedium,
+        marginTop: `calc(-1 * ${componentTheme.baseSpacingMedium})`
+      }
+    },
+    large: {
+      indent: {
+        marginInlineStart: `calc(${componentTheme.baseSpacingLarge} * 3)`,
+        marginInlineEnd: 0
+      },
+      folderTree: {
+        marginInlineStart: `calc(${componentTheme.baseSpacingLarge} * 2)`,
+        marginInlineEnd: 0,
+        paddingTop: `calc(0.875 * ${componentTheme.baseSpacingMedium})`,
+        marginTop: `calc(-0.875 * ${componentTheme.baseSpacingMedium})`
+      }
+    }
+  };
+  return {
+    treeCollection: {
+      label: 'treeCollection',
+      fontFamily: componentTheme.fontFamily,
+      margin: 0,
+      padding: 0,
+      '&:focus': {
+        outline: 0,
+        '> button, > div': {
+          ...(0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline, {
+            withFocusOutline: true
+          })
+        }
+      }
+    },
+    list: {
+      label: 'treeCollection__list',
+      fontFamily: 'inherit',
+      boxSizing: 'border-box',
+      margin: 0,
+      padding: 0,
+      listStyleType: 'none',
+      position: 'relative',
+      ...(variant === 'folderTree' && {
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: '0.25rem',
+          bottom: '1.1875rem',
+          insetInlineStart: '0',
+          insetInlineEnd: 'auto',
+          ...(state.animation ? {
+            transform: 'scaleY(0.01)',
+            transformOrigin: 'center top',
+            animationName: list,
+            animationDuration: '0.2s',
+            animationFillMode: 'forwards',
+            animationTimingFunction: 'ease-out'
+          } : {}),
+          pointerEvents: 'none',
+          width: componentTheme.borderWidth,
+          background: componentTheme.borderColor // Tree vertical lines
+        }
+      }),
+      ...sizeMap[size][variant]
+    },
+    item: {
+      label: 'treeCollection__label',
+      '&:focus': {
+        outline: 0,
+        '> button, > div': {
+          ...(0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline, {
+            withFocusOutline: true
+          })
+        }
+      }
+    }
+  };
+};
+var _default = exports.default = generateStyles;