@oracle/oraclejet-preact 19.0.1 → 19.0.2

package/cjs/SelectMenuGroupContext-ae5e1373.js

@@ -3,20 +3,20 @@
 
 var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
-var Sheet = require('./Sheet-44b25f1d.js');
+var Sheet = require('./Sheet-65ae604e.js');
 var compat = require('preact/compat');
-var Dropdown = require('./Dropdown-b2579045.js');
+var Dropdown = require('./Dropdown-08111f9d.js');
 var mergeProps = require('./mergeProps-e3da7237.js');
 var classNames = require('./classNames-c14c6ef3.js');
-var useUser = require('./useUser-f900ddf1.js');
+var useUser = require('./useUser-081e5bd5.js');
 var UNSAFE_Menu_themes_MenuStyles_css = require('./UNSAFE_Menu/themes/MenuStyles.css.js');
-var useTestId = require('./useTestId-9093a54b.js');
+var useTestId = require('./useTestId-15ee37d6.js');
 var UNSAFE_Menu_themes_DropdownMenuStyles_css = require('./UNSAFE_Menu/themes/DropdownMenuStyles.css.js');
-var Flex = require('./Flex-6ca216a7.js');
+var Flex = require('./Flex-a6d1c038.js');
 var Skeleton = require('./Skeleton-e746e396.js');
 var UNSAFE_Menu_themes_MenuSkeletonStyles_css = require('./UNSAFE_Menu/themes/MenuSkeletonStyles.css.js');
-var LiveRegion = require('./LiveRegion-e410e187.js');
-var useTranslationBundle = require('./useTranslationBundle-18b7bf8b.js');
+var LiveRegion = require('./LiveRegion-a2c839ea.js');
+var useTranslationBundle = require('./useTranslationBundle-24c593f4.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var UNSAFE_Menu_themes_redwood_MenuItemTheme = require('./UNSAFE_Menu/themes/redwood/MenuItemTheme.js');
 var unsafeDomAccess = require('./unsafeDomAccess-c3a492f0.js');

package/cjs/SelectMobileFieldInput-33427c18.js

@@ -0,0 +1,246 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var Floating = require('./Floating-a360e16a.js');
+var Layer = require('./Layer-c8668ea4.js');
+var compat = require('preact/compat');
+require('./LayerHost-f1a1533f.js');
+var keyboardUtils = require('./keyboardUtils-b42fe7d5.js');
+var useSelectCommon = require('./useSelectCommon-c3f3b7bc.js');
+var PRIVATE_SelectCommon_themes_dropdownStyles_css = require('./PRIVATE_SelectCommon/themes/dropdownStyles.css.js');
+var useOutsideMousedown = require('./useOutsideMousedown-fee3f752.js');
+var FormFieldContext = require('./FormFieldContext-69fe83d2.js');
+require('./logger-2b636482.js');
+require('./TabbableModeContext-e99d527e.js');
+
+
+require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
+var InlineUserAssistance = require('./InlineUserAssistance-74680664.js');
+var Flex = require('./Flex-a6d1c038.js');
+
+
+require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
+require('preact');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-842e04c7.js');
+
+require('./IconButton-7ebfcb64.js');
+
+require('./MessageFormattingUtils-539d75b0.js');
+require('./TransitionGroup-b239d98f.js');
+require('./MessagesContext-4e939750.js');
+
+
+
+require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
+require('./Popup-91e33a1d.js');
+require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
+
+
+require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
+require('./InputGroupContext-05f2a46f.js');
+
+require('./UNSAFE_Popup/themes/redwood/PopupVariants.css.js');
+var Link = require('./Link-33dcecc2.js');
+var useFocusWithin = require('./useFocusWithin-eb7f956a.js');
+var useHover = require('./useHover-49b0430d.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var Separator = require('./Separator-85962472.js');
+var WindowOverlay = require('./WindowOverlay-5a341d43.js');
+var PRIVATE_SelectCommon_themes_mobileDropdownStyles_css = require('./PRIVATE_SelectCommon/themes/mobileDropdownStyles.css.js');
+var PRIVATE_SelectCommon_themes_selectMobileDropdownStyles_css = require('./PRIVATE_SelectCommon/themes/selectMobileDropdownStyles.css.js');
+var stringUtils = require('./stringUtils-3e19c8af.js');
+var Text = require('./Text-436e8b56.js');
+var TextFieldUtils = require('./TextFieldUtils-96baac38.js');
+var UNSAFE_TextField_themes_FormControlUtilsStyles_css = require('./UNSAFE_TextField/themes/FormControlUtilsStyles.css.js');
+var UNSAFE_TextField_themes_redwood_TextFieldInputTheme = require('./UNSAFE_TextField/themes/redwood/TextFieldInputTheme.js');
+var useAccessibleContext = require('./useAccessibleContext-c49d8d1b.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var useFormFieldContext = require('./useFormFieldContext-4632eb73.js');
+var useTabbableMode = require('./useTabbableMode-a275583f.js');
+var formControlUtils = require('./formControlUtils-596c9dc3.js');
+var textAlign = require('./textAlign-f41f49db.js');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var PRIVATE_SelectCommon_themes_SelectMobileFieldInputStyles_css = require('./PRIVATE_SelectCommon/themes/SelectMobileFieldInputStyles.css.js');
+
+const DEFAULT_PLACEMENT = 'bottom-start';
+//TODO: Start consuming PRIVATE_Dropdown. JET-62565
+function Dropdown({ anchorRef, children, dropdownRef, id, isOpen, onAutoDismiss, onPosition }) {
+    const [placement, setPlacement] = hooks.useState(DEFAULT_PLACEMENT);
+    const [prevIsOpen, setPrevIsOpen] = hooks.useState(isOpen);
+    if (prevIsOpen !== 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 = hooks.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]);
+    const handleAutoDismiss = hooks.useCallback((event) => {
+        onAutoDismiss?.(event);
+    }, [onAutoDismiss]);
+    const handleKeyDown = hooks.useCallback((event) => {
+        if (event.defaultPrevented || keyboardUtils.isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case keyboardUtils.KEYS.ESC:
+            case keyboardUtils.KEYS.TAB:
+                handleAutoDismiss(event);
+                break;
+        }
+    }, [handleAutoDismiss]);
+    // use the mousedown event to be consistent with legacy JET and so that we're hiding the dropdown
+    // on the same event where focus will transfer
+    useOutsideMousedown.useOutsideMousedown({
+        isDisabled: !isOpen,
+        ref: [anchorRef, dropdownRef],
+        handler: handleAutoDismiss
+    });
+    // TODO: get dropdown y (mainAxis) offset from --oj-c-PRIVATE-DO-NOT-USE-private-core-global-dropdown-offset
+    const offsetValue = { mainAxis: 4, crossAxis: 0 };
+    const inlineStyle = isOpen
+        ? {
+            minWidth: `${anchorRef.current?.offsetWidth}px`
+        }
+        : {};
+    if (prevIsOpen !== isOpen) {
+        setPrevIsOpen(isOpen);
+    }
+    return !isOpen ? null : (jsxRuntime.jsx(Layer.Layer, { logicalParentRef: anchorRef, children: jsxRuntime.jsx(Floating.Floating, { anchorRef: anchorRef, sizeOptions: {
+                isMaxHeightAdjusted: true,
+                maxHeightCeiling: 400
+            }, ref: dropdownRef, placement: placement, offsetValue: offsetValue, onPosition: handlePosition, children: jsxRuntime.jsx("div", { class: PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.base, id: id, style: inlineStyle, onKeyDown: handleKeyDown, onMouseDown: useSelectCommon.preventDefaultForCurrentTarget, children: children }) }) }));
+}
+
+function DropdownUserAssistance(props) {
+    // Prevent the focus from transferring when the user clicks on an empty/non-clickable area
+    // of the user assistance
+    const handleMouseDown = hooks.useCallback((event) => {
+        // Don't call preventDefault when the user clicks on the help source link, so that the
+        // focus is allowed to transfer in that case.
+        if (event.target?.tagName !== 'A') {
+            event.preventDefault();
+        }
+    }, []);
+    return (jsxRuntime.jsx(FormFieldContext.FormFieldContext.Provider, { value: { isFocused: true }, children: jsxRuntime.jsx("div", { class: PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.userAssistance, onMouseDown: handleMouseDown, children: jsxRuntime.jsx(InlineUserAssistance.InlineUserAssistance, { ...props }) }) }));
+}
+
+/**
+ * This component renders a link that looks like a list item in a Select* component dropdown.
+ * It fires an action when the user triggers it, and is intended to be used for launching
+ * external application UI from within the dropdown, for example to provide advanced search or
+ * add to list functionality.
+ * The LinkItem would typically be shown in a fixed position above or below the list itself.
+ */
+const LinkItem = ({ children, isHighlighted, onAction }) => {
+    const { isHover, hoverProps } = useHover.useHover();
+    const { isFocused, focusProps } = useFocusWithin.useFocusWithin();
+    const handleClick = hooks.useCallback((e) => {
+        // prevent the link from actually navigating by preventing default and returning false
+        e.preventDefault();
+        onAction?.();
+        return false;
+    }, [onAction]);
+    const rootClasses = classNames.classNames([
+        PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.results.linkItemRoot,
+        isFocused ? PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.results.linkItemFocus : undefined
+    ]);
+    const linkClasses = classNames.classNames([
+        PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.results.extraItem,
+        isHover || isFocused || isHighlighted ? PRIVATE_SelectCommon_themes_dropdownStyles_css.dropdownStyles.results.linkItemHighlight : undefined
+    ]);
+    return (jsxRuntime.jsx("div", { class: rootClasses, ...focusProps, children: jsxRuntime.jsx(Link.Link, { href: "#", onClick: handleClick, children: jsxRuntime.jsx("div", { class: linkClasses, ...hoverProps, children: children }) }) }));
+};
+
+function MobileDropdown({ 'aria-labelledby': ariaLabelledBy, children, id, isOpen }) {
+    return !isOpen ? null : (jsxRuntime.jsx(Layer.Layer, { children: jsxRuntime.jsx(WindowOverlay.WindowOverlay, { children: jsxRuntime.jsx("div", { id: id, class: PRIVATE_SelectCommon_themes_mobileDropdownStyles_css.mobileDropdownStyles.base, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, children: jsxRuntime.jsx(Flex.Flex, { width: "100%", height: "100%", maxHeight: "100%", direction: "column", children: children }) }) }) }));
+}
+
+function SelectMobileDropdown({ children, footer, hasHeaderSeparator = true, header, id, isOpen, labelId }) {
+    return (jsxRuntime.jsxs(MobileDropdown, { id: id, isOpen: isOpen, "aria-labelledby": labelId, children: [header, hasHeaderSeparator && jsxRuntime.jsx(Separator.Separator, {}), jsxRuntime.jsx("div", { class: PRIVATE_SelectCommon_themes_selectMobileDropdownStyles_css.selectMobileDropdownStyles.content, children: children }), jsxRuntime.jsx(Separator.Separator, {}), footer] }));
+}
+
+const interpolations = [...Object.values(textAlign.textInterpolations)];
+const styleInterpolations = mergeInterpolations.mergeInterpolations(interpolations);
+/**
+ * This component is used for rendering the main field in mobile phones. This is a bit different from the
+ * normal main field (TextFieldInput) that we use for desktop & tablet devices in the way that
+ * a user will not be able to edit the value of this field. But, one can still have other functionalities
+ * of having a placeholder, tab in & out of it, and other such functionalities of an enabled field.
+ *
+ * This also differs from ReadonlyTextFieldInput in the following ways:
+ * 1. This will be rendered as div as well, but has a role of combobox set on it
+ * 2. This will not be read as readonly input by the screen readers
+ * 3. This has the stylings much similar to the TextFieldInput component
+ * 4. This supports the use of placeholder and shows it when there is no value present
+ * 5. This supports having the variant property and styles accordingly
+ *
+ * As such, this is very similar to the TextFieldInput except that this does not allow user input.
+ * Note: we cannot use TextFieldInput with readonly set on it; even though it might provide us the
+ * behavior we need, it will make the field as readonly and screen readers read the same about this
+ * field. This will be an incorrect representation contextually as one can still edit the value by opening
+ * the dropdown and changing the selection.
+ */
+const SelectMobileFieldInput = compat.forwardRef(({ 'aria-controls': ariaControls, 'aria-describedby': ariaDescribedBy, 'aria-expanded': ariaExpanded, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, displayValue, hasEmptyLabel, hasInsideLabel = false, isRequired, onBlur, onFocus, placeholder, textAlign, variant = 'default' }, ref) => {
+    // consume required contexts
+    const { isDisabled, isFocused, hasValue = false } = useFormFieldContext.useFormFieldContext();
+    const { isTabbable, tabbableModeProps } = useTabbableMode.useTabbableMode();
+    // setup properties
+    const myPlaceholder = TextFieldUtils.isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused)
+        ? placeholder
+        : undefined;
+    // Add unsafe API for specifying an external label which is added to ariaLabelledBy on the input,
+    // only when labelEdge is 'none' and label is ''. Since ariaLabelledBy takes precedence over all other
+    // kinds of labels, this helps to ensure we don't override a meaningful label.
+    const { UNSAFE_ariaLabelledBy } = useAccessibleContext.useAccessibleContext();
+    const mergedAriaLabelledBy = hasEmptyLabel
+        ? stringUtils.l([ariaLabelledBy, UNSAFE_ariaLabelledBy])
+        : ariaLabelledBy;
+    // setup style classes
+    const { class: styleInterpolationClasses } = styleInterpolations({ textAlign });
+    const { classes: themeClasses } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_TextFieldInputTheme.TextFieldInputRedwoodTheme, {
+        type: 'notPassword',
+        styleVariant: formControlUtils.isEmbeddedVariant(variant) ? 'embedded' : 'default',
+        textarea: 'notTextArea',
+        input: 'isInput',
+        prefix: 'noPrefix',
+        suffix: 'noSuffix',
+        startContent: 'noStartContent',
+        endContent: 'hasEndContent',
+        insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel',
+        value: hasValue ? 'hasValue' : 'noValue',
+        focused: isFocused ? 'isFocused' : 'notFocused',
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled'
+    });
+    const rootDivStyleClasses = classNames.classNames([
+        PRIVATE_SelectCommon_themes_SelectMobileFieldInputStyles_css.selectMobileFieldInputStyles.base,
+        styleInterpolationClasses,
+        themeClasses,
+        // JET-72775 - Form control alignment in tables
+        // When we are in legacy collection components, we want to inherit the text align
+        // when it is not set explicitly.
+        variant === 'legacyEmbedded' && textAlign === undefined && UNSAFE_TextField_themes_FormControlUtilsStyles_css.formControlInheritTextAlign
+    ]);
+    return (jsxRuntime.jsx("div", { "aria-autocomplete": "list", "aria-controls": ariaControls, "aria-describedby": ariaDescribedBy, "aria-expanded": ariaExpanded, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": mergedAriaLabelledBy, "aria-required": isRequired ? 'true' : undefined, class: rootDivStyleClasses, onBlur: onBlur, onFocus: onFocus, ref: ref, role: "combobox", ...(isTabbable && tabbableModeProps), children: jsxRuntime.jsx("div", { class: PRIVATE_SelectCommon_themes_SelectMobileFieldInputStyles_css.selectMobileFieldInputStyles.content, children: jsxRuntime.jsx(Text.Text, { variant: displayValue ? 'inherit' : 'secondary', children: displayValue || myPlaceholder }) }) }));
+});
+
+exports.Dropdown = Dropdown;
+exports.DropdownUserAssistance = DropdownUserAssistance;
+exports.LinkItem = LinkItem;
+exports.MobileDropdown = MobileDropdown;
+exports.SelectMobileDropdown = SelectMobileDropdown;
+exports.SelectMobileFieldInput = SelectMobileFieldInput;
+//# sourceMappingURL=SelectMobileFieldInput-33427c18.js.map

package/cjs/SelectMobileFieldInput-33427c18.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMobileFieldInput-33427c18.js","sources":["../../src/PRIVATE_SelectCommon/Dropdown.tsx","../../src/PRIVATE_SelectCommon/DropdownUserAssistance.tsx","../../src/PRIVATE_SelectCommon/LinkItem.tsx","../../src/PRIVATE_SelectCommon/MobileDropdown.tsx","../../src/PRIVATE_SelectCommon/SelectMobileDropdown.tsx","../../src/PRIVATE_SelectCommon/SelectMobileFieldInput.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 { ComponentChildren, ComponentProps } from 'preact';\nimport { MutableRef, useCallback, useState } from 'preact/hooks';\nimport { Floating, PositionData } from '../UNSAFE_Floating';\nimport { Layer } from '../UNSAFE_Layer';\nimport { isControlOrFunctionKey, KEYS } from '../utils/PRIVATE_keyboardUtils';\nimport { preventDefaultForCurrentTarget } from './eventUtils';\nimport { dropdownStyles } from './themes/dropdownStyles.css';\n//Once Dropdown is consumed this will be removed\nimport { useOutsideMousedown } from '../hooks/PRIVATE_useOutsideMousedown';\n\ntype FloatingProps = ComponentProps<typeof Floating>;\n\ntype Props = {\n  anchorRef: MutableRef<HTMLElement | null>;\n  children?: ComponentChildren;\n  dropdownRef: MutableRef<HTMLElement | null>;\n  id?: string;\n  isOpen?: boolean;\n  onAutoDismiss?: (event?: Event) => void;\n  onPosition?: FloatingProps['onPosition'];\n};\n\nconst DEFAULT_PLACEMENT = 'bottom-start';\n\n//TODO: Start consuming PRIVATE_Dropdown. JET-62565\nexport function Dropdown({\n  anchorRef,\n  children,\n  dropdownRef,\n  id,\n  isOpen,\n  onAutoDismiss,\n  onPosition\n}: Props) {\n  const [placement, setPlacement] = useState<FloatingProps['placement']>(DEFAULT_PLACEMENT);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n\n  if (prevIsOpen !== isOpen) {\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\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  const handleAutoDismiss = useCallback(\n    (event: Event) => {\n      onAutoDismiss?.(event);\n    },\n    [onAutoDismiss]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.defaultPrevented || isControlOrFunctionKey(event)) {\n        return;\n      }\n\n      switch (event.code) {\n        case KEYS.ESC:\n        case KEYS.TAB:\n          handleAutoDismiss(event);\n          break;\n      }\n    },\n    [handleAutoDismiss]\n  );\n\n  // use the mousedown event to be consistent with legacy JET and so that we're hiding the dropdown\n  // on the same event where focus will transfer\n  useOutsideMousedown({\n    isDisabled: !isOpen,\n    ref: [anchorRef, dropdownRef],\n    handler: handleAutoDismiss\n  });\n\n  // TODO: get dropdown y (mainAxis) offset from --oj-c-PRIVATE-DO-NOT-USE-private-core-global-dropdown-offset\n  const offsetValue = { mainAxis: 4, crossAxis: 0 };\n\n  const inlineStyle = isOpen\n    ? {\n        minWidth: `${anchorRef.current?.offsetWidth}px`\n      }\n    : {};\n\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n  }\n\n  return !isOpen ? null : (\n    <Layer logicalParentRef={anchorRef}>\n      <Floating\n        anchorRef={anchorRef}\n        sizeOptions={{\n          isMaxHeightAdjusted: true,\n          maxHeightCeiling: 400\n        }}\n        ref={dropdownRef}\n        placement={placement}\n        offsetValue={offsetValue}\n        onPosition={handlePosition}>\n        <div\n          class={dropdownStyles.base}\n          id={id}\n          style={inlineStyle}\n          onKeyDown={handleKeyDown}\n          onMouseDown={preventDefaultForCurrentTarget}>\n          {children}\n        </div>\n      </Floating>\n    </Layer>\n  );\n}\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 { ComponentProps } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { dropdownStyles } from './themes/dropdownStyles.css';\n\ntype InlineUserAssistanceProps = Pick<\n  ComponentProps<typeof InlineUserAssistance>,\n  | 'assistiveText'\n  | 'fieldLabel'\n  | 'helpSourceLink'\n  | 'helpSourceText'\n  | 'id'\n  | 'userAssistanceDensity'\n>;\n\nexport function DropdownUserAssistance(props: InlineUserAssistanceProps) {\n  // Prevent the focus from transferring when the user clicks on an empty/non-clickable area\n  // of the user assistance\n  const handleMouseDown = useCallback((event: MouseEvent) => {\n    // Don't call preventDefault when the user clicks on the help source link, so that the\n    // focus is allowed to transfer in that case.\n    if ((event.target as Element)?.tagName !== 'A') {\n      event.preventDefault();\n    }\n  }, []);\n\n  return (\n    <FormFieldContext.Provider value={{ isFocused: true }}>\n      <div class={dropdownStyles.userAssistance} onMouseDown={handleMouseDown}>\n        <InlineUserAssistance {...props} />\n      </div>\n    </FormFieldContext.Provider>\n  );\n}\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 { useCallback } from 'preact/hooks';\nimport { Link } from '#UNSAFE_Link';\nimport { useFocusWithin } from '#hooks/UNSAFE_useFocusWithin';\nimport { useHover } from '#hooks/UNSAFE_useHover';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { dropdownStyles } from './themes/dropdownStyles.css';\n\ntype Props = {\n  /**\n   * Child content of the item.\n   */\n  children: string;\n  /**\n   * Specifies whether to highlight the item.\n   */\n  isHighlighted?: boolean;\n  /**\n   * Callback invoked when the user triggers the link, for example by clicking or pressing Enter.\n   */\n  onAction?: () => void;\n};\n\n/**\n * This component renders a link that looks like a list item in a Select* component dropdown.\n * It fires an action when the user triggers it, and is intended to be used for launching\n * external application UI from within the dropdown, for example to provide advanced search or\n * add to list functionality.\n * The LinkItem would typically be shown in a fixed position above or below the list itself.\n */\nconst LinkItem = ({ children, isHighlighted, onAction }: Props) => {\n  const { isHover, hoverProps } = useHover();\n  const { isFocused, focusProps } = useFocusWithin();\n\n  const handleClick = useCallback(\n    (e: Event) => {\n      // prevent the link from actually navigating by preventing default and returning false\n      e.preventDefault();\n      onAction?.();\n      return false;\n    },\n    [onAction]\n  );\n\n  const rootClasses = classNames([\n    dropdownStyles.results.linkItemRoot,\n    isFocused ? dropdownStyles.results.linkItemFocus : undefined\n  ]);\n\n  const linkClasses = classNames([\n    dropdownStyles.results.extraItem,\n    isHover || isFocused || isHighlighted ? dropdownStyles.results.linkItemHighlight : undefined\n  ]);\n\n  return (\n    <div class={rootClasses} {...focusProps}>\n      <Link href=\"#\" onClick={handleClick}>\n        <div class={linkClasses} {...hoverProps}>\n          {children}\n        </div>\n      </Link>\n    </div>\n  );\n};\n\nexport { LinkItem };\n","import type { ComponentChildren, JSX } from 'preact';\nimport { Flex } from '../UNSAFE_Flex';\nimport { Layer } from '../UNSAFE_Layer';\nimport { WindowOverlay } from '../UNSAFE_WindowOverlay';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { mobileDropdownStyles } from './themes/mobileDropdownStyles.css';\n\ntype Props = {\n  /**\n   * Id of the label to associate with the dropdown (e.g. the label of the filter field).\n   */\n  'aria-labelledby'?: UnpackSignals<JSX.AriaAttributes>['aria-labelledby'];\n\n  /**\n   * The dropdown content\n   */\n  children?: ComponentChildren;\n\n  /**\n   * The id for the top level element\n   */\n  id?: string;\n\n  /**\n   * Specifies whether the dropdown is being shown\n   */\n  isOpen?: boolean;\n};\n\nexport function MobileDropdown({ 'aria-labelledby': ariaLabelledBy, children, id, isOpen }: Props) {\n  return !isOpen ? null : (\n    <Layer>\n      <WindowOverlay>\n        <div\n          id={id}\n          class={mobileDropdownStyles.base}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={ariaLabelledBy}>\n          <Flex width=\"100%\" height=\"100%\" maxHeight=\"100%\" direction=\"column\">\n            {children}\n          </Flex>\n        </div>\n      </WindowOverlay>\n    </Layer>\n  );\n}\n","import { ComponentChildren, ComponentProps } from 'preact';\nimport { Separator } from '../UNSAFE_Separator';\nimport { MobileDropdown } from './MobileDropdown';\nimport { selectMobileDropdownStyles } from './themes/selectMobileDropdownStyles.css';\n\ntype MobileDropdownProps = ComponentProps<typeof MobileDropdown>;\ntype PassThroughMobileDropdownProps = Pick<MobileDropdownProps, 'id' | 'isOpen'>;\n\ntype Props = PassThroughMobileDropdownProps & {\n  /**\n   * The main dropdown content\n   */\n  children?: ComponentChildren;\n\n  /**\n   * The components to be placed in the end of the dropdown\n   */\n  footer?: ComponentChildren;\n\n  /**\n   * The components to be placed in the beginning of the dropdown\n   */\n  header?: ComponentChildren;\n\n  /**\n   * Specifies whether to have a separator between header and content\n   */\n  hasHeaderSeparator?: boolean;\n\n  /**\n   * Id of the label for the filter field.\n   */\n  labelId?: string;\n};\n\nexport function SelectMobileDropdown({\n  children,\n  footer,\n  hasHeaderSeparator = true,\n  header,\n  id,\n  isOpen,\n  labelId\n}: Props) {\n  return (\n    <MobileDropdown id={id} isOpen={isOpen} aria-labelledby={labelId}>\n      {header}\n      {hasHeaderSeparator && <Separator />}\n      {/* TODO: Add overflow support to View and use it here */}\n      {/*  */}\n      <div class={selectMobileDropdownStyles.content}>{children}</div>\n      <Separator />\n      {footer}\n    </MobileDropdown>\n  );\n}\n","import type { ContextType, Ref, JSX } from 'preact';\nimport { forwardRef } from 'preact/compat';\n\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { merge } from '@oracle/oraclejet-internal-utilities/stringUtils';\n\nimport { Text } from '#UNSAFE_Text';\nimport { isInputPlaceholderShown } from '#UNSAFE_TextField/TextFieldUtils';\nimport { formControlInheritTextAlign } from '#UNSAFE_TextField/themes/FormControlUtilsStyles.css';\nimport type { TextFieldInputVariantOptions } from '#UNSAFE_TextField/themes/TextFieldInputStyles.css';\nimport { TextFieldInputRedwoodTheme } from '#UNSAFE_TextField/themes/redwood/TextFieldInputTheme';\nimport { useAccessibleContext } from '#hooks/UNSAFE_useAccessibleContext';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { useFormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { FormVariantContext } from '#hooks/UNSAFE_useFormVariantContext';\nimport { useTabbableMode } from '#hooks/UNSAFE_useTabbableMode';\nimport { isEmbeddedVariant } from '#utils/PRIVATE_formControlUtils';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { type TextProps, textInterpolations } from '#utils/UNSAFE_interpolations/text';\nimport { mergeInterpolations } from '#utils/UNSAFE_mergeInterpolations';\nimport { selectMobileFieldInputStyles } from './themes/SelectMobileFieldInputStyles.css';\n\ntype AriaProps = Pick<\n  UnpackSignals<JSX.AriaAttributes>,\n  | 'aria-controls'\n  | 'aria-describedby'\n  | 'aria-expanded'\n  | 'aria-invalid'\n  | 'aria-label'\n  | 'aria-labelledby'\n>;\n\ntype EventProps = Pick<UnpackSignals<JSX.IntrinsicElements['div']>, 'onBlur' | 'onFocus'>;\n\ntype Props = AriaProps &\n  EventProps &\n  TextProps & {\n    displayValue?: string;\n    hasEmptyLabel?: boolean;\n    hasInsideLabel?: boolean;\n    isRequired?: boolean;\n    placeholder?: string;\n    variant?: ContextType<typeof FormVariantContext>;\n  };\n\nconst interpolations = [...Object.values(textInterpolations)];\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\n/**\n * This component is used for rendering the main field in mobile phones. This is a bit different from the\n * normal main field (TextFieldInput) that we use for desktop & tablet devices in the way that\n * a user will not be able to edit the value of this field. But, one can still have other functionalities\n * of having a placeholder, tab in & out of it, and other such functionalities of an enabled field.\n *\n * This also differs from ReadonlyTextFieldInput in the following ways:\n * 1. This will be rendered as div as well, but has a role of combobox set on it\n * 2. This will not be read as readonly input by the screen readers\n * 3. This has the stylings much similar to the TextFieldInput component\n * 4. This supports the use of placeholder and shows it when there is no value present\n * 5. This supports having the variant property and styles accordingly\n *\n * As such, this is very similar to the TextFieldInput except that this does not allow user input.\n * Note: we cannot use TextFieldInput with readonly set on it; even though it might provide us the\n * behavior we need, it will make the field as readonly and screen readers read the same about this\n * field. This will be an incorrect representation contextually as one can still edit the value by opening\n * the dropdown and changing the selection.\n */\nexport const SelectMobileFieldInput = forwardRef(\n  (\n    {\n      'aria-controls': ariaControls,\n      'aria-describedby': ariaDescribedBy,\n      'aria-expanded': ariaExpanded,\n      'aria-invalid': ariaInvalid,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      displayValue,\n      hasEmptyLabel,\n      hasInsideLabel = false,\n      isRequired,\n      onBlur,\n      onFocus,\n      placeholder,\n      textAlign,\n      variant = 'default'\n    }: Props,\n    ref?: Ref<HTMLDivElement>\n  ) => {\n    // consume required contexts\n    const { isDisabled, isFocused, hasValue = false } = useFormFieldContext();\n    const { isTabbable, tabbableModeProps } = useTabbableMode();\n\n    // setup properties\n    const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused)\n      ? placeholder\n      : undefined;\n\n    // Add unsafe API for specifying an external label which is added to ariaLabelledBy on the input,\n    // only when labelEdge is 'none' and label is ''. Since ariaLabelledBy takes precedence over all other\n    // kinds of labels, this helps to ensure we don't override a meaningful label.\n    const { UNSAFE_ariaLabelledBy } = useAccessibleContext();\n    const mergedAriaLabelledBy = hasEmptyLabel\n      ? merge([ariaLabelledBy, UNSAFE_ariaLabelledBy])\n      : ariaLabelledBy;\n\n    // setup style classes\n    const { class: styleInterpolationClasses } = styleInterpolations({ textAlign });\n    const { classes: themeClasses } = useComponentTheme<TextFieldInputVariantOptions>(\n      TextFieldInputRedwoodTheme,\n      {\n        type: 'notPassword',\n        styleVariant: isEmbeddedVariant(variant) ? 'embedded' : 'default',\n        textarea: 'notTextArea',\n        input: 'isInput',\n        prefix: 'noPrefix',\n        suffix: 'noSuffix',\n        startContent: 'noStartContent',\n        endContent: 'hasEndContent',\n        insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel',\n        value: hasValue ? 'hasValue' : 'noValue',\n        focused: isFocused ? 'isFocused' : 'notFocused',\n        disabled: isDisabled ? 'isDisabled' : 'notDisabled'\n      }\n    );\n    const rootDivStyleClasses = classNames([\n      selectMobileFieldInputStyles.base,\n      styleInterpolationClasses,\n      themeClasses,\n      // JET-72775 - Form control alignment in tables\n      // When we are in legacy collection components, we want to inherit the text align\n      // when it is not set explicitly.\n      variant === 'legacyEmbedded' && textAlign === undefined && formControlInheritTextAlign\n    ]);\n\n    return (\n      <div\n        aria-autocomplete=\"list\"\n        aria-controls={ariaControls}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        aria-invalid={ariaInvalid}\n        aria-label={ariaLabel}\n        aria-labelledby={mergedAriaLabelledBy}\n        aria-required={isRequired ? 'true' : undefined}\n        class={rootDivStyleClasses}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        ref={ref}\n        role=\"combobox\"\n        {...(isTabbable && tabbableModeProps)}>\n        <div class={selectMobileFieldInputStyles.content}>\n          <Text variant={displayValue ? 'inherit' : 'secondary'}>\n            {displayValue || myPlaceholder}\n          </Text>\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["useState","useCallback","isControlOrFunctionKey","KEYS","useOutsideMousedown","_jsx","Layer","Floating","dropdownStyles","preventDefaultForCurrentTarget","FormFieldContext","InlineUserAssistance","useHover","useFocusWithin","classNames","Link","WindowOverlay","mobileDropdownStyles","Flex","_jsxs","Separator","selectMobileDropdownStyles","textInterpolations","mergeInterpolations","forwardRef","useFormFieldContext","useTabbableMode","isInputPlaceholderShown","useAccessibleContext","merge","useComponentTheme","TextFieldInputRedwoodTheme","isEmbeddedVariant","selectMobileFieldInputStyles","formControlInheritTextAlign","Text"],"mappings":"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"}

package/cjs/Selector-9b72f861.js

@@ -8,7 +8,7 @@ var UNSAFE_Selector_themes_SelectorStyles_css = require('./UNSAFE_Selector/theme
 var StyledCheckbox = require('./StyledCheckbox-4476f902.js');
 var useActive = require('./useActive-6770f917.js');
 var useFocus = require('./useFocus-1b288fb9.js');
-var useTestId = require('./useTestId-9093a54b.js');
+var useTestId = require('./useTestId-15ee37d6.js');
 var useHover = require('./useHover-49b0430d.js');
 
 /**

package/cjs/SelectorAll-c497a428.js

@@ -0,0 +1,71 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var Flex = require('./Flex-a6d1c038.js');
+var usePress = require('./usePress-886180e4.js');
+var UNSAFE_Selector_themes_SelectorStyles_css = require('./UNSAFE_Selector/themes/SelectorStyles.css.js');
+var StyledCheckbox = require('./StyledCheckbox-4476f902.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var useActive = require('./useActive-6770f917.js');
+var useFocus = require('./useFocus-1b288fb9.js');
+var useTestId = require('./useTestId-15ee37d6.js');
+var useTooltip = require('./useTooltip-43bfe8a3.js');
+var useHover = require('./useHover-49b0430d.js');
+require('./logger-2b636482.js');
+require('./LayerHost-f1a1533f.js');
+require('preact/compat');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-842e04c7.js');
+var useTranslationBundle = require('./useTranslationBundle-24c593f4.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 = hooks.useRef(null);
+    const { isActive, activeProps } = useActive.useActive();
+    const { isFocus, focusProps } = useFocus.useFocus();
+    const { pressProps } = usePress.usePress(pressHandler);
+    const { isHover, hoverProps } = useHover.useHover();
+    const isChecked = selected === 'partial' || selected === 'partial-all'
+        ? 'partial'
+        : selected === 'all'
+            ? 'checked'
+            : 'unchecked';
+    const testIdProps = useTestId.useTestId(testId);
+    const onClick = () => {
+        // ensure the checkbox is focused after click
+        inputRef.current?.focus();
+    };
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const tooltipLabel = selected === 'none' || selected === 'partial'
+        ? translations.selectorAll_selectAll()
+        : translations.selectorAll_deselectAll();
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text: tooltipLabel,
+        isDisabled: showTooltip === 'disabled' ? true : false
+    });
+    const ariaLabelText = !ariaLabel && !ariaLabelledby ? tooltipLabel : undefined;
+    return (jsxRuntime.jsx("div", { class: UNSAFE_Selector_themes_SelectorStyles_css.styles.container, ...mergeProps.mergeProps({ onClick }, pressProps, tooltipProps), ...testIdProps, children: jsxRuntime.jsx("div", { class: UNSAFE_Selector_themes_SelectorStyles_css.styles.base, ...activeProps, ...hoverProps, children: jsxRuntime.jsxs(Flex.Flex, { align: "center", justify: "center", children: [jsxRuntime.jsx(StyledCheckbox.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();
+    }
+};
+
+exports.SelectorAll = SelectorAll;
+//# sourceMappingURL=SelectorAll-c497a428.js.map

package/cjs/SelectorAll-c497a428.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectorAll-c497a428.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":["useRef","useActive","useFocus","usePress","useHover","useTestId","useTranslationBundle","useTooltip","_jsx","styles","mergeProps","_jsxs","Flex","StyledCheckbox"],"mappings":"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"}

package/cjs/Sheet-65ae604e.js

@@ -0,0 +1,163 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var Modal = require('./Modal-b00b9f5e.js');
+var WindowOverlay = require('./WindowOverlay-5a341d43.js');
+var tabbableUtils = require('./tabbableUtils-7e41d383.js');
+var UNSAFE_Sheet_themes_SheetStyles_css = require('./UNSAFE_Sheet/themes/SheetStyles.css.js');
+var refUtils = require('./refUtils-a9872e75.js');
+var useAnimationStatus = require('./useAnimationStatus-c0c14bcc.js');
+var animationUtils = require('./animationUtils-54852d03.js');
+var useTranslationBundle = require('./useTranslationBundle-24c593f4.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 = hooks.useRef({
+        pointerDownId: 0,
+        startTime: null,
+        prevpageX: 0,
+        prevpageY: 0,
+        elementScrollTop: 0
+    });
+    const clearSwipe = hooks.useCallback(() => {
+        ref.current = {
+            pointerDownId: null,
+            startTime: 0,
+            prevpageX: 0,
+            prevpageY: 0,
+            elementScrollTop: 0
+        };
+    }, []);
+    const onTouchStart = hooks.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 = hooks.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: {
+        ...animationUtils.SLIDE_UP_XLARGE,
+        options: {
+            duration: animationUtils.DURATION_LARGE
+        }
+    },
+    closing: {
+        ...animationUtils.SLIDE_DOWN_XLARGE,
+        options: {
+            duration: animationUtils.DURATION_LARGE
+        }
+    }
+};
+const Sheet = ({ children, onClose, isOpen = false, initialFocus = 'none' }) => {
+    const sheetRef = hooks.useRef(null);
+    // Initial focus going to be set after animation once opening animation is added
+    hooks.useEffect(() => {
+        if (isOpen && initialFocus === 'firstFocusable') {
+            const sheetElement = sheetRef.current;
+            if (sheetElement) {
+                tabbableUtils.focusWithin(sheetElement);
+            }
+        }
+    }, [isOpen, initialFocus]);
+    const handlePointerDismissed = hooks.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 = hooks.useCallback((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        switch (event.code) {
+            case 'Tab':
+            case 'Escape':
+                onClose?.({ reason: 'keyboardDismissed' });
+        }
+    }, [onClose]);
+    const { setAnimationElementRef, status } = useAnimationStatus.useAnimationStatus({
+        isOpen,
+        isAnimatedOnMount: false,
+        animationStates
+    });
+    hooks.useEffect(() => {
+        if (status === 'opening') {
+            if (initialFocus === 'firstFocusable') {
+                const dropdownElement = sheetRef.current;
+                if (dropdownElement) {
+                    tabbableUtils.focusWithin(dropdownElement);
+                }
+            }
+        }
+    }, [status, initialFocus]);
+    const stableRef = hooks.useMemo(() => refUtils.mergeRefs(setAnimationElementRef, sheetRef), [setAnimationElementRef]);
+    const isMounted = status !== 'unmounted';
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMounted ? (jsxRuntime.jsx(Modal.Modal, { isOpen: isMounted, onBackdropClick: handlePointerDismissed, children: jsxRuntime.jsx(WindowOverlay.WindowOverlay, { placement: "bottom", children: jsxRuntime.jsxs("div", { ...swipeProps, ref: stableRef, class: UNSAFE_Sheet_themes_SheetStyles_css.sheetStyles.sheetContainerWrapper, style: { maxHeight: `calc(100vh - ${TOP_OFFSET}px)` }, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("a", { onClick: handlePointerDismissed, role: "button", "aria-label": translations.sheet_close(), tabIndex: -1, class: UNSAFE_Sheet_themes_SheetStyles_css.sheetStyles.sheetHiddenLink }), children] }) }) })) : null }));
+};
+const TOP_OFFSET = 96;
+
+exports.Sheet = Sheet;
+exports.useSheetSwipe = useSheetSwipe;
+//# sourceMappingURL=Sheet-65ae604e.js.map

package/cjs/Sheet-65ae604e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet-65ae604e.js","sources":["../../src/UNSAFE_Sheet/useSheetSwipe.ts","../../src/UNSAFE_Sheet/Sheet.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 { useRef, useCallback } from 'preact/hooks';\n\n/*\n  threshold: Minimal threshold required before recognizing\n  tolerance: A tolerance value which allows the user to move their finger about a length measured in pixels.\n  This allows the swipe gesture to be triggered more easily since a User might not move their finger\n  in a straight line.\n*/\ntype SwipeOptions = {\n  threshold?: number;\n  maximumTime?: number;\n  tolerance?: number;\n  isDisabled?: boolean;\n};\n\ntype SwipeInfo = {\n  direction: 'down';\n};\n\ntype SwipeState = {\n  pointerDownId: number | null;\n  startTime: number | null;\n  prevpageX: number;\n  prevpageY: number;\n  elementScrollTop: number;\n};\n/*This \"private\" hook will live until we end up stating a final decision on useSwipe hook.\nFor that hook to work, element that use it has to set touch-action:none;, since pointer events\nare canceled once a touch action is going to be handled by the browser. This works for most\nof the components that don't scroll. But if the component scroll, there is a need for the browser to \nhandle scroll which is imposible with a hook just using pointer events.\n\nUpdate 11/6/23:\nNishad's team is going to confirm if other comps that will use useSwipe need mouse interactions. If they need it,\nwe can either have a flag to use pointer or touch events or two separated hooks. If they don't need mouse interactions,\nwe could start using useSwipe with touch events instead.\n*/\nexport function useSheetSwipe(\n  onSwipe: (e: SwipeInfo) => void,\n  { threshold = 10, maximumTime = 300, tolerance = 50, isDisabled = false }: SwipeOptions = {\n    threshold: 10,\n    maximumTime: 300,\n    tolerance: 50,\n    isDisabled: false\n  }\n): { swipeProps: Record<string, any> } {\n  const ref = useRef<SwipeState>({\n    pointerDownId: 0,\n    startTime: null,\n    prevpageX: 0,\n    prevpageY: 0,\n    elementScrollTop: 0\n  });\n\n  const clearSwipe = useCallback(() => {\n    ref.current = {\n      pointerDownId: null,\n      startTime: 0,\n      prevpageX: 0,\n      prevpageY: 0,\n      elementScrollTop: 0\n    };\n  }, []);\n\n  const onTouchStart = useCallback(\n    (e: TouchEvent) => {\n      const touchobj = e.changedTouches[0];\n      if (!ref.current.pointerDownId) {\n        ref.current = {\n          pointerDownId: touchobj.identifier,\n          startTime: e.timeStamp,\n          prevpageX: touchobj.pageX,\n          prevpageY: touchobj.pageY,\n          elementScrollTop: (e.currentTarget as HTMLElement).scrollTop\n        };\n      } else {\n        clearSwipe();\n      }\n    },\n    [clearSwipe]\n  );\n\n  const onTouchEnd = useCallback(\n    (ev: TouchEvent) => {\n      const touchobj = ev.changedTouches[0];\n      if (touchobj.identifier === ref.current.pointerDownId) {\n        if (ref.current.startTime && ev.timeStamp - ref.current.startTime < maximumTime) {\n          if (\n            touchobj.pageY - ref.current.prevpageY > threshold &&\n            Math.abs(touchobj.pageX - ref.current.prevpageX) <= tolerance &&\n            ref.current.elementScrollTop === 0\n          ) {\n            onSwipe?.({ direction: 'down' });\n          }\n        }\n      }\n      // state would be reset to its original state whether swipe is completed or cancelled\n      clearSwipe();\n    },\n    [threshold, onSwipe, clearSwipe, maximumTime, tolerance]\n  );\n\n  const swipeProps = isDisabled\n    ? {}\n    : {\n        /** event handlers to spread on the target element. */\n        onTouchStart,\n        onTouchEnd,\n        ontouchcancel: clearSwipe\n      };\n\n  return {\n    swipeProps\n  };\n}\n","import { JSX } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef } from 'preact/hooks';\n\nimport { Modal } from '../UNSAFE_Modal';\nimport { WindowOverlay } from '../UNSAFE_WindowOverlay';\n//Temporal import.\nimport { useSheetSwipe } from './useSheetSwipe';\nimport { focusWithin } from '../utils/PRIVATE_tabbableUtils';\n\nimport { sheetStyles } from './themes/SheetStyles.css';\nimport { mergeRefs } from '#utils/PRIVATE_refUtils';\nimport { AnimationStates, useAnimationStatus } from '#hooks/PRIVATE_useAnimationStatus';\nimport { SLIDE_DOWN_XLARGE, SLIDE_UP_XLARGE, DURATION_LARGE } from '#utils/PRIVATE_animationUtils';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\n\n/*\n  pointerDismissed: Swipedown and tapScrim\n  keyboardDismissed: \"Escape\" | \"Tab\"\n*/\nexport type CloseDetail = { reason: 'pointerDismissed' | 'keyboardDismissed' };\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\n\ntype SheetProps = IntrinsicProps & {\n  onClose?: (detail: CloseDetail) => void;\n  isOpen?: boolean;\n  initialFocus?: 'none' | 'firstFocusable';\n};\n\nconst animationStates: AnimationStates = {\n  opening: {\n    ...SLIDE_UP_XLARGE,\n    options: {\n      duration: DURATION_LARGE\n    }\n  },\n  closing: {\n    ...SLIDE_DOWN_XLARGE,\n    options: {\n      duration: DURATION_LARGE\n    }\n  }\n};\n\nexport const Sheet = ({ children, onClose, isOpen = false, initialFocus = 'none' }: SheetProps) => {\n  const sheetRef = useRef<HTMLDivElement>(null);\n\n  // Initial focus going to be set after animation once opening animation is added\n  useEffect(() => {\n    if (isOpen && initialFocus === 'firstFocusable') {\n      const sheetElement = sheetRef.current;\n      if (sheetElement) {\n        focusWithin(sheetElement);\n      }\n    }\n  }, [isOpen, initialFocus]);\n  const handlePointerDismissed = useCallback(() => {\n    onClose?.({ reason: 'pointerDismissed' });\n  }, [onClose]);\n\n  // TODO: Use useSwipe when it works on components that could scroll. Important to notice all components that have a\n  // sheet will use this comp and this comp is going to use useSwipe. So comps that have their own impl (menu right now),\n  // will stop having its own implementation\n  const { swipeProps } = useSheetSwipe(handlePointerDismissed);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.defaultPrevented) {\n        return;\n      }\n      switch (event.code) {\n        case 'Tab':\n        case 'Escape':\n          onClose?.({ reason: 'keyboardDismissed' });\n        default:\n          break;\n      }\n    },\n    [onClose]\n  );\n  const { setAnimationElementRef, status } = useAnimationStatus<HTMLElement>({\n    isOpen,\n    isAnimatedOnMount: false,\n    animationStates\n  });\n\n  useEffect(() => {\n    if (status === 'opening') {\n      if (initialFocus === 'firstFocusable') {\n        const dropdownElement = sheetRef.current;\n        if (dropdownElement) {\n          focusWithin(dropdownElement);\n        }\n      }\n    }\n  }, [status, initialFocus]);\n\n  const stableRef = useMemo(\n    () => mergeRefs(setAnimationElementRef, sheetRef),\n    [setAnimationElementRef]\n  );\n\n  const isMounted = status !== 'unmounted';\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  return (\n    <>\n      {isMounted ? (\n        <Modal isOpen={isMounted} onBackdropClick={handlePointerDismissed}>\n          <WindowOverlay placement=\"bottom\">\n            <div\n              {...swipeProps}\n              ref={stableRef}\n              class={sheetStyles.sheetContainerWrapper}\n              style={{ maxHeight: `calc(100vh - ${TOP_OFFSET}px)` }}\n              onKeyDown={handleKeyDown}>\n              <a\n                onClick={handlePointerDismissed}\n                role=\"button\"\n                aria-label={translations.sheet_close()}\n                tabIndex={-1}\n                class={sheetStyles.sheetHiddenLink}></a>\n              {children}\n            </div>\n          </WindowOverlay>\n        </Modal>\n      ) : null}\n    </>\n  );\n};\n\nconst TOP_OFFSET = 96;\n"],"names":["useRef","useCallback","SLIDE_UP_XLARGE","DURATION_LARGE","SLIDE_DOWN_XLARGE","useEffect","focusWithin","useAnimationStatus","useMemo","mergeRefs","useTranslationBundle","_jsx","_Fragment","Modal","WindowOverlay","_jsxs","sheetStyles"],"mappings":"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"}