@oracle/oraclejet-preact 15.0.11 → 15.0.12

package/cjs/TextFieldInput-f3304d8d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldInput-f3304d8d.js","sources":["../../src/UNSAFE_TextField/TextFieldUtils.ts","../../src/UNSAFE_TextField/TextFieldInput.tsx"],"sourcesContent":["export const getInputId = (id?: string) => (id ?? '') + '|input';\n\nexport const isInputPlaceholderShown = (\n  hasInsideLabel: boolean,\n  hasValue: boolean,\n  isFocused?: boolean\n) => {\n  return !(hasInsideLabel && !hasValue && !isFocused);\n};\n","import { Ref } from 'preact';\nimport { useAccessibleContext } from '../hooks/UNSAFE_useAccessibleContext';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTextFieldInputHandlers } from '../hooks/UNSAFE_useTextFieldInputHandlers';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { TextProps } from '../utils/UNSAFE_interpolations/text';\nimport { textInterpolations } from '../utils/UNSAFE_interpolations/text';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\nimport { isInputPlaceholderShown } from './TextFieldUtils';\nimport {\n  AriaAttributesSignalExcluded,\n  HTMLAttributesSignalExcluded\n} from '../utils/UNSAFE_attributeUtils';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { TextFieldInputVariantOptions } from './themes/TextFieldInputStyles.css';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { TextFieldInputRedwoodTheme } from './themes/redwood/TextFieldInputTheme';\n\nconst interpolations = [...Object.values(textInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\ntype Autocomplete = 'off' | 'on' | string;\n\ntype OrigPickedPropsFromInput = Pick<\n  HTMLAttributesSignalExcluded<HTMLInputElement>,\n  'autofocus' | 'id' | 'placeholder' | 'required' | 'role' | 'spellcheck' | 'type'\n>;\ntype RenamedPropsFromInput = Omit<\n  OrigPickedPropsFromInput,\n  'autofocus' | 'readonly' | 'required'\n> & {\n  autoFocus?: OrigPickedPropsFromInput['autofocus'];\n  isRequired?: OrigPickedPropsFromInput['required'];\n};\ntype InputProps = {\n  as?: 'input';\n  type?: Pick<HTMLAttributesSignalExcluded<HTMLInputElement>, 'type'>['type'];\n  rows?: never;\n  inputRef?: Ref<HTMLInputElement>;\n  hasPrefix?: boolean;\n  hasSuffix?: boolean;\n};\n\ntype TextAreaProps = {\n  as: 'textarea';\n  type?: never;\n  rows?: number;\n  inputRef?: Ref<HTMLTextAreaElement>;\n  hasPrefix?: never;\n  hasSuffix?: never;\n};\n\ntype FocusProps = Pick<HTMLAttributesSignalExcluded<HTMLElement>, 'onBlur' | 'onFocus'>;\n\ntype UniqueProps = InputProps | TextAreaProps;\n\ntype AriaProps = Pick<\n  AriaAttributesSignalExcluded,\n  | 'aria-autocomplete'\n  | 'aria-controls'\n  | 'aria-describedby'\n  | 'aria-expanded'\n  | 'aria-invalid'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-valuemax'\n  | 'aria-valuemin'\n  | 'aria-valuenow'\n  | 'aria-valuetext'\n>;\n\ntype Props = UniqueProps &\n  TextProps &\n  RenamedPropsFromInput &\n  AriaProps &\n  FocusProps & {\n    autoComplete?: Autocomplete;\n    // TODO: Should we expose has* props like these or should we pass this info\n    // via FormFieldContext?  (from review on 3/8/22)\n    currentCommitValue?: string;\n    hasEmptyLabel?: boolean;\n    hasEndContent?: boolean;\n    hasInsideLabel?: boolean;\n    hasStartContent?: boolean;\n    value?: string;\n    variant?: 'default' | 'embedded';\n    onInput?: (detail: ValueUpdateDetail<string>) => void;\n    onCommit?: (detail: ValueUpdateDetail<string>) => void;\n    onKeyDown?: (event: KeyboardEvent) => void;\n    onKeyUp?: (event: KeyboardEvent) => void;\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 const TextFieldInput = ({\n  as = 'input',\n  'aria-autocomplete': ariaAutoComplete,\n  'aria-controls': ariaControls,\n  'aria-describedby': ariaDescribedBy,\n  'aria-expanded': ariaExpanded,\n  'aria-invalid': ariaInvalid,\n  'aria-label': ariaLabel,\n  'aria-labelledby': inputLabelledBy,\n  'aria-valuemax': ariaValueMax,\n  'aria-valuemin': ariaValueMin,\n  'aria-valuenow': ariaValueNow,\n  'aria-valuetext': ariaValueText,\n  autoComplete,\n  autoFocus,\n  currentCommitValue,\n  hasEmptyLabel,\n  hasEndContent = false,\n  hasInsideLabel = false,\n  hasPrefix = false,\n  hasStartContent = false,\n  hasSuffix = false,\n  id,\n  inputRef,\n  placeholder,\n  isRequired,\n  role,\n  rows,\n  spellcheck,\n  type,\n  value = '',\n  variant = 'default',\n  onInput,\n  onCommit,\n  onKeyDown,\n  onKeyUp,\n  onBlur,\n  onFocus,\n  ...props\n}: Props) => {\n  const { isDisabled, isFocused, isLoading, isReadonly } = useFormFieldContext();\n  const { class: styleInterpolationClasses } = styleInterpolations(props);\n  const hasValue = value !== '';\n  const isTextArea = as === 'textarea';\n  const isInput = as === 'input';\n  const isPassword = type === 'password';\n  const renderPrefix = !isDisabled && hasPrefix;\n  const renderSuffix = !isDisabled && hasSuffix;\n  const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused)\n    ? placeholder\n    : undefined;\n\n  const { classes } = useComponentTheme<TextFieldInputVariantOptions>(TextFieldInputRedwoodTheme, {\n    type: isPassword ? 'isPassword' : 'notPassword',\n    styleVariant: variant,\n    textarea: isTextArea ? 'isTextArea' : 'notTextArea',\n    input: isInput ? 'isInput' : 'notInput',\n    prefix: renderPrefix ? 'hasPrefix' : 'noPrefix',\n    suffix: renderSuffix ? 'hasSuffix' : 'noSuffix',\n    startContent: hasStartContent ? 'hasStartContent' : 'noStartContent',\n    endContent: hasEndContent ? 'hasEndContent' : 'noEndContent',\n    insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel',\n    value: hasValue ? 'hasValue' : 'noValue',\n    focused: isFocused ? 'isFocused' : 'notFocused',\n    disabled: isDisabled ? 'isDisabled' : 'notDisabled'\n  });\n\n  const inputClasses = classNames([classes, styleInterpolationClasses]);\n  const Comp = as || 'input';\n  const textFieldInputHandlers = useTextFieldInputHandlers({\n    currentCommitValue,\n    value,\n    onInput,\n    onCommit,\n    onKeyDown\n  });\n  const handlers = mergeProps(textFieldInputHandlers, { onBlur, onFocus });\n  // the implicit default for tabindex on an input is 0, so do not explicitly set it.\n  // JET-52914 - Implement Tabbable mode API contract in InputText\n  // if not tabbable, spread tabbableModeProps on component\n  const { isTabbable, tabbableModeProps } = useTabbableMode();\n  // TODO: for autoComplete='off', need to configure attrs appropriately to make sure it\n  // works across browsers and versions  (from review on 3/11/22)\n\n  // JET-52089: add unsafe API for specifying an external label which is added to ariaLabelledBy on the input,\n  // only when labelEdge is 'none' and label is ''. Since ariaLabelledBy takes precedence over all other\n  // kinds of labels, this helps to ensure we don't override a meaningful label.\n  const { UNSAFE_ariaLabelledBy } = useAccessibleContext();\n  const ariaLabelledBy = hasEmptyLabel\n    ? mergeIDs(inputLabelledBy, UNSAFE_ariaLabelledBy)\n    : inputLabelledBy;\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const loadingAriaLabel = translations.formControl_loading();\n\n  return (\n    <Comp\n      aria-autocomplete={ariaAutoComplete}\n      aria-controls={ariaControls}\n      aria-describedby={ariaDescribedBy}\n      aria-expanded={ariaExpanded}\n      aria-invalid={ariaInvalid}\n      aria-label={isLoading ? loadingAriaLabel : ariaLabel ? ariaLabel : undefined}\n      aria-labelledby={ariaLabelledBy}\n      aria-required={isRequired ? true : undefined}\n      aria-valuemax={ariaValueMax}\n      aria-valuemin={ariaValueMin}\n      aria-valuenow={ariaValueNow}\n      aria-valuetext={ariaValueText}\n      autocomplete={autoComplete}\n      autofocus={autoFocus}\n      class={inputClasses}\n      disabled={isDisabled}\n      id={id}\n      onKeyUp={onKeyUp}\n      placeholder={myPlaceholder}\n      readonly={isReadonly}\n      // @ts-ignore\n      ref={inputRef}\n      role={role}\n      rows={rows}\n      spellcheck={spellcheck}\n      type={type}\n      value={value}\n      {...handlers}\n      {...(!isTabbable && tabbableModeProps)}\n    />\n  );\n};\n"],"names":["textInterpolations","mergeInterpolations","useFormFieldContext","useComponentTheme","TextFieldInputRedwoodTheme","classNames","useTextFieldInputHandlers","mergeProps","useTabbableMode","useAccessibleContext","useTranslationBundle","_jsx"],"mappings":"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"}

package/cjs/TextTag-aa1dc020.js

@@ -0,0 +1,59 @@
+/* @oracle/oraclejet-preact: 15.0.12 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var PRIVATE_SelectCommon = require('./PRIVATE_SelectCommon.js');
+require('./UNSAFE_HiddenAccessible.js');
+require('./UNSAFE_IconButton.js');
+require('./UNSAFE_Text.js');
+var PRIVATE_ThemedIcons_CloseIcon = require('./PRIVATE_ThemedIcons/CloseIcon.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var utils_PRIVATE_keyboardUtils = require('./utils/PRIVATE_keyboardUtils.js');
+require('./utils/UNSAFE_classNames.js');
+var UNSAFE_SelectMultiple_themes_TextTagStyles_css = require('./UNSAFE_SelectMultiple/themes/TextTagStyles.css.js');
+var classNames = require('./classNames-4fe2e158.js');
+var Text = require('./Text-08792b45.js');
+var IconButton = require('./IconButton-c4910f88.js');
+var HiddenAccessible = require('./HiddenAccessible-32ee0602.js');
+
+/**
+ * The component for rendering selectable/removable TextTag
+ *
+ * @param param0 The props for the TextTag component
+ */
+function TextTag({ children, removeIcon = 'never', isSelected = false, onRemoveAction, onSelect, onRemoveIconClick, isFocused, value }) {
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const spanRef = hooks.useRef(null);
+    const navigationTextId = hooks.useId();
+    const rootClasses = classNames.classNames([UNSAFE_SelectMultiple_themes_TextTagStyles_css.textTagStyles.base, isSelected && UNSAFE_SelectMultiple_themes_TextTagStyles_css.textTagStyles.selected]);
+    const onRemoveActionCallback = hooks.useCallback(() => {
+        onRemoveAction?.(value);
+    }, [value, onRemoveAction]);
+    const onSelectCallback = hooks.useCallback(() => {
+        onSelect?.(value);
+    }, [value, onSelect]);
+    const onRemoveIconClickCallback = hooks.useCallback(() => {
+        onRemoveIconClick?.(value);
+    }, [value, onRemoveIconClick]);
+    const onKeyUp = hooks.useCallback((event) => {
+        if (utils_PRIVATE_keyboardUtils.isBackspaceOrDelete(event)) {
+            onRemoveActionCallback();
+            return;
+        }
+    }, [onRemoveActionCallback]);
+    hooks.useEffect(() => {
+        if (isFocused && isSelected) {
+            spanRef.current?.focus();
+            spanRef.current?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isFocused, isSelected]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { ref: spanRef, class: rootClasses, tabIndex: -1, onClick: onSelectCallback, onKeyUp: onKeyUp, 
+                // Kill mouse down event to prevent focus transfer done by the parent container.
+                // We will programmatically take back focus in response to the onClick event.
+                onMouseDown: PRIVATE_SelectCommon.preventDefault, role: "option", "aria-describedby": navigationTextId, "aria-selected": isSelected ? 'true' : 'false', children: [jsxRuntime.jsx(Text.Text, { size: "md", variant: "inherit", children: children }), removeIcon === 'always' && (jsxRuntime.jsx(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsxRuntime.jsx(IconButton.IconButton, { size: "xs", variant: "ghost", onAction: onRemoveIconClickCallback, children: jsxRuntime.jsx(PRIVATE_ThemedIcons_CloseIcon.CloseIcon, {}) }) }))] }), jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: navigationTextId, children: translations.selectMultiple_removeSelectedTagInstructionText() })] }));
+}
+
+exports.TextTag = TextTag;
+//# sourceMappingURL=TextTag-aa1dc020.js.map

package/cjs/TextTag-aa1dc020.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTag-aa1dc020.js","sources":["../../src/UNSAFE_SelectMultiple/TextTag.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 { useCallback, useEffect, useId, useRef } from 'preact/hooks';\nimport { preventDefault } from '../PRIVATE_SelectCommon';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { IconButton } from '../UNSAFE_IconButton';\nimport { Text } from '../UNSAFE_Text';\nimport { CloseIcon } from '../PRIVATE_ThemedIcons/CloseIcon';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { isBackspaceOrDelete } from '../utils/PRIVATE_keyboardUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { textTagStyles } from './themes/TextTagStyles.css';\n\n/**\n * Props for the TextTag component\n */\ntype Props<V> = {\n  /**\n   * The label for the text tag\n   */\n  children: string;\n\n  /**\n   * Specifies whether to show the remove icon\n   */\n  removeIcon?: 'always' | 'never';\n\n  /**\n   * Indicates whether the component is focused\n   */\n  isFocused?: boolean;\n\n  /**\n   * Specifies if the TextTag component is selected\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to be invoked when Delete/Backspace is pressed\n   */\n  onRemoveAction?: (value: V) => void;\n\n  /**\n   * Callback to be invoked when clicking on the text tag\n   */\n  onSelect?: (value: V) => void;\n\n  /**\n   * Callback to be invoked when the remove icon is clicked\n   */\n  onRemoveIconClick?: (value: V) => void;\n\n  /**\n   * The value of the text tag\n   */\n  value: V;\n};\n\n/**\n * The component for rendering selectable/removable TextTag\n *\n * @param param0 The props for the TextTag component\n */\nexport function TextTag<V>({\n  children,\n  removeIcon = 'never',\n  isSelected = false,\n  onRemoveAction,\n  onSelect,\n  onRemoveIconClick,\n  isFocused,\n  value\n}: Props<V>) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const spanRef = useRef<HTMLSpanElement>(null);\n  const navigationTextId = useId();\n\n  const rootClasses = classNames([textTagStyles.base, isSelected && textTagStyles.selected]);\n\n  const onRemoveActionCallback = useCallback(() => {\n    onRemoveAction?.(value);\n  }, [value, onRemoveAction]);\n  const onSelectCallback = useCallback(() => {\n    onSelect?.(value);\n  }, [value, onSelect]);\n  const onRemoveIconClickCallback = useCallback(() => {\n    onRemoveIconClick?.(value);\n  }, [value, onRemoveIconClick]);\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (isBackspaceOrDelete(event)) {\n        onRemoveActionCallback();\n        return;\n      }\n    },\n    [onRemoveActionCallback]\n  );\n\n  useEffect(() => {\n    if (isFocused && isSelected) {\n      spanRef.current?.focus();\n      spanRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n  }, [isFocused, isSelected]);\n\n  return (\n    <>\n      <span\n        ref={spanRef}\n        class={rootClasses}\n        tabIndex={-1}\n        onClick={onSelectCallback}\n        onKeyUp={onKeyUp}\n        // Kill mouse down event to prevent focus transfer done by the parent container.\n        // We will programmatically take back focus in response to the onClick event.\n        onMouseDown={preventDefault}\n        role=\"option\"\n        aria-describedby={navigationTextId}\n        aria-selected={isSelected ? 'true' : 'false'}>\n        <Text size=\"md\" variant=\"inherit\">\n          {children}\n        </Text>\n        {removeIcon === 'always' && (\n          <TabbableModeContext.Provider value={{ isTabbable: false }}>\n            <IconButton size=\"xs\" variant=\"ghost\" onAction={onRemoveIconClickCallback}>\n              <CloseIcon />\n            </IconButton>\n          </TabbableModeContext.Provider>\n        )}\n      </span>\n      <HiddenAccessible id={navigationTextId}>\n        {translations.selectMultiple_removeSelectedTagInstructionText()}\n      </HiddenAccessible>\n    </>\n  );\n}\n"],"names":["useTranslationBundle","useRef","useId","classNames","textTagStyles","useCallback","isBackspaceOrDelete","useEffect","_jsxs","preventDefault","_jsx","Text","TabbableModeContext","IconButton","CloseIcon","HiddenAccessible"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkEA;;;;AAIG;AACG,SAAU,OAAO,CAAI,EACzB,QAAQ,EACR,UAAU,GAAG,OAAO,EACpB,UAAU,GAAG,KAAK,EAClB,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,KAAK,EACI,EAAA;AACT,IAAA,MAAM,YAAY,GAAGA,sDAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,OAAO,GAAGC,YAAM,CAAkB,IAAI,CAAC,CAAC;AAC9C,IAAA,MAAM,gBAAgB,GAAGC,WAAK,EAAE,CAAC;AAEjC,IAAA,MAAM,WAAW,GAAGC,qBAAU,CAAC,CAACC,4DAAa,CAAC,IAAI,EAAE,UAAU,IAAIA,4DAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE3F,IAAA,MAAM,sBAAsB,GAAGC,iBAAW,CAAC,MAAK;AAC9C,QAAA,cAAc,GAAG,KAAK,CAAC,CAAC;AAC1B,KAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;AAC5B,IAAA,MAAM,gBAAgB,GAAGA,iBAAW,CAAC,MAAK;AACxC,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtB,IAAA,MAAM,yBAAyB,GAAGA,iBAAW,CAAC,MAAK;AACjD,QAAA,iBAAiB,GAAG,KAAK,CAAC,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAGA,iBAAW,CACzB,CAAC,KAAoB,KAAI;AACvB,QAAA,IAAIC,+CAAmB,CAAC,KAAK,CAAC,EAAE;AAC9B,YAAA,sBAAsB,EAAE,CAAC;YACzB,OAAO;AACR,SAAA;AACH,KAAC,EACD,CAAC,sBAAsB,CAAC,CACzB,CAAC;IAEFC,eAAS,CAAC,MAAK;QACb,IAAI,SAAS,IAAI,UAAU,EAAE;AAC3B,YAAA,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACzB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AACvD,SAAA;AACH,KAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,QACEC,kDACEA,eACE,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,OAAO;;;AAGhB,gBAAA,WAAW,EAAEC,mCAAc,EAC3B,IAAI,EAAC,QAAQ,sBACK,gBAAgB,EAAA,eAAA,EACnB,UAAU,GAAG,MAAM,GAAG,OAAO,aAC5CC,cAAC,CAAAC,SAAI,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,YAC9B,QAAQ,EAAA,CACJ,EACN,UAAU,KAAK,QAAQ,KACtBD,eAACE,gDAAmB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EACxD,QAAA,EAAAF,cAAA,CAACG,qBAAU,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,yBAAyB,EACvE,QAAA,EAAAH,cAAA,CAACI,uCAAS,EAAA,EAAA,CAAG,GACF,EACgB,CAAA,CAChC,IACI,EACPJ,cAAA,CAACK,iCAAgB,EAAC,EAAA,EAAE,EAAE,gBAAgB,EAAA,QAAA,EACnC,YAAY,CAAC,+CAA+C,EAAE,EAC9C,CAAA,CAAA,EAAA,CAClB,EACH;AACJ;;;;"}

package/cjs/TextTagList-b90bae1f.js

@@ -0,0 +1,192 @@
+/* @oracle/oraclejet-preact: 15.0.12 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var hooks = require('preact/hooks');
+require('./hooks/UNSAFE_useFocusWithin.js');
+var hooks_UNSAFE_useUser = require('./hooks/UNSAFE_useUser.js');
+var utils_PRIVATE_keyboardUtils = require('./utils/PRIVATE_keyboardUtils.js');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+require('./utils/UNSAFE_classNames.js');
+var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+var TextTag = require('./TextTag-aa1dc020.js');
+var UNSAFE_SelectMultiple_themes_TextTagListStyles_css = require('./UNSAFE_SelectMultiple/themes/TextTagListStyles.css.js');
+var useFocusWithin = require('./useFocusWithin-fb152ea1.js');
+var classNames = require('./classNames-4fe2e158.js');
+
+/**
+ * Supported style props
+ */
+const supportedDimensions = utils_UNSAFE_arrayUtils.stringLiteralArray(['maxWidth']);
+/**
+ * Setting up interpolations
+ */
+const supportedInterpolations = Array.from(supportedDimensions, (x) => utils_UNSAFE_interpolations_dimensions.dimensionInterpolations[x]);
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(supportedInterpolations);
+/**
+ * TextTagList component for rendering the collection of TextTags as well
+ * as managing the navigation.
+ *
+ * @param param0 The props for the TextTagList component
+ * @param ref The ref for the component
+ */
+function _TextTagList(props, ref = () => { }) {
+    // destructure props
+    const { 'aria-label': ariaLabel, data, hasInsideLabel = false, removeIcon = 'never', onExitNavigation, onRemove } = props;
+    // ref for setting the scroll position for the div
+    const divRef = hooks.useRef(null);
+    // Internal state for storing the current selected tags
+    const [selectedTags, setSelectedTags] = hooks.useState([]);
+    // The navigation of focus will depend on the reading direction, so we need to
+    // get the current reading direction
+    const { direction } = hooks_UNSAFE_useUser.useUser();
+    // Create a ref for maintaining the current selected tag. This is used for
+    // determining which tag needs to be selected next when pressing ArrowLeft or
+    // ArrowRight.
+    const currentSelectedTagIndex = hooks.useRef(-1);
+    // Create a ref that holds the last tag which is needed when receiving focus
+    // programmatically.
+    const lastTag = data.at(-1)?.value;
+    const lastTagMeta = hooks.useRef({ value: lastTag, index: data.length - 1 });
+    lastTagMeta.current = { value: lastTag, index: data.length - 1 };
+    // A function to select the tag at the given index
+    const selectTagAtIndex = hooks.useCallback((index) => {
+        const key = data.at(index)?.value;
+        if (key == null)
+            return;
+        setSelectedTags([key]);
+    }, [data] // setSelectedTags is stable and not needed in dep array
+    );
+    // A function to clear the selection
+    const clearSelection = hooks.useCallback(() => {
+        setSelectedTags((previousSelectedTags) => {
+            currentSelectedTagIndex.current = -1;
+            return previousSelectedTags.length ? [] : previousSelectedTags;
+        });
+    }, []); // setSelectedTags is stable and not needed in dep array
+    // Handle the remove & delete events from the tags
+    const onTagRemoveIconClick = hooks.useCallback((value) => {
+        // on remove icon click we only need to remove the tag that
+        // invoked the event
+        onRemove?.([value]);
+        onExitNavigation?.();
+        // Firefox & Safari are not calling onBlur when focusing out of the
+        // tag list through onExitNavigation, so clear the selections explicitly
+        // here.
+        clearSelection();
+    }, [clearSelection, onExitNavigation, onRemove]);
+    const onTagRemoveAction = hooks.useCallback((value) => {
+        // on delete action we need to remove the tag that invoked the delete action
+        // as well as the selected tags.
+        const valuesToRemove = [...selectedTags];
+        if (!selectedTags.includes(value)) {
+            valuesToRemove.push(value);
+        }
+        onRemove?.(valuesToRemove);
+        onExitNavigation?.();
+        // Firefox & Safari are not calling onBlur when focusing out of the
+        // tag list through onExitNavigation, so clear the selections explicitly
+        // here.
+        clearSelection();
+    }, [selectedTags, clearSelection, onExitNavigation, onRemove]);
+    // Handle the select event from the tags
+    const onTagSelect = hooks.useCallback((value) => {
+        setSelectedTags([value]);
+        currentSelectedTagIndex.current = data.findIndex((tag) => tag.value === value);
+    }, [data, setSelectedTags]);
+    // Handle keyDown event on the tags container
+    const onTagKeyDown = hooks.useCallback((event) => {
+        if (data.length === 0)
+            return;
+        // Move towards the beginning of the list when pressing
+        // Left arrow (or Right arrow in rtl).
+        if ((direction === 'ltr' && event.code === 'ArrowLeft') ||
+            (direction === 'rtl' && event.code === 'ArrowRight')) {
+            if (currentSelectedTagIndex.current === 0)
+                return;
+            currentSelectedTagIndex.current -= 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // Move towards the end of the list when pressing
+        // Right arrow (or Left arrow in rtl). If at the end,
+        // invoke onExitNavigation.
+        if ((direction === 'ltr' && event.code === 'ArrowRight') ||
+            (direction === 'rtl' && event.code === 'ArrowLeft')) {
+            if (currentSelectedTagIndex.current === data.length - 1) {
+                // We have reached the end, so exit navigation
+                onExitNavigation?.();
+                return;
+            }
+            currentSelectedTagIndex.current += 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // When pressing the Home key, move the focus to the first tag
+        if (event.code === 'Home') {
+            currentSelectedTagIndex.current = 0;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // When pressing the End key, move the focus to the last tag
+        if (event.code === 'End') {
+            currentSelectedTagIndex.current = data.length - 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // If it is a Select All event, then select all the tags and do
+        // not move the focus
+        if (utils_PRIVATE_keyboardUtils.isSelectAll(event)) {
+            setSelectedTags(data.map((tag) => tag.value));
+            // prevent default to prevent selection of the whole screen
+            event.preventDefault();
+            return;
+        }
+    }, [data, direction, onExitNavigation, selectTagAtIndex, setSelectedTags]);
+    const handleOnFocus = hooks.useCallback(() => {
+        setSelectedTags((previousSelectedTags) => {
+            // select the tag only if there are no current selected tags
+            // and there is data
+            if (previousSelectedTags.length || lastTagMeta.current.value === undefined)
+                return previousSelectedTags;
+            currentSelectedTagIndex.current = lastTagMeta.current.index;
+            return [lastTagMeta.current.value];
+        });
+    }, []); // setSelectedTags is stable and not needed in the dep array
+    const handleOnBlur = hooks.useCallback(() => {
+        clearSelection();
+    }, [clearSelection]);
+    // When blurring out of the component, remove all selections
+    const { focusProps } = useFocusWithin.useFocusWithin({
+        onBlurWithin: handleOnBlur
+    });
+    // Update the ref to include the handler methods
+    hooks.useImperativeHandle(ref, () => ({
+        blur: handleOnBlur,
+        focus: handleOnFocus
+    }), [handleOnBlur, handleOnFocus]);
+    hooks.useEffect(() => {
+        // every time the data is changed, scroll to the end of the list to show the latest added
+        // pill
+        // In ltr we need to scroll to the right, so positive value should be passed and in rtl we
+        // need to scroll to the left, so negative value should be passed
+        divRef.current?.scrollTo({
+            left: divRef.current.scrollWidth * (direction === 'ltr' ? 1 : -1)
+        });
+    }, [data, direction]);
+    // the styles for the component
+    const styles = styleInterpolations(props);
+    // TODO: use theming and multi-variant styles
+    // https://jira.oraclecorp.com/jira/browse/JET-57596
+    const rootClasses = classNames.classNames([
+        UNSAFE_SelectMultiple_themes_TextTagListStyles_css.textTagListStyles.textTagListBase,
+        hasInsideLabel && UNSAFE_SelectMultiple_themes_TextTagListStyles_css.textTagListStyles.textTagListInsideLabel
+    ]);
+    return (jsxRuntime.jsx("div", { class: rootClasses, ref: divRef, tabIndex: -1, onKeyDown: onTagKeyDown, role: "listbox", "aria-label": ariaLabel, "aria-multiselectable": "true", style: styles, ...focusProps, children: data.map((tag, index) => (jsxRuntime.jsx(TextTag.TextTag, { isFocused: currentSelectedTagIndex.current === index, isSelected: selectedTags.includes(tag.value), onRemoveAction: onTagRemoveAction, onSelect: onTagSelect, onRemoveIconClick: onTagRemoveIconClick, removeIcon: removeIcon, value: tag.value, children: tag.label }, tag.value))) }));
+}
+const TextTagList = compat.forwardRef(_TextTagList);
+
+exports.TextTagList = TextTagList;
+//# sourceMappingURL=TextTagList-b90bae1f.js.map

package/cjs/TextTagList-b90bae1f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTagList-b90bae1f.js","sources":["../../src/UNSAFE_SelectMultiple/TextTagList.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 { Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';\nimport { useFocusWithin } from '../hooks/UNSAFE_useFocusWithin';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { isSelectAll } from '../utils/PRIVATE_keyboardUtils';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { DimensionProps, dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { TextTag } from './TextTag';\nimport { textTagListStyles } from './themes/TextTagListStyles.css';\n\n/**\n * Data structure of the text tag item\n */\ntype TextTagItem<V> = {\n  label: string;\n  value: V;\n};\n\n/**\n * Type of the ref handle of the component\n */\ntype TextTagListHandle = {\n  /**\n   * Focuses the text tag container\n   */\n  focus: () => void;\n\n  /**\n   * Blurs the text tag container\n   */\n  blur: () => void;\n};\n\n/**\n * Supported style props\n */\nconst supportedDimensions = stringLiteralArray(['maxWidth']);\ntype SupportedDimensions = typeof supportedDimensions[number];\ntype StyleProps = Pick<DimensionProps, SupportedDimensions>;\n\n/**\n * Props for the TextTag component\n */\ntype Props<V> = StyleProps & {\n  /**\n   * Specifies accessible screen reader text.\n   */\n  'aria-label'?: string;\n\n  /**\n   * An array of objects which is used to stamp out the TextTag components\n   */\n  data: TextTagItem<V>[];\n\n  /**\n   * Flag to indicate if the label is inside the container\n   * TODO: Handle this in a more generic way if/when we make this component generic\n   */\n  hasInsideLabel?: boolean;\n\n  /**\n   * Specifies whether to show the remove icon in the TextTag components\n   */\n  removeIcon?: 'always' | 'never';\n\n  /**\n   * A callback function to be invoked when the component wants to exit the navigation.\n   * This happens when one presses Right arrow after reaching the end of the list (or Left\n   * arrow in RTL mode).\n   */\n  onExitNavigation?: () => void;\n\n  /**\n   * A callback function to be invoked when one or more text tags are removed\n   */\n  onRemove?: (items: V[]) => void;\n};\n\n/**\n * Setting up interpolations\n */\nconst supportedInterpolations = Array.from(supportedDimensions, (x) => dimensionInterpolations[x]);\nconst styleInterpolations = mergeInterpolations<StyleProps>(supportedInterpolations);\n\n/**\n * TextTagList component for rendering the collection of TextTags as well\n * as managing the navigation.\n *\n * @param param0 The props for the TextTagList component\n * @param ref The ref for the component\n */\nfunction _TextTagList<V>(props: Props<V>, ref: Ref<TextTagListHandle> = () => {}) {\n  // destructure props\n  const {\n    'aria-label': ariaLabel,\n    data,\n    hasInsideLabel = false,\n    removeIcon = 'never',\n    onExitNavigation,\n    onRemove\n  } = props;\n\n  // ref for setting the scroll position for the div\n  const divRef = useRef<HTMLDivElement>(null);\n\n  // Internal state for storing the current selected tags\n  const [selectedTags, setSelectedTags] = useState<V[]>([]);\n\n  // The navigation of focus will depend on the reading direction, so we need to\n  // get the current reading direction\n  const { direction } = useUser();\n\n  // Create a ref for maintaining the current selected tag. This is used for\n  // determining which tag needs to be selected next when pressing ArrowLeft or\n  // ArrowRight.\n  const currentSelectedTagIndex = useRef(-1);\n  // Create a ref that holds the last tag which is needed when receiving focus\n  // programmatically.\n  const lastTag = data.at(-1)?.value;\n  const lastTagMeta = useRef({ value: lastTag, index: data.length - 1 });\n  lastTagMeta.current = { value: lastTag, index: data.length - 1 };\n\n  // A function to select the tag at the given index\n  const selectTagAtIndex = useCallback(\n    (index: number) => {\n      const key = data.at(index)?.value;\n      if (key == null) return;\n      setSelectedTags([key]);\n    },\n    [data] // setSelectedTags is stable and not needed in dep array\n  );\n  // A function to clear the selection\n  const clearSelection = useCallback(() => {\n    setSelectedTags((previousSelectedTags) => {\n      currentSelectedTagIndex.current = -1;\n      return previousSelectedTags.length ? [] : previousSelectedTags;\n    });\n  }, []); // setSelectedTags is stable and not needed in dep array\n\n  // Handle the remove & delete events from the tags\n  const onTagRemoveIconClick = useCallback(\n    (value: V) => {\n      // on remove icon click we only need to remove the tag that\n      // invoked the event\n      onRemove?.([value]);\n      onExitNavigation?.();\n      // Firefox & Safari are not calling onBlur when focusing out of the\n      // tag list through onExitNavigation, so clear the selections explicitly\n      // here.\n      clearSelection();\n    },\n    [clearSelection, onExitNavigation, onRemove]\n  );\n  const onTagRemoveAction = useCallback(\n    (value: V) => {\n      // on delete action we need to remove the tag that invoked the delete action\n      // as well as the selected tags.\n      const valuesToRemove = [...selectedTags];\n      if (!selectedTags.includes(value)) {\n        valuesToRemove.push(value);\n      }\n      onRemove?.(valuesToRemove);\n      onExitNavigation?.();\n      // Firefox & Safari are not calling onBlur when focusing out of the\n      // tag list through onExitNavigation, so clear the selections explicitly\n      // here.\n      clearSelection();\n    },\n    [selectedTags, clearSelection, onExitNavigation, onRemove]\n  );\n\n  // Handle the select event from the tags\n  const onTagSelect = useCallback(\n    (value: V) => {\n      setSelectedTags([value]);\n      currentSelectedTagIndex.current = data.findIndex((tag) => tag.value === value);\n    },\n    [data, setSelectedTags]\n  );\n\n  // Handle keyDown event on the tags container\n  const onTagKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (data.length === 0) return;\n      // Move towards the beginning of the list when pressing\n      // Left arrow (or Right arrow in rtl).\n      if (\n        (direction === 'ltr' && event.code === 'ArrowLeft') ||\n        (direction === 'rtl' && event.code === 'ArrowRight')\n      ) {\n        if (currentSelectedTagIndex.current === 0) return;\n        currentSelectedTagIndex.current -= 1;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // Move towards the end of the list when pressing\n      // Right arrow (or Left arrow in rtl). If at the end,\n      // invoke onExitNavigation.\n      if (\n        (direction === 'ltr' && event.code === 'ArrowRight') ||\n        (direction === 'rtl' && event.code === 'ArrowLeft')\n      ) {\n        if (currentSelectedTagIndex.current === data.length - 1) {\n          // We have reached the end, so exit navigation\n          onExitNavigation?.();\n          return;\n        }\n        currentSelectedTagIndex.current += 1;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // When pressing the Home key, move the focus to the first tag\n      if (event.code === 'Home') {\n        currentSelectedTagIndex.current = 0;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // When pressing the End key, move the focus to the last tag\n      if (event.code === 'End') {\n        currentSelectedTagIndex.current = data.length - 1;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // If it is a Select All event, then select all the tags and do\n      // not move the focus\n      if (isSelectAll(event)) {\n        setSelectedTags(data.map((tag) => tag.value));\n        // prevent default to prevent selection of the whole screen\n        event.preventDefault();\n        return;\n      }\n    },\n    [data, direction, onExitNavigation, selectTagAtIndex, setSelectedTags]\n  );\n\n  const handleOnFocus = useCallback(() => {\n    setSelectedTags((previousSelectedTags) => {\n      // select the tag only if there are no current selected tags\n      // and there is data\n      if (previousSelectedTags.length || lastTagMeta.current.value === undefined)\n        return previousSelectedTags;\n\n      currentSelectedTagIndex.current = lastTagMeta.current.index;\n      return [lastTagMeta.current.value];\n    });\n  }, []); // setSelectedTags is stable and not needed in the dep array\n  const handleOnBlur = useCallback(() => {\n    clearSelection();\n  }, [clearSelection]);\n\n  // When blurring out of the component, remove all selections\n  const { focusProps } = useFocusWithin({\n    onBlurWithin: handleOnBlur\n  });\n\n  // Update the ref to include the handler methods\n  useImperativeHandle(\n    ref,\n    () => ({\n      blur: handleOnBlur,\n      focus: handleOnFocus\n    }),\n    [handleOnBlur, handleOnFocus]\n  );\n\n  useEffect(() => {\n    // every time the data is changed, scroll to the end of the list to show the latest added\n    // pill\n    // In ltr we need to scroll to the right, so positive value should be passed and in rtl we\n    // need to scroll to the left, so negative value should be passed\n    divRef.current?.scrollTo({\n      left: divRef.current.scrollWidth * (direction === 'ltr' ? 1 : -1)\n    });\n  }, [data, direction]);\n\n  // the styles for the component\n  const styles = styleInterpolations(props);\n  // TODO: use theming and multi-variant styles\n  // https://jira.oraclecorp.com/jira/browse/JET-57596\n  const rootClasses = classNames([\n    textTagListStyles.textTagListBase,\n    hasInsideLabel && textTagListStyles.textTagListInsideLabel\n  ]);\n\n  return (\n    <div\n      class={rootClasses}\n      ref={divRef}\n      tabIndex={-1}\n      onKeyDown={onTagKeyDown}\n      role=\"listbox\"\n      aria-label={ariaLabel}\n      aria-multiselectable=\"true\"\n      style={styles}\n      {...focusProps}>\n      {data.map((tag, index) => (\n        <TextTag\n          isFocused={currentSelectedTagIndex.current === index}\n          isSelected={selectedTags.includes(tag.value)}\n          key={tag.value}\n          onRemoveAction={onTagRemoveAction}\n          onSelect={onTagSelect}\n          onRemoveIconClick={onTagRemoveIconClick}\n          removeIcon={removeIcon}\n          value={tag.value}>\n          {tag.label}\n        </TextTag>\n      ))}\n    </div>\n  );\n}\n\nexport const TextTagList = forwardRef<TextTagListHandle, Props<any>>(_TextTagList);\n"],"names":["stringLiteralArray","dimensionInterpolations","mergeInterpolations","useRef","useState","useUser","useCallback","isSelectAll","useFocusWithin","useImperativeHandle","useEffect","classNames","textTagListStyles","_jsx","TextTag","forwardRef"],"mappings":"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"}