baseui 12.1.3 → 13.0.0

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
+  }))));
+}

package/es/side-navigation/styled-components.js

@@ -50,7 +50,8 @@ export const StyledNavLink = styled('a', ({
   }
 }));
 StyledNavLink.displayName = "StyledNavLink";
-StyledNavLink.displayName = 'StyledNavLink';
+StyledNavLink.displayName = 'StyledNavLink'; // @ts-ignore
+
 export const StyledNavItemElement = styled('div', props => {
   const {
     $active,
@@ -101,7 +102,8 @@ export const StyledNavItemElement = styled('div', props => {
   };
 });
 StyledNavItemElement.displayName = "StyledNavItemElement";
-StyledNavItemElement.displayName = 'StyledNavItemElement';
+StyledNavItemElement.displayName = 'StyledNavItemElement'; // @ts-ignore
+
 export const StyledNavItem = withWrapper(StyledNavItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function StyledNav({
   item,

package/es/skeleton/skeleton.js

@@ -30,6 +30,8 @@ class Skeleton extends React.Component {
       }, rootProps), Array(this.props.rows).fill(undefined).map((item, index) => /*#__PURE__*/React.createElement(Row, _extends({
         $animation: this.props.animation,
         key: index,
+        $rowIndex: index // @ts-ignore
+        ,
         $isLastRow: index === this.props.rows - 1
       }, rowProps))));
     }

package/es/skeleton/styled-components.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
 
+// @ts-ignore
 function getAnimationColor(props) {
   const {
     $theme

package/es/slider/slider.js

@@ -131,7 +131,8 @@ function Slider({
         },
         $thumbIndex: index,
         $isDragged: isDragged,
-        style: { ...props.style
+        style: { ...props.style,
+          zIndex: 'unset'
         }
       }, sharedProps, thumbProps, {
         $isFocusVisible: isFocusVisible && focusedThumbIndex === index

package/es/snackbar/snackbar-context.js

@@ -18,7 +18,8 @@ function fallbackHandler() {
   if (process.env.NODE_ENV !== "production") {
     console.warn('Snackbar context not found.');
   }
-}
+} // @ts-ignore
+
 
 export const SnackbarContext = /*#__PURE__*/React.createContext({
   enqueue: fallbackHandler,
@@ -30,7 +31,7 @@ export function useSnackbar() {
     enqueue: context.enqueue,
     dequeue: context.dequeue
   };
-}
+} // @ts-ignore
 
 function usePrevious(value) {
   const ref = React.useRef();
@@ -51,20 +52,23 @@ export default function SnackbarProvider({
   const [animating, setAnimating] = React.useState(false);
   const timeoutRef = React.useRef(null);
   const [containerHeight, setContainerHeight] = React.useState(0);
-  const containerRef = React.useRef(null);
+  const containerRef = React.useRef(null); // @ts-ignore
 
   function enqueue(elementProps, duration = defaultDuration) {
+    // @ts-ignore
     setSnackbars(prev => {
       return [...prev, {
         elementProps,
         duration
       }];
     });
-  }
+  } // @ts-ignore
+
 
   const prevSnackbars = usePrevious(snackbars) || [];
   React.useEffect(() => {
     if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      // @ts-ignore
       enter(snackbars[0].duration);
     }
   }, [snackbars, prevSnackbars]);
@@ -75,12 +79,14 @@ export default function SnackbarProvider({
       const next = prev.slice(1);
 
       if (next.length > 0) {
+        // @ts-ignore
         enter(next[0].duration);
       }
 
       return next;
     });
-  }
+  } // @ts-ignore
+
 
   function enter(duration) {
     setAnimating(true);
@@ -96,12 +102,14 @@ export default function SnackbarProvider({
       setAnimating(false);
       dequeue();
     }, 1000);
-  }
+  } // @ts-ignore
+
 
   function display(duration) {
     if (duration === DURATION.infinite) {
       return;
-    }
+    } // @ts-ignore
+
 
     timeoutRef.current = setTimeout(() => {
       exit();
@@ -109,14 +117,17 @@ export default function SnackbarProvider({
   }
 
   function handleMouseEnter() {
+    // @ts-ignore
     clearTimeout(timeoutRef.current);
-  }
+  } // @ts-ignore
+
 
   function handleMouseLeave(duration) {
     display(duration);
   }
 
   function handleActionClick() {
+    // @ts-ignore
     clearTimeout(timeoutRef.current);
     exit();
   }
@@ -161,8 +172,10 @@ export default function SnackbarProvider({
       left: '-10000px'
     }),
     ref: containerRef
-  }, snackbars[0] && /*#__PURE__*/React.createElement(SnackbarElement, _extends({}, snackbars[0].elementProps, {
+  }, snackbars[0] && /*#__PURE__*/React.createElement(SnackbarElement // @ts-ignore
+  , _extends({}, snackbars[0].elementProps, {
     overrides: { ...snackbarOverrides,
+      // @ts-ignore
       ...snackbars[0].elementProps.overrides
     },
     focus: false
@@ -172,21 +185,26 @@ export default function SnackbarProvider({
     $translateHeight: translateHeight
   }, placementContainerProps), /*#__PURE__*/React.createElement("div", {
     role: "alert",
-    onMouseEnter: handleMouseEnter,
+    onMouseEnter: handleMouseEnter // @ts-ignore
+    ,
     onMouseLeave: () => handleMouseLeave(snackbars[0].duration),
     className: css({
       display: 'inline',
       pointerEvents: 'all'
     })
-  }, /*#__PURE__*/React.createElement(SnackbarElement, _extends({}, snackbars[0].elementProps, {
+  }, /*#__PURE__*/React.createElement(SnackbarElement // @ts-ignore
+  , _extends({}, snackbars[0].elementProps, {
     actionOnClick: event => {
+      // @ts-ignore
       if (snackbars[0].elementProps.actionOnClick) {
+        // @ts-ignore
         snackbars[0].elementProps.actionOnClick(event);
       }
 
       handleActionClick();
     },
     overrides: { ...snackbarOverrides,
+      // @ts-ignore
       ...snackbars[0].elementProps.overrides
     }
   }))))), children);

package/es/snackbar/snackbar-element.js

@@ -97,12 +97,15 @@ export default function SnackbarElement({
   React.useEffect(() => {
     if (typeof document !== 'undefined') {
       if (focus && actionButtonRef.current) {
-        prevFocusRef.current = document.activeElement;
+        // @ts-ignore
+        prevFocusRef.current = document.activeElement; // @ts-ignore
+
         actionButtonRef.current.focus();
       }
 
       return () => {
         if (prevFocusRef.current) {
+          // @ts-ignore
           prevFocusRef.current.focus();
         }
       };

package/es/snackbar/styled-components.js

@@ -91,7 +91,7 @@ export const StyledActionButtonContainer = styled('div', ({
   };
 });
 StyledActionButtonContainer.displayName = "StyledActionButtonContainer";
-StyledActionButtonContainer.displayName = 'StyledActionButtonContainer';
+StyledActionButtonContainer.displayName = 'StyledActionButtonContainer'; // @ts-ignore
 
 function placementRules(placement) {
   switch (placement) {

package/es/spinner/styled-components.js

@@ -32,6 +32,7 @@ export const StyledSpinner = styled('i', ({
   }[$size];
 
   if (!borderSize) {
+    // @ts-ignore
     borderSize = $theme.sizing[$borderWidth];
 
     if (!borderSize) {
@@ -41,6 +42,7 @@ export const StyledSpinner = styled('i', ({
   }
 
   if (!boxSize) {
+    // @ts-ignore
     boxSize = $theme.sizing[$size];
 
     if (!boxSize) {

package/es/stepper/index.js

@@ -0,0 +1,8 @@
+/*
+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 Stepper } from './stepper';
+export * from './styled-components';
+export * from './types';

package/es/stepper/stepper.js

@@ -0,0 +1,89 @@
+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 { Button, KIND, SHAPE, SIZE } from '../button';
+import { Input as DefaultInput } from '../input';
+import { Plus, CheckIndeterminate } from '../icon';
+import { StyledRoot } from './styled-components';
+import { useStyletron } from '../styles';
+
+const DefaultButton = ({
+  children,
+  ...restProps
+}) => {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    shape: SHAPE.circle,
+    kind: KIND.secondary,
+    size: SIZE.compact
+  }, restProps), children);
+};
+
+export function Stepper({
+  value,
+  disabled = false,
+  overrides = {},
+  setValue,
+  minValue = 0,
+  maxValue
+}) {
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput);
+  const [DecrementButton, decrementButtonProps] = getOverrides(overrides.DecrementButton, DefaultButton);
+  const [DecrementButtonIcon, decrementButtonIconProps] = getOverrides(overrides.DecrementButtonIcon, CheckIndeterminate);
+  const [IncrementButton, incrementButtonProps] = getOverrides(overrides.DecrementButton, DefaultButton);
+  const [IncrementButtonIcon, incrementButtonIconProps] = getOverrides(overrides.DecrementButtonIcon, Plus);
+
+  const handleInputChange = e => {
+    const newValue = Number(e.target.value);
+
+    if (!isNaN(newValue) && (!maxValue || newValue <= maxValue) && newValue >= minValue) {
+      setValue(newValue);
+    }
+  };
+
+  const [, theme] = useStyletron();
+  return /*#__PURE__*/React.createElement(Root, rootProps, /*#__PURE__*/React.createElement(DecrementButton, _extends({
+    onClick: () => setValue(value - 1),
+    disabled: disabled || value <= minValue,
+    "aria-label": "decrement value"
+  }, decrementButtonProps), /*#__PURE__*/React.createElement(DecrementButtonIcon, decrementButtonIconProps)), /*#__PURE__*/React.createElement(Input, _extends({
+    value: value,
+    onChange: handleInputChange,
+    disabled: disabled,
+    "aria-label": "value",
+    overrides: {
+      Root: {
+        style: {
+          maxWidth: '36px',
+          height: '36px',
+          borderLeftStyle: 'none',
+          borderRightStyle: 'none',
+          borderTopStyle: 'none',
+          borderBottomStyle: 'none'
+        }
+      },
+      Input: {
+        style: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          textAlign: 'center',
+          backgroundColor: theme.colors.backgroundPrimary,
+          ...theme.typography.LabelLarge
+        }
+      }
+    }
+  }, inputProps)), /*#__PURE__*/React.createElement(IncrementButton, _extends({
+    onClick: () => setValue(value + 1),
+    disabled: disabled || value >= maxValue,
+    "aria-label": "increment value"
+  }, incrementButtonProps), /*#__PURE__*/React.createElement(IncrementButtonIcon, incrementButtonIconProps)));
+}
+export default Stepper;

package/es/stepper/styled-components.js

@@ -0,0 +1,19 @@
+/*
+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 } from '../styles';
+export const StyledRoot = styled('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  maxWidth: '139px',
+  height: '48px',
+  padding: $theme.sizing.scale550
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';

package/es/stepper/types.js

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

package/es/styles/__mocks__/styled.js

@@ -12,7 +12,7 @@ import * as React from 'react';
 import { getInitialStyle } from 'styletron-standard';
 import { LightTheme } from '../../themes';
 import createMockTheme from '../../test/create-mock-theme';
-const MOCK_THEME = createMockTheme(LightTheme);
+const MOCK_THEME = createMockTheme(LightTheme); // @ts-ignore
 
 const IDENTITY = x => x;
 
@@ -70,6 +70,7 @@ export function styled(ElementName, objOrFn = {}) {
       } = this.props;
       return Object.keys(restProps).reduce((acc, key) => {
         if (key[0] !== '$') {
+          // @ts-ignore
           acc[key] = restProps[key];
         }
 
@@ -95,7 +96,10 @@ export function styled(ElementName, objOrFn = {}) {
     wrapper: IDENTITY,
     base: ElementName
   };
-  return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(MockStyledComponent, _extends({
+  return /*#__PURE__*/React.forwardRef((props, ref) =>
+  /*#__PURE__*/
+  // @ts-ignore
+  React.createElement(MockStyledComponent, _extends({
     forwardedRef: ref
   }, props)));
 }

package/es/styles/as-primary-export-hoc.js

@@ -10,8 +10,10 @@ export default function asPrimaryExport(StyledComponent, propsTransformNames) {
   return function withStyledPropsHOC(props) {
     const styledProps = Object.keys(props).reduce((acc, key) => {
       if (key[0] === '$' || propsTransformNames.indexOf(key) < 0) {
+        // @ts-ignore
         acc[key] = props[key];
       } else if (propsTransformNames.indexOf(key) >= 0) {
+        // @ts-ignore
         acc['$' + key] = props[key];
       }
 

package/es/styles/styled.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { createStyled, withStyle as styletronWithStyle, useStyletron as styletronUseStyletron, withWrapper as styletronWithWrapper } from 'styletron-react';
 import { driver, getInitialStyle } from 'styletron-standard';
-import { ThemeContext } from './theme-provider';
+import { ThemeContext } from './theme-provider'; // @ts-ignore
 
 const wrapper = StyledComponent => {
   // eslint-disable-next-line react/display-name
@@ -45,6 +45,7 @@ export function createThemedUseStyletron() {
 export const useStyletron = createThemedUseStyletron(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 export function withWrapper(StyledElement, wrapperFn) {
+  // @ts-ignore
   return styletronWithWrapper(StyledElement, Styled => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => // @ts-ignore