@oracle/oraclejet-preact 15.1.2 → 15.1.3

package/cjs/Heading-96f7d71b.js

@@ -0,0 +1,29 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+var UNSAFE_Heading_themes_HeadingStyles_css = require('./UNSAFE_Heading/themes/HeadingStyles.css.js');
+
+const headingElementTypes = utils_UNSAFE_arrayUtils.stringLiteralArray(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+const headingsizeMap = {
+    h1: '2xl',
+    h2: 'xl',
+    h3: 'lg',
+    h4: 'md',
+    h5: 'sm',
+    h6: 'xs'
+};
+const sizeOptions = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'inherit'];
+function Heading({ children, as, size, id, variant }) {
+    const Component = as;
+    //@ts-ignore
+    size = size ?? headingsizeMap[Component];
+    const classes = UNSAFE_Heading_themes_HeadingStyles_css.multiVariantStyles({ size, variant });
+    return (jsxRuntime.jsx(Component, { className: classes, id: id, children: children }));
+}
+
+exports.Heading = Heading;
+exports.headingElementTypes = headingElementTypes;
+exports.sizeOptions = sizeOptions;
+//# sourceMappingURL=Heading-96f7d71b.js.map

package/cjs/Heading-96f7d71b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading-96f7d71b.js","sources":["../../src/UNSAFE_Heading/Heading.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { multiVariantStyles } from './themes/HeadingStyles.css';\n\nexport const headingElementTypes = stringLiteralArray(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);\n\ntype ElementType = typeof headingElementTypes[number];\n\ntype HeadingProps = {\n  /**\n   * Specifies the heading tag\n   */\n  as: ElementType;\n\n  /**\n   * Specifies text color. If set as \"inherit\", takes text color from its parent element. The default value of this property is theme driven.\n   */\n  variant?: 'primary' | 'secondary' | 'disabled' | 'inherit';\n\n  /**\n   * Specifies the font size and line height. The default value of this property is theme driven.\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit';\n\n  /**\n   * Specifies the header id\n   */\n  id?: string;\n\n  /**\n   * Specifies the children\n   */\n  children: ComponentChildren;\n};\n\nconst headingsizeMap: { [headingType in ElementType]: string } = {\n  h1: '2xl',\n  h2: 'xl',\n  h3: 'lg',\n  h4: 'md',\n  h5: 'sm',\n  h6: 'xs'\n};\n\nexport const sizeOptions = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'inherit'];\n\nexport function Heading({ children, as, size, id, variant }: HeadingProps) {\n  const Component = as;\n  //@ts-ignore\n  size = size ?? headingsizeMap[Component];\n  const classes = multiVariantStyles({ size, variant });\n  return (\n    <Component className={classes} id={id}>\n      {children}\n    </Component>\n  );\n}\n"],"names":["stringLiteralArray","multiVariantStyles","_jsx"],"mappings":";;;;;;;MAIa,mBAAmB,GAAGA,0CAAkB,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;AA+B5F,MAAM,cAAc,GAA6C;AAC/D,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;CACT,CAAC;AAEW,MAAA,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;AAE5D,SAAA,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAgB,EAAA;IACvE,MAAM,SAAS,GAAG,EAAE,CAAC;;AAErB,IAAA,IAAI,GAAG,IAAI,IAAI,cAAc,CAAC,SAAS,CAAC,CAAC;IACzC,MAAM,OAAO,GAAGC,0DAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;AACtD,IAAA,QACEC,cAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAA,QAAA,EAClC,QAAQ,EAAA,CACC,EACZ;AACJ;;;;;;"}

package/cjs/HiddenAccessible-fdae5064.js

@@ -0,0 +1,27 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+
+
+const hiddenAccessibleStyle = "sih47c";
+/**
+ * HiddenAccessible is a helper component that hides its children visually,
+ * but keeps them visible to screen readers.
+ *
+ */
+function HiddenAccessible({
+  children,
+  id,
+  isHidden
+}) {
+  return jsxRuntime.jsx("span", {
+    id: id,
+    class: hiddenAccessibleStyle,
+    hidden: isHidden,
+    children: children
+  });
+}
+
+exports.HiddenAccessible = HiddenAccessible;
+//# sourceMappingURL=HiddenAccessible-fdae5064.js.map

package/cjs/HiddenAccessible-fdae5064.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenAccessible-fdae5064.js","sources":["../../src/UNSAFE_HiddenAccessible/HiddenAccessible.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nconst hiddenAccessibleStyle = cssProps`${{\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n  width: '1px',\n  position: 'absolute'\n}}`;\n\ntype HiddenAccessibleProps = {\n  /**\n   * Specifies the ComponentChildren\n   */\n  children?: ComponentChildren;\n\n  /**\n   * HTML id for the rendered element\n   */\n  id?: string;\n\n  /**\n   * Specifies whether the element is hidden to the screen readers by default.\n   * However, one can override it using aria-describedby/aria-labelledby. This is\n   * useful when the content should be read only as a description for another content\n   * and not as a content of the container.\n   */\n  isHidden?: boolean;\n};\n\n/**\n * HiddenAccessible is a helper component that hides its children visually,\n * but keeps them visible to screen readers.\n *\n */\nfunction HiddenAccessible({ children, id, isHidden }: HiddenAccessibleProps) {\n  return (\n    <span id={id} class={hiddenAccessibleStyle} hidden={isHidden}>\n      {children}\n    </span>\n  );\n}\n\nexport { HiddenAccessible };\n"],"names":["hiddenAccessibleStyle","HiddenAccessible","children","id","isHidden","_jsx","class","hidden"],"mappings":";;;;;;AAGA,MAAAA,qBAAA,GAaC,QAAA,CAAA;AAsBD;;;;AAIG;AACH,SAAAC,gBAAAA,CAAA;EAAAC,QAAA;EAAAC,EAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,EAAA;EACE,OAAAC,cAAA,CAAA,MAAA,EAAA;AAAAF,IAAAA,EAAA,EAAAA,EAAA;AAAAG,IAAAA,KAAA,EAAAN,qBAAA;AAAAO,IAAAA,MAAA,EAAAH,QAAA;AAAAF,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAKF;;;;"}

package/cjs/HighlightText-0f1be13c.js

@@ -0,0 +1,44 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+
+
+const highlightStyles = "_116zitr";
+/**
+ * Renders a text string with highlighting applied to the given text to match.
+ */
+function HighlightText({
+  children = '',
+  matchText = ''
+}) {
+  return highlighter(children, matchText);
+}
+const HIGHLIGHT_TOKEN = '__@@__';
+const HIGHLIGHT_PATTERN = `${HIGHLIGHT_TOKEN}$&${HIGHLIGHT_TOKEN}`;
+function highlighter(unhighlightedText, matchText) {
+  if (matchText.length > 0 && unhighlightedText.length > 0) {
+    const escapedMatchText = escapeRegExp(matchText);
+    const highlightedText = unhighlightedText.replace(new RegExp(escapedMatchText, 'gi'), HIGHLIGHT_PATTERN);
+    const tokens = highlightedText.split(HIGHLIGHT_TOKEN);
+    const nodes = tokens.map((current, index) => index % 2 == 0 ? current : jsxRuntime.jsx("span", {
+      class: highlightStyles,
+      children: current
+    }));
+    return jsxRuntime.jsx(preact.Fragment, {
+      children: nodes
+    });
+  }
+  return jsxRuntime.jsx(preact.Fragment, {
+    children: unhighlightedText
+  });
+}
+function escapeRegExp(str) {
+  // copied from:
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
+  return str.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+exports.HighlightText = HighlightText;
+//# sourceMappingURL=HighlightText-0f1be13c.js.map

package/cjs/HighlightText-0f1be13c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightText-0f1be13c.js","sources":["../../src/UNSAFE_HighlightText/HighlightText.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 */\n\nimport { Fragment } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nconst highlightStyles = cssProps`${{\n  fontWeight: 700\n}}`;\n\ntype Props = {\n  /**\n   * The text string to apply highlighting to.\n   */\n  children?: string;\n  /**\n   * The text string to match.\n   */\n  matchText?: string;\n};\n\n/**\n * Renders a text string with highlighting applied to the given text to match.\n */\nexport function HighlightText({ children = '', matchText = '' }: Props) {\n  return highlighter(children, matchText);\n}\n\nconst HIGHLIGHT_TOKEN = '__@@__';\nconst HIGHLIGHT_PATTERN = `${HIGHLIGHT_TOKEN}$&${HIGHLIGHT_TOKEN}`;\n\nfunction highlighter(unhighlightedText: string, matchText: string) {\n  if (matchText.length > 0 && unhighlightedText.length > 0) {\n    const escapedMatchText = escapeRegExp(matchText);\n    const highlightedText = unhighlightedText.replace(\n      new RegExp(escapedMatchText, 'gi'),\n      HIGHLIGHT_PATTERN\n    );\n    const tokens = highlightedText.split(HIGHLIGHT_TOKEN);\n    const nodes = tokens.map((current, index) =>\n      index % 2 == 0 ? current : <span class={highlightStyles}>{current}</span>\n    );\n    return <Fragment>{nodes}</Fragment>;\n  }\n  return <Fragment>{unhighlightedText}</Fragment>;\n}\n\nfunction escapeRegExp(str: string) {\n  // copied from:\n  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping\n  return str.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'); // $& means the whole matched string\n}\n"],"names":["highlightStyles","HighlightText","children","matchText","highlighter","HIGHLIGHT_TOKEN","HIGHLIGHT_PATTERN","unhighlightedText","escapedMatchText","escapeRegExp","highlightedText","replace","RegExp","nodes","tokens","map","current","index","_jsx","class","Fragment","str"],"mappings":";;;;;;;AAWA,MAAAA,eAAA,GAEC,UAAA,CAAA;AAaD;;AAEG;AACH,SAAAC,aAAAA,CAAA;AAAAC,EAAAA,QAAA,GAAA,EAAA;AAAAC,EAAAA,SAAA,GAAA,EAAA;AAAA,CAAA,EAAA;AACE,EAAA,OAAAC,WAAA,CAAAF,QAAA,EAAAC,SAAA,CAAA,CAAA;AACF,CAAA;AAEA,MAAAE,eAAA,GAAA,QAAA,CAAA;AACA,MAAAC,iBAAA,GAAA,CAAA,EAAAD,eAAA,CAAA,EAAA,EAAAA,eAAA,CAAA,CAAA,CAAA;AAEA,SAAAD,WAAAA,CAAAG,iBAAA,EAAAJ,SAAA,EAAA;;AAEI,IAAA,MAAAK,gBAAA,GAAAC,YAAA,CAAAN,SAAA,CAAA,CAAA;AACA,IAAA,MAAAO,eAAA,GAAAH,iBAAA,CAAAI,OAAA,CAAA,IAAAC,MAAA,CAAAJ,gBAAA,EAAA,IAAA,CAAA,EAAAF,iBAAA,CAAA,CAAA;;IAKA,MAAAO,KAAA,GAAAC,MAAA,CAAAC,GAAA,CAAA,CAAAC,OAAA,EAAAC,KAAA,KAAAA,KAAA,GAAA,CAAA,IAAA,CAAA,GAAAD,OAAA,GAAAE,cAAA,CAAA,MAAA,EAAA;AAAAC,MAAAA,KAAA,EAAAnB,eAAA;AAAAE,MAAAA,QAAA,EAAAc,OAAAA;AAAA,KAAA,CAAA,CAAA,CAAA;IAGA,OAAAE,cAAA,CAAAE,eAAA,EAAA;AAAAlB,MAAAA,QAAA,EAAAW,KAAAA;AAAA,KAAA,CAAA,CAAA;AACD,GAAA;EACD,OAAAK,cAAA,CAAAE,eAAA,EAAA;AAAAlB,IAAAA,QAAA,EAAAK,iBAAAA;AAAA,GAAA,CAAA,CAAA;AACF,CAAA;AAEA,SAAAE,YAAAA,CAAAY,GAAA,EAAA;;;;AAIA;;;;"}

package/cjs/Icon-06e3b598.js

@@ -0,0 +1,48 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var utils_UNSAFE_size = require('./utils/UNSAFE_size.js');
+var hooks_UNSAFE_useTooltip = require('./hooks/UNSAFE_useTooltip.js');
+var UNSAFE_Icon_themes_IconStyle_css = require('./UNSAFE_Icon/themes/IconStyle.css.js');
+
+const Icon = ({ size = '1em', color = 'currentColor', accessibleLabel = '', viewBox = 'none', children }) => (jsxRuntime.jsx(Svg, { height: "1em", width: "1em", viewBox: viewBox, accessibleLabel: accessibleLabel, class: UNSAFE_Icon_themes_IconStyle_css.styles[color], style: { fontSize: size === '1em' ? size : `${utils_UNSAFE_size.sizeToCSS(size)}` }, children: children }));
+const Svg = ({ accessibleLabel, ...otherProps }) => accessibleLabel ? (jsxRuntime.jsx(SemanticSvg, { accessibleLabel: accessibleLabel, ...otherProps })) : (jsxRuntime.jsx(DecorativeSvg, { ...otherProps }));
+const DecorativeSvg = (props) => jsxRuntime.jsx("svg", { ...props });
+const SemanticSvg = ({ accessibleLabel, children, ...props }) => {
+    // See JET-56791.
+    // We want the same effect as specifying a SVG <title> element for showing a tooltip.
+    // When <title> is used, the SVG is not keyboard focusable by default, and the tooltip only shows up
+    // on mouse hover. Typically any accessibility requirements beyond this should be handled by making the parent
+    // element accessible. This was the approved behavior by APO, and is consistent with the behavior of icons
+    // from other libraries.
+    //
+    // We need to use useTooltip for displaying the tooltip, but it appears spreading the onFocus and onBlur event
+    // handlers generated by the useTooltip hook onto the <svg> causes it to become keyboard focusable*.
+    // To fix this we need to omit spreading the onFocus and onBlur event handlers from the tooltipProps.
+    //
+    // *Most browsers implement the SVG 1.1 spec. There's also a SVG 1.2 Tiny spec that's not
+    // fully implemented in most browsers.
+    // The non-draft version of SVG 1.1 doesn't document the focus conditions and behavior AFAICT.
+    // However it appears browsers implemented the same behavior as the focusable="auto" behavior as described
+    // in SVG 1.2 Tiny: https://www.w3.org/TR/SVGTiny12/interact.html#focus
+    // In particular, it states that if the SVG element has focus related event listeners registered on it, then it becomes focusable.
+    // The spec mentions focusin and focusout event handlers, but not focus event handlers. The reality is
+    // that having a focus event handler registered also causes the <svg> to become focusable (tested on Chrome), and that's
+    // probably because a focus event always precedes a focusin event.
+    // Note also setting focusable="false", or setting tabindex="-1" on the <svg> to prevent it from becoming focusable
+    // doesn't work based on my testing, and that's most probably because the focusable and tabindex attributes are not part
+    // of the SVG 1.1 spec.
+    const { tooltipContent, tooltipProps: { onFocus, onBlur, ...restTooltipProps } } = hooks_UNSAFE_useTooltip.useTooltip({
+        text: accessibleLabel,
+        anchor: {
+            x: 'element',
+            y: 'element'
+        }
+    });
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx("svg", { role: "img", ...props, ...restTooltipProps, "aria-label": accessibleLabel, children: children }), tooltipContent] }));
+};
+
+exports.Icon = Icon;
+//# sourceMappingURL=Icon-06e3b598.js.map

package/cjs/Icon-06e3b598.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon-06e3b598.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 { Size, sizeToCSS } from '../utils/UNSAFE_size';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\nimport { styles } from './themes/IconStyle.css';\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?: Size | '1em';\n  /**\n   * The color of the component. Defaults to 'currentColor', which behaves like the CSS 'currentColor' value.\n   */\n  color?: keyof typeof styles;\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={styles[color]}\n    style={{ fontSize: size === '1em' ? size : `${sizeToCSS(size)}` }}>\n    {children}\n  </Svg>\n);\n\ntype BaseSvgProps = Pick<\n  IntrinsicProps,\n  'height' | 'width' | 'viewBox' | 'class' | 'children' | 'style'\n>;\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  // See JET-56791.\n  // We want the same effect as specifying a SVG <title> element for showing a tooltip.\n  // When <title> is used, the SVG is not keyboard focusable by default, and the tooltip only shows up\n  // on mouse hover. Typically any accessibility requirements beyond this should be handled by making the parent\n  // element accessible. This was the approved behavior by APO, and is consistent with the behavior of icons\n  // from other libraries.\n  //\n  // We need to use useTooltip for displaying the tooltip, but it appears spreading the onFocus and onBlur event\n  // handlers generated by the useTooltip hook onto the <svg> causes it to become keyboard focusable*.\n  // To fix this we need to omit spreading the onFocus and onBlur event handlers from the tooltipProps.\n  //\n  // *Most browsers implement the SVG 1.1 spec. There's also a SVG 1.2 Tiny spec that's not\n  // fully implemented in most browsers.\n  // The non-draft version of SVG 1.1 doesn't document the focus conditions and behavior AFAICT.\n  // However it appears browsers implemented the same behavior as the focusable=\"auto\" behavior as described\n  // in SVG 1.2 Tiny: https://www.w3.org/TR/SVGTiny12/interact.html#focus\n  // In particular, it states that if the SVG element has focus related event listeners registered on it, then it becomes focusable.\n  // The spec mentions focusin and focusout event handlers, but not focus event handlers. The reality is\n  // that having a focus event handler registered also causes the <svg> to become focusable (tested on Chrome), and that's\n  // probably because a focus event always precedes a focusin event.\n  // Note also setting focusable=\"false\", or setting tabindex=\"-1\" on the <svg> to prevent it from becoming focusable\n  // doesn't work based on my testing, and that's most probably because the focusable and tabindex attributes are not part\n  // of the SVG 1.1 spec.\n  const {\n    tooltipContent,\n    tooltipProps: { onFocus, onBlur, ...restTooltipProps }\n  } = useTooltip({\n    text: accessibleLabel,\n    anchor: {\n      x: 'element',\n      y: 'element'\n    }\n  });\n\n  return (\n    <Fragment>\n      <svg role=\"img\" {...props} {...restTooltipProps} aria-label={accessibleLabel}>\n        {children}\n      </svg>\n      {tooltipContent}\n    </Fragment>\n  );\n};\n"],"names":["_jsx","styles","sizeToCSS","useTooltip","_jsxs","Fragment"],"mappings":";;;;;;;;;AA6Ba,MAAA,IAAI,GAAG,CAAC,EACnB,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,cAAc,EACtB,eAAe,GAAG,EAAE,EACpB,OAAO,GAAG,MAAM,EAChB,QAAQ,EACF,MACNA,cAAA,CAAC,GAAG,EAAA,EACF,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAEC,uCAAM,CAAC,KAAK,CAAC,EACpB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,KAAK,KAAK,GAAG,IAAI,GAAG,CAAG,EAAAC,2BAAS,CAAC,IAAI,CAAC,CAAE,CAAA,EAAE,YAChE,QAAQ,EAAA,CACL,EACN;AAUF,MAAM,GAAG,GAAG,CAAC,EAAE,eAAe,EAAE,GAAG,UAAU,EAAY,KACvD,eAAe,IACbF,cAAA,CAAC,WAAW,EAAA,EAAC,eAAe,EAAE,eAAe,EAAM,GAAA,UAAU,GAAI,KAEjEA,cAAC,CAAA,aAAa,OAAK,UAAU,EAAA,CAAI,CAClC,CAAC;AAEJ,MAAM,aAAa,GAAG,CAAC,KAAmB,KAAKA,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,CAAI,CAAC;AAElE,MAAM,WAAW,GAAG,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAY,KAAI;;;;;;;;;;;;;;;;;;;;;;;;AAwBxE,IAAA,MAAM,EACJ,cAAc,EACd,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,EACvD,GAAGG,kCAAU,CAAC;AACb,QAAA,IAAI,EAAE,eAAe;AACrB,QAAA,MAAM,EAAE;AACN,YAAA,CAAC,EAAE,SAAS;AACZ,YAAA,CAAC,EAAE,SAAS;AACb,SAAA;AACF,KAAA,CAAC,CAAC;IAEH,QACEC,gBAACC,eAAQ,EAAA,EAAA,QAAA,EAAA,CACPL,wBAAK,IAAI,EAAC,KAAK,EAAK,GAAA,KAAK,KAAM,gBAAgB,EAAA,YAAA,EAAc,eAAe,EACzE,QAAA,EAAA,QAAQ,GACL,EACL,cAAc,CACN,EAAA,CAAA,EACX;AACJ,CAAC;;;;"}

package/cjs/IconButton-4fcef211.js

@@ -0,0 +1,21 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+require('./UNSAFE_BaseButton.js');
+require('./UNSAFE_ButtonLayout.js');
+var compat = require('preact/compat');
+var hooks_UNSAFE_useTooltip = require('./hooks/UNSAFE_useTooltip.js');
+var BaseButton = require('./BaseButton-ce8c5c12.js');
+var ButtonLayout = require('./ButtonLayout-ffa5087b.js');
+
+const IconButton = compat.forwardRef(({ variant = 'outlined', isDisabled = false, isRepeat = false, size = 'md', autofocus, onAction, tooltip, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const { tooltipContent, tooltipProps } = hooks_UNSAFE_useTooltip.useTooltip({
+        text: tooltip ? tooltip : accessibleLabel
+    });
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(BaseButton.BaseButton, { ...tooltipProps, ref: ref, isDisabled: isDisabled, isRepeat: isRepeat, size: size, autofocus: autofocus, variant: variant, styling: ['min'], onAction: onAction, "aria-describedby": ariaDescribedBy, "aria-label": accessibleLabel ?? tooltip, children: jsxRuntime.jsx(ButtonLayout.ButtonLayout, { display: 'icons', startIcon: props.children, size: size }) }), tooltipContent] }));
+});
+
+exports.IconButton = IconButton;
+//# sourceMappingURL=IconButton-4fcef211.js.map

package/cjs/IconButton-4fcef211.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-4fcef211.js","sources":["../../src/UNSAFE_IconButton/IconButton.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 { ComponentChild, Fragment, Ref } from 'preact';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLayout } from '../UNSAFE_ButtonLayout';\nimport { forwardRef } from 'preact/compat';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLButtonElement>, 'autofocus'>;\n\n/**\n * Note that only the ghost variant supports the xs size.\n */\ntype VariantSizeProps =\n  | {\n      /**\n       * Indicates in what states the button has chrome (background and border).\n       *     \"ghost\": \"Ghost buttons are the least prominent variant. Ghost buttons are\n       * useful for performing low-priority tasks, such as manipulating the UI.\",\n       *     \"borderless\"': \"Borderless buttons are a more prominent variant. Borderless\n       * buttons are useful for supplemental actions that require minimal emphasis.\",\n       *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n       * solid buttons. Outlined buttons are useful for secondary actions.\",\n       *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n       *  most important actions in the UI.\",\n       *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n       * complete the action that is the main goal of the page or page section. There\n       * should only be one CTA button on a page at any given time.\",\n       *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\"\n       */\n      variant?: 'ghost';\n      /**\n       * The size indicates how large the button is rendered.\n       */\n      size?: 'xs' | 'sm' | 'md' | 'lg';\n    }\n  | {\n      variant?: 'borderless' | 'outlined' | 'solid' | 'callToAction' | 'danger';\n\n      size?: 'sm' | 'md' | 'lg';\n    };\n\ntype BaseProps = IntrinsicProps & {\n  /**\n   * Specifies the icon for the button.\n   */\n  children?: ComponentChild;\n\n  /**\n   * Specifies that the button element should be disabled.\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Specifies if repeated events are dispatched for key or pointer held down\n   */\n  isRepeat?: boolean;\n\n  /**\n   * The ID of an element (or space separated IDs of multiple elements) that\n   * describes the button.\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n   */\n  onAction?: () => void | null;\n};\n\n/**\n * Note that either an accessibleLabel or tooltip must be specified.\n */\ntype VariationAccessibleLabelProps =\n  | {\n      /**\n       * accessibleLabel - the aria label\n       */\n      'aria-label': string;\n\n      /**\n       * tooltip - overrides the accessibleLabel for the tooltip\n       */\n      tooltip?: string;\n    }\n  | {\n      'aria-label'?: string;\n\n      tooltip: string;\n    };\n\nexport const IconButton = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      autofocus,\n      onAction,\n      tooltip,\n      'aria-label': accessibleLabel,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    }: BaseProps & VariantSizeProps & VariationAccessibleLabelProps,\n    ref?: Ref<HTMLButtonElement>\n  ) => {\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: tooltip ? tooltip : accessibleLabel\n    });\n    return (\n      <Fragment>\n        <BaseButton\n          {...tooltipProps}\n          ref={ref as Ref<HTMLButtonElement> & Ref<HTMLAnchorElement> & Ref<HTMLSpanElement>}\n          isDisabled={isDisabled}\n          isRepeat={isRepeat}\n          size={size}\n          autofocus={autofocus}\n          variant={variant}\n          styling={['min']}\n          onAction={onAction}\n          aria-describedby={ariaDescribedBy}\n          aria-label={accessibleLabel ?? tooltip}>\n          <ButtonLayout display={'icons'} startIcon={props.children} size={size}></ButtonLayout>\n        </BaseButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n"],"names":["forwardRef","useTooltip","_jsxs","Fragment","_jsx","BaseButton","ButtonLayout"],"mappings":";;;;;;;;;;;;MAiGa,UAAU,GAAGA,iBAAU,CAClC,CACE,EACE,OAAO,GAAG,UAAU,EACpB,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACqD,EAC/D,GAA4B,KAC1B;AACF,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,kCAAU,CAAC;QAClD,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,eAAe;AAC1C,KAAA,CAAC,CAAC;AACH,IAAA,QACEC,eAAA,CAACC,eAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,eAACC,qBAAU,EAAA,EAAA,GACL,YAAY,EAChB,GAAG,EAAE,GAA6E,EAClF,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,KAAK,CAAC,EAChB,QAAQ,EAAE,QAAQ,EACA,kBAAA,EAAA,eAAe,EACrB,YAAA,EAAA,eAAe,IAAI,OAAO,EAAA,QAAA,EACtCD,cAAC,CAAAE,yBAAY,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAiB,EAC3E,CAAA,EACZ,cAAc,CAAA,EAAA,CACN,EACX;AACJ,CAAC;;;;"}

package/cjs/IconMenuButton-e7c89155.js

@@ -0,0 +1,41 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./UNSAFE_ButtonLayout.js');
+require('./PRIVATE_ThemedIcons/ChevronDownIcon.js');
+require('./UNSAFE_Menu.js');
+var hooks_UNSAFE_useMenuAction = require('./hooks/UNSAFE_useMenuAction.js');
+var hooks_UNSAFE_useTooltip = require('./hooks/UNSAFE_useTooltip.js');
+require('./UNSAFE_BaseButton.js');
+var preact = require('preact');
+var compat = require('preact/compat');
+var hooks = require('preact/hooks');
+var utils_UNSAFE_mergeProps = require('./utils/UNSAFE_mergeProps.js');
+var BaseButton = require('./BaseButton-ce8c5c12.js');
+var ButtonLayout = require('./ButtonLayout-ffa5087b.js');
+var index = require('./index-6051d204.js');
+var Menu = require('./Menu-35db79c8.js');
+
+/**
+ * A IconMenuButton is a combined action and menu button.
+ */
+const IconMenuButton = compat.forwardRef(({ children, tooltip, accessibleLabel, variant = 'outlined', isDisabled = false, isMenuOpen = false, isIconOnly = false, onToggleMenu, size = 'md', width, icon, 'aria-describedby': ariaDescribedBy }, ref) => {
+    const buttonRef = hooks.useRef(null);
+    hooks.useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
+    const { triggerProps, menuProps } = hooks_UNSAFE_useMenuAction.useMenuAction({
+        isDisabled: isDisabled,
+        onToggleMenu: onToggleMenu,
+        isMenuOpen: isMenuOpen,
+        anchorRef: buttonRef
+    });
+    const { tooltipContent, tooltipProps } = hooks_UNSAFE_useTooltip.useTooltip({
+        text: tooltip ? tooltip : accessibleLabel,
+        isDisabled: isMenuOpen
+    });
+    const rootButton = (jsxRuntime.jsx(preact.Fragment, { children: jsxRuntime.jsxs(BaseButton.BaseButton, { ...utils_UNSAFE_mergeProps.mergeProps(tooltipProps, triggerProps), styling: isMenuOpen ? ['min', 'active'] : ['min'], isDisabled: isDisabled, variant: variant, width: width, size: size, ref: buttonRef, "aria-describedby": ariaDescribedBy, "aria-label": accessibleLabel ?? tooltip, children: [jsxRuntime.jsx(ButtonLayout.ButtonLayout, { display: 'icons', startIcon: icon, endIcon: isIconOnly ? null : jsxRuntime.jsx(index.SvgChevronDown, {}), size: size }), tooltipContent] }) }));
+    return isDisabled ? (rootButton) : (jsxRuntime.jsxs(preact.Fragment, { children: [rootButton, jsxRuntime.jsx(Menu.Menu, { ...menuProps, children: children })] }));
+});
+
+exports.IconMenuButton = IconMenuButton;
+//# sourceMappingURL=IconMenuButton-e7c89155.js.map

package/cjs/IconMenuButton-e7c89155.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMenuButton-e7c89155.js","sources":["../../src/UNSAFE_IconMenuButton/IconMenuButton.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 { ButtonLayout } from '../UNSAFE_ButtonLayout';\n\nimport { ChevronDownIcon } from '../PRIVATE_ThemedIcons/ChevronDownIcon';\n\nimport { Menu } from '../UNSAFE_Menu';\nimport { useMenuAction, MenuToggleDetail } from '../hooks/UNSAFE_useMenuAction';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\n\nimport { BaseButton } from '../UNSAFE_BaseButton';\n\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\n\nimport { ComponentChildren, ComponentChild, Fragment } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useRef, useImperativeHandle } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type BaseProps = WidthInterpolationProps & {\n  /**\n   * children - One or more MenuItems, dividers, or Menu groups\n   */\n  children?: ComponentChildren;\n\n  /**\n   * The icon is the button's icon.  Note that this is not the menu\n   * expand icon shown on the right (or to the left in right to left mode).\n   */\n  icon?: ComponentChild;\n\n  /**\n   * Specifies that the button element should be disabled.\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Specifies if only the icon is shown, and no down chevron.\n   */\n  isIconOnly?: boolean;\n\n  /**\n   * The ID of an element (or space separated IDs of multiple elements) that\n   * describes the button.\n   */\n  'aria-describedby'?: string;\n\n  /**\n   * Specifies if the menu is open\n   */\n  isMenuOpen?: boolean;\n\n  /**\n   * Property that triggers a callback immediately when toggle happens and value of expanded property should be updated\n   */\n  onToggleMenu?: (details: MenuToggleDetail) => void;\n\n  /**\n   * Indicates in what states the button has chrome (background and border).\n   *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n   * buttons are useful for supplemental actions that require minimal emphasis.\",\n   *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n   * solid buttons. Outlined buttons are useful for secondary actions.\",\n   *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n   *  most important actions in the UI.\"\n   */\n  variant?: 'borderless' | 'outlined' | 'solid';\n\n  /**\n   * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n   */\n  size?: 'sm' | 'md' | 'lg';\n};\n\n/**\n * Note that either an accessibleLabel or tooltip must be specified.\n */\ntype VariationAccessibleLabelProps =\n  | {\n      /**\n       * accessibleLabel - the aria label\n       */\n      accessibleLabel: string;\n\n      /**\n       * tooltip - overrides the accessibleLabel for the tooltip\n       */\n      tooltip?: string;\n    }\n  | {\n      accessibleLabel?: string;\n\n      tooltip: string;\n    };\n\n/**\n * A IconMenuButton is a combined action and menu button.\n */\nexport const IconMenuButton = forwardRef(\n  (\n    {\n      children,\n      tooltip,\n      accessibleLabel,\n      variant = 'outlined',\n      isDisabled = false,\n      isMenuOpen = false,\n      isIconOnly = false,\n      onToggleMenu,\n      size = 'md',\n      width,\n      icon,\n      'aria-describedby': ariaDescribedBy\n    }: BaseProps & VariationAccessibleLabelProps,\n    ref?: ForwardedRef<HTMLButtonElement>\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    useImperativeHandle(ref!, () => buttonRef.current!, [buttonRef]);\n\n    const { triggerProps, menuProps } = useMenuAction({\n      isDisabled: isDisabled,\n      onToggleMenu: onToggleMenu,\n      isMenuOpen: isMenuOpen,\n      anchorRef: buttonRef\n    });\n\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: tooltip ? tooltip : accessibleLabel,\n      isDisabled: isMenuOpen\n    });\n\n    const rootButton = (\n      <Fragment>\n        <BaseButton\n          {...mergeProps(tooltipProps, triggerProps)}\n          styling={isMenuOpen ? ['min', 'active'] : ['min']}\n          isDisabled={isDisabled}\n          variant={variant}\n          width={width}\n          size={size}\n          ref={buttonRef}\n          aria-describedby={ariaDescribedBy}\n          aria-label={accessibleLabel ?? tooltip}>\n          <ButtonLayout\n            display={'icons'}\n            startIcon={icon}\n            endIcon={isIconOnly ? null : <ChevronDownIcon />}\n            size={size}></ButtonLayout>\n          {tooltipContent}\n        </BaseButton>\n      </Fragment>\n    );\n\n    return isDisabled ? (\n      rootButton\n    ) : (\n      <Fragment>\n        {rootButton}\n        <Menu {...menuProps}>{children}</Menu>\n      </Fragment>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","useImperativeHandle","useMenuAction","useTooltip","_jsx","Fragment","_jsxs","BaseButton","mergeProps","ButtonLayout","ChevronDownIcon","Menu"],"mappings":";;;;;;;;;;;;;;;;;;;AAsGA;;AAEG;MACU,cAAc,GAAGA,iBAAU,CACtC,CACE,EACE,QAAQ,EACR,OAAO,EACP,eAAe,EACf,OAAO,GAAG,UAAU,EACpB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,YAAY,EACZ,IAAI,GAAG,IAAI,EACX,KAAK,EACL,IAAI,EACJ,kBAAkB,EAAE,eAAe,EACO,EAC5C,GAAqC,KACnC;AACF,IAAA,MAAM,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAC;AAClD,IAAAC,yBAAmB,CAAC,GAAI,EAAE,MAAM,SAAS,CAAC,OAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAEjE,IAAA,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAGC,wCAAa,CAAC;AAChD,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,YAAY,EAAE,YAAY;AAC1B,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,kCAAU,CAAC;QAClD,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,eAAe;AACzC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,UAAU,IACdC,cAAA,CAACC,eAAQ,EACP,EAAA,QAAA,EAAAC,eAAA,CAACC,qBAAU,EACL,EAAA,GAAAC,kCAAU,CAAC,YAAY,EAAE,YAAY,CAAC,EAC1C,OAAO,EAAE,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EACjD,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,SAAS,sBACI,eAAe,EAAA,YAAA,EACrB,eAAe,IAAI,OAAO,aACtCJ,cAAC,CAAAK,yBAAY,IACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,UAAU,GAAG,IAAI,GAAGL,cAAC,CAAAM,oBAAe,KAAG,EAChD,IAAI,EAAE,IAAI,EAAA,CAAiB,EAC5B,cAAc,CAAA,EAAA,CACJ,EACJ,CAAA,CACZ,CAAC;IAEF,OAAO,UAAU,IACf,UAAU,KAEVJ,eAAA,CAACD,eAAQ,EACN,EAAA,QAAA,EAAA,CAAA,UAAU,EACXD,cAAA,CAACO,SAAI,EAAA,EAAA,GAAK,SAAS,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,CAC7B,EAAA,CAAA,CACZ,CAAC;AACJ,CAAC;;;;"}

package/cjs/Indexer-4364b23f.js

@@ -0,0 +1,345 @@
+/* @oracle/oraclejet-preact: 15.1.3 */
+'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-c5cd5527.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');
+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');
+require('./utils/UNSAFE_classNames.js');
+var compat = require('preact/compat');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+var UNSAFE_Indexer_themes_redwood_IndexerTheme = require('./UNSAFE_Indexer/themes/redwood/IndexerTheme.js');
+var classNames = require('./classNames-58437073.js');
+var Flex = require('./Flex-ca3ece5b.js');
+var Collection = require('./Collection-a0c5415e.js');
+var HiddenAccessible = require('./HiddenAccessible-fdae5064.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 ITEM_STYLE_CLASS = 'oj-indexer-item';
+const ITEM_SELECTOR = '.' + ITEM_STYLE_CLASS;
+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 { classes } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_Indexer_themes_redwood_IndexerTheme.IndexerRedwoodTheme, {
+        focused: commonProps.ref && commonProps.isFocusRingVisible ? 'isFocused' : 'notFocused',
+        disabled: context.data.isDisabled ? 'isDisabled' : 'notDisabled',
+        selected: isSelected ? 'isSelected' : 'notSelected'
+    });
+    const itemClasses = classNames.classNames([commonProps.class, classes]);
+    const sectionLabel = context.data.label || context.data.key;
+    const valueText = context.data.isDisabled
+        ? translations.indexer_disabledLabel({ SECTION: `${sectionLabel}` })
+        : `${sectionLabel}`;
+    return (jsxRuntime.jsx("li", { ...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;
+    return {
+        ...(isCurrent && { ref }),
+        key: context.data.key,
+        class: ITEM_STYLE_CLASS,
+        '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(({ lastValueNow, ...sectionProps }, ref) => {
+    const commonProps = { ...sectionProps, ref };
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(SectionItem, { ...commonProps }), jsxRuntime.jsx(OthersItem, { ...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 { classes } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_Indexer_themes_redwood_IndexerTheme.IndexerRedwoodTheme, {
+        focused: commonProps.ref && commonProps.isFocusRingVisible ? 'isFocused' : 'notFocused',
+        selected: isSelected ? 'isSelected' : 'notSelected'
+    });
+    const othersClasses = classNames.classNames([commonProps.class, classes]);
+    const othersValueText = SECTION_OTHERS.label;
+    return (jsxRuntime.jsx("li", { ...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 { classes, styles: { dotStyle } } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_Indexer_themes_redwood_IndexerTheme.IndexerRedwoodTheme, {
+        focused: commonProps.ref && commonProps.isFocusRingVisible ? 'isFocused' : 'notFocused'
+    });
+    const separatorClasses = classNames.classNames([commonProps.class, classes]);
+    const separatorValueText = translations.indexer_separatorLabel({
+        FROM_SECTION: `${fromText}`,
+        TO_SECTION: `${toText}`
+    });
+    return (jsxRuntime.jsx("li", { ...commonProps, class: separatorClasses, "data-oj-valuetext": separatorValueText, children: jsxRuntime.jsx(Flex.Flex, { align: "center", justify: "center", children: jsxRuntime.jsx("div", { class: dotStyle }) }) }));
+});
+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 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 = () => { } }) {
+    const rootRef = hooks.useRef(null);
+    const ulRef = hooks.useRef(null);
+    const currElementRef = preact.createRef();
+    const [current, setCurrent] = hooks.useState(sections[0]?.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) => {
+        return !!rootRef.current?.contains(elem);
+    }, ['ArrowUp', 'ArrowDown']);
+    const { currentKeyProps } = hooks_PRIVATE_useCurrentKey.useCurrentKey((element) => utils_PRIVATE_collectionUtils.keyExtractor(element, ITEM_SELECTOR), true, utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, current, true, ITEM_SELECTOR), utils_PRIVATE_collectionUtils.getPrevNextKey(rootRef.current, current, false, ITEM_SELECTOR), undefined, undefined, 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, { ...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, { ...commonProps });
+        }
+        // render the separator in the middle of a truncation
+        const separatorProps = { ...commonProps, sectionsPerTruncation, last, sections };
+        if (hasSeparator(separatorProps)) {
+            return jsxRuntime.jsx(SeparatorItem, { ...separatorProps });
+        }
+        // remove the count for truncated sections
+        renderedSectionsCount.current -= 1;
+        return null;
+    };
+    // truncate the Indexer during resize
+    const handleResize = hooks.useCallback((entries) => {
+        for (const entry of entries) {
+            updateSectionsPerTruncation(entry.contentRect.height, itemHeightRef.current, sections.length, sections[0]?.key, sectionsPerTruncation, setSectionsPerTruncation, setCurrent);
+        }
+    }, [sections, sectionsPerTruncation]);
+    hooks.useEffect(() => {
+        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', currElementRef.current?.dataset?.['ojValuetext'] || '');
+            ulRef.current.setAttribute('aria-valuenow', currElementRef.current?.dataset?.['ojValuenow'] || '');
+        }
+        renderedSectionsCount.current = -1;
+    });
+    /**
+     * Set up the initial values for sectionsPerTruncation and event listeners
+     */
+    hooks.useEffect(() => {
+        const root = rootRef.current;
+        if (root) {
+            itemHeightRef.current = root.querySelector('li')?.offsetHeight || 0;
+            updateSectionsPerTruncation(root.offsetHeight, itemHeightRef.current, sections.length, sections[0]?.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');
+    const { styles: { baseStyle, innerStyle } } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_Indexer_themes_redwood_IndexerTheme.IndexerRedwoodTheme);
+    return (jsxRuntime.jsxs("div", { ref: rootRef, class: baseStyle, children: [jsxRuntime.jsx(Flex.Flex, { align: "center", width: "6x", height: "100%", children: jsxRuntime.jsx("ul", { ...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: innerStyle, children: jsxRuntime.jsx(Collection.Collection, { items: sections, children: itemRenderer }) }) }), jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { children: jsxRuntime.jsx("span", { 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) {
+    if (utils_PRIVATE_collectionUtils.isMobile()) {
+        return translations.indexer_touchInstructionText();
+    }
+    else {
+        return translations.indexer_keyboardInstructionText();
+    }
+}
+
+exports.Indexer = Indexer;
+exports.SECTION_OTHERS = SECTION_OTHERS;
+//# sourceMappingURL=Indexer-4364b23f.js.map