@oracle/oraclejet-preact 19.0.6 → 19.0.7

package/es/ProgressCircle-9f9dc011.js

@@ -0,0 +1,48 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { c as classNames } from './classNames-4e12b00d.js';
+import './meterUtils-cd7cf089.js';
+import { g as getProgressClipPath } from './circleUtils-90dae0a2.js';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { ProgressCircleRedwoodTheme } from './UNSAFE_ProgressCircle/themes/redwood/ProgressCircleTheme.js';
+import { C as CircleWrapper, a as CircleInner } from './CircularMeter-f2c0ae34.js';
+
+/**
+ * A progress circle allows the user to visualize the progression of an extended computer operation.
+ */
+function ProgressCircle({ value, max, ...otherProps }) {
+    return value === 'indeterminate' ? (jsx(IndeterminateProgressCircle, { ...otherProps })) : (jsx(DeterminateProgressCircle, { value: value, max: max, ...otherProps }));
+}
+const IndeterminateProgressCircle = ({ id, size, ...props }) => {
+    const { classes, styles: { indeterminate } } = useComponentTheme(ProgressCircleRedwoodTheme, {
+        size,
+        type: 'indeterminate'
+    });
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const ariaProps = {
+        'aria-valuetext': props['aria-valuetext'] || translations.progressIndeterminate(),
+        'aria-label': props['aria-label'],
+        'aria-labelledby': props['aria-labelledby'],
+        role: 'progressbar'
+    };
+    return (jsx(CircleWrapper, { id: id, ariaProps: ariaProps, class: classes, children: jsx(CircleInner, { class: indeterminate }) }));
+};
+const DeterminateProgressCircle = ({ value = 0, max = 100, id, size, ...props }) => {
+    const { classes, styles: { determinate, track, valueStyle } } = useComponentTheme(ProgressCircleRedwoodTheme, {
+        size
+    });
+    const percentage = Math.min(Math.max(0, value / max), 1);
+    const clipPath = getProgressClipPath(percentage);
+    const ariaProps = {};
+    ariaProps['aria-valuemin'] = value != null ? 0 : undefined;
+    ariaProps['aria-valuemax'] = value != null ? max : undefined;
+    ariaProps['aria-valuenow'] = value != null ? value : undefined;
+    ariaProps['role'] = 'progressbar';
+    (ariaProps['aria-label'] = props['aria-label']),
+        (ariaProps['aria-labelledby'] = props['aria-labelledby']);
+    return (jsxs(CircleWrapper, { id: id, ariaProps: ariaProps, class: classes, children: [jsx(CircleInner, { class: classNames([determinate, track]) }), jsx(CircleInner, { class: classNames([determinate, valueStyle]), clipPath: clipPath })] }));
+};
+
+export { ProgressCircle as P };
+//# sourceMappingURL=ProgressCircle-9f9dc011.js.map

package/es/ProgressCircle-9f9dc011.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle-9f9dc011.js","sources":["../../src/UNSAFE_ProgressCircle/ProgressCircle.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 type { ComponentChildren, ComponentProps, JSX } from 'preact';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { CircleWrapper, CircleInner } from '#PRIVATE_Meter';\nimport { getProgressClipPath } from '#utils/PRIVATE_meterUtils';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '#resources/nls/bundle';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport {\n  ProgressCircleStyles,\n  ProgressCircleVariantOptions\n} from './themes/ProgressCircleStyles.css';\nimport { ProgressCircleRedwoodTheme } from './themes/redwood/ProgressCircleTheme';\ntype ariaPropsType = ComponentProps<typeof CircleWrapper>['ariaProps'];\ntype IntrinsicProps = Pick<UnpackSignals<JSX.IntrinsicElements['div']>, 'class'>;\n\ntype ProgressCircleProps = IntrinsicProps & {\n  /**\n   * Specifies the id of the progress circle.  If the progress circle is being used to describe the loading process of a particular region\n   * of the page, then the aria-describedby attribute of the region must point to the id of the ProgressCircle\n   */\n  id?: UnpackSignals<JSX.IntrinsicElements['div']>['id'];\n  /**\n   * The value of the progress circle.  If the value is 'indeterminate', an indeterminate progress circle will be shown.\n   */\n  value?: 'indeterminate' | number;\n\n  /**\n   * The maximum value of the progress circle.\n   */\n  max?: number;\n  /**\n   * The size of the progress circle. The default value of this property is theme driven.\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * A label to be used for accessibility purposes when value is set to 'indeterminate'. This will be used for the aria-valuetext of the DOM element.\n   */\n  'aria-valuetext'?: string;\n  /**\n   * Specifies the children.\n   */\n  children?: ComponentChildren;\n  /**\n   * A label to be used for accessibility purposes. This will be used for the aria-label of the DOM element.\n   */\n  'aria-label'?: string;\n\n  /**\n   * One or more ids (separated by spaces) of elements that label the progress bar. This will be used for the aria-labelledby of the DOM element.\n   */\n  'aria-labelledby'?: string;\n};\n/**\n * A progress circle allows the user to visualize the progression of an extended computer operation.\n */\nexport function ProgressCircle({ value, max, ...otherProps }: ProgressCircleProps) {\n  return value === 'indeterminate' ? (\n    <IndeterminateProgressCircle {...otherProps}></IndeterminateProgressCircle>\n  ) : (\n    <DeterminateProgressCircle value={value} max={max} {...otherProps}></DeterminateProgressCircle>\n  );\n}\n\ntype IndeterminateProps = Omit<ProgressCircleProps, 'value' | 'max'>;\n\nconst IndeterminateProgressCircle = ({ id, size, ...props }: IndeterminateProps) => {\n  const {\n    classes,\n    styles: { indeterminate }\n  } = useComponentTheme<ProgressCircleVariantOptions, ProgressCircleStyles>(\n    ProgressCircleRedwoodTheme,\n    {\n      size,\n      type: 'indeterminate'\n    }\n  );\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const ariaProps: ariaPropsType = {\n    'aria-valuetext': props['aria-valuetext'] || translations.progressIndeterminate(),\n    'aria-label': props['aria-label'],\n    'aria-labelledby': props['aria-labelledby'],\n    role: 'progressbar'\n  };\n  return (\n    <CircleWrapper id={id} ariaProps={ariaProps} class={classes}>\n      <CircleInner class={indeterminate} />\n    </CircleWrapper>\n  );\n};\n\ntype DeterminateProps = Omit<ProgressCircleProps, 'aria-valuetext'> & {\n  value?: number;\n};\n\nconst DeterminateProgressCircle = ({\n  value = 0,\n  max = 100,\n  id,\n  size,\n  ...props\n}: DeterminateProps) => {\n  const {\n    classes,\n    styles: { determinate, track, valueStyle }\n  } = useComponentTheme<ProgressCircleVariantOptions, ProgressCircleStyles>(\n    ProgressCircleRedwoodTheme,\n    {\n      size\n    }\n  );\n\n  const percentage = Math.min(Math.max(0, value / max), 1);\n  const clipPath = getProgressClipPath(percentage);\n\n  const ariaProps: ariaPropsType = {};\n  ariaProps['aria-valuemin'] = value != null ? 0 : undefined;\n  ariaProps['aria-valuemax'] = value != null ? max : undefined;\n  ariaProps['aria-valuenow'] = value != null ? value : undefined;\n  ariaProps['role'] = 'progressbar';\n  (ariaProps['aria-label'] = props['aria-label']),\n    (ariaProps['aria-labelledby'] = props['aria-labelledby']);\n  return (\n    <CircleWrapper id={id} ariaProps={ariaProps} class={classes}>\n      <CircleInner class={classNames([determinate, track])} />\n      <CircleInner class={classNames([determinate, valueStyle])} clipPath={clipPath} />\n    </CircleWrapper>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/es/ReadonlyTextFieldInput-7bfb1cad.js

@@ -8,7 +8,7 @@ import './FormFieldContext-47ca0c20.js';
 import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
 import './TabbableModeContext-7d8ad946.js';
 import { u as useTabbableMode } from './useTabbableMode-a2fdbb06.js';
-import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.js';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { t as textInterpolations } from './textAlign-ad252afa.js';
 import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';

package/es/RevealToggleIcon-0cc8250a.js

@@ -2,7 +2,7 @@
 import { jsx } from 'preact/jsx-runtime';
 import { S as SvgViewHide } from './ViewHide-02c20bd5.js';
 import { S as SvgView } from './View-4ce437e6.js';
-import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.js';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
 import { I as IconSwitchButton } from './IconSwitchButton-2b69f5c2.js';
 
 /**

package/es/SectionedContent-bee76fed.js

@@ -0,0 +1,64 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useState, useCallback, useRef } from 'preact/hooks';
+import { D as Dropdown } from './Dropdown-ead9e679.js';
+import { F as Flex } from './Flex-5befe411.js';
+import { F as FocusTrap } from './FocusTrap-9f37aa41.js';
+import { K as KEYS } from './keyboardUtils-986fe923.js';
+import { u as useTestId } from './useTestId-e5d44ab1.js';
+import { V as View } from './View-ef109be6.js';
+
+const DEFAULT_PLACEMENT = 'bottom-start';
+/**
+ * StickyPositioningDropdown is used to display content which supports conditional rendering,
+ * or other cases where the size of the content can change and cause the dropdown to rerender
+ * in a different placement. This component ensures the repositioning happens only once,
+ * until there is a collision, instead of allowing the dropdown to keep trying to
+ * move back to its default position on every render.
+ */
+const StickyPositioningDropdown = ({ children, isOpen, onPosition, ...rest }) => {
+    const [placement, setPlacement] = useState(DEFAULT_PLACEMENT);
+    const [prevIsOpen, setPrevIsOpen] = useState(isOpen);
+    if (prevIsOpen !== isOpen) {
+        setPrevIsOpen(isOpen);
+        // reset the placement to the default when the dropdown closes, not opens, so that it doesn't
+        // initially open in the previous position and then move to the default position on the
+        // rerender after the state is updated
+        if (!isOpen) {
+            setPlacement(DEFAULT_PLACEMENT);
+        }
+    }
+    const handlePosition = useCallback((positionData) => {
+        // update the placement so that the dropdown stays where it is until there is a collision,
+        // i.e. it no longer fits, instead of letting it try to move back to the default position
+        // on every render
+        setPlacement(positionData.placement);
+        // call the callback that was passed in through props
+        onPosition?.(positionData);
+    }, [onPosition, setPlacement]);
+    return (jsx(Dropdown, { isOpen: isOpen, onPosition: handlePosition, placement: placement, ...rest, children: children }));
+};
+
+/**
+ * The SectionedContent component has slots for header, main, and footer content.
+ * It is meant to be used in a floating or modal type container and includes
+ * conditional support for focus trapping, so that you can tab between components
+ * and sections while the container remains open.
+ */
+const SectionedContent = ({ 'aria-label': ariaLabel, contentRef: propRef, gap, footer, hasFocusTrap = false, header, main, paddingBlockEnd = '4x', paddingBlockStart = '4x', paddingInlineEnd = '4x', paddingInlineStart = '4x', role, testId }) => {
+    const testIdProps = useTestId(testId);
+    const cRef = useRef(null);
+    const contentRef = propRef ?? cRef;
+    const handleKeyDown = useCallback((event) => {
+        if (event.code === KEYS.TAB) {
+            event.stopPropagation();
+        }
+    }, []);
+    const sections = (jsxs(Flex, { direction: "column", gap: gap, children: [header, jsx(View, { paddingBlockEnd: paddingBlockEnd, paddingBlockStart: paddingBlockStart, paddingInlineEnd: paddingInlineEnd, paddingInlineStart: paddingInlineStart, children: main }), footer] }));
+    // Use a FocusTrap around the content if hasFocusTrap is true.
+    const childContent = hasFocusTrap ? (jsx(FocusTrap, { restoreFocusRef: false, children: sections })) : ({ sections });
+    return (jsx("div", { "aria-label": ariaLabel, onKeyDown: hasFocusTrap ? handleKeyDown : undefined, ref: contentRef, role: role, ...testIdProps, children: childContent }));
+};
+
+export { StickyPositioningDropdown as S, SectionedContent as a };
+//# sourceMappingURL=SectionedContent-bee76fed.js.map

package/es/SectionedContent-bee76fed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionedContent-bee76fed.js","sources":["../../src/PRIVATE_FormControls/StickyPositioningDropdown.tsx","../../src/PRIVATE_FormControls/SectionedContent.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentProps } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport { useState } from 'preact/hooks';\nimport { Dropdown } from '#UNSAFE_Dropdown';\nimport { PositionData } from '../UNSAFE_Floating';\n\ntype DropdownProps = ComponentProps<typeof Dropdown>;\ntype Props = Pick<\n  DropdownProps,\n  | 'anchorRef'\n  | 'children'\n  | 'flipOptions'\n  | 'id'\n  | 'initialFocus'\n  | 'isOpen'\n  | 'minWidth'\n  | 'offset'\n  | 'onClose'\n  | 'onPosition'\n  | 'sizeOptions'\n>;\n\nconst DEFAULT_PLACEMENT = 'bottom-start';\n\n/**\n * StickyPositioningDropdown is used to display content which supports conditional rendering,\n * or other cases where the size of the content can change and cause the dropdown to rerender\n * in a different placement. This component ensures the repositioning happens only once,\n * until there is a collision, instead of allowing the dropdown to keep trying to\n * move back to its default position on every render.\n */\nconst StickyPositioningDropdown = ({ children, isOpen, onPosition, ...rest }: Props) => {\n  const [placement, setPlacement] = useState<DropdownProps['placement']>(DEFAULT_PLACEMENT);\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n\n    // reset the placement to the default when the dropdown closes, not opens, so that it doesn't\n    // initially open in the previous position and then move to the default position on the\n    // rerender after the state is updated\n    if (!isOpen) {\n      setPlacement(DEFAULT_PLACEMENT);\n    }\n  }\n  const handlePosition = useCallback(\n    (positionData: PositionData) => {\n      // update the placement so that the dropdown stays where it is until there is a collision,\n      // i.e. it no longer fits, instead of letting it try to move back to the default position\n      // on every render\n      setPlacement(positionData.placement);\n\n      // call the callback that was passed in through props\n      onPosition?.(positionData);\n    },\n    [onPosition, setPlacement]\n  );\n\n  return (\n    <Dropdown isOpen={isOpen} onPosition={handlePosition} placement={placement} {...rest}>\n      {children}\n    </Dropdown>\n  );\n};\n\nexport { StickyPositioningDropdown };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentChildren, ComponentProps, RefObject, JSX } from 'preact';\nimport { useCallback, useRef } from 'preact/hooks';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { Flex } from '#UNSAFE_Flex';\nimport { FocusTrap } from '#UNSAFE_FocusTrap';\nimport { KEYS } from '#utils/PRIVATE_keyboardUtils';\nimport { PaddingProps } from '#utils/UNSAFE_interpolations/padding';\nimport { TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\nimport { View } from '#UNSAFE_View';\n\ntype FlexProps = ComponentProps<typeof Flex>;\n\ntype Props = TestIdProps & {\n  /**\n   * An accessible label that describes the content.\n   */\n  'aria-label'?: UnpackSignals<JSX.AriaAttributes>['aria-label'];\n\n  /**\n   * A ref to the content container.\n   */\n  contentRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Child content in the footer section.\n   */\n  footer?: ComponentChildren;\n\n  /**\n   * The spacing between the sections.\n   */\n  gap?: FlexProps['gap'];\n\n  /**\n   * True if the tab key should cycle focus within the content.\n   * @default false\n   */\n  hasFocusTrap?: boolean;\n\n  /**\n   * Child content in the header section.\n   */\n  header?: ComponentChildren;\n\n  /**\n   * Child content in the main section.\n   */\n  main?: ComponentChildren;\n\n  /**\n   * The padding between the footer or bottom edge and the main content.\n   * @default '4x'\n   */\n  paddingBlockEnd?: PaddingProps['paddingBlockEnd'];\n\n  /**\n   * The padding between the header or top edge and the main content.\n   * @default '4x'\n   */\n  paddingBlockStart?: PaddingProps['paddingBlockStart'];\n\n  /**\n   * The padding between the right edge and the main content.\n   * @default '4x'\n   */\n  paddingInlineEnd?: PaddingProps['paddingInlineEnd'];\n\n  /**\n   * The padding between the left edge and the main content.\n   * @default '4x'\n   */\n  paddingInlineStart?: PaddingProps['paddingInlineStart'];\n\n  /**\n   * The aria role applied to the content container. For example, if the \"launcher\" element\n   * includes aria-haspopup=\"dialog\", then the associated content should have role \"dialog\"\n   * and an aria-label that describes it. If the launcher element has role \"combobox\", then\n   * it controls an element with a role such as listbox or grid.\n   */\n  role?: UnpackSignals<JSX.HTMLAttributes['role']>;\n};\n\n/**\n * The SectionedContent component has slots for header, main, and footer content.\n * It is meant to be used in a floating or modal type container and includes\n * conditional support for focus trapping, so that you can tab between components\n * and sections while the container remains open.\n */\nexport const SectionedContent = ({\n  'aria-label': ariaLabel,\n  contentRef: propRef,\n  gap,\n  footer,\n  hasFocusTrap = false,\n  header,\n  main,\n  paddingBlockEnd = '4x',\n  paddingBlockStart = '4x',\n  paddingInlineEnd = '4x',\n  paddingInlineStart = '4x',\n  role,\n  testId\n}: Props) => {\n  const testIdProps = useTestId(testId);\n\n  const cRef = useRef<HTMLDivElement>(null);\n  const contentRef = propRef ?? cRef;\n\n  const handleKeyDown = useCallback((event: KeyboardEvent) => {\n    if (event.code === KEYS.TAB) {\n      event.stopPropagation();\n    }\n  }, []);\n\n  const sections = (\n    <Flex direction=\"column\" gap={gap}>\n      {header}\n      <View\n        paddingBlockEnd={paddingBlockEnd}\n        paddingBlockStart={paddingBlockStart}\n        paddingInlineEnd={paddingInlineEnd}\n        paddingInlineStart={paddingInlineStart}>\n        {main}\n      </View>\n      {footer}\n    </Flex>\n  );\n\n  // Use a FocusTrap around the content if hasFocusTrap is true.\n  const childContent = hasFocusTrap ? (\n    <FocusTrap restoreFocusRef={false}>{sections}</FocusTrap>\n  ) : (\n    { sections }\n  );\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      onKeyDown={hasFocusTrap ? handleKeyDown : undefined}\n      ref={contentRef}\n      role={role}\n      {...testIdProps}>\n      {childContent}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AA8BA,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAEzC;;;;;;AAMG;AACH,MAAM,yBAAyB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,EAAS,KAAI;IACrF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAA6B,iBAAiB,CAAC,CAAC;IAC1F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AAErD,IAAA,IAAI,UAAU,KAAK,MAAM,EAAE;QACzB,aAAa,CAAC,MAAM,CAAC,CAAC;;;;QAKtB,IAAI,CAAC,MAAM,EAAE;YACX,YAAY,CAAC,iBAAiB,CAAC,CAAC;SACjC;KACF;AACD,IAAA,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,YAA0B,KAAI;;;;AAI7B,QAAA,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;;AAGrC,QAAA,UAAU,GAAG,YAAY,CAAC,CAAC;AAC7B,KAAC,EACD,CAAC,UAAU,EAAE,YAAY,CAAC,CAC3B,CAAC;IAEF,QACEA,IAAC,QAAQ,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAA,GAAM,IAAI,EACjF,QAAA,EAAA,QAAQ,EACA,CAAA,EACX;AACJ;;ACmBA;;;;;AAKG;MACU,gBAAgB,GAAG,CAAC,EAC/B,YAAY,EAAE,SAAS,EACvB,UAAU,EAAE,OAAO,EACnB,GAAG,EACH,MAAM,EACN,YAAY,GAAG,KAAK,EACpB,MAAM,EACN,IAAI,EACJ,eAAe,GAAG,IAAI,EACtB,iBAAiB,GAAG,IAAI,EACxB,gBAAgB,GAAG,IAAI,EACvB,kBAAkB,GAAG,IAAI,EACzB,IAAI,EACJ,MAAM,EACA,KAAI;AACV,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,MAAM,IAAI,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC1C,IAAA,MAAM,UAAU,GAAG,OAAO,IAAI,IAAI,CAAC;AAEnC,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAoB,KAAI;QACzD,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,EAAE;YAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;KACF,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,QAAQ,IACZC,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAC9B,MAAM,EACPD,GAAA,CAAC,IAAI,EACH,EAAA,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,YACrC,IAAI,EAAA,CACA,EACN,MAAM,CAAA,EAAA,CACF,CACR,CAAC;;IAGF,MAAM,YAAY,GAAG,YAAY,IAC/BA,GAAA,CAAC,SAAS,EAAA,EAAC,eAAe,EAAE,KAAK,EAAG,QAAA,EAAA,QAAQ,EAAa,CAAA,KAEzD,EAAE,QAAQ,EAAE,CACb,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EACc,SAAS,EACrB,SAAS,EAAE,YAAY,GAAG,aAAa,GAAG,SAAS,EACnD,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,IAAI,EAAA,GACN,WAAW,EAAA,QAAA,EACd,YAAY,EAAA,CACT,EACN;AACJ;;;;"}

package/es/SegmentStyles.styles.css

@@ -1,35 +1,32 @@
-.SegmentStyles_base__51w8ze0 {
+.SegmentStyles_base__kzheun0 {
   caret-color: transparent;
   -webkit-tap-highlight-color: transparent;
   -moz-user-select: none;
        user-select: none;
   -webkit-user-select: none;
 }
-.SegmentStyles_base__51w8ze0:focus-visible {
+.SegmentStyles_base__kzheun0:focus-visible {
   outline: none;
 }
-.SegmentStyles_literalBase__51w8ze1 {
+.SegmentStyles_literalBase__kzheun1 {
   white-space: pre;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
-.SegmentStyles_placeholder__51w8ze2 {
+.SegmentStyles_placeholder__kzheun2 {
   color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-secondary);
 }
-.SegmentStyles_space__51w8ze3 {
-  width: 4px;
-}
-.SegmentStyles_selected__51w8ze4 {
+.SegmentStyles_selected__kzheun3 {
   background-color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-selected);
   border-color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-selected);
 }
-.SegmentStyles_highlighted__51w8ze5 {
+.SegmentStyles_highlighted__kzheun4 {
   background-color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-selected);
 }
-.SegmentStyles_hidden__51w8ze6 {
+.SegmentStyles_hidden__kzheun5 {
   display: none;
 }
-.SegmentStyles_notHidden__51w8ze7 {
+.SegmentStyles_notHidden__kzheun6 {
   display: block;
 }

package/es/SegmentStyles.styles2.css

@@ -1,32 +1,35 @@
-.SegmentStyles_base__kzheun0 {
+.SegmentStyles_base__51w8ze0 {
   caret-color: transparent;
   -webkit-tap-highlight-color: transparent;
   -moz-user-select: none;
        user-select: none;
   -webkit-user-select: none;
 }
-.SegmentStyles_base__kzheun0:focus-visible {
+.SegmentStyles_base__51w8ze0:focus-visible {
   outline: none;
 }
-.SegmentStyles_literalBase__kzheun1 {
+.SegmentStyles_literalBase__51w8ze1 {
   white-space: pre;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
-.SegmentStyles_placeholder__kzheun2 {
+.SegmentStyles_placeholder__51w8ze2 {
   color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-secondary);
 }
-.SegmentStyles_selected__kzheun3 {
+.SegmentStyles_space__51w8ze3 {
+  width: 4px;
+}
+.SegmentStyles_selected__51w8ze4 {
   background-color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-selected);
   border-color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-selected);
 }
-.SegmentStyles_highlighted__kzheun4 {
+.SegmentStyles_highlighted__51w8ze5 {
   background-color: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-selected);
 }
-.SegmentStyles_hidden__kzheun5 {
+.SegmentStyles_hidden__51w8ze6 {
   display: none;
 }
-.SegmentStyles_notHidden__kzheun6 {
+.SegmentStyles_notHidden__51w8ze7 {
   display: block;
 }

package/es/SelectMenuGroupContext-0c1a7603.js

@@ -1,20 +1,20 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { useMemo, useCallback, useContext, useRef, useState, useEffect, useImperativeHandle, useLayoutEffect } from 'preact/hooks';
-import { S as Sheet } from './Sheet-4a82eacd.js';
+import { S as Sheet } from './Sheet-24c3e407.js';
 import { forwardRef, useCallback as useCallback$1 } from 'preact/compat';
-import { D as Dropdown } from './Dropdown-3488ddd2.js';
+import { D as Dropdown } from './Dropdown-ead9e679.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
 import { c as classNames } from './classNames-4e12b00d.js';
-import { u as useUser } from './useUser-2decb9ed.js';
+import { u as useUser } from './useUser-df8ae011.js';
 import { menuStyles } from './UNSAFE_Menu/themes/MenuStyles.css.js';
-import { u as useTestId } from './useTestId-7f8e69e7.js';
+import { u as useTestId } from './useTestId-e5d44ab1.js';
 import { dropdownMenuStyles } from './UNSAFE_Menu/themes/DropdownMenuStyles.css.js';
-import { F as Flex } from './Flex-97b023db.js';
+import { F as Flex } from './Flex-5befe411.js';
 import { S as Skeleton } from './Skeleton-a06f4f74.js';
 import { menuSkeletonStyles } from './UNSAFE_Menu/themes/MenuSkeletonStyles.css.js';
-import { L as LiveRegion } from './LiveRegion-792f6c64.js';
-import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.js';
+import { L as LiveRegion } from './LiveRegion-79ffc814.js';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
 import { MenuItemRedwoodTheme } from './UNSAFE_Menu/themes/redwood/MenuItemTheme.js';
 import { U as UNSAFE_DOM_ACCESS } from './unsafeDomAccess-453eb74e.js';

package/es/SelectMobileFieldInput-373047db.js

@@ -1,14 +1,14 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { useState, useCallback } from 'preact/hooks';
-import { F as Floating } from './Floating-eef4ae92.js';
-import { L as Layer } from './Layer-5bf232ee.js';
+import { F as Floating } from './Floating-6023b41d.js';
+import { L as Layer } from './Layer-7d3dc8c7.js';
 import { forwardRef } from 'preact/compat';
-import './LayerHost-a54158ef.js';
+import './LayerHost-12489cef.js';
 import { i as isControlOrFunctionKey, K as KEYS } from './keyboardUtils-986fe923.js';
 import { c as preventDefaultForCurrentTarget } from './useSelectCommon-83a6eaeb.js';
 import { dropdownStyles } from './PRIVATE_SelectCommon/themes/dropdownStyles.css.js';
-import { u as useOutsideMousedown } from './useOutsideMousedown-653b22ea.js';
+import { u as useOutsideMousedown } from './useOutsideMousedown-39d7c9a6.js';
 import { F as FormFieldContext } from './FormFieldContext-47ca0c20.js';
 import './logger-c92f309c.js';
 import './TabbableModeContext-7d8ad946.js';
@@ -16,7 +16,7 @@ import './UserAssistanceStyles.styles.css';
 import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css';
 import './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js';
 import { a as InlineUserAssistance } from './InlineUserAssistance-af01b717.js';
-import { F as Flex } from './Flex-97b023db.js';
+import { F as Flex } from './Flex-5befe411.js';
 import './MessageBannerStyles.styles.css';
 import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
 import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
@@ -24,7 +24,7 @@ import 'preact';
 import './TooltipContentStyles.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
-import './tooltipUtils-a4b02dcc.js';
+import './tooltipUtils-466c63c4.js';
 import './IconStyle.styles.css';
 import './IconButton-e7787aeb.js';
 import './MessageStyles.styles.css';
@@ -35,7 +35,7 @@ import './HiddenAccessibleStyles.styles.css';
 import './ComponentMessageStyles.styles.css';
 import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
 import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
-import './Popup-8962c960.js';
+import './Popup-0f026f03.js';
 import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
 import './LabelStyles.styles.css';
 import './UNSAFE_Label/themes/redwood/LabelBaseTheme.styles.css';
@@ -48,7 +48,7 @@ import { u as useFocusWithin } from './useFocusWithin-30b1e2d8.js';
 import { u as useHover } from './useHover-85077adb.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { S as Separator } from './Separator-93c70737.js';
-import { W as WindowOverlay } from './WindowOverlay-269c31f1.js';
+import { W as WindowOverlay } from './WindowOverlay-b380ce51.js';
 import { mobileDropdownStyles } from './PRIVATE_SelectCommon/themes/mobileDropdownStyles.css.js';
 import { selectMobileDropdownStyles } from './PRIVATE_SelectCommon/themes/selectMobileDropdownStyles.css.js';
 import { l } from './stringUtils-0fe25200.js';

package/es/Selector-1ceeaf0a.js

@@ -6,7 +6,7 @@ import { styles } from './UNSAFE_Selector/themes/SelectorStyles.css.js';
 import { S as StyledCheckbox } from './StyledCheckbox-bf4ac68c.js';
 import { u as useActive } from './useActive-fb6d4d52.js';
 import { u as useFocus } from './useFocus-38c95977.js';
-import { u as useTestId } from './useTestId-7f8e69e7.js';
+import { u as useTestId } from './useTestId-e5d44ab1.js';
 import { u as useHover } from './useHover-85077adb.js';
 
 /**

package/es/SelectorAll-d151b011.js

@@ -0,0 +1,69 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useRef } from 'preact/hooks';
+import { F as Flex } from './Flex-5befe411.js';
+import { u as usePress } from './usePress-051f5adb.js';
+import { styles } from './UNSAFE_Selector/themes/SelectorStyles.css.js';
+import { S as StyledCheckbox } from './StyledCheckbox-bf4ac68c.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { u as useActive } from './useActive-fb6d4d52.js';
+import { u as useFocus } from './useFocus-38c95977.js';
+import { u as useTestId } from './useTestId-e5d44ab1.js';
+import { u as useTooltip } from './useTooltip-f442fedb.js';
+import { u as useHover } from './useHover-85077adb.js';
+import './logger-c92f309c.js';
+import './LayerHost-12489cef.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-466c63c4.js';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
+
+/**
+ * The SelectorAll component renders checkboxes for select all case.
+ */
+function SelectorAll({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, selected, onChange, showTooltip = 'disabled', testId }) {
+    const pressHandler = (event) => {
+        if (selected == 'none' || selected == 'partial') {
+            onChange?.({ value: { all: true, deletedKeys: new Set() }, target: event.target });
+        }
+        else {
+            onChange?.({ value: { all: false, keys: new Set() }, target: event.target });
+        }
+    };
+    const inputRef = useRef(null);
+    const { isActive, activeProps } = useActive();
+    const { isFocus, focusProps } = useFocus();
+    const { pressProps } = usePress(pressHandler);
+    const { isHover, hoverProps } = useHover();
+    const isChecked = selected === 'partial' || selected === 'partial-all'
+        ? 'partial'
+        : selected === 'all'
+            ? 'checked'
+            : 'unchecked';
+    const testIdProps = useTestId(testId);
+    const onClick = () => {
+        // ensure the checkbox is focused after click
+        inputRef.current?.focus();
+    };
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const tooltipLabel = selected === 'none' || selected === 'partial'
+        ? translations.selectorAll_selectAll()
+        : translations.selectorAll_deselectAll();
+    const { tooltipContent, tooltipProps } = useTooltip({
+        text: tooltipLabel,
+        isDisabled: showTooltip === 'disabled' ? true : false
+    });
+    const ariaLabelText = !ariaLabel && !ariaLabelledby ? tooltipLabel : undefined;
+    return (jsx("div", { class: styles.container, ...mergeProps({ onClick }, pressProps, tooltipProps), ...testIdProps, children: jsx("div", { class: styles.base, ...activeProps, ...hoverProps, children: jsxs(Flex, { align: "center", justify: "center", children: [jsx(StyledCheckbox, { ref: inputRef, isHover: isHover, isChecked: isChecked, isActive: isActive, isFocusRingShown: isFocus, "aria-label": ariaLabel ? ariaLabel : ariaLabelText, "aria-labelledby": ariaLabelledby, onKeyDown: handleKeyboardEvent, onKeyUp: handleKeyboardEvent, ...focusProps }), tooltipContent] }) }) }));
+}
+const handleKeyboardEvent = (event) => {
+    if (event.key == 'Enter') {
+        // prevent active styles applied to checkbox
+        event.stopPropagation();
+    }
+};
+
+export { SelectorAll as S };
+//# sourceMappingURL=SelectorAll-d151b011.js.map

package/es/SelectorAll-d151b011.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorAll-d151b011.js","sources":["../../src/UNSAFE_SelectorAll/SelectorAll.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { useRef } from 'preact/hooks';\nimport { SelectionDetail } from '../UNSAFE_Collection';\nimport { Flex } from '../UNSAFE_Flex';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { styles } from '../UNSAFE_Selector/themes/SelectorStyles.css';\nimport { StyledCheckbox } from '../PRIVATE_StyledCheckbox';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport { useFocus } from '../hooks/UNSAFE_useFocus';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '../resources/nls/bundle';\nimport { useHover } from '../hooks/UNSAFE_useHover/useHover';\n\n/**\n * Props for the SelectorAll Component\n */\nexport type Props<K> = {\n  /**\n   * The selected state of the select all selector\n   */\n  selected: 'none' | 'all' | 'partial' | 'partial-all';\n  /**\n   * Callback function to invoke when the selected keys has changed when\n   * the checkbox is toggled.\n   */\n  onChange?: (detail: SelectionDetail<K>) => void;\n  /**\n   * aria-label for this selectorAll\n   */\n  'aria-label'?: string;\n  /**\n   * One or more ids (separated by spaces) of elements that label the selected item. This will be used for the aria-labelledby of the DOM element.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Specifies whether tooltip should be shown on the SelectorAll checkbox\n   */\n  showTooltip?: 'enabled' | 'disabled';\n};\n\n/**\n * The SelectorAll component renders checkboxes for select all case.\n */\nexport function SelectorAll<K>({\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  selected,\n  onChange,\n  showTooltip = 'disabled',\n  testId\n}: Props<K> & TestIdProps) {\n  const pressHandler = (event: Event) => {\n    if (selected == 'none' || selected == 'partial') {\n      onChange?.({ value: { all: true, deletedKeys: new Set() }, target: event.target });\n    } else {\n      onChange?.({ value: { all: false, keys: new Set() }, target: event.target });\n    }\n  };\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { isActive, activeProps } = useActive();\n  const { isFocus, focusProps } = useFocus();\n  const { pressProps } = usePress(pressHandler);\n\n  const { isHover, hoverProps } = useHover();\n  const isChecked =\n    selected === 'partial' || selected === 'partial-all'\n      ? 'partial'\n      : selected === 'all'\n      ? 'checked'\n      : 'unchecked';\n  const testIdProps = useTestId(testId);\n\n  const onClick = () => {\n    // ensure the checkbox is focused after click\n    inputRef.current?.focus();\n  };\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  const tooltipLabel =\n    selected === 'none' || selected === 'partial'\n      ? translations.selectorAll_selectAll()\n      : translations.selectorAll_deselectAll();\n\n  const { tooltipContent, tooltipProps } = useTooltip({\n    text: tooltipLabel,\n    isDisabled: showTooltip === 'disabled' ? true : false\n  });\n\n  const ariaLabelText = !ariaLabel && !ariaLabelledby ? tooltipLabel : undefined;\n\n  return (\n    <div\n      class={styles.container}\n      {...mergeProps({ onClick }, pressProps, tooltipProps)}\n      {...testIdProps}>\n      <div class={styles.base} {...activeProps} {...hoverProps}>\n        <Flex align=\"center\" justify=\"center\">\n          <StyledCheckbox\n            ref={inputRef}\n            isHover={isHover}\n            isChecked={isChecked}\n            isActive={isActive}\n            isFocusRingShown={isFocus}\n            aria-label={ariaLabel ? ariaLabel : ariaLabelText}\n            aria-labelledby={ariaLabelledby}\n            onKeyDown={handleKeyboardEvent}\n            onKeyUp={handleKeyboardEvent}\n            {...focusProps}\n          />\n          {tooltipContent}\n        </Flex>\n      </div>\n    </div>\n  );\n}\n\nconst handleKeyboardEvent = (event: KeyboardEvent) => {\n  if (event.key == 'Enter') {\n    // prevent active styles applied to checkbox\n    event.stopPropagation();\n  }\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/es/Sheet-24c3e407.js

@@ -0,0 +1,160 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, Fragment, jsxs } from 'preact/jsx-runtime';
+import { useRef, useCallback, useEffect, useMemo } from 'preact/hooks';
+import { M as Modal } from './Modal-678575d5.js';
+import { W as WindowOverlay } from './WindowOverlay-b380ce51.js';
+import { f as focusWithin } from './tabbableUtils-ce19b388.js';
+import { sheetStyles } from './UNSAFE_Sheet/themes/SheetStyles.css.js';
+import { m as mergeRefs } from './refUtils-76275c69.js';
+import { u as useAnimationStatus } from './useAnimationStatus-072d6a98.js';
+import { S as SLIDE_UP_XLARGE, D as DURATION_LARGE, a as SLIDE_DOWN_XLARGE } from './animationUtils-5f409a6c.js';
+import { u as useTranslationBundle } from './useTranslationBundle-25469f1c.js';
+
+/**
+ * @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
+ */
+/*This "private" hook will live until we end up stating a final decision on useSwipe hook.
+For that hook to work, element that use it has to set touch-action:none;, since pointer events
+are canceled once a touch action is going to be handled by the browser. This works for most
+of the components that don't scroll. But if the component scroll, there is a need for the browser to
+handle scroll which is imposible with a hook just using pointer events.
+
+Update 11/6/23:
+Nishad's team is going to confirm if other comps that will use useSwipe need mouse interactions. If they need it,
+we can either have a flag to use pointer or touch events or two separated hooks. If they don't need mouse interactions,
+we could start using useSwipe with touch events instead.
+*/
+function useSheetSwipe(onSwipe, { threshold = 10, maximumTime = 300, tolerance = 50, isDisabled = false } = {
+    threshold: 10,
+    maximumTime: 300,
+    tolerance: 50,
+    isDisabled: false
+}) {
+    const ref = useRef({
+        pointerDownId: 0,
+        startTime: null,
+        prevpageX: 0,
+        prevpageY: 0,
+        elementScrollTop: 0
+    });
+    const clearSwipe = useCallback(() => {
+        ref.current = {
+            pointerDownId: null,
+            startTime: 0,
+            prevpageX: 0,
+            prevpageY: 0,
+            elementScrollTop: 0
+        };
+    }, []);
+    const onTouchStart = useCallback((e) => {
+        const touchobj = e.changedTouches[0];
+        if (!ref.current.pointerDownId) {
+            ref.current = {
+                pointerDownId: touchobj.identifier,
+                startTime: e.timeStamp,
+                prevpageX: touchobj.pageX,
+                prevpageY: touchobj.pageY,
+                elementScrollTop: e.currentTarget.scrollTop
+            };
+        }
+        else {
+            clearSwipe();
+        }
+    }, [clearSwipe]);
+    const onTouchEnd = useCallback((ev) => {
+        const touchobj = ev.changedTouches[0];
+        if (touchobj.identifier === ref.current.pointerDownId) {
+            if (ref.current.startTime && ev.timeStamp - ref.current.startTime < maximumTime) {
+                if (touchobj.pageY - ref.current.prevpageY > threshold &&
+                    Math.abs(touchobj.pageX - ref.current.prevpageX) <= tolerance &&
+                    ref.current.elementScrollTop === 0) {
+                    onSwipe?.({ direction: 'down' });
+                }
+            }
+        }
+        // state would be reset to its original state whether swipe is completed or cancelled
+        clearSwipe();
+    }, [threshold, onSwipe, clearSwipe, maximumTime, tolerance]);
+    const swipeProps = isDisabled
+        ? {}
+        : {
+            /** event handlers to spread on the target element. */
+            onTouchStart,
+            onTouchEnd,
+            ontouchcancel: clearSwipe
+        };
+    return {
+        swipeProps
+    };
+}
+
+const animationStates = {
+    opening: {
+        ...SLIDE_UP_XLARGE,
+        options: {
+            duration: DURATION_LARGE
+        }
+    },
+    closing: {
+        ...SLIDE_DOWN_XLARGE,
+        options: {
+            duration: DURATION_LARGE
+        }
+    }
+};
+const Sheet = ({ children, onClose, isOpen = false, initialFocus = 'none' }) => {
+    const sheetRef = useRef(null);
+    // Initial focus going to be set after animation once opening animation is added
+    useEffect(() => {
+        if (isOpen && initialFocus === 'firstFocusable') {
+            const sheetElement = sheetRef.current;
+            if (sheetElement) {
+                focusWithin(sheetElement);
+            }
+        }
+    }, [isOpen, initialFocus]);
+    const handlePointerDismissed = useCallback(() => {
+        onClose?.({ reason: 'pointerDismissed' });
+    }, [onClose]);
+    // TODO: Use useSwipe when it works on components that could scroll. Important to notice all components that have a
+    // sheet will use this comp and this comp is going to use useSwipe. So comps that have their own impl (menu right now),
+    // will stop having its own implementation
+    const { swipeProps } = useSheetSwipe(handlePointerDismissed);
+    const handleKeyDown = useCallback((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        switch (event.code) {
+            case 'Tab':
+            case 'Escape':
+                onClose?.({ reason: 'keyboardDismissed' });
+        }
+    }, [onClose]);
+    const { setAnimationElementRef, status } = useAnimationStatus({
+        isOpen,
+        isAnimatedOnMount: false,
+        animationStates
+    });
+    useEffect(() => {
+        if (status === 'opening') {
+            if (initialFocus === 'firstFocusable') {
+                const dropdownElement = sheetRef.current;
+                if (dropdownElement) {
+                    focusWithin(dropdownElement);
+                }
+            }
+        }
+    }, [status, initialFocus]);
+    const stableRef = useMemo(() => mergeRefs(setAnimationElementRef, sheetRef), [setAnimationElementRef]);
+    const isMounted = status !== 'unmounted';
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    return (jsx(Fragment, { children: isMounted ? (jsx(Modal, { isOpen: isMounted, onBackdropClick: handlePointerDismissed, children: jsx(WindowOverlay, { placement: "bottom", children: jsxs("div", { ...swipeProps, ref: stableRef, class: sheetStyles.sheetContainerWrapper, style: { maxHeight: `calc(100vh - ${TOP_OFFSET}px)` }, onKeyDown: handleKeyDown, children: [jsx("a", { onClick: handlePointerDismissed, role: "button", "aria-label": translations.sheet_close(), tabIndex: -1, class: sheetStyles.sheetHiddenLink }), children] }) }) })) : null }));
+};
+const TOP_OFFSET = 96;
+
+export { Sheet as S, useSheetSwipe as u };
+//# sourceMappingURL=Sheet-24c3e407.js.map