baseui 12.2.0 → 13.0.0

package/sheet/styled-components.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTopContainer = exports.StyledTitle = exports.StyledRoot = exports.StyledHeaderTextContainer = exports.StyledHeaderGrid = exports.StyledHeader = exports.StyledGrabber = exports.StyledEmptyDiv = exports.StyledDivider = exports.StyledDescription = exports.StyledBottomContainer = exports.StyledBody = void 0;
+
+var _styles = require("../styles");
+
+var _divider = require("../divider");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
+
+var DEFAULT_TOP_POSITION = '50vh';
+var StyledRoot = (0, _styles.styled)('div', function (_ref) {
+  var $draggable = _ref.$draggable;
+
+  if ($draggable) {
+    return {
+      height: '100%',
+      position: 'relative'
+    };
+  }
+
+  return {
+    height: '100vh',
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column'
+  };
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledTopContainer = (0, _styles.styled)('div', function (_ref2) {
+  var $draggable = _ref2.$draggable,
+      _ref2$$topPosition = _ref2.$topPosition,
+      $topPosition = _ref2$$topPosition === void 0 ? DEFAULT_TOP_POSITION : _ref2$$topPosition;
+  var baseStyles = {
+    height: '100%',
+    overflow: 'auto'
+  };
+
+  if ($draggable) {
+    return _objectSpread(_objectSpread({}, baseStyles), {}, {
+      maxHeight: "calc(".concat($topPosition, " + 14px)"),
+      maxWidth: '100vh',
+      position: 'fixed',
+      top: '0px',
+      left: '0px',
+      right: '0px'
+    });
+  }
+
+  return _objectSpread(_objectSpread({}, baseStyles), {}, {
+    marginBottom: '-14px',
+    flexGrow: 1
+  });
+});
+exports.StyledTopContainer = StyledTopContainer;
+StyledTopContainer.displayName = "StyledTopContainer";
+StyledTopContainer.displayName = 'StyledTopContainer';
+var StyledBottomContainer = (0, _styles.styled)('div', function (_ref3) {
+  var $draggable = _ref3.$draggable,
+      $topPosition = _ref3.$topPosition,
+      $theme = _ref3.$theme;
+  var baseStyle = {
+    borderTopLeftRadius: $theme.borders.radius500,
+    borderTopRightRadius: $theme.borders.radius500,
+    backgroundColor: $theme.colors.backgroundPrimary
+  };
+  return $draggable ? _objectSpread({
+    position: 'relative',
+    top: $topPosition || DEFAULT_TOP_POSITION,
+    overflow: 'auto'
+  }, baseStyle) : _objectSpread({
+    maxHeight: $topPosition || DEFAULT_TOP_POSITION
+  }, baseStyle);
+});
+exports.StyledBottomContainer = StyledBottomContainer;
+StyledBottomContainer.displayName = "StyledBottomContainer";
+StyledBottomContainer.displayName = 'StyledBottomContainer';
+var StyledHeader = (0, _styles.styled)('div', function (_ref4) {
+  var $theme = _ref4.$theme;
+  return {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: $theme.sizing.scale300
+  };
+});
+exports.StyledHeader = StyledHeader;
+StyledHeader.displayName = "StyledHeader";
+StyledHeader.displayName = 'StyledHeader';
+var StyledGrabber = (0, _styles.styled)('div', function (_ref5) {
+  var $theme = _ref5.$theme;
+  return {
+    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'
+    }
+  };
+});
+exports.StyledGrabber = StyledGrabber;
+StyledGrabber.displayName = "StyledGrabber";
+StyledGrabber.displayName = 'StyledGrabber';
+var StyledHeaderGrid = (0, _styles.styled)('div', function (_ref6) {
+  var $theme = _ref6.$theme,
+      $hasLeadingAction = _ref6.$hasLeadingAction,
+      $hasTrailingAction = _ref6.$hasTrailingAction;
+  var hasActionButton = $hasLeadingAction || $hasTrailingAction;
+  return _objectSpread({
+    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'
+  } : {});
+});
+exports.StyledHeaderGrid = StyledHeaderGrid;
+StyledHeaderGrid.displayName = "StyledHeaderGrid";
+StyledHeaderGrid.displayName = 'StyledHeaderGrid';
+var StyledEmptyDiv = (0, _styles.styled)('div', function (_ref7) {
+  var $theme = _ref7.$theme;
+  return {
+    height: $theme.sizing.scale1200,
+    width: $theme.sizing.scale1200
+  };
+});
+exports.StyledEmptyDiv = StyledEmptyDiv;
+StyledEmptyDiv.displayName = "StyledEmptyDiv";
+StyledEmptyDiv.displayName = 'StyledEmptyDiv';
+var StyledHeaderTextContainer = (0, _styles.styled)('div', function (_ref8) {
+  var $draggable = _ref8.$draggable,
+      $hasTitle = _ref8.$hasTitle,
+      $hasDescription = _ref8.$hasDescription,
+      $theme = _ref8.$theme;
+  var 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(".concat(height, " - 4px)") : height,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    gridColumn: '2 / 3'
+  };
+});
+exports.StyledHeaderTextContainer = StyledHeaderTextContainer;
+StyledHeaderTextContainer.displayName = "StyledHeaderTextContainer";
+StyledHeaderTextContainer.displayName = 'StyledHeaderTextContainer';
+var StyledTitle = (0, _styles.styled)('div', function (_ref9) {
+  var $theme = _ref9.$theme;
+  return _objectSpread({
+    color: $theme.colors.contentPrimary,
+    maxWidth: 'inherit',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  }, $theme.typography.LabelLarge);
+});
+exports.StyledTitle = StyledTitle;
+StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';
+var StyledDescription = (0, _styles.styled)('div', function (_ref10) {
+  var $theme = _ref10.$theme;
+  return _objectSpread({
+    color: $theme.colors.contentSecondary,
+    display: '-webkit-box',
+    '-webkit-line-clamp': 2,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  }, $theme.typography.ParagraphMedium);
+});
+exports.StyledDescription = StyledDescription;
+StyledDescription.displayName = "StyledDescription";
+StyledDescription.displayName = 'StyledDescription';
+var StyledDivider = (0, _styles.withStyle)(_divider.StyledDivider, {
+  width: '100%',
+  marginTop: 0,
+  marginBottom: 0
+});
+exports.StyledDivider = StyledDivider;
+StyledDivider.displayName = "StyledDivider";
+StyledDivider.displayName = 'StyledDivider';
+var StyledBody = (0, _styles.styled)('div', function (_ref11) {
+  var $theme = _ref11.$theme;
+  return {
+    height: '100%',
+    overflow: 'auto',
+    color: $theme.colors.contentPrimary
+  };
+});
+exports.StyledBody = StyledBody;
+StyledBody.displayName = "StyledBody";
+StyledBody.displayName = 'StyledBody';

package/sheet/types.d.ts

@@ -0,0 +1,37 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { ProgressBarProps } from '../progress-bar';
+export type SheetOverrides = {
+    Root?: Override;
+    TopContainer?: Override;
+    Header?: Override;
+    Grabber?: Override;
+    HeaderGrid?: Override;
+    ActionButton?: Override;
+    EmptyDiv?: Override;
+    HeaderTextContainer?: Override;
+    Title?: Override;
+    Description?: Override;
+    Divider?: Override;
+    BottomContainer?: Override;
+    Body?: Override;
+};
+export type IconButton = {
+    renderIcon?: React.ComponentType<{
+        size: number;
+    }>;
+    onClick: () => void;
+    label: string;
+};
+export type SheetProps = {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    description?: string;
+    draggable?: boolean;
+    leadingAction?: IconButton;
+    overrides?: SheetOverrides;
+    progressBar?: ProgressBarProps;
+    title?: string;
+    topPosition?: string;
+    trailingAction?: IconButton;
+};

package/sheet/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/side-navigation/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Navigation } from './nav';
 export { default as NavItem } from './nav-item';
+export * from './side-navigation-next';
 export * from './styled-components';
 export * from './types';

package/side-navigation/index.js

@@ -24,6 +24,20 @@ var _nav = _interopRequireDefault(require("./nav"));
 
 var _navItem = _interopRequireDefault(require("./nav-item"));
 
+var _sideNavigationNext = require("./side-navigation-next");
+
+Object.keys(_sideNavigationNext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _sideNavigationNext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _sideNavigationNext[key];
+    }
+  });
+});
+
 var _styledComponents = require("./styled-components");
 
 Object.keys(_styledComponents).forEach(function (key) {

package/side-navigation/nav-item.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyledNavLink } from './styled-components';
 import type { NavItemProps } from './types';
-declare type SharedProps = Omit<React.ComponentProps<typeof StyledNavLink> & React.ComponentProps<typeof NavItem>, 'onSelect' | 'item' | 'overrides' | 'itemMemoizationComparator'>;
+type SharedProps = Omit<React.ComponentProps<typeof StyledNavLink> & React.ComponentProps<typeof NavItem>, 'onSelect' | 'item' | 'overrides' | 'itemMemoizationComparator'>;
 declare class NavItem extends React.Component<NavItemProps & SharedProps> {
     static defaultProps: {
         overrides: {};

package/side-navigation/nav-item.js

@@ -142,7 +142,8 @@ var NavItem = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return NavItem;
-}(React.Component);
+}(React.Component); // @ts-ignore
+
 
 _defineProperty(NavItem, "defaultProps", {
   overrides: {},

package/side-navigation/nav.js

@@ -118,25 +118,29 @@ var SideNav = /*#__PURE__*/function (_React$Component) {
           onChange = _this$props.onChange,
           overrides = _this$props.overrides,
           mapItem = _this$props.mapItem;
-      var navLevel = 1;
+      var navLevel = 1; // @ts-ignore
 
       var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
           _getOverrides2 = _slicedToArray(_getOverrides, 2),
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
-      var _getOverrides3 = (0, _overrides.getOverrides)(overrides.NavItemContainer, _styledComponents.StyledNavItemContainer),
+      var _getOverrides3 = (0, _overrides.getOverrides)( // @ts-ignore
+      overrides.NavItemContainer, _styledComponents.StyledNavItemContainer),
           _getOverrides4 = _slicedToArray(_getOverrides3, 2),
           NavItemContainer = _getOverrides4[0],
           itemContainerProps = _getOverrides4[1];
 
-      var _getOverrides5 = (0, _overrides.getOverrides)(overrides.SubNavContainer, _styledComponents.StyledSubNavContainer),
+      var _getOverrides5 = (0, _overrides.getOverrides)( // @ts-ignore
+      overrides.SubNavContainer, _styledComponents.StyledSubNavContainer),
           _getOverrides6 = _slicedToArray(_getOverrides5, 2),
           SubNavContainer = _getOverrides6[0],
-          subNavContainerProps = _getOverrides6[1];
+          subNavContainerProps = _getOverrides6[1]; // @ts-ignore
+
 
       var renderNavItem = function renderNavItem(item, level, index, mapItem) {
         if (typeof mapItem === 'function') {
+          // @ts-ignore
           var recMapItem = function recMapItem(item) {
             var subNav = [];
 
@@ -194,8 +198,11 @@ exports.default = SideNav;
 
 _defineProperty(SideNav, "defaultProps", {
   activeItemId: '/',
+  // @ts-ignore
   activePredicate: null,
+  // @ts-ignore
   items: [],
   overrides: {},
+  // @ts-ignore
   mapItem: null
 });

package/side-navigation/side-navigation-next.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import type { Override } from '../helpers/overrides';
+type SideNavigationProps = {
+    activeItemId: string | null;
+    children: ReactNode | undefined | null;
+    overrides?: {
+        List?: Override;
+    };
+};
+export declare function SideNavigation(props: SideNavigationProps): JSX.Element;
+type ItemProps = {
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    endEnhancer?: ReactNode;
+    href?: string;
+    indent?: number;
+    label: string;
+    onClick?: () => void;
+    overrides?: {
+        Action?: Override;
+        EndWrapper?: Override;
+        StartEnhancerWrapper?: Override;
+        StartWrapper?: Override;
+    };
+    startEnhancer?: ReactNode;
+};
+type SideNavigationHeaderProps = {
+    children: ItemProps['label'];
+    endEnhancer?: ItemProps['endEnhancer'];
+    startEnhancer?: ItemProps['startEnhancer'];
+    overrides?: ItemProps['overrides'] & {
+        ListItem?: Override;
+    };
+};
+export declare function SideNavigationHeader({ children, overrides: { ListItem, ...overrides }, ...props }: SideNavigationHeaderProps): JSX.Element;
+type SideNavigationItemProps = {
+    children: ItemProps['label'];
+    disabled?: boolean;
+    endEnhancer?: ItemProps['endEnhancer'];
+    href?: ItemProps['href'];
+    id: string;
+    initiallyActive?: ItemProps['active'];
+    onClick?: ItemProps['onClick'];
+    overrides?: ItemProps['overrides'] & {
+        ListItem?: Override;
+    };
+    startEnhancer?: ItemProps['startEnhancer'];
+};
+export declare function SideNavigationItem({ children, id, overrides: { ListItem, ...overrides }, ...props }: SideNavigationItemProps): JSX.Element;
+type SideNavigationSectionProps = {
+    active?: boolean;
+    children: React.ChildrenArray<ReactElement<typeof SideNavigationItem> | ReactElement<typeof SideNavigationSection> | ReactElement<typeof SideNavigationHeader> | null>;
+    forceOpen?: boolean;
+    indent: number;
+    overrides?: ItemProps['overrides'] & {
+        List?: Override;
+        ListItem?: Override;
+    };
+    startEnhancer?: ReactNode;
+    title: string;
+};
+export declare function SideNavigationSection(props: SideNavigationSectionProps): JSX.Element;
+export {};