baseui 11.2.1 → 12.1.1

package/menu/types.d.ts

@@ -0,0 +1,284 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants';
+export declare type Item = any;
+export declare type ArrayItems = ReadonlyArray<Item>;
+export declare type GroupedItems = {
+    __ungrouped: ArrayItems;
+    [x: string]: ArrayItems;
+};
+export declare type Items = ArrayItems | GroupedItems;
+export declare type GetItemLabelFn = (item: Item) => React.ReactNode;
+export declare type GetProfileItemLabelsFn = (item: Item) => {
+    title?: string;
+    subtitle?: string;
+    body?: string;
+};
+export declare type GetProfileItemImgFn = (item: Item) => string | React.ComponentType<any>;
+export declare type GetProfileItemImgTextFn = (item: Item) => string;
+export declare type SetRootRefFn = (ref: React.RefObject<typeof HTMLElement>) => void;
+export declare type RootRef = {
+    current: null | HTMLElement;
+};
+export declare type OnItemSelectFn = (a: {
+    item: Item;
+    event?: React.SyntheticEvent<HTMLElement> | KeyboardEvent;
+}) => unknown;
+export declare type ProfileOverrides = {
+    List?: Override;
+    ListItemProfile?: Override;
+    ProfileImgContainer?: Override;
+    ProfileImg?: Override;
+    ProfileLabelsContainer?: Override;
+    ProfileTitle?: Override;
+    ProfileSubtitle?: Override;
+    ProfileBody?: Override;
+};
+export declare type RenderItemProps = {
+    disabled?: boolean;
+    ref?: React.RefObject<typeof HTMLElement>;
+    id?: string | null;
+    isFocused?: boolean;
+    isHighlighted?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
+    resetMenu?: () => void;
+};
+export declare type GetRequiredItemPropsFn = (item: Item, index: number) => RenderItemProps;
+export declare type StateReducerFn = (changeType: keyof typeof STATE_CHANGE_TYPES | undefined | null, changes: Partial<StatefulContainerState>, currentState: StatefulContainerState) => StatefulContainerState;
+export declare type StatefulContainerState = {
+    activedescendantId?: string | null;
+    highlightedIndex: number;
+    isFocused: boolean;
+};
+export declare type InitialState = {
+    activedescendantId?: string | null;
+    highlightedIndex?: number;
+    isFocused?: boolean;
+};
+export declare type RenderProps = StatefulContainerState & {
+    items: Items;
+    getRequiredItemProps: GetRequiredItemPropsFn;
+};
+/**
+ * Component Prop Types
+ * ====================
+ * Required and Optional are split into separate object types, and internals are all
+ * marked as required because otherwise defaultProps will not work properly
+ */
+export declare type StatefulContainerProps = {
+    /** List of menu items. */
+    items: Items;
+    /** Initial state of the stateful menu. */
+    initialState: InitialState;
+    /** State reducer to intercept state changes and return new internal state */
+    stateReducer: StateReducerFn;
+    /** Function to get props for each rendered item. This will have some defaults needed for keyboard
+     * bindings to work properly. Every rendered item should call this.
+     */
+    getRequiredItemProps: GetRequiredItemPropsFn;
+    onActiveDescendantChange?: (id?: string) => unknown;
+    /** Callback executed on menu item clicks. */
+    onItemSelect: OnItemSelectFn;
+    /** Ref for the menu container element. Used to capture key events for navigation */
+    rootRef?: RootRef;
+    /** Node for menu's keyboard listener. Default is null and keyboard handlers will listen on menu root. */
+    keyboardControlNode: {
+        current: HTMLElement | null;
+    };
+    /** whether has keyboard type-ahead function */
+    typeAhead: boolean;
+    /** Child as function pattern. */
+    children: (a: RenderProps) => React.ReactNode;
+    addMenuToNesting?: (ref: {
+        current: HTMLElement | null;
+    }) => void;
+    removeMenuFromNesting?: (ref: {
+        current: HTMLElement | null;
+    }) => void;
+    getParentMenu?: (ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | undefined | null;
+    getChildMenu?: (ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | undefined | null;
+    nestedMenuHoverIndex?: number;
+    isNestedMenuVisible?: (ref: {
+        current: HTMLElement | null;
+    }) => boolean;
+    forceHighlight: boolean;
+};
+export declare type MenuOverrides = {
+    EmptyState?: Override;
+    List?: Override;
+    Option?: Override;
+    OptgroupHeader?: Override;
+    ListItem?: Override;
+    MenuDivider?: Override;
+};
+export declare type MenuProps = {
+    overrides?: MenuOverrides;
+    /** Renders all menu content for SEO purposes regardless of menu  state */
+    renderAll?: boolean;
+};
+export declare type MenuProfileProps = {
+    /** Returns an object consisting of title, subtitle, and body to render menu item */
+    getProfileItemLabels: GetProfileItemLabelsFn;
+    /** Returns either an image source url, or a full React component to render as the image. */
+    getProfileItemImg: GetProfileItemImgFn;
+    /** Returns the alt text for the image */
+    getProfileItemImgText: GetProfileItemImgTextFn;
+    overrides?: ProfileOverrides;
+};
+export declare type SharedStatelessProps = {
+    /** Id of the highlighted menu item. */
+    activedescendantId?: string | null;
+    /** Function to get props for each rendered item. This will have some defaults needed for keyboard
+     * bindings to work properly. Every rendered item should call this.
+     */
+    /** Passed to the top level menu element. */
+    'aria-label'?: string;
+    getRequiredItemProps?: GetRequiredItemPropsFn;
+    isFocused?: boolean;
+    handleMouseLeave?: (event: React.MouseEvent<HTMLElement>) => unknown;
+    /** Index of highlighted menu item. */
+    highlightedIndex?: number;
+    /** List of menu items. */
+    items: Items;
+    /** Message to be displayed if no menu items are passed in. */
+    noResultsMsg?: React.ReactNode;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => unknown;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => unknown;
+    /** Ref for the menu container element. Used to capture key events for navigation */
+    rootRef?: RootRef;
+    focusMenu?: (event: React.FocusEvent | React.MouseEvent | KeyboardEvent) => unknown;
+    unfocusMenu?: () => unknown;
+    handleKeyDown?: (event: KeyboardEvent) => unknown;
+};
+export declare type StatefulMenuProps = {
+    /** List of menu items. */
+    items: Items;
+    /** Initial state of the stateful menu. */
+    initialState?: InitialState;
+    /** State reducer to intercept state changes and return new internal state */
+    stateReducer?: StateReducerFn;
+    /** Function to get props for each rendered item. This will have some defaults needed for keyboard
+     * bindings to work properly. Every rendered item should call this.
+     */
+    getRequiredItemProps?: GetRequiredItemPropsFn;
+    onActiveDescendantChange?: (id?: string) => unknown;
+    /** Callback executed on menu item clicks. */
+    onItemSelect?: OnItemSelectFn;
+    /** Ref for the menu container element. Used to capture key events for navigation */
+    rootRef?: RootRef;
+    /** Child as function pattern. */
+    children?: (a: RenderProps) => React.ReactNode;
+    /** whether has keyboard type-ahead function */
+    typeAhead?: boolean;
+    addMenuToNesting?: (ref: {
+        current: HTMLElement | null;
+    }) => void;
+    removeMenuFromNesting?: (ref: {
+        current: HTMLElement | null;
+    }) => void;
+    getParentMenu?: (ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | undefined | null;
+    getChildMenu?: (ref: {
+        current: HTMLElement | null;
+    }) => {
+        current: HTMLElement | null;
+    } | undefined | null;
+    nestedMenuHoverIndex?: number;
+    isNestedMenuVisible?: (ref: {
+        current: HTMLElement | null;
+    }) => boolean;
+} & MenuProps;
+export declare type StatefulMenuProfileProps = StatefulContainerProps & MenuProfileProps;
+export declare type StatelessMenuProps = SharedStatelessProps & MenuProps;
+export declare type StatelessMenuProfileProps = SharedStatelessProps & MenuProfileProps;
+export declare type OptionListProps = {
+    /** Item to parse and render. */
+    item: Item;
+    /** Function used to get the string label for each item. */
+    getItemLabel: GetItemLabelFn;
+    /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */
+    getChildMenu?: (item: Item) => React.ReactNode;
+    onClick?: (event: React.MouseEvent) => unknown;
+    /** Callback used to change highlighted index in stateful menu. */
+    onMouseDown?: (event: React.MouseEvent) => unknown;
+    /** Callback used to change highlighted index in stateful menu. */
+    onMouseEnter?: (event: React.MouseEvent) => unknown;
+    /** Renders UI in defined scale. */
+    size?: keyof typeof OPTION_LIST_SIZE;
+    overrides?: {
+        ListItem?: Override;
+        ListItemAnchor?: Override;
+        ChildMenuPopover?: Override;
+    };
+    renderHrefAsAnchor?: boolean;
+    /** Utility to reset menu to default state. Useful for rendering child menus. */
+    resetMenu?: () => void;
+    /** Renders UI in 'highlighted' state. */
+    $isHighlighted?: boolean;
+    /** Is the parent menu focused. determines if highlighted item should be blue or black */
+    $isFocused?: boolean;
+    /** Renders all menu content for SEO purposes regardless of menu  state */
+    renderAll?: boolean;
+    /** Is the item disabled */
+    $disabled?: boolean;
+    /** Is the item disabled */
+    'aria-disabled'?: boolean;
+    /** Is the item selected */
+    'aria-selected'?: boolean;
+    /** Id of the item */
+    id?: string;
+    /** Accessibility role of the item */
+    role?: string;
+};
+export declare type OptionProfileProps = {
+    /** Item to parse and render. */
+    item: Item;
+    /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */
+    getChildMenu?: (item: Item) => React.ReactNode;
+    /** Returns an object consisting of title, subtitle, and body to render menu item */
+    getProfileItemLabels: GetProfileItemLabelsFn;
+    /** Returns either an image source url, or a full React component to render as the image. */
+    getProfileItemImg: GetProfileItemImgFn;
+    /** Returns the alt text for the image */
+    getProfileItemImgText: GetProfileItemImgTextFn;
+    overrides?: {
+        ListItemProfile?: Override;
+        ProfileImgContainer?: Override;
+        ProfileImg?: Override;
+        ProfileLabelsContainer?: Override;
+        ProfileTitle?: Override;
+        ProfileSubtitle?: Override;
+        ProfileBody?: Override;
+        ChildMenuPopover?: Override;
+    };
+    /** Utility to reset menu to default state. Useful for rendering child menus. */
+    resetMenu?: () => void;
+    /** Renders UI in 'highlighted' state. */
+    $isHighlighted?: boolean;
+    /** Renders all menu content for SEO purposes regardless of menu  state */
+    renderAll?: boolean;
+};
+export declare type NestedMenuRef = {
+    current: HTMLElement | null;
+};
+export declare type NestedMenuContextProps = {
+    addMenuToNesting: (ref: NestedMenuRef) => void;
+    removeMenuFromNesting: (ref: NestedMenuRef) => void;
+    getParentMenu: (ref: NestedMenuRef) => NestedMenuRef | undefined | null;
+    getChildMenu: (ref: NestedMenuRef) => NestedMenuRef | undefined | null;
+    nestedMenuHoverIndex: number;
+    isNestedMenuVisible: (ref: NestedMenuRef) => boolean;
+    mountRef: NestedMenuRef;
+};

package/menu/types.js

@@ -1,11 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-var React = _interopRequireWildcard(require("react"));
-
-var _constants = require("./constants.js");
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/menu/types.js.flow

@@ -144,6 +144,7 @@ export type MenuPropsT = {
     Option?: OverrideT,
     OptgroupHeader?: OverrideT,
     ListItem?: OverrideT,
+    MenuDivider?: OverrideT;
   },
   /** Renders all menu content for SEO purposes regardless of menu  state */
   renderAll?: boolean,

package/menu/utils.d.ts

@@ -0,0 +1 @@
+export declare function scrollItemIntoView(child: HTMLElement | undefined | null, parent: HTMLElement, isFirst?: boolean, isLast?: boolean, scrollAlignInView?: 'auto' | 'center'): void;

package/message-card/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const BACKGROUND_COLOR_TYPE: Readonly<{
+    readonly light: "light";
+    readonly dark: "dark";
+}>;
+export declare const IMAGE_LAYOUT: Readonly<{
+    readonly top: "top";
+    readonly trailing: "trailing";
+}>;
+export declare const BUTTON_KIND: Readonly<{
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+}>;

package/message-card/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IMAGE_LAYOUT = exports.BUTTON_KIND = exports.BACKGROUND_COLOR_TYPE = void 0;
+
+var _button = require("../button");
+
+var _Object$freeze;
+
+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 BACKGROUND_COLOR_TYPE = Object.freeze({
+  light: 'light',
+  dark: 'dark'
+});
+exports.BACKGROUND_COLOR_TYPE = BACKGROUND_COLOR_TYPE;
+var IMAGE_LAYOUT = Object.freeze({
+  top: 'top',
+  trailing: 'trailing'
+});
+exports.IMAGE_LAYOUT = IMAGE_LAYOUT;
+var BUTTON_KIND = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, _button.KIND.secondary, _button.KIND.secondary), _defineProperty(_Object$freeze, _button.KIND.tertiary, _button.KIND.tertiary), _Object$freeze));
+exports.BUTTON_KIND = BUTTON_KIND;

package/message-card/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MessageCard } from './message-card';
+export * from './constants';
+export * from './styled-components';
+export * from './types';

package/message-card/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  MessageCard: true
+};
+Object.defineProperty(exports, "MessageCard", {
+  enumerable: true,
+  get: function get() {
+    return _messageCard.default;
+  }
+});
+
+var _messageCard = _interopRequireDefault(require("./message-card"));
+
+var _constants = require("./constants");
+
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _constants[key];
+    }
+  });
+});
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/message-card/index.js.flow

@@ -0,0 +1,72 @@
+/*
+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.
+*/
+// @flow
+import * as React from 'react';
+import type { OverrideT } from '../helpers/overrides.js';
+import { type StyletronComponent } from 'styletron-react';
+
+declare export var BACKGROUND_COLOR_TYPE: {
+  light: 'light',
+  dark: 'dark',
+};
+
+declare export var IMAGE_LAYOUT: {
+  top: 'top',
+  trailing: 'trailing',
+};
+
+declare export var BUTTON_KIND: {
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+};
+
+export type MessageCardOverridesT = {
+  Root?: OverrideT,
+  ContentContainer?: OverrideT,
+  HeadingContainer?: OverrideT,
+  ParagraphContainer?: OverrideT,
+  Button?: OverrideT,
+  Image?: OverrideT,
+};
+
+export type MessageCardPropsT = {
+  onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
+  heading?: string,
+  paragraph?: string,
+  buttonLabel?: string,
+  buttonKind?: $Values<typeof BUTTON_KIND>,
+  backgroundColor?: string,
+  backgroundColorType?: $Values<typeof BACKGROUND_COLOR_TYPE>,
+  image?: {
+    src: string,
+    layout?: $Values<typeof IMAGE_LAYOUT>,
+    backgroundPosition?: string,
+  },
+  overrides?: MessageCardOverridesT,
+};
+
+declare export var StyledRoot: StyletronComponent<
+  'button',
+  {
+    $backgroundColor: string,
+    $backgroundColorType: ?$Values<typeof BACKGROUND_COLOR_TYPE>,
+    $imageLayout: $Values<typeof IMAGE_LAYOUT>,
+  }
+>;
+declare export var StyledImage: StyletronComponent<
+  'img',
+  { $src: string, $imageLayout: $Values<typeof IMAGE_LAYOUT>, $backgroundPosition: string }
+>;
+declare export var StyledContentContainer: StyletronComponent<'div', {}>;
+declare export var StyledHeadingContainer: StyletronComponent<'div', {}>;
+declare export var StyledParagraphContainer: StyletronComponent<'div', {}>;
+
+declare export var MessageCard: React.ComponentType<MessageCardPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/message-card/message-card.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MessageCardProps } from './types';
+declare const MessageCard: ({ backgroundColor, backgroundColorType: backgroundColorTypeProp, buttonKind, buttonLabel, heading, image, onClick, overrides, paragraph, }: MessageCardProps) => JSX.Element;
+export default MessageCard;