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

package/lib/TruncateList/index.js

@@ -0,0 +1,265 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TruncateList = void 0;
+
+var _react = require("react");
+
+var _debounce = require("@instructure/debounce");
+
+var _px = require("@instructure/ui-utils/lib/px.js");
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+
+var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
+
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _props = require("./props");
+
+var _dec, _dec2, _class, _class2;
+
+/**
+---
+category: components/utilities
+---
+@tsProps
+**/
+let TruncateList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TruncateList extends _react.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 = (0, _px.px)(itemSpacing);
+      const menuTriggerWidthPx = (0, _px.px)(fixMenuTriggerWidth || this.state.menuTriggerWidth);
+      let visibleItemsCount = 0;
+
+      if (this.ref) {
+        const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref),
+              navWidth = _getBoundingClientRec.width;
+
+        const itemWidths = Array.from(this.ref.getElementsByTagName('li')).map(item => {
+          const _getBoundingClientRec2 = (0, _getBoundingClientRect.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 = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref),
+          origWidth = _getBoundingClientRec3.width;
+
+    this._debouncedHandleResize = (0, _debounce.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 ? (0, _px.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 _react.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 (0, _px.px)(fixMenuTriggerWidth);
+    }
+
+    const children = this._menuTriggerRef.children;
+    let width = 0;
+    Array.from(children).forEach(child => {
+      width += (0, _getBoundingClientRect.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 (0, _emotion.jsx)("ul", Object.assign({
+      ref: this.handleRef
+    }, (0, _omitProps.omitProps)(this.props, _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 (0, _emotion.jsx)("li", {
+        key: index,
+        css: styles === null || styles === void 0 ? void 0 : styles.listItem
+      }, child);
+    }), typeof renderHiddenItemMenu === 'function' && hiddenChildren && hiddenChildren.length > 0 && (0, _emotion.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 = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  itemSpacing: '0',
+  debounce: 300
+}, _class2)) || _class) || _class);
+exports.TruncateList = TruncateList;
+var _default = TruncateList;
+exports.default = _default;

package/lib/TruncateList/props.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/*
+ * 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 propTypes = {
+  children: _propTypes.default.node,
+  visibleItemsCount: _propTypes.default.number,
+  onUpdate: _propTypes.default.func,
+  renderHiddenItemMenu: _propTypes.default.func,
+  itemSpacing: _propTypes.default.string,
+  fixMenuTriggerWidth: _propTypes.default.string,
+  debounce: _propTypes.default.number,
+  elementRef: _propTypes.default.func
+};
+exports.propTypes = propTypes;
+const allowedProps = ['children', 'renderHiddenItemMenu', 'visibleItemsCount', 'itemSpacing', 'fixMenuTriggerWidth', 'debounce', 'onUpdate', 'elementRef'];
+exports.allowedProps = allowedProps;

package/lib/TruncateList/styles.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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.
+ */
+
+/**
+ * ---
+ * 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
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TruncateList", {
+  enumerable: true,
+  get: function () {
+    return _TruncateList.TruncateList;
+  }
+});
+
+var _TruncateList = require("./TruncateList");

package/lib/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@instructure/ui-truncate-list",
+  "version": "8.27.1-snapshot-13",
+  "description": "A TruncateList component made by Instructure Inc.",
+  "author": "Instructure, Inc. Engineering and Product Design",
+  "module": "./es/index.js",
+  "main": "./lib/index.js",
+  "types": "./types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/instructure/instructure-ui/issues",
+  "scripts": {
+    "lint": "run -T ui-test --lint",
+    "lint:fix": "run -T ui-test --lint --fix",
+    "clean": "run -T ui-build --clean",
+    "build": "run -T ui-build --modules es,cjs",
+    "build:watch": "yarn ts:check --watch & run -T ui-build --watch",
+    "build:types": "run -T tsc -p tsconfig.build.json",
+    "ts:check": "run -T tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@instructure/console": "8.27.1-snapshot-13",
+    "@instructure/debounce": "8.27.1-snapshot-13",
+    "@instructure/emotion": "8.27.1-snapshot-13",
+    "@instructure/shared-types": "8.27.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-testable": "8.27.1-snapshot-13",
+    "@instructure/ui-utils": "8.27.1-snapshot-13",
+    "prop-types": "^15"
+  },
+  "devDependencies": {
+    "@instructure/ui-babel-preset": "8.27.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.27.1-snapshot-13",
+    "@instructure/ui-test-queries": "8.27.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-themes": "8.27.1-snapshot-13"
+  },
+  "peerDependencies": {
+    "react": ">=16.8 <=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
+}

package/src/TruncateList/README.md

@@ -0,0 +1,201 @@
+---
+describes: TruncateList
+---
+
+`TruncateList` is a special kind of list component that can be configured to adapt to small screen widths by truncating its items that don’t fit within the available space. It is a utility component that can be used on its own, but its intended use is to handle the truncation logic of menu items in navigation bars.
+
+### Visible items
+
+The `onUpdate` function prop returns the number of visible items, and the `visibleItemsCount` prop controls how many items are currently visible.
+
+It is a controlled component, so without and `onUpdate` prop it won't be responsive to changes. When `visibleItemsCount` is not set, the list is not truncated.
+
+When the list is truncated, it is recommended to pass an element that lists the rest of the hidden items. The `renderHiddenItemMenu` prop accepts a function with the `hiddenChildren` as its parameter, and it should return a dropdown menu (e.g.: [Drilldown](/#Drilldown), [Menu](/#Menu)) or link, etc.
+
+```js
+---
+example: true
+render: false
+---
+class Example extends React.Component {
+  state = { visibleItemsCount: undefined }
+
+  render() {
+    return (
+      <View as="div" background="primary" padding="x-small">
+        <TruncateList
+          itemSpacing='0.25rem'
+          visibleItemsCount={this.state.visibleItemsCount}
+          onUpdate={({ visibleItemsCount }) => {
+            this.setState({ visibleItemsCount })
+          }}
+          renderHiddenItemMenu={(hiddenChildren) => {
+            return (
+              <Drilldown
+                rootPageId="root"
+                trigger={(
+                  <Button margin="0 0 0 small">
+                    {hiddenChildren.length} More
+                  </Button>
+                )}
+                width="15rem"
+                maxHeight="10rem"
+                placement='bottom'
+              >
+                <Drilldown.Page id="root">
+                  {hiddenChildren.map((child, idx) => {
+                    return (
+                      <Drilldown.Option
+                        key={`option-${idx}`}
+                        id={`option-${idx}`}
+                      >
+                        {child}
+                      </Drilldown.Option>
+                    )
+                  })}
+                </Drilldown.Page>
+              </Drilldown>
+            )
+          }}
+        >
+          {Array.from(Array(16)).map((item, idx) => {
+            return (
+              <View
+                key={idx}
+                padding="x-small"
+              >
+                Item {idx + 1}
+              </View>
+            )
+          })}
+        </TruncateList>
+      </View>
+    )
+  }
+}
+
+render(<Example />)
+```
+
+### Layout settings
+
+The `itemSpacing` prop adds spacing between the items. The width of the list item containing the menu trigger can be set to a fixed value with the `fixMenuTriggerWidth` prop.
+
+```js
+---
+example: true
+render: false
+---
+class Example extends React.Component {
+  state = {
+    visibleItemsCount: undefined,
+    spacing: '0.5rem',
+    menuTriggerWidth: 'none'
+  }
+
+  render() {
+    return (
+      <View as="div" padding="medium">
+        <View display="block" margin="small none large">
+          <FormFieldGroup
+            description="Settings"
+            rowSpacing="small"
+            layout='columns'
+          >
+            <RadioInputGroup
+              name="spacing"
+              description="Spacing"
+              value={this.state.spacing}
+              onChange={(event, value) => {
+                this.setState({ spacing: value })
+              }}>
+                {[
+                  '0',
+                  '0.5rem',
+                  '1em',
+                  '48px'
+                ].map((spacingValue) => (
+                  <RadioInput
+                    key={spacingValue}
+                    label={spacingValue}
+                    value={spacingValue}
+                  />
+                ))}
+            </RadioInputGroup>
+
+            <RadioInputGroup
+              name="menuTriggerWidth"
+              description="Fix menu trigger width"
+              value={this.state.menuTriggerWidth}
+              onChange={(event, value) => {
+                this.setState({ menuTriggerWidth: value })
+              }}>
+                {[
+                  'none',
+                  '10rem',
+                  '8em',
+                  '240px'
+                ].map((menuTriggerWidthValue) => (
+                  <RadioInput
+                    key={menuTriggerWidthValue}
+                    label={menuTriggerWidthValue}
+                    value={menuTriggerWidthValue}
+                  />
+                ))}
+            </RadioInputGroup>
+          </FormFieldGroup>
+        </View>
+
+        <View as="div" background="primary" padding="x-small">
+          <TruncateList
+            itemSpacing={this.state.spacing}
+            fixMenuTriggerWidth={this.state.menuTriggerWidth === 'none'
+              ? undefined
+              : this.state.menuTriggerWidth
+            }
+            visibleItemsCount={this.state.visibleItemsCount}
+            onUpdate={({ visibleItemsCount }) => {
+              this.setState({ visibleItemsCount })
+            }}
+            renderHiddenItemMenu={(hiddenChildren) => {
+              return (
+                <Drilldown
+                  rootPageId="root"
+                  trigger={(
+                    <Button display="block">
+                      {hiddenChildren.length} More
+                    </Button>
+                  )}
+                  positionContainerDisplay="block"
+                  width="15rem"
+                  maxHeight="10rem"
+                  placement='bottom'
+                >
+                  <Drilldown.Page id="root">
+                    {hiddenChildren.map((child, idx) => {
+                      return (
+                        <Drilldown.Option
+                          key={`option-${idx}`}
+                          id={`option-${idx}`}
+                        >
+                          {child}
+                        </Drilldown.Option>
+                      )
+                    })}
+                  </Drilldown.Page>
+                </Drilldown>
+              )
+            }}
+          >
+            {Array.from(Array(16)).map((item, idx) => {
+              return <div key={idx}>Item {idx + 1}</div>
+            })}
+          </TruncateList>
+        </View>
+      </View>
+    )
+  }
+}
+
+render(<Example />)
+```