@oracle/oraclejet-preact 18.0.10 → 18.0.12

package/es/ButtonSetIconButton-ead6566c.js

@@ -0,0 +1,40 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, jsx } from 'preact/jsx-runtime';
+import { Fragment } from 'preact';
+import { forwardRef } from 'preact/compat';
+import { useRef, useImperativeHandle } from 'preact/hooks';
+import { B as BaseButton } from './BaseButton-685bec17.js';
+import { u as useTooltip } from './useTooltip-98b6d3b5.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import './logger-c92f309c.js';
+import './LayerHost-15b42a3e.js';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-38192add.js';
+import { u as useButtonSetContext } from './useButtonSetContext-6a483d7f.js';
+import { T as ToggleButtonLabel } from './ToggleButtonLabel-1e23823e.js';
+import { a as toggleStyling } from './toggleButtonUtils-db5d5d21.js';
+import { a as processSetButtonProps } from './buttonUtils-be059939.js';
+
+/**
+ * A ButtonSetIconButton is an icon button that allows users to switch
+ * between states when pressed.
+ */
+const ButtonSetIconButton = forwardRef(({ children, tooltip, value, accessibleLabel, isSelected = false, onToggle, position, testId, width, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const buttonSetProps = useButtonSetContext();
+    const { inputProps, buttonSetButtonProps, isDisabled } = processSetButtonProps(props, buttonSetProps);
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
+    const { tooltipContent, tooltipProps } = useTooltip({
+        text: tooltip ?? accessibleLabel,
+        isDisabled: isDisabled
+    });
+    const styling = toggleStyling(buttonSetButtonProps.layoutWidth, isSelected, false, true, buttonSetButtonProps.variant === 'outlined', position, undefined, true);
+    const ariaProps = { 'aria-describedby': ariaDescribedBy };
+    return (jsxs(Fragment, { children: [jsx(BaseButton, { ...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: jsx(ToggleButtonLabel, { ...tooltipProps, label: accessibleLabel ?? tooltip, display: 'icons', isSelected: isSelected, ...inputProps, value: value, startIcon: children }) }), tooltipContent] }));
+});
+ButtonSetIconButton.displayName = 'ButtonSetIconButton';
+
+export { ButtonSetIconButton as B };
+//# sourceMappingURL=ButtonSetIconButton-ead6566c.js.map

package/es/ButtonSetIconButton-ead6566c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetIconButton-ead6566c.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":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAyHA;;;AAGG;AACU,MAAA,mBAAmB,GAAG,UAAU,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,GAAG,mBAAmB,EAAE,CAAC;AAC7C,IAAA,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAG,qBAAqB,CAC5E,KAAK,EACL,cAAc,CACf,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;AAClD,IAAA,mBAAmB,CAAC,GAAI,EAAE,MAAM,SAAS,CAAC,OAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAEjE,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC;QAClD,IAAI,EAAE,OAAO,IAAI,eAAe;AAChC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,aAAa,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,QACEA,KAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,IAAC,UAAU,EAAA,EAAA,GACL,UAAU,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,EAAAA,GAAA,CAAC,iBAAiB,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/es/ButtonSetItem-44315302.js

@@ -0,0 +1,65 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { B as ButtonSetButton } from './ButtonSetButton-1f8197b5.js';
+import { B as ButtonSetIconButton } from './ButtonSetIconButton-ead6566c.js';
+import { useCallback } from 'preact/hooks';
+import { u as useButtonSetContext } from './useButtonSetContext-6a483d7f.js';
+import './ButtonSetPositionContext-5730d367.js';
+import { u as useButtonSetPositionContext } from './useButtonSetPositionContext-1dc5156a.js';
+import { t as toggleButtonSetItem } from './toggleButtonUtils-db5d5d21.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();
+    const positionProps = 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 = useCallback(() => {
+        if (isRadio) {
+            onCommit?.({
+                previousValue: buttonSetValue,
+                value: [props.value]
+            });
+        }
+    }, [buttonSetValue, onCommit, isRadio, props.value]);
+    const onToggleHandlerMultiple = useCallback(() => {
+        if (!isRadio) {
+            const newButtonSetValue = 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' ? (jsx(ButtonSetIconButton, { isSelected: isButtonSetItemSelected(props.value, buttonSetValue), onToggle: isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple, isDisabled: isItemDisabled, ...iconProps, ...positionProps, ...buttonsetProps, children: props.startIcon })) : (jsx(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';
+
+export { ButtonSetItem as B };
+//# sourceMappingURL=ButtonSetItem-44315302.js.map

package/es/ButtonSetItem-44315302.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetItem-44315302.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":["_jsx"],"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,GAAG,mBAAmB,EAAE,CAAC;AAE1B,IAAA,MAAM,aAAa,GAAG,2BAA2B,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,GAAG,WAAW,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,GAAG,WAAW,CAAC,MAAK;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,MAAM,iBAAiB,GAAG,mBAAmB,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,IACxBA,GAAC,CAAA,mBAAmB,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,KAEtBA,IAAC,eAAe,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/es/Card-44b7de2f.js

@@ -0,0 +1,15 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { S as StyledCard } from './StyledCard-f5965d6d.js';
+
+/**
+ * A card is a simple container that renders a group of related information in a styled rectangular area.
+ * Width, height, padding, and background color are set through props.
+ * The aria role for card is normally "group" but this changes to "button" for action cards.
+ */
+const Card = ({ children, ...rest }) => {
+    return (jsx(StyledCard, { role: "group", parentComponentVariant: "default", ...rest, children: children }));
+};
+
+export { Card as C };
+//# sourceMappingURL=Card-44b7de2f.js.map

package/es/Card-44b7de2f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-44b7de2f.js","sources":["../../src/UNSAFE_Card/Card.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 */\n\nimport { ComponentChildren } from 'preact';\n\nimport { StyledCard } from '#PRIVATE_StyledCard';\n\nimport { type ColorProps } from '#utils/UNSAFE_interpolations/colors';\nimport { type AriaProps } from '#utils/UNSAFE_interpolations/aria';\nimport { type DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { type PaddingProps } from '#utils/UNSAFE_interpolations/padding';\nimport { type TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype StyleProps = DimensionProps & PaddingProps & ColorProps & AriaProps;\n\ntype Props = TestIdProps &\n  StyleProps & {\n    children?: ComponentChildren;\n  };\n\n/**\n * A card is a simple container that renders a group of related information in a styled rectangular area.\n * Width, height, padding, and background color are set through props.\n * The aria role for card is normally \"group\" but this changes to \"button\" for action cards.\n */\n\nexport const Card = ({ children, ...rest }: Props) => {\n  return (\n    <StyledCard role=\"group\" parentComponentVariant=\"default\" {...rest}>\n      {children}\n    </StyledCard>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;AAyBA;;;;AAIG;AAEI,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAS,KAAI;AACnD,IAAA,QACEA,GAAC,CAAA,UAAU,EAAC,EAAA,IAAI,EAAC,OAAO,EAAC,sBAAsB,EAAC,SAAS,EAAK,GAAA,IAAI,YAC/D,QAAQ,EAAA,CACE,EACb;AACJ;;;;"}

package/es/Center-8b48ab02.js

@@ -0,0 +1,16 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { F as Flex } from './Flex-8696b27b.js';
+
+/**
+ * Center is a convenience component that creates a flexbox
+ * with justifyContent: center and alignItems: center.
+ *
+ */
+// TODO: How do I add background-color, border, etc?
+function Center({ children, width = '100%', height = '100%', ...props }) {
+    return (jsx(Flex, { ...props, justify: "center", align: "center", width: width, height: height, children: children }));
+}
+
+export { Center as C };
+//# sourceMappingURL=Center-8b48ab02.js.map

package/es/Center-8b48ab02.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center-8b48ab02.js","sources":["../../src/UNSAFE_Center/Center.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { Flex } from '../UNSAFE_Flex';\n\ntype Props = DimensionProps & {\n  children?: ComponentChildren;\n};\n\n/**\n * Center is a convenience component that creates a flexbox\n * with justifyContent: center and alignItems: center.\n *\n */\n// TODO: How do I add background-color, border, etc?\nfunction Center({ children, width = '100%', height = '100%', ...props }: Props) {\n  return (\n    <Flex {...props} justify=\"center\" align=\"center\" width={width} height={height}>\n      {children}\n    </Flex>\n  );\n}\n\nexport { Center };\n"],"names":["_jsx"],"mappings":";;;;AAQA;;;;AAIG;AACH;AACA,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,KAAK,EAAS,EAAA;IAC5E,QACEA,GAAC,CAAA,IAAI,EAAK,EAAA,GAAA,KAAK,EAAE,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAC1E,QAAA,EAAA,QAAQ,EACJ,CAAA,EACP;AACJ;;;;"}

package/es/Chart-9dc97d8d.js

@@ -0,0 +1,449 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { styles as styles$1, dimensionStyle } from './PRIVATE_Chart/themes/ChartStyles.css.js';
+import { T as TrackResizeContainer } from './TrackResizeContainer-aa13760c.js';
+import { u as useTextDimensions } from './useTextDimensions-d73a1bf9.js';
+import { u as useCssVars } from './useCssVars-8e6932f8.js';
+import { useState, useRef } from 'preact/hooks';
+import { G as Gridlines, P as PlotArea } from './Gridlines-5ac89a84.js';
+import { u as useId } from './useId-03dbfdf0.js';
+import { A as Axis } from './Axis-08ec3220.js';
+import { u as useChartViewport } from './useChartViewport-3ea4b548.js';
+import { u as updateViewportFromOverview, a as getAxesPosition, b as getScrollBarSpace, c as getLayoutInfo, d as updateScrollBarSpace, e as getAvailSpace, f as getOuterGaps } from './layoutUtils-3bbcb977.js';
+import { u as useChartNav } from './useChartNav-3f0e3881.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { a as useSelectDrill, u as useChartDatatipAndCursor } from './useSelectDrill-776e616b.js';
+import { u as useUser } from './useUser-a15426fc.js';
+import { u as useTestId } from './useTestId-3bc3958c.js';
+import { g as getChartVars } from './cssUtils-2fcdd912.js';
+import { u as useChartContextMenu } from './useChartContextMenu-121a5f6d.js';
+import { u as useChartDnd } from './useChartDnd-9cf28aba.js';
+import { a as getElementData } from './eventsUtils-e5fc62d5.js';
+import './accUtils-60925ab1.js';
+import { c as calculateOffset } from './layoutUtils-6725789c.js';
+import { u as useTooltip } from './useTooltip-98b6d3b5.js';
+import './logger-c92f309c.js';
+import './LayerHost-15b42a3e.js';
+import 'preact/compat';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-38192add.js';
+import { u as useChartMarquee } from './useChartMarquee-0dc5521e.js';
+import { u as useVisTouchResponse } from './useVisTouchResponse-a59ab166.js';
+import { m as merge } from './stringUtils-16f617bc.js';
+import { O as OverviewContext, u as useOverviewContext } from './useOverviewContext-79377674.js';
+import { a as ScaleLinear } from './scale-3b7850b9.js';
+import { O as OverviewSlidingWindow } from './OverviewSlidingWindow-9e38aaaa.js';
+import { styles } from './PRIVATE_VisOverview/themes/VisOverview.css.js';
+import { S as ScrollBar } from './ScrollBar-a431a4f0.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] = useState();
+    const bounds = useRef();
+    const { tooltipContent, tooltipProps } = useTooltip({
+        text,
+        position: 'top-start',
+        offset: 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({ 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 ScaleLinear(xDomain, xRange);
+    const yDomain = [yAxisExtent.min, yAxisExtent.max];
+    const yRange = [plotAreaSpace.y + plotAreaSpace.height, plotAreaSpace.y];
+    const yScale = new 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 (jsxs(Fragment, { children: [jsx("rect", { x: x, y: y, width: Math.max(0, windowX - x), height: height, class: styles.overviewBackground }), jsx("rect", { x: windowX + windowWidth, width: Math.max(0, x + width - windowX - windowWidth), y: y, height: height, class: styles.overviewBackground }), jsx("rect", { x: windowX, y: y, height: Math.max(0, windowY - y), width: windowWidth, class: styles.overviewBackground }), jsx("rect", { x: windowX, y: windowY + windowHeight, width: windowWidth, class: styles.overviewBackground, height: Math.max(y + height - windowY - windowHeight, 0) })] }));
+}
+
+function getRenderer(xAxisExtent, isRtl, overviewXScale, plotAreaSpace, windowCoords, hasHandles, onViewportChange) {
+    return {
+        slidingWindow: (jsx(OverviewSlidingWindow, { ...plotAreaSpace, ...windowCoords, hasHandles: hasHandles, onWindowDimsChange: (props) => {
+                updateViewportFromOverview(xAxisExtent, isRtl, windowCoords.windowX, windowCoords.windowWidth, props.deltaX, props.deltaWidth, overviewXScale, onViewportChange);
+            } })),
+        background: jsx(OverviewBackground, { ...plotAreaSpace, ...windowCoords })
+    };
+}
+
+const OVERVIEW_GAP = 10;
+const chartVars = 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(testId);
+    const rootRef = useRef(null);
+    const isTestEnv = testIdProps['data-testid'] !== undefined;
+    const isHoriz = orientation === 'horizontal';
+    const { xAxisPosition, yAxisPosition } = getAxesPosition(yAxis, isHoriz, isRtl);
+    const { resolvedVars, cssContent } = useCssVars(chartVars);
+    const colors = Array.from(Array(12)).map((_, index) => {
+        return resolvedVars[`color${index + 1}`];
+    });
+    const { textMeasureContent, getTextDimensions } = useTextDimensions();
+    let availSpace = getAvailSpace(width, height);
+    if (isOverview && yAxisSize) {
+        const w = availSpace.width - yAxisSize;
+        const gaps = getOuterGaps(w, height);
+        availSpace.width -= yAxisSize - 2 * gaps.width;
+        availSpace.x += yAxisSize - gaps.width;
+    }
+    const isTimeAxis = xAxis?.timeAxisType != null;
+    const updatedSpace = getScrollBarSpace(isTimeAxis, availSpace, zoomAndScroll, xAxisPosition, overview);
+    let scrollDims = updatedSpace.scrollDims;
+    availSpace = updatedSpace.availSpace;
+    const hiddenSet = new Set(hiddenIds);
+    const { locale } = useUser();
+    const { xProps, xScale, xViewportExtent, xAxisExtent, xIndexExtent, xAxisMinExtent, yViewportExtent, yAxisExtent, groupWidth, yProps, yScale, yMaxDim, yMajorTicks, xMajorTicks, yMinorTicks, xMinorTicks, plotAreaSpace, xSpace, ySpace, idToDataMap, formatAxisLabel, formatYValue } = getLayoutInfo(series, groups, getDataItem, xAxis, yAxis, availSpace, hiddenSet, hideAndShowBehavior, isHoriz, isRtl, isStacked, resolvedVars['labelFontSize'], offset, locale, getTextDimensions, isTestEnv, isDataXAxis);
+    scrollDims = 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({
+        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({
+        type: 'auto',
+        supportsTouchDragGestures: mode !== 'off',
+        rootRef
+    });
+    const { activeId, focusedItemInfo, hoveredItemInfo, focusedGroupInfo, navProps, onFocusUpdate } = 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 = 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({
+        selectionMode,
+        selection: [...selectedIds],
+        onChange: onSelectionChange,
+        rootRef,
+        drilling,
+        onItemDrill,
+        onGroupDrill,
+        focusedGroupInfo,
+        focusedItemInfo,
+        groups,
+        getDataItem,
+        getDataById: (id) => idToDataMap.get(id)
+    });
+    const viewportProps = 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] = useState(false);
+    const { datatipContent, dataCursorContent, datatipProps: { 'aria-describedby': datatipAriaDescribedby, ...datatipProps } } = 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();
+    const { startIndex: xStartIndex, endIndex: xEndIndex } = xIndexExtent;
+    const gridLines = (jsx(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({
+        isRtl,
+        width,
+        height,
+        getDataItemPosition,
+        series,
+        groups,
+        getDataItem,
+        focusedItemInfo,
+        rootRef,
+        xAxisTitle: xAxis?.title,
+        yAxisTitle: yAxis?.title,
+        contextMenuConfig: hasData ? contextMenuConfig : undefined,
+        onContextMenuDismissed
+    });
+    const [dragOver, setDragOver] = useState({
+        accepted: undefined,
+        type: ''
+    });
+    const { draggable, dndProps, dndContent } = 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(navProps, selectDrillProps, viewportProps, datatipProps, marqueeProps, tooltipProps, contextMenuProps, dndProps);
+    const overviewContentRenderer = overview != 'off' && (overview === 'on' || !overview.renderer)
+        ? defaultOverviewContentRenderer
+        : undefined;
+    const { background, slidingWindow } = overviewRenderer(plotAreaSpace);
+    return (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": merge([props['aria-describedby'], datatipAriaDescribedby]), style: { ...touchResponseStyle }, role: isOverview ? undefined : 'application', className: styles$1.baseChartStyle, "data-oj-private-selection-mode": isTestEnv ? selectionMode : undefined, ...testIdProps, ...(isOverview ? {} : eventsProps), children: [jsxs("svg", { width: "100%", height: scrollDims.height != 0 && overview != 'off'
+                    ? `${Math.ceil((updatedSpace.availSpace.height + OVERVIEW_GAP) * 100) / height}%`
+                    : '100%', children: [jsx("clipPath", { id: `${plotAreaClipPathId}`, children: jsx("rect", { ...plotAreaSpace }) }), background, jsx(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, jsx(Axis, { ...yProps, axisPosition: yAxisPosition, isRtl: isRtl, cursor: yAxisCursor, availSpace: ySpace, dragOverStyle: dragOver.type !== 'yAxis' ? 'none' : dragOver.accepted ? 'accept' : 'reject' }), jsx(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' }), 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 && (jsx(ScrollBar, { availSpace: scrollDims, isRtl: isRtl, viewport: xViewportExtent, axisExtent: xAxisExtent, isHoriz: xAxisPosition === 'bottom' })), marqueeContent] }), jsx(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 && (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();
+    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 (jsx(TrackResizeContainer, { width: chartWidth, height: chartHeight, class: dimensionStyle, children: (width, height) => width || height ? (jsx(ChartWithDimensions, { width: width, height: height, ...props, yAxisSize: yAxisSize, isOverview: isOverview, overviewRenderer: overviewRenderer })) : undefined }));
+}
+
+export { Chart as C };
+//# sourceMappingURL=Chart-9dc97d8d.js.map