@itwin/core-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/cjs/core-react/settings/SettingsManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsManager.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsManager.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Settings\n */\n\nimport { BeUiEvent, Logger } from \"@itwin/core-bentley\";\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\nimport { UiCore } from \"../UiCore\";\n\n/** Interface used to populate a tab entry in the SettingContainer control\n * @public\n */\nexport interface SettingsTabEntry {\n  /** unique id for entry */\n  readonly tabId: string;\n  /** localized display label */\n  readonly label: string;\n  /** Setting page content to display when tab item is selected. */\n  readonly page: JSX.Element;\n  /** Setting to true if page will register to watch for stage closing event so it can save any dirty settings. Page component should register and handle the events:\n   * `settingsManager.onProcessSettingsTabActivation` and `settingsManager.onProcessSettingsContainerClose` */\n  readonly pageWillHandleCloseRequest?: boolean;\n  /** used to determine position in tablist */\n  readonly itemPriority: number;\n  /** Optional Subtitle to show below label. */\n  readonly subLabel?: string;\n  /** Icon specification */\n  readonly icon?: string | JSX.Element;\n  /** Tooltip. Allows JSX|Element to support react-tooltip component */\n  readonly tooltip?: string | JSX.Element;\n  /** Allows Settings entry to be disabled */\n  readonly isDisabled?: boolean | ConditionalBooleanValue;\n}\n\n/** Event class for [[this.onSettingsProvidersChanged]] which is emitted when a new SettingsTabsProvider is added or removed.\n * @public\n */\nexport class SettingsProvidersChangedEvent extends BeUiEvent<SettingsProvidersChangedEventArgs> { }\n\n/** Arguments of [[this.onSettingsProvidersChanged]] event.\n * @public\n */\nexport interface SettingsProvidersChangedEventArgs {\n  readonly providers: ReadonlyArray<SettingsTabsProvider>;\n}\n\n/** Event class for [[this.onProcessSettingsTabActivation]] which is emitted when a new Tab needs to be activated. This allows the current\n * settings page to save its settings before activating the new SettingTab.\n * @public\n */\nexport class ProcessSettingsTabActivationEvent extends BeUiEvent<ProcessSettingsTabActivationEventArgs> { }\n\n/** Arguments of [[this.onProcessSettingsTabActivation]] event.\n * @public\n */\nexport interface ProcessSettingsTabActivationEventArgs {\n  readonly tabSelectionFunc: (tabId: string) => void;\n  readonly requestedSettingsTabId: string;\n}\n\n/** Event class for [[this.onProcessSettingsContainerClose]] which is emitted when the settings container will be closed. This allows the current\n * settings page to save its settings before calling the function to close the container.\n * @public\n */\nexport class ProcessSettingsContainerCloseEvent extends BeUiEvent<ProcessSettingsContainerCloseEventArgs> { }\n\n/** Event class for [[this.onCloseSettingsContainer]] which is monitored by the settings container and indicates that some out process want to close the settings container.\n * @internal\n */\nexport class CloseSettingsContainerEvent extends BeUiEvent<ProcessSettingsContainerCloseEventArgs> { }\n\n/** Arguments of [[this.onProcessSettingsContainerClose]] event.\n * @public\n */\nexport interface ProcessSettingsContainerCloseEventArgs {\n  readonly closeFunc: (args: any) => void;\n  readonly closeFuncArgs?: any;\n}\n\n/** Event class for [[this.onActivateSettingsTab]] which is emitted when API call needs to set the active settings tab (ie via Tool key-in).\n * @public\n */\nexport class ActivateSettingsTabEvent extends BeUiEvent<ActivateSettingsTabEventArgs> { }\n\n/** Arguments of [[this.onActivateSettingsTab]] event.\n * @public\n */\nexport interface ActivateSettingsTabEventArgs {\n  readonly settingsTabId: string;\n}\n\n/** Setting Provider interface. Implemented by classes that want to supply settings pages for display in the SettingContainer. The\n * classes that implement this interface need to be registered with the [[SettingsManager]].\n * @public\n */\nexport interface SettingsTabsProvider {\n  /** Id of provider, used to remove registration. */\n  readonly id: string;\n  getSettingEntries(stageId: string, stageUsage: string): ReadonlyArray<SettingsTabEntry> | undefined;\n}\n\n/** Settings Manager class. Hold registration of settings providers and supplies events for the provided settings pages to listen.\n * @public\n */\nexport class SettingsManager {\n  private _providers: ReadonlyArray<SettingsTabsProvider> = [];\n\n  /** Event raised when SettingsProviders are changed.\n   */\n  public readonly onSettingsProvidersChanged = new SettingsProvidersChangedEvent();\n\n  /** Event raised solely for a settings page to monitor so it can save its settings before continuing tab activation.\n   * See React hook function `useSaveBeforeActivatingNewSettingsTab`.\n   */\n  public readonly onProcessSettingsTabActivation = new ProcessSettingsTabActivationEvent();\n\n  /** Event raised when the settings container will be closed. Any setting page component that is 'modal' should register to\n   * listen to this event so that it can save its state before closing. See React hook function `useSaveBeforeClosingSettingsContainer`.\n   */\n  public readonly onProcessSettingsContainerClose = new ProcessSettingsContainerCloseEvent();\n\n  /** Event raised to change the active settings tab shown in UI. Monitored by the SettingsContainer.\n   * @internal\n   */\n  public readonly onActivateSettingsTab = new ActivateSettingsTabEvent();\n\n  /** Event monitored by SettingsContainer to process request to close the settings container.\n   * @internal\n   */\n  public readonly onCloseSettingsContainer = new CloseSettingsContainerEvent();\n\n  /** @public */\n  public get providers(): ReadonlyArray<SettingsTabsProvider> { return this._providers; }\n  public set providers(p: ReadonlyArray<SettingsTabsProvider>) {\n    this._providers = p;\n    this.onSettingsProvidersChanged.emit({ providers: p });\n  }\n\n  /** Called by application when an tool, keyin, or other process want to change the active settings tab/page giving the current tab/page and opportunity\n   * to save its state.\n   */\n  public activateSettingsTab(settingsTabId: string) {\n    this.onActivateSettingsTab.emit({ settingsTabId });\n  }\n\n  /** Called by application when the Settings Container is to be closed. The function to invoke to actually close the Settings Container is\n   * passed in and executed once the active settings tab/page has a chance to save its settings.\n   */\n  public closeSettingsContainer(closeFunc: (args: any) => void, closeFuncArgs?: any) {\n    this.onCloseSettingsContainer.emit({ closeFunc, closeFuncArgs });\n  }\n\n  public addSettingsProvider(settingsProvider: SettingsTabsProvider): void {\n    const foundProvider = this._providers.find((p) => p.id === settingsProvider.id);\n    if (!foundProvider) {\n      const updatedProviders = [\n        ...this.providers,\n        settingsProvider,\n      ];\n      this.providers = updatedProviders;\n    } else {\n      Logger.logInfo(UiCore.loggerCategory(this), `Settings Provider with id of ${settingsProvider.id} has already been registered`);\n    }\n  }\n\n  public removeSettingsProvider(providerId: string): boolean {\n    let result = false;\n    const updatedProviders = this._providers.filter((p) => p.id !== providerId);\n    if (updatedProviders.length !== this._providers.length) {\n      this.providers = updatedProviders;\n      result = true;\n    }\n\n    return result;\n  }\n\n  /** Get an array of SettingsTabEntry objects to populate the settings container. */\n  public getSettingEntries(stageId: string, stageUsage: string): Array<SettingsTabEntry> {\n    const allSettingEntries: SettingsTabEntry[] = [];\n    // Consult the registered SettingsProviders\n    this._providers.forEach((p) => {\n      const entries = p.getSettingEntries(stageId, stageUsage);\n      entries && allSettingEntries.push(...entries);\n    });\n\n    return allSettingEntries;\n  }\n}\n"]}
+{"version":3,"file":"SettingsManager.js","sourceRoot":"","sources":["../../../../src/core-react/settings/SettingsManager.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Settings\r\n */\r\n\r\nimport { BeUiEvent, Logger } from \"@itwin/core-bentley\";\r\nimport { ConditionalBooleanValue } from \"@itwin/appui-abstract\";\r\nimport { UiCore } from \"../UiCore\";\r\n\r\n/** Interface used to populate a tab entry in the SettingContainer control\r\n * @public\r\n */\r\nexport interface SettingsTabEntry {\r\n  /** unique id for entry */\r\n  readonly tabId: string;\r\n  /** localized display label */\r\n  readonly label: string;\r\n  /** Setting page content to display when tab item is selected. */\r\n  readonly page: JSX.Element;\r\n  /** Setting to true if page will register to watch for stage closing event so it can save any dirty settings. Page component should register and handle the events:\r\n   * `settingsManager.onProcessSettingsTabActivation` and `settingsManager.onProcessSettingsContainerClose` */\r\n  readonly pageWillHandleCloseRequest?: boolean;\r\n  /** used to determine position in tablist */\r\n  readonly itemPriority: number;\r\n  /** Optional Subtitle to show below label. */\r\n  readonly subLabel?: string;\r\n  /** Icon specification */\r\n  readonly icon?: string | JSX.Element;\r\n  /** Tooltip. Allows JSX|Element to support react-tooltip component */\r\n  readonly tooltip?: string | JSX.Element;\r\n  /** Allows Settings entry to be disabled */\r\n  readonly isDisabled?: boolean | ConditionalBooleanValue;\r\n}\r\n\r\n/** Event class for [[this.onSettingsProvidersChanged]] which is emitted when a new SettingsTabsProvider is added or removed.\r\n * @public\r\n */\r\nexport class SettingsProvidersChangedEvent extends BeUiEvent<SettingsProvidersChangedEventArgs> { }\r\n\r\n/** Arguments of [[this.onSettingsProvidersChanged]] event.\r\n * @public\r\n */\r\nexport interface SettingsProvidersChangedEventArgs {\r\n  readonly providers: ReadonlyArray<SettingsTabsProvider>;\r\n}\r\n\r\n/** Event class for [[this.onProcessSettingsTabActivation]] which is emitted when a new Tab needs to be activated. This allows the current\r\n * settings page to save its settings before activating the new SettingTab.\r\n * @public\r\n */\r\nexport class ProcessSettingsTabActivationEvent extends BeUiEvent<ProcessSettingsTabActivationEventArgs> { }\r\n\r\n/** Arguments of [[this.onProcessSettingsTabActivation]] event.\r\n * @public\r\n */\r\nexport interface ProcessSettingsTabActivationEventArgs {\r\n  readonly tabSelectionFunc: (tabId: string) => void;\r\n  readonly requestedSettingsTabId: string;\r\n}\r\n\r\n/** Event class for [[this.onProcessSettingsContainerClose]] which is emitted when the settings container will be closed. This allows the current\r\n * settings page to save its settings before calling the function to close the container.\r\n * @public\r\n */\r\nexport class ProcessSettingsContainerCloseEvent extends BeUiEvent<ProcessSettingsContainerCloseEventArgs> { }\r\n\r\n/** Event class for [[this.onCloseSettingsContainer]] which is monitored by the settings container and indicates that some out process want to close the settings container.\r\n * @internal\r\n */\r\nexport class CloseSettingsContainerEvent extends BeUiEvent<ProcessSettingsContainerCloseEventArgs> { }\r\n\r\n/** Arguments of [[this.onProcessSettingsContainerClose]] event.\r\n * @public\r\n */\r\nexport interface ProcessSettingsContainerCloseEventArgs {\r\n  readonly closeFunc: (args: any) => void;\r\n  readonly closeFuncArgs?: any;\r\n}\r\n\r\n/** Event class for [[this.onActivateSettingsTab]] which is emitted when API call needs to set the active settings tab (ie via Tool key-in).\r\n * @public\r\n */\r\nexport class ActivateSettingsTabEvent extends BeUiEvent<ActivateSettingsTabEventArgs> { }\r\n\r\n/** Arguments of [[this.onActivateSettingsTab]] event.\r\n * @public\r\n */\r\nexport interface ActivateSettingsTabEventArgs {\r\n  readonly settingsTabId: string;\r\n}\r\n\r\n/** Setting Provider interface. Implemented by classes that want to supply settings pages for display in the SettingContainer. The\r\n * classes that implement this interface need to be registered with the [[SettingsManager]].\r\n * @public\r\n */\r\nexport interface SettingsTabsProvider {\r\n  /** Id of provider, used to remove registration. */\r\n  readonly id: string;\r\n  getSettingEntries(stageId: string, stageUsage: string): ReadonlyArray<SettingsTabEntry> | undefined;\r\n}\r\n\r\n/** Settings Manager class. Hold registration of settings providers and supplies events for the provided settings pages to listen.\r\n * @public\r\n */\r\nexport class SettingsManager {\r\n  private _providers: ReadonlyArray<SettingsTabsProvider> = [];\r\n\r\n  /** Event raised when SettingsProviders are changed.\r\n   */\r\n  public readonly onSettingsProvidersChanged = new SettingsProvidersChangedEvent();\r\n\r\n  /** Event raised solely for a settings page to monitor so it can save its settings before continuing tab activation.\r\n   * See React hook function `useSaveBeforeActivatingNewSettingsTab`.\r\n   */\r\n  public readonly onProcessSettingsTabActivation = new ProcessSettingsTabActivationEvent();\r\n\r\n  /** Event raised when the settings container will be closed. Any setting page component that is 'modal' should register to\r\n   * listen to this event so that it can save its state before closing. See React hook function `useSaveBeforeClosingSettingsContainer`.\r\n   */\r\n  public readonly onProcessSettingsContainerClose = new ProcessSettingsContainerCloseEvent();\r\n\r\n  /** Event raised to change the active settings tab shown in UI. Monitored by the SettingsContainer.\r\n   * @internal\r\n   */\r\n  public readonly onActivateSettingsTab = new ActivateSettingsTabEvent();\r\n\r\n  /** Event monitored by SettingsContainer to process request to close the settings container.\r\n   * @internal\r\n   */\r\n  public readonly onCloseSettingsContainer = new CloseSettingsContainerEvent();\r\n\r\n  /** @public */\r\n  public get providers(): ReadonlyArray<SettingsTabsProvider> { return this._providers; }\r\n  public set providers(p: ReadonlyArray<SettingsTabsProvider>) {\r\n    this._providers = p;\r\n    this.onSettingsProvidersChanged.emit({ providers: p });\r\n  }\r\n\r\n  /** Called by application when an tool, keyin, or other process want to change the active settings tab/page giving the current tab/page and opportunity\r\n   * to save its state.\r\n   */\r\n  public activateSettingsTab(settingsTabId: string) {\r\n    this.onActivateSettingsTab.emit({ settingsTabId });\r\n  }\r\n\r\n  /** Called by application when the Settings Container is to be closed. The function to invoke to actually close the Settings Container is\r\n   * passed in and executed once the active settings tab/page has a chance to save its settings.\r\n   */\r\n  public closeSettingsContainer(closeFunc: (args: any) => void, closeFuncArgs?: any) {\r\n    this.onCloseSettingsContainer.emit({ closeFunc, closeFuncArgs });\r\n  }\r\n\r\n  public addSettingsProvider(settingsProvider: SettingsTabsProvider): void {\r\n    const foundProvider = this._providers.find((p) => p.id === settingsProvider.id);\r\n    if (!foundProvider) {\r\n      const updatedProviders = [\r\n        ...this.providers,\r\n        settingsProvider,\r\n      ];\r\n      this.providers = updatedProviders;\r\n    } else {\r\n      Logger.logInfo(UiCore.loggerCategory(this), `Settings Provider with id of ${settingsProvider.id} has already been registered`);\r\n    }\r\n  }\r\n\r\n  public removeSettingsProvider(providerId: string): boolean {\r\n    let result = false;\r\n    const updatedProviders = this._providers.filter((p) => p.id !== providerId);\r\n    if (updatedProviders.length !== this._providers.length) {\r\n      this.providers = updatedProviders;\r\n      result = true;\r\n    }\r\n\r\n    return result;\r\n  }\r\n\r\n  /** Get an array of SettingsTabEntry objects to populate the settings container. */\r\n  public getSettingEntries(stageId: string, stageUsage: string): Array<SettingsTabEntry> {\r\n    const allSettingEntries: SettingsTabEntry[] = [];\r\n    // Consult the registered SettingsProviders\r\n    this._providers.forEach((p) => {\r\n      const entries = p.getSettingEntries(stageId, stageUsage);\r\n      entries && allSettingEntries.push(...entries);\r\n    });\r\n\r\n    return allSettingEntries;\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/slider/Slider.d.ts

@@ -0,0 +1,80 @@
+/** @packageDocumentation
+ * @module Slider
+ */
+import "./Slider.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[Slider]] component
+  * @public
+  */
+export interface SliderProps extends CommonProps {
+    /** Values to set Slider to initially */
+    values: number[];
+    /** Minimum value */
+    min: number;
+    /** Maximum value */
+    max: number;
+    /** Format the min display value */
+    formatMin?: (value: number) => string;
+    /** Format the max display value */
+    formatMax?: (value: number) => string;
+    /** Step value. Default is 0.1. */
+    step?: number;
+    /** The interaction mode. Default is 1. Possible values:
+      * 1 - allows handles to cross each other.
+      * 2 - keeps the sliders from crossing and separated by a step.
+      */
+    mode?: number | (() => number);
+    /** Indicates whether the display of the Slider values is reversed. */
+    reversed?: boolean;
+    /** Indicates whether the Slider is disabled. */
+    disabled?: boolean;
+    /** Indicates whether to compensate for the tick marks when determining the width. */
+    includeTicksInWidth?: boolean;
+    /** Indicates whether to show tooltip with the value. The tooltip will be positioned above the Slider, by default. */
+    showTooltip?: boolean;
+    /** Indicates whether the tooltip should show below the Slider instead of above. */
+    tooltipBelow?: boolean;
+    /** Format a value for the tooltip */
+    formatTooltip?: (value: number) => string;
+    /** Indicates whether to show min & max values to the left & right of the Slider. */
+    showMinMax?: boolean;
+    /** Image to show for min. */
+    minImage?: React.ReactNode;
+    /** Image to show for max. */
+    maxImage?: React.ReactNode;
+    /** Indicates whether to show tick marks under the Slider. */
+    showTicks?: boolean;
+    /** Indicates whether to show tick labels under the tick marks. */
+    showTickLabels?: boolean;
+    /** Format a tick mark value */
+    formatTick?: (tick: number) => string;
+    /** Function to get the tick count. The default tick count is 10. */
+    getTickCount?: () => number;
+    /** Function to get the tick values. This overrides the tick count from getTickCount.
+      * Use this prop if you want to specify your own tick values instead of ticks generated by the slider.
+      * The numbers should be valid numbers in the domain and correspond to the step value.
+      * Invalid values will be coerced to the closet matching value in the domain.
+      */
+    getTickValues?: () => number[];
+    /** Listens for value changes.
+      * Triggered when the value of the slider has changed. This will receive changes at
+      * the end of a slide as well as changes from clicks on rails and tracks.
+      */
+    onChange?: (values: ReadonlyArray<number>) => void;
+    /** Listens for value updates.
+      *  Called with the values at each update (caution: high-volume updates when dragging).
+      */
+    onUpdate?: (values: ReadonlyArray<number>) => void;
+    /** No longer available use onUpdate. */
+    onSlideStart?: (values: ReadonlyArray<number>) => void;
+    /** No longer available use onChange. */
+    onSlideEnd?: (values: ReadonlyArray<number>) => void;
+}
+/**
+  * Slider React component displays a range slider.
+  * @public
+  * @deprecated in 3.0. Use Slider in itwinui-react instead
+  */
+export declare function Slider(props: SliderProps): JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

package/lib/cjs/core-react/slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/core-react/slider/Slider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C;;IAEI;AACJ,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,wCAAwC;IACxC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtC,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;QAGI;IACJ,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC/B,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,qHAAqH;IACrH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE1C,oFAAoF;IACpF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,MAAM,CAAC;IAC5B;;;;QAII;IACJ,aAAa,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAE/B;;;QAGI;IACJ,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD;;QAEI;IACJ,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD,wCAAwC;IACxC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACtD;AAED;;;;IAII;AACJ,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAuGxC"}

package/lib/cjs/core-react/slider/Slider.js

@@ -0,0 +1,91 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Slider
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+require("./Slider.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const BodyText_1 = require("../text/BodyText");
+/**
+  * Slider React component displays a range slider.
+  * @public
+  * @deprecated in 3.0. Use Slider in itwinui-react instead
+  */
+function Slider(props) {
+    const { className, style, min, max, values, step, mode, formatMin, formatMax, onChange, onUpdate, showTicks, showTickLabels, formatTick, getTickCount, getTickValues, includeTicksInWidth, reversed, disabled, showMinMax, minImage, maxImage, showTooltip, tooltipBelow, formatTooltip, } = props;
+    const containerClassNames = (0, classnames_1.default)("core-slider-container", className, disabled && "core-disabled", showTickLabels && "core-slider-tickLabels", includeTicksInWidth && "core-slider-includeTicksInWidth");
+    const sliderClassNames = (0, classnames_1.default)("core-slider", showMinMax && "core-slider-minMax");
+    const internalFormatTooltip = React.useCallback((value) => {
+        if (formatTooltip)
+            return formatTooltip(value);
+        const actualStep = Math.abs(step !== null && step !== void 0 ? step : 1);
+        if (Number.isInteger(actualStep))
+            return value.toFixed(0);
+        const stepString = actualStep.toString();
+        const decimalIndex = stepString.indexOf(".");
+        const numDecimals = actualStep.toString().length - (decimalIndex + 1);
+        return value.toFixed(numDecimals);
+    }, [formatTooltip, step]);
+    const tooltipProps = React.useCallback((_index, val) => {
+        const content = internalFormatTooltip(val);
+        if (!showTooltip)
+            return { visible: false };
+        return { placement: tooltipBelow ? "bottom" : "top", content };
+    }, [internalFormatTooltip, showTooltip, tooltipBelow]);
+    const tickLabels = React.useMemo(() => {
+        let ticks;
+        if (showTicks) {
+            const count = getTickCount ? getTickCount() : 0;
+            if (count) {
+                ticks = [];
+                const increment = (max - min) / count;
+                for (let i = 0; i <= count; i++) {
+                    const value = (i * increment) + min;
+                    if (showTickLabels) {
+                        const label = formatTick ? formatTick(value) : internalFormatTooltip(value);
+                        ticks.push(label);
+                    }
+                    else {
+                        ticks.push("");
+                    }
+                }
+            }
+            else /* istanbul ignore else */ if (getTickValues) {
+                return getTickValues().map((val) => formatTick ? formatTick(val) : internalFormatTooltip(val));
+            }
+        }
+        return ticks;
+    }, [formatTick, getTickCount, getTickValues, internalFormatTooltip, max, min, showTickLabels, showTicks]);
+    const thumbMode = React.useMemo(() => {
+        let inMode = 1;
+        if (typeof mode === "function")
+            inMode = mode();
+        return 1 === inMode ? "allow-crossing" : "inhibit-crossing";
+    }, [mode]);
+    return (React.createElement("div", { className: containerClassNames, style: style },
+        showMinMax &&
+            React.createElement(MinMax, { value: min, testId: "core-slider-min", image: minImage, format: formatMin }),
+        React.createElement(itwinui_react_1.Slider, { className: sliderClassNames, values: values, min: min, max: max, step: step, thumbMode: thumbMode, trackDisplayMode: !reversed ? "auto" : "odd-segments", disabled: disabled, minLabel: "", maxLabel: "", tooltipProps: tooltipProps, tickLabels: tickLabels, onChange: onChange, onUpdate: onUpdate }),
+        showMinMax &&
+            React.createElement(MinMax, { value: max, testId: "core-slider-max", image: maxImage, format: formatMax })));
+}
+exports.Slider = Slider;
+/** MinMax component for Slider */
+function MinMax(props) {
+    const { value, testId, image, format } = props;
+    let element;
+    const displayValue = format !== undefined ? format(value) : value;
+    if (image)
+        element = React.createElement(React.Fragment, null, image);
+    else
+        element = React.createElement(BodyText_1.BodyText, { className: "core-slider-minmax", "data-testid": testId }, displayValue);
+    return element;
+}
+//# sourceMappingURL=Slider.js.map

package/lib/cjs/core-react/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/core-react/slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Slider\r\n */\r\n\r\nimport \"./Slider.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Slider as ItwinSlider } from \"@itwin/itwinui-react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { BodyText } from \"../text/BodyText\";\r\n\r\n// cspell:ignore pushable\r\n\r\n/** Properties for [[Slider]] component\r\n  * @public\r\n  */\r\nexport interface SliderProps extends CommonProps {\r\n  /** Values to set Slider to initially */\r\n  values: number[];\r\n  /** Minimum value */\r\n  min: number;\r\n  /** Maximum value */\r\n  max: number;\r\n  /** Format the min display value */\r\n  formatMin?: (value: number) => string;\r\n  /** Format the max display value */\r\n  formatMax?: (value: number) => string;\r\n\r\n  /** Step value. Default is 0.1. */\r\n  step?: number;\r\n  /** The interaction mode. Default is 1. Possible values:\r\n    * 1 - allows handles to cross each other.\r\n    * 2 - keeps the sliders from crossing and separated by a step.\r\n    */\r\n  mode?: number | (() => number);\r\n  /** Indicates whether the display of the Slider values is reversed. */\r\n  reversed?: boolean;\r\n  /** Indicates whether the Slider is disabled. */\r\n  disabled?: boolean;\r\n  /** Indicates whether to compensate for the tick marks when determining the width. */\r\n  includeTicksInWidth?: boolean;\r\n\r\n  /** Indicates whether to show tooltip with the value. The tooltip will be positioned above the Slider, by default. */\r\n  showTooltip?: boolean;\r\n  /** Indicates whether the tooltip should show below the Slider instead of above. */\r\n  tooltipBelow?: boolean;\r\n  /** Format a value for the tooltip */\r\n  formatTooltip?: (value: number) => string;\r\n\r\n  /** Indicates whether to show min & max values to the left & right of the Slider. */\r\n  showMinMax?: boolean;\r\n  /** Image to show for min. */\r\n  minImage?: React.ReactNode;\r\n  /** Image to show for max. */\r\n  maxImage?: React.ReactNode;\r\n\r\n  /** Indicates whether to show tick marks under the Slider. */\r\n  showTicks?: boolean;\r\n  /** Indicates whether to show tick labels under the tick marks. */\r\n  showTickLabels?: boolean;\r\n  /** Format a tick mark value */\r\n  formatTick?: (tick: number) => string;\r\n  /** Function to get the tick count. The default tick count is 10. */\r\n  getTickCount?: () => number;\r\n  /** Function to get the tick values. This overrides the tick count from getTickCount.\r\n    * Use this prop if you want to specify your own tick values instead of ticks generated by the slider.\r\n    * The numbers should be valid numbers in the domain and correspond to the step value.\r\n    * Invalid values will be coerced to the closet matching value in the domain.\r\n    */\r\n  getTickValues?: () => number[];\r\n\r\n  /** Listens for value changes.\r\n    * Triggered when the value of the slider has changed. This will receive changes at\r\n    * the end of a slide as well as changes from clicks on rails and tracks.\r\n    */\r\n  onChange?: (values: ReadonlyArray<number>) => void;\r\n  /** Listens for value updates.\r\n    *  Called with the values at each update (caution: high-volume updates when dragging).\r\n    */\r\n  onUpdate?: (values: ReadonlyArray<number>) => void;\r\n  /** No longer available use onUpdate. */\r\n  onSlideStart?: (values: ReadonlyArray<number>) => void;\r\n  /** No longer available use onChange. */\r\n  onSlideEnd?: (values: ReadonlyArray<number>) => void;\r\n}\r\n\r\n/**\r\n  * Slider React component displays a range slider.\r\n  * @public\r\n  * @deprecated in 3.0. Use Slider in itwinui-react instead\r\n  */\r\nexport function Slider(props: SliderProps) {\r\n  const { className, style, min, max, values, step, mode,\r\n    formatMin, formatMax,\r\n    onChange, onUpdate,\r\n    showTicks, showTickLabels, formatTick, getTickCount, getTickValues, includeTicksInWidth,\r\n    reversed, disabled,\r\n    showMinMax, minImage, maxImage,\r\n    showTooltip, tooltipBelow, formatTooltip,\r\n  } = props;\r\n\r\n  const containerClassNames = classnames(\r\n    \"core-slider-container\",\r\n    className,\r\n    disabled && \"core-disabled\",\r\n    showTickLabels && \"core-slider-tickLabels\",\r\n    includeTicksInWidth && \"core-slider-includeTicksInWidth\",\r\n  );\r\n  const sliderClassNames = classnames(\r\n    \"core-slider\",\r\n    showMinMax && \"core-slider-minMax\",\r\n  );\r\n\r\n  const internalFormatTooltip = React.useCallback((value: number) => {\r\n    if (formatTooltip)\r\n      return formatTooltip(value);\r\n\r\n    const actualStep = Math.abs(step ?? 1);\r\n\r\n    if (Number.isInteger(actualStep))\r\n      return value.toFixed(0);\r\n\r\n    const stepString = actualStep.toString();\r\n    const decimalIndex = stepString.indexOf(\".\");\r\n    const numDecimals = actualStep.toString().length - (decimalIndex + 1);\r\n    return value.toFixed(numDecimals);\r\n  }, [formatTooltip, step]);\r\n\r\n  const tooltipProps = React.useCallback((_index: number, val: number) => {\r\n    const content = internalFormatTooltip(val);\r\n    if (!showTooltip)\r\n      return { visible: false };\r\n    return { placement: tooltipBelow ? \"bottom\" : \"top\", content } as const;\r\n  }, [internalFormatTooltip, showTooltip, tooltipBelow]);\r\n\r\n  const tickLabels = React.useMemo(() => {\r\n    let ticks: string[] | undefined;\r\n\r\n    if (showTicks) {\r\n      const count = getTickCount ? getTickCount() : 0;\r\n      if (count) {\r\n        ticks = [];\r\n        const increment = (max - min) / count;\r\n        for (let i = 0; i <= count; i++) {\r\n          const value = (i * increment) + min;\r\n          if (showTickLabels) {\r\n            const label = formatTick ? formatTick(value) : internalFormatTooltip(value);\r\n            ticks.push(label);\r\n          } else {\r\n            ticks.push(\"\");\r\n          }\r\n        }\r\n      } else /* istanbul ignore else */ if (getTickValues) {\r\n        return getTickValues().map((val: number) => formatTick ? formatTick(val) : internalFormatTooltip(val));\r\n      }\r\n    }\r\n    return ticks;\r\n  }, [formatTick, getTickCount, getTickValues, internalFormatTooltip, max, min, showTickLabels, showTicks]);\r\n\r\n  const thumbMode = React.useMemo(() => {\r\n    let inMode = 1;\r\n    if (typeof mode === \"function\")\r\n      inMode = mode();\r\n\r\n    return 1 === inMode ? \"allow-crossing\" : \"inhibit-crossing\";\r\n  }, [mode]);\r\n\r\n  return (\r\n    <div className={containerClassNames} style={style}>\r\n      {showMinMax &&\r\n        <MinMax value={min} testId=\"core-slider-min\" image={minImage} format={formatMin} />\r\n      }\r\n      <ItwinSlider\r\n        className={sliderClassNames}\r\n        values={values}\r\n        min={min}\r\n        max={max}\r\n        step={step}\r\n        thumbMode={thumbMode}\r\n        trackDisplayMode={!reversed ? \"auto\" : \"odd-segments\"\r\n        }\r\n        disabled={disabled}\r\n        minLabel=\"\"\r\n        maxLabel=\"\"\r\n        tooltipProps={tooltipProps}\r\n        tickLabels={tickLabels}\r\n        onChange={onChange}\r\n        onUpdate={onUpdate}\r\n      />\r\n      {showMinMax &&\r\n        <MinMax value={max} testId=\"core-slider-max\" image={maxImage} format={formatMax} />\r\n      }\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Properties for [[MinMax]] component */\r\ninterface MinMaxProps {\r\n  value: number;\r\n  testId: string;\r\n  image?: React.ReactNode;\r\n  format?: (value: number) => string;\r\n}\r\n\r\n/** MinMax component for Slider */\r\nfunction MinMax(props: MinMaxProps) {\r\n  const { value, testId, image, format } = props;\r\n  let element: React.ReactElement<any>;\r\n  const displayValue = format !== undefined ? format(value) : value;\r\n\r\n  if (image)\r\n    element = <>{image}</>;\r\n  else\r\n    element = <BodyText className=\"core-slider-minmax\" data-testid={testId}>{displayValue}</BodyText>;\r\n\r\n  return element;\r\n}\r\n"]}

package/lib/cjs/core-react/slider/Slider.scss

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/opacity";
+@import "../style/themecolors";
+@import "../button/button";
+@import "../z-index";
+
+$uicore-slider-height:          24px;
+$uicore-slider-rail-height:     4px;
+$uicore-slider-handle-size:     14px;
+$uicore-slider-minmax-margin:   6px;
+
+.core-slider-container {
+  position: relative;
+  height: $uicore-slider-height;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  span.core-slider-minmax[data-testid="core-slider-min"] {
+    margin-right: 4px;
+  }
+
+  span.core-slider-minmax[data-testid="core-slider-max"] {
+    margin-left: 4px;
+  }
+
+  &.core-slider-tickLabels {
+    margin-bottom: 9px;
+  }
+
+  &.core.slider-includeTicksInWidth {
+    margin-right: 10px;
+  }
+
+  .core-slider-minMax {
+    margin-left: $uicore-slider-minmax-margin;
+    margin-right: $uicore-slider-minmax-margin;
+  }
+
+  .core-slider {
+    flex: 1;
+    position: relative;
+    height: inherit;
+    margin-bottom: 2px;
+  }
+
+  &.core-disabled {
+    cursor: not-allowed;
+
+    .core-slider {
+      .core-slider-rail {
+        cursor: not-allowed;
+      }
+
+      .core-slider-track {
+        cursor: not-allowed;
+
+        >.core-slider-track-inner {
+          background: $buic-foreground-disabled;
+        }
+      }
+
+      .core-slider-handle {
+        background: $buic-background-control-disabled;
+        border-color: $buic-background-control-stroke-disabled;
+        cursor: not-allowed;
+      }
+
+      .core-slider-tick-mark {
+        opacity: $uicore-opacity-disabled;
+      }
+
+      .core-slider-tick-label {
+        color: $buic-foreground-disabled;
+      }
+    }
+
+    .uicore-text-body {
+      color: $buic-foreground-disabled;
+    }
+
+    .icon {
+      color: $buic-foreground-disabled;
+    }
+  }
+}
+
+.core-slider_track-tooltip-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+}

package/lib/cjs/core-react/splitbutton/SplitButton.d.ts

@@ -0,0 +1,62 @@
+/** @packageDocumentation
+ * @module SplitButton
+ */
+import "./SplitButton.scss";
+import * as React from "react";
+import { IconSpec } from "../icons/IconComponent";
+import { CommonProps } from "../utils/Props";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { ButtonType } from "../button/Button";
+/** @internal */
+export declare enum SplitButtonActionType {
+    ContextMenu = 0,
+    List = 1
+}
+/** Properties for [[SplitButton]] component
+ * @public
+ * @deprecated in 3.0. Use SplitButtonProps in itwinui-react instead
+ */
+export interface SplitButtonProps extends CommonProps {
+    /** Label to display in click area. */
+    label: string | React.ReactNode;
+    /** Listens for click events on button area */
+    onClick?: (event: any) => any;
+    /** Listens for execute on button area */
+    onExecute?: () => any;
+    /** Specifies icon for Splitbutton component */
+    icon?: IconSpec;
+    /** Indicates whether to draw a border around the button */
+    drawBorder?: boolean;
+    /** ToolTip text */
+    toolTip?: string;
+    /** Direction relative to the button to which the popup is expanded (defaults to Bottom) */
+    popupPosition?: RelativePosition;
+    /** 4 styles to tweak the content of the button */
+    buttonType?: ButtonType;
+    /** @internal */
+    initialExpanded?: boolean;
+}
+/** @internal */
+interface SplitButtonState {
+    expanded: boolean;
+}
+/**
+ * SplitButton with an action button on the left and an arrow button that displays a context menu on the right.
+ * @public
+ * @deprecated in 3.0. Use SplitButton in itwinui-react instead
+ */
+export declare class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {
+    private _arrowElement;
+    private _buttonRef;
+    private _closing;
+    /** @internal */
+    readonly state: Readonly<SplitButtonState>;
+    constructor(props: SplitButtonProps);
+    render(): JSX.Element;
+    private _handleKeyUp;
+    private _open;
+    private _handleArrowClick;
+    private _handleClose;
+}
+export {};
+//# sourceMappingURL=SplitButton.d.ts.map

package/lib/cjs/core-react/splitbutton/SplitButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../../../src/core-react/splitbutton/SplitButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAc,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,UAAU,EAA0B,MAAM,kBAAkB,CAAC;AAGtE,gBAAgB;AAChB,oBAAY,qBAAqB;IAC/B,WAAW,IAAA;IACX,IAAI,IAAA;CACL;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;IACtB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,kDAAkD;IAClD,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,gBAAgB;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,gBAAgB;AAChB,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAClF,OAAO,CAAC,aAAa,CAAqC;IAC1D,OAAO,CAAC,UAAU,CAAqC;IACvD,OAAO,CAAC,QAAQ,CAAkB;IAElC,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAuB;gBAErE,KAAK,EAAE,gBAAgB;IAQnB,MAAM,IAAI,GAAG,CAAC,OAAO;IAyDrC,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,KAAK,CAOX;IAEF,OAAO,CAAC,iBAAiB,CAQvB;IAEF,OAAO,CAAC,YAAY,CASlB;CACH"}

package/lib/cjs/core-react/splitbutton/SplitButton.js

@@ -0,0 +1,104 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module SplitButton
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitButton = exports.SplitButtonActionType = void 0;
+require("./SplitButton.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const PopupContextMenu_1 = require("../contextmenu/PopupContextMenu");
+const IconComponent_1 = require("../icons/IconComponent");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const Button_1 = require("../button/Button");
+// TODO: implement
+/** @internal */
+var SplitButtonActionType;
+(function (SplitButtonActionType) {
+    SplitButtonActionType[SplitButtonActionType["ContextMenu"] = 0] = "ContextMenu";
+    SplitButtonActionType[SplitButtonActionType["List"] = 1] = "List";
+})(SplitButtonActionType = exports.SplitButtonActionType || (exports.SplitButtonActionType = {}));
+/**
+ * SplitButton with an action button on the left and an arrow button that displays a context menu on the right.
+ * @public
+ * @deprecated in 3.0. Use SplitButton in itwinui-react instead
+ */
+class SplitButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this._arrowElement = React.createRef();
+        this._buttonRef = React.createRef();
+        this._closing = false;
+        /** @internal */
+        this.state = { expanded: false };
+        this._handleKeyUp = (event) => {
+            if (event.key === appui_abstract_1.SpecialKey.Enter) {
+                this.props.onExecute && this.props.onExecute();
+            }
+            else if (event.key === appui_abstract_1.SpecialKey.ArrowDown && !this.state.expanded) {
+                this._closing = false;
+                this._open();
+            }
+            else {
+                this._closing = false;
+            }
+        };
+        this._open = () => {
+            // istanbul ignore else
+            if (!this.state.expanded && !this._closing) {
+                this.setState({ expanded: true });
+            }
+            else {
+                this._closing = false;
+            }
+        };
+        this._handleArrowClick = (event) => {
+            if (this.state.expanded) {
+                event.stopPropagation();
+                this.setState({ expanded: false });
+                this._closing = false;
+            }
+            else {
+                this._open();
+            }
+        };
+        this._handleClose = (event) => {
+            // istanbul ignore else
+            if (this._arrowElement.current && this._buttonRef.current) {
+                // istanbul ignore next
+                if (this.state.expanded && "target" in event && this._arrowElement.current.contains(event.target))
+                    this._closing = true;
+                this.setState((_prevState) => ({ expanded: false }));
+                this._buttonRef.current.focus();
+            }
+        };
+        this.state = {
+            expanded: props.initialExpanded !== undefined ? props.initialExpanded : false,
+        };
+    }
+    render() {
+        let icon = (React.createElement(React.Fragment, null));
+        if (this.props.icon !== undefined) {
+            icon = (React.createElement(IconComponent_1.Icon, { iconSpec: this.props.icon }));
+        }
+        const borderClassName = (this.props.drawBorder && this.props.buttonType === undefined) ? "core-split-button-border" : undefined;
+        const typeClassName = this.props.buttonType !== undefined ? (0, Button_1.getButtonTypeClassName)(this.props.buttonType) : "core-split-button-default-colors";
+        const classNames = (0, classnames_1.default)("core-split-button", typeClassName, borderClassName, this.state.expanded && "core-expanded", this.props.className);
+        const position = this.props.popupPosition !== undefined ? this.props.popupPosition : appui_abstract_1.RelativePosition.BottomLeft;
+        return (React.createElement("div", { "data-testid": "core-split-button-root", title: this.props.toolTip, className: classNames, style: this.props.style, tabIndex: 0, onKeyUp: this._handleKeyUp, ref: this._buttonRef, role: "button" },
+            React.createElement("div", { "data-testid": "core-split-button-label", onClick: this.props.onClick, className: (0, classnames_1.default)("core-split-button-label", this.props.drawBorder && "core-split-button-border"), role: "button", tabIndex: -1 },
+                icon,
+                " ",
+                this.props.label),
+            React.createElement("div", { className: (0, classnames_1.default)("core-split-button-divider", this.props.drawBorder && "core-split-button-border") }),
+            React.createElement("div", { className: "core-split-button-arrow", ref: this._arrowElement, onClick: this._handleArrowClick, role: "button", tabIndex: -1 },
+                React.createElement("div", { className: (0, classnames_1.default)("core-split-button-arrow-icon", "icon", "icon-chevron-down") }),
+                React.createElement(PopupContextMenu_1.PopupContextMenu, { position: position, target: this._buttonRef.current, animate: false, selectedIndex: 0, onSelect: this._handleClose, onOutsideClick: this._handleClose, onEsc: this._handleClose, isOpen: this.state.expanded, autoflip: false }, this.props.children))));
+    }
+}
+exports.SplitButton = SplitButton;
+//# sourceMappingURL=SplitButton.js.map

package/lib/cjs/core-react/splitbutton/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../../../../src/core-react/splitbutton/SplitButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module SplitButton\r\n */\r\n\r\nimport \"./SplitButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PopupContextMenu } from \"../contextmenu/PopupContextMenu\";\r\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { ButtonType, getButtonTypeClassName } from \"../button/Button\";\r\n\r\n// TODO: implement\r\n/** @internal */\r\nexport enum SplitButtonActionType {\r\n  ContextMenu, // eslint-disable-line @typescript-eslint/no-shadow\r\n  List,\r\n}\r\n\r\n/** Properties for [[SplitButton]] component\r\n * @public\r\n * @deprecated in 3.0. Use SplitButtonProps in itwinui-react instead\r\n */\r\nexport interface SplitButtonProps extends CommonProps {\r\n  /** Label to display in click area. */\r\n  label: string | React.ReactNode;\r\n  /** Listens for click events on button area */\r\n  onClick?: (event: any) => any;\r\n  /** Listens for execute on button area */\r\n  onExecute?: () => any;\r\n  /** Specifies icon for Splitbutton component */\r\n  icon?: IconSpec;\r\n  /** Indicates whether to draw a border around the button */\r\n  drawBorder?: boolean;\r\n  /** ToolTip text */\r\n  toolTip?: string;\r\n  /** Direction relative to the button to which the popup is expanded (defaults to Bottom) */\r\n  popupPosition?: RelativePosition;\r\n  /** 4 styles to tweak the content of the button */\r\n  buttonType?: ButtonType;  // eslint-disable-line deprecation/deprecation\r\n\r\n  /** @internal */\r\n  initialExpanded?: boolean;\r\n}\r\n\r\n/** @internal */\r\ninterface SplitButtonState {\r\n  expanded: boolean;\r\n}\r\n\r\n/**\r\n * SplitButton with an action button on the left and an arrow button that displays a context menu on the right.\r\n * @public\r\n * @deprecated in 3.0. Use SplitButton in itwinui-react instead\r\n */\r\nexport class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {    // eslint-disable-line deprecation/deprecation\r\n  private _arrowElement = React.createRef<HTMLDivElement>();\r\n  private _buttonRef = React.createRef<HTMLDivElement>();\r\n  private _closing: boolean = false;\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<SplitButtonState> = { expanded: false };\r\n\r\n  constructor(props: SplitButtonProps) {    // eslint-disable-line deprecation/deprecation\r\n    super(props);\r\n\r\n    this.state = {\r\n      expanded: props.initialExpanded !== undefined ? props.initialExpanded : false,\r\n    };\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    let icon = (<></>);\r\n    if (this.props.icon !== undefined) {\r\n      icon = (\r\n        <Icon iconSpec={this.props.icon} />\r\n      );\r\n    }\r\n\r\n    const borderClassName = (this.props.drawBorder && this.props.buttonType === undefined) ? \"core-split-button-border\" : undefined;\r\n    const typeClassName = this.props.buttonType !== undefined ? getButtonTypeClassName(this.props.buttonType) : \"core-split-button-default-colors\";\r\n    const classNames = classnames(\r\n      \"core-split-button\",\r\n      typeClassName,\r\n      borderClassName,\r\n      this.state.expanded && \"core-expanded\",\r\n      this.props.className);\r\n    const position = this.props.popupPosition !== undefined ? this.props.popupPosition : RelativePosition.BottomLeft;\r\n\r\n    return (\r\n      <div data-testid=\"core-split-button-root\" title={this.props.toolTip}\r\n        className={classNames}\r\n        style={this.props.style}\r\n        tabIndex={0}\r\n        onKeyUp={this._handleKeyUp}\r\n        ref={this._buttonRef}\r\n        role=\"button\"\r\n      >\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div data-testid=\"core-split-button-label\" onClick={this.props.onClick}\r\n          className={classnames(\"core-split-button-label\", this.props.drawBorder && \"core-split-button-border\")}\r\n          role=\"button\" tabIndex={-1}\r\n        >\r\n          {icon} {this.props.label}\r\n        </div>\r\n        <div className={classnames(\"core-split-button-divider\", this.props.drawBorder && \"core-split-button-border\")} />\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div className={\"core-split-button-arrow\"} ref={this._arrowElement} onClick={this._handleArrowClick}\r\n          role=\"button\" tabIndex={-1}\r\n        >\r\n          <div className={classnames(\"core-split-button-arrow-icon\", \"icon\", \"icon-chevron-down\")} />\r\n          <PopupContextMenu\r\n            position={position}\r\n            target={this._buttonRef.current}\r\n            animate={false}\r\n            selectedIndex={0}\r\n            onSelect={this._handleClose}\r\n            onOutsideClick={this._handleClose}\r\n            onEsc={this._handleClose}\r\n            isOpen={this.state.expanded}\r\n            autoflip={false}>\r\n            {this.props.children}\r\n          </PopupContextMenu>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private _handleKeyUp = (event: React.KeyboardEvent) => {\r\n    if (event.key === SpecialKey.Enter) {\r\n      this.props.onExecute && this.props.onExecute();\r\n    } else if (event.key === SpecialKey.ArrowDown && !this.state.expanded) {\r\n      this._closing = false;\r\n      this._open();\r\n    } else {\r\n      this._closing = false;\r\n    }\r\n  };\r\n\r\n  private _open = () => {\r\n    // istanbul ignore else\r\n    if (!this.state.expanded && !this._closing) {\r\n      this.setState({ expanded: true });\r\n    } else {\r\n      this._closing = false;\r\n    }\r\n  };\r\n\r\n  private _handleArrowClick = (event: React.MouseEvent) => {\r\n    if (this.state.expanded) {\r\n      event.stopPropagation();\r\n      this.setState({ expanded: false });\r\n      this._closing = false;\r\n    } else {\r\n      this._open();\r\n    }\r\n  };\r\n\r\n  private _handleClose = (event: any) => {\r\n    // istanbul ignore else\r\n    if (this._arrowElement.current && this._buttonRef.current) {\r\n      // istanbul ignore next\r\n      if (this.state.expanded && \"target\" in event && this._arrowElement.current.contains(event.target))\r\n        this._closing = true;\r\n      this.setState((_prevState) => ({ expanded: false }));\r\n      this._buttonRef.current.focus();\r\n    }\r\n  };\r\n}\r\n"]}