@oracle/oraclejet-preact 15.0.3 → 15.0.5

package/es/TextFieldVariants.styles.css

@@ -1,22 +1,22 @@
-.TextFieldVariants_multiVariantStyles_compound_7__1f8p3fet {
+.TextFieldVariants_multiVariantStyles_compound_7__vaf9zit {
   z-index: 1;
 }
-.TextFieldVariants_multiVariantStyles_compound_8__1f8p3feu {
+.TextFieldVariants_multiVariantStyles_compound_8__vaf9ziu {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.TextFieldVariants_multiVariantStyles_compound_9__1f8p3fev {
+.TextFieldVariants_multiVariantStyles_compound_9__vaf9ziv {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_10__1f8p3few {
+.TextFieldVariants_multiVariantStyles_compound_10__vaf9ziw {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_11__1f8p3fex {
+.TextFieldVariants_multiVariantStyles_compound_11__vaf9zix {
   min-height: var(--insideEdgeHeight__w6gg1yb);
 }

package/es/TextFieldVariants.styles2.css

@@ -1,22 +1,22 @@
-.TextFieldVariants_multiVariantStyles_compound_7__vaf9zit {
+.TextFieldVariants_multiVariantStyles_compound_7__1f8p3fet {
   z-index: 1;
 }
-.TextFieldVariants_multiVariantStyles_compound_8__vaf9ziu {
+.TextFieldVariants_multiVariantStyles_compound_8__1f8p3feu {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.TextFieldVariants_multiVariantStyles_compound_9__vaf9ziv {
+.TextFieldVariants_multiVariantStyles_compound_9__1f8p3fev {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_10__vaf9ziw {
+.TextFieldVariants_multiVariantStyles_compound_10__1f8p3few {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_11__vaf9zix {
+.TextFieldVariants_multiVariantStyles_compound_11__1f8p3fex {
   min-height: var(--insideEdgeHeight__w6gg1yb);
 }

package/es/TextTag-b18039d0.js

@@ -0,0 +1,57 @@
+/* @oracle/oraclejet-preact: 15.0.5 */
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { useRef, useId, useCallback, useEffect } from 'preact/hooks';
+import { preventDefault } from './PRIVATE_SelectCommon.js';
+import './UNSAFE_HiddenAccessible.js';
+import './UNSAFE_IconButton.js';
+import './UNSAFE_Text.js';
+import { CloseIcon as SvgClose } from './PRIVATE_ThemedIcons/CloseIcon.js';
+import { TabbableModeContext } from './hooks/UNSAFE_useTabbableMode.js';
+import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
+import { isBackspaceOrDelete } from './utils/PRIVATE_keyboardUtils.js';
+import './utils/UNSAFE_classNames.js';
+import { textTagStyles } from './UNSAFE_SelectMultiple/themes/TextTagStyles.css.js';
+import { c as classNames } from './classNames-18f43a95.js';
+import { T as Text } from './Text-2d5b387b.js';
+import { I as IconButton } from './IconButton-18c5e096.js';
+import { H as HiddenAccessible } from './HiddenAccessible-05ad2da9.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 = useTranslationBundle('@oracle/oraclejet-preact');
+    const spanRef = useRef(null);
+    const navigationTextId = useId();
+    const rootClasses = classNames([textTagStyles.base, isSelected && textTagStyles.selected]);
+    const onRemoveActionCallback = useCallback(() => {
+        onRemoveAction?.(value);
+    }, [value, onRemoveAction]);
+    const onSelectCallback = useCallback(() => {
+        onSelect?.(value);
+    }, [value, onSelect]);
+    const onRemoveIconClickCallback = useCallback(() => {
+        onRemoveIconClick?.(value);
+    }, [value, onRemoveIconClick]);
+    const onKeyUp = useCallback((event) => {
+        if (isBackspaceOrDelete(event)) {
+            onRemoveActionCallback();
+            return;
+        }
+    }, [onRemoveActionCallback]);
+    useEffect(() => {
+        if (isFocused && isSelected) {
+            spanRef.current?.focus();
+            spanRef.current?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isFocused, isSelected]);
+    return (jsxs(Fragment, { children: [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: preventDefault, role: "option", "aria-describedby": navigationTextId, "aria-selected": isSelected ? 'true' : 'false', children: [jsx(Text, { size: "md", variant: "inherit", children: children }), removeIcon === 'always' && (jsx(TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsx(IconButton, { size: "xs", variant: "ghost", onAction: onRemoveIconClickCallback, children: jsx(SvgClose, {}) }) }))] }), jsx(HiddenAccessible, { id: navigationTextId, children: translations.selectMultiple_removeSelectedTagInstructionText() })] }));
+}
+
+export { TextTag as T };
+//# sourceMappingURL=TextTag-b18039d0.js.map

package/es/TextTag-b18039d0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTag-b18039d0.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":["_jsxs","_jsx","CloseIcon"],"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,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;AAC9C,IAAA,MAAM,gBAAgB,GAAG,KAAK,EAAE,CAAC;AAEjC,IAAA,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE3F,IAAA,MAAM,sBAAsB,GAAG,WAAW,CAAC,MAAK;AAC9C,QAAA,cAAc,GAAG,KAAK,CAAC,CAAC;AAC1B,KAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;AAC5B,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAK;AACxC,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtB,IAAA,MAAM,yBAAyB,GAAG,WAAW,CAAC,MAAK;AACjD,QAAA,iBAAiB,GAAG,KAAK,CAAC,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAoB,KAAI;AACvB,QAAA,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAAE;AAC9B,YAAA,sBAAsB,EAAE,CAAC;YACzB,OAAO;AACR,SAAA;AACH,KAAC,EACD,CAAC,sBAAsB,CAAC,CACzB,CAAC;IAEF,SAAS,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,QACEA,4BACEA,IACE,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,EAAE,cAAc,EAC3B,IAAI,EAAC,QAAQ,sBACK,gBAAgB,EAAA,eAAA,EACnB,UAAU,GAAG,MAAM,GAAG,OAAO,aAC5CC,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,YAC9B,QAAQ,EAAA,CACJ,EACN,UAAU,KAAK,QAAQ,KACtBA,IAAC,mBAAmB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EACxD,QAAA,EAAAA,GAAA,CAAC,UAAU,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,yBAAyB,EACvE,QAAA,EAAAA,GAAA,CAACC,QAAS,EAAA,EAAA,CAAG,GACF,EACgB,CAAA,CAChC,IACI,EACPD,GAAA,CAAC,gBAAgB,EAAC,EAAA,EAAE,EAAE,gBAAgB,EAAA,QAAA,EACnC,YAAY,CAAC,+CAA+C,EAAE,EAC9C,CAAA,CAAA,EAAA,CAClB,EACH;AACJ;;;;"}

package/es/TextTagList-ca9914ab.js

@@ -0,0 +1,190 @@
+/* @oracle/oraclejet-preact: 15.0.5 */
+import { jsx } from 'preact/jsx-runtime';
+import { forwardRef } from 'preact/compat';
+import { useRef, useState, useCallback, useImperativeHandle, useEffect } from 'preact/hooks';
+import './hooks/UNSAFE_useFocusWithin.js';
+import { useUser } from './hooks/UNSAFE_useUser.js';
+import { isSelectAll } from './utils/PRIVATE_keyboardUtils.js';
+import { stringLiteralArray } from './utils/UNSAFE_arrayUtils.js';
+import './utils/UNSAFE_classNames.js';
+import { dimensionInterpolations } from './utils/UNSAFE_interpolations/dimensions.js';
+import { mergeInterpolations } from './utils/UNSAFE_mergeInterpolations.js';
+import { T as TextTag } from './TextTag-b18039d0.js';
+import { textTagListStyles } from './UNSAFE_SelectMultiple/themes/TextTagListStyles.css.js';
+import { u as useFocusWithin } from './useFocusWithin-d027dbb5.js';
+import { c as classNames } from './classNames-18f43a95.js';
+
+/**
+ * Supported style props
+ */
+const supportedDimensions = stringLiteralArray(['maxWidth']);
+/**
+ * Setting up interpolations
+ */
+const supportedInterpolations = Array.from(supportedDimensions, (x) => dimensionInterpolations[x]);
+const styleInterpolations = 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 = useRef(null);
+    // Internal state for storing the current selected tags
+    const [selectedTags, setSelectedTags] = useState([]);
+    // The navigation of focus will depend on the reading direction, so we need to
+    // get the current reading direction
+    const { direction } = 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 = 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 = 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 = 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 = 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 = 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 = 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 = useCallback((value) => {
+        setSelectedTags([value]);
+        currentSelectedTagIndex.current = data.findIndex((tag) => tag.value === value);
+    }, [data, setSelectedTags]);
+    // Handle keyDown event on the tags container
+    const onTagKeyDown = 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 (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 = 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 = useCallback(() => {
+        clearSelection();
+    }, [clearSelection]);
+    // When blurring out of the component, remove all selections
+    const { focusProps } = useFocusWithin({
+        onBlurWithin: handleOnBlur
+    });
+    // Update the ref to include the handler methods
+    useImperativeHandle(ref, () => ({
+        blur: handleOnBlur,
+        focus: handleOnFocus
+    }), [handleOnBlur, handleOnFocus]);
+    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([
+        textTagListStyles.textTagListBase,
+        hasInsideLabel && textTagListStyles.textTagListInsideLabel
+    ]);
+    return (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) => (jsx(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 = forwardRef(_TextTagList);
+
+export { TextTagList as T };
+//# sourceMappingURL=TextTagList-ca9914ab.js.map

package/es/TextTagList-ca9914ab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTagList-ca9914ab.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":["_jsx"],"mappings":"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"}