@openfin/workspace-platform 16.0.4 → 16.0.7

package/client-api/src/component-perfomance.d.ts

@@ -0,0 +1,4 @@
+import type OpenFin from '@openfin/core';
+type ComponentNames = 'home' | 'dock' | 'store';
+export declare const setupComponentPerformance: (component: ComponentNames, componentWindowIdentity: OpenFin.Identity) => void;
+export {};

package/client-api/src/shapes/home.d.ts

@@ -204,12 +204,15 @@ string | {
      */
     dark: string;
 };
-export type ContactInfoButtons = {
-    type: 'button';
+export type SplitButtonOption = {
+    /**
+     * The label that appears on the button.
+     */
+    label?: string;
     /**
      * The icon to display on the button.
      */
-    icon: ButtonIcon;
+    icon?: ButtonIcon;
     /**
      * The tooltip to display on the button.
      */
@@ -218,8 +221,12 @@ export type ContactInfoButtons = {
      * The action to execute when the button is clicked.
      */
     action: string;
-} | {
-    type: 'dropdown';
+};
+export type SplitButton = {
+    /**
+     * The label that appears on the button.
+     */
+    label?: string;
     /**
      * The icon to display on the button.
      */
@@ -231,25 +238,29 @@ export type ContactInfoButtons = {
     /**
      * The action to execute when the button is clicked.
      */
-    action?: string;
+    action: string;
     /**
      * The list of options to display in the dropdown.
      */
-    options: {
-        /**
-         * The icon to display on the button.
-         */
-        icon?: ButtonIcon;
-        /**
-         * The tooltip to display on the button.
-         */
-        tooltip: string;
-        /**
-         * The action to execute when the button is clicked.
-         */
-        action: string;
-    }[];
+    options: SplitButtonOption[];
 };
+export type ContactInfoButtons = {
+    type: 'button';
+    /**
+     * The icon to display on the button.
+     */
+    icon: ButtonIcon;
+    /**
+     * The tooltip to display on the button.
+     */
+    tooltip: string;
+    /**
+     * The action to execute when the button is clicked.
+     */
+    action: string;
+} | (SplitButton & {
+    type: 'dropdown';
+});
 /**
  *  Contact Info Search Result
  */

package/client-api/src/shapes/templates.d.ts

@@ -3,18 +3,20 @@
  *
  *  @module Templates
  */
+import { SplitButton as SplitButtonTemplateData } from './home';
 export type ListPairs = [string, string][];
-export type CustomTemplateData = Record<string, string | ListPairs>;
-export type ContainerFragmentTypes = PlainContainerTemplateFragment | ButtonTemplateFragment;
+export type CustomTemplateData = Record<string, string | ListPairs | SplitButtonTemplateData>;
+export type ContainerFragmentTypes = PlainContainerTemplateFragment | ButtonTemplateFragment | SplitButtonFragment;
 export type PresentationFragmentTypes = TextTemplateFragment | ImageTemplateFragment | ListTemplateFragment;
 export type InteractiveFragmentTypes = ButtonTemplateFragment | TextTemplateFragment | ImageTemplateFragment;
 /**
  * The options to build your custom template composition layout.
  */
-export type TemplateFragment = PlainContainerTemplateFragment | ButtonTemplateFragment | TextTemplateFragment | ListTemplateFragment | ImageTemplateFragment;
+export type TemplateFragment = PlainContainerTemplateFragment | ButtonTemplateFragment | TextTemplateFragment | ListTemplateFragment | ImageTemplateFragment | SplitButtonFragment;
 export declare const ContainerTemplateFragmentNames: {
     readonly Container: "Container";
     readonly Button: "Button";
+    readonly SplitButton: "SplitButton";
 };
 export declare const PresentationTemplateFragmentNames: {
     readonly Text: "Text";
@@ -27,6 +29,7 @@ export declare const TemplateFragmentTypes: {
     readonly List: "List";
     readonly Container: "Container";
     readonly Button: "Button";
+    readonly SplitButton: "SplitButton";
 };
 export interface BaseTemplateFragment<T extends keyof typeof TemplateFragmentTypes> {
     /**
@@ -115,6 +118,55 @@ export type ButtonTemplateFragment = ContainerTemplateFragment<'Button'> & Fragm
      */
     buttonStyle?: ButtonStyle;
 };
+export type SplitButtonFragment = ContainerTemplateFragment<'SplitButton'> & {
+    /**
+     * The type of button that determines styling.
+     */
+    buttonType: 'primary' | 'secondary';
+    /**
+     * Data key of the template fragment.
+     *
+     * The data associated with this fragment will be looked up in `templateData` map with this key.
+     *
+     * Example:
+     * ```ts
+     * const myTemplateLayout = {
+     *    type: FragmentTypes.SplitButton,
+     *    buttonType: 'primary',
+     *    dataKey: 'splitButton1',
+     * }
+     *
+     * const searchResult: CLISearchResultCustom = {
+     *    //...
+     *    template: CLITemplate.Custom,
+     *    templateContent: {
+     *        layout: myTemplateLayout,
+     *        data: {
+     *          splitButton1: {
+     *              label: 'Split Button 1',
+     *              tooltip: 'Click me',
+     *              icon: 'iconURL',
+     *              action: 'primaryAction',
+     *              options: [
+     *                  {
+     *                      label: 'Menu Option 1',
+     *                      tooltip: 'Click for optionAction1',
+     *                      action: 'optionAction1'
+     *                  },
+     *                  {
+     *                      label: 'Menu Option 2',
+     *                      tooltip: 'Click for optionAction2',
+     *                      action: 'optionAction1'
+     *                  }
+     *              ]
+     *        }
+     *    }
+     * };
+     * ```
+     *
+     */
+    dataKey: string;
+};
 export type TextTemplateFragment = PresentationTemplateFragment<'Text'> & FragmentAction;
 export type ImageTemplateFragment = PresentationTemplateFragment<'Image'> & FragmentAction & {
     /**

package/client-api-platform/src/shapes.d.ts

@@ -11,7 +11,7 @@ export type { App, AppIntent, Image } from '../../client-api/src/shapes';
 export type { CustomActionSpecifier, CustomButtonConfig } from '../../common/src/api/action';
 export type { AttachedPage, Page, PageLayout, PageLayoutDetails, PageWithUpdatableRuntimeAttribs, PanelConfigHorizontal, PanelConfigVertical, PanelConfig, ExtendedPanelConfig } from '../../common/src/api/pages/shapes';
 export { PanelPosition } from '../../common/src/api/pages/shapes';
-export type { CustomThemes, CustomThemeOptions, CustomThemeOptionsWithScheme, CustomPaletteSet } from '../../common/src/api/theming';
+export type { CustomThemes, CustomThemeOptions, CustomThemeOptionsWithScheme, CustomPaletteSet, BaseThemeOptions, ThemeExtension, WorkspaceThemePaletteSet, NotificationIndicatorColorsSet, NotificationIndicatorColorsSetDarkScheme, NotificationIndicatorColorsSetLightScheme, NotificationIndicatorColorsWithScheme } from '../../common/src/api/theming';
 export type { AnalyticsEvent } from '../../common/src/utils/usage-register';
 export type { WorkflowIntegration } from '../../client-api/src/shapes/integrations';
 /**
@@ -339,7 +339,7 @@ export interface CustomBrowserButtonConfig extends CustomButtonConfig {
  */
 export interface PreDefinedButtonConfig {
     /** Type of default browser button */
-    type: BrowserButtonType;
+    type: Exclude<BrowserButtonType, BrowserButtonType.ShowHideTabs | BrowserButtonType.LockUnlockPage | BrowserButtonType.Custom>;
     /** Button name text when hovered over */
     tooltip?: string;
     /** icon URL for icon image */
@@ -361,6 +361,30 @@ export interface PreDefinedButtonConfig {
 export type ShowHideTabsConfig = {
     type: BrowserButtonType.ShowHideTabs;
     disabled?: boolean;
+    tabsShownIconUrl?: {
+        /**
+         * The URL of the icon to display when the button is disabled and tabs are hidden.
+         *
+         * The button is disabled when the page is locked.
+         */
+        disabled?: string;
+        /**
+         * The URL of the icon to display when the button is enabled and tabs are hidden.
+         */
+        enabled?: string;
+    };
+    tabsHiddenIconUrl?: {
+        /**
+         * The URL of the icon to display when the button is disabled and tabs are hidden.
+         *
+         * The button is disabled when the page is locked.
+         */
+        disabled?: string;
+        /**
+         * The URL of the icon to display when the button is enabled and tabs are hidden.
+         */
+        enabled?: string;
+    };
 };
 /**
  * Configuration Object for the page lock/unlock button within the browser toolbar
@@ -376,6 +400,8 @@ export type ShowHideTabsConfig = {
 export type LockUnlockPageConfig = {
     type: BrowserButtonType.LockUnlockPage;
     disabled?: boolean;
+    lockedIconUrl?: string;
+    unlockedIconUrl?: string;
 };
 /**
  * Buttons on the left of WindowStateButtonOptions

package/common/src/api/theming.d.ts

@@ -1,3 +1,4 @@
+import type { DefaultTheme } from 'styled-components';
 import type OpenFin from '@openfin/core';
 import type { ThemePaletteSet } from '@openfin/ui-library';
 import { ColorSchemeOptionType } from '../../../client-api-platform/src/shapes';
@@ -5,20 +6,65 @@ export type WorkspaceComponentSetSelectedSchemePayload = {
     newScheme: ColorSchemeOptionType;
     identity: OpenFin.Identity;
 };
-export type BrowserSetSelectedSchemePayload = string;
 export type ComputedThemes = ComputedTheme[];
 export interface ComputedTheme {
     label: string;
     logoUrl?: string;
-    theme: ThemePaletteSet;
+    theme: WorkspaceThemePaletteSet;
     defaultScheme?: ColorSchemeOptionType;
 }
-interface BaseThemeOptions {
+export interface WorkspaceThemePaletteSet extends ThemePaletteSet {
+    light: ThemeExtension;
+    dark: ThemeExtension;
+}
+export interface ThemeExtension extends DefaultTheme {
+    notificationIndicatorColors?: Record<string, Omit<NotificationIndicatorColorsSet, 'foreground'> & {
+        foreground: string;
+    }>;
+}
+export interface NotificationIndicatorColorsSet {
+    background: string;
+    foreground?: string;
+}
+export interface NotificationIndicatorColorsSetDarkScheme {
+    dark: NotificationIndicatorColorsSet;
+    light?: NotificationIndicatorColorsSet;
+}
+export interface NotificationIndicatorColorsSetLightScheme {
+    dark?: NotificationIndicatorColorsSet;
+    light: NotificationIndicatorColorsSet;
+}
+export type NotificationIndicatorColorsWithScheme = Record<string, NotificationIndicatorColorsSetDarkScheme | NotificationIndicatorColorsSetLightScheme>;
+export interface BaseThemeOptions {
     label: string;
     logoUrl?: string;
 }
 export interface CustomThemeOptions extends BaseThemeOptions {
     palette: CustomPaletteSet;
+    /**
+     * NOTE: Only used in Notifications
+     *
+     * Used for providing color overrides of notification indicators or defining custom colors that clients could target.
+     *
+     * @example
+     * ```ts
+     * const themeOptions = {
+     *   default: 'light',
+     *   palettes: {...}
+     *   notificationIndicatorColors: {
+     *     red: {
+     *       background: '#FF0000',
+     *       foreground: '#FFFFDD'
+     *     },
+     *     customred: {
+     *       // If `foreground` is not defined it will default to `#FFFFFF`
+     *       background: '#FF0011'
+     *     }
+     *   }
+     * };
+     * ```
+     */
+    notificationIndicatorColors?: Record<string, NotificationIndicatorColorsSet>;
 }
 export interface CustomThemeOptionsWithScheme extends BaseThemeOptions {
     /**
@@ -40,6 +86,39 @@ export interface CustomThemeOptionsWithScheme extends BaseThemeOptions {
         light: CustomPaletteSet;
         dark: CustomPaletteSet;
     };
+    /**
+     * NOTE: Only used in Notifications
+     *
+     * Used for providing color overrides of notification indicators or defining custom colors that clients could target.
+     *
+     * @example
+     * ```ts
+     * const themeOptions = {
+     *   default: 'light',
+     *   palettes: {...}
+     *   notificationIndicatorColors: {
+     *     red: {
+     *       dark: {
+     *         background: '#FF0000',
+     *         foreground: '#FFFFDD'
+     *       },
+     *       light: {
+     *         // If `foreground` is not defined it will default to `#FFFFFF`
+     *         background: '#FF1100',
+     *       }
+     *     },
+     *     customred: {
+     *       // If one of the schemes is not defined (in this case `light`) the values from the defined one will be copied to the other
+     *       dark: {
+     *         background: '#FF0011',
+     *         foreground: '#FFDDDD'
+     *       }
+     *     }
+     *   }
+     * };
+     * ```
+     */
+    notificationIndicatorColors?: NotificationIndicatorColorsWithScheme;
 }
 export type CustomThemes = (CustomThemeOptions | CustomThemeOptionsWithScheme)[];
 export interface DefaultPaletteSet {
@@ -97,16 +176,69 @@ export interface CustomPaletteSet extends DefaultPaletteSet {
     linkDefault?: string;
     linkHover?: string;
 }
+export declare const OpenFinLightTheme: {
+    background1: "#FFFFFF";
+    background2: "#FAFBFE";
+    background3: "#F3F5F8";
+    background4: "#ECEEF1";
+    background5: "#DDDFE4";
+    background6: "#C9CBD2";
+    brandSecondary: "#1E1F23";
+    inputBackground: "#ECEEF1";
+    inputColor: "#1E1F23";
+    inputPlaceholder: "#383A40";
+    inputDisabled: "#7D808A";
+    inputFocused: "#C9CBD2";
+    inputBorder: "#7D808A";
+    textDefault: "#1E1F23";
+    textHelp: "#2F3136";
+    textInactive: "#7D808A";
+    brandPrimary: string;
+    statusSuccess: "#207735";
+    statusWarning: "#F48F00";
+    statusCritical: "#F31818";
+    statusActive: "#0A76D3";
+    contentBackground1: string;
+    contentBackground2: string;
+    contentBackground3: string;
+    contentBackground4: string;
+    contentBackground5: string;
+};
+export declare const OpenFinDarkTheme: {
+    background1: "#111214";
+    background2: "#1E1F23";
+    background3: "#24262B";
+    background4: "#2F3136";
+    background5: "#383A40";
+    background6: "#53565F";
+    brandSecondary: "#383A40";
+    inputBackground: "#53565F";
+    inputColor: "#FFFFFF";
+    inputPlaceholder: "#C9CBD2";
+    inputDisabled: "#7D808A";
+    inputFocused: "#C9CBD2";
+    inputBorder: "#7D808A";
+    textDefault: "#FFFFFF";
+    textHelp: "#C9CBD2";
+    textInactive: "#7D808A";
+    brandPrimary: string;
+    statusSuccess: "#207735";
+    statusWarning: "#F48F00";
+    statusCritical: "#F31818";
+    statusActive: "#0A76D3";
+    contentBackground1: string;
+    contentBackground2: string;
+    contentBackground3: string;
+    contentBackground4: string;
+    contentBackground5: string;
+};
 /**
- * computeThemes()
- * Accepts the array of registered CustomThemes objects
- * Creates a light and dark palette from a tempalte overriding with custom options
- * Uses createTheme to build theme object
- * Creates a ThemePaletteSet
- * @param customPalettes
- * @returns theme object ready to be applied to the UI
+ * Transforms input {@link CustomThemes} to {@link ComputedThemes} used by Workspace Platform / Notifications Platform.
+ *
+ * @param customThemes array of themes to transform
+ * @param storedScheme sets the default scheme if provided
+ * @returns array of {@link ComputedThemes | computed themes}
  */
-export declare const computeThemes: (customPalettes: CustomThemes, storedScheme?: ColorSchemeOptionType) => ComputedThemes;
+export declare const computeThemes: (customThemes: CustomThemes, storedScheme?: ColorSchemeOptionType) => ComputedThemes;
 export declare const getComputedPlatformTheme: (platformIdentity: OpenFin.Identity) => Promise<ComputedTheme>;
 export declare const setSelectedScheme: (ctx: ColorSchemeOptionType) => Promise<void>;
-export {};

package/common/src/utils/performance.d.ts

@@ -1,13 +1,16 @@
-type WorkspacePerformanceMarks = 'home-registration' | 'dock-registration' | 'store-registration';
+export declare const workspacePerformancePrefix = "of-workspace-";
+type WorkspacePerformanceMarks = 'home-registration' | 'dock-registration' | 'store-registration' | 'home-show' | 'dock-show' | 'store-show' | 'workspace-app-started' | 'home-window-initialized' | 'dock-window-initialized' | 'store-window-initialized';
 /**
  * @classdesc
  * WorkspacePerformance is a class that provides a set of methods to measure performance of workspace
  *
  */
 declare class WorkspacePerformance {
+    mark(markName: WorkspacePerformanceMarks): void;
     markStart(markName: WorkspacePerformanceMarks): void;
     markEnd(markName: WorkspacePerformanceMarks): void;
-    markEndAndMeasure(markName: WorkspacePerformanceMarks): void;
+    markEndAndMeasure(markName: WorkspacePerformanceMarks): PerformanceMeasure;
+    markAndMeasure(markName: WorkspacePerformanceMarks, measureAgainst: WorkspacePerformanceMarks): PerformanceMeasure;
     reportWorkspacePerformanceEntries(): PerformanceEntry[];
     reportWorkspacePerformance(): {
         name: string;