@instructure/ui-truncate-list 8.27.1-snapshot-13

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [8.27.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.27.0...v8.27.1-snapshot-13) (2022-08-17)
+
+
+### Features
+
+* **ui-truncate-list,ui:** add `TruncateList` utility component ([f8b17ea](https://github.com/instructure/instructure-ui/commit/f8b17ea8b60234f746fcd7576f1532f38d5bbe5f))
+
+
+
+
+
+See the instructure-ui mono-repo [change log](#CHANGELOG) for past changes.

package/README.md

@@ -0,0 +1,30 @@
+---
+category: packages
+---
+
+## ui-truncate-list
+
+[![npm][npm]][npm-url] 
+[![MIT License][license-badge]][license] 
+[![Code of Conduct][coc-badge]][coc]
+
+A TruncateList utility component made by Instructure Inc.
+
+### Components
+
+The `ui-truncate-list` package contains the following:
+
+- [TruncateList](#TruncateList)
+
+### Installation
+
+```sh
+yarn add @instructure/ui-truncate-list
+```
+
+[npm]: https://img.shields.io/npm/v/@instructure/ui-truncate-list.svg
+[npm-url]: https://npmjs.com/package/@instructure/ui-truncate-list
+[license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
+[license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md

package/es/TruncateList/TruncateListLocator.js

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+import { locator } from '@instructure/ui-test-locator';
+import { find, findAll } from '@instructure/ui-test-queries';
+import { TruncateList } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+export const TruncateListLocator = locator(TruncateList.selector, {
+  findAllListItems: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return findAll('li', ...args);
+  },
+  findMenuTriggerItem: function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return find('li[class*=-truncateList__menuTrigger]', ...args);
+  }
+});

package/es/TruncateList/index.js

@@ -0,0 +1,272 @@
+var _dec, _dec2, _class, _class2;
+
+/*
+ * 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.
+ */
+
+/** @jsx jsx */
+import { Children, Component } from 'react';
+import { debounce } from '@instructure/debounce';
+import { px } from '@instructure/ui-utils';
+import { testable } from '@instructure/ui-testable';
+import { omitProps } from '@instructure/ui-react-utils';
+import { getBoundingClientRect } from '@instructure/ui-dom-utils';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from './styles';
+import { propTypes, allowedProps } from './props';
+
+/**
+---
+category: components/utilities
+---
+@tsProps
+**/
+let TruncateList = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class TruncateList extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this._menuTriggerRef = null;
+    this._debouncedHandleResize = void 0;
+    this._resizeListener = void 0;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.measureItems = () => {
+      const _this$props = this.props,
+            fixMenuTriggerWidth = _this$props.fixMenuTriggerWidth,
+            itemSpacing = _this$props.itemSpacing;
+      const itemSpacingPx = px(itemSpacing);
+      const menuTriggerWidthPx = px(fixMenuTriggerWidth || this.state.menuTriggerWidth);
+      let visibleItemsCount = 0;
+
+      if (this.ref) {
+        const _getBoundingClientRec = getBoundingClientRect(this.ref),
+              navWidth = _getBoundingClientRec.width;
+
+        const itemWidths = Array.from(this.ref.getElementsByTagName('li')).map(item => {
+          const _getBoundingClientRec2 = getBoundingClientRect(item),
+                width = _getBoundingClientRec2.width;
+
+          return width;
+        });
+        let currentWidth = 0;
+
+        for (let i = 0; i < itemWidths.length; i++) {
+          currentWidth += itemWidths[i]; // for the last item we don't need to calculate with the menu trigger
+
+          const maxWidth = i === itemWidths.length - 1 ? navWidth : navWidth - (menuTriggerWidthPx + itemSpacingPx);
+
+          if (currentWidth <= maxWidth) {
+            visibleItemsCount++;
+          } else {
+            break;
+          }
+        }
+      }
+
+      return {
+        visibleItemsCount
+      };
+    };
+
+    this.handleResize = () => {
+      this.setState({
+        isMeasuring: true
+      }, () => {
+        const _this$measureItems = this.measureItems(),
+              visibleItemsCount = _this$measureItems.visibleItemsCount;
+
+        if (typeof this.props.onUpdate === 'function') {
+          this.props.onUpdate({
+            visibleItemsCount
+          });
+        }
+
+        this.setState({
+          isMeasuring: false
+        });
+      });
+    };
+
+    this.state = {
+      isMeasuring: false,
+      menuTriggerWidth: void 0
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+
+    const _getBoundingClientRec3 = getBoundingClientRect(this.ref),
+          origWidth = _getBoundingClientRec3.width;
+
+    this._debouncedHandleResize = debounce(this.handleResize, this.props.debounce, {
+      leading: true,
+      trailing: true
+    });
+    this._resizeListener = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+
+        if (origWidth !== width) {
+          var _this$_debouncedHandl;
+
+          (_this$_debouncedHandl = this._debouncedHandleResize) === null || _this$_debouncedHandl === void 0 ? void 0 : _this$_debouncedHandl.call(this);
+        }
+      }
+    }); // On first render we only render the trigger to measure it
+
+    const menuTriggerWidth = this.props.fixMenuTriggerWidth ? px(this.props.fixMenuTriggerWidth) : this.calcMenuTriggerWidth();
+    this.setState({
+      menuTriggerWidth
+    }, () => {
+      var _this$_resizeListener, _this$_debouncedHandl2;
+
+      (_this$_resizeListener = this._resizeListener) === null || _this$_resizeListener === void 0 ? void 0 : _this$_resizeListener.observe(this.ref);
+      (_this$_debouncedHandl2 = this._debouncedHandleResize) === null || _this$_debouncedHandl2 === void 0 ? void 0 : _this$_debouncedHandl2.call(this);
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var _this$props$makeStyle2, _this$props3;
+
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+
+    if (prevProps.fixMenuTriggerWidth !== this.props.fixMenuTriggerWidth || prevProps.itemSpacing !== this.props.itemSpacing) {
+      var _this$_debouncedHandl3;
+
+      (_this$_debouncedHandl3 = this._debouncedHandleResize) === null || _this$_debouncedHandl3 === void 0 ? void 0 : _this$_debouncedHandl3.call(this);
+    }
+
+    if (this.ref && prevState.isMeasuring && prevState.isMeasuring !== this.state.isMeasuring) {
+      const menuTriggerWidth = this.calcMenuTriggerWidth();
+
+      if (menuTriggerWidth && this.state.menuTriggerWidth !== menuTriggerWidth) {
+        this.setState({
+          menuTriggerWidth
+        }, () => {
+          var _this$_debouncedHandl4;
+
+          (_this$_debouncedHandl4 = this._debouncedHandleResize) === null || _this$_debouncedHandl4 === void 0 ? void 0 : _this$_debouncedHandl4.call(this);
+        });
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._resizeListener) {
+      this._resizeListener.disconnect();
+    }
+
+    if (this._debouncedHandleResize) {
+      this._debouncedHandleResize.cancel();
+    }
+  }
+
+  get childrenArray() {
+    return Children.toArray(this.props.children);
+  }
+
+  get visibleChildren() {
+    const visibleItemsCount = this.props.visibleItemsCount;
+    const _this$state = this.state,
+          isMeasuring = _this$state.isMeasuring,
+          menuTriggerWidth = _this$state.menuTriggerWidth; // for the first render we need to measure the trigger width
+
+    if (typeof menuTriggerWidth === 'undefined') {
+      return [];
+    }
+
+    const visibleChildren = typeof visibleItemsCount === 'undefined' ? this.childrenArray : this.childrenArray.splice(0, visibleItemsCount);
+    return isMeasuring ? this.childrenArray : visibleChildren;
+  }
+
+  get hiddenChildren() {
+    const isMeasuring = this.state.isMeasuring;
+    return isMeasuring ? [] : this.childrenArray.splice(this.visibleChildren.length, this.childrenArray.length);
+  }
+
+  calcMenuTriggerWidth() {
+    const fixMenuTriggerWidth = this.props.fixMenuTriggerWidth;
+
+    if (!this._menuTriggerRef) {
+      return 0;
+    }
+
+    if (fixMenuTriggerWidth) {
+      return px(fixMenuTriggerWidth);
+    }
+
+    const children = this._menuTriggerRef.children;
+    let width = 0;
+    Array.from(children).forEach(child => {
+      width += getBoundingClientRect(child).width;
+    });
+    return width;
+  }
+
+  render() {
+    const _this$props4 = this.props,
+          styles = _this$props4.styles,
+          className = _this$props4.className,
+          style = _this$props4.style,
+          renderHiddenItemMenu = _this$props4.renderHiddenItemMenu;
+    const visibleChildren = this.visibleChildren,
+          hiddenChildren = this.hiddenChildren;
+    return jsx("ul", Object.assign({
+      ref: this.handleRef
+    }, omitProps(this.props, allowedProps), {
+      // we have to pass style and className
+      // (e.g. if emotion style is provided, it will be passed as a className)
+      className: className,
+      style: style,
+      css: styles === null || styles === void 0 ? void 0 : styles.truncateList
+    }), visibleChildren.map((child, index) => {
+      return jsx("li", {
+        key: index,
+        css: styles === null || styles === void 0 ? void 0 : styles.listItem
+      }, child);
+    }), typeof renderHiddenItemMenu === 'function' && hiddenChildren && hiddenChildren.length > 0 && jsx("li", {
+      key: "menuTrigger",
+      css: [styles === null || styles === void 0 ? void 0 : styles.listItem, styles === null || styles === void 0 ? void 0 : styles.menuTrigger],
+      ref: e => {
+        this._menuTriggerRef = e;
+      }
+    }, renderHiddenItemMenu(hiddenChildren)));
+  }
+
+}, _class2.displayName = "TruncateList", _class2.componentId = 'TruncateList', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  itemSpacing: '0',
+  debounce: 300
+}, _class2)) || _class) || _class);
+export { TruncateList };
+export default TruncateList;

package/es/TruncateList/props.js

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+import PropTypes from 'prop-types';
+const propTypes = {
+  children: PropTypes.node,
+  visibleItemsCount: PropTypes.number,
+  onUpdate: PropTypes.func,
+  renderHiddenItemMenu: PropTypes.func,
+  itemSpacing: PropTypes.string,
+  fixMenuTriggerWidth: PropTypes.string,
+  debounce: PropTypes.number,
+  elementRef: PropTypes.func
+};
+const allowedProps = ['children', 'renderHiddenItemMenu', 'visibleItemsCount', 'itemSpacing', 'fixMenuTriggerWidth', 'debounce', 'onUpdate', 'elementRef'];
+export { propTypes, allowedProps };

package/es/TruncateList/styles.js

@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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} 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 generateStyle = (_componentTheme, props) => {
+  const itemSpacing = props.itemSpacing,
+        fixMenuTriggerWidth = props.fixMenuTriggerWidth;
+  const listItemStyle = {
+    minWidth: '0.0625rem',
+    flexShrink: 0,
+    flexGrow: 0
+  };
+  return {
+    truncateList: {
+      label: 'truncateList',
+      boxSizing: 'border-box',
+      listStyleType: 'none',
+      margin: '0',
+      padding: '0',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    },
+    listItem: {
+      label: 'truncateList__listItem',
+      ...listItemStyle,
+      '& + &': {
+        paddingInlineStart: itemSpacing
+      }
+    },
+    menuTrigger: {
+      label: 'truncateList__menuTrigger',
+      maxWidth: '100%',
+      ...(fixMenuTriggerWidth && {
+        width: fixMenuTriggerWidth
+      }),
+      paddingInlineStart: itemSpacing,
+      '&:first-of-type': {
+        paddingInlineStart: 0
+      }
+    }
+  };
+};
+
+export default generateStyle;

package/es/index.js

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+export { TruncateList } from './TruncateList';

package/lib/TruncateList/TruncateListLocator.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TruncateListLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _uiTestQueries = require("@instructure/ui-test-queries");
+
+var _index = require("./index");
+
+/*
+ * 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.
+ */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const TruncateListLocator = (0, _locator.locator)(_index.TruncateList.selector, {
+  findAllListItems: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return (0, _uiTestQueries.findAll)('li', ...args);
+  },
+  findMenuTriggerItem: function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return (0, _uiTestQueries.find)('li[class*=-truncateList__menuTrigger]', ...args);
+  }
+});
+exports.TruncateListLocator = TruncateListLocator;