@oracle/oraclejet-preact 18.0.10 → 18.0.12

package/cjs/ButtonSetButton-f040e18d.js

@@ -0,0 +1,35 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var BaseButton = require('./BaseButton-6b9f7463.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-3a532315.js');
+var toggleButtonUtils = require('./toggleButtonUtils-16aa521b.js');
+var buttonUtils = require('./buttonUtils-1f339a8e.js');
+
+/**
+ * Toggle buttons allow users to switch between states when pressed.
+ */
+const ButtonSetButton = compat.forwardRef(({ startIcon, endIcon, isSelected = false, onToggle, position, autofocus, testId, label, value, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, ...props }, ref) => {
+    const buttonSetProps = useButtonSetContext.useButtonSetContext();
+    const { inputProps: baseInputProps, buttonSetButtonProps, globalEventProps, isDisabled } = buttonUtils.processSetButtonProps(props, buttonSetProps);
+    const inputProps = {
+        ...baseInputProps,
+        display: buttonSetProps.display ?? props.display ?? 'all'
+    };
+    const styling = toggleButtonUtils.toggleStyling(buttonSetButtonProps.layoutWidth, isSelected, false, // switch
+    true, // label
+    buttonSetButtonProps.variant === 'outlined', position, true, // hasLabel
+    false // iconOnly
+    );
+    return (jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(globalEventProps, buttonSetButtonProps), ref: ref, onAction: () => {
+            onToggle?.({ value: isSelected });
+        }, elementDetails: { type: 'span', isFocusable: false, isLabel: true }, width: buttonSetProps.width ? '100%' : width, autofocus: autofocus, styling: styling, "aria-describedby": ariaDescribedBy, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { label: label, isSelected: isSelected, isDisabled: isDisabled, startIcon: startIcon, endIcon: endIcon, value: value, ...inputProps }) }));
+});
+ButtonSetButton.displayName = 'ButtonSetButton';
+
+exports.ButtonSetButton = ButtonSetButton;
+//# sourceMappingURL=ButtonSetButton-f040e18d.js.map

package/cjs/ButtonSetButton-f040e18d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetButton-f040e18d.js","sources":["../../src/UNSAFE_ButtonSetButton/ButtonSetButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport { ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { useButtonSetContext } from '#hooks/UNSAFE_useButtonSetContext';\nimport { ToggleButtonLabel } from '../UNSAFE_ToggleButtonLabel';\nimport {\n  toggleStyling,\n  processSetButtonProps,\n  LayoutWidths,\n  ButtonSetPosition,\n  type InputTypes,\n  type ButtonIntrinsicProps\n} from '#utils/UNSAFE_buttonUtils';\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\nexport type ButtonSetButtonProps = ButtonIntrinsicProps &\n  WidthProps &\n  TestIdProps & {\n    /**\n     * The startIcon is the button's start icon. This should not vary depending on state.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon. This should not vary depending on state.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Input type indicate if the toggle is intended as a radio or checkbox.\n     */\n    inputType?: InputTypes;\n\n    /**\n     * The name of the input group\n     */\n    inputName?: string;\n\n    /**\n     * Specifies that the buttonsetbutton element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * label - buttonsetbutton label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * value - buttonsetbutton value\n     */\n    value?: string;\n\n    /**\n     * aria-label - override label for accessibility\n     */\n    'aria-label'?: string;\n\n    /**\n     * Indicates in what states the buttonsetbutton has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttonsetbuttons are a more prominent variation. Borderless\n     * buttonsetbuttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttonsetbuttons are salient, but lighter weight than\n     * solid buttonsetbuttons. Outlined buttonsetbuttons are useful for secondary actions.\",\n     */\n    variant?: 'outlined' | 'borderless';\n\n    /**\n     * The size indicates how large the buttonsetbutton is rendered.\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Specifies if the toggle button is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * The position modifies the borders for usage inside a button group.\n     */\n    position?: ButtonSetPosition;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n\n    /**\n     * Display indicates whether only the label or all elements should be rendered by the buttonsetbutton.\n     */\n    display?: 'label' | 'all';\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the buttonsetbutton.\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * The layoutWidth specifies if the toggle button width fits the contents or\n     * the container.\n     */\n    layoutWidth?: LayoutWidths;\n  };\n\n/**\n * Toggle buttons allow users to switch between states when pressed.\n */\nexport const ButtonSetButton = forwardRef(\n  (\n    {\n      startIcon,\n      endIcon,\n      isSelected = false,\n      onToggle,\n      position,\n      autofocus,\n      testId,\n      label,\n      value,\n      'aria-label': accessibleLabel,\n      'aria-describedby': ariaDescribedBy,\n      width,\n      ...props\n    }: ButtonSetButtonProps,\n    ref?: Ref<HTMLButtonElement>\n  ) => {\n    const buttonSetProps = useButtonSetContext();\n    const {\n      inputProps: baseInputProps,\n      buttonSetButtonProps,\n      globalEventProps,\n      isDisabled\n    } = processSetButtonProps(props, buttonSetProps);\n    const inputProps = {\n      ...baseInputProps,\n      display: buttonSetProps.display ?? props.display ?? 'all'\n    };\n\n    const styling = toggleStyling(\n      buttonSetButtonProps.layoutWidth,\n      isSelected,\n      false, // switch\n      true, // label\n      buttonSetButtonProps.variant === 'outlined',\n      position,\n      true, // hasLabel\n      false // iconOnly\n    );\n\n    return (\n      <BaseButton\n        {...mergeProps(globalEventProps, buttonSetButtonProps)}\n        ref={ref as Ref<HTMLButtonElement> & Ref<HTMLAnchorElement> & Ref<HTMLSpanElement>}\n        onAction={() => {\n          onToggle?.({ value: isSelected });\n        }}\n        elementDetails={{ type: 'span', isFocusable: false, isLabel: true }}\n        width={buttonSetProps.width ? '100%' : width}\n        autofocus={autofocus}\n        styling={styling}\n        aria-describedby={ariaDescribedBy}\n        testId={testId}>\n        <ToggleButtonLabel\n          label={label}\n          isSelected={isSelected}\n          isDisabled={isDisabled}\n          startIcon={startIcon}\n          endIcon={endIcon}\n          value={value}\n          {...inputProps}></ToggleButtonLabel>\n      </BaseButton>\n    );\n  }\n);\n\nButtonSetButton.displayName = 'ButtonSetButton';\n"],"names":["forwardRef","useButtonSetContext","processSetButtonProps","toggleStyling","_jsx","BaseButton","mergeProps","ToggleButtonLabel"],"mappings":";;;;;;;;;;;;AAsHA;;AAEG;MACU,eAAe,GAAGA,iBAAU,CACvC,CACE,EACE,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,EACL,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,GAAG,KAAK,EACa,EACvB,GAA4B,KAC1B;AACF,IAAA,MAAM,cAAc,GAAGC,uCAAmB,EAAE,CAAC;AAC7C,IAAA,MAAM,EACJ,UAAU,EAAE,cAAc,EAC1B,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACX,GAAGC,iCAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,GAAG,cAAc;QACjB,OAAO,EAAE,cAAc,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK;KAC1D,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGC,+BAAa,CAC3B,oBAAoB,CAAC,WAAW,EAChC,UAAU,EACV,KAAK;AACL,IAAA,IAAI;IACJ,oBAAoB,CAAC,OAAO,KAAK,UAAU,EAC3C,QAAQ,EACR,IAAI;AACJ,IAAA,KAAK;KACN,CAAC;AAEF,IAAA,QACEC,cAAC,CAAAC,qBAAU,OACLC,qBAAU,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,EACtD,GAAG,EAAE,GAA6E,EAClF,QAAQ,EAAE,MAAK;YACb,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;AACpC,SAAC,EACD,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EACnE,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EACE,kBAAA,EAAA,eAAe,EACjC,MAAM,EAAE,MAAM,EAAA,QAAA,EACdF,eAACG,mCAAiB,EAAA,EAChB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACR,GAAA,UAAU,EAAsB,CAAA,EAAA,CAC3B,EACb;AACJ,CAAC,EACD;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/cjs/ButtonSetIconButton-1528caef.js

@@ -0,0 +1,42 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var hooks = require('preact/hooks');
+var BaseButton = require('./BaseButton-6b9f7463.js');
+var useTooltip = require('./useTooltip-81b7b753.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+require('./logger-2b636482.js');
+require('./LayerHost-a8c7f182.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-669c2ae0.js');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-3a532315.js');
+var toggleButtonUtils = require('./toggleButtonUtils-16aa521b.js');
+var buttonUtils = require('./buttonUtils-1f339a8e.js');
+
+/**
+ * A ButtonSetIconButton is an icon button that allows users to switch
+ * between states when pressed.
+ */
+const ButtonSetIconButton = compat.forwardRef(({ children, tooltip, value, accessibleLabel, isSelected = false, onToggle, position, testId, width, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const buttonSetProps = useButtonSetContext.useButtonSetContext();
+    const { inputProps, buttonSetButtonProps, isDisabled } = buttonUtils.processSetButtonProps(props, buttonSetProps);
+    const buttonRef = hooks.useRef(null);
+    hooks.useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text: tooltip ?? accessibleLabel,
+        isDisabled: isDisabled
+    });
+    const styling = toggleButtonUtils.toggleStyling(buttonSetButtonProps.layoutWidth, isSelected, false, true, buttonSetButtonProps.variant === 'outlined', position, undefined, true);
+    const ariaProps = { 'aria-describedby': ariaDescribedBy };
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(buttonSetButtonProps, ariaProps), elementDetails: { type: 'span', isFocusable: false, isLabel: true }, onAction: () => onToggle?.({ value: isSelected }), styling: styling, width: buttonSetProps.width ? '100%' : width, ref: buttonRef, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { ...tooltipProps, label: accessibleLabel ?? tooltip, display: 'icons', isSelected: isSelected, ...inputProps, value: value, startIcon: children }) }), tooltipContent] }));
+});
+ButtonSetIconButton.displayName = 'ButtonSetIconButton';
+
+exports.ButtonSetIconButton = ButtonSetIconButton;
+//# sourceMappingURL=ButtonSetIconButton-1528caef.js.map

package/cjs/ButtonSetIconButton-1528caef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetIconButton-1528caef.js","sources":["../../src/UNSAFE_ButtonSetIconButton/ButtonSetIconButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChild, Fragment } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useRef, useImperativeHandle } from 'preact/hooks';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport { ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { useTooltip } from '#hooks/UNSAFE_useTooltip';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { useButtonSetContext } from '#hooks/UNSAFE_useButtonSetContext';\nimport { ToggleButtonLabel } from '#UNSAFE_ToggleButtonLabel';\nimport {\n  toggleStyling,\n  processSetButtonProps,\n  ButtonSetPosition,\n  LayoutWidths,\n  type InputTypes\n} from '#utils/UNSAFE_buttonUtils';\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type ButtonSetIconButtonProps = WidthInterpolationProps &\n  TestIdProps & {\n    /**\n     * icon - the icon for the button\n     */\n    children?: ComponentChild;\n\n    /**\n     * InpuType indicate if the toggle is a radio or checkbox,\n     */\n    inputType?: InputTypes;\n\n    /**\n     * The name of the input group\n     */\n    inputName?: string;\n\n    /**\n     * The value of the input\n     */\n    value?: string;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Specifies if the toggle button is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"ghost\": \"Ghost buttons are the least prominent variant. Ghost buttons are\n     * useful for performing low-priority tasks, such as manipulating the UI.\",\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     */\n    variant?: 'ghost' | 'borderless' | 'outlined';\n\n    /**\n     * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * The position modifies the borders for usage inside a button group.\n     */\n    position?: ButtonSetPosition;\n\n    /**\n     * The layoutWidth specifies if the toggle button width fits the contents or\n     * the container.\n     */\n    layoutWidth?: LayoutWidths;\n  };\n\n/**\n * Note that either an accessibleLabel or tooltip must be specified.\n */\ntype VariationAccessibleLabelProps =\n  | {\n      /**\n       * accessibleLabel - the aria label\n       */\n      accessibleLabel: string;\n\n      /**\n       * tooltip - overrides the accessibleLabel for the tooltip\n       */\n      tooltip?: string;\n    }\n  | {\n      accessibleLabel?: string;\n\n      tooltip: string;\n    };\n\n/**\n * A ButtonSetIconButton is an icon button that allows users to switch\n * between states when pressed.\n */\nexport const ButtonSetIconButton = forwardRef(\n  (\n    {\n      children,\n      tooltip,\n      value,\n      accessibleLabel,\n      isSelected = false,\n      onToggle,\n      position,\n      testId,\n      width,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    }: ButtonSetIconButtonProps & VariationAccessibleLabelProps & TestIdProps,\n    ref?: ForwardedRef<HTMLButtonElement>\n  ) => {\n    const buttonSetProps = useButtonSetContext();\n    const { inputProps, buttonSetButtonProps, isDisabled } = processSetButtonProps(\n      props,\n      buttonSetProps\n    );\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    useImperativeHandle(ref!, () => buttonRef.current!, [buttonRef]);\n\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: tooltip ?? accessibleLabel,\n      isDisabled: isDisabled\n    });\n\n    const styling = toggleStyling(\n      buttonSetButtonProps.layoutWidth,\n      isSelected,\n      false,\n      true,\n      buttonSetButtonProps.variant === 'outlined',\n      position,\n      undefined,\n      true\n    );\n\n    const ariaProps = { 'aria-describedby': ariaDescribedBy };\n\n    return (\n      <Fragment>\n        <BaseButton\n          {...mergeProps(buttonSetButtonProps, ariaProps)}\n          elementDetails={{ type: 'span', isFocusable: false, isLabel: true }}\n          onAction={() => onToggle?.({ value: isSelected })}\n          styling={styling}\n          width={buttonSetProps.width ? '100%' : width}\n          ref={buttonRef}\n          testId={testId}>\n          <ToggleButtonLabel\n            {...tooltipProps}\n            label={accessibleLabel ?? tooltip}\n            display={'icons'}\n            isSelected={isSelected}\n            {...inputProps}\n            value={value}\n            startIcon={children}></ToggleButtonLabel>\n        </BaseButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n\nButtonSetIconButton.displayName = 'ButtonSetIconButton';\n"],"names":["forwardRef","useButtonSetContext","processSetButtonProps","useRef","useImperativeHandle","useTooltip","toggleStyling","_jsxs","Fragment","_jsx","BaseButton","mergeProps","ToggleButtonLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyHA;;;AAGG;AACU,MAAA,mBAAmB,GAAGA,iBAAU,CAC3C,CACE,EACE,QAAQ,EACR,OAAO,EACP,KAAK,EACL,eAAe,EACf,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,EACL,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EAC+D,EACzE,GAAqC,KACnC;AACF,IAAA,MAAM,cAAc,GAAGC,uCAAmB,EAAE,CAAC;AAC7C,IAAA,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAGC,iCAAqB,CAC5E,KAAK,EACL,cAAc,CACf,CAAC;AAEF,IAAA,MAAM,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAC;AAClD,IAAAC,yBAAmB,CAAC,GAAI,EAAE,MAAM,SAAS,CAAC,OAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAEjE,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,qBAAU,CAAC;QAClD,IAAI,EAAE,OAAO,IAAI,eAAe;AAChC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAGC,+BAAa,CAC3B,oBAAoB,CAAC,WAAW,EAChC,UAAU,EACV,KAAK,EACL,IAAI,EACJ,oBAAoB,CAAC,OAAO,KAAK,UAAU,EAC3C,QAAQ,EACR,SAAS,EACT,IAAI,CACL,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;IAE1D,QACEC,gBAACC,eAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,eAACC,qBAAU,EAAA,EAAA,GACLC,qBAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC/C,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EACnE,QAAQ,EAAE,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EACjD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK,EAC5C,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,QAAA,EAAAF,cAAA,CAACG,mCAAiB,EACZ,EAAA,GAAA,YAAY,EAChB,KAAK,EAAE,eAAe,IAAI,OAAO,EACjC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,QAAQ,EAAA,CAAsB,GAChC,EACZ,cAAc,CACN,EAAA,CAAA,EACX;AACJ,CAAC,EACD;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/cjs/ButtonSetItem-f66bd186.js

@@ -0,0 +1,67 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var ButtonSetButton = require('./ButtonSetButton-f040e18d.js');
+var ButtonSetIconButton = require('./ButtonSetIconButton-1528caef.js');
+var hooks = require('preact/hooks');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+require('./ButtonSetPositionContext-6a358667.js');
+var useButtonSetPositionContext = require('./useButtonSetPositionContext-409e4cd6.js');
+var toggleButtonUtils = require('./toggleButtonUtils-16aa521b.js');
+
+/**
+ * A ButtonSetItem specifies buttons for a buttonset.
+ */
+const ButtonSetItem = ({ isDisabled: isPropsDisabled, ...props }) => {
+    // The buttonSetItem context determines if a buttonset button or icon button rendered
+    // The buttonset context control provides variant, size, isItemDisabled, inputType, inputName. value
+    // The buttonset position control provides position, isSelected,
+    const { display, inputType, isDisabled: isSetDisabled, buttonSetValue, onCommit, ...buttonsetProps } = useButtonSetContext.useButtonSetContext();
+    const positionProps = useButtonSetPositionContext.useButtonSetPositionContext();
+    // The property isItemDisabled, if defined, overrides buttonSetItem settings.
+    const isItemDisabled = isPropsDisabled ?? isSetDisabled;
+    const iconProps = {
+        tooltip: props.label,
+        value: props.value
+    };
+    const isRadio = inputType === 'radio';
+    const onToggleHandlerSingle = hooks.useCallback(() => {
+        if (isRadio) {
+            onCommit?.({
+                previousValue: buttonSetValue,
+                value: [props.value]
+            });
+        }
+    }, [buttonSetValue, onCommit, isRadio, props.value]);
+    const onToggleHandlerMultiple = hooks.useCallback(() => {
+        if (!isRadio) {
+            const newButtonSetValue = toggleButtonUtils.toggleButtonSetItem(props.value, buttonSetValue);
+            onCommit?.({
+                previousValue: buttonSetValue,
+                value: newButtonSetValue
+            });
+        }
+    }, [buttonSetValue, onCommit, isRadio, props.value]);
+    // When toggled, the button invokes the buttonset commit, which can update the buttonset value, which then
+    // updates the buttonset context buttonSetValue causing this buttonSetItem to render appropriately.
+    return display === 'icons' ? (jsxRuntime.jsx(ButtonSetIconButton.ButtonSetIconButton, { isSelected: isButtonSetItemSelected(props.value, buttonSetValue), onToggle: isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple, isDisabled: isItemDisabled, ...iconProps, ...positionProps, ...buttonsetProps, children: props.startIcon })) : (jsxRuntime.jsx(ButtonSetButton.ButtonSetButton, { isSelected: isButtonSetItemSelected(props.value, buttonSetValue), onToggle: isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple, isDisabled: isItemDisabled, ...props, ...positionProps, ...buttonsetProps }));
+};
+/**
+ * Check if buttonSetValue contains the buttonSetItem.
+ * Note the buttonSetValue can be a set of strings or a string, depending on whether a checkbox or
+ * radio type is used.
+ * @param buttonSetItemValue
+ * @param buttonSetValue
+ * @returns
+ */
+function isButtonSetItemSelected(buttonSetItemValue, buttonSetValue) {
+    if (!buttonSetValue) {
+        return false;
+    }
+    return buttonSetValue?.indexOf(buttonSetItemValue) > -1;
+}
+ButtonSetItem.displayName = 'ButtonSetItem';
+
+exports.ButtonSetItem = ButtonSetItem;
+//# sourceMappingURL=ButtonSetItem-f66bd186.js.map

package/cjs/ButtonSetItem-f66bd186.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetItem-f66bd186.js","sources":["../../src/UNSAFE_ButtonSetItem/ButtonSetItem.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren } from 'preact';\n\nimport { ButtonSetButton } from '../UNSAFE_ButtonSetButton';\nimport { ButtonSetIconButton } from '../UNSAFE_ButtonSetIconButton';\nimport { useCallback } from 'preact/hooks';\n\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useButtonSetContext } from '../hooks/UNSAFE_useButtonSetContext';\nimport { useButtonSetPositionContext } from '../hooks/UNSAFE_useButtonSetPositionContext';\nimport { toggleButtonSetItem } from '#utils/UNSAFE_buttonUtils';\n\nexport type ButtonSetItemProps = TestIdProps & {\n  /**\n   * Value of the selected buttonSetItem option.\n   */\n  value: string;\n\n  /**\n   * label - label\n   */\n  label?: string;\n\n  /**\n   * The startIcon is the button's start icon.\n   */\n  startIcon?: ComponentChildren;\n\n  /**\n   * The endIcon is the button's end icon.\n   */\n  endIcon?: ComponentChildren;\n\n  /**\n   * Specifies that the ButtonSetSingle element should be disabled.\n   */\n  isDisabled?: boolean;\n};\n\n/**\n * A ButtonSetItem specifies buttons for a buttonset.\n */\nexport const ButtonSetItem = ({ isDisabled: isPropsDisabled, ...props }: ButtonSetItemProps) => {\n  // The buttonSetItem context determines if a buttonset button or icon button rendered\n  // The buttonset context control provides variant, size, isItemDisabled, inputType, inputName. value\n  // The buttonset position control provides position, isSelected,\n  const {\n    display,\n    inputType,\n    isDisabled: isSetDisabled,\n    buttonSetValue,\n    onCommit,\n    ...buttonsetProps\n  } = useButtonSetContext();\n\n  const positionProps = useButtonSetPositionContext();\n  // The property isItemDisabled, if defined, overrides buttonSetItem settings.\n  const isItemDisabled = isPropsDisabled ?? isSetDisabled;\n  const iconProps = {\n    tooltip: props.label,\n    value: props.value\n  };\n\n  const isRadio = inputType === 'radio';\n\n  const onToggleHandlerSingle = useCallback(() => {\n    if (isRadio) {\n      onCommit?.({\n        previousValue: buttonSetValue,\n        value: [props.value]\n      });\n    }\n  }, [buttonSetValue, onCommit, isRadio, props.value]);\n\n  const onToggleHandlerMultiple = useCallback(() => {\n    if (!isRadio) {\n      const newButtonSetValue = toggleButtonSetItem(props.value, buttonSetValue);\n      onCommit?.({\n        previousValue: buttonSetValue,\n        value: newButtonSetValue\n      });\n    }\n  }, [buttonSetValue, onCommit, isRadio, props.value]);\n\n  // When toggled, the button invokes the buttonset commit, which can update the buttonset value, which then\n  // updates the buttonset context buttonSetValue causing this buttonSetItem to render appropriately.\n  return display === 'icons' ? (\n    <ButtonSetIconButton\n      isSelected={isButtonSetItemSelected(props.value, buttonSetValue)}\n      onToggle={isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple}\n      isDisabled={isItemDisabled}\n      {...iconProps}\n      {...positionProps}\n      {...buttonsetProps}>\n      {props.startIcon}\n    </ButtonSetIconButton>\n  ) : (\n    <ButtonSetButton\n      isSelected={isButtonSetItemSelected(props.value, buttonSetValue)}\n      onToggle={isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple}\n      isDisabled={isItemDisabled}\n      {...props}\n      {...positionProps}\n      {...buttonsetProps}></ButtonSetButton>\n  );\n};\n\n/**\n * Check if buttonSetValue contains the buttonSetItem.\n * Note the buttonSetValue can be a set of strings or a string, depending on whether a checkbox or\n * radio type is used.\n * @param buttonSetItemValue\n * @param buttonSetValue\n * @returns\n */\nfunction isButtonSetItemSelected(\n  buttonSetItemValue: string,\n  buttonSetValue: Array<string> | undefined\n): boolean {\n  if (!buttonSetValue) {\n    return false;\n  }\n  return buttonSetValue?.indexOf(buttonSetItemValue) > -1;\n}\n\nButtonSetItem.displayName = 'ButtonSetItem';\n"],"names":["useButtonSetContext","useButtonSetPositionContext","useCallback","toggleButtonSetItem","_jsx","ButtonSetIconButton","ButtonSetButton"],"mappings":";;;;;;;;;;;;AA6CA;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,KAAK,EAAsB,KAAI;;;;AAI7F,IAAA,MAAM,EACJ,OAAO,EACP,SAAS,EACT,UAAU,EAAE,aAAa,EACzB,cAAc,EACd,QAAQ,EACR,GAAG,cAAc,EAClB,GAAGA,uCAAmB,EAAE,CAAC;AAE1B,IAAA,MAAM,aAAa,GAAGC,uDAA2B,EAAE,CAAC;;AAEpD,IAAA,MAAM,cAAc,GAAG,eAAe,IAAI,aAAa,CAAC;AACxD,IAAA,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,KAAK,CAAC,KAAK;QACpB,KAAK,EAAE,KAAK,CAAC,KAAK;KACnB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,SAAS,KAAK,OAAO,CAAC;AAEtC,IAAA,MAAM,qBAAqB,GAAGC,iBAAW,CAAC,MAAK;QAC7C,IAAI,OAAO,EAAE;AACX,YAAA,QAAQ,GAAG;AACT,gBAAA,aAAa,EAAE,cAAc;AAC7B,gBAAA,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;AACrB,aAAA,CAAC,CAAC;SACJ;AACH,KAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAErD,IAAA,MAAM,uBAAuB,GAAGA,iBAAW,CAAC,MAAK;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,MAAM,iBAAiB,GAAGC,qCAAmB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;AAC3E,YAAA,QAAQ,GAAG;AACT,gBAAA,aAAa,EAAE,cAAc;AAC7B,gBAAA,KAAK,EAAE,iBAAiB;AACzB,aAAA,CAAC,CAAC;SACJ;AACH,KAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;AAIrD,IAAA,OAAO,OAAO,KAAK,OAAO,IACxBC,cAAC,CAAAC,uCAAmB,IAClB,UAAU,EAAE,uBAAuB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,EAChE,QAAQ,EAAE,OAAO,GAAG,qBAAqB,GAAG,uBAAuB,EACnE,UAAU,EAAE,cAAc,EACtB,GAAA,SAAS,KACT,aAAa,EAAA,GACb,cAAc,EACjB,QAAA,EAAA,KAAK,CAAC,SAAS,GACI,KAEtBD,eAACE,+BAAe,EAAA,EACd,UAAU,EAAE,uBAAuB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,EAChE,QAAQ,EAAE,OAAO,GAAG,qBAAqB,GAAG,uBAAuB,EACnE,UAAU,EAAE,cAAc,EAAA,GACtB,KAAK,EACL,GAAA,aAAa,KACb,cAAc,EAAA,CAAoB,CACzC,CAAC;AACJ,EAAE;AAEF;;;;;;;AAOG;AACH,SAAS,uBAAuB,CAC9B,kBAA0B,EAC1B,cAAyC,EAAA;IAEzC,IAAI,CAAC,cAAc,EAAE;AACnB,QAAA,OAAO,KAAK,CAAC;KACd;IACD,OAAO,cAAc,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/cjs/Chart-c8be3e1d.js

@@ -0,0 +1,451 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var PRIVATE_Chart_themes_ChartStyles_css = require('./PRIVATE_Chart/themes/ChartStyles.css.js');
+var TrackResizeContainer = require('./TrackResizeContainer-261fcfa5.js');
+var useTextDimensions = require('./useTextDimensions-a651f0d4.js');
+var useCssVars = require('./useCssVars-bd95e715.js');
+var hooks = require('preact/hooks');
+var Gridlines = require('./Gridlines-ef3af190.js');
+var useId = require('./useId-6c0eeb27.js');
+var Axis = require('./Axis-ee4be3f7.js');
+var useChartViewport = require('./useChartViewport-2304ea1a.js');
+var layoutUtils$1 = require('./layoutUtils-a8eb2cca.js');
+var useChartNav = require('./useChartNav-50215440.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var useSelectDrill = require('./useSelectDrill-b8d4eee2.js');
+var useUser = require('./useUser-a4bfc560.js');
+var useTestId = require('./useTestId-5e6af45d.js');
+var cssUtils = require('./cssUtils-85f87580.js');
+var useChartContextMenu = require('./useChartContextMenu-d114824a.js');
+var useChartDnd = require('./useChartDnd-bbe16ef4.js');
+var eventsUtils = require('./eventsUtils-1abb6028.js');
+require('./accUtils-113d6024.js');
+var layoutUtils = require('./layoutUtils-4cfc9f05.js');
+var useTooltip = require('./useTooltip-81b7b753.js');
+require('./logger-2b636482.js');
+require('./LayerHost-a8c7f182.js');
+require('preact/compat');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-669c2ae0.js');
+var useChartMarquee = require('./useChartMarquee-1d307d95.js');
+var useVisTouchResponse = require('./useVisTouchResponse-376e11d5.js');
+var stringUtils = require('./stringUtils-4e4a6b2b.js');
+var useOverviewContext = require('./useOverviewContext-1732a3f1.js');
+var scale = require('./scale-22a7b539.js');
+var OverviewSlidingWindow = require('./OverviewSlidingWindow-aafdca27.js');
+var PRIVATE_VisOverview_themes_VisOverview_css = require('./PRIVATE_VisOverview/themes/VisOverview.css.js');
+var ScrollBar = require('./ScrollBar-dc5cf205.js');
+
+function getNextGroup(info, viewportEndIndex, isGroupNavigable) {
+    const groupIndex = info.groupIndex + 1;
+    if (groupIndex >= viewportEndIndex) {
+        return;
+    }
+    if (isGroupNavigable(groupIndex)) {
+        return { groupIndex };
+    }
+    return getNextGroup({ groupIndex }, viewportEndIndex, isGroupNavigable);
+}
+function getPreviousGroup(info, isGroupNavigable) {
+    const groupIndex = info.groupIndex - 1;
+    if (groupIndex < 0) {
+        return;
+    }
+    if (isGroupNavigable(groupIndex)) {
+        return { groupIndex };
+    }
+    return getPreviousGroup({ groupIndex }, isGroupNavigable);
+}
+function getGroupNavUtil(groups, renderedGroups, xIndexExtent, drilling, isRtl) {
+    const isGroupNavigable = (groupIndex) => {
+        const groupsDrilling = groups[renderedGroups[groupIndex]].drilling;
+        return (drilling === 'on' || drilling === 'groupsOnly') && groupsDrilling != 'off';
+    };
+    const getDefaultNavGroup = (info) => {
+        if (xIndexExtent.startIndex > renderedGroups[info.groupIndex]) {
+            info.groupIndex = 0;
+            return info;
+        }
+        else if (xIndexExtent.endIndex < renderedGroups[info.groupIndex]) {
+            info.groupIndex = renderedGroups.length - 1;
+            return info;
+        }
+        return;
+    };
+    const getNextNavGroup = (info, arrow) => {
+        let nextGroup = getDefaultNavGroup(info);
+        if (nextGroup)
+            return nextGroup;
+        if (arrow === 'ArrowRight') {
+            nextGroup = isRtl
+                ? getPreviousGroup(info, isGroupNavigable)
+                : getNextGroup(info, renderedGroups.length, isGroupNavigable);
+        }
+        else {
+            nextGroup = isRtl
+                ? getNextGroup(info, renderedGroups.length, isGroupNavigable)
+                : getPreviousGroup(info, isGroupNavigable);
+        }
+        return nextGroup || info;
+    };
+    return { getDefaultNavGroup, getNextNavGroup };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function useTextTruncation({ getTextAndBounds, width, isRtl }) {
+    const [text, setText] = hooks.useState();
+    const bounds = hooks.useRef();
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text,
+        position: 'top-start',
+        offset: layoutUtils.calculateOffset(isRtl, width, bounds.current)
+    });
+    const onPointerMove = (event) => {
+        const textAndBounds = getTextAndBounds(event.target);
+        if (textAndBounds) {
+            bounds.current = textAndBounds.bounds;
+            setText(textAndBounds.text);
+        }
+        else {
+            setText(undefined);
+        }
+    };
+    return {
+        tooltipContent,
+        tooltipProps: mergeProps.mergeProps({ onPointerMove }, tooltipProps)
+    };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function getWindowCoords(isRtl, xViewportExtent, xAxisExtent, yViewportExtent, yAxisExtent, plotAreaSpace) {
+    const xDomain = [xAxisExtent.min, xAxisExtent.max];
+    const xRange = (isRtl
+        ? [plotAreaSpace.x + plotAreaSpace.width, plotAreaSpace.x]
+        : [plotAreaSpace.x, plotAreaSpace.x + plotAreaSpace.width]);
+    const xScale = new scale.ScaleLinear(xDomain, xRange);
+    const yDomain = [yAxisExtent.min, yAxisExtent.max];
+    const yRange = [plotAreaSpace.y + plotAreaSpace.height, plotAreaSpace.y];
+    const yScale = new scale.ScaleLinear(yDomain, yRange);
+    const windowX = xScale.transform(xViewportExtent.viewportMin);
+    const windowWidth = Math.abs(xScale.transform(xViewportExtent.viewportMax) - xScale.transform(xViewportExtent.viewportMin));
+    return {
+        windowX: isRtl ? windowX - windowWidth : windowX + 0.5,
+        windowWidth: windowWidth - 0.5,
+        windowY: yScale.transform(yViewportExtent.viewportMax),
+        windowHeight: Math.abs(yScale.transform(yViewportExtent.viewportMax) - yScale.transform(yViewportExtent.viewportMin)),
+        xScale,
+        yScale
+    };
+}
+
+function OverviewBackground({ x, width, height, y, windowX, windowHeight, windowWidth, windowY }) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: x, y: y, width: Math.max(0, windowX - x), height: height, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground }), jsxRuntime.jsx("rect", { x: windowX + windowWidth, width: Math.max(0, x + width - windowX - windowWidth), y: y, height: height, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground }), jsxRuntime.jsx("rect", { x: windowX, y: y, height: Math.max(0, windowY - y), width: windowWidth, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground }), jsxRuntime.jsx("rect", { x: windowX, y: windowY + windowHeight, width: windowWidth, class: PRIVATE_VisOverview_themes_VisOverview_css.styles.overviewBackground, height: Math.max(y + height - windowY - windowHeight, 0) })] }));
+}
+
+function getRenderer(xAxisExtent, isRtl, overviewXScale, plotAreaSpace, windowCoords, hasHandles, onViewportChange) {
+    return {
+        slidingWindow: (jsxRuntime.jsx(OverviewSlidingWindow.OverviewSlidingWindow, { ...plotAreaSpace, ...windowCoords, hasHandles: hasHandles, onWindowDimsChange: (props) => {
+                layoutUtils$1.updateViewportFromOverview(xAxisExtent, isRtl, windowCoords.windowX, windowCoords.windowWidth, props.deltaX, props.deltaWidth, overviewXScale, onViewportChange);
+            } })),
+        background: jsxRuntime.jsx(OverviewBackground, { ...plotAreaSpace, ...windowCoords })
+    };
+}
+
+const OVERVIEW_GAP = 10;
+const chartVars = cssUtils.getChartVars();
+function ChartWithDimensions({ width, height, selectedIds, hiddenIds, hideAndShowBehavior = 'none', orientation = 'vertical', xAxis, yAxis, plotArea, dragMode = 'user', series, groups, isStacked = false, getDataItem, selectionMode = 'none', drilling = 'off', dataCursorPosition, onSelectionChange, isDataCursorEnabled, dataCursorStyle, onViewportChange, onDataCursorPositionChange, onItemDrill, onGroupDrill, onItemHover, onItemFocus, datatip, zoomAndScroll = 'off', offset, getNavUtil, getDataItemPos, getGapRatio, valueFormats, findNearest, getMarkerInfo, isRtl, children, testId, renderGridLinesInFront, isDataXAxis, contextMenuConfig, overview = 'off', defaultOverviewContentRenderer, isOverview, yAxisSize, overviewRenderer, ...props }) {
+    const testIdProps = useTestId.useTestId(testId);
+    const rootRef = hooks.useRef(null);
+    const isTestEnv = testIdProps['data-testid'] !== undefined;
+    const isHoriz = orientation === 'horizontal';
+    const { xAxisPosition, yAxisPosition } = layoutUtils$1.getAxesPosition(yAxis, isHoriz, isRtl);
+    const { resolvedVars, cssContent } = useCssVars.useCssVars(chartVars);
+    const colors = Array.from(Array(12)).map((_, index) => {
+        return resolvedVars[`color${index + 1}`];
+    });
+    const { textMeasureContent, getTextDimensions } = useTextDimensions.useTextDimensions();
+    let availSpace = layoutUtils$1.getAvailSpace(width, height);
+    if (isOverview && yAxisSize) {
+        const w = availSpace.width - yAxisSize;
+        const gaps = layoutUtils$1.getOuterGaps(w, height);
+        availSpace.width -= yAxisSize - 2 * gaps.width;
+        availSpace.x += yAxisSize - gaps.width;
+    }
+    const isTimeAxis = xAxis?.timeAxisType != null;
+    const updatedSpace = layoutUtils$1.getScrollBarSpace(isTimeAxis, availSpace, zoomAndScroll, xAxisPosition, overview);
+    let scrollDims = updatedSpace.scrollDims;
+    availSpace = updatedSpace.availSpace;
+    const hiddenSet = new Set(hiddenIds);
+    const { locale } = useUser.useUser();
+    const { xProps, xScale, xViewportExtent, xAxisExtent, xIndexExtent, xAxisMinExtent, yViewportExtent, yAxisExtent, groupWidth, yProps, yScale, yMaxDim, yMajorTicks, xMajorTicks, yMinorTicks, xMinorTicks, plotAreaSpace, xSpace, ySpace, idToDataMap, formatAxisLabel, formatYValue } = layoutUtils$1.getLayoutInfo(series, groups, getDataItem, xAxis, yAxis, availSpace, hiddenSet, hideAndShowBehavior, isHoriz, isRtl, isStacked, resolvedVars['labelFontSize'], offset, locale, getTextDimensions, isTestEnv, isDataXAxis);
+    scrollDims = layoutUtils$1.updateScrollBarSpace(scrollDims, xAxisPosition === 'bottom', isRtl, yMaxDim);
+    const gapRatio = getGapRatio(xIndexExtent.startIndex, xIndexExtent.endIndex);
+    const getNextChartItem = getNavUtil(xIndexExtent.startIndex, xIndexExtent.endIndex);
+    const renderedGroupsIndex = xProps.tickLabels.map(({ index }) => index + xIndexExtent.startIndex);
+    const { getNextNavGroup, getDefaultNavGroup } = getGroupNavUtil(groups, renderedGroupsIndex, xIndexExtent, // TODO : JET-71301 | Scatter should have different nav utils call.
+    drilling, isRtl);
+    const { cursor, yAxisCursor, marqueeProps, marqueeContent, toggleButtonContent, isPointInsideMarquee, dragMode: mode } = useChartMarquee.useChartMarquee({
+        plotAreaSpace,
+        xSpace,
+        ySpace,
+        dragMode,
+        chartWidth: width,
+        isMultiSelection: selectionMode === 'multiple',
+        onViewportChange,
+        isZoomScroll: zoomAndScroll === 'live',
+        xAxisExtent,
+        xScale,
+        selectedIds,
+        getDataById: (id) => idToDataMap.get(id),
+        onSelectionChange,
+        viewportMax: xViewportExtent.viewportMax,
+        viewportMin: xViewportExtent.viewportMin,
+        isRtl,
+        xAxisMinExtent
+    });
+    const { touchResponse, touchResponseStyle } = useVisTouchResponse.useVisTouchResponse({
+        type: 'auto',
+        supportsTouchDragGestures: mode !== 'off',
+        rootRef
+    });
+    const { activeId, focusedItemInfo, hoveredItemInfo, focusedGroupInfo, navProps, onFocusUpdate } = useChartNav.useChartNav({
+        rootRef,
+        getNextChartItem,
+        getNextNavGroup,
+        getDefaultNavGroup,
+        touchResponse,
+        onItemHover,
+        onItemFocus,
+        drilling,
+        xIndexExtent
+    });
+    const onContextMenuDismissed = (gesture) => {
+        if (gesture === 'keyboard') {
+            onFocusUpdate();
+        }
+    };
+    const getTextAndBounds = (target) => {
+        if (target != rootRef.current) {
+            const dataSet = eventsUtils.getElementData(rootRef, target);
+            const text = dataSet?.['ojText'];
+            if (!text) {
+                return;
+            }
+            if (text === xAxis?.title) {
+                return {
+                    text,
+                    bounds: xProps.titleProps?.dims
+                };
+            }
+            else if (text === yAxis?.title) {
+                return {
+                    text,
+                    bounds: yProps.titleProps?.dims
+                };
+            }
+            else if (dataSet?.['ojGroupIndex']) {
+                const index = parseInt(dataSet['ojGroupIndex']);
+                return {
+                    bounds: xProps.tickLabels[index].dims,
+                    text: text
+                };
+            }
+        }
+        if (target === rootRef.current && focusedGroupInfo.isFocusVisible) {
+            const group = groups[focusedGroupInfo.groupIndex];
+            return {
+                bounds: xProps.tickLabels[focusedGroupInfo.groupIndex].dims,
+                text: group.name || group.id
+            };
+        }
+        return;
+    };
+    const { tooltipContent, tooltipProps } = useTextTruncation({
+        getTextAndBounds,
+        width,
+        isRtl
+    });
+    const { selectDrillProps, selectionContent } = useSelectDrill.useSelectDrill({
+        selectionMode,
+        selection: [...selectedIds],
+        onChange: onSelectionChange,
+        rootRef,
+        drilling,
+        onItemDrill,
+        onGroupDrill,
+        focusedGroupInfo,
+        focusedItemInfo,
+        groups,
+        getDataItem,
+        getDataById: (id) => idToDataMap.get(id)
+    });
+    const viewportProps = useChartViewport.useChartViewport({
+        rootRef,
+        width,
+        height,
+        xViewportExtent,
+        yViewportExtent,
+        xAxisExtent,
+        yAxisExtent,
+        xScale,
+        yScale,
+        plotAreaSpace,
+        isRtl,
+        isHoriz,
+        zoomAndScroll,
+        onViewportChange
+    });
+    const findNearestData = findNearest(xScale, yScale, groupWidth, gapRatio);
+    const getDataItemPosition = getDataItemPos(xScale, yScale, groupWidth, gapRatio);
+    const [datatipDisabled, setDatatipDisabled] = hooks.useState(false);
+    const { datatipContent, dataCursorContent, datatipProps: { 'aria-describedby': datatipAriaDescribedby, ...datatipProps } } = useSelectDrill.useChartDatatipAndCursor({
+        series,
+        groups,
+        width,
+        height,
+        findNearest: findNearestData,
+        plotAreaSpace,
+        onDataCursorPositionChange,
+        isDataCursorEnabled,
+        dataCursorPosition,
+        dataCursorStyle,
+        hoveredItemInfo,
+        focusedItemInfo,
+        getDataItem,
+        getMarkerInfo,
+        getDataItemPos: getDataItemPosition,
+        datatip,
+        valueFormats,
+        isHoriz,
+        touchResponse,
+        isDisabled: datatipDisabled,
+        xScale: xScale,
+        yScale,
+        timeAxisType: xAxis?.timeAxisType,
+        formatAxisLabel,
+        formatYValue,
+        hasXYValues: isDataXAxis
+    });
+    const isGroupInteractive = (index) => {
+        if (xAxis?.timeAxisType != null) {
+            return false;
+        }
+        const groupDrill = groups[index]?.drilling;
+        if (groupDrill === 'on') {
+            return true;
+        }
+        if (groupDrill != 'off' && (drilling === 'on' || drilling === 'groupsOnly')) {
+            return true;
+        }
+        return false;
+    };
+    const plotAreaClipPathId = useId.useId();
+    const { startIndex: xStartIndex, endIndex: xEndIndex } = xIndexExtent;
+    const gridLines = (jsxRuntime.jsx(Gridlines.Gridlines, { plotArea: plotArea, yMinorTicks: yMinorTicks, xMinorTicks: xMinorTicks, xScale: xScale, yScale: yScale, isLog: yAxis?.scale === 'log', yTicks: yMajorTicks, xTicks: xMajorTicks, yAxisPosition: yAxisPosition, isDataXAxis: isDataXAxis }));
+    const hasData = series.length > 0 && groups.length > 0;
+    const { contextMenuContent, contextMenuProps } = useChartContextMenu.useChartContextMenu({
+        isRtl,
+        width,
+        height,
+        getDataItemPosition,
+        series,
+        groups,
+        getDataItem,
+        focusedItemInfo,
+        rootRef,
+        xAxisTitle: xAxis?.title,
+        yAxisTitle: yAxis?.title,
+        contextMenuConfig: hasData ? contextMenuConfig : undefined,
+        onContextMenuDismissed
+    });
+    const [dragOver, setDragOver] = hooks.useState({
+        accepted: undefined,
+        type: ''
+    });
+    const { draggable, dndProps, dndContent } = useChartDnd.useChartDnd({
+        onDrag: props.onDrag,
+        onDragStart: props.onDragStart,
+        onDragEnd: props.onDragEnd,
+        onDragEnter: props.onDragEnter,
+        onDragLeave: props.onDragLeave,
+        onDragOver: props.onDragOver,
+        onDrop: props.onDrop,
+        itemsDraggable: props.itemsDraggable,
+        groupDraggable: props.groupDraggable,
+        rootRef,
+        groups,
+        series,
+        selectedIds,
+        getDataItem,
+        xSpace,
+        ySpace,
+        plotAreaSpace,
+        setDragOver,
+        setDatatipDisabled,
+        onSelectionChange
+    });
+    const eventsProps = mergeProps.mergeProps(navProps, selectDrillProps, viewportProps, datatipProps, marqueeProps, tooltipProps, contextMenuProps, dndProps);
+    const overviewContentRenderer = overview != 'off' && (overview === 'on' || !overview.renderer)
+        ? defaultOverviewContentRenderer
+        : undefined;
+    const { background, slidingWindow } = overviewRenderer(plotAreaSpace);
+    return (jsxRuntime.jsxs("div", { tabIndex: isOverview ? undefined : 0, draggable: draggable, ref: rootRef, "aria-activedescendant": activeId, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": stringUtils.merge([props['aria-describedby'], datatipAriaDescribedby]), style: { ...touchResponseStyle }, role: isOverview ? undefined : 'application', className: PRIVATE_Chart_themes_ChartStyles_css.styles.baseChartStyle, "data-oj-private-selection-mode": isTestEnv ? selectionMode : undefined, ...testIdProps, ...(isOverview ? {} : eventsProps), children: [jsxRuntime.jsxs("svg", { width: "100%", height: scrollDims.height != 0 && overview != 'off'
+                    ? `${Math.ceil((updatedSpace.availSpace.height + OVERVIEW_GAP) * 100) / height}%`
+                    : '100%', children: [jsxRuntime.jsx("clipPath", { id: `${plotAreaClipPathId}`, children: jsxRuntime.jsx("rect", { ...plotAreaSpace }) }), background, jsxRuntime.jsx(Gridlines.PlotArea, { color: plotArea?.color, dragOverStyle: dragOver.type !== 'plotArea' ? 'none' : dragOver.accepted ? 'accept' : 'reject', yScale: yScale, hasAxisLine: !isOverview, cursor: cursor, isLog: yAxis?.scale === 'log', availSpace: plotAreaSpace, xAxisPosition: xAxisPosition, isDataXAxis: isDataXAxis, isRtl: isRtl }), !renderGridLinesInFront && gridLines, jsxRuntime.jsx(Axis.Axis, { ...yProps, axisPosition: yAxisPosition, isRtl: isRtl, cursor: yAxisCursor, availSpace: ySpace, dragOverStyle: dragOver.type !== 'yAxis' ? 'none' : dragOver.accepted ? 'accept' : 'reject' }), jsxRuntime.jsx(Axis.Axis, { ...xProps, isRtl: isRtl, axisPosition: xAxisPosition, isTextInteractive: isGroupInteractive, activeId: activeId, cursor: cursor, focusedGroupIndex: focusedGroupInfo.isFocusVisible ? focusedGroupInfo.groupIndex : undefined, availSpace: xSpace, dragOverStyle: dragOver.type !== 'xAxis' ? 'none' : dragOver.accepted ? 'accept' : 'reject' }), jsxRuntime.jsxs("g", { "clip-path": `url(#${plotAreaClipPathId})`, children: [children({
+                                xStartIndex,
+                                xEndIndex,
+                                colors,
+                                xScale: xScale,
+                                yScale,
+                                isPointInsideMarquee,
+                                defaultFontSize: resolvedVars['labelFontSize'],
+                                gapRatio,
+                                activeId,
+                                focusedItemInfo,
+                                hoveredItemInfo,
+                                getTextDimensions,
+                                groupWidth
+                            }), renderGridLinesInFront && gridLines, dataCursorContent] }), slidingWindow, zoomAndScroll === 'live' && !isOverview && (jsxRuntime.jsx(ScrollBar.ScrollBar, { availSpace: scrollDims, isRtl: isRtl, viewport: xViewportExtent, axisExtent: xAxisExtent, isHoriz: xAxisPosition === 'bottom' })), marqueeContent] }), jsxRuntime.jsx(useOverviewContext.OverviewContext.Provider, { value: {
+                    yAxisSize: ySpace.width,
+                    isOverview: true,
+                    width,
+                    height: scrollDims.height,
+                    overviewRenderer: (overviewChartPlotArea) => {
+                        const { xScale: overviewXScale, ...windowCoords } = getWindowCoords(isRtl, xViewportExtent, xAxisExtent, yViewportExtent, yAxisExtent, overviewChartPlotArea);
+                        return getRenderer(xAxisExtent, isRtl, overviewXScale, overviewChartPlotArea, windowCoords, true, onViewportChange);
+                    }
+                }, children: !isOverview && overview !== 'off' && overviewContentRenderer && (jsxRuntime.jsx("div", { style: { width, height: scrollDims.height }, children: overviewContentRenderer() })) }), toggleButtonContent, textMeasureContent, cssContent, datatipContent, tooltipContent, contextMenuContent, selectionContent, dndContent] }));
+}
+
+function Chart({ width, height, ...props }) {
+    // TODO: reevaluate how we handle empty data
+    const { isOverview, overviewRenderer, yAxisSize, width: overviewWidth, height: overviewHeight } = useOverviewContext.useOverviewContext();
+    let chartWidth = width;
+    let chartHeight = height;
+    if (chartWidth === undefined && isOverview && overviewWidth !== undefined) {
+        chartWidth = `${overviewWidth}px`;
+    }
+    if (chartHeight === undefined && isOverview && overviewHeight !== undefined) {
+        chartHeight = `${overviewHeight}px`;
+    }
+    return (jsxRuntime.jsx(TrackResizeContainer.TrackResizeContainer, { width: chartWidth, height: chartHeight, class: PRIVATE_Chart_themes_ChartStyles_css.dimensionStyle, children: (width, height) => width || height ? (jsxRuntime.jsx(ChartWithDimensions, { width: width, height: height, ...props, yAxisSize: yAxisSize, isOverview: isOverview, overviewRenderer: overviewRenderer })) : undefined }));
+}
+
+exports.Chart = Chart;
+//# sourceMappingURL=Chart-c8be3e1d.js.map