@oracle/oraclejet-preact 14.0.10 → 14.1.1

package/cjs/Indexer-f032ef08.js

@@ -0,0 +1,534 @@
+/* @oracle/oraclejet-preact: 14.1.1 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var hooks = require('preact/hooks');
+require('./UNSAFE_Flex.js');
+
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+var useSingleSelection = require('./useSingleSelection-4378132f.js');
+var hooks_PRIVATE_useCurrentKey = require('./hooks/PRIVATE_useCurrentKey.js');
+var hooks_PRIVATE_useCollectionFocusRing = require('./hooks/PRIVATE_useCollectionFocusRing.js');
+var utils_PRIVATE_collectionUtils = require('./utils/PRIVATE_collectionUtils.js');
+require('./utils/PRIVATE_clientHints.js');
+var hooks_UNSAFE_useId = require('./hooks/UNSAFE_useId.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+require('./UNSAFE_HiddenAccessible.js');
+require('./PRIVATE_Collection.js');
+var tslib_es6 = require('./tslib.es6-337905dc.js');
+require('./utils/UNSAFE_classNames.js');
+var compat = require('preact/compat');
+var classNames = require('./classNames-28108b7d.js');
+var Flex = require('./Flex-d73eb41d.js');
+var Collection = require('./Collection-4f785d2f.js');
+var HiddenAccessible = require('./HiddenAccessible-88a41d06.js');
+var clientHints = require('./clientHints-5c8adda8.js');
+
+/**
+ * The others section variable that application could use
+ * to compare value
+ */
+// const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');
+
+const SECTION_OTHERS = Object.freeze({
+  key: '__others__',
+  label: '#'
+});
+const liStyles = {
+  base: "q0i9rd",
+  disabled: "j45p0o",
+  focused: "jn06r0",
+  selected: "_7utgrd"
+};
+const ITEM_STYLE_CLASS = liStyles.base;
+const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;
+const dotStyles = {
+  base: "_18kqzo2"
+};
+const SectionItem = compat.forwardRef((props, ref) => {
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  const {
+    context,
+    selectedKey
+  } = props;
+  const isSelected = context.data.key === selectedKey;
+  const commonProps = getCommonProps(props, ref);
+  const itemClasses = classNames.classNames([commonProps.class, context.data.isDisabled && liStyles.disabled, isSelected && liStyles.selected]);
+  const sectionLabel = context.data.label || context.data.key;
+  const valueText = context.data.isDisabled ? translations.indexer_disabledLabel({
+    SECTION: `${sectionLabel}`
+  }) : `${sectionLabel}`;
+  return jsxRuntime.jsx("li", Object.assign({}, commonProps, {
+    class: itemClasses,
+    "data-oj-valuetext": valueText,
+    "data-oj-disabled": context.data.isDisabled
+  }, {
+    children: context.data.label || context.data.key
+  }));
+});
+
+function getCommonProps({
+  context,
+  currentKey,
+  valueNow,
+  isFocusRingVisible
+}, ref) {
+  const isCurrent = context.data.key === currentKey;
+  const classes = classNames.classNames([liStyles.base, isCurrent && isFocusRingVisible && liStyles.focused]);
+  return Object.assign(Object.assign({}, isCurrent && {
+    ref
+  }), {
+    key: context.data.key,
+    class: classes,
+    'data-oj-key': context.data.key,
+    'data-oj-key-type': typeof context.data.key,
+    'data-oj-valuenow': valueNow,
+    isFocusRingVisible: !!isFocusRingVisible
+  });
+} // render the last section, that contains the last character and others character
+
+
+const LastSectionItem = compat.forwardRef((_a, ref) => {
+  var {
+    lastValueNow
+  } = _a,
+      sectionProps = tslib_es6.__rest(_a, ["lastValueNow"]);
+
+  const commonProps = Object.assign(Object.assign({}, sectionProps), {
+    ref
+  });
+  return jsxRuntime.jsxs(preact.Fragment, {
+    children: [jsxRuntime.jsx(SectionItem, Object.assign({}, commonProps)), jsxRuntime.jsx(OthersItem, Object.assign({}, commonProps, {
+      ref: ref,
+      context: {
+        index: -1,
+        data: SECTION_OTHERS
+      },
+      valueNow: lastValueNow
+    }))]
+  });
+});
+const OthersItem = compat.forwardRef((props, ref) => {
+  const {
+    context,
+    selectedKey
+  } = props;
+  const commonProps = getCommonProps(props, ref);
+  const isSelected = context.data.key === selectedKey;
+  const othersClasses = classNames.classNames([commonProps.class, isSelected && liStyles.selected]);
+  const othersValueText = SECTION_OTHERS.label;
+  return jsxRuntime.jsx("li", Object.assign({}, commonProps, {
+    class: othersClasses,
+    "data-oj-valuetext": othersValueText
+  }, {
+    children: context.data.label
+  }));
+});
+const SeparatorItem = compat.forwardRef((props, ref) => {
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  const {
+    context,
+    sections
+  } = props;
+  const commonProps = getCommonProps(props, ref);
+  const {
+    from,
+    to
+  } = getSeparatorRange(props);
+
+  if (!isInSeparatorMiddle(context.index, from, to)) {
+    return null;
+  }
+
+  const fromText = sections[from].label || sections[from].key;
+  const toText = sections[to].label || sections[to].key;
+  const separatorClasses = classNames.classNames([dotStyles.base]);
+  const separatorValueText = translations.indexer_separatorLabel({
+    FROM_SECTION: `${fromText}`,
+    TO_SECTION: `${toText}`
+  });
+  return jsxRuntime.jsx("li", Object.assign({}, commonProps, {
+    "data-oj-valuetext": separatorValueText
+  }, {
+    children: jsxRuntime.jsx(Flex.Flex, Object.assign({
+      align: "center",
+      justify: "center"
+    }, {
+      children: jsxRuntime.jsx("div", {
+        class: separatorClasses
+      })
+    }))
+  }));
+});
+function hasSeparator(props) {
+  const {
+    from,
+    to
+  } = getSeparatorRange(props);
+  return isInSeparatorMiddle(props.context.index, from, to);
+}
+
+function getSeparatorRange({
+  context,
+  sectionsPerTruncation,
+  last
+}) {
+  const from = context.index - context.index % sectionsPerTruncation + 1;
+  let to = from + sectionsPerTruncation - 2;
+  to = to >= last ? last - 1 : to;
+  return {
+    from,
+    to
+  };
+}
+
+function isInSeparatorMiddle(index, from, to) {
+  return index === Math.floor((from + to) / 2);
+}
+
+const styles = {
+  base: "_1vdsvsw"
+};
+const ulStyles = {
+  base: "_1b610c3"
+};
+const defaultSections = [{
+  key: 'A'
+}, {
+  key: 'B'
+}, {
+  key: 'C'
+}, {
+  key: 'D'
+}, {
+  key: 'E'
+}, {
+  key: 'F'
+}, {
+  key: 'G'
+}, {
+  key: 'H'
+}, {
+  key: 'I'
+}, {
+  key: 'J'
+}, {
+  key: 'K'
+}, {
+  key: 'L'
+}, {
+  key: 'M'
+}, {
+  key: 'N'
+}, {
+  key: 'O'
+}, {
+  key: 'P'
+}, {
+  key: 'Q'
+}, {
+  key: 'R'
+}, {
+  key: 'S'
+}, {
+  key: 'T'
+}, {
+  key: 'U'
+}, {
+  key: 'V'
+}, {
+  key: 'W'
+}, {
+  key: 'X'
+}, {
+  key: 'Y'
+}, {
+  key: 'Z'
+}];
+/**
+ * Pure Preact based component that consumes Collection component
+ * and renders an indexer.
+ */
+
+function Indexer({
+  sections = defaultSections,
+  value,
+  onCommit = () => {}
+}) {
+  var _a;
+
+  const rootRef = hooks.useRef(null);
+  const ulRef = hooks.useRef(null);
+  const currElementRef = preact.createRef();
+  const [current, setCurrent] = hooks.useState((_a = sections[0]) === null || _a === void 0 ? void 0 : _a.key); // the number of sections in each truncation
+
+  const [sectionsPerTruncation, setSectionsPerTruncation] = hooks.useState(-1); // the total number of rendered sections and separators
+
+  const renderedSectionsCount = hooks.useRef(-1);
+  const itemHeightRef = hooks.useRef(0); // the id for aria describedby
+
+  const uniqueId = hooks_UNSAFE_useId.useId();
+  const [showFocusRing, focusRingProps] = hooks_PRIVATE_useCollectionFocusRing.useCollectionFocusRing(elem => {
+    var _a;
+
+    return !!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(elem));
+  }, ['ArrowUp', 'ArrowDown']);
+  const {
+    currentKeyProps
+  } = hooks_PRIVATE_useCurrentKey.useCurrentKey(element => utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR), utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, current, true, ITEM_SELECTOR), utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, current, false, ITEM_SELECTOR), current, detail => setCurrent(detail.value));
+  const {
+    selectionProps
+  } = useSingleSelection.useSingleSelection(element => handleKeyExtract(element, ulRef, current), // pass in undefined so onCommit handler will be called
+  // no matter whether the Section was selected before or not
+  undefined, detail => handleSelection(detail, onCommit, sections));
+  /**
+   * Item renderer that will return a section item or a section separator
+   * based on the sectionsPerTruncation and item context index.
+   * @param context item context
+   */
+
+  const itemRenderer = context => {
+    const last = sections.length - 1;
+    renderedSectionsCount.current += 1;
+    const commonProps = {
+      context,
+      ref: currElementRef,
+      currentKey: current,
+      selectedKey: value,
+      valueNow: renderedSectionsCount.current,
+      isFocusRingVisible: !!showFocusRing
+    }; // render the last and the others character, they are always present
+
+    if (context.index === last) {
+      return jsxRuntime.jsx(LastSectionItem, Object.assign({}, commonProps, {
+        lastValueNow: renderedSectionsCount.current + 1
+      }));
+    } // render a section, in the non-truncation case or when it is the first in a truncation
+
+
+    if (sectionsPerTruncation <= 1 || context.index % sectionsPerTruncation === 0) {
+      return jsxRuntime.jsx(SectionItem, Object.assign({}, commonProps));
+    } // render the separator in the middle of a truncation
+
+
+    const separatorProps = Object.assign(Object.assign({}, commonProps), {
+      sectionsPerTruncation,
+      last,
+      sections
+    });
+
+    if (hasSeparator(separatorProps)) {
+      return jsxRuntime.jsx(SeparatorItem, Object.assign({}, separatorProps));
+    } // remove the count for truncated sections
+
+
+    renderedSectionsCount.current -= 1;
+    return null;
+  }; // truncate the Indexer during resize
+
+
+  const handleResize = hooks.useCallback(entries => {
+    var _a;
+
+    for (const entry of entries) {
+      updateSectionsPerTruncation(entry.contentRect.height, itemHeightRef.current, sections.length, (_a = sections[0]) === null || _a === void 0 ? void 0 : _a.key, sectionsPerTruncation, setSectionsPerTruncation, setCurrent);
+    }
+  }, [sections, sectionsPerTruncation]);
+  hooks.useEffect(() => {
+    var _a, _b, _c, _d;
+
+    if (ulRef.current) {
+      // Get aria values from IndexerItem to update aria values on Indexer ul element
+      ulRef.current.setAttribute('aria-valuemax', renderedSectionsCount.current + 1 + '');
+      ulRef.current.setAttribute('aria-valuetext', ((_b = (_a = currElementRef.current) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b['ojValuetext']) || '');
+      ulRef.current.setAttribute('aria-valuenow', ((_d = (_c = currElementRef.current) === null || _c === void 0 ? void 0 : _c.dataset) === null || _d === void 0 ? void 0 : _d['ojValuenow']) || '');
+    }
+
+    renderedSectionsCount.current = -1;
+  });
+  /**
+   * Set up the initial values for sectionsPerTruncation and event listeners
+   */
+
+  hooks.useEffect(() => {
+    var _a, _b;
+
+    const root = rootRef.current;
+
+    if (root) {
+      itemHeightRef.current = ((_a = root.querySelector('li')) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+      updateSectionsPerTruncation(root.offsetHeight, itemHeightRef.current, sections.length, (_b = sections[0]) === null || _b === void 0 ? void 0 : _b.key, sectionsPerTruncation, setSectionsPerTruncation, setCurrent);
+    }
+  }, [sections, sectionsPerTruncation]);
+  /**
+   * Set up resize observer and refresh the resize observer when
+   * sectionsPerTruncation is changed, otherwise it will only have the
+   * old copy of sectionsPerTruncation.
+   */
+
+  hooks.useEffect(() => {
+    const root = rootRef.current;
+
+    if (root) {
+      const resizeObserver = new ResizeObserver(entries => {
+        handleResize(entries);
+      });
+      resizeObserver.observe(root);
+      return () => {
+        resizeObserver.unobserve(root);
+      };
+    }
+
+    return undefined;
+  }, [sectionsPerTruncation, handleResize]);
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  return jsxRuntime.jsxs("div", Object.assign({
+    ref: rootRef,
+    class: styles.base
+  }, {
+    children: [jsxRuntime.jsx(Flex.Flex, Object.assign({
+      align: "center",
+      width: "6x",
+      height: "100%"
+    }, {
+      children: jsxRuntime.jsx("ul", Object.assign({}, utils_UNSAFE_mergeProps.mergeProps(currentKeyProps, focusRingProps, selectionProps), {
+        ref: ulRef,
+        tabIndex: 0,
+        "aria-label": "Indexer",
+        "aria-orientation": "vertical",
+        "aria-valuemin": "0",
+        "aria-describedby": uniqueId,
+        role: "slider",
+        class: ulStyles.base
+      }, {
+        children: jsxRuntime.jsx(Collection.Collection, Object.assign({
+          items: sections
+        }, {
+          children: itemRenderer
+        }))
+      }))
+    })), jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, {
+      children: jsxRuntime.jsx("span", Object.assign({
+        id: uniqueId
+      }, {
+        children: getIndexerDescription(translations)
+      }))
+    })]
+  }));
+} // A function to extract key for selection
+
+const handleKeyExtract = (element, rootRef, current) => {
+  if (element === rootRef.current) {
+    return current === undefined ? null : current;
+  }
+
+  return utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR);
+};
+
+const handleSelection = (detail, onCommit, sections) => {
+  if (detail.value === SECTION_OTHERS.key) {
+    onCommit({
+      value: SECTION_OTHERS.key
+    });
+  } else {
+    const selectedSection = sections.find(section => section.key === detail.value);
+    onCommit({
+      value: selectedSection.key
+    });
+  }
+};
+/**
+ * A function that calculates the section count, based on
+ * the container height and the number of sections
+ * @param height height of Indexer container
+ */
+
+
+const updateSectionsPerTruncation = (height, itemHeight, sectionsLength, firstSectionKey, sectionsPerTruncation, setSectionsPerTruncation, setCurrent) => {
+  if (height === 0 || itemHeight === 0) {
+    return;
+  }
+
+  const maxSections = height / itemHeight;
+  const last = sectionsLength - 1; // when the container size is too small to hold two sections
+
+  if (maxSections < 2) {
+    if (sectionsPerTruncation !== last) {
+      setSectionsPerTruncation(last);
+      setCurrent(firstSectionKey);
+    } // no truncation
+    // compare with < 0.01 for the deviation from calculation, when sectionsLength and maxSections
+    // are about the same, maxNum === sectionsLength doesn't work
+
+  } else if (maxSections > sectionsLength || sectionsLength - maxSections < 0.01) {
+    if (sectionsPerTruncation > 1) {
+      setSectionsPerTruncation(1);
+      setCurrent(firstSectionKey);
+    } // need truncation
+
+  } else {
+    const tempSectionCount = findSectionCount(maxSections, last);
+
+    if (tempSectionCount !== sectionsPerTruncation && tempSectionCount < sectionsLength) {
+      setSectionsPerTruncation(tempSectionCount);
+      setCurrent(firstSectionKey);
+    }
+  }
+};
+/**
+ * A helper function to find the best section count
+ * in a truncation
+ *
+ * @param maxSections maximum number of sections allowed in a truncation
+ * @param last the index of last section
+ */
+
+
+const findSectionCount = (maxSections, last) => {
+  // need truncation
+  maxSections -= 2; // minus the last character and the others character
+
+  maxSections /= 2; // each truncation has a section and a separator
+
+  const newSectionCount = Math.round(last / maxSections) + 1;
+  const truncationLeftover = last % newSectionCount;
+  const truncationCount = Math.floor(last / newSectionCount) + (truncationLeftover > 1 ? 1 : 0); // When the sectionCount becomes greater, it will result in
+  // same truncations but with different sections appearing.
+  // The following is to find the best sectionCount in this case
+  // and prevent unnecessary truncations.
+
+  let tempLeftover = last - (truncationCount - 1) * newSectionCount;
+  let tempSectionCount = newSectionCount;
+
+  while (tempSectionCount > tempLeftover) {
+    tempSectionCount -= 1;
+    tempLeftover = last - (truncationCount - 1) * tempSectionCount;
+  }
+
+  if (tempSectionCount != newSectionCount) {
+    tempSectionCount += 1;
+  }
+
+  return tempSectionCount;
+};
+/**
+ * Helper function to find the aria description for Indexer,
+ * based on whether current device is a mobile device
+ */
+
+
+function getIndexerDescription(translations) {
+  const deviceType = clientHints.getClientHints().deviceType;
+
+  if (deviceType === 'phone' || deviceType === 'tablet') {
+    return translations.indexer_touchInstructionText();
+  } else {
+    return translations.indexer_keyboardInstructionText();
+  }
+}
+
+exports.Indexer = Indexer;
+exports.SECTION_OTHERS = SECTION_OTHERS;
+/*  */
+//# sourceMappingURL=Indexer-f032ef08.js.map

package/cjs/Indexer-f032ef08.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indexer-f032ef08.js","sources":["../../src/UNSAFE_Indexer/IndexerItems.tsx","../../src/UNSAFE_Indexer/Indexer.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Fragment } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { Flex } from '../UNSAFE_Flex';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '../resources/nls/bundle';\nimport { ItemContext } from 'src/UNSAFE_Collection';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\n\n/**\n * Type of a section\n */\nexport type Section<K> = {\n  /**\n   * The key of each section\n   */\n  key: K;\n  /**\n   * The label of each section\n   */\n  label?: string;\n  /**\n   * A property that indicates whether the section\n   * is disabled or not. Typically, when Indexer is\n   * used with ListView, a disabled section implies\n   * that there's no corresponding items in the ListView\n   */\n  isDisabled?: boolean;\n};\n\n/**\n * The others section variable that application could use\n * to compare value\n */\n// const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\nexport const SECTION_OTHERS: Section<string> = Object.freeze({\n  key: '__others__',\n  label: '#'\n});\n\nconst liStyles = {\n  base: cssProps`${{\n    textAlign: 'center',\n    height: '1rem',\n    width: '1.5rem',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-indexer-text-color)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-indexer-font-size)',\n    lineHeight: '1rem'\n  }}`,\n  disabled: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n  }}`,\n  focused: cssProps`${{\n    outlineStyle: 'dotted',\n    outlineWidth: '1px',\n    outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n    outlineOffset: '-1px'\n  }}`,\n  selected: cssProps`${{\n    fontWeight: 'bold'\n  }}`\n};\n\nconst ITEM_STYLE_CLASS = liStyles.base;\nexport const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;\n\nconst dotStyles = {\n  base: cssProps`${{\n    '&::after': {\n      content: '\"\\u25cf\"'\n    }\n  }}`\n};\n\nexport type SectionProps<K> = {\n  context: ItemContext<Section<K>>;\n  currentKey: K;\n  selectedKey: K;\n  valueNow: number; // the index of an item within currently visible sections\n  isFocusRingVisible: boolean;\n};\n\nexport const SectionItem = forwardRef(\n  <K extends string | number>(props: SectionProps<K>, ref: ForwardedRef<HTMLLIElement>) => {\n    const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n    const { context, selectedKey } = props;\n    const isSelected = context.data.key === selectedKey;\n    const commonProps = getCommonProps(props, ref);\n\n    const itemClasses = classNames([\n      commonProps.class,\n      context.data.isDisabled && liStyles.disabled,\n      isSelected && liStyles.selected\n    ]);\n\n    const sectionLabel = context.data.label || context.data.key;\n    const valueText = context.data.isDisabled\n      ? translations.indexer_disabledLabel({ SECTION: `${sectionLabel}` })\n      : `${sectionLabel}`;\n\n    return (\n      <li\n        {...commonProps}\n        class={itemClasses}\n        data-oj-valuetext={valueText}\n        data-oj-disabled={context.data.isDisabled}>\n        {context.data.label || context.data.key}\n      </li>\n    );\n  }\n);\n\nfunction getCommonProps<K>(\n  { context, currentKey, valueNow, isFocusRingVisible }: SectionProps<K>,\n  ref: ForwardedRef<HTMLLIElement>\n) {\n  const isCurrent = context.data.key === currentKey;\n  const classes = classNames([liStyles.base, isCurrent && isFocusRingVisible && liStyles.focused]);\n  return {\n    ...(isCurrent && { ref }),\n    key: context.data.key,\n    class: classes,\n    'data-oj-key': context.data.key,\n    'data-oj-key-type': typeof context.data.key,\n    'data-oj-valuenow': valueNow,\n    isFocusRingVisible: !!isFocusRingVisible\n  };\n}\n\ntype LastSectionProps<K> = SectionProps<K> & {\n  lastValueNow: number;\n};\n\n// render the last section, that contains the last character and others character\nexport const LastSectionItem = forwardRef(\n  <K extends string | number>(\n    { lastValueNow, ...sectionProps }: LastSectionProps<K>,\n    ref: ForwardedRef<HTMLLIElement>\n  ) => {\n    const commonProps = { ...sectionProps, ref };\n    return (\n      <Fragment>\n        <SectionItem {...commonProps} />\n        <OthersItem\n          {...commonProps}\n          ref={ref}\n          context={{ index: -1, data: SECTION_OTHERS } as ItemContext<Section<K>>}\n          valueNow={lastValueNow}\n        />\n      </Fragment>\n    );\n  }\n);\n\nconst OthersItem = forwardRef(<K,>(props: SectionProps<K>, ref: ForwardedRef<HTMLLIElement>) => {\n  const { context, selectedKey } = props;\n  const commonProps = getCommonProps(props, ref);\n\n  const isSelected = context.data.key === selectedKey;\n  const othersClasses = classNames([commonProps.class, isSelected && liStyles.selected]);\n  const othersValueText = SECTION_OTHERS.label;\n\n  return (\n    <li {...commonProps} class={othersClasses} data-oj-valuetext={othersValueText}>\n      {context.data.label}\n    </li>\n  );\n});\n\ntype SeparatorProps<K> = SectionProps<K> & {\n  sectionsPerTruncation: number;\n  last: number;\n  sections: Section<K>[];\n};\n\nexport const SeparatorItem = forwardRef(\n  <K extends string | number>(props: SeparatorProps<K>, ref: ForwardedRef<HTMLLIElement>) => {\n    const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n    const { context, sections } = props;\n    const commonProps = getCommonProps(props, ref);\n    const { from, to } = getSeparatorRange(props);\n\n    if (!isInSeparatorMiddle(context.index, from, to)) {\n      return null;\n    }\n\n    const fromText = sections[from].label || sections[from].key;\n    const toText = sections[to].label || sections[to].key;\n    const separatorClasses = classNames([dotStyles.base]);\n\n    const separatorValueText = translations.indexer_separatorLabel({\n      FROM_SECTION: `${fromText}`,\n      TO_SECTION: `${toText}`\n    });\n\n    return (\n      <li {...commonProps} data-oj-valuetext={separatorValueText}>\n        <Flex align=\"center\" justify=\"center\">\n          <div class={separatorClasses}></div>\n        </Flex>\n      </li>\n    );\n  }\n);\n\nexport function hasSeparator<K>(props: SeparatorProps<K>) {\n  const { from, to } = getSeparatorRange(props);\n  return isInSeparatorMiddle(props.context.index, from, to);\n}\n\nfunction getSeparatorRange<K>({ context, sectionsPerTruncation, last }: SeparatorProps<K>) {\n  const from = context.index - (context.index % sectionsPerTruncation) + 1;\n  let to = from + sectionsPerTruncation - 2;\n  to = to >= last ? last - 1 : to;\n\n  return { from, to };\n}\n\nfunction isInSeparatorMiddle(index: number, from: number, to: number) {\n  return index === Math.floor((from + to) / 2);\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 */\nimport { ComponentChildren, createRef, RefObject } from 'preact';\nimport { useEffect, useRef, useState, StateUpdater, useCallback } from 'preact/hooks';\nimport { Flex } from '../UNSAFE_Flex';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useSingleSelection } from '../hooks/PRIVATE_useSingleSelection/useSingleSelection';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { keyExtractor, getPrevNextKey } from '../utils/PRIVATE_collectionUtils';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '../resources/nls/bundle';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { ItemContext, CurrentKeyDetail, SingleSelectionDetail } from '../UNSAFE_Collection';\nimport { Collection } from '../PRIVATE_Collection';\nimport {\n  Section,\n  SectionItem,\n  LastSectionItem,\n  SeparatorItem,\n  SECTION_OTHERS,\n  hasSeparator,\n  ITEM_SELECTOR\n} from './IndexerItems';\n\nexport type CommitDetail<K> = {\n  value: K;\n};\n\ntype Props<K> = {\n  /**\n   * An array of sections, the default sections is an\n   * array of 26 English alphabets and the # others character\n   */\n  sections?: Section<K>[];\n\n  /**\n   * The currently selected Section\n   */\n  value?: K;\n\n  /**\n   * A function that will be invoked when selection happens,\n   * no matter the Section was selected before or not.\n   */\n  onCommit?: (detail: CommitDetail<K>) => void;\n};\n\nconst styles = {\n  base: cssProps`${{\n    height: '100%'\n  }}`\n};\n\nconst ulStyles = {\n  base: cssProps`${{\n    listStyleType: 'none',\n    margin: '0px',\n    marginTop: 'auto', // prevent cutoff in small screen\n    marginBottom: 'auto', // prevent cutoff in small screen\n    paddingTop: '0',\n    paddingBottom: '0',\n    paddingLeft: '0',\n    paddingRight: '0',\n    outlineStyle: 'none'\n  }}`\n};\n\nconst defaultSections: Section<string>[] = [\n  { key: 'A' },\n  { key: 'B' },\n  { key: 'C' },\n  { key: 'D' },\n  { key: 'E' },\n  { key: 'F' },\n  { key: 'G' },\n  { key: 'H' },\n  { key: 'I' },\n  { key: 'J' },\n  { key: 'K' },\n  { key: 'L' },\n  { key: 'M' },\n  { key: 'N' },\n  { key: 'O' },\n  { key: 'P' },\n  { key: 'Q' },\n  { key: 'R' },\n  { key: 'S' },\n  { key: 'T' },\n  { key: 'U' },\n  { key: 'V' },\n  { key: 'W' },\n  { key: 'X' },\n  { key: 'Y' },\n  { key: 'Z' }\n];\n\n/**\n * Pure Preact based component that consumes Collection component\n * and renders an indexer.\n */\nexport function Indexer<K extends string | number>({\n  sections = defaultSections as Section<K>[],\n  value,\n  onCommit = () => {}\n}: Props<K>) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const ulRef = useRef<HTMLUListElement>(null);\n  const currElementRef = createRef<HTMLLIElement>();\n  const [current, setCurrent] = useState<K | undefined>(sections[0]?.key);\n  // the number of sections in each truncation\n  const [sectionsPerTruncation, setSectionsPerTruncation] = useState<number>(-1);\n  // the total number of rendered sections and separators\n  const renderedSectionsCount = useRef<number>(-1);\n  const itemHeightRef = useRef<number>(0);\n  // the id for aria describedby\n  const uniqueId = useId();\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(\n    (elem: Element | null) => {\n      return !!rootRef.current?.contains(elem);\n    },\n    ['ArrowUp', 'ArrowDown']\n  );\n\n  const { currentKeyProps } = useCurrentKey(\n    (element) => keyExtractor(element, ITEM_SELECTOR),\n    getPrevNextKey(rootRef.current, current, true, ITEM_SELECTOR),\n    getPrevNextKey(rootRef.current, current, false, ITEM_SELECTOR),\n    current,\n    (detail: CurrentKeyDetail<K>) => setCurrent(detail.value)\n  );\n\n  const { selectionProps } = useSingleSelection(\n    (element) => handleKeyExtract(element, ulRef, current as K),\n    // pass in undefined so onCommit handler will be called\n    // no matter whether the Section was selected before or not\n    undefined,\n    (detail: SingleSelectionDetail<K>) => handleSelection(detail, onCommit, sections)\n  );\n\n  /**\n   * Item renderer that will return a section item or a section separator\n   * based on the sectionsPerTruncation and item context index.\n   * @param context item context\n   */\n  const itemRenderer = (context: ItemContext<Section<K>>): ComponentChildren => {\n    const last = sections.length - 1;\n    renderedSectionsCount.current += 1;\n\n    const commonProps = {\n      context,\n      ref: currElementRef,\n      currentKey: current as K,\n      selectedKey: value as K,\n      valueNow: renderedSectionsCount.current,\n      isFocusRingVisible: !!showFocusRing\n    };\n\n    // render the last and the others character, they are always present\n    if (context.index === last) {\n      return <LastSectionItem {...commonProps} lastValueNow={renderedSectionsCount.current + 1} />;\n    }\n\n    // render a section, in the non-truncation case or when it is the first in a truncation\n    if (sectionsPerTruncation <= 1 || context.index % sectionsPerTruncation === 0) {\n      return <SectionItem {...commonProps} />;\n    }\n\n    // render the separator in the middle of a truncation\n    const separatorProps = { ...commonProps, sectionsPerTruncation, last, sections };\n    if (hasSeparator(separatorProps)) {\n      return <SeparatorItem {...separatorProps} />;\n    }\n\n    // remove the count for truncated sections\n    renderedSectionsCount.current -= 1;\n\n    return null;\n  };\n\n  // truncate the Indexer during resize\n  const handleResize = useCallback(\n    (entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        updateSectionsPerTruncation(\n          entry.contentRect.height,\n          itemHeightRef.current,\n          sections.length,\n          sections[0]?.key,\n          sectionsPerTruncation,\n          setSectionsPerTruncation,\n          setCurrent\n        );\n      }\n    },\n    [sections, sectionsPerTruncation]\n  );\n\n  useEffect(() => {\n    if (ulRef.current) {\n      // Get aria values from IndexerItem to update aria values on Indexer ul element\n      ulRef.current.setAttribute('aria-valuemax', renderedSectionsCount.current + 1 + '');\n      ulRef.current.setAttribute(\n        'aria-valuetext',\n        currElementRef.current?.dataset?.['ojValuetext'] || ''\n      );\n      ulRef.current.setAttribute(\n        'aria-valuenow',\n        currElementRef.current?.dataset?.['ojValuenow'] || ''\n      );\n    }\n    renderedSectionsCount.current = -1;\n  });\n\n  /**\n   * Set up the initial values for sectionsPerTruncation and event listeners\n   */\n  useEffect(() => {\n    const root = rootRef.current;\n    if (root) {\n      itemHeightRef.current = root.querySelector('li')?.offsetHeight || 0;\n      updateSectionsPerTruncation(\n        root.offsetHeight,\n        itemHeightRef.current,\n        sections.length,\n        sections[0]?.key,\n        sectionsPerTruncation,\n        setSectionsPerTruncation,\n        setCurrent\n      );\n    }\n  }, [sections, sectionsPerTruncation]);\n\n  /**\n   * Set up resize observer and refresh the resize observer when\n   * sectionsPerTruncation is changed, otherwise it will only have the\n   * old copy of sectionsPerTruncation.\n   */\n  useEffect(() => {\n    const root = rootRef.current;\n    if (root) {\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        handleResize(entries);\n      });\n      resizeObserver.observe(root);\n      return () => {\n        resizeObserver.unobserve(root);\n      };\n    }\n    return undefined;\n  }, [sectionsPerTruncation, handleResize]);\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  return (\n    <div ref={rootRef} class={styles.base}>\n      <Flex align=\"center\" width=\"6x\" height=\"100%\">\n        <ul\n          {...mergeProps(currentKeyProps, focusRingProps, selectionProps)}\n          ref={ulRef}\n          tabIndex={0}\n          aria-label=\"Indexer\"\n          aria-orientation=\"vertical\"\n          aria-valuemin=\"0\"\n          aria-describedby={uniqueId}\n          role=\"slider\"\n          class={ulStyles.base}>\n          <Collection items={sections}>{itemRenderer}</Collection>\n        </ul>\n      </Flex>\n      <HiddenAccessible>\n        <span id={uniqueId}>{getIndexerDescription(translations)}</span>\n      </HiddenAccessible>\n    </div>\n  );\n}\n\n// A function to extract key for selection\nconst handleKeyExtract = <K extends string | number>(\n  element: HTMLElement,\n  rootRef: RefObject<HTMLElement>,\n  current: K\n) => {\n  if (element === rootRef.current) {\n    return current === undefined ? null : current;\n  }\n  return keyExtractor(element, ITEM_SELECTOR) as K;\n};\n\nconst handleSelection = <K extends string | number>(\n  detail: SingleSelectionDetail<K>,\n  onCommit: (value: CommitDetail<K>) => void,\n  sections: Section<K>[]\n) => {\n  if (detail.value === SECTION_OTHERS.key) {\n    onCommit({ value: SECTION_OTHERS.key as K });\n  } else {\n    const selectedSection = sections.find((section) => section.key === detail.value) as Section<K>;\n    onCommit({ value: selectedSection.key as K });\n  }\n};\n\n/**\n * A function that calculates the section count, based on\n * the container height and the number of sections\n * @param height height of Indexer container\n */\nconst updateSectionsPerTruncation = <K extends string | number>(\n  height: number,\n  itemHeight: number,\n  sectionsLength: number,\n  firstSectionKey: K,\n  sectionsPerTruncation: number,\n  setSectionsPerTruncation: StateUpdater<number>,\n  setCurrent: StateUpdater<K | undefined>\n) => {\n  if (height === 0 || itemHeight === 0) {\n    return;\n  }\n\n  const maxSections = height / itemHeight;\n  const last = sectionsLength - 1;\n\n  // when the container size is too small to hold two sections\n  if (maxSections < 2) {\n    if (sectionsPerTruncation !== last) {\n      setSectionsPerTruncation(last);\n      setCurrent(firstSectionKey);\n    }\n\n    // no truncation\n    // compare with < 0.01 for the deviation from calculation, when sectionsLength and maxSections\n    // are about the same, maxNum === sectionsLength doesn't work\n  } else if (maxSections > sectionsLength || sectionsLength - maxSections < 0.01) {\n    if (sectionsPerTruncation > 1) {\n      setSectionsPerTruncation(1);\n      setCurrent(firstSectionKey);\n    }\n\n    // need truncation\n  } else {\n    const tempSectionCount = findSectionCount(maxSections, last);\n    if (tempSectionCount !== sectionsPerTruncation && tempSectionCount < sectionsLength) {\n      setSectionsPerTruncation(tempSectionCount);\n      setCurrent(firstSectionKey);\n    }\n  }\n};\n\n/**\n * A helper function to find the best section count\n * in a truncation\n *\n * @param maxSections maximum number of sections allowed in a truncation\n * @param last the index of last section\n */\nconst findSectionCount = (maxSections: number, last: number) => {\n  // need truncation\n  maxSections -= 2; // minus the last character and the others character\n  maxSections /= 2; // each truncation has a section and a separator\n\n  const newSectionCount = Math.round(last / maxSections) + 1;\n  const truncationLeftover = last % newSectionCount;\n  const truncationCount = Math.floor(last / newSectionCount) + (truncationLeftover > 1 ? 1 : 0);\n\n  // When the sectionCount becomes greater, it will result in\n  // same truncations but with different sections appearing.\n  // The following is to find the best sectionCount in this case\n  // and prevent unnecessary truncations.\n  let tempLeftover = last - (truncationCount - 1) * newSectionCount;\n  let tempSectionCount = newSectionCount;\n  while (tempSectionCount > tempLeftover) {\n    tempSectionCount -= 1;\n    tempLeftover = last - (truncationCount - 1) * tempSectionCount;\n  }\n  if (tempSectionCount != newSectionCount) {\n    tempSectionCount += 1;\n  }\n\n  return tempSectionCount;\n};\n\n/**\n * Helper function to find the aria description for Indexer,\n * based on whether current device is a mobile device\n */\nfunction getIndexerDescription(translations: any) {\n  const deviceType = getClientHints().deviceType;\n  if (deviceType === 'phone' || deviceType === 'tablet') {\n    return translations.indexer_touchInstructionText();\n  } else {\n    return translations.indexer_keyboardInstructionText();\n  }\n}\n"],"names":["SECTION_OTHERS","Object","freeze","key","label","liStyles","ITEM_STYLE_CLASS","base","ITEM_SELECTOR","dotStyles","SectionItem","forwardRef","props","ref","translations","useTranslationBundle","context","selectedKey","commonProps","class","data","isDisabled","disabled","sectionLabel","valueText","indexer_disabledLabel","SECTION","_jsx","assign","itemClasses","children","getCommonProps","currentKey","valueNow","isFocusRingVisible","classes","classNames","isCurrent","focused","LastSectionItem","_a","lastValueNow","sectionProps","__rest","_jsxs","Fragment","OthersItem","index","othersClasses","isSelected","selected","othersValueText","SeparatorItem","sections","fromText","from","toText","to","separatorValueText","indexer_separatorLabel","hasSeparator","isInSeparatorMiddle","getSeparatorRange","sectionsPerTruncation","last","Math","floor","styles","ulStyles","defaultSections","Indexer","value","onCommit","rootRef","useRef","ulRef","currElementRef","createRef","current","setCurrent","useState","renderedSectionsCount","itemHeightRef","uniqueId","useId","contains","elem","selectionProps","useSingleSelection","element","handleKeyExtract","undefined","detail","handleSelection","itemRenderer","length","separatorProps","handleResize","useCallback","entries","entry","updateSectionsPerTruncation","contentRect","height","setSectionsPerTruncation","setAttribute","root","querySelector","offsetHeight","resizeObserver","observe","unobserve","Flex","align","width","mergeProps","currentKeyProps","focusRingProps","tabIndex","role","Collection","items","HiddenAccessible","id","getIndexerDescription","keyExtractor","selectedSection","find","section","itemHeight","sectionsLength","firstSectionKey","maxSections","tempSectionCount","findSectionCount","newSectionCount","round","truncationLeftover","deviceType","getClientHints","indexer_touchInstructionText","indexer_keyboardInstructionText"],"mappings":"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"}

package/cjs/InlineHelpSource-20c3c60a.js

@@ -0,0 +1,35 @@
+/* @oracle/oraclejet-preact: 14.1.1 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+
+const rootStyles = "a4dyd3";
+function InlineHelpSource({
+  children,
+  source
+}) {
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  const userAssistance_learnMoreStr = translations.userAssistance_learnMore();
+  children = children !== null && children !== void 0 ? children : userAssistance_learnMoreStr; // JET-52914 - Implement Tabbable mode API contract in InputText
+  // if not tabbable, spread tabbableModeProps on component
+
+  const {
+    isTabbable,
+    tabbableModeProps
+  } = hooks_UNSAFE_useTabbableMode.useTabbableMode(); // TODO: Implement and use a preact Link component instead of using an anchor tag
+
+  return jsxRuntime.jsx("a", Object.assign({
+    class: rootStyles,
+    target: "_blank",
+    href: source
+  }, !isTabbable && tabbableModeProps, {
+    children: children
+  }));
+}
+
+exports.InlineHelpSource = InlineHelpSource;
+/*  */
+//# sourceMappingURL=InlineHelpSource-20c3c60a.js.map

package/cjs/InlineHelpSource-20c3c60a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineHelpSource-20c3c60a.js","sources":["../../src/UNSAFE_UserAssistance/InlineHelpSource.tsx"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\n\nconst rootStyles = cssProps`${{\n  color: 'var(--oj-c-PRIVATE-DO-NOT-USE-link-text-color)',\n  lineHeight: 'inherit',\n  textDecorationLine: 'var(--oj-c-PRIVATE-DO-NOT-USE-link-text-decoration-line)',\n  cursor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable)',\n\n  '&:visited': {\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-link-text-color-visited)'\n  },\n\n  '&:active': {\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-link-text-color-active)'\n  },\n\n  '&:hover': {\n    textDecorationLine: 'var(--oj-c-PRIVATE-DO-NOT-USE-link-text-decoration-line-hover)',\n\n    transitionProperty: 'text-decoration',\n    transitionDuration: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-duration-long)'\n  },\n\n  // TODO: use cross-browser supported focus strategy\n  '&:focus-visible': {\n    outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n    outlineStyle: 'dotted',\n    outlineWidth: '1px',\n    outlineOffset: '-1px'\n  }\n}}`;\n\ntype Props = {\n  children?: string;\n  source: string;\n};\n\nexport function InlineHelpSource({ children, source }: Props) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const userAssistance_learnMoreStr = translations.userAssistance_learnMore();\n  children = children ?? userAssistance_learnMoreStr;\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: Implement and use a preact Link component instead of using an anchor tag\n  return (\n    <a class={rootStyles} target=\"_blank\" href={source} {...(!isTabbable && tabbableModeProps)}>\n      {children}\n    </a>\n  );\n}\n"],"names":["rootStyles","InlineHelpSource","children","source","translations","useTranslationBundle","userAssistance_learnMoreStr","userAssistance_learnMore"],"mappings":";;;;;;;;AAKA,MAAAA,UAAA,GAAA,QAAA,CAAA;AAmCA,SAAAC,gBAAA,CAAA;EAAAC,QAAA;AAAAC,EAAAA,MAAAA;AAAA,CAAA,EAAA;AACE,EAAA,MAAAC,YAAA,GAAAC,sDAAA,CAAA,0BAAA,CAAA,CAAA;AACA,EAAA,MAAAC,2BAAA,GAAAF,YAAA,CAAAG,wBAAA,EAAA,CAAA;+FAFF;;;;;;qDAAA;;;;;;;;;AAaA;;;;;;;"}