baseui 12.1.3 → 12.2.0

package/esm/data-table/stateful-container.js

@@ -41,55 +41,66 @@ function useDuplicateColumnTitleWarning(columns) {
   }, [columns]);
 }
 
-function useSortParameters() {
-  var initialSortIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-  var initialSortDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+export var StatefulContainer = function StatefulContainer(props) {
+  useDuplicateColumnTitleWarning(props.columns);
 
-  var _React$useState = React.useState(initialSortIndex),
+  var _React$useState = React.useState(typeof props.initialSortIndex === 'number' ? props.initialSortIndex : -1),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       sortIndex = _React$useState2[0],
       setSortIndex = _React$useState2[1];
 
-  var _React$useState3 = React.useState(initialSortDirection),
+  var _React$useState3 = React.useState(props.initialSortDirection),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       sortDirection = _React$useState4[0],
       setSortDirection = _React$useState4[1];
 
+  var _React$useState5 = React.useState(props.initialFilters || new Map()),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      filters = _React$useState6[0],
+      setFilters = _React$useState6[1];
+
+  var _React$useState7 = React.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      textQuery = _React$useState8[0],
+      setTextQuery = _React$useState8[1];
+
+  var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      selectedRowIds = _React$useState10[0],
+      setSelectedRowIds = _React$useState10[1];
+
   function handleSort(columnIndex) {
+    var nextSortIndex;
+    var nextSortDirection;
+
     if (columnIndex === sortIndex) {
       if (sortDirection === SORT_DIRECTIONS.DESC) {
-        setSortIndex(-1);
-        setSortDirection(SORT_DIRECTIONS.ASC);
+        nextSortIndex = -1;
+        nextSortDirection = SORT_DIRECTIONS.ASC;
       } else {
-        setSortDirection(SORT_DIRECTIONS.DESC);
+        nextSortIndex = columnIndex;
+        nextSortDirection = SORT_DIRECTIONS.DESC;
       }
     } else {
-      setSortIndex(columnIndex);
-      setSortDirection(SORT_DIRECTIONS.ASC);
+      nextSortIndex = columnIndex;
+      nextSortDirection = SORT_DIRECTIONS.ASC;
     }
-  }
-
-  return [sortIndex, sortDirection, handleSort];
-}
 
-export var StatefulContainer = function StatefulContainer(props) {
-  useDuplicateColumnTitleWarning(props.columns);
+    setSortIndex(nextSortIndex);
+    setSortDirection(nextSortDirection);
 
-  var _useSortParameters = useSortParameters(props.initialSortIndex, props.initialSortDirection),
-      _useSortParameters2 = _slicedToArray(_useSortParameters, 3),
-      sortIndex = _useSortParameters2[0],
-      sortDirection = _useSortParameters2[1],
-      handleSort = _useSortParameters2[2];
+    if (props.onSort) {
+      props.onSort(nextSortIndex, nextSortDirection);
+    }
+  }
 
-  var _React$useState5 = React.useState(props.initialFilters || new Map()),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      filters = _React$useState6[0],
-      setFilters = _React$useState6[1];
+  function handleTextQueryChange(nextTextQuery) {
+    setTextQuery(nextTextQuery);
 
-  var _React$useState7 = React.useState(''),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      textQuery = _React$useState8[0],
-      setTextQuery = _React$useState8[1];
+    if (props.onTextQueryChange) {
+      props.onTextQueryChange(nextTextQuery);
+    }
+  }
 
   function handleFilterAdd(title, filterParams) {
     filters.set(title, filterParams);
@@ -111,11 +122,6 @@ export var StatefulContainer = function StatefulContainer(props) {
     setFilters(new Map(filters));
   }
 
-  var _React$useState9 = React.useState(props.initialSelectedRowIds || new Set()),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      selectedRowIds = _React$useState10[0],
-      setSelectedRowIds = _React$useState10[1];
-
   function handleSelectChange(next) {
     setSelectedRowIds(next);
     var selectionCallback = props.onSelectionChange;
@@ -168,7 +174,7 @@ export var StatefulContainer = function StatefulContainer(props) {
     onSelectNone: handleSelectNone,
     onSelectOne: handleSelectOne,
     onSort: handleSort,
-    onTextQueryChange: setTextQuery,
+    onTextQueryChange: handleTextQueryChange,
     resizableColumnWidths: Boolean(props.resizableColumnWidths),
     rowHighlightIndex: props.rowHighlightIndex,
     selectedRowIds: selectedRowIds,

package/esm/data-table/stateful-data-table.js

@@ -201,6 +201,8 @@ export function StatefulDataTable(props) {
     onIncludedRowsChange: props.onIncludedRowsChange,
     onRowHighlightChange: props.onRowHighlightChange,
     onSelectionChange: props.onSelectionChange,
+    onSort: props.onSort,
+    onTextQueryChange: props.onTextQueryChange,
     resizableColumnWidths: props.resizableColumnWidths,
     rows: props.rows,
     rowActions: props.rowActions,

package/esm/input/base-input.js

@@ -315,14 +315,11 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          value = _this$props3.value,
-          type = _this$props3.type,
-          _this$props3$override = _this$props3.overrides,
-          InputContainerOverride = _this$props3$override.InputContainer,
-          InputOverride = _this$props3$override.Input,
-          BeforeOverride = _this$props3$override.Before,
-          AfterOverride = _this$props3$override.After; // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
+      var _this$props$overrides = this.props.overrides,
+          InputContainerOverride = _this$props$overrides.InputContainer,
+          InputOverride = _this$props$overrides.Input,
+          BeforeOverride = _this$props$overrides.Before,
+          AfterOverride = _this$props$overrides.After; // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
 
       var autoComplete = this.state.initialType === 'password' && this.props.autoComplete === BaseInput.defaultProps.autoComplete ? 'new-password' : this.props.autoComplete;
       var sharedProps = getSharedProps(this.props, this.state);
@@ -384,7 +381,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
         max: this.props.max,
         step: this.props.step,
         rows: this.props.type === CUSTOM_INPUT_TYPE.textarea ? this.props.rows : null
-      }, sharedProps, inputProps), type === CUSTOM_INPUT_TYPE.textarea ? value : null), this.renderClear(), this.renderMaskToggle(), /*#__PURE__*/React.createElement(After, _extends({}, sharedProps, afterProps)));
+      }, sharedProps, inputProps)), this.renderClear(), this.renderMaskToggle(), /*#__PURE__*/React.createElement(After, _extends({}, sharedProps, afterProps)));
     }
   }]);
 

package/esm/layer/tether.js

@@ -129,7 +129,7 @@ var Tether = /*#__PURE__*/function (_React$Component) {
           if (!this.props.anchorRef) {
             if (process.env.NODE_ENV !== "production") {
               // eslint-disable-next-line no-console
-              console.warn("[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              http://baseui.design/components/popover#anchor-ref-handling-example");
+              console.warn("[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              https://baseweb.design/components/popover/#anchor-ref-handling-example");
             }
           } else {
             this.initializePopper();

package/esm/popover/popover.js

@@ -173,7 +173,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      if (!anchor || anchor === target || target instanceof Node && popper.contains(target)) {
+      if (!anchor || anchor === target || target instanceof Node && anchor.contains(target)) {
         return;
       }
 
@@ -206,7 +206,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       if (process.env.NODE_ENV !== "production") {
         if (!this.anchorRef.current) {
           // eslint-disable-next-line no-console
-          console.warn("[baseui][Popover] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              http://baseui.design/components/popover#anchor-ref-handling-example");
+          console.warn("[baseui][Popover] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              https://baseweb.design/components/popover/#anchor-ref-handling-example");
         }
       }
     }

package/esm/themes/dark-theme/color-component-tokens.js

@@ -24,7 +24,7 @@ export default (function () {
     bannerActionHighPositive: themePrimitives.positive600,
     bannerActionHighWarning: themePrimitives.warning600,
     // Buttons
-    buttonPrimaryFill: themePrimitives.primary,
+    buttonPrimaryFill: themePrimitives.primaryA,
     buttonPrimaryText: themePrimitives.black,
     buttonPrimaryHover: themePrimitives.primary100,
     buttonPrimaryActive: themePrimitives.primary200,

package/header-navigation/types.d.ts

@@ -1,7 +1,8 @@
+import type { PropsWithChildren } from 'react';
 import type { Override } from '../helpers/overrides';
 export declare type HeaderNavigationOverrides = {
     Root?: Override;
 };
-export declare type HeaderNavigationProps = {
+export declare type HeaderNavigationProps = PropsWithChildren<{
     overrides: HeaderNavigationOverrides;
-};
+}>;

package/header-navigation/types.js.flow

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
+import * as React from 'react';
 import type { OverrideT } from '../helpers/overrides.js';
 
 export type OverridesT = {
@@ -13,6 +14,7 @@ export type OverridesT = {
 
 export type PropsT = {
   overrides: OverridesT,
+  children?: React.Node,
 };
 
 declare var __DEV__: boolean;

package/input/base-input.js

@@ -327,14 +327,11 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          value = _this$props3.value,
-          type = _this$props3.type,
-          _this$props3$override = _this$props3.overrides,
-          InputContainerOverride = _this$props3$override.InputContainer,
-          InputOverride = _this$props3$override.Input,
-          BeforeOverride = _this$props3$override.Before,
-          AfterOverride = _this$props3$override.After; // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
+      var _this$props$overrides = this.props.overrides,
+          InputContainerOverride = _this$props$overrides.InputContainer,
+          InputOverride = _this$props$overrides.Input,
+          BeforeOverride = _this$props$overrides.Before,
+          AfterOverride = _this$props$overrides.After; // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
 
       var autoComplete = this.state.initialType === 'password' && this.props.autoComplete === BaseInput.defaultProps.autoComplete ? 'new-password' : this.props.autoComplete;
       var sharedProps = (0, _utils.getSharedProps)(this.props, this.state);
@@ -396,7 +393,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
         max: this.props.max,
         step: this.props.step,
         rows: this.props.type === _constants.CUSTOM_INPUT_TYPE.textarea ? this.props.rows : null
-      }, sharedProps, inputProps), type === _constants.CUSTOM_INPUT_TYPE.textarea ? value : null), this.renderClear(), this.renderMaskToggle(), /*#__PURE__*/React.createElement(After, _extends({}, sharedProps, afterProps)));
+      }, sharedProps, inputProps)), this.renderClear(), this.renderMaskToggle(), /*#__PURE__*/React.createElement(After, _extends({}, sharedProps, afterProps)));
     }
   }]);
 

package/layer/tether.js

@@ -139,7 +139,7 @@ var Tether = /*#__PURE__*/function (_React$Component) {
           if (!this.props.anchorRef) {
             if (process.env.NODE_ENV !== "production") {
               // eslint-disable-next-line no-console
-              console.warn("[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              http://baseui.design/components/popover#anchor-ref-handling-example");
+              console.warn("[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              https://baseweb.design/components/popover/#anchor-ref-handling-example");
             }
           } else {
             this.initializePopper();

package/layer/tether.js.flow

@@ -67,7 +67,7 @@ class Tether extends React.Component<TetherPropsT, TetherStateT> {
             console.warn(
               `[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.
               See how to pass the ref to an anchor element in the Popover example
-              http://baseui.design/components/popover#anchor-ref-handling-example`
+              https://baseweb.design/components/popover/#anchor-ref-handling-example`
             );
           }
         } else {

package/layout-grid/types.d.ts

@@ -26,7 +26,7 @@ export declare type GridProps = {
     /** Grid container behavior beyond max width. Fluid will continue to expand. Fixed will limit grid container to max width and center the container horizontally within parent element. */
     behavior?: Behavior;
     /** Children should be Cells. */
-    children: React.ReactElement | React.ReactElement[];
+    children: React.ReactNode;
     /** Gap on either side of grid container at each breakpoint. */
     gridMargins?: Responsive<number>;
     /** Maximum width of the grid container. Does not include Margins. Only applies when `behavior` is `fluid`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "12.1.3",
+  "version": "12.2.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/popover/popover.js

@@ -188,7 +188,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      if (!anchor || anchor === target || target instanceof Node && popper.contains(target)) {
+      if (!anchor || anchor === target || target instanceof Node && anchor.contains(target)) {
         return;
       }
 
@@ -221,7 +221,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       if (process.env.NODE_ENV !== "production") {
         if (!this.anchorRef.current) {
           // eslint-disable-next-line no-console
-          console.warn("[baseui][Popover] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              http://baseui.design/components/popover#anchor-ref-handling-example");
+          console.warn("[baseui][Popover] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              https://baseweb.design/components/popover/#anchor-ref-handling-example");
         }
       }
     }

package/popover/popover.js.flow

@@ -79,7 +79,7 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
         console.warn(
           `[baseui][Popover] ref has not been passed to the Popper's anchor element.
               See how to pass the ref to an anchor element in the Popover example
-              http://baseui.design/components/popover#anchor-ref-handling-example`
+              https://baseweb.design/components/popover/#anchor-ref-handling-example`
         );
       }
     }
@@ -115,7 +115,7 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
       isAnimating: false,
       arrowOffset: { left: 0, top: 0 },
       popoverOffset: { left: 0, top: 0 },
-      placement: props.placement,
+      placement: props.placement || PLACEMENT.auto,
       isMounted: false,
       isLayerMounted: false,
       autoFocusAfterPositioning: false,
@@ -328,7 +328,7 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
 
   getSharedProps(): $Diff<SharedStylePropsArgT, { children?: React.Node }> {
     const { isOpen, showArrow, popoverMargin = POPOVER_MARGIN } = this.props;
-    const { isAnimating, arrowOffset, popoverOffset, placement } = this.state;
+    const { isAnimating, arrowOffset, popoverOffset, placement = PLACEMENT.auto } = this.state;
     return {
       $showArrow: !!showArrow,
       $arrowOffset: arrowOffset,

package/popover/types.d.ts

@@ -61,7 +61,7 @@ export declare type BasePopoverProps = {
     onMouseLeaveDelay?: number;
     overrides?: PopoverOverrides;
     /** How to position the popover relative to the target. */
-    placement: TetherPlacement;
+    placement?: TetherPlacement;
     /** Popper options override
      * https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md
      */
@@ -75,7 +75,7 @@ export declare type BasePopoverProps = {
     /** Whether or not to show the arrow pointing from the popover to the trigger. */
     showArrow?: boolean;
     /** Whether to toggle the popover when trigger is clicked or hovered. */
-    triggerType: TriggerType;
+    triggerType?: TriggerType;
     /** Margin of the popover */
     popoverMargin?: number;
 };
@@ -101,9 +101,9 @@ export declare type StatefulPopoverProps = BasePopoverProps & {
     /** Content to render within the popover when it's shown. */
     content: React.ReactNode | StatefulContentRenderProp;
     /** Whether to hide the popover when the user clicks anywhere outside the trigger/popover. */
-    dismissOnClickOutside: boolean;
+    dismissOnClickOutside?: boolean;
     /** Whether to hide the popover when the user presses the escape key. */
-    dismissOnEsc: boolean;
+    dismissOnEsc?: boolean;
     /** Initial state populated into the component */
     initialState?: State;
     /** Event handler when popover is hidden. */

package/popover/types.js.flow

@@ -86,7 +86,7 @@ export type BasePopoverPropsT = {
   onMouseLeaveDelay?: number,
   overrides?: OverridesT,
   /** How to position the popover relative to the target. */
-  placement: TetherPlacementT,
+  placement?: TetherPlacementT,
   /** Popper options override
    * https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md
    */
@@ -101,7 +101,7 @@ export type BasePopoverPropsT = {
   /** Whether or not to show the arrow pointing from the popover to the trigger. */
   showArrow?: boolean,
   /** Whether to toggle the popover when trigger is clicked or hovered. */
-  triggerType: TriggerTypeT,
+  triggerType?: TriggerTypeT,
   /** Margin of the popover */
   popoverMargin?: number,
 };
@@ -131,9 +131,9 @@ export type StatefulPopoverPropsT = BasePopoverPropsT & {
   /** Content to render within the popover when it's shown. */
   content: React.Node | StatefulContentRenderPropT,
   /** Whether to hide the popover when the user clicks anywhere outside the trigger/popover. */
-  dismissOnClickOutside: boolean,
+  dismissOnClickOutside?: boolean,
   /** Whether to hide the popover when the user presses the escape key. */
-  dismissOnEsc: boolean,
+  dismissOnEsc?: boolean,
   /** Initial state populated into the component */
   initialState?: StateT,
   /** Event handler when popover is hidden. */

package/skeleton/skeleton.js.flow

@@ -36,7 +36,7 @@ class Skeleton extends React.Component<SkeletonPropsT> {
               <Row
                 $animation={this.props.animation}
                 key={index}
-                $isLastRow={index === this.props.rows - 1}
+                $isLastRow={index === (typeof this.props.rows !== 'undefined' ? this.props.rows : 0) - 1}
                 {...rowProps}
               ></Row>
             ))}

package/skeleton/types.d.ts

@@ -6,7 +6,7 @@ export declare type SkeletonOverrides = {
 export declare type SkeletonProps = {
     overrides?: SkeletonOverrides;
     /** Defines the number of row element in a skeleton */
-    rows: number;
+    rows?: number;
     /** Defines if the skeleton has an animation default is false*/
     animation: boolean;
     /** Defines the height of the skeleton container*/

package/skeleton/types.js.flow

@@ -16,7 +16,7 @@ export type OverridesT = {
 export type SkeletonPropsT = {
   overrides?: OverridesT,
   /** Defines the number of row element in a skeleton */
-  rows: number,
+  rows?: number,
   /** Defines if the skeleton has an animation default is false*/
   animation: boolean,
   /** Defines the height of the skeleton container*/

package/themes/dark-theme/color-component-tokens.js

@@ -34,7 +34,7 @@ var _default = function _default() {
     bannerActionHighPositive: themePrimitives.positive600,
     bannerActionHighWarning: themePrimitives.warning600,
     // Buttons
-    buttonPrimaryFill: themePrimitives.primary,
+    buttonPrimaryFill: themePrimitives.primaryA,
     buttonPrimaryText: themePrimitives.black,
     buttonPrimaryHover: themePrimitives.primary100,
     buttonPrimaryActive: themePrimitives.primary200,

package/themes/dark-theme/color-component-tokens.js.flow

@@ -26,7 +26,7 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
   bannerActionHighWarning: themePrimitives.warning600,
 
   // Buttons
-  buttonPrimaryFill: themePrimitives.primary,
+  buttonPrimaryFill: themePrimitives.primaryA,
   buttonPrimaryText: themePrimitives.black,
   buttonPrimaryHover: themePrimitives.primary100,
   buttonPrimaryActive: themePrimitives.primary200,

package/themes/types.d.ts

@@ -78,17 +78,17 @@ export declare type CoreSemanticColorTokens = {
     contentInverseSecondary: string;
     contentInverseTertiary: string;
     borderOpaque: string;
-    borderTransparent: string | undefined | null;
+    borderTransparent?: string;
     borderSelected: string;
     borderInverseOpaque: string;
-    borderInverseTransparent: string | undefined | null;
+    borderInverseTransparent?: string;
     borderInverseSelected: string;
 };
 export declare type CoreExtensionSemanticColorTokens = {
     backgroundStateDisabled: string;
-    backgroundOverlayDark: string | undefined | null;
-    backgroundOverlayLight: string | undefined | null;
-    backgroundOverlayArt: string | undefined | null;
+    backgroundOverlayDark?: string;
+    backgroundOverlayLight?: string;
+    backgroundOverlayArt?: string;
     backgroundAccent: string;
     backgroundNegative: string;
     backgroundWarning: string;

package/tree-view/tree-label-interactable.d.ts

@@ -1,8 +1,8 @@
 import type { Override } from '../helpers/overrides';
-import type { ComponentType } from 'react';
-declare const TreeLabelInteractable: ComponentType<{
+import type { ComponentType, PropsWithChildren } from 'react';
+declare const TreeLabelInteractable: PropsWithChildren<ComponentType<{
     overrides?: {
         LabelInteractable: Override;
     };
-}>;
+}>>;
 export default TreeLabelInteractable;

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

@@ -12,6 +12,8 @@ import type { OverrideT } from '../helpers/overrides.js';
 
 const TreeLabelInteractable: React$ComponentType<{
   overrides?: { LabelInteractable: OverrideT },
+  /** Content to be rendered in the TreeLabelInteractable. */
+  children?: React$Node,
 }> = ({ overrides = {}, ...props }) => {
   const LabelInteractable = getOverride(overrides.LabelInteractable) || StyledLabelInteractable;
   return (