@instructure/ui-drilldown 10.16.1-snapshot-0 → 10.16.1

package/es/Drilldown/index.js

@@ -27,9 +27,7 @@ var _dec, _dec2, _dec3, _class, _Drilldown, _IconArrowOpenEndSoli, _IconArrowOpe
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React, { Component } from 'react';
+import { Children, Component } from 'react';
 import { warn, error } from '@instructure/console';
 import { testable } from '@instructure/ui-testable';
 import { contains, containsActiveElement } from '@instructure/ui-dom-utils';
@@ -39,7 +37,7 @@ import { Options } from '@instructure/ui-options';
 import { Popover } from '@instructure/ui-popover';
 import { Selectable } from '@instructure/ui-selectable';
 import { IconArrowOpenStartSolid, IconArrowOpenEndSolid, IconCheckSolid } from '@instructure/ui-icons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { DrilldownSeparator } from './DrilldownSeparator';
 import { DrilldownOption } from './DrilldownOption';
 import { DrilldownGroup } from './DrilldownGroup';
@@ -58,6 +56,8 @@ import { propTypes, allowedProps } from './props';
 // with the `children` transformed into an array
 
 // An object with the mapped Pages with their id as keys
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 /**
 ---
 category: components
@@ -406,7 +406,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
   get pages() {
     const children = this.props.children;
-    return React.Children.toArray(children || []);
+    return Children.toArray(children || []);
   }
   get pageMap() {
     const children = this.props.children;
@@ -419,7 +419,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       const children = props.children;
       map[props.id] = {
         ...props,
-        children: React.Children.toArray(children || [])
+        children: Children.toArray(children || [])
       };
     });
     return map;
@@ -549,27 +549,31 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     if (this.previousPage) {
       const prevPageTitle = callRenderProp(this.previousPage.renderTitle);
       const backButtonLabel = callRenderProp(renderBackButtonLabel, prevPageTitle);
-      headerChildren.push(jsx(DrilldownOption, {
+      headerChildren.push(_jsx(DrilldownOption, {
         id: this._headerBackId,
-        onOptionClick: this.handleBackButtonClick
-      }, jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.headerBack,
-        role: "presentation"
-      }, backButtonLabel)));
+        onOptionClick: this.handleBackButtonClick,
+        children: _jsx("div", {
+          css: styles === null || styles === void 0 ? void 0 : styles.headerBack,
+          role: "presentation",
+          children: backButtonLabel
+        })
+      }));
     }
 
     // Header title
     if (renderTitle) {
       const title = callRenderProp(renderTitle);
       if (title) {
-        headerChildren.push(jsx(DrilldownOption, {
+        headerChildren.push(_jsx(DrilldownOption, {
           id: this._headerTitleId,
           role: "presentation",
-          "aria-hidden": "true"
-        }, jsx("div", {
-          css: styles === null || styles === void 0 ? void 0 : styles.headerTitle,
-          id: this._headerTitleLabelId
-        }, title)));
+          "aria-hidden": "true",
+          children: _jsx("div", {
+            css: styles === null || styles === void 0 ? void 0 : styles.headerTitle,
+            id: this._headerTitleLabelId,
+            children: title
+          })
+        }));
       }
     }
 
@@ -577,7 +581,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     if (renderActionLabel) {
       const actionLabel = callRenderProp(renderActionLabel);
       if (actionLabel) {
-        headerChildren.push(jsx(DrilldownOption, {
+        headerChildren.push(_jsx(DrilldownOption, {
           id: this._headerActionId,
           themeOverride: {
             color: styles === null || styles === void 0 ? void 0 : styles.headerActionColor
@@ -586,14 +590,15 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
             if (typeof onHeaderActionClicked === 'function') {
               onHeaderActionClicked(event);
             }
-          }
-        }, actionLabel));
+          },
+          children: actionLabel
+        }));
       }
     }
 
     // header separator
     if (headerChildren.length > 0 && children.length > 0 && !withoutHeaderSeparator) {
-      headerChildren.push(jsx(DrilldownSeparator, {
+      headerChildren.push(_jsx(DrilldownSeparator, {
         id: deterministicId('DrilldownHeader-Separator')
       }));
     }
@@ -753,14 +758,15 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       id = _separator$props.id,
       themeOverride = _separator$props.themeOverride,
       props = _objectWithoutProperties(_separator$props, _excluded3);
-    return jsx(Options.Separator, Object.assign({}, props, {
+    return _createElement(Options.Separator, {
+      ...props,
       id: id,
       key: id,
       role: "separator"
       // we pass the themeOverride to Options.Separator
       ,
       themeOverride: themeOverride
-    }));
+    });
   }
   renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
     var _this$currentPage2, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
@@ -849,13 +855,13 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     // we set a few manually on Options.Item,
     // the rest are passed directly
     if (subPageId) {
-      optionProps.renderAfterLabel = _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, null));
+      optionProps.renderAfterLabel = _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = _jsx(IconArrowOpenEndSolid, {}));
       optionProps['aria-haspopup'] = true;
       optionProps.role = customRole || 'button';
       warn(!renderAfterLabel, `The prop "renderAfterLabel" is reserved on item with id: "${id}". When it has "subPageId" provided, a navigation arrow will render after the label.`);
     }
     if (id === this._headerBackId) {
-      optionProps.renderBeforeLabel = _IconArrowOpenStartSo || (_IconArrowOpenStartSo = jsx(IconArrowOpenStartSolid, null));
+      optionProps.renderBeforeLabel = _IconArrowOpenStartSo || (_IconArrowOpenStartSo = _jsx(IconArrowOpenStartSolid, {}));
     }
     const isOptionControlled = typeof option.props.selected === 'boolean';
     if ((groupProps !== null && groupProps !== void 0 && groupProps.selectableType || isOptionControlled) && groupProps) {
@@ -866,7 +872,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         isSelected = Boolean(option.props.selected);
       }
       optionProps['aria-checked'] = isSelected;
-      optionProps.renderBeforeLabel = jsx(IconCheckSolid, {
+      optionProps.renderBeforeLabel = _jsx(IconCheckSolid, {
         style: {
           opacity: isSelected ? 1 : 0
         }
@@ -931,26 +937,31 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     const infoAriaId = `${id}__info`;
     const labelledby = option.props['aria-labelledby'] || labelAriaId;
     const describedby = option.props['aria-describedby'] || (labelInfo ? infoAriaId : void 0);
-    return jsx(Options.Item, Object.assign({}, optionProps, {
+    return _createElement(Options.Item, {
+      ...optionProps,
       key: id,
       "aria-labelledby": labelledby,
       "aria-describedby": describedby
-    }), jsx("div", {
+    }, _jsxs("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.optionContainer,
-      role: "none"
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.optionContent,
       role: "none",
-      id: labelAriaId
-    }, optionLabel), labelInfo ? jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.optionLabelInfo,
-      role: "presentation",
-      style: {
-        alignSelf: vAlignMap[afterLabelContentVAlign]
-      }
-    }, jsx("span", {
-      id: infoAriaId
-    }, labelInfo)) : null));
+      children: [_jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.optionContent,
+        role: "none",
+        id: labelAriaId,
+        children: optionLabel
+      }), labelInfo ? _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.optionLabelInfo,
+        role: "presentation",
+        style: {
+          alignSelf: vAlignMap[afterLabelContentVAlign]
+        },
+        children: _jsx("span", {
+          id: infoAriaId,
+          children: labelInfo
+        })
+      }) : null]
+    }));
   }
   renderGroup(group, getOptionProps, getDisabledOptionProps, needsFirstSeparator, needsLastSeparator) {
     const _group$props = group.props,
@@ -968,34 +979,34 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
 
     // add a separator above
     if (needsFirstSeparator) {
-      groupChildren.push(_Options$Separator || (_Options$Separator = jsx(Options.Separator, null)));
+      groupChildren.push(_Options$Separator || (_Options$Separator = _jsx(Options.Separator, {})));
     }
 
     // create a sublist as a group
     // (a wrapping list item will be created by Options)
-    groupChildren.push(jsx(Options, {
+    groupChildren.push(_jsx(Options, {
       id: id,
-      key: id,
       role: role,
       as: as || this.props.as,
       renderLabel: renderGroupTitle,
       elementRef: elementRef
       // we pass the themeOverride to Options
       ,
-      themeOverride: themeOverride
-    }, this.getChildrenArray(children).map(child => {
-      if (matchComponentTypes(child, [DrilldownSeparator])) {
-        return this.renderSeparator(child);
-      } else if (matchComponentTypes(child, [DrilldownOption])) {
-        return this.renderOption(child, getOptionProps, getDisabledOptionProps, group.props);
-      } else {
-        return null;
-      }
-    })));
+      themeOverride: themeOverride,
+      children: this.getChildrenArray(children).map(child => {
+        if (matchComponentTypes(child, [DrilldownSeparator])) {
+          return this.renderSeparator(child);
+        } else if (matchComponentTypes(child, [DrilldownOption])) {
+          return this.renderOption(child, getOptionProps, getDisabledOptionProps, group.props);
+        } else {
+          return null;
+        }
+      })
+    }, id));
 
     // add a separator below
     if (needsLastSeparator) {
-      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = jsx(Options.Separator, null)));
+      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = _jsx(Options.Separator, {})));
     }
     return groupChildren;
   }
@@ -1016,7 +1027,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     if (!this.currentPage) {
       return null;
     }
-    return jsx(Selectable, {
+    return _jsx(Selectable, {
       isShowingOptions: this.shown,
       highlightedOptionId: this.state.highlightedOptionId,
       selectedOptionId: this.selectedGroupOptionIdsArray,
@@ -1035,73 +1046,79 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         this.handleOptionHighlight(event, {
           id: lastOptionId
         });
-      }
-    }, ({
-      // TODO: figure out what other Selectable props we need, if we want to add a Select version for drilldown:
-      // getRootProps, - we probably don't need this
-      // getLabelProps, - do we need label?
-      // getDescriptionProps, - might be nice for assistiveText like in Select
-      // getInputProps, - hidden input for a11y? role="combobox" might be needed
-      getTriggerProps,
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps
-    }) => jsx(View, Object.assign({
-      borderWidth: "small",
-      as: "div",
-      elementRef: this.handleDrilldownRef,
-      tabIndex: 0,
-      css: styles === null || styles === void 0 ? void 0 : styles.drilldown,
-      position: "relative",
-      borderRadius: "small",
-      width: width,
-      minWidth: maxWidth,
-      maxWidth: maxWidth,
-      role: role,
-      "aria-label": label,
-      "aria-labelledby": this.currentPageAriaLabel
-    }, getTriggerProps({
-      id: this._id,
-      // We need to override these aria attributes added by Selectable,
-      // since Drilldown is not a combobox and has no popup
-      'aria-haspopup': false,
-      'aria-expanded': void 0,
-      onKeyDown: this.handleKeyDown,
-      onBlur: event => {
-        const target = event.currentTarget;
-        const related = event.relatedTarget;
-        const containsRelated = contains(target, related);
-        if (!related || related === this._drilldownRef || related !== target && !containsRelated) {
-          this.setState({
-            highlightedOptionId: void 0
-          });
-        }
       },
-      onMouseLeave: () => {
-        this.setState({
-          highlightedOptionId: void 0
-        });
-      }
-    })), jsx(View, {
-      as: "div",
-      overflowY: overflowY,
-      overflowX: overflowX,
-      height: height,
-      width: width,
-      minHeight: minHeight,
-      minWidth: minWidth,
-      maxHeight: maxHeight,
-      maxWidth: maxWidth,
-      css: styles === null || styles === void 0 ? void 0 : styles.container,
-      borderRadius: "small",
-      role: "presentation",
-      elementRef: element => {
-        this._containerElement = element;
-      }
-    }, jsx(Options, Object.assign({}, getListProps(), {
-      role: "presentation",
-      as: as
-    }), this.renderList(getOptionProps, getDisabledOptionProps)))));
+      children: ({
+        // TODO: figure out what other Selectable props we need, if we want to add a Select version for drilldown:
+        // getRootProps, - we probably don't need this
+        // getLabelProps, - do we need label?
+        // getDescriptionProps, - might be nice for assistiveText like in Select
+        // getInputProps, - hidden input for a11y? role="combobox" might be needed
+        getTriggerProps,
+        getListProps,
+        getOptionProps,
+        getDisabledOptionProps
+      }) => _jsx(View, {
+        borderWidth: "small",
+        as: "div",
+        elementRef: this.handleDrilldownRef,
+        tabIndex: 0,
+        css: styles === null || styles === void 0 ? void 0 : styles.drilldown,
+        position: "relative",
+        borderRadius: "small",
+        width: width,
+        minWidth: maxWidth,
+        maxWidth: maxWidth,
+        role: role,
+        "aria-label": label,
+        "aria-labelledby": this.currentPageAriaLabel,
+        ...getTriggerProps({
+          id: this._id,
+          // We need to override these aria attributes added by Selectable,
+          // since Drilldown is not a combobox and has no popup
+          'aria-haspopup': false,
+          'aria-expanded': void 0,
+          onKeyDown: this.handleKeyDown,
+          onBlur: event => {
+            const target = event.currentTarget;
+            const related = event.relatedTarget;
+            const containsRelated = contains(target, related);
+            if (!related || related === this._drilldownRef || related !== target && !containsRelated) {
+              this.setState({
+                highlightedOptionId: void 0
+              });
+            }
+          },
+          onMouseLeave: () => {
+            this.setState({
+              highlightedOptionId: void 0
+            });
+          }
+        }),
+        children: _jsx(View, {
+          as: "div",
+          overflowY: overflowY,
+          overflowX: overflowX,
+          height: height,
+          width: width,
+          minHeight: minHeight,
+          minWidth: minWidth,
+          maxHeight: maxHeight,
+          maxWidth: maxWidth,
+          css: styles === null || styles === void 0 ? void 0 : styles.container,
+          borderRadius: "small",
+          role: "presentation",
+          elementRef: element => {
+            this._containerElement = element;
+          },
+          children: _jsx(Options, {
+            ...getListProps(),
+            role: "presentation",
+            as: as,
+            children: this.renderList(getOptionProps, getDisabledOptionProps)
+          })
+        })
+      })
+    });
   }
   render() {
     // clear temporary option store
@@ -1125,7 +1142,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       onMouseOver = _this$props6.onMouseOver,
       offsetX = _this$props6.offsetX,
       offsetY = _this$props6.offsetY;
-    return trigger ? jsx(Popover, {
+    return trigger ? _jsx(Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       shouldCloseOnDocumentClick: true,
@@ -1172,8 +1189,9 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         id: this._triggerId,
         disabled: !!(trigger.props.disabled || disabled),
         'aria-disabled': trigger.props.disabled || disabled ? 'true' : void 0
-      })
-    }, this.renderPage()) : this.renderPage();
+      }),
+      children: this.renderPage()
+    }) : this.renderPage();
   }
 }, _Drilldown.displayName = "Drilldown", _Drilldown.componentId = 'Drilldown', _Drilldown.propTypes = propTypes, _Drilldown.allowedProps = allowedProps, _Drilldown.defaultProps = {
   disabled: false,