@instructure/ui-drilldown 8.21.1-snapshot.10

package/lib/Drilldown/DrilldownPage/props.js

@@ -0,0 +1,56 @@
+"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"));
+
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+var _DrilldownGroup = _interopRequireDefault(require("../DrilldownGroup"));
+
+var _DrilldownOption = _interopRequireDefault(require("../DrilldownOption"));
+
+var _DrilldownSeparator = _interopRequireDefault(require("../DrilldownSeparator"));
+
+/*
+ * 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 = {
+  id: _propTypes.default.string.isRequired,
+  children: _Children.Children.oneOf([_DrilldownOption.default, _DrilldownSeparator.default, _DrilldownGroup.default]),
+  renderTitle: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  renderActionLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  renderBackButtonLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  onHeaderActionClicked: _propTypes.default.func,
+  onBackButtonClicked: _propTypes.default.func,
+  withoutHeaderSeparator: _propTypes.default.bool,
+  disabled: _propTypes.default.bool
+};
+exports.propTypes = propTypes;
+const allowedProps = ['id', 'children', 'renderTitle', 'renderActionLabel', 'renderBackButtonLabel', 'onHeaderActionClicked', 'onBackButtonClicked', 'withoutHeaderSeparator', 'disabled'];
+exports.allowedProps = allowedProps;

package/lib/Drilldown/DrilldownSeparator/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DrilldownSeparator = void 0;
+
+var _react = require("react");
+
+var _emotion = require("@instructure/emotion");
+
+var _uiOptions = require("@instructure/ui-options");
+
+var _props = require("./props");
+
+var _dec, _class, _class2, _temp;
+
+/**
+---
+parent: Drilldown
+id: Drilldown.Separator
+---
+@module DrilldownSeparator
+@tsProps
+**/
+// needed for listing the available theme variables on docs page,
+// we pass the themeOverrides to Options.Separator
+let DrilldownSeparator = (_dec = (0, _emotion.withStyle)(null, _uiOptions.optionsSeparatorThemeGenerator), _dec(_class = (_temp = _class2 = class DrilldownSeparator extends _react.Component {
+  render() {
+    // this component is only used for prop validation. Drilldown.Separator children
+    // are parsed in Drilldown and rendered as Options.Separator components
+    return null;
+  }
+
+}, _class2.displayName = "DrilldownSeparator", _class2.componentId = 'Drilldown.Separator', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _temp)) || _class);
+exports.DrilldownSeparator = DrilldownSeparator;
+var _default = DrilldownSeparator;
+exports.default = _default;

package/lib/Drilldown/DrilldownSeparator/props.js

@@ -0,0 +1,41 @@
+"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 = {
+  id: _propTypes.default.string.isRequired,
+  as: _propTypes.default.elementType
+};
+exports.propTypes = propTypes;
+const allowedProps = ['id', 'as'];
+exports.allowedProps = allowedProps;

package/lib/Drilldown/__examples__/Drilldown.examples.js

@@ -0,0 +1,289 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index");
+
+var _Drilldown$Page, _Drilldown$Page2, _Drilldown$Page3, _Drilldown$Page4, _Drilldown$Option, _Drilldown$Option2, _Drilldown$Option3, _Drilldown$Option4, _br, _br2, _br3, _Drilldown$Option5;
+
+const triggerButton = /*#__PURE__*/_react.default.createElement("button", {
+  key: 1,
+  style: {
+    marginLeft: '72px',
+    position: 'absolute',
+    top: '45%'
+  }
+}, "a drilldown trigger");
+
+var _default = {
+  maxExamplesPerPage: 10,
+  propValues: {
+    // these are non-existing props, we just pass them to getComponentProps()
+    customProps: [{
+      text: 'all custom props are undefined'
+    }, {
+      text: 'disabled',
+      defaultShow: false,
+      disabled: true
+    }, {
+      text: 'no overflow setting',
+      defaultShow: true,
+      disabled: false,
+      separator: true,
+      groupDisabled: true,
+      renderGroupTitle: 'groupTitle',
+      contentVAlign: 'start'
+    }, // overflowX tests
+    {
+      text: 'overflowX auto',
+      defaultShow: true,
+      width: '12rem',
+      overflowX: 'auto',
+      disabled: false,
+      separator: true,
+      groupDisabled: true,
+      renderGroupTitle: 'groupTitle',
+      contentVAlign: 'start'
+    }, {
+      text: 'overflowX hidden',
+      defaultShow: true,
+      width: '12rem',
+      overflowX: 'hidden',
+      disabled: true,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'center'
+    }, {
+      text: 'overflowX visible',
+      defaultShow: true,
+      width: '12rem',
+      overflowX: 'visible',
+      disabled: false,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'end'
+    }, // overflowY tests
+    {
+      text: 'overflowY auto',
+      defaultShow: true,
+      height: '20rem',
+      overflowY: 'auto',
+      disabled: false,
+      separator: true,
+      groupDisabled: true,
+      renderGroupTitle: 'groupTitle',
+      contentVAlign: 'start'
+    }, {
+      text: 'overflowY hidden',
+      defaultShow: true,
+      height: '20rem',
+      overflowY: 'hidden',
+      disabled: true,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'center'
+    }, {
+      text: 'overflowY visible',
+      defaultShow: true,
+      height: '20rem',
+      overflowY: 'visible',
+      disabled: false,
+      separator: false,
+      groupDisabled: false,
+      renderGroupTitle: void 0,
+      contentVAlign: 'end'
+    }, // tests for Drilldown.Page
+    {
+      page: 'pageWithSubpages'
+    }, {
+      page: 'pageWithSubpages2'
+    }, // Popover version
+    {
+      text: 'with trigger',
+      trigger: triggerButton,
+      defaultShow: false,
+      disabled: false
+    }, {
+      text: 'with trigger disabled',
+      trigger: triggerButton,
+      defaultShow: false,
+      disabled: true
+    }, {
+      text: 'with trigger and defaultShow',
+      trigger: triggerButton,
+      defaultShow: true,
+      disabled: false
+    }, {
+      text: 'with trigger, defaultShow and disabled',
+      trigger: triggerButton,
+      defaultShow: true,
+      disabled: true
+    }, {
+      text: 'with trigger and withArrow',
+      trigger: triggerButton,
+      defaultShow: true,
+      withArrow: true
+    }, {
+      text: 'with trigger and withArrow="false"',
+      trigger: triggerButton,
+      defaultShow: true,
+      withArrow: false
+    }, {
+      text: 'with trigger and placement + offset',
+      trigger: triggerButton,
+      defaultShow: true,
+      placement: 'end top',
+      offsetX: 10,
+      offsetY: -20,
+      width: '20rem'
+    }, {
+      text: 'with trigger and width + height',
+      trigger: triggerButton,
+      defaultShow: true,
+      width: '20rem',
+      height: '20rem'
+    }]
+  },
+
+  getExampleProps(props) {
+    return {
+      height: props.customProps.defaultShow || !props.customProps.trigger ? '57rem' : '5rem',
+      width: '38rem',
+      padding: '0 0 0 small',
+      withVisualDebug: true,
+      position: 'relative'
+    };
+  },
+
+  getComponentProps: props => {
+    return {
+      rootPageId: 'page0',
+      children: generateDrilldownChildren(props, props.customProps.page),
+      rotateFocus: true,
+      overflowX: props.customProps.overflowX,
+      overflowY: props.customProps.overflowY,
+      shouldHideOnSelect: true,
+      shouldFocusTriggerOnClose: true,
+      shouldContainFocus: false,
+      shouldReturnFocus: true,
+      width: props.customProps.width,
+      height: props.customProps.height,
+      disabled: props.customProps.disabled,
+      trigger: props.customProps.trigger,
+      ...(props.customProps.trigger ? {
+        defaultShow: props.customProps.defaultShow,
+        withArrow: props.customProps.withArrow,
+        placement: props.customProps.placement,
+        offsetX: props.customProps.offsetX,
+        offsetY: props.customProps.offsetY
+      } : {
+        defaultShow: false,
+        withArrow: false,
+        placement: 'bottom center',
+        offsetX: 0,
+        offsetY: 0
+      })
+    };
+  }
+};
+exports.default = _default;
+
+function generateDrilldownChildren(props, variant) {
+  if (variant == 'pageWithSubpages') {
+    return [_Drilldown$Page || (_Drilldown$Page = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+      id: "page0",
+      key: "page0",
+      renderTitle: "pageWithSubpages"
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+      id: "o1",
+      subPageId: "subpage"
+    }, "has subpage"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Separator, {
+      id: "s1"
+    }), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+      id: "o2"
+    }, "does not have subpage"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+      id: "o3",
+      href: "#"
+    }, "this is a link"))), _Drilldown$Page2 || (_Drilldown$Page2 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+      id: "subpage",
+      renderTitle: "aaa",
+      key: 1
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+      id: "tmp"
+    }, "not shown")))];
+  } else if (variant == 'pageWithSubpages2') {
+    return [_Drilldown$Page3 || (_Drilldown$Page3 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+      id: "page0",
+      key: "page0",
+      renderTitle: "pageWithSubpages2",
+      renderActionLabel: "action label",
+      withoutHeaderSeparator: true,
+      renderBackButtonLabel: "go back"
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+      id: "o1",
+      subPageId: "subpage"
+    }, "has subpage"), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Separator, {
+      id: "s1"
+    }), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+      id: "o2"
+    }, "does not have subpage"))), _Drilldown$Page4 || (_Drilldown$Page4 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+      id: "subpage",
+      renderTitle: "aaa",
+      key: 1
+    }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+      id: "tmp"
+    }, "subpage option")))];
+  }
+
+  return [/*#__PURE__*/_react.default.createElement(_index.Drilldown.Page, {
+    id: "page0",
+    key: "page0"
+  }, /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "otext"
+  }, props.customProps.text), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "o"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      whiteSpace: 'nowrap'
+    }
+  }, "this should be an option with very very super very very long label")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Group, {
+    id: "g1",
+    disabled: props.customProps.groupDisabled,
+    renderGroupTitle: props.customProps.renderGroupTitle,
+    withoutSeparators: props.customProps.separator,
+    selectableType: "multiple"
+  }, _Drilldown$Option || (_Drilldown$Option = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "o2",
+    renderLabelInfo: "li",
+    defaultSelected: true
+  }, "defaultSelected")), _Drilldown$Option2 || (_Drilldown$Option2 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "o3"
+  }, "minimal"))), _Drilldown$Option3 || (_Drilldown$Option3 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "o4",
+    disabled: true
+  }, "disabled")), _Drilldown$Option4 || (_Drilldown$Option4 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "o5",
+    renderBeforeLabel: "be",
+    renderAfterLabel: "af",
+    renderLabelInfo: "li"
+  }, "extra labels")), /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "o6",
+    beforeLabelContentVAlign: props.customProps.contentVAlign,
+    renderBeforeLabel: "bef",
+    afterLabelContentVAlign: props.customProps.contentVAlign,
+    renderAfterLabel: "after"
+  }, _br || (_br = /*#__PURE__*/_react.default.createElement("br", null)), "valign settings", _br2 || (_br2 = /*#__PURE__*/_react.default.createElement("br", null)), _br3 || (_br3 = /*#__PURE__*/_react.default.createElement("br", null))), _Drilldown$Option5 || (_Drilldown$Option5 = /*#__PURE__*/_react.default.createElement(_index.Drilldown.Option, {
+    id: "o7",
+    description: "the description"
+  }, "has description")))];
+}