@oracle/oraclejet-preact 14.0.5 → 14.0.7

package/amd/Icon-a6ef6699.js

@@ -0,0 +1,99 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', './tslib.es6-71b1ba5b', 'preact/jsx-runtime', 'preact', 'module', './utils/UNSAFE_classNames', './hooks/UNSAFE_useTooltip', './classNames-027de734'], (function (exports, tslib_es6, jsxRuntime, preact, linaria, utils_UNSAFE_classNames, hooks_UNSAFE_useTooltip, classNames) { 'use strict';
+
+    const Icon = ({
+      size = '1em',
+      color = 'currentColor',
+      accessibleLabel = '',
+      viewBox = 'none',
+      children
+    }) => jsxRuntime.jsx(Svg, Object.assign({
+      height: "1em",
+      width: "1em",
+      viewBox: viewBox,
+      accessibleLabel: accessibleLabel,
+      class: classNames.classNames([colorStyles[color], sizeStyles[size]])
+    }, {
+      children: children
+    }));
+
+    const Svg = _a => {
+      var {
+        accessibleLabel
+      } = _a,
+          otherProps = tslib_es6.__rest(_a, ["accessibleLabel"]);
+
+      return accessibleLabel ? jsxRuntime.jsx(SemanticSvg, Object.assign({
+        accessibleLabel: accessibleLabel
+      }, otherProps)) : jsxRuntime.jsx(DecorativeSvg, Object.assign({}, otherProps));
+    };
+
+    const DecorativeSvg = props => jsxRuntime.jsx("svg", Object.assign({}, props));
+
+    const SemanticSvg = _a => {
+      var {
+        accessibleLabel,
+        children
+      } = _a,
+          props = tslib_es6.__rest(_a, ["accessibleLabel", "children"]);
+
+      const {
+        tooltipContent,
+        tooltipProps
+      } = hooks_UNSAFE_useTooltip.useTooltip({
+        text: accessibleLabel,
+        anchor: {
+          x: 'element',
+          y: 'element'
+        },
+        position: 'bottom',
+        offset: {
+          mainAxis: 8,
+          crossAxis: 0
+        }
+      });
+      return jsxRuntime.jsxs(preact.Fragment, {
+        children: [jsxRuntime.jsx("svg", Object.assign({
+          role: "img"
+        }, props, tooltipProps, {
+          "aria-label": accessibleLabel
+        }, {
+          children: children
+        })), tooltipContent]
+      });
+    }; // TODO: Remove this and refactor as necessary to uptake
+    // the dimensions type and values when they're available.
+    // See JET-50717
+
+
+    const sizeStyles = {
+      '1em': "_1em-8wty3v",
+      '1x': "_1x-vt5f9",
+      '2x': "_2x-oxdjxs",
+      '3x': "_3x-vap0kn",
+      '4x': "_4x-q3ln6j",
+      '5x': "_5x-o22syd",
+      '6x': "_6x-4oz564",
+      '7x': "_7x-1c3euae",
+      '8x': "_8x-115php9",
+      '9x': "_9x-1hz11xc",
+      '10x': "_10x-1h8z4j6",
+      '11x': "_11x-1w76w30",
+      '12x': "_12x-jzyff0"
+    };
+    const colorStyles = {
+      primary: "primary-1yai6x",
+      secondary: "secondary-1ad07ee",
+      disabled: "disabled-s7tgao",
+      danger: "danger-4g9gvv",
+      warning: "warning-9m7abf",
+      success: "success-gt9thb",
+      info: "info-1sig2z1",
+      currentColor: "currentColor-xerl8w"
+    };
+
+    exports.Icon = Icon;
+
+}));
+/*  */
+//# sourceMappingURL=Icon-a6ef6699.js.map

package/amd/{Icon-b5704008.js.map → Icon-a6ef6699.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Icon-b5704008.js","sources":["../../src/UNSAFE_Icon/Icon.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 */\nimport { JSX, Fragment } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\n\ntype IntrinsicProps = JSX.SVGAttributes<SVGSVGElement>;\n\ntype Props = Pick<IntrinsicProps, 'viewBox' | 'children'> & {\n  /**\n   * The size of the component. Defaults to '1em', which means the font size of the parent is used.\n   */\n  size?: keyof typeof sizeStyles;\n  /**\n   * The color of the component. Defaults to 'currentColor', which behaves like the CSS 'currentColor' value.\n   */\n  color?: keyof typeof colorStyles;\n  /**\n   * A label to be used for accessibility purposes.\n   */\n  accessibleLabel?: string;\n};\n\nexport const Icon = ({\n  size = '1em',\n  color = 'currentColor',\n  accessibleLabel = '',\n  viewBox = 'none',\n  children\n}: Props) => (\n  <Svg\n    height=\"1em\"\n    width=\"1em\"\n    viewBox={viewBox}\n    accessibleLabel={accessibleLabel}\n    class={classNames([colorStyles[color], sizeStyles[size]])}>\n    {children}\n  </Svg>\n);\n\ntype BaseSvgProps = Pick<IntrinsicProps, 'height' | 'width' | 'viewBox' | 'class' | 'children'>;\ntype SvgProps = BaseSvgProps & {\n  accessibleLabel: string;\n};\n\nconst Svg = ({ accessibleLabel, ...otherProps }: SvgProps) =>\n  accessibleLabel ? (\n    <SemanticSvg accessibleLabel={accessibleLabel} {...otherProps} />\n  ) : (\n    <DecorativeSvg {...otherProps} />\n  );\n\nconst DecorativeSvg = (props: BaseSvgProps) => <svg {...props} />;\n\nconst SemanticSvg = ({ accessibleLabel, children, ...props }: SvgProps) => {\n  const { tooltipContent, tooltipProps } = useTooltip({\n    text: accessibleLabel,\n    anchor: {\n      x: 'element',\n      y: 'element'\n    },\n    position: 'bottom',\n    offset: {\n      mainAxis: 8, // redwood tooltip design spec\n      crossAxis: 0\n    }\n  });\n\n  return (\n    <Fragment>\n      <svg role=\"img\" {...props} {...tooltipProps} aria-label={accessibleLabel}>\n        {children}\n      </svg>\n      {tooltipContent}\n    </Fragment>\n  );\n};\n\n// TODO: Remove this and refactor as necessary to uptake\n// the dimensions type and values when they're available.\n// See JET-50717\nconst sizeStyles = {\n  '1em': cssProps`${{\n    fontSize: '1em'\n  }}`,\n  '1x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x)'\n  }}`,\n  '2x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)'\n  }}`,\n  '3x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-3x)'\n  }}`,\n  '4x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n  }}`,\n  '5x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x)'\n  }}`,\n  '6x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-6x)'\n  }}`,\n  '7x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-7x)'\n  }}`,\n  '8x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-8x)'\n  }}`,\n  '9x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-9x)'\n  }}`,\n  '10x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-10x)'\n  }}`,\n  '11x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-11x)'\n  }}`,\n  '12x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-12x)'\n  }}`\n};\n\nconst colorStyles = {\n  primary: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'\n  }}`,\n  secondary: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary)'\n  }}`,\n  disabled: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n  }}`,\n  danger: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3)'\n  }}`,\n  warning: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3)'\n  }}`,\n  success: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-3)'\n  }}`,\n  info: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-3)'\n  }}`,\n  currentColor: cssProps`${{\n    color: 'currentColor'\n  }}`\n};\n"],"names":["Icon","Svg","_a","accessibleLabel","otherProps","__rest","DecorativeSvg","props","_jsx","Object","assign","SemanticSvg","tooltipContent","tooltipProps","useTooltip","text","anchor","x","y","position","offset","mainAxis","crossAxis","sizeStyles","colorStyles","size","color","viewBox","children","height","width","class","classNames"],"mappings":"yMA6BAA,MAsBAC,EAAAC,IAAa,IAAAC,gBAAAA,GAAAD,EAAAE,EAAAC,EAAAA,OAAAH,EAAA,CAAA,yGAObI,EAAAC,GAAAC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,GAAAH,IAEAI,EAAAT,qFACE,MAAAU,eAAAA,EAAAC,aAAAA,GAAAC,aAAA,CACEC,KAAAZ,EACAa,OAAA,CACEC,EAAA,UACAC,EAAA,WAEFC,SAAA,SACAC,OAAA,CACEC,SAAA,EACAC,UAAA,0HAiBNC,EAAA,OAAA,gBAAA,gBAAA,eAAA,eAAA,gBAAA,gBAAA,cAAA,gBAAA,gBAAA,eAAA,iBAAA,2BA0CAC,EAAA,SAAA,mBAAA,oBAAA,kBAAA,mBAAA,iBAAA,cAAA,0CApGA,EAAAC,KAAAA,EAAA,MAAAC,MAAAA,EAAA,eAAAvB,gBAAAA,EAAA,GAAAwB,QAAAA,EAAA,OAAAC,SAAAA,KAAApB,MAAAP,EAAAQ,OAAAC,OAAA,CAAAmB,OAAA,MAAAC,MAAA,MAAAH,QAAAA,EAAAxB,gBAAAA,EAAA4B,MAAAC,EAAAA,WAAA,CAAAR,EAAAE,GAAAH,EAAAE,MAAA,CAAAG,SAAAA"}
+{"version":3,"file":"Icon-a6ef6699.js","sources":["../../src/UNSAFE_Icon/Icon.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 */\nimport { JSX, Fragment } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\n\ntype IntrinsicProps = JSX.SVGAttributes<SVGSVGElement>;\n\ntype Props = Pick<IntrinsicProps, 'viewBox' | 'children'> & {\n  /**\n   * The size of the component. Defaults to '1em', which means the font size of the parent is used.\n   */\n  size?: keyof typeof sizeStyles;\n  /**\n   * The color of the component. Defaults to 'currentColor', which behaves like the CSS 'currentColor' value.\n   */\n  color?: keyof typeof colorStyles;\n  /**\n   * A label to be used for accessibility purposes.\n   */\n  accessibleLabel?: string;\n};\n\nexport const Icon = ({\n  size = '1em',\n  color = 'currentColor',\n  accessibleLabel = '',\n  viewBox = 'none',\n  children\n}: Props) => (\n  <Svg\n    height=\"1em\"\n    width=\"1em\"\n    viewBox={viewBox}\n    accessibleLabel={accessibleLabel}\n    class={classNames([colorStyles[color], sizeStyles[size]])}>\n    {children}\n  </Svg>\n);\n\ntype BaseSvgProps = Pick<IntrinsicProps, 'height' | 'width' | 'viewBox' | 'class' | 'children'>;\ntype SvgProps = BaseSvgProps & {\n  accessibleLabel: string;\n};\n\nconst Svg = ({ accessibleLabel, ...otherProps }: SvgProps) =>\n  accessibleLabel ? (\n    <SemanticSvg accessibleLabel={accessibleLabel} {...otherProps} />\n  ) : (\n    <DecorativeSvg {...otherProps} />\n  );\n\nconst DecorativeSvg = (props: BaseSvgProps) => <svg {...props} />;\n\nconst SemanticSvg = ({ accessibleLabel, children, ...props }: SvgProps) => {\n  const { tooltipContent, tooltipProps } = useTooltip({\n    text: accessibleLabel,\n    anchor: {\n      x: 'element',\n      y: 'element'\n    },\n    position: 'bottom',\n    offset: {\n      mainAxis: 8, // redwood tooltip design spec\n      crossAxis: 0\n    }\n  });\n\n  return (\n    <Fragment>\n      <svg role=\"img\" {...props} {...tooltipProps} aria-label={accessibleLabel}>\n        {children}\n      </svg>\n      {tooltipContent}\n    </Fragment>\n  );\n};\n\n// TODO: Remove this and refactor as necessary to uptake\n// the dimensions type and values when they're available.\n// See JET-50717\nconst sizeStyles = {\n  '1em': cssProps`${{\n    fontSize: '1em'\n  }}`,\n  '1x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-1x)'\n  }}`,\n  '2x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x)'\n  }}`,\n  '3x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-3x)'\n  }}`,\n  '4x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-4x)'\n  }}`,\n  '5x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x)'\n  }}`,\n  '6x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-6x)'\n  }}`,\n  '7x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-7x)'\n  }}`,\n  '8x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-8x)'\n  }}`,\n  '9x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-9x)'\n  }}`,\n  '10x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-10x)'\n  }}`,\n  '11x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-11x)'\n  }}`,\n  '12x': cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-12x)'\n  }}`\n};\n\nconst colorStyles = {\n  primary: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary)'\n  }}`,\n  secondary: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary)'\n  }}`,\n  disabled: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled)'\n  }}`,\n  danger: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-3)'\n  }}`,\n  warning: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-warning-3)'\n  }}`,\n  success: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-success-3)'\n  }}`,\n  info: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-info-3)'\n  }}`,\n  currentColor: cssProps`${{\n    color: 'currentColor'\n  }}`\n};\n"],"names":["Icon","size","color","accessibleLabel","viewBox","children","_jsx","Svg","Object","assign","height","width","class","classNames","colorStyles","sizeStyles","_a","otherProps","__rest","DecorativeSvg","props","SemanticSvg","tooltipContent","tooltipProps","useTooltip","text","anchor","x","y","position","offset","mainAxis","crossAxis"],"mappings":";;;AA6BA,UAAAA,IAAA,GAAA,CAAA;IAAAC,EAAAA,IAAA,GAAA,KAAA;IAAAC,EAAAA,KAAA,GAAA,cAAA;IAAAC,EAAAA,eAAA,GAAA,EAAA;IAAAC,EAAAA,OAAA,GAAA,MAAA;IAAAC,EAAAA,QAAAA;IAAA,CAAA,KAAAC,cAAA,CAAAC,GAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;IAAAC,EAAAA,MAAA,EAAA,KAAA;IAAAC,EAAAA,KAAA,EAAA,KAAA;IAAAP,EAAAA,OAAA,EAAAA,OAAA;IAAAD,EAAAA,eAAA,EAAAA,eAAA;IAAAS,EAAAA,KAAA,EAAAC,qBAAA,CAAA,CAAAC,WAAA,CAAAZ,KAAA,CAAA,EAAAa,UAAA,CAAAd,IAAA,CAAA,CAAA,CAAA;IAAA,CAAA,EAAA;IAAAI,EAAAA,QAAA,EAAAA,QAAAA;IAAA,CAAA,CAAA,EAAA;;IAsBA,MAAAE,GAAA,GAAAS,EAAA,IAAA;MAAa,IAAA;IAAAb,IAAAA,eAAAA;IAAA,GAAA,GAAAa,EAAA;UAAAC,UAAA,GAAAC,gBAAA,CAAAF,EAAA,EAAA,CAAA,iBAAA,CAAA,CAAA,CAAA;;;;;KAAb,CAAA;;IAOA,MAAAG,aAAA,GAAAC,KAAA,IAAAd,cAAA,CAAA,KAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAAW,KAAA,CAAA,CAAA,CAAA;;IAEA,MAAAC,WAAA,GAAAL,EAAA,IAAA;;;;;;;MACE,MAAA;QAAAM,cAAA;IAAAC,IAAAA,YAAAA;IAAA,GAAA,GAAAC,kCAAA,CAAA;IACEC,IAAAA,IAAA,EAAAtB,eADF;IAEEuB,IAAAA,MAAA,EAAA;IACEC,MAAAA,CAAA,EAAA,SADF;IAEEC,MAAAA,CAAA,EAAA,SAAA;SAJJ;IAMEC,IAAAA,QAAA,EAAA,QANF;IAOEC,IAAAA,MAAA,EAAA;IACEC,MAAAA,QAAA,EAAA,CADF;IAEEC,MAAAA,SAAA,EAAA,CAAA;IAFF,KAAA;IAPF,GAAA,CAAA,CAAA;;;;;;;;;;IAqBF,CAtBA;IAyBA;IACA;;;IACA,MAAAjB,UAAA,GAAA;WAAA,EAAA,aAAA;UAAA,EAAA,WAAA;UAAA,EAAA,YAAA;UAAA,EAAA,YAAA;UAAA,EAAA,YAAA;UAAA,EAAA,YAAA;UAAA,EAAA,YAAA;UAAA,EAAA,aAAA;UAAA,EAAA,aAAA;UAAA,EAAA,aAAA;WAAA,EAAA,cAAA;WAAA,EAAA,cAAA;;IAAA,CAAA,CAAA;IA0CA,MAAAD,WAAA,GAAA;eAAA,gBAAA;iBAAA,mBAAA;gBAAA,iBAAA;cAAA,eAAA;eAAA,gBAAA;eAAA,gBAAA;YAAA,cAAA;;IAAA,CAAA;;;;;;;;;;;"}

package/amd/Indexer-81bf2fe0.js

@@ -0,0 +1,512 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', 'preact', 'preact/hooks', './UNSAFE_Flex', 'module', './utils/UNSAFE_mergeProps', './useSingleSelection-7081cc84', './hooks/PRIVATE_useCurrentKey', './hooks/PRIVATE_useCollectionFocusRing', './utils/PRIVATE_collectionUtils', './utils/PRIVATE_clientHints', './hooks/UNSAFE_useId', './hooks/UNSAFE_useTranslationBundle', './UNSAFE_HiddenAccessible', './PRIVATE_Collection', './tslib.es6-71b1ba5b', './utils/UNSAFE_classNames', 'preact/compat', './classNames-027de734', './Flex-7762d39c', './Collection-55b75a82', './HiddenAccessible-1dadf91a', './clientHints-361cde40'], (function (exports, jsxRuntime, preact, hooks, UNSAFE_Flex, linaria, utils_UNSAFE_mergeProps, useSingleSelection, hooks_PRIVATE_useCurrentKey, hooks_PRIVATE_useCollectionFocusRing, utils_PRIVATE_collectionUtils, utils_PRIVATE_clientHints, hooks_UNSAFE_useId, hooks_UNSAFE_useTranslationBundle, UNSAFE_HiddenAccessible, PRIVATE_Collection, tslib_es6, utils_UNSAFE_classNames, compat, classNames, Flex, Collection, HiddenAccessible, clientHints) { 'use strict';
+
+    /**
+     * 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: "base-1q1hpc3",
+      disabled: "disabled-8b9j12",
+      focused: "focused-125leh1",
+      selected: "selected-uh3z11"
+    };
+    const ITEM_STYLE_CLASS = liStyles.base;
+    const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;
+    const dotStyles = {
+      base: "base-k5ms86"
+    };
+    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: "base-iree8q"
+    };
+    const ulStyles = {
+      base: "base-18tfe9"
+    };
+    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-81bf2fe0.js.map