baseui 13.0.0 → 15.0.0

package/es/tooltip/default-props.js

@@ -1,22 +0,0 @@
-/*
-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 { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants';
-const baseDefaultProps = {
-  accessibilityType: ACCESSIBILITY_TYPE.tooltip,
-  focusLock: false,
-  autoFocus: false,
-  returnFocus: false,
-  onMouseEnterDelay: 200,
-  onMouseLeaveDelay: 200,
-  overrides: {},
-  placement: PLACEMENT.auto,
-  popoverMargin: 0,
-  showArrow: false,
-  triggerType: TRIGGER_TYPE.hover,
-  renderAll: false
-};
-export default baseDefaultProps;

package/es/tooltip/index.js

@@ -1,15 +0,0 @@
-/*
-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 StatefulTooltip } from './stateful-tooltip';
-export { default as StatefulContainer } from './stateful-tooltip-container';
-export { default as Tooltip } from './tooltip'; // Constants
-
-export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, STATE_CHANGE_TYPE } from './constants'; // Styled elements
-
-export { Arrow as StyledArrow, Body as StyledBody, Inner as StyledInner } from './styled-components'; // Flow
-
-export * from './types';

package/es/tooltip/stateful-tooltip-container.js

@@ -1,23 +0,0 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/*
-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 { StatefulContainer as StatefulPopoverContainer } from '../popover';
-import baseDefaultProps from './default-props';
-
-class StatefulContainer extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(StatefulPopoverContainer, this.props);
-  }
-
-}
-
-_defineProperty(StatefulContainer, "defaultProps", { ...baseDefaultProps
-});
-
-export default StatefulContainer;

package/es/tooltip/stateful-tooltip.js

@@ -1,20 +0,0 @@
-/*
-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 StatefulContainer from './stateful-tooltip-container';
-import Tooltip from './tooltip';
-
-function StatefulTooltip(props) {
-  const {
-    children,
-    ...restProps
-  } = props;
-  return /*#__PURE__*/React.createElement(StatefulContainer, restProps, tooltipProps => /*#__PURE__*/React.createElement(Tooltip, tooltipProps, children));
-}
-
-StatefulTooltip.defaultProps = StatefulContainer.defaultProps;
-export default StatefulTooltip;

package/es/tooltip/styled-components.js

@@ -1,55 +0,0 @@
-/*
-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';
-import { getBodyStyles, getArrowStyles, getInnerStyles } from '../popover/styled-components';
-import { getEndPosition } from '../popover/utils';
-
-/**
- * We want to reuse the default Popover styles and add our overrides
- * for Tooltip. Normally you could do something like
- * withStyleDeep(StyledPopoverBody, {...}), however this break the
- * ability to use $style properly–the style overrides passed in by
- * the customer will override the base styles but not the styles
- * specified here.
- *
- * We could create our own withStyleDeep that also takes the $style
- * prop into account
- */
-export const Body = styled('div', props => ({ ...getBodyStyles(props),
-  backgroundColor: props.$theme.colors.tooltipBackground,
-  borderTopLeftRadius: props.$theme.borders.radius300,
-  borderTopRightRadius: props.$theme.borders.radius300,
-  borderBottomRightRadius: props.$theme.borders.radius300,
-  borderBottomLeftRadius: props.$theme.borders.radius300,
-  boxShadow: props.$theme.lighting.shadow400,
-  color: props.$theme.colors.tooltipText,
-  // Reset transition property to opacity only, and static transform
-  transitionProperty: 'opacity',
-  transform: getEndPosition(props.$popoverOffset)
-}));
-Body.displayName = "Body";
-Body.displayName = 'Body';
-export const Inner = styled('div', props => ({ ...getInnerStyles(props),
-  backgroundColor: props.$theme.colors.tooltipBackground,
-  borderTopLeftRadius: props.$theme.borders.radius300,
-  borderTopRightRadius: props.$theme.borders.radius300,
-  borderBottomRightRadius: props.$theme.borders.radius300,
-  borderBottomLeftRadius: props.$theme.borders.radius300,
-  paddingTop: props.$theme.sizing.scale300,
-  paddingBottom: props.$theme.sizing.scale300,
-  paddingLeft: props.$theme.sizing.scale600,
-  paddingRight: props.$theme.sizing.scale600,
-  ...props.$theme.typography.font150,
-  color: props.$theme.colors.tooltipText
-}));
-Inner.displayName = "Inner";
-Inner.displayName = 'Inner';
-export const Arrow = styled('div', props => ({ ...getArrowStyles(props),
-  backgroundColor: props.$theme.colors.tooltipBackground
-}));
-Arrow.displayName = "Arrow";
-Arrow.displayName = 'Arrow';

package/es/tooltip/tooltip.js

@@ -1,39 +0,0 @@
-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); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/*
-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.
-*/
-
-/* eslint-disable react/no-find-dom-node */
-import * as React from 'react';
-import { Popover } from '../popover';
-import { mergeOverrides } from '../helpers/overrides';
-import baseDefaultProps from './default-props';
-import { Arrow as StyledArrow, Body as StyledBody, Inner as StyledInner } from './styled-components';
-
-class Tooltip extends React.Component {
-  render() {
-    const overrides = mergeOverrides({
-      Arrow: StyledArrow,
-      Body: StyledBody,
-      Inner: StyledInner
-    }, this.props.overrides);
-    return /*#__PURE__*/React.createElement(Popover, _extends({
-      autoFocus: false,
-      "data-baseweb": "tooltip"
-    }, this.props, {
-      overrides: overrides
-    }));
-  }
-
-}
-
-_defineProperty(Tooltip, "defaultProps", { ...baseDefaultProps
-});
-
-export default Tooltip;

package/es/tooltip/types.js

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

package/es/tree-view/index.js

@@ -1,16 +0,0 @@
-/*
-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 { toggleIsExpanded } from './utils';
-export { default as TreeView } from './tree-view';
-export { default as StatefulTreeView } from './stateful-tree-view';
-export * from './types';
-export { StyledTreeItemList, StyledTreeItem, StyledItemContent, StyledIconContainer } from './styled-components';
-export { default as TreeLabel } from './tree-label';
-export { default as TreeLabelInteractable } from './tree-label-interactable';
-export { toggleIsExpanded };
-/** @deprecated use TreeNodeData instead. To be removed in future versions.*/
-// eslint-disable-next-line @typescript-eslint/no-explicit-any

package/es/tree-view/stateful-container.js

@@ -1,81 +0,0 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/*
-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';
-
-const findSiblings = (node, children) => {
-  if (children.indexOf(node) !== -1) {
-    return children;
-  }
-
-  for (let child of children) {
-    if (child.children) {
-      const siblings = findSiblings(node, child.children);
-
-      if (siblings != null) {
-        return siblings;
-      }
-    }
-  }
-
-  return null;
-};
-
-export default class StatefulContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "onToggle", node => {
-      const {
-        onToggle,
-        singleExpanded
-      } = this.props;
-      this.setState(prevState => {
-        const shouldExpand = !node.isExpanded;
-
-        if (singleExpanded && shouldExpand) {
-          const siblings = findSiblings(node, prevState.data);
-
-          if (siblings != null) {
-            siblings.forEach(sibling => {
-              if (sibling !== node) {
-                sibling.isExpanded = false;
-              }
-            });
-          }
-        }
-
-        node.isExpanded = shouldExpand;
-        return {
-          data: prevState.data
-        };
-      }, () => {
-        onToggle && onToggle(node);
-      });
-    });
-
-    this.state = {
-      data: this.props.data
-    };
-  }
-
-  render() {
-    const {
-      children,
-      ...restProps
-    } = this.props;
-    const {
-      onToggle
-    } = this;
-    return children(Object.freeze({ ...restProps,
-      ...this.state,
-      onToggle
-    }));
-  }
-
-}

package/es/tree-view/stateful-tree-view.js

@@ -1,12 +0,0 @@
-/*
-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 StatefulContainer from './stateful-container';
-import TreeView from './tree-view';
-export default function StatefulTreeView(props) {
-  return /*#__PURE__*/React.createElement(StatefulContainer, props, treeViewProps => /*#__PURE__*/React.createElement(TreeView, treeViewProps));
-}

package/es/tree-view/styled-components.js

@@ -1,115 +0,0 @@
-/*
-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 StyledTreeItemList = styled('ul', ({
-  $theme,
-  $indentGuides,
-  $isChildNode,
-  $expanded = true
-}) => {
-  const direction = $theme.direction === 'rtl' ? 'Right' : 'Left';
-  return {
-    marginTop: 0,
-    marginBottom: 0,
-    [`margin${direction}`]: $isChildNode ? $theme.sizing.scale550 : 0,
-    overflow: 'auto',
-    paddingTop: 0,
-    paddingBottom: 0,
-    [`padding${direction}`]: $isChildNode ? $theme.sizing.scale200 : 0,
-    position: 'relative',
-    outline: 'none',
-    display: $expanded ? 'block' : 'none',
-    [`border${direction}`]: $indentGuides && $isChildNode ? `1px solid ${$theme.colors.borderOpaque}` : 'none'
-  };
-});
-StyledTreeItemList.displayName = "StyledTreeItemList";
-StyledTreeItemList.displayName = 'StyledTreeItemList';
-export const StyledTreeItem = styled('li', ({
-  $theme,
-  $isLeafNode
-}) => {
-  return {
-    cursor: $isLeafNode ? 'auto' : 'pointer',
-    marginTop: 0,
-    marginBottom: 0,
-    marginLeft: 0,
-    marginRight: 0,
-    overflow: 'auto',
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    position: 'relative',
-    outline: 'none'
-  };
-});
-StyledTreeItem.displayName = "StyledTreeItem";
-StyledTreeItem.displayName = 'StyledTreeItem';
-export const StyledItemContent = styled('div', ({
-  $theme,
-  $isSelected,
-  $isFocusVisible
-}) => {
-  return { ...$theme.typography.font300,
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    color: $theme.colors.primary,
-    display: 'flex',
-    marginTop: 0,
-    marginBottom: 0,
-    marginLeft: 0,
-    marginRight: 0,
-    paddingLeft: $theme.sizing.scale200,
-    paddingRight: $theme.sizing.scale200,
-    paddingTop: $theme.sizing.scale100,
-    paddingBottom: $theme.sizing.scale100,
-    outline: $isSelected && $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
-    outlineOffset: '-3px',
-    ':hover': {
-      backgroundColor: $theme.colors.mono300
-    }
-  };
-});
-StyledItemContent.displayName = "StyledItemContent";
-StyledItemContent.displayName = 'StyledItemContent';
-export const StyledIconContainer = styled('div', ({
-  $theme
-}) => {
-  const marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: 0,
-    marginBottom: 0,
-    [marginDirection]: $theme.sizing.scale200
-  };
-});
-StyledIconContainer.displayName = "StyledIconContainer";
-StyledIconContainer.displayName = 'StyledIconContainer';
-export const StyledNoIconContainer = styled('div', ({
-  $theme
-}) => {
-  const marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: 0,
-    marginBottom: 0,
-    [marginDirection]: $theme.sizing.scale200,
-    width: 0,
-    height: '1em'
-  };
-});
-StyledNoIconContainer.displayName = "StyledNoIconContainer";
-StyledNoIconContainer.displayName = 'StyledNoIconContainer';
-export const StyledLabelInteractable = styled('div', () => ({
-  width: '100%'
-}));
-StyledLabelInteractable.displayName = "StyledLabelInteractable";
-StyledLabelInteractable.displayName = 'StyledLabelInteractable';

package/es/tree-view/tree-label-interactable.js

@@ -1,30 +0,0 @@
-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 from 'react';
-import { StyledLabelInteractable } from './styled-components';
-import { getOverride } from '../helpers/overrides';
-
-const TreeLabelInteractable = ({
-  overrides = {},
-  ...props
-}) => {
-  const LabelInteractable = getOverride(overrides.LabelInteractable) || StyledLabelInteractable;
-  return (
-    /*#__PURE__*/
-    // $FlowExpectedError[cannot-spread-inexact]
-    React.createElement(LabelInteractable // @ts-ignore
-    , _extends({
-      onClick: e => e.stopPropagation() // @ts-ignore
-      ,
-      onKeyDown: e => e.stopPropagation()
-    }, props))
-  );
-};
-
-export default TreeLabelInteractable;

package/es/tree-view/tree-label.js

@@ -1,64 +0,0 @@
-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 from 'react';
-import { ThemeContext } from '../styles/theme-provider';
-import { StyledIconContainer, StyledItemContent } from './styled-components';
-import ChevronRight from '../icon/chevron-right';
-import ChevronDown from '../icon/chevron-down';
-import ChevronLeft from '../icon/chevron-left';
-import BlankIcon from '../icon/blank';
-import { getOverride, getOverrideProps, getOverrides } from '../helpers/overrides';
-
-const TreeLabel = ({
-  hasChildren,
-  isExpanded,
-  label,
-  overrides = {},
-  node,
-  isSelected,
-  isFocusVisible,
-  ...props
-}) => {
-  const sharedProps = {
-    $isExpanded: !!isExpanded,
-    $isSelected: !!isSelected,
-    $isFocusVisible: !!isFocusVisible,
-    $hasChildren: !!hasChildren
-  };
-  const {
-    IconContainer: IconContainerOverride,
-    ExpandIcon: ExpandIconOverride,
-    CollapseIcon: CollapseIconOverride,
-    LeafIconContainer: LeafIconContainerOverride,
-    LeafIcon: LeafIconOverride,
-    TreeItemContent: TreeItemContentOverride
-  } = overrides;
-  const IconContainer = getOverride(IconContainerOverride) || StyledIconContainer;
-  const [Left, LeftProps] = getOverrides(ExpandIconOverride, ChevronLeft);
-  const [Right, RightProps] = getOverrides(ExpandIconOverride, ChevronRight);
-  const CollapseIcon = getOverride(CollapseIconOverride) || ChevronDown;
-  const LeafIconContainer = getOverride(LeafIconContainerOverride) || StyledIconContainer;
-  const LeafIcon = getOverride(LeafIconOverride) || BlankIcon;
-  const TreeItemContent = getOverride(TreeItemContentOverride) || StyledItemContent;
-  return (
-    /*#__PURE__*/
-    // $FlowExpectedError[cannot-spread-inexact]
-    React.createElement(TreeItemContent, _extends({}, sharedProps, props), hasChildren && /*#__PURE__*/React.createElement(IconContainer, _extends({}, sharedProps, getOverrideProps(IconContainerOverride)), !isExpanded ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
-      size: 16
-    }, sharedProps, LeftProps)) : /*#__PURE__*/React.createElement(Right, _extends({
-      size: 16
-    }, sharedProps, RightProps))) : /*#__PURE__*/React.createElement(CollapseIcon, _extends({
-      size: 16
-    }, sharedProps, getOverrideProps(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/React.createElement(LeafIconContainer, _extends({}, sharedProps, getOverrideProps(LeafIconContainerOverride)), /*#__PURE__*/React.createElement(LeafIcon, _extends({
-      size: 16
-    }, sharedProps, getOverrideProps(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
-  );
-};
-
-export default TreeLabel;

package/es/tree-view/tree-node.js

@@ -1,124 +0,0 @@
-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); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/*
-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 { StyledTreeItemList, StyledTreeItem } from './styled-components';
-import StyledTreeLabel from './tree-label';
-import { getOverride, getOverrideProps } from '../helpers/overrides';
-export default class TreeNode extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "treeItemRef", /*#__PURE__*/React.createRef());
-
-    _defineProperty(this, "onToggle", () => {
-      const {
-        onToggle,
-        node
-      } = this.props;
-
-      if (onToggle) {
-        onToggle(node);
-      }
-    });
-
-    _defineProperty(this, "onFocus", e => {
-      if (e && e.target !== this.treeItemRef.current) return;
-      const {
-        onFocus
-      } = this.props;
-
-      if (onFocus) {
-        onFocus(e);
-      }
-    });
-  }
-
-  componentDidMount() {
-    this.props.addRef(this.props.getId(this.props.node), this.treeItemRef);
-  }
-
-  componentWillUnmount() {
-    this.props.removeRef(this.props.getId(this.props.node));
-  }
-
-  render() {
-    const {
-      indentGuides,
-      node,
-      getId,
-      onToggle,
-      overrides = {},
-      renderAll,
-      selectedNodeId,
-      onKeyDown,
-      onFocus,
-      onBlur,
-      addRef,
-      removeRef,
-      isFocusVisible
-    } = this.props;
-    const {
-      children,
-      isExpanded,
-      label
-    } = node;
-    const hasChildren = children && children.length !== 0;
-    const {
-      TreeItemList: TreeItemListOverride,
-      TreeItem: TreeItemOverride,
-      TreeLabel: TreeLabelOverride
-    } = overrides;
-    const TreeItemList = getOverride(TreeItemListOverride) || StyledTreeItemList;
-    const TreeItem = getOverride(TreeItemOverride) || StyledTreeItem;
-    const TreeLabel = getOverride(TreeLabelOverride) || StyledTreeLabel;
-    return /*#__PURE__*/React.createElement(TreeItem, _extends({
-      role: "treeitem",
-      ref: this.treeItemRef,
-      "data-nodeid": getId(node),
-      tabIndex: selectedNodeId === getId(node) ? 0 : -1,
-      onKeyDown: e => onKeyDown && onKeyDown(e, node),
-      onBlur: onBlur,
-      onFocus: this.onFocus,
-      "aria-expanded": isExpanded,
-      $isLeafNode: !hasChildren
-    }, getOverrideProps(TreeItemOverride)), /*#__PURE__*/React.createElement(TreeLabel, _extends({
-      onClick: this.onToggle,
-      node: node,
-      hasChildren: hasChildren,
-      isExpanded: isExpanded,
-      isSelected: selectedNodeId === getId(node),
-      isFocusVisible: isFocusVisible,
-      label: label,
-      overrides: overrides
-    }, getOverrideProps(TreeLabelOverride))), children && (isExpanded || renderAll) && /*#__PURE__*/React.createElement(TreeItemList, _extends({
-      role: "group",
-      $indentGuides: !!indentGuides,
-      $isChildNode: true,
-      $expanded: !!isExpanded
-    }, getOverrideProps(TreeItemListOverride)), children.map((node, index) => /*#__PURE__*/React.createElement(TreeNode, {
-      indentGuides: !!indentGuides,
-      renderAll: renderAll,
-      key: index,
-      node: node,
-      getId: getId,
-      onToggle: onToggle,
-      overrides: overrides,
-      selectedNodeId: selectedNodeId,
-      onKeyDown: onKeyDown,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      addRef: addRef,
-      removeRef: removeRef,
-      isFocusVisible: isFocusVisible
-    }))));
-  }
-
-}