@oracle/oraclejet-preact 15.0.4 → 15.1.0

package/cjs/ReadonlyTextFieldInput-655968b6.js

@@ -0,0 +1,68 @@
+/* @oracle/oraclejet-preact: 15.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks_UNSAFE_useAccessibleContext = require('./hooks/UNSAFE_useAccessibleContext.js');
+var hooks_UNSAFE_useFormContext = require('./hooks/UNSAFE_useFormContext.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+require('./utils/UNSAFE_classNames.js');
+var utils_UNSAFE_interpolations_text = require('./utils/UNSAFE_interpolations/text.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+var hooks_UNSAFE_useFormFieldContext = require('./hooks/UNSAFE_useFormFieldContext.js');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+var UNSAFE_TextField_themes_redwood_ReadonlyTextFieldInputTheme = require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldInputTheme.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var classNames = require('./classNames-4bfc0882.js');
+
+/**
+ * Merge multiple ids into a space-separated list
+ * @param ids The ids to be merged
+ * @returns The space separated string of ids
+ */
+function mergeIDs(...ids) {
+    return ids.filter(Boolean).join(' ') || undefined;
+}
+function ReadonlyTextFieldInput({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': inputLabelledBy, autoFocus, as = 'div', elementRef, hasEmptyLabel, hasInsideLabel = false, inlineUserAssistance, innerReadonlyField, rows, type, value = '', variant, ...props }) {
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const loadingAriaLabel = translations.formControl_loading();
+    const { isFormLayout, isReadonly: isReadonlyForm } = hooks_UNSAFE_useFormContext.useFormContext();
+    const { isLoading } = hooks_UNSAFE_useFormFieldContext.useFormFieldContext();
+    const ariaLabelForReadonly = isLoading ? loadingAriaLabel : ariaLabel;
+    // get classes for text align
+    const interpolations = [...Object.values(utils_UNSAFE_interpolations_text.textInterpolations)];
+    const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+    const { class: styleInterpolationClasses } = styleInterpolations(props);
+    const { classes: themeClasses } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_ReadonlyTextFieldInputTheme.ReadonlyTextFieldInputRedwoodTheme, {
+        textarea: variant === 'textarea' ? 'isTextArea' : 'notTextArea',
+        formLayout: isFormLayout ? 'isFormLayout' : 'notFormLayout',
+        readonlyForm: isReadonlyForm ? 'isReadonlyForm' : 'notReadonlyForm',
+        insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel'
+    });
+    const readonlyDivClasses = classNames.classNames([themeClasses, styleInterpolationClasses]);
+    // JET-52914 - Implement Tabbable mode API contract in InputText
+    // spread tabbableModeProps on component
+    const { isTabbable, tabbableModeProps } = hooks_UNSAFE_useTabbableMode.useTabbableMode();
+    // JET-52089: add unsafe API for specifying an external label which is added to ariaLabelledBy on the input or div,
+    // 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 } = hooks_UNSAFE_useAccessibleContext.useAccessibleContext();
+    const ariaLabelledBy = hasEmptyLabel
+        ? mergeIDs(inputLabelledBy, UNSAFE_ariaLabelledBy)
+        : inputLabelledBy;
+    if (as === 'input') {
+        return (jsxRuntime.jsx("input", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabelForReadonly, "aria-labelledby": ariaLabelledBy, autofocus: autoFocus, class: readonlyDivClasses, readonly: true, 
+            // @ts-ignore
+            ref: elementRef, type: type, value: value, ...(!isTabbable && tabbableModeProps) }));
+    }
+    if (as === 'textarea') {
+        return (jsxRuntime.jsx("textarea", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabelForReadonly, "aria-labelledby": ariaLabelledBy, autofocus: autoFocus, class: readonlyDivClasses, readonly: true, 
+            // @ts-ignore
+            ref: elementRef, rows: rows, ...(!isTabbable && tabbableModeProps), children: value }));
+    }
+    return (jsxRuntime.jsx("div", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabelForReadonly, "aria-labelledby": ariaLabelledBy, "aria-readonly": true, autofocus: autoFocus, class: readonlyDivClasses, 
+        // @ts-ignore
+        ref: elementRef, role: "textbox", ...tabbableModeProps, children: value }));
+}
+
+exports.ReadonlyTextFieldInput = ReadonlyTextFieldInput;
+//# sourceMappingURL=ReadonlyTextFieldInput-655968b6.js.map

package/cjs/ReadonlyTextFieldInput-655968b6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadonlyTextFieldInput-655968b6.js","sources":["../../src/UNSAFE_TextField/ReadonlyTextFieldInput.tsx"],"sourcesContent":["import { ComponentChildren, Ref } from 'preact';\nimport { useAccessibleContext } from '../hooks/UNSAFE_useAccessibleContext';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { textInterpolations } from '../utils/UNSAFE_interpolations/text';\nimport type { TextProps } from '../utils/UNSAFE_interpolations/text';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport {\n  ReadonlyTextFieldInputVariantOptions,\n  ReadonlyTextFieldInputStyles\n} from './themes/ReadonlyTextFieldInputStyles.css';\nimport { ReadonlyTextFieldInputRedwoodTheme } from './themes/redwood/ReadonlyTextFieldInputTheme';\nimport { BundleType } from '../resources/nls/bundle';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\n\ntype AutoFocusProp = HTMLAttributesSignalExcluded<HTMLInputElement>['autofocus'];\n\ntype ReadonlyAsInputProps = {\n  as: 'input';\n  type: HTMLAttributesSignalExcluded<HTMLInputElement>['type'];\n  elementRef?: Ref<HTMLInputElement>;\n  rows?: never;\n};\n\ntype ReadonlyAsTextAreaProps = {\n  as: 'textarea';\n  elementRef?: Ref<HTMLTextAreaElement | HTMLDivElement>;\n  type?: never;\n  rows?: number;\n};\n\ntype ReadonlyAsDivProps = {\n  as?: 'div';\n  elementRef?: Ref<HTMLTextAreaElement | HTMLDivElement>;\n  type?: never;\n  rows?: never;\n};\n\ntype Props = TextProps &\n  (ReadonlyAsDivProps | ReadonlyAsInputProps | ReadonlyAsTextAreaProps) & {\n    'aria-describedby'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    autoFocus?: AutoFocusProp;\n    hasEmptyLabel?: boolean;\n    hasInsideLabel?: boolean;\n    inlineUserAssistance?: ComponentChildren;\n    innerReadonlyField?: ComponentChildren;\n    value?: string;\n    variant?: 'textarea';\n  };\n\n/**\n * Merge multiple ids into a space-separated list\n * @param ids The ids to be merged\n * @returns The space separated string of ids\n */\nfunction mergeIDs(...ids: (string | undefined)[]) {\n  return ids.filter(Boolean).join(' ') || undefined;\n}\n\nexport function ReadonlyTextFieldInput({\n  'aria-describedby': ariaDescribedBy,\n  'aria-label': ariaLabel,\n  'aria-labelledby': inputLabelledBy,\n  autoFocus,\n  as = 'div',\n  elementRef,\n  hasEmptyLabel,\n  hasInsideLabel = false,\n  inlineUserAssistance,\n  innerReadonlyField,\n  rows,\n  type,\n  value = '',\n  variant,\n  ...props\n}: Props) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const loadingAriaLabel = translations.formControl_loading();\n  const { isFormLayout, isReadonly: isReadonlyForm } = useFormContext();\n  const { isLoading } = useFormFieldContext();\n  const ariaLabelForReadonly = isLoading ? loadingAriaLabel : ariaLabel;\n\n  // get classes for text align\n  const interpolations = [...Object.values(textInterpolations)];\n  const styleInterpolations = mergeInterpolations<Props>(interpolations);\n  const { class: styleInterpolationClasses } = styleInterpolations(props);\n  const { classes: themeClasses } = useComponentTheme<\n    ReadonlyTextFieldInputVariantOptions,\n    ReadonlyTextFieldInputStyles\n  >(ReadonlyTextFieldInputRedwoodTheme, {\n    textarea: variant === 'textarea' ? 'isTextArea' : 'notTextArea',\n    formLayout: isFormLayout ? 'isFormLayout' : 'notFormLayout',\n    readonlyForm: isReadonlyForm ? 'isReadonlyForm' : 'notReadonlyForm',\n    insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel'\n  });\n\n  const readonlyDivClasses = classNames([themeClasses, styleInterpolationClasses]);\n\n  // JET-52914 - Implement Tabbable mode API contract in InputText\n  // spread tabbableModeProps on component\n  const { isTabbable, tabbableModeProps } = useTabbableMode();\n\n  // JET-52089: add unsafe API for specifying an external label which is added to ariaLabelledBy on the input or div,\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 ariaLabelledBy = hasEmptyLabel\n    ? mergeIDs(inputLabelledBy, UNSAFE_ariaLabelledBy)\n    : inputLabelledBy;\n\n  if (as === 'input') {\n    return (\n      <input\n        aria-describedby={ariaDescribedBy}\n        aria-label={ariaLabelForReadonly}\n        aria-labelledby={ariaLabelledBy}\n        autofocus={autoFocus}\n        class={readonlyDivClasses}\n        readonly={true}\n        // @ts-ignore\n        ref={elementRef}\n        type={type}\n        value={value}\n        {...(!isTabbable && tabbableModeProps)}\n      />\n    );\n  }\n  if (as === 'textarea') {\n    return (\n      <textarea\n        aria-describedby={ariaDescribedBy}\n        aria-label={ariaLabelForReadonly}\n        aria-labelledby={ariaLabelledBy}\n        autofocus={autoFocus}\n        class={readonlyDivClasses}\n        readonly={true}\n        // @ts-ignore\n        ref={elementRef}\n        rows={rows}\n        {...(!isTabbable && tabbableModeProps)}>\n        {value}\n      </textarea>\n    );\n  }\n  return (\n    <div\n      aria-describedby={ariaDescribedBy}\n      aria-label={ariaLabelForReadonly}\n      aria-labelledby={ariaLabelledBy}\n      aria-readonly={true}\n      autofocus={autoFocus}\n      class={readonlyDivClasses}\n      // @ts-ignore\n      ref={elementRef}\n      role=\"textbox\"\n      {...tabbableModeProps}>\n      {value}\n    </div>\n  );\n}\n"],"names":["useTranslationBundle","useFormContext","useFormFieldContext","textInterpolations","mergeInterpolations","useComponentTheme","ReadonlyTextFieldInputRedwoodTheme","classNames","useTabbableMode","useAccessibleContext","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAwDA;;;;AAIG;AACH,SAAS,QAAQ,CAAC,GAAG,GAA2B,EAAA;AAC9C,IAAA,OAAO,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;AACpD,CAAC;AAEK,SAAU,sBAAsB,CAAC,EACrC,kBAAkB,EAAE,eAAe,EACnC,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,eAAe,EAClC,SAAS,EACT,EAAE,GAAG,KAAK,EACV,UAAU,EACV,aAAa,EACb,cAAc,GAAG,KAAK,EACtB,oBAAoB,EACpB,kBAAkB,EAClB,IAAI,EACJ,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,GAAG,KAAK,EACF,EAAA;AACN,IAAA,MAAM,YAAY,GAAGA,sDAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,gBAAgB,GAAG,YAAY,CAAC,mBAAmB,EAAE,CAAC;IAC5D,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,GAAGC,0CAAc,EAAE,CAAC;AACtE,IAAA,MAAM,EAAE,SAAS,EAAE,GAAGC,oDAAmB,EAAE,CAAC;IAC5C,MAAM,oBAAoB,GAAG,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAAC;;IAGtE,MAAM,cAAc,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAACC,mDAAkB,CAAC,CAAC,CAAC;AAC9D,IAAA,MAAM,mBAAmB,GAAGC,oDAAmB,CAAQ,cAAc,CAAC,CAAC;IACvE,MAAM,EAAE,KAAK,EAAE,yBAAyB,EAAE,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAGC,gDAAiB,CAGjDC,8FAAkC,EAAE;QACpC,QAAQ,EAAE,OAAO,KAAK,UAAU,GAAG,YAAY,GAAG,aAAa;QAC/D,UAAU,EAAE,YAAY,GAAG,cAAc,GAAG,eAAe;QAC3D,YAAY,EAAE,cAAc,GAAG,gBAAgB,GAAG,iBAAiB;QACnE,WAAW,EAAE,cAAc,GAAG,gBAAgB,GAAG,eAAe;AACjE,KAAA,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAGC,qBAAU,CAAC,CAAC,YAAY,EAAE,yBAAyB,CAAC,CAAC,CAAC;;;IAIjF,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAGC,4CAAe,EAAE,CAAC;;;;AAK5D,IAAA,MAAM,EAAE,qBAAqB,EAAE,GAAGC,sDAAoB,EAAE,CAAC;IACzD,MAAM,cAAc,GAAG,aAAa;AAClC,UAAE,QAAQ,CAAC,eAAe,EAAE,qBAAqB,CAAC;UAChD,eAAe,CAAC;IAEpB,IAAI,EAAE,KAAK,OAAO,EAAE;AAClB,QAAA,QACEC,cACoB,CAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,eAAe,gBACrB,oBAAoB,EAAA,iBAAA,EACf,cAAc,EAC/B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,IAAI;;AAEd,YAAA,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACR,IAAC,CAAC,UAAU,IAAI,iBAAiB,CAAC,EAAA,CACtC,EACF;AACH,KAAA;IACD,IAAI,EAAE,KAAK,UAAU,EAAE;AACrB,QAAA,QACEA,cACoB,CAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,eAAe,gBACrB,oBAAoB,EAAA,iBAAA,EACf,cAAc,EAC/B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,IAAI;;AAEd,YAAA,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,IAAI,EACN,IAAC,CAAC,UAAU,IAAI,iBAAiB,CAAC,YACrC,KAAK,EAAA,CACG,EACX;AACH,KAAA;AACD,IAAA,QACEA,cACoB,CAAA,KAAA,EAAA,EAAA,kBAAA,EAAA,eAAe,EACrB,YAAA,EAAA,oBAAoB,qBACf,cAAc,EAAA,eAAA,EAChB,IAAI,EACnB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,kBAAkB;;AAEzB,QAAA,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,SAAS,EACV,GAAA,iBAAiB,EACpB,QAAA,EAAA,KAAK,EACF,CAAA,EACN;AACJ;;;;"}

package/cjs/SelectMenuItem-e6cc1344.js

@@ -0,0 +1,66 @@
+/* @oracle/oraclejet-preact: 15.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
+var PRIVATE_ThemedIcons_CheckIcon = require('./PRIVATE_ThemedIcons/CheckIcon.js');
+var MenuItem = require('./MenuItem-f3346e1f.js');
+var preact = require('preact');
+
+/**
+ * @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
+ */
+const SelectMenuGroupContext = preact.createContext({
+    isMultiple: false
+});
+
+/**
+ * @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
+ */
+/**
+ * Utility hook for consuming the MenuContext
+ *
+ * @returns The value of MenuContext provider
+ */
+function useSelectMenuGroupContext() {
+    return hooks.useContext(SelectMenuGroupContext);
+}
+
+function SelectMenuItem({ value, label, isDisabled, endIcon }) {
+    const { isMultiple, value: selectedValue, onCommit } = useSelectMenuGroupContext();
+    const uniqueID = hooks_UNSAFE_useId.useId();
+    const id = hooks.useMemo(() => `oj-menu-item-${uniqueID}`, [uniqueID]);
+    const { isSelected, memoizedOnCommit } = hooks.useMemo(() => {
+        if (!isMultiple) {
+            return {
+                isSelected: selectedValue === value,
+                memoizedOnCommit: () => {
+                    onCommit?.({ value, previousValue: selectedValue });
+                }
+            };
+        }
+        return {
+            isSelected: !!selectedValue?.includes(value),
+            memoizedOnCommit: () => {
+                const proposedValue = isSelected
+                    ? selectedValue?.filter((val) => val !== value) || []
+                    : [...(selectedValue || []), value];
+                onCommit?.({ value: proposedValue, previousValue: selectedValue });
+            }
+        };
+    }, [selectedValue, value, onCommit, isMultiple]);
+    return (jsxRuntime.jsx(MenuItem.BaseMenuItem, { id: id, type: "select", role: isMultiple ? 'menuitemcheckbox' : 'menuitemradio', isChecked: isSelected, isDisabled: isDisabled, startIcon: isSelected ? jsxRuntime.jsx(PRIVATE_ThemedIcons_CheckIcon.CheckIcon, {}) : jsxRuntime.jsx("span", {}), label: label, onAction: memoizedOnCommit, endIcon: endIcon }));
+}
+
+exports.SelectMenuGroupContext = SelectMenuGroupContext;
+exports.SelectMenuItem = SelectMenuItem;
+//# sourceMappingURL=SelectMenuItem-e6cc1344.js.map

package/cjs/SelectMenuItem-e6cc1344.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuItem-e6cc1344.js","sources":["../../src/UNSAFE_Menu/SelectMenuGroupContext.tsx","../../src/UNSAFE_Menu/useSelectMenuGroupContext.tsx","../../src/UNSAFE_Menu/SelectMenuItem.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 { createContext } from 'preact';\n\nimport { MenuValueUpdateDetail } from './menuUtils';\n\ntype SelectSingleMenuGroupContextProps = {\n  isMultiple: false;\n  value?: string;\n  onCommit?: (detail: MenuValueUpdateDetail<string>) => void;\n};\ntype SelectMultipleMenuGroupContextProps = {\n  isMultiple: true;\n  value?: string[];\n  onCommit?: (detail: MenuValueUpdateDetail<string[]>) => void;\n};\n\ntype SelectMenuGroupContextProps =\n  | SelectSingleMenuGroupContextProps\n  | SelectMultipleMenuGroupContextProps;\n\nconst SelectMenuGroupContext = createContext<SelectMenuGroupContextProps>({\n  isMultiple: false\n});\n\nexport { SelectMenuGroupContext, SelectMenuGroupContextProps };\n","/**\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 { useContext } from 'preact/hooks';\nimport { SelectMenuGroupContext } from './SelectMenuGroupContext';\n\n/**\n * Utility hook for consuming the MenuContext\n *\n * @returns The value of MenuContext provider\n */\nfunction useSelectMenuGroupContext() {\n  return useContext(SelectMenuGroupContext);\n}\n\nexport { useSelectMenuGroupContext };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport { useId } from '../hooks/UNSAFE_useId';\n\nimport { CheckIcon } from '../PRIVATE_ThemedIcons/CheckIcon';\n\nimport { BaseMenuItem } from './MenuItem';\nimport { useSelectMenuGroupContext } from './useSelectMenuGroupContext';\n\ntype SelectMenuItemProps = {\n  value: string;\n  label: string;\n  isDisabled?: boolean;\n  endIcon?: ComponentChildren;\n};\n\nexport function SelectMenuItem({ value, label, isDisabled, endIcon }: SelectMenuItemProps) {\n  const { isMultiple, value: selectedValue, onCommit } = useSelectMenuGroupContext();\n  const uniqueID = useId();\n  const id = useMemo(() => `oj-menu-item-${uniqueID}`, [uniqueID]);\n\n  const { isSelected, memoizedOnCommit } = useMemo(() => {\n    if (!isMultiple) {\n      return {\n        isSelected: selectedValue === value,\n        memoizedOnCommit: () => {\n          onCommit?.({ value, previousValue: selectedValue });\n        }\n      };\n    }\n    return {\n      isSelected: !!selectedValue?.includes(value),\n      memoizedOnCommit: () => {\n        const proposedValue = isSelected\n          ? selectedValue?.filter((val) => val !== value) || []\n          : [...(selectedValue || []), value];\n        onCommit?.({ value: proposedValue, previousValue: selectedValue });\n      }\n    };\n  }, [selectedValue, value, onCommit, isMultiple]);\n\n  return (\n    <BaseMenuItem\n      id={id}\n      type=\"select\"\n      role={isMultiple ? 'menuitemcheckbox' : 'menuitemradio'}\n      isChecked={isSelected}\n      isDisabled={isDisabled}\n      startIcon={isSelected ? <CheckIcon /> : <span></span>}\n      label={label}\n      onAction={memoizedOnCommit}\n      endIcon={endIcon}\n    />\n  );\n}\n"],"names":["createContext","useContext","useId","useMemo","_jsx","BaseMenuItem","CheckIcon"],"mappings":";;;;;;;;;;AAAA;;;;;;AAMG;AAqBG,MAAA,sBAAsB,GAAGA,oBAAa,CAA8B;AACxE,IAAA,UAAU,EAAE,KAAK;AAClB,CAAA;;AC7BD;;;;;;AAMG;AAKH;;;;AAIG;AACH,SAAS,yBAAyB,GAAA;AAChC,IAAA,OAAOC,gBAAU,CAAC,sBAAsB,CAAC,CAAC;AAC5C;;ACMM,SAAU,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAuB,EAAA;AACvF,IAAA,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,yBAAyB,EAAE,CAAC;AACnF,IAAA,MAAM,QAAQ,GAAGC,wBAAK,EAAE,CAAC;AACzB,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,CAAgB,aAAA,EAAA,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEjE,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAGA,aAAO,CAAC,MAAK;QACpD,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;gBACL,UAAU,EAAE,aAAa,KAAK,KAAK;gBACnC,gBAAgB,EAAE,MAAK;oBACrB,QAAQ,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;iBACrD;aACF,CAAC;AACH,SAAA;QACD,OAAO;YACL,UAAU,EAAE,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,KAAK,CAAC;YAC5C,gBAAgB,EAAE,MAAK;gBACrB,MAAM,aAAa,GAAG,UAAU;AAC9B,sBAAE,aAAa,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,KAAK,CAAC,IAAI,EAAE;sBACnD,CAAC,IAAI,aAAa,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;AACtC,gBAAA,QAAQ,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;aACpE;SACF,CAAC;KACH,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjD,QACEC,cAAC,CAAAC,qBAAY,EACX,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,eAAe,EACvD,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,GAAGD,cAAA,CAACE,uCAAS,EAAA,EAAA,CAAG,GAAGF,cAAA,CAAA,MAAA,EAAA,EAAA,CAAa,EACrD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EAAE,OAAO,EAChB,CAAA,EACF;AACJ;;;;;"}

package/cjs/SelectMultipleMenuGroup-0b35d846.js

@@ -0,0 +1,12 @@
+/* @oracle/oraclejet-preact: 15.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var SelectMenuItem = require('./SelectMenuItem-e6cc1344.js');
+
+function SelectMultipleMenuGroup({ value, onCommit, children }) {
+    return (jsxRuntime.jsx(SelectMenuItem.SelectMenuGroupContext.Provider, { value: { isMultiple: true, value, onCommit }, children: children }));
+}
+
+exports.SelectMultipleMenuGroup = SelectMultipleMenuGroup;
+//# sourceMappingURL=SelectMultipleMenuGroup-0b35d846.js.map

package/cjs/SelectMultipleMenuGroup-0b35d846.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultipleMenuGroup-0b35d846.js","sources":["../../src/UNSAFE_Menu/SelectMultipleMenuGroup.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren } from 'preact';\n\nimport { MenuValueUpdateDetail } from './menuUtils';\nimport { SelectMenuGroupContext } from './SelectMenuGroupContext';\n\ntype SelectMultipleMenuGroupProps = {\n  children: ComponentChildren;\n  value?: string[];\n  onCommit?: (detail: MenuValueUpdateDetail<string[]>) => void;\n};\n\nexport function SelectMultipleMenuGroup({\n  value,\n  onCommit,\n  children\n}: SelectMultipleMenuGroupProps) {\n  return (\n    <SelectMenuGroupContext.Provider value={{ isMultiple: true, value, onCommit }}>\n      {children}\n    </SelectMenuGroupContext.Provider>\n  );\n}\n"],"names":["_jsx","SelectMenuGroupContext"],"mappings":";;;;;;AAmBM,SAAU,uBAAuB,CAAC,EACtC,KAAK,EACL,QAAQ,EACR,QAAQ,EACqB,EAAA;IAC7B,QACEA,eAACC,qCAAsB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC1E,QAAA,EAAA,QAAQ,EACuB,CAAA,EAClC;AACJ;;;;"}

package/cjs/SelectSingle-258f0ffd.js

@@ -0,0 +1,384 @@
+/* @oracle/oraclejet-preact: 15.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var hooks_UNSAFE_useFocusableTextField = require('./hooks/UNSAFE_useFocusableTextField.js');
+var hooks_UNSAFE_useFormContext = require('./hooks/UNSAFE_useFormContext.js');
+var hooks_UNSAFE_useFormFieldContext = require('./hooks/UNSAFE_useFormFieldContext.js');
+var hooks_UNSAFE_useLoadingIndicatorTimer = require('./hooks/UNSAFE_useLoadingIndicatorTimer.js');
+var hooks_UNSAFE_useTextField = require('./hooks/UNSAFE_useTextField.js');
+require('./UNSAFE_Label.js');
+var UNSAFE_LiveRegion = require('./UNSAFE_LiveRegion.js');
+var UNSAFE_TextField = require('./UNSAFE_TextField.js');
+var UNSAFE_UserAssistance = require('./UNSAFE_UserAssistance.js');
+var PRIVATE_SelectCommon = require('./PRIVATE_SelectCommon.js');
+var hooks = require('preact/hooks');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var Label = require('./Label-886e43d9.js');
+var ReadonlyTextFieldInput = require('./ReadonlyTextFieldInput-655968b6.js');
+var TextFieldInput = require('./TextFieldInput-556029db.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function useDisplayValue(itemText, valueItem) {
+    // create the text displayed in the field from the selected value
+    const displayValue = hooks.useMemo(() => {
+        return valueItem === undefined ? '' : PRIVATE_SelectCommon.renderItemText(valueItem, itemText) ?? '';
+    }, [valueItem, itemText]);
+    return displayValue;
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Hook that manages SelectSingle state and behavior.  This hook creates state variables and
+ * event listeners, returning properties to apply to components internally rendered by
+ * SelectSingle, as well as state information.
+ *
+ * @param data Specifies data for the dropdown list.
+ * @param inputRef Ref to the input element.
+ * @param isDisabled Specifies whether the component is disabled.
+ * @param isFocused Specifies whether the component has focus.
+ * @param isReadonly Specifies whether the component is readonly.
+ * @param onCommit Callback invoked when the selected value is committed.
+ * @param onFilter Callback function to trigger loading data for the dropdown list,
+ * which may or may not be filtered by user entered text.
+ * @param valueItem Specifies the key, data, and optional metadata for the selected value.
+ *
+ * @returns Properties to apply to internal components that SelectSingle renders, and component
+ * state.
+ */
+function useSelectSingle({ data, inputRef, isDisabled, isFocused: propIsFocused, isReadonly, onCommit: propOnCommit, onFilter, valueItem }) {
+    const { currentRow, dropdownRef, handleDropdownArrowClick, handleDropdownAutoDismiss: baseHandleDropdownAutoDismiss, handleDropdownPosition, handleInput, handleMainFieldKeyDown: baseHandleMainFieldKeyDown, handleMainFieldKeyUp, isDropdownAbove, isDropdownOpen, isFocused, isUserFiltering, mainFieldRef, onCurrentKeyChange, onMouseDown, searchText, selectedKeys, setCurrentRow, setDropdownOpen, setSelectedKeys, stopFiltering, userInput } = PRIVATE_SelectCommon.useSelectCommon({
+        data,
+        inputRef,
+        isFocused: propIsFocused,
+        onFilter
+    });
+    // refs used by some of the effects below to determine whether the effect needs to run,
+    // for when the list of dependencies is longer than what we want the trigger to actually be
+    const prevDataRef = hooks.useRef(data);
+    const prevDropdownOpenRef = hooks.useRef(isDropdownOpen);
+    const prevSearchText = hooks.useRef(searchText);
+    const onCommit = hooks.useCallback((value) => {
+        propOnCommit?.({
+            value: value,
+            previousValue: valueItem !== undefined ? valueItem.key : undefined
+        });
+    }, [propOnCommit, valueItem]);
+    const clearValue = hooks.useCallback(() => {
+        setDropdownOpen(false);
+        setSelectedKeys(new Set());
+        // call the onCommit callback so that the consuming code can update the valueItem
+        onCommit(undefined);
+    }, [onCommit]);
+    const clearValueIfNeeded = hooks.useCallback(() => {
+        if (isUserFiltering && userInput === '' && valueItem !== undefined) {
+            clearValue();
+            return true;
+        }
+        return false;
+    }, [clearValue, isUserFiltering, userInput, valueItem]);
+    // when the field loses focus, check to see if we need to clear the value
+    hooks.useEffect(() => {
+        if (!isFocused) {
+            clearValueIfNeeded();
+        }
+        // only run when focus changes, at which point the current value of clearValueIfNeeded will
+        // be used
+    }, [isFocused]);
+    const focusInput = hooks.useCallback(() => {
+        inputRef.current?.focus();
+    }, []);
+    const removeDropdown = hooks.useCallback(() => {
+        dropdownRef.current?.parentElement?.removeChild(dropdownRef.current);
+    }, []);
+    const myHandleDropdownAutoDismiss = hooks.useCallback((event) => {
+        if (isDropdownOpen) {
+            if (event?.type === 'keydown') {
+                const keyboardEvent = event;
+                switch (keyboardEvent.code) {
+                    case PRIVATE_SelectCommon.KEYS.TAB:
+                        // if there is a currentRow in the dropdown, select it and commit it
+                        if (currentRow !== undefined && currentRow.rowKey !== undefined) {
+                            setSelectedKeys(new Set([currentRow.rowKey]));
+                            onCommit(currentRow.rowKey);
+                        }
+                        // Put focus on an element in the main field, but don't kill the event, so that
+                        // the browser can naturally transfer focus to the next focusable item relative
+                        // to the element in the main field.
+                        focusInput();
+                        // Remove the dropdown immediately, without waiting for a rerender based on changing
+                        // state, so that the open dropdown cannot get focus when the browser handles the
+                        // Tab key.
+                        removeDropdown();
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+    }, [currentRow, focusInput, isDropdownOpen, onCommit]);
+    const myHandleMainFieldKeyDown = hooks.useCallback((event) => {
+        // ignore control key and function key
+        if (PRIVATE_SelectCommon.isControlOrFunctionKey(event)) {
+            return;
+        }
+        switch (event.code) {
+            case PRIVATE_SelectCommon.KEYS.TAB:
+                // check whether we need to clear the value;
+                // if not, check whether we need to select the current item
+                const isValueClearedTab = clearValueIfNeeded();
+                if (!isValueClearedTab && isDropdownOpen && data != null && data.data.length > 0) {
+                    // if there is a currentRow in the dropdown (meaning a highlighted item that would
+                    // have keyboard focus if the dropdown list had physical focus, which may be different
+                    // from the currently selected item), select it and commit it;
+                    // otherwise commit the currently selected value again so that a valueAction event
+                    // will be fired
+                    if (currentRow !== undefined && currentRow.rowKey !== undefined) {
+                        setSelectedKeys(new Set([currentRow.rowKey]));
+                        onCommit(currentRow.rowKey);
+                    }
+                    else {
+                        onCommit(valueItem?.key ?? undefined);
+                    }
+                }
+                // Remove the dropdown immediately, without waiting for a rerender based on changing
+                // state, so that the open dropdown cannot get focus when the browser handles the
+                // Tab key.
+                removeDropdown();
+                setDropdownOpen(false);
+                break;
+            case PRIVATE_SelectCommon.KEYS.ENTER:
+                // check whether we need to clear the value;
+                // if not, check whether we need to select the current item
+                const isValueCleared = clearValueIfNeeded();
+                if (!isValueCleared && isDropdownOpen && data != null && data.data.length > 0) {
+                    setDropdownOpen(false);
+                    // after selecting a value, the user is no longer actively filtering, so update related
+                    // state accordingly so that the newly selected value appears in the field
+                    stopFiltering();
+                    // if there is a currentRow in the dropdown, select it and commit it;
+                    // otherwise commit the currently selected value again
+                    if (currentRow !== undefined && currentRow.rowKey !== undefined) {
+                        setSelectedKeys(new Set([currentRow.rowKey]));
+                        onCommit(currentRow.rowKey);
+                    }
+                    else {
+                        onCommit(valueItem?.key ?? undefined);
+                    }
+                }
+                break;
+            default:
+                break;
+        }
+    }, [clearValueIfNeeded, currentRow, data, isDropdownOpen, onCommit, valueItem]);
+    // when the valueItem changes, save the new selectedKeys
+    hooks.useEffect(() => {
+        setSelectedKeys(valueItem === undefined ? undefined : new Set([valueItem.key]));
+    }, [valueItem]);
+    const onItemAction = hooks.useCallback((detail) => {
+        focusInput();
+        setDropdownOpen(false);
+        // after selecting a value, the user is no longer actively filtering, so update related
+        // state accordingly so that the newly selected value appears in the field
+        stopFiltering();
+        const newKey = detail.context.metadata.key;
+        // update the selectedKeys so that the selection visual state of the collection
+        // updates immediately while waiting for a new valueItem to be set
+        setSelectedKeys(new Set([newKey]));
+        // call the onCommit callback so that the consuming code can update the valueItem
+        onCommit(newKey);
+    }, [focusInput, onCommit]);
+    hooks.useEffect(() => {
+        // only run this effect when data changes because we need to wait for the new set of
+        // filtered data to be set before highlighting the first result
+        if (data === prevDataRef.current) {
+            return;
+        }
+        // when filtering, set the first result of the filtered data set to be the current item
+        // (check the data offset so we don't try to highlight again if the user scrolls through
+        // the list and more data is fetched)
+        if (isDropdownOpen &&
+            isUserFiltering &&
+            data != null &&
+            data.offset === 0 &&
+            data.data.length > 0) {
+            // if there are results and search text, highlight the first row, otherwise clear
+            // an existing highlight
+            setCurrentRow({
+                rowKey: searchText !== undefined && searchText?.length > 0 ? data.data[0].metadata.key : undefined
+            });
+        }
+    }, [data, isDropdownOpen, isUserFiltering, searchText]);
+    hooks.useEffect(() => {
+        // only run this effect when the state of the dropdown changes
+        if (isDropdownOpen === prevDropdownOpenRef.current) {
+            return;
+        }
+        // clear the current item when the dropdown opens if there is no filter text
+        if (isDropdownOpen &&
+            (!isUserFiltering || searchText === undefined || searchText.length === 0)) {
+            setCurrentRow({ rowKey: undefined });
+        }
+    }, [isDropdownOpen, isUserFiltering, searchText]);
+    const dropdownEventHandlers = hooks.useMemo(() => {
+        return utils_UNSAFE_mergeProps.mergeProps({
+            onAutoDismiss: baseHandleDropdownAutoDismiss,
+            onPosition: handleDropdownPosition
+        }, { onAutoDismiss: myHandleDropdownAutoDismiss });
+    }, [baseHandleDropdownAutoDismiss, handleDropdownPosition, myHandleDropdownAutoDismiss]);
+    const inputEventHandlers = hooks.useMemo(() => {
+        return utils_UNSAFE_mergeProps.mergeProps({
+            onInput: handleInput,
+            onKeyDown: baseHandleMainFieldKeyDown,
+            onKeyUp: handleMainFieldKeyUp
+        }, { onKeyDown: myHandleMainFieldKeyDown });
+    }, [baseHandleMainFieldKeyDown, handleInput, handleMainFieldKeyUp, myHandleMainFieldKeyDown]);
+    // update refs used in some of the above effects in a useEffect on every render so that they
+    // update after the above effects run
+    hooks.useEffect(() => {
+        prevDataRef.current = data;
+        prevDropdownOpenRef.current = isDropdownOpen;
+        prevSearchText.current = searchText;
+    });
+    return {
+        collectionProps: {
+            currentKey: currentRow.rowKey,
+            onCurrentKeyChange,
+            onItemAction,
+            selectedKeys
+        },
+        dropdownArrowEventHandlers: {
+            onClick: handleDropdownArrowClick
+        },
+        dropdownEventHandlers,
+        dropdownRef,
+        inputEventHandlers,
+        inputRef,
+        isDropdownAbove,
+        isDropdownOpen,
+        isFocused,
+        isUserFiltering,
+        mainFieldRef,
+        mouseProps: isDisabled || isReadonly ? {} : { onMouseDown },
+        searchText,
+        userInput
+    };
+}
+
+/**
+ * A SelectSingle is a dropdown list that supports single selection and search filtering.
+ */
+const SelectSingle = compat.forwardRef(({ 'aria-describedby': ariaDescribedBy, assistiveText, data, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isLoading: propIsLoading, isReadonly: propIsReadonly, isRequired, isRequiredShown, itemText, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, messages, onCommit, onFilter, onLoadRange, placeholder, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, valueItem, variant = 'default', virtualKeyboard }, ref) => {
+    const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, textAlign: formTextAlign, userAssistanceDensity: formUserAssistanceDensity } = hooks_UNSAFE_useFormContext.useFormContext();
+    // default to FormContext values if component properties are not specified
+    const isDisabled = propIsDisabled ?? isFormDisabled;
+    const isReadonly = propIsReadonly ?? isFormReadonly;
+    const labelEdge = propLabelEdge ?? formLabelEdge;
+    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;
+    const textAlign = propTextAlign ?? formTextAlign;
+    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;
+    const { enabledElementRef, focusProps, isFocused: origIsFocused, readonlyElementRef } = hooks_UNSAFE_useFocusableTextField.useFocusableTextField({ isDisabled, isReadonly, ref });
+    const { collectionProps, dropdownArrowEventHandlers, dropdownEventHandlers, dropdownRef, inputEventHandlers, isDropdownAbove, isDropdownOpen, isFocused, isUserFiltering, mainFieldRef, mouseProps, searchText, userInput } = useSelectSingle({
+        data,
+        inputRef: enabledElementRef,
+        isDisabled,
+        isFocused: origIsFocused,
+        isReadonly,
+        onCommit,
+        onFilter,
+        valueItem
+    });
+    // The incoming propIsLoading tells us that we are in a loading state, but we don't want to
+    // show the loading indicator until after a delay, because showing it immediately could result
+    // in unwanted flashing.  The isLoading var below will be set to true by useLoadingIndicatorTimer
+    // after the delay, when the timer expires, at which point we should show the loading indicator.
+    // If propIsLoading is set to false before the timer expires, then the timer will be cancelled
+    // and no loading indicator will be shown.
+    // (ListView detects its loading state by checking data === null.  While it would be nice for
+    // us to be consistent and check valueItems === null, we need to use a separate isLoading prop.
+    // If valueItems === null triggers our loading state, then the selections in the dropdown
+    // are cleared for that period of time, which is undesirable.)
+    const isLoading = hooks_UNSAFE_useLoadingIndicatorTimer.useLoadingIndicatorTimer(propIsLoading ?? false);
+    const { baseId, formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = hooks_UNSAFE_useTextField.useTextField({
+        ariaDescribedBy,
+        helpSourceLink,
+        helpSourceText,
+        isDisabled,
+        isFocused,
+        isLoading,
+        isReadonly,
+        isRequiredShown,
+        labelEdge,
+        messages,
+        styleVariant: variant,
+        userAssistanceDensity,
+        value: valueItem !== undefined ? true : undefined
+    });
+    // JET-54256 - inside label animates up on initial display with selected value
+    // If we're waiting for the selected values to load, the component should look like it
+    // has a value in the meantime.
+    // Use the original propIsLoading instead of isLoading because we don't want to delay
+    // the inside label position by a timer like we do the progressive loading indicator.
+    formFieldContext.hasValue = propIsLoading || formFieldContext.hasValue;
+    const dropdownId = `${baseId}-dropdown`;
+    const displayValue = useDisplayValue(itemText, valueItem);
+    const labelComp = labelEdge !== 'none' ? jsxRuntime.jsx(Label.Label, { ...labelProps, children: label }) : undefined;
+    const fieldLabelProps = {
+        label: labelEdge !== 'none' ? labelComp : undefined,
+        labelEdge: labelEdge !== 'none' ? labelEdge : undefined,
+        labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined
+    };
+    const ariaLabel = labelEdge === 'none' ? label : undefined;
+    const isInlineDensity = userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';
+    const inlineUserAssistance = isInlineDensity ? (isDisabled || isReadonly ? (
+    // save space for user assistance if density is 'efficient', even though we don't
+    // render user assistance for disabled or readonly fields
+    userAssistanceDensity !== 'efficient' ? undefined : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, { userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity, ...userAssistanceProps }))) : undefined;
+    const compactUserAssistance = userAssistanceDensity === 'compact' ? (jsxRuntime.jsx(UNSAFE_UserAssistance.CompactUserAssistance, { anchorRef: mainFieldRef, messages: messages, assistiveText: assistiveText, ...userAssistanceProps })) : undefined;
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    if (isReadonly) {
+        return (jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, { value: formFieldContext, children: jsxRuntime.jsx(UNSAFE_TextField.ReadonlyTextField, { role: "presentation", compactUserAssistance: compactUserAssistance, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps.onfocusout, onFocus: focusProps.onfocusin, ref: mainFieldRef, ...fieldLabelProps, children: jsxRuntime.jsx(ReadonlyTextFieldInput.ReadonlyTextFieldInput, { "aria-describedby": inputProps['aria-describedby'], "aria-label": ariaLabel, "aria-labelledby": labelProps.id, as: "div", elementRef: readonlyElementRef, hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: label !== undefined && labelEdge === 'inside', textAlign: textAlign, value: displayValue }) }) }));
+    }
+    const isDataFetched = data !== undefined && data !== null && !PRIVATE_SelectCommon.isBeforeDataFetch(data);
+    const hasInsideLabel = labelComp !== undefined && labelEdge === 'inside';
+    const liveRegionText = isDropdownOpen && isDataFetched
+        ? data?.totalSize === 0
+            ? translations.select_noMatchesFound()
+            : data?.totalSize === 1
+                ? translations.select_oneMatchFound()
+                : data?.sizePrecision === 'exact'
+                    ? translations.select_sizeMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })
+                    : translations.select_sizeOrMoreMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })
+        : '';
+    const mainContent = (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(TextFieldInput.TextFieldInput, { "aria-autocomplete": "list", "aria-controls": dropdownId, "aria-expanded": isDropdownOpen, "aria-label": ariaLabel, autoComplete: "off", hasEmptyLabel: label === '' && labelEdge === 'none', hasInsideLabel: hasInsideLabel, inputRef: enabledElementRef, isRequired: isRequired, ...inputEventHandlers, placeholder: placeholder, role: "combobox", spellcheck: false, textAlign: textAlign, type: PRIVATE_SelectCommon.isMobile() ? (virtualKeyboard === 'auto' ? 'search' : virtualKeyboard) : undefined, value: isUserFiltering ? userInput : displayValue, ...inputProps }), jsxRuntime.jsx(UNSAFE_LiveRegion.LiveRegion, { children: liveRegionText })] }));
+    const dropdownArrow = (jsxRuntime.jsx(PRIVATE_SelectCommon.DropdownArrow, { isDisabled: isDisabled, size: hasInsideLabel ? 'md' : 'sm', ...dropdownArrowEventHandlers }));
+    const dropdownInlineUserAssistance = isDropdownOpen &&
+        !isDropdownAbove &&
+        !isDisabled &&
+        !isReadonly &&
+        (assistiveText || helpSourceLink) &&
+        (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (jsxRuntime.jsx(PRIVATE_SelectCommon.DropdownUserAssistance, { assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, userAssistanceDensity: userAssistanceDensity })) : undefined;
+    const isEmptyResults = isDataFetched && data?.totalSize === 0;
+    const dropdownListContent = isEmptyResults ? (jsxRuntime.jsx(PRIVATE_SelectCommon.EmptyResults, {})) : (jsxRuntime.jsx(PRIVATE_SelectCommon.DefaultList, { ...collectionProps, "aria-label": label ?? '', currentItemVariant: "highlight", data: data, itemText: itemText, onLoadRange: onLoadRange, searchText: isUserFiltering ? searchText : undefined, selectionMode: "single" }));
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, { value: formFieldContext, children: jsxRuntime.jsx(UNSAFE_TextField.TextField, { compactUserAssistance: compactUserAssistance, endContent: isLoading ? undefined : dropdownArrow, inlineUserAssistance: inlineUserAssistance, mainContent: mainContent, mainFieldRef: mainFieldRef, onBlur: focusProps?.onfocusout, onFocus: focusProps?.onfocusin, ...textFieldProps, ...fieldLabelProps, ...mouseProps }) }), jsxRuntime.jsxs(PRIVATE_SelectCommon.Dropdown, { dropdownRef: dropdownRef, id: dropdownId, isOpen: isDropdownOpen &&
+                    data !== undefined &&
+                    (data === null || data.totalSize > 0 || PRIVATE_SelectCommon.isBeforeDataFetch(data) || isEmptyResults), anchorRef: mainFieldRef, ...dropdownEventHandlers, children: [jsxRuntime.jsx(PRIVATE_SelectCommon.DropdownList, { hasBottomGap: dropdownInlineUserAssistance === undefined, isLoading: data === null, children: dropdownListContent }), dropdownInlineUserAssistance] })] }));
+});
+
+exports.SelectSingle = SelectSingle;
+//# sourceMappingURL=SelectSingle-258f0ffd.js.map