@oracle/oraclejet-preact 14.0.6 → 14.0.7

package/amd/SplitMenuButton-df0ee526.js

@@ -0,0 +1,184 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', './tslib.es6-71b1ba5b', 'preact/jsx-runtime', './UNSAFE_Button', './index-f54bad63', './UNSAFE_Menu', './UNSAFE_BaseButton', './utils/UNSAFE_classNames', './hooks/UNSAFE_useTabbableMode', './utils/UNSAFE_interpolations/dimensions', './utils/UNSAFE_mergeInterpolations', 'module', 'preact/compat', 'preact/hooks', './classNames-027de734', './BaseButton-20a653f3', './Button-87280b4a', './index-5920700b', './Menu-94ddd429'], (function (exports, tslib_es6, jsxRuntime, UNSAFE_Button, UNSAFE_ThemedIcons, UNSAFE_Menu, UNSAFE_BaseButton, utils_UNSAFE_classNames, hooks_UNSAFE_useTabbableMode, utils_UNSAFE_interpolations_dimensions, utils_UNSAFE_mergeInterpolations, linaria, compat, hooks, classNames, BaseButton, Button, UNSAFE_Icons, Menu) { 'use strict';
+
+    const compStyles = {
+      divider: "divider-1defwew",
+      disabledDivider: "disabledDivider-xd9l0x",
+      icon: "icon-1smt2dp",
+      root: "root-d2etl7",
+      childrenMargins: "childrenMargins-1e86xpp"
+    };
+    const menuButtonStyling = ['embedded', 'min', 'noBorderRadiusStart'];
+    const menuButtonActiveStyling = [...menuButtonStyling, 'active'];
+    const actionbuttonStyling = ['embedded', 'fill', 'noBorderRadiusEnd'];
+    const actionButtonActiveStyling = [...actionbuttonStyling, 'active'];
+    const interpolations = [...Object.values(utils_UNSAFE_interpolations_dimensions.dimensionInterpolations)];
+    const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+    /**
+     * A SplitMenuButton is a combined action and menu button.
+     */
+
+    const SplitMenuButton = compat.forwardRef((_a, ref) => {
+      var {
+        children,
+        label = '',
+        variant = 'outlined',
+        isDisabled = false,
+        size = 'md',
+        onAction
+      } = _a,
+          props = tslib_es6.__rest(_a, ["children", "label", "variant", "isDisabled", "size", "onAction"]);
+
+      const [isMenuOpen, setIsMenuOpen] = hooks.useState(false);
+      const [isActive, setIsActive] = hooks.useState(false);
+
+      const _b = styleInterpolations(props),
+            {
+        class: cls
+      } = _b,
+            styles = tslib_es6.__rest(_b, ["class"]); // SPACE or ENTER on root area invokes action, as does CLICK/TAP on LEFT SIDE ACTION AREA
+      // DOWN ARROW invokes menu, as does CLICK/TAP on RIGHT SIDE MENU AREA
+
+
+      const onKeyDown = hooks.useCallback(event => {
+        if (event.key === ' ' || event.key === 'Enter') {
+          setIsActive(true);
+        } else if (event.key == 'ArrowDown') {
+          !isDisabled && setIsMenuOpen(menuOpen => !menuOpen); // Prevent page scroll for down arrow, user definitely wanted to show menu in this case.
+          // Don't prevent other keypress defaults, as user may want to hold SPACE down to scroll page.
+
+          event.preventDefault();
+        }
+      }, [isDisabled, setIsMenuOpen, setIsActive]);
+      const onKeyUp = hooks.useCallback(event => {
+        if (event.key === ' ' || event.key === 'Enter') {
+          !isDisabled && onAction && onAction();
+          setIsActive(false);
+        }
+      }, [isDisabled, onAction, setIsActive]);
+      const onBlur = hooks.useCallback(() => {
+        setIsActive(false);
+      }, [setIsActive]);
+
+      const _ref = hooks.useRef(null);
+
+      hooks.useImperativeHandle(ref, () => _ref.current, [_ref]);
+
+      const menuHandler = () => {
+        setIsMenuOpen(!isMenuOpen);
+      };
+
+      const handleClose = e => {
+        var _a;
+
+        if (e.reason === 'cancel' || 'focusLoss') {
+          (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+
+        setIsMenuOpen(false);
+      };
+
+      const dividerStyles = classNames.classNames([compStyles.divider, isDisabled && compStyles.disabledDivider]);
+      const rootStyles = classNames.classNames([compStyles.root]); // Using Span for top button allows us to avoid :hover state rendering by
+      // taking advantage of :enabled not on spans
+
+      const rootButton = () => {
+        return jsxRuntime.jsx(BaseButton.BaseButton, Object.assign({
+          elementDetails: {
+            type: 'span'
+          },
+          ref: _ref,
+          isDisabled: isDisabled,
+          styling: ['container', 'min'],
+          variant: variant,
+          size: size,
+          accessibleLabel: label,
+          ariaRoledescription: "split menu button, press down arrow to invoke menu",
+          ariaExpanded: isMenuOpen
+        }, {
+          children: jsxRuntime.jsxs(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, Object.assign({
+            value: {
+              isTabbable: false
+            }
+          }, {
+            children: [jsxRuntime.jsx(BaseButton.BaseButton, Object.assign({
+              elementDetails: {
+                type: 'span'
+              },
+              variant: variant,
+              styling: getActionButtonStyling(isActive),
+              size: size,
+              isDisabled: isDisabled,
+              ariaHidden: true,
+              onAction: onAction
+            }, {
+              children: label
+            })), jsxRuntime.jsx("div", {
+              class: `${dividerStyles}`
+            }), jsxRuntime.jsx(BaseButton.BaseButton, Object.assign({
+              elementDetails: {
+                type: 'span'
+              },
+              variant: variant,
+              styling: getMenuButtonStyling(isMenuOpen),
+              size: size,
+              isDisabled: isDisabled,
+              ariaHidden: true,
+              onAction: menuHandler
+            }, {
+              children: jsxRuntime.jsx(Button.ButtonLayout, {
+                display: "icons",
+                startIcon: jsxRuntime.jsx(UNSAFE_Icons.SvgIcoNavDown, {}),
+                size: size,
+                styling: "embedded"
+              })
+            }))]
+          }))
+        }));
+      };
+
+      if (isDisabled) {
+        return jsxRuntime.jsx("span", Object.assign({
+          role: "toolbar",
+          class: `${rootStyles} ${cls}`,
+          style: styles
+        }, {
+          children: rootButton()
+        }));
+      } else {
+        return jsxRuntime.jsxs("span", Object.assign({
+          role: "toolbar",
+          class: `${rootStyles} ${cls}`,
+          style: styles,
+          onKeyDown: !isDisabled && onKeyDown,
+          onKeyUp: onKeyUp,
+          onBlur: onBlur
+        }, {
+          children: [rootButton(), jsxRuntime.jsx(Menu.Menu, Object.assign({
+            anchorRef: _ref,
+            isOpen: isMenuOpen,
+            onClose: handleClose
+          }, {
+            children: jsxRuntime.jsx("span", Object.assign({
+              className: compStyles.childrenMargins
+            }, {
+              children: children
+            }))
+          }))]
+        }));
+      }
+    });
+
+    function getMenuButtonStyling(isActive) {
+      return isActive ? menuButtonActiveStyling : menuButtonStyling;
+    }
+
+    function getActionButtonStyling(isActive) {
+      return isActive ? actionButtonActiveStyling : actionbuttonStyling;
+    }
+
+    exports.SplitMenuButton = SplitMenuButton;
+
+}));
+/*  */
+//# sourceMappingURL=SplitMenuButton-df0ee526.js.map

package/amd/{SplitMenuButton-a7f63424.js.map → SplitMenuButton-df0ee526.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SplitMenuButton-a7f63424.js","sources":["../../src/UNSAFE_SplitMenuButton/SplitMenuButton.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_Button';\nimport { NavDownIcon } from '../UNSAFE_ThemedIcons';\nimport { Menu } from '../UNSAFE_Menu';\n\nimport { BaseButton, StylingOptions } from '../UNSAFE_BaseButton';\n\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nimport { ComponentChildren } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useCallback, useState, useRef, useImperativeHandle } from 'preact/hooks';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLElement>, 'title'>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type Props = IntrinsicProps &\n  WidthInterpolationProps & {\n    /**\n     * children - One or more MenuItems\n     */\n    children?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The label rendered on the action side of the button.  Used\n     * to identify which child MenuItem action is invoked.\n     */\n    label?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\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     \n     */\n    variant?: 'outlined' | 'solid' | 'callToAction';\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     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void;\n  };\n\nexport const compStyles = {\n  divider: cssProps`${{\n    borderTopWidth: '0px',\n    borderBottomWidth: '0px',\n    borderRightWidth: '0px',\n    borderLeftWidth: '1px',\n    borderStyle: 'solid',\n    height: '100%',\n    display: 'inline-flex',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color)'\n  }}`,\n\n  disabledDivider: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled)'\n  }}`,\n\n  icon: cssProps`${{\n    display: 'contents'\n  }}`,\n\n  root: cssProps`${{\n    display: 'inline-block'\n  }}`,\n\n  childrenMargins: cssProps`${{\n    /* @ts-ignore */\n    '& > *': {\n      marginTop: '0 !important',\n      marginBottom: '0 !important',\n      marginLeft: '0 !important',\n      marginRight: '0 !important'\n    }\n  }}`\n};\n\nconst menuButtonStyling = ['embedded', 'min', 'noBorderRadiusStart'] as StylingOptions[];\nconst menuButtonActiveStyling = [...menuButtonStyling, 'active'] as StylingOptions[];\n\nconst actionbuttonStyling = ['embedded', 'fill', 'noBorderRadiusEnd'] as StylingOptions[];\nconst actionButtonActiveStyling = [...actionbuttonStyling, 'active'] as StylingOptions[];\n\nconst interpolations = [...Object.values(dimensionInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<DimensionProps>(interpolations);\n\n/**\n * A SplitMenuButton is a combined action and menu button.\n */\nexport const SplitMenuButton = forwardRef(\n  (\n    {\n      children,\n      label = '',\n      variant = 'outlined',\n      isDisabled = false,\n      size = 'md',\n      onAction,\n      ...props\n    }: Props,\n    ref?: ForwardedRef<HTMLSpanElement>\n  ) => {\n    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { class: cls, ...styles } = styleInterpolations(props);\n\n    // SPACE or ENTER on root area invokes action, as does CLICK/TAP on LEFT SIDE ACTION AREA\n    // DOWN ARROW invokes menu, as does CLICK/TAP on RIGHT SIDE MENU AREA\n    const onKeyDown = useCallback(\n      (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Enter') {\n          setIsActive(true);\n        } else if (event.key == 'ArrowDown') {\n          !isDisabled && setIsMenuOpen((menuOpen: boolean) => !menuOpen);\n          // Prevent page scroll for down arrow, user definitely wanted to show menu in this case.\n          // Don't prevent other keypress defaults, as user may want to hold SPACE down to scroll page.\n          event.preventDefault();\n        }\n      },\n      [isDisabled, setIsMenuOpen, setIsActive]\n    );\n\n    const onKeyUp = useCallback(\n      (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Enter') {\n          !isDisabled && onAction && onAction();\n          setIsActive(false);\n        }\n      },\n      [isDisabled, onAction, setIsActive]\n    );\n\n    const onBlur = useCallback(() => {\n      setIsActive(false);\n    }, [setIsActive]);\n\n    const _ref = useRef<HTMLSpanElement>(null);\n    useImperativeHandle(ref!, () => _ref.current!, [_ref]);\n\n    const menuHandler = () => {\n      setIsMenuOpen(!isMenuOpen);\n    };\n\n    const handleClose = (e: any) => {\n      if (e.reason === 'cancel' || 'focusLoss') {\n        _ref.current?.focus();\n      }\n      setIsMenuOpen(false);\n    };\n\n    const dividerStyles = classNames([\n      compStyles.divider,\n      isDisabled && compStyles.disabledDivider\n    ]);\n\n    const rootStyles = classNames([compStyles.root]);\n\n    // Using Span for top button allows us to avoid :hover state rendering by\n    // taking advantage of :enabled not on spans\n    const rootButton = () => {\n      return (\n        <BaseButton\n          elementDetails={{ type: 'span' }}\n          ref={\n            _ref as ForwardedRef<HTMLButtonElement> &\n              ForwardedRef<HTMLAnchorElement> &\n              ForwardedRef<HTMLSpanElement>\n          }\n          isDisabled={isDisabled}\n          styling={['container', 'min']}\n          variant={variant}\n          size={size}\n          accessibleLabel={label}\n          ariaRoledescription=\"split menu button, press down arrow to invoke menu\"\n          ariaExpanded={isMenuOpen}>\n          <TabbableModeContext.Provider value={{ isTabbable: false }}>\n            <BaseButton\n              elementDetails={{ type: 'span' }}\n              variant={variant}\n              styling={getActionButtonStyling(isActive)}\n              size={size}\n              isDisabled={isDisabled}\n              ariaHidden={true}\n              onAction={onAction}>\n              {label}\n            </BaseButton>\n            <div class={`${dividerStyles}`} />\n            <BaseButton\n              elementDetails={{ type: 'span' }}\n              variant={variant}\n              styling={getMenuButtonStyling(isMenuOpen)}\n              size={size}\n              isDisabled={isDisabled}\n              ariaHidden={true}\n              onAction={menuHandler}>\n              <ButtonLayout\n                display=\"icons\"\n                startIcon={<NavDownIcon />}\n                size={size}\n                styling=\"embedded\"></ButtonLayout>\n            </BaseButton>\n          </TabbableModeContext.Provider>\n        </BaseButton>\n      );\n    };\n\n    if (isDisabled) {\n      return (\n        <span role=\"toolbar\" class={`${rootStyles} ${cls}`} style={styles}>\n          {rootButton()}\n        </span>\n      );\n    } else {\n      return (\n        <span\n          role=\"toolbar\"\n          class={`${rootStyles} ${cls}`}\n          style={styles}\n          onKeyDown={!isDisabled && onKeyDown}\n          onKeyUp={onKeyUp}\n          onBlur={onBlur}>\n          {rootButton()}\n          <Menu anchorRef={_ref} isOpen={isMenuOpen} onClose={handleClose}>\n            <span className={compStyles.childrenMargins}>{children}</span>\n          </Menu>\n        </span>\n      );\n    }\n  }\n);\n\nfunction getMenuButtonStyling(isActive: boolean) {\n  return isActive ? menuButtonActiveStyling : menuButtonStyling;\n}\n\nfunction getActionButtonStyling(isActive: boolean) {\n  return isActive ? actionButtonActiveStyling : actionbuttonStyling;\n}\n"],"names":["compStyles","menuButtonStyling","menuButtonActiveStyling","actionbuttonStyling","actionButtonActiveStyling","interpolations","Object","values","dimensionInterpolations","styleInterpolations","mergeInterpolations","SplitMenuButton","forwardRef","_a","ref","_b","props","class","cls","styles","__rest","onKeyDown","useCallback","event","key","isDisabled","setIsMenuOpen","menuOpen","onKeyUp","onAction","onBlur","setIsActive","_ref","useRef","useImperativeHandle","current","isMenuOpen","handleClose","e","reason","focus","_jsx","BaseButton","assign","elementDetails","type","styling","variant","size","accessibleLabel","label","ariaRoledescription","ariaExpanded","children","_jsxs","TabbableModeContext","Provider","value","isTabbable","jsx","getActionButtonStyling","isActive","ariaHidden","dividerStyles","getMenuButtonStyling","menuHandler","ButtonLayout","display","startIcon","NavDownIcon","SvgIcoNavDown","role","rootStyles","style","rootButton","Menu","anchorRef","isOpen","onClose","className"],"mappings":"seAwEA,MAAAA,EAAA,WAAAA,EAAA,SAAAA,EAAA,WAAAA,aAmCAC,EAAA,CAAA,WAAA,MAAA,uBACAC,EAAA,IAAAD,EAAA,UAEAE,EAAA,CAAA,WAAA,OAAA,qBACAC,EAAA,IAAAD,EAAA,UAEAE,EAAA,IAAAC,OAAAC,OAAAC,EAAAA,0BAEAC,EAAAC,EAAAA,oBAAAL,GAKAM,EAAAC,EAAAA,WAAA,CAAAC,EAAAC,yNAeIC,EAAAN,EAAAO,IAAAC,MAAAC,GAAAH,EAAAI,EAAAC,EAAAA,OAAAL,EAAA,CAAA,UAIAM,EAAAC,EAAAA,YAAAC,uCAIW,aAAAA,EAAAC,OACLC,GAAAC,EAAAC,IAAAA,iCASNC,EAAAN,EAAAA,YAAAC,oCAGME,GAAAI,GAAAA,qBAONC,EAAAR,EAAAA,YAAA,YAEA,CAAAS,IAEAC,EAAAC,SAAA,MACAC,EAAAA,oBAAApB,EAAA,IAAAkB,EAAAG,QAAA,CAAAH,iBAGEN,GAAAU,IAGFC,EAAAC,UACEA,EAAAC,OACE,QAAA1B,EAAAmB,EAAAG,eAAA,IAAAtB,GAAAA,EAAA2B,+BAMFxC,mCASAyC,MAAAC,EAAAA,WAAApC,OAAAqC,OAAA,CAAAC,eAAA,CAAAC,KAAA,QAAA/B,IAAAkB,EAAAP,WAAAA,EAAAqB,QAAA,CAAA,YAAA,OAAAC,QAAAA,EAAAC,KAAAA,EAAAC,gBAAAC,EAAAC,oBAAA,qDAAAC,aAAAhB,GAAA,CAAAiB,SAAAC,EAAAA,KAAAC,EAAAA,oBAAAC,SAAAlD,OAAAqC,OAAA,CAAAc,MAAA,CAAAC,YAAA,IAAA,CAAAL,SAAA,CAAAZ,EAAAkB,IAAAjB,aAAApC,OAAAqC,OAAA,CAAAC,eAAA,CAAAC,KAAA,QAAAE,QAAAA,EAAAD,QAAAc,EAAAC,GAAAb,KAAAA,EAAAvB,WAAAA,EAAAqC,YAAA,EAAAjC,SAAAA,GAAA,CAAAwB,SAAAH,KAAAT,EAAAkB,IAAA,MAAA,CAAA1C,MAAA,GAAA8C,MAAAtB,EAAAkB,IAAAjB,aAAApC,OAAAqC,OAAA,CAAAC,eAAA,CAAAC,KAAA,QAAAE,QAAAA,EAAAD,QAAAkB,EAAA5B,GAAAY,KAAAA,EAAAvB,WAAAA,EAAAqC,YAAA,EAAAjC,SAAAoC,GAAA,CAAAZ,SAAAZ,EAAAkB,IAAAO,eAAA,CAAAC,QAAA,QAAAC,UAAA3B,EAAAA,IAAA4B,EAAAC,cAAA,IAAAtB,KAAAA,EAAAF,QAAA,uBA8CF,OAAArB,yFAOE6B,OAAA,OAAAhD,OAAAqC,OAAA,CAAA4B,KAAA,UAAAtD,MAAA,GAAAuD,KAAAtD,IAAAuD,MAAAtD,EAAAE,WAAAI,GAAAJ,EAAAO,QAAAA,EAAAE,OAAAA,GAAA,CAAAuB,SAAA,CAAAqB,IAAAjC,EAAAkB,IAAAgB,EAAAA,KAAArE,OAAAqC,OAAA,CAAAiC,UAAA5C,EAAA6C,OAAAzC,EAAA0C,QAAAzC,GAAA,CAAAgB,SAAAZ,EAAAkB,IAAA,OAAArD,OAAAqC,OAAA,CAAAoC,UAAA/E,GAAA,CAAAqD,SAAAA,cAkBN,SAAAW,EAAAH,gBAIA,SAAAD,EAAAC"}
+{"version":3,"file":"SplitMenuButton-df0ee526.js","sources":["../../src/UNSAFE_SplitMenuButton/SplitMenuButton.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_Button';\nimport { NavDownIcon } from '../UNSAFE_ThemedIcons';\nimport { Menu } from '../UNSAFE_Menu';\n\nimport { BaseButton, StylingOptions } from '../UNSAFE_BaseButton';\n\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nimport { ComponentChildren } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useCallback, useState, useRef, useImperativeHandle } from 'preact/hooks';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLElement>, 'title'>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type Props = IntrinsicProps &\n  WidthInterpolationProps & {\n    /**\n     * children - One or more MenuItems\n     */\n    children?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The label rendered on the action side of the button.  Used\n     * to identify which child MenuItem action is invoked.\n     */\n    label?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\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     \n     */\n    variant?: 'outlined' | 'solid' | 'callToAction';\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     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: () => void;\n  };\n\nexport const compStyles = {\n  divider: cssProps`${{\n    borderTopWidth: '0px',\n    borderBottomWidth: '0px',\n    borderRightWidth: '0px',\n    borderLeftWidth: '1px',\n    borderStyle: 'solid',\n    height: '100%',\n    display: 'inline-flex',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color)'\n  }}`,\n\n  disabledDivider: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled)'\n  }}`,\n\n  icon: cssProps`${{\n    display: 'contents'\n  }}`,\n\n  root: cssProps`${{\n    display: 'inline-block'\n  }}`,\n\n  childrenMargins: cssProps`${{\n    /* @ts-ignore */\n    '& > *': {\n      marginTop: '0 !important',\n      marginBottom: '0 !important',\n      marginLeft: '0 !important',\n      marginRight: '0 !important'\n    }\n  }}`\n};\n\nconst menuButtonStyling = ['embedded', 'min', 'noBorderRadiusStart'] as StylingOptions[];\nconst menuButtonActiveStyling = [...menuButtonStyling, 'active'] as StylingOptions[];\n\nconst actionbuttonStyling = ['embedded', 'fill', 'noBorderRadiusEnd'] as StylingOptions[];\nconst actionButtonActiveStyling = [...actionbuttonStyling, 'active'] as StylingOptions[];\n\nconst interpolations = [...Object.values(dimensionInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<DimensionProps>(interpolations);\n\n/**\n * A SplitMenuButton is a combined action and menu button.\n */\nexport const SplitMenuButton = forwardRef(\n  (\n    {\n      children,\n      label = '',\n      variant = 'outlined',\n      isDisabled = false,\n      size = 'md',\n      onAction,\n      ...props\n    }: Props,\n    ref?: ForwardedRef<HTMLSpanElement>\n  ) => {\n    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { class: cls, ...styles } = styleInterpolations(props);\n\n    // SPACE or ENTER on root area invokes action, as does CLICK/TAP on LEFT SIDE ACTION AREA\n    // DOWN ARROW invokes menu, as does CLICK/TAP on RIGHT SIDE MENU AREA\n    const onKeyDown = useCallback(\n      (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Enter') {\n          setIsActive(true);\n        } else if (event.key == 'ArrowDown') {\n          !isDisabled && setIsMenuOpen((menuOpen: boolean) => !menuOpen);\n          // Prevent page scroll for down arrow, user definitely wanted to show menu in this case.\n          // Don't prevent other keypress defaults, as user may want to hold SPACE down to scroll page.\n          event.preventDefault();\n        }\n      },\n      [isDisabled, setIsMenuOpen, setIsActive]\n    );\n\n    const onKeyUp = useCallback(\n      (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Enter') {\n          !isDisabled && onAction && onAction();\n          setIsActive(false);\n        }\n      },\n      [isDisabled, onAction, setIsActive]\n    );\n\n    const onBlur = useCallback(() => {\n      setIsActive(false);\n    }, [setIsActive]);\n\n    const _ref = useRef<HTMLSpanElement>(null);\n    useImperativeHandle(ref!, () => _ref.current!, [_ref]);\n\n    const menuHandler = () => {\n      setIsMenuOpen(!isMenuOpen);\n    };\n\n    const handleClose = (e: any) => {\n      if (e.reason === 'cancel' || 'focusLoss') {\n        _ref.current?.focus();\n      }\n      setIsMenuOpen(false);\n    };\n\n    const dividerStyles = classNames([\n      compStyles.divider,\n      isDisabled && compStyles.disabledDivider\n    ]);\n\n    const rootStyles = classNames([compStyles.root]);\n\n    // Using Span for top button allows us to avoid :hover state rendering by\n    // taking advantage of :enabled not on spans\n    const rootButton = () => {\n      return (\n        <BaseButton\n          elementDetails={{ type: 'span' }}\n          ref={\n            _ref as ForwardedRef<HTMLButtonElement> &\n              ForwardedRef<HTMLAnchorElement> &\n              ForwardedRef<HTMLSpanElement>\n          }\n          isDisabled={isDisabled}\n          styling={['container', 'min']}\n          variant={variant}\n          size={size}\n          accessibleLabel={label}\n          ariaRoledescription=\"split menu button, press down arrow to invoke menu\"\n          ariaExpanded={isMenuOpen}>\n          <TabbableModeContext.Provider value={{ isTabbable: false }}>\n            <BaseButton\n              elementDetails={{ type: 'span' }}\n              variant={variant}\n              styling={getActionButtonStyling(isActive)}\n              size={size}\n              isDisabled={isDisabled}\n              ariaHidden={true}\n              onAction={onAction}>\n              {label}\n            </BaseButton>\n            <div class={`${dividerStyles}`} />\n            <BaseButton\n              elementDetails={{ type: 'span' }}\n              variant={variant}\n              styling={getMenuButtonStyling(isMenuOpen)}\n              size={size}\n              isDisabled={isDisabled}\n              ariaHidden={true}\n              onAction={menuHandler}>\n              <ButtonLayout\n                display=\"icons\"\n                startIcon={<NavDownIcon />}\n                size={size}\n                styling=\"embedded\"></ButtonLayout>\n            </BaseButton>\n          </TabbableModeContext.Provider>\n        </BaseButton>\n      );\n    };\n\n    if (isDisabled) {\n      return (\n        <span role=\"toolbar\" class={`${rootStyles} ${cls}`} style={styles}>\n          {rootButton()}\n        </span>\n      );\n    } else {\n      return (\n        <span\n          role=\"toolbar\"\n          class={`${rootStyles} ${cls}`}\n          style={styles}\n          onKeyDown={!isDisabled && onKeyDown}\n          onKeyUp={onKeyUp}\n          onBlur={onBlur}>\n          {rootButton()}\n          <Menu anchorRef={_ref} isOpen={isMenuOpen} onClose={handleClose}>\n            <span className={compStyles.childrenMargins}>{children}</span>\n          </Menu>\n        </span>\n      );\n    }\n  }\n);\n\nfunction getMenuButtonStyling(isActive: boolean) {\n  return isActive ? menuButtonActiveStyling : menuButtonStyling;\n}\n\nfunction getActionButtonStyling(isActive: boolean) {\n  return isActive ? actionButtonActiveStyling : actionbuttonStyling;\n}\n"],"names":["compStyles","menuButtonStyling","menuButtonActiveStyling","actionbuttonStyling","actionButtonActiveStyling","interpolations","Object","values","dimensionInterpolations","styleInterpolations","mergeInterpolations","SplitMenuButton","forwardRef","_a","ref","_b","props","class","cls","styles","__rest","onKeyDown","useCallback","event","key","isDisabled","setIsMenuOpen","menuOpen","onKeyUp","onAction","onBlur","setIsActive","_ref","useRef","useImperativeHandle","current","isMenuOpen","handleClose","e","reason","focus","divider","_jsx","BaseButton","assign","elementDetails","type","styling","variant","size","accessibleLabel","label","ariaRoledescription","ariaExpanded","children","_jsxs","TabbableModeContext","Provider","value","isTabbable","getActionButtonStyling","isActive","ariaHidden","dividerStyles","getMenuButtonStyling","menuHandler","ButtonLayout","display","startIcon","NavDownIcon","role","rootStyles","style","rootButton","Menu","anchorRef","isOpen","onClose","className","childrenMargins"],"mappings":"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"}

package/amd/Text-de291c3f.js

@@ -0,0 +1,100 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', './tslib.es6-71b1ba5b', 'preact/jsx-runtime', 'module', './utils/UNSAFE_mergeInterpolations'], (function (exports, tslib_es6, jsxRuntime, linaria, utils_UNSAFE_mergeInterpolations) { 'use strict';
+
+    const styles = {
+      base: "base-1avwrlh",
+      lineClamp: "lineClamp-1gu09tl",
+      truncation: {
+        none: '',
+        clip: "clip-qveidc",
+        ellipsis: "ellipsis-1r17oxc"
+      },
+      variant: {
+        primary: "primary-fbzz24",
+        secondary: "secondary-10gy10t",
+        disabled: "disabled-ashwah",
+        danger: "danger-15fba9q",
+        warning: "warning-64yd2m",
+        success: "success-o6u927",
+        inherit: "inherit-ouzh51"
+      },
+      size: {
+        '2xs': "_2xs-1l74616",
+        xs: "xs-spjhvr",
+        sm: "sm-1g6unlw",
+        md: "md-1incyl5",
+        lg: "lg-193nbkv",
+        xl: "xl-1yac583",
+        inherit: "inherit-162pe6o"
+      },
+      weight: {
+        normal: "normal-6on7lx",
+        semiBold: "semiBold-zn04fs",
+        bold: "bold-1tajr63",
+        inherit: "inherit-158t0ej"
+      },
+      hyphens: {
+        auto: "auto-18inka2",
+        none: "none-f6sj0o"
+      }
+    };
+    const interpolations = [() => ({
+      class: styles.base
+    }), ({
+      size = 'inherit'
+    }) => ({
+      class: styles.size[size]
+    }), ({
+      weight = 'inherit'
+    }) => ({
+      class: styles.weight[weight]
+    }), ({
+      variant = 'inherit'
+    }) => ({
+      class: styles.variant[variant]
+    }), ({
+      hyphens = 'auto'
+    }) => ({
+      class: styles.hyphens[hyphens]
+    }), ({
+      truncation = 'none'
+    }) => ({
+      class: styles.truncation[truncation]
+    }), ({
+      lineClamp
+    }) => !lineClamp ? {} : {
+      class: styles.lineClamp,
+      webkitLineClamp: lineClamp
+    }];
+    const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+    const childrenStyles = "childrenStyles-a3o1bg";
+    function Text(_a) {
+      var {
+        children
+      } = _a,
+          props = tslib_es6.__rest(_a, ["children"]);
+
+      const _b = styleInterpolations(props),
+            {
+        class: cls
+      } = _b,
+            styles = tslib_es6.__rest(_b, ["class"]);
+
+      return jsxRuntime.jsx("span", Object.assign({
+        class: cls,
+        style: styles,
+        id: props.id
+      }, {
+        children: jsxRuntime.jsx("span", Object.assign({
+          className: childrenStyles
+        }, {
+          children: children
+        }))
+      }));
+    }
+
+    exports.Text = Text;
+
+}));
+/*  */
+//# sourceMappingURL=Text-de291c3f.js.map

package/amd/{Text-617f0e96.js.map → Text-de291c3f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Text-617f0e96.js","sources":["../../src/UNSAFE_Text/Text.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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\n\ntype StylePropsWithOutTruncate = {\n  /**\n   * Specifies text color. If set as \"inherit\", takes text color from its parent element.\n   */\n  variant?: 'primary' | 'secondary' | 'disabled' | 'danger' | 'warning' | 'success' | 'inherit';\n\n  /**\n   * Specifies font size and line height. If set as \"inherit\", takes font size and line height from its parent element.\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';\n\n  /**\n   * Specifies the font weight. If set as \"inherit\", takes font weight from its parent element.\n   */\n  weight?: 'normal' | 'semiBold' | 'bold' | 'inherit';\n\n  /**\n   * Specifies if hyphens should be included when handling long words with no spaces.\n   */\n  hyphens?: 'auto' | 'none';\n};\ntype TruncateProps =\n  | {\n      /**\n       * Truncates text at a specific number of lines and then displays an ellipsis (…) at the end of the last line. Parent of the element needs to have a specific width so text starts overflowing and produce a truncation.\n       */\n      lineClamp?: number;\n      /**\n       * Determines text behavior when text is truncated. Be aware of setting either lineClamp or truncation. Setting both props would produce a type error. In most cases, lineClamp=1 tries to put the ellipsis at the end of a \"word\". On the other hand, using truncation=\"ellipsis\" will show as much as possible text, then put the ellipsis at the end.\n       */\n      truncation?: never;\n    }\n  | {\n      lineClamp?: never;\n      truncation?: 'none' | 'clip' | 'ellipsis';\n    };\ntype AdditionalProps = {\n  /**\n   * Specifies the text id\n   */\n  id?: string;\n\n  /**\n   * Specifies the children.\n   */\n  children?: string;\n};\ntype Props = StylePropsWithOutTruncate & TruncateProps & AdditionalProps;\n\nconst styles = {\n  base: cssProps`${{\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    overflowWrap: 'anywhere',\n    display: 'inline'\n  }}`,\n  lineClamp: cssProps`${{\n    display: '-webkit-box',\n    WebkitBoxOrient: 'vertical'\n  }}`,\n  truncation: {\n    none: '',\n    clip: cssProps`${{\n      textOverflow: 'clip',\n      whiteSpace: 'nowrap',\n      width: '100%',\n      display: 'inline-block'\n    }}`,\n    ellipsis: cssProps`${{\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      width: '100%',\n      display: 'inline-block'\n    }}`\n  },\n  variant: {\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    inherit: cssProps`${{\n      color: 'inherit'\n    }}`\n  },\n  size: {\n    '2xs': cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-2xs-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-2xs-line-height)'\n    }}`,\n    xs: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-line-height)'\n    }}`,\n    sm: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-line-height)'\n    }}`,\n    md: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height)'\n    }}`,\n    lg: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-lg-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-lg-line-height)'\n    }}`,\n    xl: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xl-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xl-line-height)'\n    }}`,\n    inherit: cssProps`${{\n      fontSize: 'inherit',\n      lineHeight: 'inherit'\n    }}`\n  },\n  weight: {\n    normal: cssProps`${{\n      fontWeight: 'normal'\n    }}`,\n    semiBold: cssProps`${{\n      fontWeight: '600'\n    }}`,\n    bold: cssProps`${{\n      fontWeight: '700'\n    }}`,\n    inherit: cssProps`${{\n      fontWeight: 'inherit'\n    }}`\n  },\n  hyphens: {\n    auto: cssProps`${{\n      hyphens: 'auto'\n    }}`,\n    none: cssProps`${{\n      hyphens: 'none'\n    }}`\n  }\n};\nconst interpolations = [\n  () => ({ class: styles.base }),\n  ({ size = 'inherit' }: Pick<StylePropsWithOutTruncate, 'size'>) => ({\n    class: styles.size[size]\n  }),\n  ({ weight = 'inherit' }: Pick<StylePropsWithOutTruncate, 'weight'>) => ({\n    class: styles.weight[weight]\n  }),\n  ({ variant = 'inherit' }: Pick<StylePropsWithOutTruncate, 'variant'>) => ({\n    class: styles.variant[variant]\n  }),\n  ({ hyphens = 'auto' }: Pick<StylePropsWithOutTruncate, 'hyphens'>) => ({\n    class: styles.hyphens[hyphens]\n  }),\n  ({ truncation = 'none' }: Pick<TruncateProps, 'truncation'>) => ({\n    class: styles.truncation[truncation]\n  }),\n  ({ lineClamp }: Pick<TruncateProps, 'lineClamp'>) =>\n    !lineClamp ? {} : { class: styles.lineClamp, webkitLineClamp: lineClamp }\n];\nconst styleInterpolations = mergeInterpolations<Omit<Props, 'children'>>(interpolations);\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nexport function Text({ children, ...props }: Props) {\n  const { class: cls, ...styles } = styleInterpolations(props);\n  return (\n    <span class={cls} style={styles} id={props.id}>\n      <span className={childrenStyles}>{children}</span>\n    </span>\n  );\n}\n"],"names":["styles","truncation","none","variant","size","weight","hyphens","interpolations","class","styleInterpolations","mergeInterpolations","_a","children","props","__rest","_b","cls"],"mappings":"+IA2DA,MAAAA,EAAA,MAAA,oBAAA,SAWEC,WAAA,CACEC,KAAA,QADF,4BAeAC,QAAA,SAAA,qBAAA,kBAAA,iBAAA,iBAAA,mBAAA,6BAuBAC,KAAA,OAAA,aAAA,aAAA,YAAA,YAAA,cAAA,8BA8BAC,OAAA,QAAA,oBAAA,gBAAA,4BAcAC,QAAA,MAAA,2BASFC,EAAA,8CAGIC,MAAAR,EAAAI,KAAAA,+BAGAI,MAAAR,EAAAK,OAAAA,gCAGAG,MAAAR,EAAAG,QAAAA,6BAGAK,MAAAR,EAAAM,QAAAA,gCAGAE,MAAAR,EAAAC,WAAAA,kEAKJQ,EAAAC,EAAAA,oBAAAH,UAWA,SAAAI,GAAqB,IAAAC,SAAAA,GAAAD,EAAAE,EAAAC,EAAAA,OAAAH,EAAA,CAAA,aACnB,MAAAI,EAAAN,EAAAI,IAAAL,MAAAQ,GAAAD,EAAAf,EAAAc,EAAAA,OAAAC,EAAA,CAAA,sHAXF"}
+{"version":3,"file":"Text-de291c3f.js","sources":["../../src/UNSAFE_Text/Text.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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\n\ntype StylePropsWithOutTruncate = {\n  /**\n   * Specifies text color. If set as \"inherit\", takes text color from its parent element.\n   */\n  variant?: 'primary' | 'secondary' | 'disabled' | 'danger' | 'warning' | 'success' | 'inherit';\n\n  /**\n   * Specifies font size and line height. If set as \"inherit\", takes font size and line height from its parent element.\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';\n\n  /**\n   * Specifies the font weight. If set as \"inherit\", takes font weight from its parent element.\n   */\n  weight?: 'normal' | 'semiBold' | 'bold' | 'inherit';\n\n  /**\n   * Specifies if hyphens should be included when handling long words with no spaces.\n   */\n  hyphens?: 'auto' | 'none';\n};\ntype TruncateProps =\n  | {\n      /**\n       * Truncates text at a specific number of lines and then displays an ellipsis (…) at the end of the last line. Parent of the element needs to have a specific width so text starts overflowing and produce a truncation.\n       */\n      lineClamp?: number;\n      /**\n       * Determines text behavior when text is truncated. Be aware of setting either lineClamp or truncation. Setting both props would produce a type error. In most cases, lineClamp=1 tries to put the ellipsis at the end of a \"word\". On the other hand, using truncation=\"ellipsis\" will show as much as possible text, then put the ellipsis at the end.\n       */\n      truncation?: never;\n    }\n  | {\n      lineClamp?: never;\n      truncation?: 'none' | 'clip' | 'ellipsis';\n    };\ntype AdditionalProps = {\n  /**\n   * Specifies the text id\n   */\n  id?: string;\n\n  /**\n   * Specifies the children.\n   */\n  children?: string;\n};\ntype Props = StylePropsWithOutTruncate & TruncateProps & AdditionalProps;\n\nconst styles = {\n  base: cssProps`${{\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    overflowWrap: 'anywhere',\n    display: 'inline'\n  }}`,\n  lineClamp: cssProps`${{\n    display: '-webkit-box',\n    WebkitBoxOrient: 'vertical'\n  }}`,\n  truncation: {\n    none: '',\n    clip: cssProps`${{\n      textOverflow: 'clip',\n      whiteSpace: 'nowrap',\n      width: '100%',\n      display: 'inline-block'\n    }}`,\n    ellipsis: cssProps`${{\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      width: '100%',\n      display: 'inline-block'\n    }}`\n  },\n  variant: {\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    inherit: cssProps`${{\n      color: 'inherit'\n    }}`\n  },\n  size: {\n    '2xs': cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-2xs-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-2xs-line-height)'\n    }}`,\n    xs: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xs-line-height)'\n    }}`,\n    sm: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-sm-line-height)'\n    }}`,\n    md: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height)'\n    }}`,\n    lg: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-lg-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-lg-line-height)'\n    }}`,\n    xl: cssProps`${{\n      fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xl-font-size)',\n      lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-xl-line-height)'\n    }}`,\n    inherit: cssProps`${{\n      fontSize: 'inherit',\n      lineHeight: 'inherit'\n    }}`\n  },\n  weight: {\n    normal: cssProps`${{\n      fontWeight: 'normal'\n    }}`,\n    semiBold: cssProps`${{\n      fontWeight: '600'\n    }}`,\n    bold: cssProps`${{\n      fontWeight: '700'\n    }}`,\n    inherit: cssProps`${{\n      fontWeight: 'inherit'\n    }}`\n  },\n  hyphens: {\n    auto: cssProps`${{\n      hyphens: 'auto'\n    }}`,\n    none: cssProps`${{\n      hyphens: 'none'\n    }}`\n  }\n};\nconst interpolations = [\n  () => ({ class: styles.base }),\n  ({ size = 'inherit' }: Pick<StylePropsWithOutTruncate, 'size'>) => ({\n    class: styles.size[size]\n  }),\n  ({ weight = 'inherit' }: Pick<StylePropsWithOutTruncate, 'weight'>) => ({\n    class: styles.weight[weight]\n  }),\n  ({ variant = 'inherit' }: Pick<StylePropsWithOutTruncate, 'variant'>) => ({\n    class: styles.variant[variant]\n  }),\n  ({ hyphens = 'auto' }: Pick<StylePropsWithOutTruncate, 'hyphens'>) => ({\n    class: styles.hyphens[hyphens]\n  }),\n  ({ truncation = 'none' }: Pick<TruncateProps, 'truncation'>) => ({\n    class: styles.truncation[truncation]\n  }),\n  ({ lineClamp }: Pick<TruncateProps, 'lineClamp'>) =>\n    !lineClamp ? {} : { class: styles.lineClamp, webkitLineClamp: lineClamp }\n];\nconst styleInterpolations = mergeInterpolations<Omit<Props, 'children'>>(interpolations);\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nexport function Text({ children, ...props }: Props) {\n  const { class: cls, ...styles } = styleInterpolations(props);\n  return (\n    <span class={cls} style={styles} id={props.id}>\n      <span className={childrenStyles}>{children}</span>\n    </span>\n  );\n}\n"],"names":["styles","truncation","none","variant","size","weight","hyphens","interpolations","class","styleInterpolations","mergeInterpolations","childrenStyles","Text","_a","children","props","__rest","_b","cls"],"mappings":";;;IA2DA,MAAAA,MAAA,GAAA;YAAA,cAAA;iBAAA,mBAAA;IAWEC,EAAAA,UAAA,EAAA;IACEC,IAAAA,IAAA,EAAA,EADF;cAAA,aAAA;;OAXF;IA0BEC,EAAAA,OAAA,EAAA;iBAAA,gBAAA;mBAAA,mBAAA;kBAAA,iBAAA;gBAAA,gBAAA;iBAAA,gBAAA;iBAAA,gBAAA;;OA1BF;IAiDEC,EAAAA,IAAA,EAAA;aAAA,EAAA,cAAA;YAAA,WAAA;YAAA,YAAA;YAAA,YAAA;YAAA,YAAA;YAAA,YAAA;;OAjDF;IA+EEC,EAAAA,MAAA,EAAA;gBAAA,eAAA;kBAAA,iBAAA;cAAA,cAAA;;OA/EF;IA6FEC,EAAAA,OAAA,EAAA;cAAA,cAAA;;IAAA,GAAA;IA7FF,CAAA,CAAA;IAsGA,MAAAC,cAAA,GAAA;;MAAA;;;IAGIC,EAAAA,KAAA,EAAAR,MAAA,CAAAI,IAAA,CAAAA,IAAA,CAAA;MAHJ;;;IAMII,EAAAA,KAAA,EAAAR,MAAA,CAAAK,MAAA,CAAAA,MAAA,CAAA;MANJ;;;IASIG,EAAAA,KAAA,EAAAR,MAAA,CAAAG,OAAA,CAAAA,OAAA,CAAA;MATJ;;;IAYIK,EAAAA,KAAA,EAAAR,MAAA,CAAAM,OAAA,CAAAA,OAAA,CAAA;MAZJ;;;IAeIE,EAAAA,KAAA,EAAAR,MAAA,CAAAC,UAAA,CAAAA,UAAA,CAAA;MAfJ;;;;;KAAA,CAAA,CAAA;IAoBA,MAAAQ,mBAAA,GAAAC,oDAAA,CAAAH,cAAA,CAAA,CAAA;IACA,MAAAI,cAAA,GAAA,uBAAA,CAAA;IAUA,SAAAC,IAAA,CAAAC,EAAA,EAAA;MAAqB,IAAA;IAAAC,IAAAA,QAAAA;IAAA,GAAA,GAAAD,EAAA;UAAAE,KAAA,GAAAC,gBAAA,CAAAH,EAAA,EAAA,CAAA,UAAA,CAAA,CAAA,CAAA;;IACnB,EAAA,MAAAI,EAAA,GAAAR,mBAAA,CAAAM,KAAA,CAAA;YAAA;IAAAP,IAAAA,KAAA,EAAAU,GAAAA;IAAA,GAAA,GAAAD,EAAA;YAAAjB,MAAA,GAAAgB,gBAAA,CAAAC,EAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;IAMF;;;;;;;;;;;"}

package/amd/TextArea-25fa8171.js

@@ -0,0 +1,133 @@
+/* @oracle/oraclejet-preact: 14.0.7 */
+define(['exports', 'preact/jsx-runtime', 'preact', 'preact/compat', './hooks/UNSAFE_useFormContext', './hooks/UNSAFE_useFormFieldContext', './hooks/UNSAFE_useFocusableTextField', './UNSAFE_Label', './UNSAFE_TextField', './hooks/UNSAFE_useTextField', './UNSAFE_UserAssistance', './hooks/UNSAFE_useLengthFilter', 'module', './utils/UNSAFE_classNames', 'preact/hooks', './hooks/UNSAFE_usePress', './classNames-027de734', './hooks/UNSAFE_useCurrentValueReducer', './ReadonlyTextFieldInput-4583f049', './TextFieldInput-312fb211'], (function (exports, jsxRuntime, preact, compat, hooks_UNSAFE_useFormContext, hooks_UNSAFE_useFormFieldContext, hooks_UNSAFE_useFocusableTextField, UNSAFE_Label, UNSAFE_TextField, hooks_UNSAFE_useTextField, UNSAFE_UserAssistance, hooks_UNSAFE_useLengthFilter, linaria, utils_UNSAFE_classNames, hooks, hooks_UNSAFE_usePress, classNames, hooks_UNSAFE_useCurrentValueReducer, ReadonlyTextFieldInput, TextFieldInput) { 'use strict';
+
+    const rootStyles = {
+      base: "base-4h8uj4"
+    };
+    const remainingTextStyles = {
+      hide: "hide-11b8uae"
+    }; // the spans surrounding the {valueLength}, / and {maxlength}  need to be display: inline-block
+    // so that the order is flipped horizontally in RTL.
+
+    const spanStyles = "spanStyles-yfmyyq";
+
+    const noop = () => {};
+
+    function MaxLengthCounter({
+      maxLength,
+      valueLength = 0,
+      onClick
+    }) {
+      const {
+        isFocused
+      } = hooks_UNSAFE_useFormFieldContext.useFormFieldContext(); // We don't want mousedown on this component to do anything, so prevent the default behavior.
+
+      const killEvent = hooks.useCallback(event => {
+        event.preventDefault();
+      }, []);
+      const textClasses = classNames.classNames([!isFocused && remainingTextStyles.hide]);
+      const {
+        pressProps
+      } = hooks_UNSAFE_usePress.usePress(onClick !== null && onClick !== void 0 ? onClick : noop);
+      return jsxRuntime.jsx("div", Object.assign({
+        class: rootStyles.base,
+        onMouseDown: killEvent
+      }, pressProps, {
+        children: jsxRuntime.jsxs("span", Object.assign({
+          class: textClasses
+        }, {
+          children: [jsxRuntime.jsx("span", Object.assign({
+            class: spanStyles
+          }, {
+            children: valueLength
+          })), jsxRuntime.jsx("span", Object.assign({
+            class: spanStyles
+          }, {
+            children: "/"
+          })), jsxRuntime.jsx("span", Object.assign({
+            class: spanStyles
+          }, {
+            children: maxLength
+          }))]
+        }))
+      }));
+    }
+
+    const TextArea = compat.forwardRef(({ ariaDescribedBy, assistiveText, autoComplete = 'off', autoFocus = false, helpSourceLink, helpSourceText, isDisabled: propIsDisabled, isReadonly: propIsReadonly, isRequired = false, isRequiredShown, label, labelEdge: propLabelEdge, labelStartWidth: propLabelStartWidth, maxLength, maxLengthCounter = 'remaining', maxLengthUnit, messages, placeholder, resize, role, rows, textAlign: propTextAlign, userAssistanceDensity: propUserAssistanceDensity, value, variant = 'default', onInput, onCommit }, ref) => {
+        const { currentCommitValue, dispatch } = hooks_UNSAFE_useCurrentValueReducer.useCurrentValueReducer({ value });
+        const onInputAndDispatch = compat.useCallback((detail) => {
+            // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)
+            dispatch({ type: 'input', payload: detail.value });
+            onInput === null || onInput === void 0 ? void 0 : onInput(detail);
+        }, [onInput]);
+        const onCommitAndDispatch = compat.useCallback((detail) => {
+            // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)
+            dispatch({ type: 'commit', payload: detail.value });
+            onCommit === null || onCommit === void 0 ? void 0 : onCommit(detail);
+        }, [onCommit]);
+        const { isDisabled: isFormDisabled, isReadonly: isFormReadonly, labelEdge: formLabelEdge, labelStartWidth: formLabelStartWidth, textAlign: formTextAlign, userAssistanceDensity: formUserAssistanceDensity } = hooks_UNSAFE_useFormContext.useFormContext();
+        // default to FormContext values if component properties are not specified
+        const isDisabled = propIsDisabled !== null && propIsDisabled !== void 0 ? propIsDisabled : isFormDisabled;
+        const isReadonly = propIsReadonly !== null && propIsReadonly !== void 0 ? propIsReadonly : isFormReadonly;
+        const labelEdge = propLabelEdge !== null && propLabelEdge !== void 0 ? propLabelEdge : formLabelEdge;
+        const labelStartWidth = propLabelStartWidth !== null && propLabelStartWidth !== void 0 ? propLabelStartWidth : formLabelStartWidth;
+        const textAlign = propTextAlign !== null && propTextAlign !== void 0 ? propTextAlign : formTextAlign;
+        const userAssistanceDensity = propUserAssistanceDensity !== null && propUserAssistanceDensity !== void 0 ? propUserAssistanceDensity : formUserAssistanceDensity;
+        const { enabledElementRef, readonlyElementRef, focusProps, isFocused } = hooks_UNSAFE_useFocusableTextField.useFocusableTextField({ isDisabled, isReadonly, ref });
+        const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } = hooks_UNSAFE_useTextField.useTextField({
+            ariaDescribedBy,
+            contentVariant: 'textarea',
+            isDisabled,
+            isFocused,
+            isReadonly,
+            labelEdge,
+            messages,
+            styleVariant: variant,
+            value
+        });
+        // Handle length filter for user-typed inputs and controlled inputs
+        const { isMaxLengthExceeded, valueLength, onFilteredInput } = hooks_UNSAFE_useLengthFilter.useLengthFilter({
+            maxLength,
+            maxLengthUnit,
+            value,
+            onInput: onInputAndDispatch,
+            onCommit: onCommitAndDispatch
+        });
+        const labelComp = labelEdge !== 'none' ? jsxRuntime.jsx(UNSAFE_Label.Label, Object.assign({}, labelProps, { children: label })) : undefined;
+        const fieldLabelProps = {
+            label: labelEdge !== 'none' ? labelComp : undefined,
+            labelEdge: labelEdge !== 'none' ? labelEdge : undefined,
+            labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined
+        };
+        const ariaLabel = labelEdge === 'none' ? label : undefined;
+        const inlineUserAssistance = isDisabled || isReadonly ? (
+        // save space for user assistance if density is 'efficient', even though we don't
+        // render user assistance for disabled or readonly fields
+        userAssistanceDensity !== 'efficient' ? undefined : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, Object.assign({ userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)))) : (jsxRuntime.jsx(UNSAFE_UserAssistance.InlineUserAssistance, Object.assign({ assistiveText: assistiveText, fieldLabel: label, helpSourceLink: helpSourceLink, helpSourceText: helpSourceText, messages: messages, isRequiredShown: isRequiredShown, userAssistanceDensity: userAssistanceDensity }, userAssistanceProps)));
+        if (isReadonly) {
+            // TODO: We need to conditionally render the readonly innerReadonlyField as a textarea or div
+            //  also, the div will need to use white-space: pre-wrap so that the text will wrap like textarea
+            //  see JET-50636
+            return (jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsxRuntime.jsx(UNSAFE_TextField.ReadonlyTextField, Object.assign({ role: "presentation", inlineUserAssistance: inlineUserAssistance, variant: "textarea" }, fieldLabelProps, { children: jsxRuntime.jsx(ReadonlyTextFieldInput.ReadonlyTextFieldInput, { ariaDescribedBy: ariaDescribedBy, ariaLabel: ariaLabel, ariaLabelledBy: labelProps.id, as: "textarea", elementRef: readonlyElementRef, rows: rows, autoFocus: autoFocus, textAlign: textAlign, value: value, variant: "textarea", hasInsideLabel: label !== undefined && labelEdge === 'inside' }) })) })));
+        }
+        const onClickCounter = compat.useCallback(() => {
+            var _a, _b;
+            const elm = enabledElementRef.current;
+            // for setSelectionRange(), len needs to be a number or null.
+            const len = elm ? elm.value.length : null;
+            // Since the counter element is after the text, clicking in this
+            // should put the selection at the end of the text
+            (_a = enabledElementRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(len, len);
+            // Clicking the counter should put the focus on the input field
+            (_b = enabledElementRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }, []);
+        const mainContent = (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(TextFieldInput.TextFieldInput, Object.assign({ as: "textarea", ariaLabel: ariaLabel, autoComplete: autoComplete, autoFocus: autoFocus, currentCommitValue: currentCommitValue, hasInsideLabel: labelComp !== undefined && labelEdge === 'inside', isRequired: isRequired, inputRef: enabledElementRef, onCommit: onCommitAndDispatch, onInput: onFilteredInput, placeholder: placeholder, role: role, rows: rows, textAlign: textAlign, value: value }, inputProps)), maxLengthCounter === 'remaining' && maxLength !== undefined && (jsxRuntime.jsx(MaxLengthCounter, Object.assign({}, { maxLength, valueLength, parentHasFocus: isFocused, onClick: onClickCounter }))), maxLength !== undefined && (jsxRuntime.jsx(UNSAFE_TextField.MaxLengthLiveRegion, Object.assign({}, { isMaxLengthExceeded, maxLength, valueLength })))] }));
+        return (jsxRuntime.jsx(hooks_UNSAFE_useFormFieldContext.FormFieldContext.Provider, Object.assign({ value: formFieldContext }, { children: jsxRuntime.jsx(UNSAFE_TextField.TextField, Object.assign({ mainContent: mainContent, inlineUserAssistance: inlineUserAssistance, onBlur: focusProps === null || focusProps === void 0 ? void 0 : focusProps.onfocusout, onFocus: focusProps === null || focusProps === void 0 ? void 0 : focusProps.onfocusin, resize: resize }, textFieldProps, fieldLabelProps)) })));
+    });
+
+    exports.MaxLengthCounter = MaxLengthCounter;
+    exports.TextArea = TextArea;
+
+}));
+/*  */
+//# sourceMappingURL=TextArea-25fa8171.js.map