@oracle/oraclejet-preact 19.0.0 → 19.0.2

package/cjs/PRIVATE_RichSelectionCommon.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var BaseRichSelection = require('./BaseRichSelection-1d4ef67b.js');
+var BaseRichSelection = require('./BaseRichSelection-9b1ada4d.js');
 require('preact/jsx-runtime');
 require('preact/compat');
 require('./FormContext-d1d05967.js');
@@ -21,7 +21,7 @@ require('./LayerHost-f1a1533f.js');
 require('./index-15e13649.js');
 require('./UNSAFE_Layer/themes/LayerHostStyles.css.js');
 
-require('./Label-afee809f.js');
+require('./Label-670472a7.js');
 require('./useFormFieldContext-4632eb73.js');
 require('./classNames-c14c6ef3.js');
 require('./useComponentTheme-082fc8e4.js');
@@ -103,18 +103,18 @@ require('./vanilla-extract-dynamic.esm-2e1b7c25.js');
 require('./UNSAFE_Floating/themes/FloatingContract.css.js');
 require('./useUnsafeDomElementRef-f22a2f0c.js');
 
-require('./IconButton-217314e6.js');
-require('./BaseButton-eadd18ed.js');
+require('./IconButton-7ebfcb64.js');
+require('./BaseButton-acda944a.js');
 require('./useActive-6770f917.js');
 require('./UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js');
 require('./UNSAFE_BaseButton/themes/BaseButtonStyles.css.js');
 
 require('./UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js');
 
-require('./BareButton-814ae4b7.js');
-require('./useBareButton-8c4f3b41.js');
+require('./BareButton-5a989b01.js');
+require('./useBareButton-3c8d1a5d.js');
 require('./usePress-886180e4.js');
-require('./usePressClick-421494df.js');
+require('./usePressClick-7a34624a.js');
 require('./useTabbableMode-a275583f.js');
 require('./buttonUtils-dff2ea3e.js');
 require('./id-86356250.js');
@@ -203,8 +203,8 @@ require('./UNSAFE_TextField/themes/redwood/TextFieldVariants.css.js');
 require('./InlineHelp-8097a102.js');
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js');
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.css.js');
-require('./InlineUserAssistance-2fba4481.js');
-require('./ComponentMessageContainer-0a029bed.js');
+require('./InlineUserAssistance-74680664.js');
+require('./ComponentMessageContainer-1b9e8036.js');
 require('./MessagesManager-5f1e36da.js');
 require('./SuccessS-7e6dbebc.js');
 require('./ErrorS-14a49cb6.js');
@@ -250,6 +250,7 @@ require('./UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.css.js');
 require('./UNSAFE_Checkbox/themes/redwood/CheckboxTheme.js');
 require('./UNSAFE_Checkbox/themes/CheckboxStyles.css.js');
 
+
 require('./UNSAFE_Checkbox/themes/redwood/CheckboxBaseTheme.css.js');
 
 require('./UNSAFE_Checkbox/themes/redwood/CheckboxVariants.css.js');

package/cjs/PRIVATE_RichSelectionCommon.js.map

@@ -1 +1 @@
-{"version":3,"file":"PRIVATE_RichSelectionCommon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PRIVATE_RichSelectionCommon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/PRIVATE_SelectCommon.js

@@ -4,7 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var useSelectCommon = require('./useSelectCommon-c3f3b7bc.js');
-var SelectMobileFieldInput = require('./SelectMobileFieldInput-cd6ee053.js');
+var SelectMobileFieldInput = require('./SelectMobileFieldInput-33427c18.js');
 require('preact/jsx-runtime');
 require('./Flex-a6d1c038.js');
 require('./useTestId-15ee37d6.js');
@@ -190,16 +190,16 @@ require('./FormFieldContext-69fe83d2.js');
 
 
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
-require('./InlineUserAssistance-2fba4481.js');
+require('./InlineUserAssistance-74680664.js');
 
 
 require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
 
-require('./IconButton-217314e6.js');
-require('./BaseButton-eadd18ed.js');
-require('./BareButton-814ae4b7.js');
-require('./useBareButton-8c4f3b41.js');
-require('./usePressClick-421494df.js');
+require('./IconButton-7ebfcb64.js');
+require('./BaseButton-acda944a.js');
+require('./BareButton-5a989b01.js');
+require('./useBareButton-3c8d1a5d.js');
+require('./usePressClick-7a34624a.js');
 require('./buttonUtils-dff2ea3e.js');
 require('./id-86356250.js');
 require('./ButtonLabelLayout-8981b39a.js');
@@ -213,7 +213,7 @@ require('./MessagesContext-4e939750.js');
 
 
 require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
-require('./ComponentMessageContainer-0a029bed.js');
+require('./ComponentMessageContainer-1b9e8036.js');
 require('./MessagesManager-5f1e36da.js');
 require('./SuccessS-7e6dbebc.js');
 require('./ErrorS-14a49cb6.js');
@@ -264,7 +264,7 @@ require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
 
 
 require('./UNSAFE_Label/themes/redwood/LabelVariants.css.js');
-require('./Link-c066941c.js');
+require('./Link-33dcecc2.js');
 require('./UNSAFE_Link/themes/redwood/LinkTheme.js');
 require('./UNSAFE_Link/themes/LinkStyles.css.js');
 

package/cjs/PRIVATE_Table.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Table = require('./Table-d4dd9535.js');
+var Table = require('./Table-0bca32d4.js');
 require('preact/jsx-runtime');
 require('preact');
 require('preact/hooks');
@@ -137,22 +137,22 @@ require('./flexitem-fee13e26.js');
 
 
 require('./usePress-886180e4.js');
-require('./SortControl-72e4f04e.js');
+require('./SortControl-7be650eb.js');
 require('./UNSAFE_SortControl/themes/SortControl.css.js');
 
 require('./UpParent-a9b85eaa.js');
 require('./DownParent-c3e85154.js');
 require('./useSortableContext-0510fd8e.js');
-require('./EmbeddedIconButton-acd640d1.js');
-require('./BaseButton-eadd18ed.js');
+require('./EmbeddedIconButton-88b1a5cd.js');
+require('./BaseButton-acda944a.js');
 require('./UNSAFE_BaseButton/themes/redwood/BaseButtonTheme.js');
 require('./UNSAFE_BaseButton/themes/BaseButtonStyles.css.js');
 
 require('./UNSAFE_BaseButton/themes/redwood/BaseButtonVariants.css.js');
 
-require('./BareButton-814ae4b7.js');
-require('./useBareButton-8c4f3b41.js');
-require('./usePressClick-421494df.js');
+require('./BareButton-5a989b01.js');
+require('./useBareButton-3c8d1a5d.js');
+require('./usePressClick-7a34624a.js');
 require('./buttonUtils-dff2ea3e.js');
 require('./id-86356250.js');
 require('./ButtonLabelLayout-8981b39a.js');
@@ -167,8 +167,8 @@ require('./UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutBaseTheme.cs
 
 require('./UNSAFE_ButtonLabelLayout/themes/redwood/ButtonLabelLayoutVariants.css.js');
 
-require('./Button-110731d5.js');
-require('./Dialog-b46f321b.js');
+require('./Button-170bea0b.js');
+require('./Dialog-152ab89d.js');
 require('./WindowOverlay-5a341d43.js');
 require('./UNSAFE_WindowOverlay/themes/WindowOverlayStyles.css.js');
 
@@ -203,7 +203,7 @@ require('./useAddBusyState-d19ae1fa.js');
 require('./BusyStateContext-86f40d3c.js');
 require('./useBusyStateContext-362eee2a.js');
 require('./useDraggable-aa4ac3a2.js');
-require('./IconButton-217314e6.js');
+require('./IconButton-7ebfcb64.js');
 require('./Close-8eecf245.js');
 require('./Resizable-13b918de.js');
 require('./PRIVATE_Resizable/themes/ResizableStyles.css.js');
@@ -255,7 +255,7 @@ require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
 
 
 require('./UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js');
-require('./NumberInputText-d187704a.js');
+require('./NumberInputText-565c84b9.js');
 require('./useFocusableTextField-2c36840d.js');
 require('./useFocusWithin-eb7f956a.js');
 require('./useFormContext-a794f7b6.js');
@@ -265,7 +265,7 @@ require('./stringUtils-3e19c8af.js');
 require('./truncationUtils-2d44b04b.js');
 require('./useMessageSeverity-cfc4ae9d.js');
 require('./useFormFieldContextProps-0fa67f6c.js');
-require('./Label-afee809f.js');
+require('./Label-670472a7.js');
 require('./useFormFieldContext-4632eb73.js');
 
 
@@ -349,8 +349,8 @@ require('./UNSAFE_TextField/themes/ReadonlyTextFieldInputStyles.css.js');
 
 require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputVariants.css.js');
 require('./TextField-71dba81e.js');
-require('./InlineUserAssistance-2fba4481.js');
-require('./ComponentMessageContainer-0a029bed.js');
+require('./InlineUserAssistance-74680664.js');
+require('./ComponentMessageContainer-1b9e8036.js');
 require('./MessagesManager-5f1e36da.js');
 require('./SuccessS-7e6dbebc.js');
 require('./ErrorS-14a49cb6.js');
@@ -366,7 +366,7 @@ require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.css.
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js');
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.css.js');
 require('./InlineHelp-8097a102.js');
-require('./CompactUserAssistance-aaa774e8.js');
+require('./CompactUserAssistance-58a6899d.js');
 require('./Separator-85962472.js');
 require('./useCurrentValueReducer-f37ac024.js');
 require('./ChevronDown-25b749b9.js');

package/cjs/PRIVATE_TimeComponent.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var TimeComponentCanvas2D = require('./TimeComponentCanvas2D-98d4fd81.js');
+var TimeComponentCanvas2D = require('./TimeComponentCanvas2D-471abe04.js');
 require('preact/jsx-runtime');
 require('./PRIVATE_TimeComponent/themes/TimeComponentStyles.css.js');
 
@@ -44,7 +44,7 @@ require('./_curry3-18677bca.js');
 require('./_curry2-c15d89cd.js');
 require('./_isObject-28636267.js');
 
-require('./BaseButton-eadd18ed.js');
+require('./BaseButton-acda944a.js');
 require('./useHover-49b0430d.js');
 require('./useToggle-3ebba7d8.js');
 require('./useActive-6770f917.js');
@@ -59,10 +59,10 @@ require('./vanilla-extract-recipes-createRuntimeFn.esm-d1301b2d.js');
 
 require('./useComponentTheme-082fc8e4.js');
 require('./logger-2b636482.js');
-require('./BareButton-814ae4b7.js');
-require('./useBareButton-8c4f3b41.js');
+require('./BareButton-5a989b01.js');
+require('./useBareButton-3c8d1a5d.js');
 require('./usePress-886180e4.js');
-require('./usePressClick-421494df.js');
+require('./usePressClick-7a34624a.js');
 require('./TabbableModeContext-e99d527e.js');
 require('./useTabbableMode-a275583f.js');
 require('./useId-6c0eeb27.js');

package/cjs/RevealToggleIcon-98b44cc6.js

@@ -0,0 +1,28 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var ViewHide = require('./ViewHide-dd2f5b42.js');
+var View = require('./View-9c435e43.js');
+var useTranslationBundle = require('./useTranslationBundle-24c593f4.js');
+var IconSwitchButton = require('./IconSwitchButton-84e07848.js');
+
+/**
+ * RevealToggleIcon is a controlled toggle icon component with tooltip that displays
+ * hide or show icons. It is used internally for input components that hide and show the content.
+ */
+function RevealToggleIcon({ accessibleLabel, isRevealed, onToggle, testId, tooltipHide, tooltipShow }) {
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const hide = tooltipHide || translations.formControl_hide();
+    const show = tooltipShow || translations.formControl_show();
+    return (jsxRuntime.jsx(IconSwitchButton.IconSwitchButton
+    // we want to display the tooltip title of the expected action on toggle
+    , { 
+        // we want to display the tooltip title of the expected action on toggle
+        tooltip: isRevealed ? hide : show, accessibleLabel: accessibleLabel, 
+        // denote that the switch is selected when in the "masked" state
+        isSelected: !isRevealed, onToggle: onToggle, testId: testId, size: "sm", children: isRevealed ? jsxRuntime.jsx(ViewHide.SvgViewHide, {}) : jsxRuntime.jsx(View.SvgView, {}) }));
+}
+
+exports.RevealToggleIcon = RevealToggleIcon;
+//# sourceMappingURL=RevealToggleIcon-98b44cc6.js.map

package/cjs/RevealToggleIcon-98b44cc6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealToggleIcon-98b44cc6.js","sources":["../../src/PRIVATE_RevealToggleIcon/RevealToggleIcon.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 { ComponentProps } from 'preact';\nimport { ViewHideIcon } from '#PRIVATE_ThemedIcons/ViewHideIcon';\nimport { ViewIcon } from '#PRIVATE_ThemedIcons/ViewIcon';\nimport { IconSwitchButton } from '#PRIVATE_IconSwitchButton';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype IconSwitchButtonProps = ComponentProps<typeof IconSwitchButton>;\n\ntype RevealToggleIconProps = TestIdProps & {\n  /**\n   * The aria label of the toggle.\n   */\n  accessibleLabel: IconSwitchButtonProps['accessibleLabel'];\n  /**\n   * Specifies whether the content is shown or hidden.\n   */\n  isRevealed?: boolean;\n  /**\n   * Property that triggers a callback immediately when toggle happens and value of isRevealed property should be updated\n   */\n  onToggle?: IconSwitchButtonProps['onToggle'];\n  /**\n   * Tooltip text to indicate that the toggle will hide the content.\n   */\n  tooltipHide?: string;\n  /**\n   * Tooltip text to indicate that the toggle will show the content.\n   */\n  tooltipShow?: string;\n};\n\n/**\n * RevealToggleIcon is a controlled toggle icon component with tooltip that displays\n * hide or show icons. It is used internally for input components that hide and show the content.\n */\nexport function RevealToggleIcon({\n  accessibleLabel,\n  isRevealed,\n  onToggle,\n  testId,\n  tooltipHide,\n  tooltipShow\n}: RevealToggleIconProps) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const hide = tooltipHide || translations.formControl_hide();\n  const show = tooltipShow || translations.formControl_show();\n\n  return (\n    <IconSwitchButton\n      // we want to display the tooltip title of the expected action on toggle\n      tooltip={isRevealed ? hide : show}\n      accessibleLabel={accessibleLabel}\n      // denote that the switch is selected when in the \"masked\" state\n      isSelected={!isRevealed}\n      onToggle={onToggle}\n      testId={testId}\n      size=\"sm\">\n      {/* we want to display the icon of the expected action on toggle */}\n      {isRevealed ? <ViewHideIcon /> : <ViewIcon />}\n    </IconSwitchButton>\n  );\n}\n"],"names":["useTranslationBundle","_jsx","IconSwitchButton","ViewHideIcon","ViewIcon"],"mappings":";;;;;;;;;AAwCA;;;AAGG;AACa,SAAA,gBAAgB,CAAC,EAC/B,eAAe,EACf,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,WAAW,EACW,EAAA;AACtB,IAAA,MAAM,YAAY,GAAGA,yCAAoB,CAAa,0BAA0B,CAAC,CAAC;IAClF,MAAM,IAAI,GAAG,WAAW,IAAI,YAAY,CAAC,gBAAgB,EAAE,CAAC;IAC5D,MAAM,IAAI,GAAG,WAAW,IAAI,YAAY,CAAC,gBAAgB,EAAE,CAAC;IAE5D,QACEC,eAACC,iCAAgB;;;;AAEf,QAAA,OAAO,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,EACjC,eAAe,EAAE,eAAe;;AAEhC,QAAA,UAAU,EAAE,CAAC,UAAU,EACvB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,IAAI,EAER,QAAA,EAAA,UAAU,GAAGD,cAAA,CAACE,oBAAY,EAAG,EAAA,CAAA,GAAGF,cAAC,CAAAG,YAAQ,EAAG,EAAA,CAAA,EAAA,CAC5B,EACnB;AACJ;;;;"}

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/SortControl-7be650eb.js

@@ -0,0 +1,35 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var useTestId = require('./useTestId-15ee37d6.js');
+var useTranslationBundle = require('./useTranslationBundle-24c593f4.js');
+var UNSAFE_SortControl_themes_SortControl_css = require('./UNSAFE_SortControl/themes/SortControl.css.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var UpParent = require('./UpParent-a9b85eaa.js');
+var DownParent = require('./DownParent-c3e85154.js');
+var useSortableContext = require('./useSortableContext-0510fd8e.js');
+var EmbeddedIconButton = require('./EmbeddedIconButton-88b1a5cd.js');
+
+/**
+ * Component that renders an interactive sort control.
+ */
+const SortControl = ({ testId }) => {
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const testIdProps = useTestId.useTestId(testId);
+    const { isRendered, sortable, sortDirection, onSort } = useSortableContext.useSortableContext();
+    const iconClassArray = [UNSAFE_SortControl_themes_SortControl_css.sortControlStyles.base];
+    if (isRendered) {
+        iconClassArray.push(UNSAFE_SortControl_themes_SortControl_css.sortControlStyles.visible);
+    }
+    else {
+        iconClassArray.push(UNSAFE_SortControl_themes_SortControl_css.sortControlStyles.hidden);
+    }
+    const iconClasses = classNames.classNames(iconClassArray);
+    return (jsxRuntime.jsx("div", { ...testIdProps, class: iconClasses, children: jsxRuntime.jsx(EmbeddedIconButton.EmbeddedIconButton, { "aria-label": sortable === 'enabled'
+                ? translations.collection_sortEnabled()
+                : translations.collection_sortDisabled(), isDisabled: sortable !== 'enabled', onAction: onSort, children: sortDirection === 'descending' ? jsxRuntime.jsx(DownParent.SvgDownParent, {}) : jsxRuntime.jsx(UpParent.SvgUpParent, {}) }) }));
+};
+
+exports.SortControl = SortControl;
+//# sourceMappingURL=SortControl-7be650eb.js.map