@oracle/oraclejet-preact 21.0.0 → 21.0.1

package/cjs/UNSAFE_TextAreaAutosize.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_TextAreaAutosize.js","sources":["../../src/UNSAFE_TextAreaAutosize/ScrollHeightUtils.tsx","../../src/UNSAFE_TextAreaAutosize/useTextAreaAutosizing.tsx","../../src/UNSAFE_TextAreaAutosize/TextAreaAutosize.tsx"],"sourcesContent":["// returns the lineHeight as a number of pixels.\nexport const calculateLineHeight = (textarea: HTMLTextAreaElement): number => {\n  const computedStyle = window.getComputedStyle(textarea);\n  const computedlineHeight = computedStyle.lineHeight;\n  if (computedlineHeight === 'normal') {\n    // We get 'normal' for values 'initial', 'inherit', 'unset' and 'normal'\n    // TODO: Unclear if we need this.\n    // getComputedStyle always return fontSize in pixels.  Not likely a float, but since it's legal\n    // we use parseFloat()\n    const fontSize = parseFloat(computedStyle.fontSize);\n    return 1.2 * fontSize;\n  }\n  return parseFloat(computedlineHeight);\n};\nexport const getStylingHeight = (textarea: HTMLTextAreaElement) => {\n  const cssStyle = window.getComputedStyle(textarea);\n  const paddingTop = parseFloat(cssStyle.paddingTop);\n  const paddingBottom = parseFloat(cssStyle.paddingBottom);\n  const borderTop = parseFloat(cssStyle.borderTop);\n  const borderBottom = parseFloat(cssStyle.borderBottom);\n  return { paddingHeight: paddingTop + paddingBottom, borderHeight: borderTop + borderBottom };\n};\n","import type { ComponentProps, RefObject } from 'preact';\nimport { useLayoutEffect } from 'preact/hooks';\nimport { calculateLineHeight, getStylingHeight } from './ScrollHeightUtils';\nimport { TextAreaAutosize } from './TextAreaAutosize';\n\ntype PickedPropsFromTextAreaAutosize = Pick<\n  ComponentProps<typeof TextAreaAutosize>,\n  'minRows' | 'maxRows' | 'value'\n>;\ntype Props = PickedPropsFromTextAreaAutosize & {\n  isReadonly?: boolean;\n  enabledElementRef: RefObject<HTMLTextAreaElement>;\n  readonlyElementRef: RefObject<HTMLTextAreaElement | HTMLDivElement>;\n};\n\n// TODO: Make this fire when the container resizes - JET-50840\nexport const useTextAreaAutosizing = ({\n  isReadonly,\n  enabledElementRef,\n  readonlyElementRef,\n  minRows = 2,\n  maxRows,\n  value\n}: Props) => {\n  useLayoutEffect(() => {\n    const textareaRef = isReadonly ? readonlyElementRef : enabledElementRef;\n    if (textareaRef.current === null) return;\n    if (textareaRef.current instanceof HTMLDivElement) return; // We don't need to do anything if the readonlyElement is a DIV.\n    const textarea = textareaRef.current;\n    const lineHeight = calculateLineHeight(textarea);\n    textarea.style.height = '0';\n    const { paddingHeight, borderHeight } = getStylingHeight(textarea);\n    const heightForMinRows = lineHeight * minRows + paddingHeight + borderHeight;\n    const scrollHeight = textarea.scrollHeight + borderHeight;\n    let resizedHeight = 0;\n    // if maxRows is -1 the textarea will grow or shrink to fit all the content.\n    // it won't shrink any less than rows.\n    if (maxRows === undefined) {\n      // we want to fit the entire scrollHeight, but we don't want\n      // to shrink smaller than the height for rows.\n      if (scrollHeight < heightForMinRows) {\n        resizedHeight = heightForMinRows;\n      } else {\n        resizedHeight = scrollHeight;\n      }\n    } else if (maxRows > minRows) {\n      // if maxRows is positive and greater than rows, the textarea will grow to fit the content\n      // up to maxrows, or shrink to fit the content and down to rows.\n      const heightForMaxRows = lineHeight * maxRows + paddingHeight + borderHeight;\n      if (scrollHeight > heightForMaxRows) {\n        resizedHeight = heightForMaxRows;\n      } else if (scrollHeight < heightForMinRows) {\n        resizedHeight = heightForMinRows;\n      } else {\n        resizedHeight = scrollHeight;\n      }\n    } else {\n      resizedHeight = heightForMinRows;\n    }\n    // The 0.5 gaurantees that the clientHeight will be bigger than the scrollHeight, so no scrollbar appears.\n    textarea.style.height = resizedHeight + 0.5 + 'px';\n  }, [value, minRows, maxRows, isReadonly, enabledElementRef, readonlyElementRef]);\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, Ref } from 'preact';\nimport { forwardRef, useCallback } from 'preact/compat';\n\nimport { EmbeddedInputBase, InputBase, useInputBase } from '#PRIVATE_InputBase';\nimport { useCurrentValueReducer } from '#hooks/UNSAFE_useCurrentValueReducer';\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { CountUnit, useLengthFilter } from '#hooks/UNSAFE_useLengthFilter';\nimport { SelectableHandle } from '#hooks/UNSAFE_useSelectableTextField';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { ComponentMessageItem } from '#UNSAFE_ComponentMessage';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { MaxLengthCounter } from '#UNSAFE_TextArea';\nimport { useTextAreaAltEnter } from '#UNSAFE_TextArea/useTextAreaAltEnter';\nimport {\n  MaxLengthLiveRegion,\n  ReadonlyTextFieldInput,\n  TextField,\n  TextFieldInput\n} from '#UNSAFE_TextField';\nimport type { InlineUserAssistance, UserAssistanceDensityType } from '#UNSAFE_UserAssistance';\nimport { defaultTextAlignForVariant, isEmbeddedVariant } from '#utils/PRIVATE_formControlUtils';\nimport { Size } from '#utils/UNSAFE_size';\nimport { LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { classNames as combineIds } from '#utils/UNSAFE_classNames';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { useTextAreaAutosizing } from './useTextAreaAutosizing';\n\ntype TextFieldInputProps = ComponentProps<typeof TextFieldInput>;\ntype TextFieldProps = ComponentProps<typeof TextField>;\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype Props = TestIdProps & {\n  /**\n   * The ID of an element (or space separated IDs of multiple elements) that\n   * describes the input.\n   */\n  'aria-describedby'?: TextFieldInputProps['aria-describedby'];\n  /**\n   * Text to provide guidance to help the user understand what to enter.\n   */\n  assistiveText?: InlineUserAssistanceProps['assistiveText'];\n  /**\n   * Dictates component's autocomplete state.\n   * This attribute indicates whether the value of the control can be automatically completed by the browser.\n   * The common values are \"on\" and \"off\".\n   */\n  autoComplete?: TextFieldInputProps['autoComplete'];\n  /**\n   * Autofocus specifies whether the component will get focus when the page is loaded.\n   * If it is set to true then the associated component will get input focus when the page is loaded.\n   * Setting this property doesn't set the focus to the component; it tells the browser to focus\n   * to it when the element is inserted in the document.\n   */\n  autoFocus?: TextFieldInputProps['autoFocus'];\n  /**\n   * Specifies the AI bloom visual treatment.\n   * Bloom is suppressed when the component is disabled, readonly, embedded, or showing\n   * error or warning messages.\n   */\n  blooming?: TextFieldProps['blooming'];\n  /**\n   * Specifies how many columns to span in a FormLayout with direction === 'row'\n   */\n  columnSpan?: LayoutColumnSpan;\n  /**\n   * Help source URL associated with the component.\n   */\n  helpSourceLink?: InlineUserAssistanceProps['helpSourceLink'];\n  /**\n   * Custom text to be rendered for the <code>helpSourceLink</code>.\n   */\n  helpSourceText?: InlineUserAssistanceProps['helpSourceText'];\n  /**\n   * Specifies whether the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Specifies whether the component is readonly.\n   */\n  isReadonly?: boolean;\n  /**\n   * Specifies for accessibility purposes whether a value is required.\n   *\n   * Setting this property to <code>false</code> means that a value is not required to be\n   * committed by the user.  Setting this property to <code>true</code> means that a value\n   * is required to be committed by the user.\n   */\n  isRequired?: TextFieldInputProps['isRequired'];\n  /**\n   * Specifies whether to show an indicator on screen that a value is required, for example\n   * before the user has committed a value.\n   */\n  isRequiredShown?: InlineUserAssistanceProps['isRequiredShown'];\n  /**\n   * Specifies the label associated with the field.\n   */\n  label: string;\n  /**\n   * Specifies where the label is positioned relative to the field.\n   */\n  labelEdge?: 'inside' | 'start' | 'top' | 'none';\n  /**\n   * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>\n   */\n  labelStartWidth?: Size;\n  /**\n   * Specifies the maximum number of characters that can be entered in the input field.\n   */\n  maxLength?: number;\n  /**\n   * Determines whether the remaining number of characters that can be entered is shown or not.\n   */\n  maxLengthCounter?: 'none' | 'remaining';\n  /**\n   * Specifies how the input text characters are to be counted when maxLength is specified.\n   */\n  maxLengthUnit?: CountUnit;\n  /**\n   * Specifies the maximum number of rows that the TextAreaAutosize is allowed to grow to.\n   * If maxRows is less than minRows, it is ignored.\n   */\n  maxRows?: number;\n  /**\n   * Messages to show on screen that are associated with the component.\n   */\n  messages?: InlineUserAssistanceProps['messages'];\n  /**\n   * Specifies the minimum number of rows that the TextAreaAutosize is allowed to shrink to.\n   */\n  minRows?: number;\n  /**\n   * A short hint to display before the user enters a value.\n   */\n  placeholder?: TextFieldInputProps['placeholder'];\n  /**\n   * Specifies how the user is allowed to manually resize the TextArea component.\n   */\n  role?: TextFieldInputProps['role'];\n  /**\n   * Specifies the number of rows to display\n   */\n  textAlign?: TextFieldInputProps['textAlign'];\n  /**\n   * Specifies the density of the user assistance presentation. It can be set to:\n   * <ul>\n   * <li><code>'efficient'</code>: Show inline and reserve space to prevent layout reflow when user\n   * assistance text is displayed.</li>\n   * <li><code>'reflow'</code>: Show inline. Layout will reflow when text is displayed.</li>\n   * <li><code>'compact'</code>: Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required. </li>\n   * </ul>\n   */\n  userAssistanceDensity?: UserAssistanceDensityType;\n  /**\n   * The current display value of the component.\n   */\n  value?: TextFieldInputProps['value'];\n  /**\n   * The style variant of the component.\n   */\n  variant?: TextFieldInputProps['variant'];\n  /**\n   * Callback invoked when the user commits the entered value by blurring out of the field.\n   *\n   */\n  onCommit?: TextFieldInputProps['onCommit'];\n\n  /**\n   * Callback invoked when the user inputs a value.\n   *\n   */\n  onInput: TextFieldInputProps['onInput'];\n};\ntype FocusSelectHandle = FocusableHandle & SelectableHandle;\n/**\n * A text area auto size displays a field that allows a user to enter a multi-line text value, and will adjust its height based on its content.\n */\nexport const TextAreaAutosize = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      autoComplete = 'off',\n      autoFocus = false,\n      blooming = 'off',\n      columnSpan,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequired = false,\n      isRequiredShown,\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      maxLength,\n      maxLengthCounter = 'remaining',\n      maxLengthUnit,\n      maxRows,\n      messages,\n      minRows = 2,\n      placeholder,\n      role,\n      //TODO: Add counter to show the length remaining - JET-50752\n      textAlign: propTextAlign,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value,\n      variant = 'default',\n      onInput,\n      onCommit,\n      testId\n    }: Props,\n    ref?: Ref<FocusSelectHandle>\n  ) => {\n    const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const formControl_limitReached = maxLength\n      ? translations.formControl_limitReached({\n          CHARACTER_LIMIT: maxLength\n        })\n      : '';\n    const { isReadonly: formIsReadonly } = useFormContext();\n    const isReadonlyForMessages = propIsReadonly ?? formIsReadonly ?? false;\n    const { currentCommitValue, dispatch } = useCurrentValueReducer({ value });\n    const onInputAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<string>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'input', payload: detail.value });\n        onInput?.(detail);\n      },\n      [onInput, dispatch]\n    );\n    const onCommitAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<string>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'commit', payload: detail.value });\n        onCommit?.(detail);\n      },\n      [onCommit, dispatch]\n    );\n\n    const maxLengthDescribedById = useId();\n\n    // Handle length filter for user-typed inputs and controlled inputs\n    const { isMaxLengthExceeded, isMaxLengthReached, valueLength, onFilteredInput } =\n      useLengthFilter({\n        maxLength,\n        maxLengthUnit,\n        value,\n        onInput: onInputAndDispatch,\n        onCommit: onCommitAndDispatch\n      });\n\n    const limitMessage = [{ detail: formControl_limitReached, severity: 'info' }];\n    const allMessages = [\n      ...(messages ?? []),\n      // Readonly fields cannot be edited, so suppress the generated max-length\n      // limit message for readonly.\n      ...(isMaxLengthReached && !isReadonlyForMessages ? limitMessage : [])\n    ] as ComponentMessageItem[];\n\n    // `useInputBase` owns the shared textarea autosize shell while the autosizing and counter\n    // behavior stay here because they are specific to textarea content measurement and editing.\n    const base = useInputBase<\n      HTMLTextAreaElement,\n      HTMLTextAreaElement | HTMLDivElement,\n      string | undefined\n    >({\n      assistiveText,\n      ariaDescribedBy,\n      columnSpan,\n      contentVariant: 'textarea',\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequiredShown,\n      isSelectable: true,\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      messages: allMessages,\n      textAlign: propTextAlign,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value,\n      variant\n    });\n\n    const {\n      isDisabled,\n      isReadonly,\n      labelEdge,\n      textAlign = defaultTextAlignForVariant(variant)\n    } = base;\n    const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n    // We want to have alt/option+Enter to insert a newline like Enter does.\n    const { handleKeyDown } = useTextAreaAltEnter({\n      onInput: onInputAndDispatch,\n      textAreaRef: base.enabledElementRef\n    });\n\n    const onClickCounter = useCallback(() => {\n      const elm = base.enabledElementRef.current;\n      // for setSelectionRange(), len needs to be a number or null.\n      const len = elm ? elm.value.length : null;\n      // Since the counter element is after the text, clicking in this\n      // should put the selection at the end of the text\n      base.enabledElementRef.current?.setSelectionRange(len, len);\n      // Clicking the counter should put the focus on the input field\n      base.enabledElementRef.current?.focus();\n    }, [base.enabledElementRef]);\n\n    useTextAreaAutosizing({\n      isReadonly,\n      enabledElementRef: base.enabledElementRef,\n      readonlyElementRef: base.readonlyElementRef,\n      minRows,\n      maxRows,\n      value\n    });\n    const hasMaxLength = maxLength !== undefined;\n    const shouldAnnounceMaxLength = hasMaxLength && !isReadonly && !isDisabled;\n    const { 'aria-describedby': inputAriaDescribedBy, ...inputPropsRest } = base.inputProps;\n    // Autosize normally grows to fit content and does not need a reserved scrollbar gutter. When\n    // maxRows caps growth, reserve the gutter even when bloom is off or currently suppressed so\n    // the scrollport does not visibly move if bloom is toggled dynamically.\n    const hasTextAreaScrollbarInset = maxRows !== undefined && !isEmbeddedVariant(variant);\n\n    const mainContent = (\n      <>\n        <TextFieldInput\n          as=\"textarea\"\n          aria-describedby={\n            combineIds([inputAriaDescribedBy, shouldAnnounceMaxLength && maxLengthDescribedById]) ||\n            undefined\n          }\n          aria-label={base.ariaLabel}\n          autoComplete={autoComplete}\n          autoFocus={autoFocus}\n          currentCommitValue={currentCommitValue}\n          hasEmptyLabel={label === '' && labelEdge === 'none'}\n          hasInsideLabel={hasInsideLabel}\n          hasTextAreaScrollbarInset={hasTextAreaScrollbarInset}\n          isRequired={isRequired}\n          inputRef={base.enabledElementRef}\n          onCommit={onCommitAndDispatch}\n          onInput={onFilteredInput}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          role={role}\n          rows={minRows}\n          textAlign={textAlign}\n          value={value}\n          {...inputPropsRest}\n        />\n        {maxLengthCounter === 'remaining' && hasMaxLength && (\n          <MaxLengthCounter\n            maxLength={maxLength}\n            valueLength={valueLength}\n            onClick={onClickCounter}\n          />\n        )}\n        {hasMaxLength && (\n          <HiddenAccessible id={maxLengthDescribedById}>\n            {translations.formControl_maxLength({\n              MAX_LENGTH: `${maxLength}`\n            })}\n          </HiddenAccessible>\n        )}\n        {hasMaxLength && base.isFocused && (\n          <MaxLengthLiveRegion\n            isMaxLengthExceeded={isMaxLengthExceeded}\n            maxLength={maxLength}\n            valueLength={valueLength}\n            testId={testId ? testId + '_maxLength' : undefined}\n          />\n        )}\n      </>\n    );\n\n    // Keep the readonly element-type decision local because autosize determines whether readonly\n    // should measure a textarea or render a plain div when maxRows is not specified.\n    const readonlyMainContent = (\n      <ReadonlyTextFieldInput\n        aria-describedby={base.inputProps['aria-describedby']}\n        aria-label={base.ariaLabel}\n        aria-labelledby={base.labelProps.id}\n        autoFocus={autoFocus}\n        elementRef={base.readonlyElementRef}\n        formVariant={variant}\n        {...(maxRows ? { as: 'textarea', rows: minRows } : { as: 'div' })}\n        onBlur={base.inputProps.onBlur}\n        onFocus={base.inputProps.onFocus}\n        textAlign={textAlign}\n        value={value}\n        variant=\"textarea\"\n        hasEmptyLabel={label === '' && labelEdge === 'none'}\n        hasInsideLabel={hasInsideLabel}\n      />\n    );\n\n    const inputBaseProps = {\n      ref,\n      base,\n      mainContent,\n      readonlyMainContent,\n      testId\n    };\n\n    return isEmbeddedVariant(variant) ? (\n      <EmbeddedInputBase {...inputBaseProps} />\n    ) : (\n      <InputBase {...inputBaseProps} blooming={blooming} />\n    );\n  }\n);\n"],"names":["useLayoutEffect","forwardRef","useTranslationBundle","useFormContext","useCurrentValueReducer","useCallback","useId","useLengthFilter","useInputBase","defaultTextAlignForVariant","useTextAreaAltEnter","isEmbeddedVariant","_jsxs","_Fragment","_jsx","TextFieldInput","combineIds","MaxLengthCounter","HiddenAccessible","MaxLengthLiveRegion","ReadonlyTextFieldInput","EmbeddedInputBase","InputBase"],"mappings":"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"}
+{"version":3,"file":"UNSAFE_TextAreaAutosize.js","sources":["../../src/UNSAFE_TextAreaAutosize/ScrollHeightUtils.tsx","../../src/UNSAFE_TextAreaAutosize/useTextAreaAutosizing.tsx","../../src/UNSAFE_TextAreaAutosize/TextAreaAutosize.tsx"],"sourcesContent":["// returns the lineHeight as a number of pixels.\nexport const calculateLineHeight = (textarea: HTMLTextAreaElement): number => {\n  const computedStyle = window.getComputedStyle(textarea);\n  const computedlineHeight = computedStyle.lineHeight;\n  if (computedlineHeight === 'normal') {\n    // We get 'normal' for values 'initial', 'inherit', 'unset' and 'normal'\n    // TODO: Unclear if we need this.\n    // getComputedStyle always return fontSize in pixels.  Not likely a float, but since it's legal\n    // we use parseFloat()\n    const fontSize = parseFloat(computedStyle.fontSize);\n    return 1.2 * fontSize;\n  }\n  return parseFloat(computedlineHeight);\n};\nexport const getStylingHeight = (textarea: HTMLTextAreaElement) => {\n  const cssStyle = window.getComputedStyle(textarea);\n  const paddingTop = parseFloat(cssStyle.paddingTop);\n  const paddingBottom = parseFloat(cssStyle.paddingBottom);\n  const borderTop = parseFloat(cssStyle.borderTop);\n  const borderBottom = parseFloat(cssStyle.borderBottom);\n  return { paddingHeight: paddingTop + paddingBottom, borderHeight: borderTop + borderBottom };\n};\n","import type { ComponentProps, RefObject } from 'preact';\nimport { useLayoutEffect } from 'preact/hooks';\nimport { calculateLineHeight, getStylingHeight } from './ScrollHeightUtils';\nimport { TextAreaAutosize } from './TextAreaAutosize';\n\ntype PickedPropsFromTextAreaAutosize = Pick<\n  ComponentProps<typeof TextAreaAutosize>,\n  'minRows' | 'maxRows' | 'value'\n>;\ntype Props = PickedPropsFromTextAreaAutosize & {\n  isReadonly?: boolean;\n  enabledElementRef: RefObject<HTMLTextAreaElement>;\n  readonlyElementRef: RefObject<HTMLTextAreaElement | HTMLDivElement>;\n};\n\n// TODO: Make this fire when the container resizes - JET-50840\nexport const useTextAreaAutosizing = ({\n  isReadonly,\n  enabledElementRef,\n  readonlyElementRef,\n  minRows = 2,\n  maxRows,\n  value\n}: Props) => {\n  useLayoutEffect(() => {\n    const textareaRef = isReadonly ? readonlyElementRef : enabledElementRef;\n    if (textareaRef.current === null) return;\n    if (textareaRef.current instanceof HTMLDivElement) return; // We don't need to do anything if the readonlyElement is a DIV.\n    const textarea = textareaRef.current;\n    const lineHeight = calculateLineHeight(textarea);\n    textarea.style.height = '0';\n    const { paddingHeight, borderHeight } = getStylingHeight(textarea);\n    const heightForMinRows = lineHeight * minRows + paddingHeight + borderHeight;\n    const scrollHeight = textarea.scrollHeight + borderHeight;\n    let resizedHeight = 0;\n    // if maxRows is -1 the textarea will grow or shrink to fit all the content.\n    // it won't shrink any less than rows.\n    if (maxRows === undefined) {\n      // we want to fit the entire scrollHeight, but we don't want\n      // to shrink smaller than the height for rows.\n      if (scrollHeight < heightForMinRows) {\n        resizedHeight = heightForMinRows;\n      } else {\n        resizedHeight = scrollHeight;\n      }\n    } else if (maxRows > minRows) {\n      // if maxRows is positive and greater than rows, the textarea will grow to fit the content\n      // up to maxrows, or shrink to fit the content and down to rows.\n      const heightForMaxRows = lineHeight * maxRows + paddingHeight + borderHeight;\n      if (scrollHeight > heightForMaxRows) {\n        resizedHeight = heightForMaxRows;\n      } else if (scrollHeight < heightForMinRows) {\n        resizedHeight = heightForMinRows;\n      } else {\n        resizedHeight = scrollHeight;\n      }\n    } else {\n      resizedHeight = heightForMinRows;\n    }\n    // The 0.5 gaurantees that the clientHeight will be bigger than the scrollHeight, so no scrollbar appears.\n    textarea.style.height = resizedHeight + 0.5 + 'px';\n  }, [value, minRows, maxRows, isReadonly, enabledElementRef, readonlyElementRef]);\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, Ref } from 'preact';\nimport { forwardRef, useCallback } from 'preact/compat';\n\nimport { EmbeddedInputBase, InputBase, useInputBase } from '#PRIVATE_InputBase';\nimport { useCurrentValueReducer } from '#hooks/UNSAFE_useCurrentValueReducer';\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { CountUnit, useLengthFilter } from '#hooks/UNSAFE_useLengthFilter';\nimport { SelectableHandle } from '#hooks/UNSAFE_useSelectableTextField';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { ComponentMessageItem } from '#UNSAFE_ComponentMessage';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { MaxLengthCounter } from '#UNSAFE_TextArea';\nimport { useTextAreaAltEnter } from '#UNSAFE_TextArea/useTextAreaAltEnter';\nimport {\n  MaxLengthLiveRegion,\n  ReadonlyTextFieldInput,\n  TextField,\n  TextFieldInput\n} from '#UNSAFE_TextField';\nimport type { InlineUserAssistance, UserAssistanceDensityType } from '#UNSAFE_UserAssistance';\nimport { defaultTextAlignForVariant, isEmbeddedVariant } from '#utils/PRIVATE_formControlUtils';\nimport { Size } from '#utils/UNSAFE_size';\nimport { LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { classNames as combineIds } from '#utils/UNSAFE_classNames';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { useTextAreaAutosizing } from './useTextAreaAutosizing';\n\ntype TextFieldInputProps = ComponentProps<typeof TextFieldInput>;\ntype TextFieldProps = ComponentProps<typeof TextField>;\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype Props = TestIdProps & {\n  /**\n   * The ID of an element (or space separated IDs of multiple elements) that\n   * describes the input.\n   */\n  'aria-describedby'?: TextFieldInputProps['aria-describedby'];\n  /**\n   * Text to provide guidance to help the user understand what to enter.\n   */\n  assistiveText?: InlineUserAssistanceProps['assistiveText'];\n  /**\n   * Dictates component's autocomplete state.\n   * This attribute indicates whether the value of the control can be automatically completed by the browser.\n   * The common values are \"on\" and \"off\".\n   */\n  autoComplete?: TextFieldInputProps['autoComplete'];\n  /**\n   * Autofocus specifies whether the component will get focus when the page is loaded.\n   * If it is set to true then the associated component will get input focus when the page is loaded.\n   * Setting this property doesn't set the focus to the component; it tells the browser to focus\n   * to it when the element is inserted in the document.\n   */\n  autoFocus?: TextFieldInputProps['autoFocus'];\n  /**\n   * Specifies the AI bloom visual treatment.\n   * Bloom is suppressed when the component is disabled, readonly, embedded, or showing\n   * error or warning messages.\n   */\n  blooming?: TextFieldProps['blooming'];\n  /**\n   * Specifies how many columns to span in a FormLayout with direction === 'row'\n   */\n  columnSpan?: LayoutColumnSpan;\n  /**\n   * Help source URL associated with the component.\n   */\n  helpSourceLink?: InlineUserAssistanceProps['helpSourceLink'];\n  /**\n   * Custom text to be rendered for the <code>helpSourceLink</code>.\n   */\n  helpSourceText?: InlineUserAssistanceProps['helpSourceText'];\n  /**\n   * Specifies whether the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Specifies whether the component is readonly.\n   */\n  isReadonly?: boolean;\n  /**\n   * Specifies for accessibility purposes whether a value is required.\n   *\n   * Setting this property to <code>false</code> means that a value is not required to be\n   * committed by the user.  Setting this property to <code>true</code> means that a value\n   * is required to be committed by the user.\n   */\n  isRequired?: TextFieldInputProps['isRequired'];\n  /**\n   * Specifies whether to show an indicator on screen that a value is required, for example\n   * before the user has committed a value.\n   */\n  isRequiredShown?: InlineUserAssistanceProps['isRequiredShown'];\n  /**\n   * Specifies the label associated with the field.\n   */\n  label: string;\n  /**\n   * Specifies where the label is positioned relative to the field.\n   */\n  labelEdge?: 'inside' | 'start' | 'top' | 'none';\n  /**\n   * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>\n   */\n  labelStartWidth?: Size;\n  /**\n   * Specifies the maximum number of characters that can be entered in the input field.\n   */\n  maxLength?: number;\n  /**\n   * Determines whether the remaining number of characters that can be entered is shown or not.\n   */\n  maxLengthCounter?: 'none' | 'remaining';\n  /**\n   * Specifies how the input text characters are to be counted when maxLength is specified.\n   */\n  maxLengthUnit?: CountUnit;\n  /**\n   * Specifies the maximum number of rows that the TextAreaAutosize is allowed to grow to.\n   * If maxRows is less than minRows, it is ignored.\n   */\n  maxRows?: number;\n  /**\n   * Messages to show on screen that are associated with the component.\n   */\n  messages?: InlineUserAssistanceProps['messages'];\n  /**\n   * Specifies the minimum number of rows that the TextAreaAutosize is allowed to shrink to.\n   */\n  minRows?: number;\n  /**\n   * A short hint to display before the user enters a value.\n   */\n  placeholder?: TextFieldInputProps['placeholder'];\n  /**\n   * Specifies how the user is allowed to manually resize the TextArea component.\n   */\n  role?: TextFieldInputProps['role'];\n  /**\n   * Specifies the number of rows to display\n   */\n  textAlign?: TextFieldInputProps['textAlign'];\n  /**\n   * Specifies the density of the user assistance presentation. It can be set to:\n   * <ul>\n   * <li><code>'efficient'</code>: Show inline and reserve space to prevent layout reflow when user\n   * assistance text is displayed.</li>\n   * <li><code>'reflow'</code>: Show inline. Layout will reflow when text is displayed.</li>\n   * <li><code>'compact'</code>: Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required. </li>\n   * </ul>\n   */\n  userAssistanceDensity?: UserAssistanceDensityType;\n  /**\n   * The current display value of the component.\n   */\n  value?: TextFieldInputProps['value'];\n  /**\n   * The style variant of the component.\n   */\n  variant?: TextFieldInputProps['variant'];\n  /**\n   * Callback invoked when the user commits the entered value by blurring out of the field.\n   *\n   */\n  onCommit?: TextFieldInputProps['onCommit'];\n\n  /**\n   * Callback invoked when the user inputs a value.\n   *\n   */\n  onInput: TextFieldInputProps['onInput'];\n};\ntype FocusSelectHandle = FocusableHandle & SelectableHandle;\n/**\n * A text area auto size displays a field that allows a user to enter a multi-line text value, and will adjust its height based on its content.\n */\nexport const TextAreaAutosize = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      autoComplete = 'off',\n      autoFocus = false,\n      blooming = 'off',\n      columnSpan,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequired = false,\n      isRequiredShown,\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      maxLength,\n      maxLengthCounter = 'remaining',\n      maxLengthUnit,\n      maxRows,\n      messages,\n      minRows = 2,\n      placeholder,\n      role,\n      //TODO: Add counter to show the length remaining - JET-50752\n      textAlign: propTextAlign,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value,\n      variant = 'default',\n      onInput,\n      onCommit,\n      testId\n    }: Props,\n    ref?: Ref<FocusSelectHandle>\n  ) => {\n    const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const formControl_limitReached = maxLength\n      ? translations.formControl_limitReached({\n          CHARACTER_LIMIT: maxLength\n        })\n      : '';\n    const { isReadonly: formIsReadonly } = useFormContext();\n    const isReadonlyForMessages = propIsReadonly ?? formIsReadonly ?? false;\n    const { currentCommitValue, dispatch } = useCurrentValueReducer({ value });\n    const onInputAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<string>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'input', payload: detail.value });\n        onInput?.(detail);\n      },\n      [onInput, dispatch]\n    );\n    const onCommitAndDispatch = useCallback(\n      (detail: ValueUpdateDetail<string>) => {\n        // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n        dispatch({ type: 'commit', payload: detail.value });\n        onCommit?.(detail);\n      },\n      [onCommit, dispatch]\n    );\n\n    const maxLengthDescribedById = useId();\n\n    // Handle length filter for user-typed inputs and controlled inputs\n    const { isMaxLengthExceeded, isMaxLengthReached, valueLength, onFilteredInput } =\n      useLengthFilter({\n        maxLength,\n        maxLengthUnit,\n        value,\n        onInput: onInputAndDispatch,\n        onCommit: onCommitAndDispatch\n      });\n\n    const limitMessage = [{ detail: formControl_limitReached, severity: 'info' }];\n    const allMessages = [\n      ...(messages ?? []),\n      // Readonly fields cannot be edited, so suppress the generated max-length\n      // limit message for readonly.\n      ...(isMaxLengthReached && !isReadonlyForMessages ? limitMessage : [])\n    ] as ComponentMessageItem[];\n\n    // `useInputBase` owns the shared textarea autosize shell while the autosizing and counter\n    // behavior stay here because they are specific to textarea content measurement and editing.\n    const base = useInputBase<\n      HTMLTextAreaElement,\n      HTMLTextAreaElement | HTMLDivElement,\n      string | undefined\n    >({\n      assistiveText,\n      ariaDescribedBy,\n      columnSpan,\n      contentVariant: 'textarea',\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequiredShown,\n      isSelectable: true,\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      messages: allMessages,\n      textAlign: propTextAlign,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value,\n      variant\n    });\n\n    const {\n      isDisabled,\n      isReadonly,\n      labelEdge,\n      textAlign = defaultTextAlignForVariant(variant)\n    } = base;\n    const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n    // We want to have alt/option+Enter to insert a newline like Enter does.\n    const { handleKeyDown } = useTextAreaAltEnter({\n      onInput: onInputAndDispatch,\n      textAreaRef: base.enabledElementRef\n    });\n\n    const onClickCounter = useCallback(() => {\n      const elm = base.enabledElementRef.current;\n      // for setSelectionRange(), len needs to be a number or null.\n      const len = elm ? elm.value.length : null;\n      // Since the counter element is after the text, clicking in this\n      // should put the selection at the end of the text\n      base.enabledElementRef.current?.setSelectionRange(len, len);\n      // Clicking the counter should put the focus on the input field\n      base.enabledElementRef.current?.focus();\n    }, [base.enabledElementRef]);\n\n    useTextAreaAutosizing({\n      isReadonly,\n      enabledElementRef: base.enabledElementRef,\n      readonlyElementRef: base.readonlyElementRef,\n      minRows,\n      maxRows,\n      value\n    });\n    const hasMaxLength = maxLength !== undefined;\n    const shouldAnnounceMaxLength = hasMaxLength && !isReadonly && !isDisabled;\n    const { 'aria-describedby': inputAriaDescribedBy, ...inputPropsRest } = base.inputProps;\n    // Autosize normally grows to fit content and does not need a reserved scrollbar gutter. When\n    // maxRows caps growth, reserve the gutter even when bloom is off or currently suppressed so\n    // the scrollport does not visibly move if bloom is toggled dynamically.\n    const hasTextAreaScrollbarInset = maxRows !== undefined && !isEmbeddedVariant(variant);\n\n    const mainContent = (\n      <>\n        <TextFieldInput\n          as=\"textarea\"\n          aria-describedby={\n            combineIds([inputAriaDescribedBy, shouldAnnounceMaxLength && maxLengthDescribedById]) ||\n            undefined\n          }\n          aria-label={base.ariaLabel}\n          autoComplete={autoComplete}\n          autoFocus={autoFocus}\n          currentCommitValue={currentCommitValue}\n          hasEmptyLabel={label === '' && labelEdge === 'none'}\n          hasInsideLabel={hasInsideLabel}\n          hasTextAreaScrollbarInset={hasTextAreaScrollbarInset}\n          isRequired={isRequired}\n          inputRef={base.enabledElementRef}\n          onCommit={onCommitAndDispatch}\n          onInput={onFilteredInput}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          role={role}\n          rows={minRows}\n          textAlign={textAlign}\n          value={value}\n          {...inputPropsRest}\n        />\n        {maxLengthCounter === 'remaining' && hasMaxLength && (\n          <MaxLengthCounter\n            maxLength={maxLength}\n            valueLength={valueLength}\n            onClick={onClickCounter}\n          />\n        )}\n        {hasMaxLength && (\n          <HiddenAccessible id={maxLengthDescribedById}>\n            {translations.formControl_maxLength({\n              MAX_LENGTH: `${maxLength}`\n            })}\n          </HiddenAccessible>\n        )}\n        {hasMaxLength && base.isFocused && (\n          <MaxLengthLiveRegion\n            isMaxLengthExceeded={isMaxLengthExceeded}\n            maxLength={maxLength}\n            valueLength={valueLength}\n            testId={testId ? testId + '_maxLength' : undefined}\n          />\n        )}\n      </>\n    );\n\n    // Keep the readonly element-type decision local because autosize determines whether readonly\n    // should measure a textarea or render a plain div when maxRows is not specified.\n    const readonlyMainContent = (\n      <ReadonlyTextFieldInput\n        aria-describedby={base.inputProps['aria-describedby']}\n        aria-label={base.ariaLabel}\n        aria-labelledby={base.labelProps.id}\n        autoFocus={autoFocus}\n        elementRef={base.readonlyElementRef}\n        formVariant={variant}\n        {...(maxRows ? { as: 'textarea', rows: minRows } : { as: 'div' })}\n        onBlur={base.inputProps.onBlur}\n        onFocus={base.inputProps.onFocus}\n        textAlign={textAlign}\n        value={value}\n        variant=\"textarea\"\n        hasEmptyLabel={label === '' && labelEdge === 'none'}\n        hasInsideLabel={hasInsideLabel}\n      />\n    );\n\n    const inputBaseProps = {\n      ref,\n      base,\n      mainContent,\n      readonlyMainContent,\n      testId\n    };\n\n    return isEmbeddedVariant(variant) ? (\n      <EmbeddedInputBase {...inputBaseProps} />\n    ) : (\n      <InputBase {...inputBaseProps} blooming={blooming} />\n    );\n  }\n);\n"],"names":["useLayoutEffect","forwardRef","useTranslationBundle","useFormContext","useCurrentValueReducer","useCallback","useId","useLengthFilter","useInputBase","defaultTextAlignForVariant","useTextAreaAltEnter","isEmbeddedVariant","_jsxs","_Fragment","_jsx","TextFieldInput","combineIds","MaxLengthCounter","HiddenAccessible","MaxLengthLiveRegion","ReadonlyTextFieldInput","EmbeddedInputBase","InputBase"],"mappings":"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"}

package/cjs/UNSAFE_TimePicker.js

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var TimePicker = require('./TimePicker-25997417.js');
+var TimePicker = require('./TimePicker-fe817eb1.js');
 require('preact/jsx-runtime');
-require('./List-eea800fd.js');
+require('./List-436100e1.js');
 require('preact');
 require('preact/compat');
 require('preact/hooks');

package/cjs/UNSAFE_TreeView.js

@@ -8,7 +8,7 @@ var compat = require('preact/compat');
 var hooks = require('preact/hooks');
 var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
 var ScrollUtils = require('./ScrollUtils-1486a0ca.js');
-var List = require('./List-eea800fd.js');
+var List = require('./List-436100e1.js');
 var clientHints = require('./clientHints-22e870c1.js');
 var useTranslationBundle = require('./useTranslationBundle-8d51d37f.js');
 var TreeItemLayout = require('./TreeItemLayout-65ad1a6e.js');

package/cjs/dropdownStyles.styles.css

@@ -1,13 +1,111 @@
-.dropdownStyles_base__d55yjw0 {
-  --oj-current-bg-color: var(--oj-c-surface-popup);
+.dropdownStyles_displayContents__1le3d5u0 {
+  display: contents;
+}
+.dropdownStyles_base__1le3d5u1 {
+  --oj-current-bg-color: var(--oj-c-surface-neutral0);
   box-sizing: border-box;
-  background-color: var(--oj-c-surface-popup);
+  background-color: var(--oj-c-surface-neutral0);
   border-width: 1px;
   border-style: solid;
   border-color: var(--oj-c-border-divider);
   border-radius: var(--oj-c-border-radius-md);
-  box-shadow: var(--oj-c-box-shadow-sm);
-  display: flex;
+  box-shadow: var(--oj-c-box-shadow-xs);
   max-height: inherit;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.dropdownStyles_selectorWrapper__1le3d5u2 {
+  padding-inline-start: calc(2 * var(--oj-c-size-units, 0.25rem));
+}
+.dropdownStyles_multiSelectItem__1le3d5u3 {
+  padding-bottom: calc(3 * var(--oj-c-size-units, 0.25rem));
+  padding-left: calc(3 * var(--oj-c-size-units, 0.25rem));
+  padding-right: calc(3 * var(--oj-c-size-units, 0.25rem));
+  padding-top: calc(3 * var(--oj-c-size-units, 0.25rem));
+}
+.dropdownStyles_singleSelectItem__1le3d5u4 {
+  padding-bottom: calc(3 * var(--oj-c-size-units, 0.25rem));
+  padding-left: calc(4 * var(--oj-c-size-units, 0.25rem));
+  padding-right: calc(4 * var(--oj-c-size-units, 0.25rem));
+  padding-top: calc(3 * var(--oj-c-size-units, 0.25rem));
+}
+.dropdownStyles_list_base__1le3d5u5 {
+  padding-left: 0;
+  padding-right: 0;
+  margin: 1px 0 2px 0;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  display: grid;
+}
+.dropdownStyles_list_collectionWrapper__1le3d5u6 {
+  overflow-y: auto;
+}
+.dropdownStyles_list_topGap__1le3d5u7 {
+  padding-top: calc(2 * var(--oj-c-size-units, 0.25rem));
+}
+.dropdownStyles_list_bottomGap__1le3d5u8 {
+  padding-bottom: calc(2 * var(--oj-c-size-units, 0.25rem));
+}
+.dropdownStyles_list_loading__1le3d5u9 {
+  min-height: calc(40 * var(--oj-c-size-units, 0.25rem));
+}
+.dropdownStyles_userAssistance__1le3d5ua {
+  border-top-color: rgba(var(--oj-c-palette-neutral-190), 0.1);
+  border-top-style: solid;
+  border-top-width: 1px;
+  padding-bottom: calc(2 * var(--oj-c-size-units, 0.25rem));
+  padding-left: calc(2 * var(--oj-c-size-units, 0.25rem));
+  padding-right: calc(2 * var(--oj-c-size-units, 0.25rem));
+  padding-top: calc(2 * var(--oj-c-size-units, 0.25rem));
+  box-sizing: border-box;
+  width: 0;
+  min-width: 100%;
+}
+.dropdownStyles_results_extraItem__1le3d5ub {
+  padding-bottom: calc(3 * var(--oj-c-size-units, 0.25rem));
+  padding-left: calc(4 * var(--oj-c-size-units, 0.25rem));
+  padding-right: calc(4 * var(--oj-c-size-units, 0.25rem));
+  padding-top: calc(3 * var(--oj-c-size-units, 0.25rem));
+  width: 100%;
+}
+.dropdownStyles_results_linkItemHighlight__1le3d5uc {
+  background-color: var(--oj-c-overlay-hover);
+}
+.dropdownStyles_results_linkItemFocus__1le3d5ud {
+  outline-color: var(--oj-c-keyboard-outline-color);
+  outline-offset: calc(-1 * var(--oj-c-keyboard-outline-width));
+  outline-style: var(--oj-c-keyboard-outline-style);
+  outline-width: var(--oj-c-keyboard-outline-width);
+}
+.dropdownStyles_results_linkItemRoot__1le3d5ue {
+  display: flex;
+  flex-direction: column;
+}
+.dropdownStyles_results_linkItemRoot__1le3d5ue > a:focus {
+  outline: none;
+}
+.dropdownStyles_arrow_base__1le3d5uf {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--oj-c-base-button-sizes-sm-height);
+  height: var(--oj-c-base-button-sizes-sm-height);
+  line-height: var(--oj-c-base-button-sizes-sm-height);
+  font-size: var(--oj-c-PRIVATE-button-label-layout-sizes-sm-icon-size);
+  padding-inline: 0;
+  padding-block: 0;
+  border-radius: var(--oj-c-base-button-border-radius);
+  color: var(--oj-c-base-button-variants-ghost-base-color);
+}
+.dropdownStyles_arrow_enabled__1le3d5ug {
+  cursor: var(--oj-c-cursor-clickable) !important;
+}
+.dropdownStyles_arrow_enabled__1le3d5ug:hover {
+  color: var(--oj-c-text-icon-secondary);
+  background-color: var(--oj-c-base-button-variants-ghost-hover-background-overlay-color);
+}
+.dropdownStyles_arrow_disabled__1le3d5uh {
+  color: var(--oj-c-base-button-variants-ghost-disabled-color);
 }

package/cjs/dropdownStyles.styles2.css

@@ -1,111 +1,13 @@
-.dropdownStyles_displayContents__1le3d5u0 {
-  display: contents;
-}
-.dropdownStyles_base__1le3d5u1 {
-  --oj-current-bg-color: var(--oj-c-surface-neutral0);
+.dropdownStyles_base__d55yjw0 {
+  --oj-current-bg-color: var(--oj-c-surface-popup);
   box-sizing: border-box;
-  background-color: var(--oj-c-surface-neutral0);
+  background-color: var(--oj-c-surface-popup);
   border-width: 1px;
   border-style: solid;
   border-color: var(--oj-c-border-divider);
   border-radius: var(--oj-c-border-radius-md);
-  box-shadow: var(--oj-c-box-shadow-xs);
-  max-height: inherit;
+  box-shadow: var(--oj-c-box-shadow-sm);
   display: flex;
-  flex-direction: column;
-}
-.dropdownStyles_selectorWrapper__1le3d5u2 {
-  padding-inline-start: calc(2 * var(--oj-c-size-units, 0.25rem));
-}
-.dropdownStyles_multiSelectItem__1le3d5u3 {
-  padding-bottom: calc(3 * var(--oj-c-size-units, 0.25rem));
-  padding-left: calc(3 * var(--oj-c-size-units, 0.25rem));
-  padding-right: calc(3 * var(--oj-c-size-units, 0.25rem));
-  padding-top: calc(3 * var(--oj-c-size-units, 0.25rem));
-}
-.dropdownStyles_singleSelectItem__1le3d5u4 {
-  padding-bottom: calc(3 * var(--oj-c-size-units, 0.25rem));
-  padding-left: calc(4 * var(--oj-c-size-units, 0.25rem));
-  padding-right: calc(4 * var(--oj-c-size-units, 0.25rem));
-  padding-top: calc(3 * var(--oj-c-size-units, 0.25rem));
-}
-.dropdownStyles_list_base__1le3d5u5 {
-  padding-left: 0;
-  padding-right: 0;
-  margin: 1px 0 2px 0;
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-  box-sizing: border-box;
-  display: grid;
-}
-.dropdownStyles_list_collectionWrapper__1le3d5u6 {
-  overflow-y: auto;
-}
-.dropdownStyles_list_topGap__1le3d5u7 {
-  padding-top: calc(2 * var(--oj-c-size-units, 0.25rem));
-}
-.dropdownStyles_list_bottomGap__1le3d5u8 {
-  padding-bottom: calc(2 * var(--oj-c-size-units, 0.25rem));
-}
-.dropdownStyles_list_loading__1le3d5u9 {
-  min-height: calc(40 * var(--oj-c-size-units, 0.25rem));
-}
-.dropdownStyles_userAssistance__1le3d5ua {
-  border-top-color: rgba(var(--oj-c-palette-neutral-190), 0.1);
-  border-top-style: solid;
-  border-top-width: 1px;
-  padding-bottom: calc(2 * var(--oj-c-size-units, 0.25rem));
-  padding-left: calc(2 * var(--oj-c-size-units, 0.25rem));
-  padding-right: calc(2 * var(--oj-c-size-units, 0.25rem));
-  padding-top: calc(2 * var(--oj-c-size-units, 0.25rem));
-  box-sizing: border-box;
-  width: 0;
-  min-width: 100%;
-}
-.dropdownStyles_results_extraItem__1le3d5ub {
-  padding-bottom: calc(3 * var(--oj-c-size-units, 0.25rem));
-  padding-left: calc(4 * var(--oj-c-size-units, 0.25rem));
-  padding-right: calc(4 * var(--oj-c-size-units, 0.25rem));
-  padding-top: calc(3 * var(--oj-c-size-units, 0.25rem));
-  width: 100%;
-}
-.dropdownStyles_results_linkItemHighlight__1le3d5uc {
-  background-color: var(--oj-c-overlay-hover);
-}
-.dropdownStyles_results_linkItemFocus__1le3d5ud {
-  outline-color: var(--oj-c-keyboard-outline-color);
-  outline-offset: calc(-1 * var(--oj-c-keyboard-outline-width));
-  outline-style: var(--oj-c-keyboard-outline-style);
-  outline-width: var(--oj-c-keyboard-outline-width);
-}
-.dropdownStyles_results_linkItemRoot__1le3d5ue {
-  display: flex;
-  flex-direction: column;
-}
-.dropdownStyles_results_linkItemRoot__1le3d5ue > a:focus {
-  outline: none;
-}
-.dropdownStyles_arrow_base__1le3d5uf {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--oj-c-base-button-sizes-sm-height);
-  height: var(--oj-c-base-button-sizes-sm-height);
-  line-height: var(--oj-c-base-button-sizes-sm-height);
-  font-size: var(--oj-c-PRIVATE-button-label-layout-sizes-sm-icon-size);
-  padding-inline: 0;
-  padding-block: 0;
-  border-radius: var(--oj-c-base-button-border-radius);
-  color: var(--oj-c-base-button-variants-ghost-base-color);
-}
-.dropdownStyles_arrow_enabled__1le3d5ug {
-  cursor: var(--oj-c-cursor-clickable) !important;
-}
-.dropdownStyles_arrow_enabled__1le3d5ug:hover {
-  color: var(--oj-c-text-icon-secondary);
-  background-color: var(--oj-c-base-button-variants-ghost-hover-background-overlay-color);
-}
-.dropdownStyles_arrow_disabled__1le3d5uh {
-  color: var(--oj-c-base-button-variants-ghost-disabled-color);
+  max-height: inherit;
+  overflow: hidden;
 }

package/cjs/hooks/PRIVATE_useDetectHorizontalOverflow.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var useDetectHorizontalOverflow = require('../useDetectHorizontalOverflow-622817d4.js');
+var useDetectHorizontalOverflow = require('../useDetectHorizontalOverflow-15084cbf.js');
 require('preact/hooks');
 require('../useResizeObserver-a9e97180.js');
 require('../useAddBusyState-d19ae1fa.js');

package/cjs/hooks/PRIVATE_useTabBar.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var useTabBar = require('../useTabBar-ec20851a.js');
+var useTabBar = require('../useTabBar-1cfaf3e6.js');
 require('preact/hooks');
 require('../mergeProps-e3da7237.js');
 require('../collectionUtils-2f50dde3.js');

package/cjs/{useDetectHorizontalOverflow-622817d4.js → useDetectHorizontalOverflow-15084cbf.js}

@@ -7,10 +7,6 @@ var tabBarUtils = require('./tabBarUtils-6f16dfec.js');
 
 //The minimum width of the overflowtabbaritem, it can be rendered with width greater than this based on available width
 const MORE_ITEM_WIDTH = 48;
-const LABEL_MIN_WIDTH = 96;
-const TAB_BORDER = 6;
-//This is the minWidth a tab will have if it has only a label.
-const TAB_MIN_WIDTH = LABEL_MIN_WIDTH + TAB_BORDER;
 /**
  * Implements overflow detection and calculation
  */
@@ -25,7 +21,10 @@ function useDetectHorizontalOverflow({ rootRef, keysArray, isTruncationDisabled
     const isAllItemsTruncatedFinal = hooks.useRef(false);
     const tabDimensions = hooks.useRef();
     hooks.useLayoutEffect(() => {
-        // Store locally to avoid calling rootRef everytime within layouteffect
+        // On initial render, tabBarWidth is 0 until ResizeObserver invokes its callback.
+        // Read the mounted TabBar's width so overflow can be calculated before that callback.
+        // A TabBar that is initially hidden can still measure as 0; ResizeObserver recalculates
+        // overflow when it becomes visible.
         const tabBarWidthCurrent = rootRef?.current?.clientWidth;
         const tabBarScrollWidthCurrent = rootRef?.current?.scrollWidth;
         if (rootRef.current &&
@@ -73,16 +72,18 @@ function useDetectHorizontalOverflow({ rootRef, keysArray, isTruncationDisabled
                     const lastIndex = arr.length - 1;
                     //In addition to scrollWidth we check if the cumulative width of last item is greater than rootRef clientwidth
                     if (arr && tabBarWidthCurrent < arr[lastIndex]) {
-                        const { closestEntry, closestIndex } = searchClosest(arr, tabBarWidthCurrent);
-                        // Check for not null, because even for '0' value of closestIndex we want to slice in such cases only overflow item will be rendered
-                        if (closestEntry && closestIndex != null) {
-                            // Closest index refers to the index of the last item that would be visible.
-                            // While splicing we need to include it however if we check for closestIndex < lastIndex alone then closestIndex + 1 will be greater than the last item index so we check for one less.
-                            const lastVisibleItemIndex = closestIndex < lastIndex - 1 ? closestIndex + 1 : closestIndex;
-                            setVisibleItemKeys(keysArray.slice(0, lastVisibleItemIndex));
-                            setOverflowingItemKeys(keysArray?.slice(lastVisibleItemIndex));
+                        // Reserve space for the More item before finding the last tab that fits.
+                        const availableWidth = tabBarWidthCurrent - MORE_ITEM_WIDTH;
+                        const closestIndex = searchClosest(arr, availableWidth);
+                        if (closestIndex != null) {
+                            // `closestIndex` is the last visible item index; `slice` takes an exclusive end index.
+                            const visibleItemCount = closestIndex + 1;
+                            setVisibleItemKeys(keysArray.slice(0, visibleItemCount));
+                            setOverflowingItemKeys(keysArray?.slice(visibleItemCount));
                             //Once OverflowTabBarItem is rendered, i.e overflowItemKeys move into overflow menu then space is available, which can be re-dsitributed to truncated visible items. We also check if these visible items have already gone through this calculation otherwise we skip it to avoid infinite loop.
-                            if (closestIndex > 0 && !isAllItemsTruncatedFinal.current && !isTruncationDisabled) {
+                            if (visibleItemCount > 1 &&
+                                !isAllItemsTruncatedFinal.current &&
+                                !isTruncationDisabled) {
                                 const tabWidthsAfterOverflow = tabBarUtils.getTabWidths(rootRef.current, trailingContentWidths, isTruncationDisabled, tabBarWidthCurrent, isAllItemsTruncatedMax?.current);
                                 const tabMaxWidthMapAfterOverflow = new Map(tabWidthsAfterOverflow.map((tab) => [tab.key, (tab.maxWidth + 'px')]));
                                 //Flag to indicate that final truncation calculation has occured
@@ -137,52 +138,23 @@ const shouldRenderAllTabs = (visibleItemKeys, overflowItemKeys, keysArray) => {
     else
         return false;
 };
-//Searches for a value closest and smaller than search value from the cumulative array
-const searchClosest = (arr, searchValue) => {
-    {
-        if (arr != null && searchValue != null) {
-            let left = 0;
-            let right = arr.length - 1;
-            let closestEntry = null;
-            let closestIndex = null;
-            while (left <= right && left < arr.length && right > -1) {
-                const mid = Math.floor((left + right) / 2);
-                const midEntry = arr[mid];
-                if (midEntry === searchValue) {
-                    return { closestEntry: midEntry, closestIndex: mid };
-                }
-                else if (midEntry < searchValue) {
-                    closestEntry = midEntry;
-                    closestIndex = mid;
-                    left = mid + 1;
-                }
-                else {
-                    right = mid - 1;
-                }
-                //If the searchValue is greater than closest entry and their difference is greater more item width then we have space to fit more item. Otherwise we return the index with the closest and small value when compared to searchvalue
-                if (closestEntry && searchValue > closestEntry) {
-                    //NOTE: Do not update closestEntry to midEntry here because value from const midEntry = arr[mid], midEntry maybe greater than searchValue and below it may end up updating closestIndex to mid +1 due to abs check
-                    //Sometimes closest entry may be much smaller than searchvalue so in such cases we maybe able to accomodate more items. The difference between searchValue and closestEntry should be greater than the minWidth needed for any item so that it can be rendered. If the difference is lesser than item min width we then check if space is available to render overflowitem alone else we reduce the closestIndex.
-                    closestIndex =
-                        Math.abs(searchValue - closestEntry) > TAB_MIN_WIDTH && mid + 1 <= arr.length - 2
-                            ? mid + 1
-                            : Math.abs(searchValue - closestEntry) > MORE_ITEM_WIDTH
-                                ? mid
-                                : mid - 1 >= 0
-                                    ? mid - 1
-                                    : 0;
-                }
-                //If the searchValue is lesser than closestEntry we return a value lesser than mid, this happens when all the values in the array are lesser than searchValue, i.e screensize is extremely small
-                else {
-                    closestIndex = mid - 1 >= 0 ? mid - 1 : 0;
-                }
-            }
-            return { closestEntry: closestEntry, closestIndex: closestIndex };
+// Returns the index of the largest cumulative width that fits the available width.
+// The caller reserves the More-item width before calling this function.
+const searchClosest = (arr, availableWidth) => {
+    if (arr == null || availableWidth == null) {
+        return null;
+    }
+    let closestIndex = -1;
+    for (let index = 0; index < arr.length; index++) {
+        if (arr[index] <= availableWidth) {
+            closestIndex = index;
+        }
+        else {
+            break;
         }
-        else
-            return { closestEntry: null, closestIndex: null };
     }
+    return closestIndex;
 };
 
 exports.useDetectHorizontalOverflow = useDetectHorizontalOverflow;
-//# sourceMappingURL=useDetectHorizontalOverflow-622817d4.js.map
+//# sourceMappingURL=useDetectHorizontalOverflow-15084cbf.js.map

package/cjs/useDetectHorizontalOverflow-15084cbf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetectHorizontalOverflow-15084cbf.js","sources":["../../src/hooks/PRIVATE_useDetectHorizontalOverflow/useDetectHorizontalOverflow.ts"],"sourcesContent":["import { RefObject } from 'preact';\nimport { useState, useLayoutEffect, useRef, StateUpdater, useCallback } from 'preact/hooks';\nimport { useResizeObserver } from '../../hooks/UNSAFE_useResizeObserver';\nimport { Size } from '../../utils/UNSAFE_size';\nimport { getTabWidths } from '../../utils/PRIVATE_tabBarUtils';\nimport type { TrailingContentInfo } from '../../utils/PRIVATE_tabBarUtils';\n\ntype TabDimensions<K extends string | number> = {\n  key: K;\n  maxWidth: number;\n  nonTextWidth?: number;\n  needsTruncation?: boolean;\n  cumulativeWidth?: number;\n};\n\n//The minimum width of the overflowtabbaritem, it can be rendered with width greater than this based on available width\nconst MORE_ITEM_WIDTH = 48;\n\nexport type useDetectOverflowProps<K extends string | number> = {\n  rootRef: RefObject<HTMLDivElement>;\n  keysArray: (K | undefined)[];\n  isTruncationDisabled?: boolean;\n};\n\n/**\n * Implements overflow detection and calculation\n */\nexport function useDetectHorizontalOverflow<K extends string | number>({\n  rootRef,\n  keysArray,\n  isTruncationDisabled = true\n}: useDetectOverflowProps<K>) {\n  const [visibleItemKeys, setVisibleItemKeys] = useState<(K | undefined)[]>();\n  const [overflowItemKeys, setOverflowingItemKeys] = useState<(K | undefined)[]>();\n  const trailingContentWidths = useRef(new Map<K, TrailingContentInfo>());\n  const [tabMaxWidth, setTabMaxWidth] = useState<Map<K, Size>>();\n  // This state var is to only re-trigger the layout effect. Using it locally will not give the latest updated value hence we use current suffix vars\n  const [tabBarWidth, setTabBarWidth] = useState<number>(0);\n  const isAllItemsTruncatedMax = useRef<boolean>(false);\n  const isAllItemsTruncatedFinal = useRef<boolean>(false);\n  const tabDimensions = useRef<TabDimensions<K>[]>();\n\n  useLayoutEffect(() => {\n    // On initial render, tabBarWidth is 0 until ResizeObserver invokes its callback.\n    // Read the mounted TabBar's width so overflow can be calculated before that callback.\n    // A TabBar that is initially hidden can still measure as 0; ResizeObserver recalculates\n    // overflow when it becomes visible.\n    const tabBarWidthCurrent = rootRef?.current?.clientWidth;\n    const tabBarScrollWidthCurrent = rootRef?.current?.scrollWidth;\n    if (\n      rootRef.current &&\n      keysArray &&\n      keysArray.length > 0 &&\n      tabBarWidthCurrent &&\n      tabBarWidthCurrent > 0\n    ) {\n      //Set tabBarWidth if not the current value\n      if (tabBarWidth !== tabBarWidthCurrent) {\n        setTabBarWidth(tabBarWidthCurrent);\n      }\n\n      if (tabMaxWidth === undefined) {\n        const isOverflow = tabBarWidthCurrent > 0 && tabBarWidthCurrent < tabBarScrollWidthCurrent!;\n\n        //If there is no overflow maxWidth should be its prevState, prevState may also be undefined if truncation is disabled.\n        if (!isOverflow) {\n          setTabMaxWidth((prevState) => {\n            return prevState;\n          });\n        } else {\n          //We need to calculate maxWidth only if truncation threshold limit is not reached\n          if (!isAllItemsTruncatedMax.current) {\n            const tabWidths = getTabWidths(\n              rootRef.current,\n              trailingContentWidths,\n              isTruncationDisabled,\n              tabBarWidthCurrent,\n              isAllItemsTruncatedMax?.current,\n              keysArray as K[]\n            );\n            //If all items have reached max treshold of truncation then we set it to true\n            if (tabWidths.every((item) => item.hasReachedLimit)) {\n              isAllItemsTruncatedMax.current = true;\n            }\n            tabDimensions.current = tabWidths as any;\n          }\n          //If all items have reached max treshold of truncation then we do not have update tabDimensions are maxWidth cannot go lesser than 96px.\n          else {\n            tabDimensions.current = tabDimensions.current?.map((item) => ({\n              ...item\n            }));\n          }\n        }\n\n        //Set calculated maxWidths\n        if (!isTruncationDisabled) {\n          const tabMaxWidthMap = new Map(\n            tabDimensions.current?.map((tab) => [tab.key, (tab.maxWidth + 'px') as Size])\n          );\n          setTabMaxWidth(tabMaxWidthMap);\n        }\n        //Overflow calculation\n        if (tabBarWidthCurrent < tabBarScrollWidthCurrent!) {\n          const arr = tabDimensions.current?.map((item) => item.cumulativeWidth) as number[];\n          const lastIndex = arr.length - 1;\n          //In addition to scrollWidth we check if the cumulative width of last item is greater than rootRef clientwidth\n          if (arr && tabBarWidthCurrent < arr[lastIndex]) {\n            // Reserve space for the More item before finding the last tab that fits.\n            const availableWidth = tabBarWidthCurrent - MORE_ITEM_WIDTH;\n            const closestIndex = searchClosest(arr, availableWidth);\n            if (closestIndex != null) {\n              // `closestIndex` is the last visible item index; `slice` takes an exclusive end index.\n              const visibleItemCount = closestIndex + 1;\n              setVisibleItemKeys(keysArray.slice(0, visibleItemCount));\n              setOverflowingItemKeys(keysArray?.slice(visibleItemCount));\n              //Once OverflowTabBarItem is rendered, i.e overflowItemKeys move into overflow menu then space is available, which can be re-dsitributed to truncated visible items. We also check if these visible items have already gone through this calculation otherwise we skip it to avoid infinite loop.\n              if (\n                visibleItemCount > 1 &&\n                !isAllItemsTruncatedFinal.current &&\n                !isTruncationDisabled\n              ) {\n                const tabWidthsAfterOverflow = getTabWidths(\n                  rootRef.current,\n                  trailingContentWidths,\n                  isTruncationDisabled,\n                  tabBarWidthCurrent,\n                  isAllItemsTruncatedMax?.current\n                );\n                const tabMaxWidthMapAfterOverflow = new Map(\n                  tabWidthsAfterOverflow.map((tab) => [tab.key, (tab.maxWidth + 'px') as Size])\n                );\n                //Flag to indicate that final truncation calculation has occured\n                isAllItemsTruncatedFinal.current = true;\n                setTabMaxWidth(tabMaxWidthMapAfterOverflow);\n              }\n            }\n          }\n        }\n      }\n    }\n  }, [keysArray, rootRef, tabBarWidth, tabMaxWidth, isTruncationDisabled]);\n\n  const updateTabBarWidth = useCallback(\n    (entry: { contentRect: { width: StateUpdater<number> } }) => {\n      const rectWidth = Math.ceil(entry.contentRect.width as number);\n      // Sometimes entry.contentRect.width maybe a decimal value so we need to get absolute value\n      if (Math.abs(tabBarWidth - (entry.contentRect.width as number)) > 1) {\n        setTabBarWidth(entry.contentRect.width);\n        if (tabMaxWidth !== undefined && !isAllItemsTruncatedMax.current) {\n          setTabMaxWidth(undefined);\n        }\n        //Once there is change in the container width and there is no overflow we render all items as visible.\n        if (rectWidth >= rootRef.current?.scrollWidth!) {\n          setVisibleItemKeys(keysArray);\n          setOverflowingItemKeys([]);\n        }\n        isAllItemsTruncatedFinal.current = false;\n      }\n    },\n    [tabBarWidth, tabMaxWidth, rootRef, keysArray]\n  );\n\n  useResizeObserver(rootRef, updateTabBarWidth);\n\n  return shouldRenderAllTabs(visibleItemKeys, overflowItemKeys, keysArray)\n    ? {\n        visibleItemKeys: keysArray,\n        overflowItemKeys,\n        maxWidths: tabMaxWidth\n      }\n    : {\n        visibleItemKeys,\n        overflowItemKeys,\n        maxWidths: tabMaxWidth\n      };\n}\n\n//If the overflow + visible keys or their quantity are not the same as keysArray then we first render all the keys as visible\nconst shouldRenderAllTabs = <K extends string | number>(\n  visibleItemKeys: (K | undefined)[] | undefined,\n  overflowItemKeys: (K | undefined)[] | undefined,\n  keysArray: (K | undefined)[]\n) => {\n  if (visibleItemKeys == null) return true;\n  else if (visibleItemKeys && overflowItemKeys && keysArray) {\n    const combinedArray = [...visibleItemKeys, ...overflowItemKeys];\n    const isNotEqual =\n      combinedArray.length !== keysArray.length ||\n      JSON.stringify(keysArray) !== JSON.stringify(combinedArray);\n    return isNotEqual;\n  } else return false;\n};\n\n// Returns the index of the largest cumulative width that fits the available width.\n// The caller reserves the More-item width before calling this function.\nconst searchClosest = (\n  arr: number[] | undefined,\n  availableWidth: number | undefined | null\n): number | null => {\n  if (arr == null || availableWidth == null) {\n    return null;\n  }\n\n  let closestIndex = -1;\n\n  for (let index = 0; index < arr.length; index++) {\n    if (arr[index] <= availableWidth) {\n      closestIndex = index;\n    } else {\n      break;\n    }\n  }\n\n  return closestIndex;\n};\n"],"names":["useState","useRef","useLayoutEffect","getTabWidths","useCallback","useResizeObserver"],"mappings":"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"}

package/cjs/{useDisplayValue-ce2d071e.js → useDisplayValue-777c9be5.js}

@@ -31,7 +31,7 @@ require('./UNSAFE_TextField/themes/TextFieldStyles.css.js');
 
 
 require('./UNSAFE_TextField/themes/redwood/TextFieldVariants.css.js');
-var useSelectCommon = require('./useSelectCommon-544c22ee.js');
+var useSelectCommon = require('./useSelectCommon-bb44fdb6.js');
 var LiveRegion = require('./LiveRegion-e8e384f1.js');
 
 
@@ -82,4 +82,4 @@ function useDisplayValue(itemText, valueItem, componentName = 'SelectSingle') {
 exports.SelectSingleField = SelectSingleField;
 exports.SelectSingleFieldInput = SelectSingleFieldInput;
 exports.useDisplayValue = useDisplayValue;
-//# sourceMappingURL=useDisplayValue-ce2d071e.js.map
+//# sourceMappingURL=useDisplayValue-777c9be5.js.map