@openfin/ui-library 0.12.0 → 0.13.0-alpha.1678975108

package/dist/components/controls/Button/button.d.ts

@@ -1,12 +1,12 @@
 import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
 import { ButtonShape, ButtonSize, ButtonKind, ButtonLayout } from './button.variants';
-declare type ButtonPropsWithLabel = {
+type ButtonPropsWithLabel = {
     children?: never;
 };
-declare type ButtonPropsWithChildren = {
+type ButtonPropsWithChildren = {
     children: ReactNode;
 };
-export declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & (ButtonPropsWithLabel | ButtonPropsWithChildren) & {
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & (ButtonPropsWithLabel | ButtonPropsWithChildren) & {
     label?: string;
     href?: string;
     size?: keyof typeof ButtonSize;

package/dist/components/controls/Button/button.variants.d.ts

@@ -16,7 +16,7 @@ export declare const ButtonKind: {
     readonly secondary: "secondary";
     readonly textOnly: "textOnly";
 };
-export declare type ButtonKindType = keyof typeof ButtonKind;
+export type ButtonKindType = keyof typeof ButtonKind;
 /**
  * Button Size
  */
@@ -25,7 +25,7 @@ export declare const ButtonSize: {
     readonly base: "base";
     readonly large: "large";
 };
-export declare type ButtonSizeType = keyof typeof ButtonSize;
+export type ButtonSizeType = keyof typeof ButtonSize;
 /**
  * Button Width
  */
@@ -33,7 +33,7 @@ export declare const ButtonLayout: {
     readonly fit: "fit";
     readonly full: "full";
 };
-export declare type ButtonLayoutType = keyof typeof ButtonLayout;
+export type ButtonLayoutType = keyof typeof ButtonLayout;
 /**
  * Button Shape
  */
@@ -41,7 +41,7 @@ export declare const ButtonShape: {
     readonly square: "square";
     readonly pill: "pill";
 };
-export declare type ButtonShapeType = keyof typeof ButtonShape;
+export type ButtonShapeType = keyof typeof ButtonShape;
 export declare const variants: {
     readonly size: {
         readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;

package/dist/components/controls/ExpandableButton/expandableButton.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ButtonProps } from '../Button';
 import { ExpandDirection } from './expandDirection';
-export declare type SecondaryButtonProps = {
+export type SecondaryButtonProps = {
     title: string;
     disabled?: boolean;
     onClick: (event: React.MouseEvent, closeSecondaryButtonsPanel?: () => void) => void;
 };
-export declare type ExpandableButtonProps = Omit<ButtonProps, 'shape'> & {
+export type ExpandableButtonProps = Omit<ButtonProps, 'shape'> & {
     secondaryButtons?: SecondaryButtonProps[];
     closePanelOnSecondaryButtonClick?: boolean;
     expandDirection?: ExpandDirection;

package/dist/components/controls/ExpandableButton/expandablePanel.d.ts

@@ -1,7 +1,7 @@
 import { SecondaryButtonProps } from './expandableButton';
 import { ButtonSizeType } from '../Button';
 import { ExpandDirection } from './expandDirection';
-export declare type ExpandablePanelProps = {
+export type ExpandablePanelProps = {
     secondaryButtons: SecondaryButtonProps[];
     onCollapseRequest: () => void;
     closePanelOnSecondaryButtonClick?: boolean;

package/dist/components/controls/Toggle/toggle.d.ts

@@ -1,6 +1,6 @@
 import React, { FC, InputHTMLAttributes } from 'react';
-export declare type LabelSideType = 'left' | 'right';
-export declare type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
+export type LabelSideType = 'left' | 'right';
+export type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelSide?: LabelSideType;
     type?: 'checkbox' | 'radio';

package/dist/components/elements/Badge/badge.d.ts

@@ -14,5 +14,5 @@ export interface BadgeCountProps {
      */
     max?: number;
 }
-export declare type BadgeProps = BadgeCountProps & React.HTMLAttributes<HTMLDivElement>;
+export type BadgeProps = BadgeCountProps & React.HTMLAttributes<HTMLDivElement>;
 export declare const Badge: React.FC<BadgeProps>;

package/dist/components/elements/Calendar/calendar.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface CalendarProps {
+    value: Date;
+    onChange?: (date: Date) => void;
+    onDismiss?: () => void;
+}
+export declare const Calendar: FC<CalendarProps>;

package/dist/components/elements/Calendar/index.d.ts

@@ -0,0 +1 @@
+export * from './calendar';

package/dist/components/elements/DropdownMenu/dropdownMenu.d.ts

@@ -1,14 +1,13 @@
 import { FC, ReactNode } from 'react';
-import { DropdownOption } from './dropdownOptionsMenu';
+import { MenuOption } from './menu';
 export interface DropdownMenuProps {
     label?: string;
-    selected?: DropdownOption;
-    options?: DropdownOption[];
-    onChange: (value: DropdownOption) => void;
+    selected?: MenuOption;
+    options?: MenuOption[][];
+    onChange: (value: MenuOption) => void;
     onOptionHover?: (value?: unknown) => void;
     placeholder?: string;
-    renderLabel?: (option: DropdownOption, isOpen: boolean, onClick: () => void) => ReactNode;
+    renderLabel?: (option: MenuOption, isOpen: boolean, onClick: () => void) => ReactNode;
     fitContent?: boolean;
 }
 export declare const DropdownMenu: FC<DropdownMenuProps>;
-export declare const ButtonImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/elements/DropdownMenu/index.d.ts

@@ -1 +1,2 @@
 export * from './dropdownMenu';
+export * from './menu';

package/dist/components/elements/DropdownMenu/menu.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+export interface MenuOption {
+    title: string;
+    value: unknown;
+    iconUrl?: string;
+    overrideOnClick?: (value?: MenuOption) => void;
+}
+/**
+ * The properties for the Menu component.
+ */
+export interface MenuProps {
+    /**
+     * An array of options to be displayed in the menu. The outer array represents the rows of the menu, while the inner arrays represent the columns.
+     */
+    options: MenuOption[][];
+    /**
+     * The currently selected option in the menu.
+     */
+    selected?: MenuOption;
+    /**
+     * An ID to associate wrapper component with this Menu.
+     */
+    menuId?: string;
+    /**
+     * A function to be called to close the menu.
+     */
+    handleExpandMenu?: () => void;
+    /**
+     * A function to be called when an option in the menu is hovered over.
+     */
+    onOptionHover?: (value?: unknown) => void;
+    /**
+     * A function to be called when an option in the menu is selected/clicked.
+     */
+    onChange: (value: MenuOption) => void;
+    /**
+     * Whether the width of the menu should fit its contents
+     */
+    fitContent?: boolean;
+    /**
+     * The width of the menu, as a CSS string, default to 100% of the parent container.
+     */
+    width?: string;
+    /**
+     * The height of the menu, as a CSS string.
+     */
+    height?: string;
+    /**
+     * The text to be displayed as the header of the menu.
+     */
+    header?: string;
+    /**
+     * The currently focused option in the menu.
+     */
+    focusedOption?: MenuOption;
+    /**
+     * The menu should be positioned absolutely.
+     */
+    absolutePosition?: boolean;
+}
+export declare const Menu: React.FC<MenuProps>;
+export declare const ButtonImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/elements/DropdownMenu/{dropdownOptionTitle.d.ts → optionTitle.d.ts}

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { TextProps } from '../../typography/Text';
-interface DropdownOptionTitleProps extends Omit<TextProps, 'children'> {
+interface OptionTitleProps extends Omit<TextProps, 'children'> {
     children?: string;
 }
 /**
  * A single line of Text that will overflow with ellipsis. When overflown mousing over the text will display a tooltip with the text content.
  */
-export declare const DropdownOptionTitle: FC<DropdownOptionTitleProps>;
+export declare const OptionTitle: FC<OptionTitleProps>;
 /**
  * Checks if a element's content is overflown.
  */

package/dist/components/elements/Icon/icon.d.ts

@@ -1,16 +1,16 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { IconSizeType, IconType } from '../../system/ThemeProvider/lib/types';
-export declare type PropsWithIcon = {
+export type PropsWithIcon = {
     icon: IconType;
     children?: never;
 };
-export declare type PropsWithChild = {
+export type PropsWithChild = {
     icon?: never;
     children: ReactNode;
 };
-export declare type IconSizeProps = {
+export type IconSizeProps = {
     size?: IconSizeType;
     containerSize?: IconSizeType;
 };
-export declare type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & IconSizeProps;
+export type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & IconSizeProps;
 export declare const Icon: import("styled-components").StyledComponent<({ icon, children, size, containerSize, ...props }: IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/elements/IconWithBadge/iconWithBadge.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IconProps } from '../Icon/icon';
 import { BadgeCountProps } from '../Badge';
-export declare type IconWithBadgeProps = IconProps & BadgeCountProps;
+export type IconWithBadgeProps = IconProps & BadgeCountProps;
 export declare const IconWithBadge: React.FC<IconWithBadgeProps>;

package/dist/components/elements/Loader/loader.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
 import { IconSizeProps } from '../Icon';
-export declare type LoaderProps = IconSizeProps & HTMLAttributes<HTMLDivElement>;
+export type LoaderProps = IconSizeProps & HTMLAttributes<HTMLDivElement>;
 export declare const Loader: import("styled-components").StyledComponent<({ ...props }: LoaderProps) => JSX.Element, import("styled-components").DefaultTheme, IconSizeProps & HTMLAttributes<HTMLDivElement>, never>;

package/dist/components/elements/Loader/openfinLoader.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
 import { IconSizeProps } from '../Icon';
-export declare type OpenfinLoaderProps = IconSizeProps & HTMLAttributes<HTMLDivElement>;
+export type OpenfinLoaderProps = IconSizeProps & HTMLAttributes<HTMLDivElement>;
 export declare const OpenfinLoader: import("styled-components").StyledComponent<({ ...props }: OpenfinLoaderProps) => JSX.Element, import("styled-components").DefaultTheme, IconSizeProps & HTMLAttributes<HTMLDivElement>, never>;

package/dist/components/input/BaseInput/baseInput.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { WithStatusProps } from '../../system/HOC';
-export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
+export type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
     message?: string;
     label?: string;
     type?: string;

package/dist/components/input/Checkbox/checkbox.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseInputProps } from '../BaseInput';
 import { WithStatusProps } from '../../system/HOC';
-export declare type CheckboxProps = BaseInputProps;
+export type CheckboxProps = BaseInputProps;
 export declare const Checkbox: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
     message?: string | undefined;
     label?: string | undefined;

package/dist/components/input/DateInput/dateInput.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEventHandler, MouseEventHandler } from 'react';
+import { BaseInputProps } from '../BaseInput';
+type DateTypeFormat = 'date' | 'time' | 'datetime-local';
+interface DateInputProps extends Omit<BaseInputProps, 'value' | 'type'> {
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onExpand?: MouseEventHandler<HTMLDivElement>;
+    expanded?: boolean;
+    value?: string;
+    type?: DateTypeFormat;
+}
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/input/DateInput/index.d.ts

@@ -0,0 +1 @@
+export * from './dateInput';

package/dist/components/input/RadioGroup/radioGroup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { UnitPxType } from '../../system/ThemeProvider';
 import { RadioLabelSideType } from '../RadioInput/radioInput';
-declare type RadioDirectionType = 'row' | 'column';
-export declare type RadioGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
+type RadioDirectionType = 'row' | 'column';
+export type RadioGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
     direction?: RadioDirectionType;
     gap?: UnitPxType;
     labelSide?: RadioLabelSideType;

package/dist/components/input/RadioInput/radioInput.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { LabelSideType } from '../../controls/Toggle';
-export declare type RadioLabelSideType = LabelSideType | 'top' | 'bottom';
-export declare type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
+export type RadioLabelSideType = LabelSideType | 'top' | 'bottom';
+export type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelSide?: RadioLabelSideType;
 };

package/dist/components/input/TextInput/textInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../BaseInput';
-export declare type TextInputProps = BaseInputProps;
+export type TextInputProps = BaseInputProps;
 export declare const TextInput: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
     message?: string | undefined;
     label?: string | undefined;

package/dist/components/layout/Box/box.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { UnitPxType } from '../../system/ThemeProvider/lib/types';
 import * as BoxTypes from './types';
-export declare type BoxProps = HTMLAttributes<HTMLDivElement> & {
+export type BoxProps = HTMLAttributes<HTMLDivElement> & {
     alignItems?: BoxTypes.AlignItems;
     display?: BoxTypes.Display;
     flexDirection?: BoxTypes.FlexDirection;

package/dist/components/layout/Box/types.d.ts

@@ -1,7 +1,7 @@
-export declare type AlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'first baseline' | 'last baseline' | 'start' | 'end' | 'self-start' | 'self-end';
-export declare type Display = 'flex' | 'inline-flex';
-export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export declare type JustifyContent = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'left' | 'right';
-export declare type AlignSelf = 'auto' | 'flex-start' | ' flex-end' | 'center' | 'baseline' | 'stretch';
-export declare type BackgroundLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type AlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'first baseline' | 'last baseline' | 'start' | 'end' | 'self-start' | 'self-end';
+export type Display = 'flex' | 'inline-flex';
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type JustifyContent = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'left' | 'right';
+export type AlignSelf = 'auto' | 'flex-start' | ' flex-end' | 'center' | 'baseline' | 'stretch';
+export type BackgroundLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/system/HOC/index.d.ts

@@ -1,4 +1,4 @@
-export declare type StatusType = 'success' | 'warning' | 'critical' | 'active';
-export declare type WithStatusProps = {
+export type StatusType = 'success' | 'warning' | 'critical' | 'active';
+export type WithStatusProps = {
     status?: StatusType;
 };

package/dist/components/system/ThemeProvider/lib/config.d.ts

@@ -2,18 +2,18 @@ import { FlattenSimpleInterpolation } from 'styled-components';
 /**
  * ThemeProvider Configuration
  */
-export declare type ConfigurationType = CDNFontConfig | ImportFontConfig;
+export type ConfigurationType = CDNFontConfig | ImportFontConfig;
 /**
  * Custom import and handling for font loading.
  */
-export declare type ImportFontConfig = {
+export type ImportFontConfig = {
     fontLoading: 'import';
     fontCss: FlattenSimpleInterpolation;
 };
 /**
  * Use fonts from the Openfin CDN.
  */
-export declare type CDNFontConfig = {
+export type CDNFontConfig = {
     fontLoading: 'cdn';
 };
 export declare const Configuration: ConfigurationType;

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -15,6 +15,7 @@ export declare const Color: {
     readonly lightGray5: "#C9CBD2";
     readonly neutralGray: "#7D808A";
     readonly neutralGray80: "rgba(125,128,138,0.8)";
+    readonly silverGray: "#C0C1C2";
     readonly darkGray1: "#53565F";
     readonly darkGray2: "#383A40";
     readonly darkGray3: "#2F3136";

package/dist/components/system/ThemeProvider/lib/helpers.d.ts

@@ -1,7 +1,7 @@
 import { DefaultTheme, StyledProps } from 'styled-components';
 import { StatusType } from '../../HOC';
 import { Palette } from './palette';
-export declare type ComponentVariants = {
+export type ComponentVariants = {
     [key: string]: {
         [key: string]: any;
     };

package/dist/components/system/ThemeProvider/lib/palette.d.ts

@@ -30,6 +30,7 @@ export declare const Palette: {
     readonly textDefault: "textDefault";
     readonly textHelp: "textHelp";
     readonly textInactive: "textInactive";
+    readonly borderNeutral: "borderNeutral";
     readonly contentBackground1: "contentBackground1";
     readonly contentBackground2: "contentBackground2";
     readonly contentBackground3: "contentBackground3";

package/dist/components/system/ThemeProvider/lib/types.d.ts

@@ -1,27 +1,27 @@
 import { DefaultTheme } from 'styled-components';
 import { Color, FontSize, FontStack, FontWeight, IconSet, IconSize, LineHeight, Radius, Shadow, Size, Transition, Typography, Unit, UnitPx } from './constants';
 import { Palette } from './palette';
-export declare type ColorType = keyof typeof Color;
-export declare type FontSizeType = keyof typeof FontSize;
-export declare type FontStackType = keyof typeof FontStack;
-export declare type FontWeightType = keyof typeof FontWeight;
-export declare type IconSizeType = keyof typeof IconSize;
-export declare type IconType = keyof typeof IconSet;
-export declare type LineHeightType = keyof typeof LineHeight;
-export declare type RadiusType = keyof typeof Radius;
-export declare type ShadowType = keyof typeof Shadow;
-export declare type SizeType = keyof typeof Size;
-export declare type TransitionType = keyof typeof Transition;
-export declare type TypographyType = keyof typeof Typography;
-export declare type UnitPxType = keyof typeof UnitPx;
-export declare type UnitType = keyof typeof Unit;
-export declare type ThemeSet = {
+export type ColorType = keyof typeof Color;
+export type FontSizeType = keyof typeof FontSize;
+export type FontStackType = keyof typeof FontStack;
+export type FontWeightType = keyof typeof FontWeight;
+export type IconSizeType = keyof typeof IconSize;
+export type IconType = keyof typeof IconSet;
+export type LineHeightType = keyof typeof LineHeight;
+export type RadiusType = keyof typeof Radius;
+export type ShadowType = keyof typeof Shadow;
+export type SizeType = keyof typeof Size;
+export type TransitionType = keyof typeof Transition;
+export type TypographyType = keyof typeof Typography;
+export type UnitPxType = keyof typeof UnitPx;
+export type UnitType = keyof typeof Unit;
+export type ThemeSet = {
     light: DefaultTheme;
     dark: DefaultTheme;
 };
-export declare type PaletteKeyType = keyof typeof Palette;
-export declare type PaletteType = Record<keyof typeof Palette, string>;
-export declare type ThemePaletteSet = {
+export type PaletteKeyType = keyof typeof Palette;
+export type PaletteType = Record<keyof typeof Palette, string>;
+export type ThemePaletteSet = {
     light: {
         palette: PaletteType;
     };
@@ -40,7 +40,7 @@ export declare type ThemePaletteSet = {
  * @example ValueOf<typeof someObject>
  * @link https://stackoverflow.com/questions/49285864/is-there-a-valueof-similar-to-keyof-in-typescript
  */
-export declare type ValueOf<T> = T[keyof T];
+export type ValueOf<T> = T[keyof T];
 /**
  * Join a string tuple to a string with a separator.
  * @example
@@ -48,4 +48,4 @@ export declare type ValueOf<T> = T[keyof T];
  * type MyArrayString = StringTupleJoin<typeof array, ', '>;
  * const str: MyArrayString = "hello, world";
  */
-export declare type StringTupleJoin<T extends readonly string[], Separator extends string> = T extends readonly [string, ...infer Tail] ? Tail extends [string, ...string[]] ? `${T[0]}${Separator}${StringTupleJoin<Tail, Separator>}` : `${T[0]}` : never;
+export type StringTupleJoin<T extends readonly string[], Separator extends string> = T extends readonly [string, ...infer Tail] ? Tail extends [string, ...string[]] ? `${T[0]}${Separator}${StringTupleJoin<Tail, Separator>}` : `${T[0]}` : never;

package/dist/components/system/ThemeProvider/themeProvider.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import { ColorScheme } from '../../../hooks/useColorScheme';
 import { ConfigurationType } from './lib/config';
 import { ThemePaletteSet } from './lib/types';
-export declare type ThemeProviderProps = {
+export type ThemeProviderProps = {
     children: ReactNode;
     themes?: ThemePaletteSet;
     scheme?: keyof typeof ColorScheme;