baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/es/sheet/action-button.js

@@ -0,0 +1,44 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { Button, KIND, SHAPE, SIZE } from '../button';
+export function ActionButton({
+  children,
+  size,
+  ...restProps
+}) {
+  const iconButtonStyle = {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0
+  }; // compact buttons need a pseudo-element to acheive a 48px tap target
+
+  const compactButtonStyle = {
+    position: 'relative',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      height: '48px',
+      width: '48px'
+    }
+  };
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    kind: KIND.tertiary,
+    shape: SHAPE.square,
+    size: size,
+    overrides: {
+      BaseButton: {
+        style: { ...(size === SIZE.compact ? compactButtonStyle : {}),
+          ...(typeof children !== 'string' ? iconButtonStyle : {})
+        }
+      }
+    }
+  }, restProps), children);
+}

package/es/sheet/index.js

@@ -0,0 +1,9 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as Sheet } from './sheet';
+export * from './styled-components';
+export * from './types';

package/es/sheet/sheet.js

@@ -0,0 +1,100 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { ProgressBar, SIZE } from '../progress-bar';
+import { SIZE as BTN_SIZE } from '../button';
+import { SIZE as DIVIDER_SIZE } from '../divider';
+import { ActionButton as DefaultActionButton } from './action-button';
+import { StyledBottomContainer, StyledBody, StyledDescription, StyledDivider, StyledEmptyDiv, StyledGrabber, StyledHeader, StyledHeaderGrid, StyledHeaderTextContainer, StyledRoot, StyledTitle, StyledTopContainer } from './styled-components';
+
+function renderBodyContent(content) {
+  return typeof content === 'function' ? content() : content;
+}
+
+function renderActionButtonContent(content, buttonSize) {
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  const Icon = content;
+  return /*#__PURE__*/React.createElement(Icon, {
+    size: buttonSize === BTN_SIZE.compact ? 22 : 26
+  });
+}
+
+export const Sheet = ({
+  children,
+  content,
+  description,
+  draggable = false,
+  leadingAction,
+  overrides = {},
+  progressBar,
+  title,
+  topPosition,
+  trailingAction
+}) => {
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [TopContainer, topContainerProps] = getOverrides(overrides.TopContainer, StyledTopContainer);
+  const [BottomContainer, bottomContainerProps] = getOverrides(overrides.BottomContainer, StyledBottomContainer);
+  const [Header, headerProps] = getOverrides(overrides.Header, StyledHeader);
+  const [Grabber, grabberProps] = getOverrides(overrides.Grabber, StyledGrabber);
+  const [HeaderGrid, headerGridProps] = getOverrides(overrides.HeaderGrid, StyledHeaderGrid);
+  const [ActionButton, actionButtonProps] = getOverrides(overrides.ActionButton, DefaultActionButton);
+  const [EmptyDiv, emptyDivProps] = getOverrides(overrides.EmptyDiv, StyledEmptyDiv);
+  const [HeaderTextContainer, HeaderTextContainerProps] = getOverrides(overrides.HeaderTextContainer, StyledHeaderTextContainer);
+  const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
+  const [Description, descriptionProps] = getOverrides(overrides.Description, StyledDescription);
+  const [Divider, dividerProps] = getOverrides(overrides.Divider, StyledDivider);
+  const [Body, bodyProps] = getOverrides(overrides.Body, StyledBody);
+  const hasTitle = Boolean(title);
+  const hasDescription = Boolean(description);
+  const hasLeadingAction = Boolean(leadingAction);
+  const hasTrailingAction = Boolean(trailingAction);
+  const buttonSize = hasTitle ? BTN_SIZE.default : BTN_SIZE.compact;
+  const shouldDisplayHeader = draggable || hasTitle || hasDescription || hasLeadingAction || hasTrailingAction;
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    $draggable: draggable
+  }, rootProps), /*#__PURE__*/React.createElement(TopContainer, _extends({
+    $draggable: draggable,
+    $topPosition: topPosition
+  }, topContainerProps), children), /*#__PURE__*/React.createElement(BottomContainer, _extends({
+    $draggable: draggable,
+    $topPosition: topPosition
+  }, bottomContainerProps), shouldDisplayHeader && /*#__PURE__*/React.createElement(Header, headerProps, draggable && /*#__PURE__*/React.createElement(Grabber, grabberProps), /*#__PURE__*/React.createElement(HeaderGrid, _extends({
+    $hasLeadingAction: hasLeadingAction,
+    $hasTrailingAction: hasTrailingAction
+  }, headerGridProps), leadingAction && /*#__PURE__*/React.createElement(ActionButton, _extends({
+    onClick: leadingAction.onClick,
+    "aria-label": leadingAction.label,
+    size: buttonSize
+  }, actionButtonProps), renderActionButtonContent(leadingAction.renderIcon || leadingAction.label, buttonSize)), trailingAction && !leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps), (hasTitle || hasDescription) && /*#__PURE__*/React.createElement(HeaderTextContainer, _extends({
+    $draggable: draggable,
+    $hasTitle: hasTitle,
+    $hasDescription: hasDescription
+  }, HeaderTextContainerProps), title && /*#__PURE__*/React.createElement(Title, titleProps, title), description && /*#__PURE__*/React.createElement(Description, descriptionProps, description)), trailingAction && /*#__PURE__*/React.createElement(ActionButton, _extends({
+    onClick: trailingAction.onClick,
+    "aria-label": trailingAction.label,
+    size: buttonSize
+  }, actionButtonProps), renderActionButtonContent(trailingAction.renderIcon || trailingAction.label, buttonSize)), !trailingAction && leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps)), progressBar ? /*#__PURE__*/React.createElement(ProgressBar, _extends({
+    size: SIZE.small,
+    overrides: {
+      BarContainer: {
+        style: {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      }
+    }
+  }, progressBar)) : /*#__PURE__*/React.createElement(Divider, _extends({
+    $size: DIVIDER_SIZE.section
+  }, dividerProps))), /*#__PURE__*/React.createElement(Body, bodyProps, renderBodyContent(content))));
+};
+export default Sheet;

package/es/sheet/styled-components.js

@@ -0,0 +1,197 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { styled, withStyle } from '../styles';
+import { StyledDivider as StyledDividerBase } from '../divider';
+const DEFAULT_TOP_POSITION = '50vh';
+export const StyledRoot = styled('div', ({
+  $draggable
+}) => {
+  if ($draggable) {
+    return {
+      height: '100%',
+      position: 'relative'
+    };
+  }
+
+  return {
+    height: '100vh',
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column'
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledTopContainer = styled('div', ({
+  $draggable,
+  $topPosition = DEFAULT_TOP_POSITION
+}) => {
+  const baseStyles = {
+    height: '100%',
+    overflow: 'auto'
+  };
+
+  if ($draggable) {
+    return { ...baseStyles,
+      maxHeight: `calc(${$topPosition} + 14px)`,
+      maxWidth: '100vh',
+      position: 'fixed',
+      top: '0px',
+      left: '0px',
+      right: '0px'
+    };
+  }
+
+  return { ...baseStyles,
+    marginBottom: '-14px',
+    flexGrow: 1
+  };
+});
+StyledTopContainer.displayName = "StyledTopContainer";
+StyledTopContainer.displayName = 'StyledTopContainer';
+export const StyledBottomContainer = styled('div', ({
+  $draggable,
+  $topPosition,
+  $theme
+}) => {
+  const baseStyle = {
+    borderTopLeftRadius: $theme.borders.radius500,
+    borderTopRightRadius: $theme.borders.radius500,
+    backgroundColor: $theme.colors.backgroundPrimary
+  };
+  return $draggable ? {
+    position: 'relative',
+    top: $topPosition || DEFAULT_TOP_POSITION,
+    overflow: 'auto',
+    ...baseStyle
+  } : {
+    maxHeight: $topPosition || DEFAULT_TOP_POSITION,
+    ...baseStyle
+  };
+});
+StyledBottomContainer.displayName = "StyledBottomContainer";
+StyledBottomContainer.displayName = 'StyledBottomContainer';
+export const StyledHeader = styled('div', ({
+  $theme
+}) => ({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  paddingTop: $theme.sizing.scale300
+}));
+StyledHeader.displayName = "StyledHeader";
+StyledHeader.displayName = 'StyledHeader';
+export const StyledGrabber = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  paddingRight: 'auto',
+  paddingBottom: '12px',
+  paddingLeft: 'auto',
+  display: 'flex',
+  justifyContent: 'center',
+  position: 'relative',
+  ':after': {
+    content: '""',
+    height: $theme.sizing.scale100,
+    width: $theme.sizing.scale1200,
+    background: $theme.colors.borderOpaque,
+    borderRadius: '100px',
+    margin: '0 auto'
+  }
+}));
+StyledGrabber.displayName = "StyledGrabber";
+StyledGrabber.displayName = 'StyledGrabber';
+export const StyledHeaderGrid = styled('div', ({
+  $theme,
+  $hasLeadingAction,
+  $hasTrailingAction
+}) => {
+  const hasActionButton = $hasLeadingAction || $hasTrailingAction;
+  return {
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto',
+    alignItems: 'center',
+    paddingRight: hasActionButton ? $theme.sizing.scale300 : $theme.sizing.scale600,
+    paddingLeft: hasActionButton ? $theme.sizing.scale300 : $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale200,
+    ...($theme.direction === 'rtl' ? {
+      direction: 'rtl'
+    } : {})
+  };
+});
+StyledHeaderGrid.displayName = "StyledHeaderGrid";
+StyledHeaderGrid.displayName = 'StyledHeaderGrid';
+export const StyledEmptyDiv = styled('div', ({
+  $theme
+}) => ({
+  height: $theme.sizing.scale1200,
+  width: $theme.sizing.scale1200
+}));
+StyledEmptyDiv.displayName = "StyledEmptyDiv";
+StyledEmptyDiv.displayName = 'StyledEmptyDiv';
+export const StyledHeaderTextContainer = styled('div', ({
+  $draggable,
+  $hasTitle,
+  $hasDescription,
+  $theme
+}) => {
+  const height = $hasTitle && $hasDescription ? $theme.sizing.scale1400 : $hasTitle ? $theme.sizing.scale1200 : $hasDescription ? $theme.sizing.scale900 : $theme.sizing.scale800;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: $draggable ? `calc(${height} - 4px)` : height,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    gridColumn: '2 / 3'
+  };
+});
+StyledHeaderTextContainer.displayName = "StyledHeaderTextContainer";
+StyledHeaderTextContainer.displayName = 'StyledHeaderTextContainer';
+export const StyledTitle = styled('div', ({
+  $theme
+}) => ({
+  color: $theme.colors.contentPrimary,
+  maxWidth: 'inherit',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  ...$theme.typography.LabelLarge
+}));
+StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';
+export const StyledDescription = styled('div', ({
+  $theme
+}) => ({
+  color: $theme.colors.contentSecondary,
+  display: '-webkit-box',
+  '-webkit-line-clamp': 2,
+  '-webkit-box-orient': 'vertical',
+  overflow: 'hidden',
+  ...$theme.typography.ParagraphMedium
+}));
+StyledDescription.displayName = "StyledDescription";
+StyledDescription.displayName = 'StyledDescription';
+export const StyledDivider = withStyle(StyledDividerBase, {
+  width: '100%',
+  marginTop: 0,
+  marginBottom: 0
+});
+StyledDivider.displayName = "StyledDivider";
+StyledDivider.displayName = 'StyledDivider';
+export const StyledBody = styled('div', ({
+  $theme
+}) => ({
+  height: '100%',
+  overflow: 'auto',
+  color: $theme.colors.contentPrimary
+}));
+StyledBody.displayName = "StyledBody";
+StyledBody.displayName = 'StyledBody';

package/es/sheet/types.js

@@ -0,0 +1 @@
+export {};

package/es/side-navigation/index.js

@@ -5,7 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export { default as Navigation } from './nav';
-export { default as NavItem } from './nav-item'; // Styled elements
+export { default as NavItem } from './nav-item';
+export * from './side-navigation-next'; // Styled elements
 
 export * from './styled-components'; // Types
 

package/es/side-navigation/nav-item.js

@@ -71,7 +71,8 @@ class NavItem extends React.Component {
     }, sharedProps, itemProps), item.title));
   }
 
-}
+} // @ts-ignore
+
 
 _defineProperty(NavItem, "defaultProps", {
   overrides: {},

package/es/side-navigation/nav.js

@@ -49,13 +49,17 @@ export default class SideNav extends React.Component {
       overrides,
       mapItem
     } = this.props;
-    const navLevel = 1;
+    const navLevel = 1; // @ts-ignore
+
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-    const [NavItemContainer, itemContainerProps] = getOverrides(overrides.NavItemContainer, StyledNavItemContainer);
-    const [SubNavContainer, subNavContainerProps] = getOverrides(overrides.SubNavContainer, StyledSubNavContainer);
+    const [NavItemContainer, itemContainerProps] = getOverrides( // @ts-ignore
+    overrides.NavItemContainer, StyledNavItemContainer);
+    const [SubNavContainer, subNavContainerProps] = getOverrides( // @ts-ignore
+    overrides.SubNavContainer, StyledSubNavContainer); // @ts-ignore
 
     const renderNavItem = (item, level, index, mapItem) => {
       if (typeof mapItem === 'function') {
+        // @ts-ignore
         const recMapItem = item => {
           let subNav = [];
 
@@ -109,8 +113,11 @@ export default class SideNav extends React.Component {
 
 _defineProperty(SideNav, "defaultProps", {
   activeItemId: '/',
+  // @ts-ignore
   activePredicate: null,
+  // @ts-ignore
   items: [],
   overrides: {},
+  // @ts-ignore
   mapItem: null
 });

package/es/side-navigation/side-navigation-next.js

@@ -0,0 +1,271 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import React, { createContext, isValidElement, useContext, useEffect, useState } from 'react';
+import { useUID } from 'react-uid';
+import { getOverrides } from '../helpers/overrides';
+import ChevronDown from '../icon/chevron-down';
+import ChevronUp from '../icon/chevron-up';
+import { styled, useStyletron } from '../styles/index';
+const SideNavigationContext = /*#__PURE__*/createContext({
+  activeItemId: null
+});
+const StyledList = styled('ul', ({
+  $open = true
+}) => ({
+  display: $open ? 'block' : 'none',
+  margin: 0,
+  padding: 0
+}));
+StyledList.displayName = "StyledList";
+const StyledListItem = styled('li', {
+  listStyleType: 'none'
+});
+StyledListItem.displayName = "StyledListItem";
+export function SideNavigation(props) {
+  const {
+    activeItemId = null,
+    children,
+    overrides = {}
+  } = props;
+  const [List, listProps] = getOverrides(overrides.List, StyledList);
+  return /*#__PURE__*/React.createElement(SideNavigationContext.Provider, {
+    value: {
+      activeItemId
+    }
+  }, /*#__PURE__*/React.createElement(List, listProps, children));
+}
+const StyledStartWrapper = styled('div', () => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start'
+}));
+StyledStartWrapper.displayName = "StyledStartWrapper";
+const StyledEndWrapper = styled('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  width: $theme.sizing.scale900
+}));
+StyledEndWrapper.displayName = "StyledEndWrapper";
+const StyledStartEnhancerWrapper = styled('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  width: $theme.sizing.scale950
+}));
+StyledStartEnhancerWrapper.displayName = "StyledStartEnhancerWrapper";
+const StyledAction = styled('a', props => {
+  const {
+    $active,
+    $clickable,
+    $disabled,
+    $indent,
+    $theme
+  } = props;
+  const {
+    colors,
+    sizing,
+    typography
+  } = $theme;
+  const paddingLeft = parseInt(sizing.scale600) + parseInt(sizing.scale950) * Math.max($indent, 0) + 'px';
+  let style = {
+    alignItems: 'center',
+    background: 'none',
+    borderTop: 'none',
+    borderRight: 'none',
+    borderBottom: 'none',
+    borderLeft: $active ? `solid ${sizing.scale100} ${colors.contentPrimary}` : `solid ${sizing.scale100} transparent`,
+    boxShadow: $active ? 'inset 999px 999px 0px rgb(0 0 0 / 8%)' : 'none',
+    boxSizing: 'border-box',
+    color: !$clickable || $active ? colors.contentPrimary : colors.contentSecondary,
+    display: 'flex',
+    font: 'inherit',
+    justifyContent: 'space-between',
+    overflowWrap: 'anywhere',
+    paddingTop: sizing.scale550,
+    paddingRight: sizing.scale600,
+    paddingBottom: sizing.scale550,
+    paddingLeft,
+    textDecoration: 'none',
+    width: '100%',
+    ...typography.LabelMedium
+  };
+
+  if ($clickable) {
+    style[':hover'] = {
+      boxShadow: 'inset 999px 999px 0px rgb(0 0 0 / 4%)',
+      cursor: 'pointer'
+    };
+  }
+
+  if ($disabled) {
+    style.color = colors.contentStateDisabled;
+    style.cursor = 'not-allowed';
+  }
+
+  return style;
+});
+StyledAction.displayName = "StyledAction";
+
+function Item(props) {
+  const {
+    ariaControls,
+    ariaExpanded,
+    active = false,
+    disabled = false,
+    endEnhancer,
+    href,
+    indent = 0,
+    label,
+    onClick,
+    overrides = {},
+    startEnhancer
+  } = props;
+
+  if (!label) {
+    return null;
+  }
+
+  const [Action, actionProps] = getOverrides(overrides.Action, StyledAction);
+  const [EndWrapper, endWrapperProps] = getOverrides(overrides.EndWrapper, StyledEndWrapper);
+  const [StartEnhancerWrapper, startEnhancerWrapperProps] = getOverrides(overrides.StartEnhancerWrapper, StyledStartEnhancerWrapper);
+  const [StartWrapper, startWrapperProps] = getOverrides(overrides.StartWrapper, StyledStartWrapper);
+  const clickable = Boolean((onClick || href) && !disabled);
+  const actionElement = clickable ? href ? 'a' : 'button' : 'div';
+  return /*#__PURE__*/React.createElement(Action, _extends({
+    $active: active,
+    $as: actionElement,
+    $clickable: clickable,
+    $disabled: disabled,
+    $indent: indent,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    href: href,
+    onClick: onClick,
+    type: actionElement === 'button' ? 'button' : undefined
+  }, actionProps), /*#__PURE__*/React.createElement(StartWrapper, startWrapperProps, startEnhancer && /*#__PURE__*/React.createElement(StartEnhancerWrapper, startEnhancerWrapperProps, startEnhancer), label), endEnhancer && /*#__PURE__*/React.createElement(EndWrapper, endWrapperProps, endEnhancer));
+}
+
+export function SideNavigationHeader({
+  children,
+  overrides: {
+    ListItem,
+    ...overrides
+  } = {},
+  ...props
+}) {
+  const [OverridedListItem, listItemProps] = getOverrides(ListItem, StyledListItem);
+  return /*#__PURE__*/React.createElement(OverridedListItem, listItemProps, /*#__PURE__*/React.createElement(Item, _extends({}, props, {
+    label: children,
+    overrides: overrides
+  })));
+}
+export function SideNavigationItem({
+  children,
+  id,
+  overrides: {
+    ListItem,
+    ...overrides
+  } = {},
+  ...props
+}) {
+  const {
+    activeItemId
+  } = React.useContext(SideNavigationContext);
+  const [OverridedListItem, listItemProps] = getOverrides(ListItem, StyledListItem);
+  return /*#__PURE__*/React.createElement(OverridedListItem, listItemProps, /*#__PURE__*/React.createElement(Item, _extends({}, props, {
+    label: children,
+    active: activeItemId === id,
+    overrides: overrides
+  })));
+}
+export function SideNavigationSection(props) {
+  const {
+    active = false,
+    children,
+    forceOpen = false,
+    indent = 0,
+    overrides: {
+      List,
+      ListItem,
+      ...overrides
+    } = {},
+    startEnhancer,
+    title
+  } = props;
+  const [, theme] = useStyletron();
+  const {
+    activeItemId
+  } = useContext(SideNavigationContext);
+  const [open, setOpen] = useState(false);
+  const uid = useUID();
+  useEffect(() => {
+    let childIsActive = false;
+
+    if (activeItemId != null) {
+      let stack = React.Children.toArray(children);
+
+      while (stack.length) {
+        const current = stack.pop();
+
+        if ( /*#__PURE__*/isValidElement(current)) {
+          if (current.props.id === activeItemId) {
+            childIsActive = true;
+            break;
+          }
+
+          if (current.props.children) {
+            stack = stack.concat(React.Children.toArray(current.props.children));
+          }
+        }
+      }
+    }
+
+    if (childIsActive) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [activeItemId, children]);
+  useEffect(() => {
+    if (forceOpen) {
+      setOpen(true);
+    }
+  }, [forceOpen]);
+
+  if (React.Children.toArray(children).filter(React.isValidElement).length === 0) {
+    return null;
+  }
+
+  const Chevron = open ? ChevronUp : ChevronDown;
+  const [OverridedList, overridedListProps] = getOverrides(List, StyledList);
+  const [OverridedListItem, overridedListItemProps] = getOverrides(ListItem, StyledListItem);
+  return /*#__PURE__*/React.createElement(OverridedListItem, overridedListItemProps, /*#__PURE__*/React.createElement(Item, {
+    ariaControls: uid,
+    ariaExpanded: open,
+    endEnhancer: /*#__PURE__*/React.createElement(Chevron, {
+      title: "",
+      size: theme.sizing.scale800
+    }),
+    label: title,
+    indent: indent,
+    onClick: () => setOpen(prev => !prev),
+    overrides: overrides,
+    startEnhancer: startEnhancer
+  }), /*#__PURE__*/React.createElement(OverridedList, _extends({
+    id: uid,
+    $open: open
+  }, overridedListProps), React.Children.map(children, child => child === null ? null : /*#__PURE__*/React.cloneElement(child, {
+    indent: indent + 1
+  }))));
+}