@oracle/oraclejet-preact 18.0.10 → 18.0.11

package/cjs/SplitMenuButton-6cd3278c.js

@@ -0,0 +1,138 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var ButtonLabelLayout = require('./ButtonLabelLayout-90b298fd.js');
+var ChevronDown = require('./ChevronDown-9d92edda.js');
+var Menu = require('./Menu-658212ed.js');
+require('./MenuItem-c459d748.js');
+var hooks = require('preact/hooks');
+require('preact');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+require('./LayerHost-7182bfaf.js');
+var compat = require('preact/compat');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var classNames = require('./classNames-c14c6ef3.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-2228b0f7.js');
+
+require('./SelectMenuGroupContext-bbb4f7e0.js');
+require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
+
+
+require('./UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js');
+var Text = require('./Text-5ed5f710.js');
+var BaseButton = require('./BaseButton-6b9f7463.js');
+var TabbableModeContext = require('./TabbableModeContext-e99d527e.js');
+var dimensions = require('./dimensions-10159104.js');
+var UNSAFE_SplitMenuButton_themes_redwood_SplitMenuButtonTheme_css = require('./UNSAFE_SplitMenuButton/themes/redwood/SplitMenuButtonTheme.css.js');
+
+const menuButtonStyling = [
+    'embedded',
+    'min',
+    'noBorderRadiusStart',
+    'noBorderStart'
+];
+const menuButtonActiveStyling = [...menuButtonStyling, 'active'];
+const actionbuttonStyling = [
+    'embedded',
+    'fill',
+    'noBorderRadiusEnd',
+    'noBorderEnd'
+];
+const actionButtonActiveStyling = [...actionbuttonStyling, 'active'];
+const interpolations = [...Object.values(dimensions.dimensionInterpolations)];
+const styleInterpolations = mergeInterpolations.mergeInterpolations(interpolations);
+/**
+ * A SplitMenuButton is a combined action and menu button.
+ */
+const SplitMenuButton = compat.forwardRef(({ children, label = '', variant = 'outlined', isDisabled = false, size = 'md', testId, onAction, 'aria-describedby': ariaDescribedBy, onBlur: propsOnBlur, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart, ...props }, ref) => {
+    const [isMenuOpen, setIsMenuOpen] = hooks.useState(false);
+    const [isActive, setIsActive] = hooks.useState(false);
+    const { class: cls, ...styles } = styleInterpolations(props);
+    // 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) => {
+        //Focus has to be set on the launcher when menu is dismissed or
+        //item is "selected"
+        if (e.reason === 'dismissed' || e.reason === 'itemAction') {
+            _ref.current?.focus();
+        }
+        setIsMenuOpen(false);
+    };
+    const { classes, styles: themeStyles } = useComponentTheme.useComponentTheme(UNSAFE_SplitMenuButton_themes_redwood_SplitMenuButtonTheme_css.SplitMenuButtonRedwoodTheme, {
+        styleVariant: variant
+    });
+    const dividerStyles = classNames.classNames([
+        themeStyles.divider,
+        isDisabled && themeStyles.disabledDivider
+    ]);
+    const globalEventProps = {
+        onBlur: propsOnBlur,
+        onFocus,
+        onMouseEnter,
+        onMouseLeave,
+        onTouchEnd,
+        onTouchStart
+    };
+    const customGlobalEventProps = {
+        onKeyDown: isDisabled ? undefined : onKeyDown,
+        onKeyUp: onKeyUp,
+        onBlur: onBlur
+    };
+    const rootStyles = classNames.classNames([classes, cls]);
+    // 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, { elementDetails: { type: 'span' }, ref: _ref, isDisabled: isDisabled, styling: ['container', 'min'], variant: variant, size: size, testId: testId, "aria-label": label, "aria-roledescription": "split menu button, press down arrow to invoke menu", "aria-describedby": ariaDescribedBy, "aria-expanded": isMenuOpen, children: jsxRuntime.jsxs(TabbableModeContext.TabbableModeContext.Provider, { value: { isTabbable: false }, children: [jsxRuntime.jsx(BaseButton.BaseButton, { elementDetails: { type: 'span', isFocusable: false }, variant: variant, styling: getActionButtonStyling(isActive), size: size, isDisabled: isDisabled, "aria-hidden": true, onAction: onAction, children: jsxRuntime.jsx(Text.Text, { truncation: 'ellipsis', weight: 'inherit', children: label }) }), jsxRuntime.jsx("div", { class: `${dividerStyles}` }), jsxRuntime.jsx(BaseButton.BaseButton, { elementDetails: { type: 'span', isFocusable: false }, variant: variant, styling: getMenuButtonStyling(isMenuOpen), size: size, isDisabled: isDisabled, "aria-hidden": true, onAction: menuHandler, children: jsxRuntime.jsx(ButtonLabelLayout.ButtonLabelLayout, { display: "icons", startIcon: jsxRuntime.jsx(ChevronDown.SvgChevronDown, {}), size: size, styling: "embedded" }) })] }) }));
+    };
+    if (isDisabled) {
+        return (jsxRuntime.jsx("span", { role: "toolbar", class: rootStyles, style: styles, children: rootButton() }));
+    }
+    else {
+        /*TODO: Remove this hardcoded offsetValue so we have dropdown offset only set on one single place.
+          Could be done via menu props or having a dropdownMenu component. JET-60595*/
+        /*TODO: Once menu expose a prop to set min width we would need to calculate offset width of button
+         so we set the correct min width since dropdown menus are 200px but if triggered element width is
+         bigger should be that size. JET-60745 */
+        return (jsxRuntime.jsxs("span", { role: "toolbar", class: rootStyles, ...mergeProps.mergeProps(globalEventProps, customGlobalEventProps), style: styles, children: [rootButton(), jsxRuntime.jsx(Menu.Menu, { anchorRef: _ref, isOpen: isMenuOpen, onClose: handleClose, children: children })] }));
+    }
+});
+function getMenuButtonStyling(isActive) {
+    return isActive ? menuButtonActiveStyling : menuButtonStyling;
+}
+function getActionButtonStyling(isActive) {
+    return isActive ? actionButtonActiveStyling : actionbuttonStyling;
+}
+SplitMenuButton.displayName = 'SplitMenuButton';
+
+exports.SplitMenuButton = SplitMenuButton;
+//# sourceMappingURL=SplitMenuButton-6cd3278c.js.map

package/cjs/SplitMenuButton-6cd3278c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitMenuButton-6cd3278c.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 { ButtonLabelLayout } from '../UNSAFE_ButtonLabelLayout';\nimport { MenuButtonDropdownIcon } from '../PRIVATE_ThemedIcons/MenuButtonDropdownIcon';\nimport { Menu } from '../UNSAFE_Menu';\nimport { Text } from '../UNSAFE_Text';\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';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport {\n  SplitMenuButtonStyles,\n  SplitMenuButtonVariantOptions\n} from './themes/SplitMenuButtonStyles.css';\nimport { SplitMenuButtonRedwoodTheme } from './themes/redwood/SplitMenuButtonTheme.css';\n\nimport { ComponentChildren } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useCallback, useState, useRef, useImperativeHandle } from 'preact/hooks';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\n\ntype IntrinsicProps = Pick<\n  HTMLAttributesSignalExcluded<HTMLElement>,\n  | 'autofocus'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onMouseEnter'\n  | 'onMouseLeave'\n  | 'onTouchEnd'\n  | 'onTouchStart'\n  | 'aria-describedby'\n>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type Props = IntrinsicProps &\n  WidthInterpolationProps &\n  TestIdProps & {\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\nconst menuButtonStyling = [\n  'embedded',\n  'min',\n  'noBorderRadiusStart',\n  'noBorderStart'\n] as StylingOptions[];\nconst menuButtonActiveStyling = [...menuButtonStyling, 'active'] as StylingOptions[];\n\nconst actionbuttonStyling = [\n  'embedded',\n  'fill',\n  'noBorderRadiusEnd',\n  'noBorderEnd'\n] 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      testId,\n      onAction,\n      'aria-describedby': ariaDescribedBy,\n      onBlur: propsOnBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart,\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      //Focus has to be set on the launcher when menu is dismissed or\n      //item is \"selected\"\n      if (e.reason === 'dismissed' || e.reason === 'itemAction') {\n        _ref.current?.focus();\n      }\n      setIsMenuOpen(false);\n    };\n\n    const { classes, styles: themeStyles } = useComponentTheme<\n      SplitMenuButtonVariantOptions,\n      SplitMenuButtonStyles\n    >(SplitMenuButtonRedwoodTheme, {\n      styleVariant: variant\n    });\n\n    const dividerStyles = classNames([\n      themeStyles.divider,\n      isDisabled && themeStyles.disabledDivider\n    ]);\n\n    const globalEventProps = {\n      onBlur: propsOnBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart\n    };\n\n    const customGlobalEventProps = {\n      onKeyDown: isDisabled ? undefined : onKeyDown,\n      onKeyUp: onKeyUp,\n      onBlur: onBlur\n    };\n\n    const rootStyles = classNames([classes, cls]);\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          testId={testId}\n          aria-label={label}\n          aria-roledescription=\"split menu button, press down arrow to invoke menu\"\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={isMenuOpen}>\n          <TabbableModeContext.Provider value={{ isTabbable: false }}>\n            <BaseButton\n              elementDetails={{ type: 'span', isFocusable: false }}\n              variant={variant}\n              styling={getActionButtonStyling(isActive)}\n              size={size}\n              isDisabled={isDisabled}\n              aria-hidden={true}\n              onAction={onAction}>\n              <Text truncation={'ellipsis'} weight={'inherit'}>\n                {label}\n              </Text>\n            </BaseButton>\n            <div class={`${dividerStyles}`} />\n            <BaseButton\n              elementDetails={{ type: 'span', isFocusable: false }}\n              variant={variant}\n              styling={getMenuButtonStyling(isMenuOpen)}\n              size={size}\n              isDisabled={isDisabled}\n              aria-hidden={true}\n              onAction={menuHandler}>\n              <ButtonLabelLayout\n                display=\"icons\"\n                startIcon={<MenuButtonDropdownIcon />}\n                size={size}\n                styling=\"embedded\"></ButtonLabelLayout>\n            </BaseButton>\n          </TabbableModeContext.Provider>\n        </BaseButton>\n      );\n    };\n\n    if (isDisabled) {\n      return (\n        <span role=\"toolbar\" class={rootStyles} style={styles}>\n          {rootButton()}\n        </span>\n      );\n    } else {\n      /*TODO: Remove this hardcoded offsetValue so we have dropdown offset only set on one single place.\n        Could be done via menu props or having a dropdownMenu component. JET-60595*/\n\n      /*TODO: Once menu expose a prop to set min width we would need to calculate offset width of button\n       so we set the correct min width since dropdown menus are 200px but if triggered element width is\n       bigger should be that size. JET-60745 */\n      return (\n        <span\n          role=\"toolbar\"\n          class={rootStyles}\n          {...mergeProps(globalEventProps, customGlobalEventProps)}\n          style={styles}>\n          {rootButton()}\n          <Menu anchorRef={_ref} isOpen={isMenuOpen} onClose={handleClose}>\n            {children}\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\nSplitMenuButton.displayName = 'SplitMenuButton';\n"],"names":["dimensionInterpolations","mergeInterpolations","forwardRef","useState","useCallback","useRef","useImperativeHandle","useComponentTheme","SplitMenuButtonRedwoodTheme","classNames","_jsx","BaseButton","_jsxs","TabbableModeContext","Text","ButtonLabelLayout","MenuButtonDropdownIcon","mergeProps","Menu"],"mappings":"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"}

package/cjs/StyledCard-f6b7f046.js

@@ -0,0 +1,107 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var dimensions = require('./dimensions-10159104.js');
+var padding = require('./padding-3698be6b.js');
+var colors = require('./colors-2bfecc93.js');
+var aria = require('./aria-889aedd0.js');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var PRIVATE_StyledCard_themes_StyledCardStyles_css = require('./PRIVATE_StyledCard/themes/StyledCardStyles.css.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var useTestId = require('./useTestId-e267a39d.js');
+var _curry2 = require('./_curry2-c15d89cd.js');
+
+/**
+ * Returns a partial copy of an object containing only the keys specified. If
+ * the key does not exist, the property is ignored.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Object
+ * @sig [k] -> {k: v} -> {k: v}
+ * @param {Array} names an array of String property names to copy onto a new object
+ * @param {Object} obj The object to copy from
+ * @return {Object} A new object with only properties from `names` on it.
+ * @see R.omit, R.props
+ * @example
+ *
+ *      R.pick(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {a: 1, d: 4}
+ *      R.pick(['a', 'e', 'f'], {a: 1, b: 2, c: 3, d: 4}); //=> {a: 1}
+ */
+
+var pick =
+/*#__PURE__*/
+_curry2._curry2(function pick(names, obj) {
+  var result = {};
+  var idx = 0;
+
+  while (idx < names.length) {
+    if (names[idx] in obj) {
+      result[names[idx]] = obj[names[idx]];
+    }
+
+    idx += 1;
+  }
+
+  return result;
+});
+
+var pick$1 = pick;
+
+const eventHandlers = [
+    'onBlur',
+    'onClick',
+    'onContextMenu',
+    'onFocus',
+    'onKeyDown',
+    'onKeyUp',
+    'onMouseDown',
+    'onMouseEnter',
+    'onMouseLeave',
+    'onMouseUp',
+    'onPointerCancel',
+    'onPointerDown',
+    'onPointerOut',
+    'onPointerUp',
+    'onTouchCancel',
+    'onTouchEnd',
+    'onTouchStart'
+];
+const interpolations = [
+    ...Object.values(dimensions.dimensionInterpolations),
+    ...Object.values(colors.colorInterpolations),
+    ...Object.values(padding.paddingInterpolations),
+    ...Object.values(aria.ariaInterpolations)
+];
+const mergedInterpolations = mergeInterpolations.mergeInterpolations(interpolations);
+/**
+ * A StyledCard is a simple container that renders a group of related information in a styled rectangular area.
+ * Width, height, padding, and background color are set through props.
+ * This component is used by Card, SelectionCard, ActionCard, and RichSelectionItem.
+ */
+const StyledCard = compat.forwardRef(({ ['aria-describedby']: ariaDescribedBy, children, cursor, display = 'inlineBlock', isActive, isDisabled, isFocusWithin, isHover, isSelected, parentComponentVariant = 'default', role, styleVariant, tabIndex, testId, ...rest }, ref) => {
+    const testIdProps = useTestId.useTestId(testId);
+    // we want to pick all the event handlers only to spread over the div element
+    const eventHandlersProps = pick$1(eventHandlers, rest);
+    const { class: mergedClasses, ariaLabel, ariaLabelledBy, ...mergedStyles } = mergedInterpolations(rest);
+    const variantClasses = PRIVATE_StyledCard_themes_StyledCardStyles_css.multiVariantStyles({
+        active: isActive ? 'isActive' : undefined,
+        cursor,
+        display,
+        disabled: isDisabled ? 'isDisabled' : undefined,
+        focusRing: tabIndex !== undefined && tabIndex >= 0 ? 'hasFocusRing' : undefined,
+        focusWithin: isFocusWithin ? 'hasFocusWithin' : undefined,
+        hover: isHover ? 'isHover' : 'notHover',
+        parentComponentVariant,
+        selected: isSelected ? 'isSelected' : 'notSelected',
+        styleVariant
+    });
+    const classes = classNames.classNames([variantClasses, mergedClasses]);
+    return (jsxRuntime.jsx("div", { ...eventHandlersProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className: classes, tabIndex: tabIndex, ref: ref, role: role, style: mergedStyles, ...testIdProps, children: children }));
+});
+
+exports.StyledCard = StyledCard;
+//# sourceMappingURL=StyledCard-f6b7f046.js.map

package/cjs/StyledCard-f6b7f046.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledCard-f6b7f046.js","sources":["../../../../node_modules/ramda/es/pick.js","../../src/PRIVATE_StyledCard/StyledCard.tsx"],"sourcesContent":["import _curry2 from \"./internal/_curry2.js\";\n/**\n * Returns a partial copy of an object containing only the keys specified. If\n * the key does not exist, the property is ignored.\n *\n * @func\n * @memberOf R\n * @since v0.1.0\n * @category Object\n * @sig [k] -> {k: v} -> {k: v}\n * @param {Array} names an array of String property names to copy onto a new object\n * @param {Object} obj The object to copy from\n * @return {Object} A new object with only properties from `names` on it.\n * @see R.omit, R.props\n * @example\n *\n *      R.pick(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {a: 1, d: 4}\n *      R.pick(['a', 'e', 'f'], {a: 1, b: 2, c: 3, d: 4}); //=> {a: 1}\n */\n\nvar pick =\n/*#__PURE__*/\n_curry2(function pick(names, obj) {\n  var result = {};\n  var idx = 0;\n\n  while (idx < names.length) {\n    if (names[idx] in obj) {\n      result[names[idx]] = obj[names[idx]];\n    }\n\n    idx += 1;\n  }\n\n  return result;\n});\n\nexport default pick;","/**\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 { ComponentChildren, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { pick } from 'ramda';\n\nimport { dimensionInterpolations, DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { paddingInterpolations, PaddingProps } from '#utils/UNSAFE_interpolations/padding';\nimport { colorInterpolations, ColorProps } from '#utils/UNSAFE_interpolations/colors';\nimport { AriaProps, ariaInterpolations } from '#utils/UNSAFE_interpolations/aria';\nimport { mergeInterpolations } from '#utils/UNSAFE_mergeInterpolations';\nimport { multiVariantStyles } from './themes/StyledCardStyles.css';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\nimport { Role } from '#utils/UNSAFE_roles';\nimport {\n  AriaAttributesSignalExcluded,\n  HTMLAttributesSignalExcluded\n} from '#utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLElement>, EventHandlers>;\n\ntype EventHandlers = (typeof eventHandlers)[number];\n\ntype StyleProps = DimensionProps & PaddingProps & ColorProps & AriaProps;\ntype Props = StyleProps &\n  IntrinsicProps &\n  TestIdProps & {\n    children?: ComponentChildren;\n    /**\n     * Specifies if the card uses the pointer cursor.\n     */\n    cursor?: 'pointer';\n    /**\n     * Specifies the card element display type.\n     */\n    display?: 'inlineBlock' | 'inlineFlex';\n    /**\n     * Specifies if the card is in an active state.\n     */\n    isActive?: boolean;\n    /**\n     * Specifies if the card is in a disabled state.\n     */\n    isDisabled?: boolean;\n    /**\n     * Specifies if the card is in a hover state.\n     */\n    isHover?: boolean;\n    /**\n     * Specifies if the card as selected within a collection.\n     */\n    isSelected?: boolean;\n    /**\n     * Specifies the parent component variant\n     */\n    parentComponentVariant?: (typeof parentComponentVariants)[number];\n    /**\n     * Specifies aria role for the card element.\n     */\n    role?: Role;\n    /**\n     * Specifies the chroming of the card element\n     */\n    styleVariant?: 'danger';\n  } & (\n    | {\n        /**\n         * Specifies if the card has a focused input within.\n         */\n        isFocusWithin?: boolean;\n        tabIndex?: never;\n      }\n    | {\n        /**\n         * Specifies the tab index of the card element.\n         */\n        tabIndex?: number;\n        isFocusWithin?: never;\n      }\n  ) &\n  Pick<AriaAttributesSignalExcluded, 'aria-describedby'>;\n\nconst parentComponentVariants = [\n  'default',\n  'actionCard',\n  'selectionCard',\n  'richSelectionItemCard'\n] as const;\n\nconst eventHandlers = [\n  'onBlur',\n  'onClick',\n  'onContextMenu',\n  'onFocus',\n  'onKeyDown',\n  'onKeyUp',\n  'onMouseDown',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseUp',\n  'onPointerCancel',\n  'onPointerDown',\n  'onPointerOut',\n  'onPointerUp',\n  'onTouchCancel',\n  'onTouchEnd',\n  'onTouchStart'\n] as const;\n\nconst interpolations = [\n  ...Object.values(dimensionInterpolations),\n  ...Object.values(colorInterpolations),\n  ...Object.values(paddingInterpolations),\n  ...Object.values(ariaInterpolations)\n];\n\nconst mergedInterpolations = mergeInterpolations<Props>(interpolations);\n\n/**\n * A StyledCard is a simple container that renders a group of related information in a styled rectangular area.\n * Width, height, padding, and background color are set through props.\n * This component is used by Card, SelectionCard, ActionCard, and RichSelectionItem.\n */\nconst StyledCard = forwardRef(\n  (\n    {\n      ['aria-describedby']: ariaDescribedBy,\n      children,\n      cursor,\n      display = 'inlineBlock',\n      isActive,\n      isDisabled,\n      isFocusWithin,\n      isHover,\n      isSelected,\n      parentComponentVariant = 'default',\n      role,\n      styleVariant,\n      tabIndex,\n      testId,\n      ...rest\n    }: Props,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const testIdProps = useTestId(testId);\n\n    // we want to pick all the event handlers only to spread over the div element\n    const eventHandlersProps = pick(eventHandlers, rest);\n\n    const {\n      class: mergedClasses,\n      ariaLabel,\n      ariaLabelledBy,\n      ...mergedStyles\n    } = mergedInterpolations(rest);\n\n    const variantClasses = multiVariantStyles({\n      active: isActive ? 'isActive' : undefined,\n      cursor,\n      display,\n      disabled: isDisabled ? 'isDisabled' : undefined,\n      focusRing: tabIndex !== undefined && tabIndex >= 0 ? 'hasFocusRing' : undefined,\n      focusWithin: isFocusWithin ? 'hasFocusWithin' : undefined,\n      hover: isHover ? 'isHover' : 'notHover',\n      parentComponentVariant,\n      selected: isSelected ? 'isSelected' : 'notSelected',\n      styleVariant\n    });\n\n    const classes = classNames([variantClasses, mergedClasses]);\n\n    return (\n      <div\n        {...eventHandlersProps}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={classes}\n        tabIndex={tabIndex}\n        ref={ref}\n        role={role}\n        style={mergedStyles}\n        {...testIdProps}>\n        {children}\n      </div>\n    );\n  }\n);\n\nexport { StyledCard, parentComponentVariants };\n"],"names":["_curry2","dimensionInterpolations","colorInterpolations","paddingInterpolations","ariaInterpolations","mergeInterpolations","forwardRef","useTestId","pick","multiVariantStyles","classNames","_jsx"],"mappings":"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"}

package/cjs/StyledTextField-1d94ce8e.js

@@ -0,0 +1,142 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var UNSAFE_Label_themes_redwood_LabelTheme = require('./UNSAFE_Label/themes/redwood/LabelTheme.js');
+var LabelValueLayout = require('./LabelValueLayout-3c33ca16.js');
+var UNSAFE_Skeleton_themes_redwood_SkeletonTheme = require('./UNSAFE_Skeleton/themes/redwood/SkeletonTheme.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var useTestId = require('./useTestId-e267a39d.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var LayoutStyles_css = require('./LayoutStyles.css-73ce5266.js');
+var compat = require('preact/compat');
+require('./FormContext-9452bd30.js');
+var useFormContext = require('./useFormContext-4c3091dc.js');
+require('./FormFieldContext-8418dc68.js');
+var useFormFieldContext = require('./useFormFieldContext-20f419ef.js');
+var Flex = require('./Flex-ce16a2fa.js');
+require('./InputGroupContext-05f2a46f.js');
+var useInputGroupContext = require('./useInputGroupContext-4c10bd57.js');
+var useUser = require('./useUser-8aaad5a7.js');
+var UNSAFE_TextField_themes_redwood_TextFieldTheme = require('./UNSAFE_TextField/themes/redwood/TextFieldTheme.js');
+var UNSAFE_TextField_themes_redwood_ReadonlyTextFieldTheme = require('./UNSAFE_TextField/themes/redwood/ReadonlyTextFieldTheme.js');
+var UNSAFE_TextField_themes_redwood_FormLayoutTheme = require('./UNSAFE_TextField/themes/redwood/FormLayoutTheme.js');
+
+// Renders the oj-text-field-container dom which includes the
+// main (where the inside label and inputElem goes),
+// and end pieces of the form component.
+// This does not include user assistance because that is rendered outside the
+// oj-text-field-container; that is rendered in the TextField component.
+const ReadonlyTextFieldContent = ({ variant, insideLabel, mainContent, endContent, rootRef, resize }) => {
+    const { isFormLayout, isReadonly: isReadonlyForm } = useFormContext.useFormContext();
+    const { isLoading } = useFormFieldContext.useFormFieldContext();
+    const { direction } = useUser.useUser();
+    const isLtr = direction === 'ltr';
+    const isInsideNonReadonlyForm = isFormLayout && !isReadonlyForm;
+    const hasInsideLabel = insideLabel !== undefined;
+    const inputGroupContext = useInputGroupContext.useInputGroupContext();
+    const hasGroupContext = inputGroupContext !== null;
+    // depending on browser direction, apply the appropriate styling.
+    // when 'rtl' the flex row direction is reversed.
+    const inputGroupPosition = inputGroupContext
+        ? inputGroupContext.last
+            ? isLtr
+                ? 'groupRight'
+                : 'groupLeft'
+            : inputGroupContext.index === 0
+                ? isLtr
+                    ? 'groupLeft'
+                    : 'groupRight'
+                : 'groupMiddle'
+        : undefined;
+    const { variantClasses: middleStyles, styles: { textFieldEndContent } } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_TextFieldTheme.TextFieldRedwoodTheme, {
+        middleContent: variant,
+        textAreaResizeDirection: resize && variant === 'textarea' ? direction : undefined
+    });
+    const { classes: readonlyClassNames, styles: { readonlyTextFieldMiddleBase, readonlyTextFieldMiddleNotInEnabledForm, readonlyTextFieldMiddleInEnabledForm, readonlyTextFieldMiddleInEnabledFormNotTextarea } } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_ReadonlyTextFieldTheme.ReadonlyTextFieldRedwoodTheme, {
+        insideNonReadonlyForm: isInsideNonReadonlyForm
+            ? 'isInsideNonReadonlyForm'
+            : 'notInsideNonReadonlyForm',
+        insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel',
+        textarea: variant === 'textarea' ? 'isTextArea' : 'notTextArea',
+        loading: isLoading ? 'isLoading' : 'notLoading',
+        withinGroup: hasGroupContext ? 'isWithinGroup' : undefined,
+        inputGroupPosition,
+        resize: resize ?? 'none'
+    });
+    const middleClasses = classNames.classNames([
+        middleStyles,
+        readonlyTextFieldMiddleBase,
+        isInsideNonReadonlyForm && readonlyTextFieldMiddleInEnabledForm,
+        isInsideNonReadonlyForm &&
+            variant !== 'textarea' &&
+            readonlyTextFieldMiddleInEnabledFormNotTextarea,
+        !isInsideNonReadonlyForm && readonlyTextFieldMiddleNotInEnabledForm
+    ]);
+    return (jsxRuntime.jsxs("div", { role: "presentation", class: readonlyClassNames, ref: rootRef, children: [jsxRuntime.jsxs("div", { class: middleClasses, children: [insideLabel, mainContent] }), endContent && (jsxRuntime.jsx("span", { class: textFieldEndContent, children: jsxRuntime.jsx(Flex.Flex, { justify: "center", align: "center", hasZeroMargins: true, children: endContent }) }))] }));
+};
+
+const StartTopLabelReadonlyTextField = compat.forwardRef(({ outerClassNames, label, labelEdge, labelStartWidth, compactUserAssistance, inlineUserAssistance, mainContent, endContent, rootRef, variant, resize, ...props }, ref) => {
+    const parentComponentVariant = variant === 'textarea' ? 'textArea' : 'textField';
+    return (jsxRuntime.jsxs("div", { ...props, ref: ref, class: outerClassNames, children: [compactUserAssistance, jsxRuntime.jsx(LabelValueLayout.LabelValueLayout, { label: label, labelEdge: labelEdge, labelStartWidth: labelStartWidth, parentComponentVariant: parentComponentVariant, children: jsxRuntime.jsx(ReadonlyTextFieldContent, { mainContent: mainContent, endContent: endContent, rootRef: rootRef, ...(variant ? { variant, resize } : {}) }) }), inlineUserAssistance] }));
+});
+const InsideLabelReadonlyTextField = compat.forwardRef(({ outerClassNames, compactUserAssistance, inlineUserAssistance, mainContent, endContent, label, rootRef, variant, resize, ...props }, ref) => {
+    return (jsxRuntime.jsxs("div", { ...props, ref: ref, class: outerClassNames, children: [compactUserAssistance, jsxRuntime.jsx(ReadonlyTextFieldContent, { insideLabel: label, mainContent: mainContent, endContent: endContent, rootRef: rootRef, ...(variant ? { variant, resize } : {}) }), inlineUserAssistance] }));
+});
+const ReadonlyTextField = compat.forwardRef(({ columnSpan = 1, label, labelEdge, mainContent, endContent, variant, mainFieldRef, testId, ...props }, ref) => {
+    const testIdProps = useTestId.useTestId(testId);
+    const { classes, styles } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_TextFieldTheme.TextFieldRedwoodTheme, {
+        readonly: 'isReadonly'
+    });
+    const { baseTheme: labelBaseTheme } = useComponentTheme.useComponentTheme(UNSAFE_Label_themes_redwood_LabelTheme.LabelRedwoodTheme);
+    const { baseTheme: formLayoutTheme } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_FormLayoutTheme.FormLayoutRedwoodTheme);
+    const { formControlBase } = styles;
+    // because TextField components reference Skeleton scoped vars, we need to bring in the Skeleton base theme
+    // to pick up the scoped var definitions.
+    const { baseTheme: skeletonBaseTheme } = useComponentTheme.useComponentTheme(UNSAFE_Skeleton_themes_redwood_SkeletonTheme.SkeletonRedwoodTheme);
+    const outerClassNames = classNames.classNames([
+        classes,
+        skeletonBaseTheme,
+        formControlBase,
+        formLayoutTheme,
+        labelBaseTheme,
+        LayoutStyles_css.layoutSpanStyles.layoutSpanColumn[columnSpan]
+    ]);
+    if (label !== undefined && (labelEdge === 'start' || labelEdge === 'top')) {
+        return (jsxRuntime.jsx(StartTopLabelReadonlyTextField, { outerClassNames: outerClassNames, label: label, labelEdge: labelEdge, ref: ref, mainContent: mainContent, endContent: endContent, rootRef: mainFieldRef, variant: variant, ...props, ...testIdProps }));
+    }
+    return (jsxRuntime.jsx(InsideLabelReadonlyTextField, { outerClassNames: outerClassNames, ref: ref, label: label, mainContent: mainContent, endContent: endContent, rootRef: mainFieldRef, variant: variant, ...props, ...testIdProps }));
+});
+
+const StyledTextField = compat.forwardRef(({ columnSpan = 1, hasInsideLabel = false, variant = 'default', ...props }, ref) => {
+    // because of the mismatch of height for inputs with inside labels and no labels,
+    // we'll have to set everything to the same min-height while within an input group context.
+    // Here we'll look to see if it's present and apply the style as needed
+    const groupContext = useInputGroupContext.useInputGroupContext();
+    const { isReadonly } = useFormFieldContext.useFormFieldContext();
+    const { baseTheme: formLayoutTheme } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_FormLayoutTheme.FormLayoutRedwoodTheme);
+    const { baseTheme: labelBaseTheme } = useComponentTheme.useComponentTheme(UNSAFE_Label_themes_redwood_LabelTheme.LabelRedwoodTheme);
+    const { classes: textFieldClasses, styles } = useComponentTheme.useComponentTheme(UNSAFE_TextField_themes_redwood_TextFieldTheme.TextFieldRedwoodTheme, {
+        readonly: isReadonly ? 'isReadonly' : 'notReadonly',
+        withinGroup: groupContext !== null ? 'isWithinGroup' : undefined
+    });
+    const { formControlBase, textFieldBase, textFieldEmbedded } = styles;
+    // because TextField components reference Skeleton scoped vars, we need to bring in the Skeleton base theme
+    // to pick up the scoped var definitions.
+    const { baseTheme: skeletonBaseTheme } = useComponentTheme.useComponentTheme(UNSAFE_Skeleton_themes_redwood_SkeletonTheme.SkeletonRedwoodTheme);
+    const classes = classNames.classNames([
+        skeletonBaseTheme,
+        formControlBase,
+        textFieldBase,
+        variant === 'embedded' && textFieldEmbedded,
+        textFieldClasses,
+        formLayoutTheme,
+        labelBaseTheme,
+        LayoutStyles_css.layoutSpanStyles.layoutSpanColumn[columnSpan]
+    ]);
+    return jsxRuntime.jsx("div", { ...props, class: classes, ref: ref });
+});
+
+exports.ReadonlyTextField = ReadonlyTextField;
+exports.StyledTextField = StyledTextField;
+//# sourceMappingURL=StyledTextField-1d94ce8e.js.map

package/cjs/StyledTextField-1d94ce8e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTextField-1d94ce8e.js","sources":["../../src/UNSAFE_TextField/ReadonlyTextFieldContent.tsx","../../src/UNSAFE_TextField/ReadonlyTextField.tsx","../../src/UNSAFE_TextField/StyledTextField.tsx"],"sourcesContent":["import { ComponentChildren, Ref } from 'preact';\n\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { Flex } from '../UNSAFE_Flex';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useInputGroupContext } from '../hooks/UNSAFE_useInputGroupContext';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport type { TextFieldStyles, TextFieldVariantOptions } from './themes/TextFieldStyles.css';\nimport { TextFieldRedwoodTheme } from './themes/redwood/TextFieldTheme';\nimport type {\n  ReadonlyTextFieldStyles,\n  ReadonlyTextFieldVariantOptions\n} from './themes/ReadonlyTextFieldStyles.css';\nimport { ReadonlyTextFieldRedwoodTheme } from './themes/redwood/ReadonlyTextFieldTheme';\n\ntype VariantProps =\n  | {\n      variant?: never;\n      resize?: never;\n    }\n  | {\n      variant: 'textarea';\n      resize?: 'horizontal' | 'vertical' | 'both';\n    };\n\ntype Props = VariantProps & {\n  mainContent?: ComponentChildren;\n  insideLabel?: ComponentChildren;\n  endContent?: ComponentChildren;\n  rootRef?: Ref<HTMLDivElement>;\n  hasZeroStartMargin?: boolean;\n};\n\n// Renders the oj-text-field-container dom which includes the\n// main (where the inside label and inputElem goes),\n// and end pieces of the form component.\n// This does not include user assistance because that is rendered outside the\n// oj-text-field-container; that is rendered in the TextField component.\nexport const ReadonlyTextFieldContent = ({\n  variant,\n  insideLabel,\n  mainContent,\n  endContent,\n  rootRef,\n  resize\n}: Props) => {\n  const { isFormLayout, isReadonly: isReadonlyForm } = useFormContext();\n  const { isLoading } = useFormFieldContext();\n  const { direction } = useUser();\n  const isLtr = direction === 'ltr';\n  const isInsideNonReadonlyForm = isFormLayout && !isReadonlyForm;\n  const hasInsideLabel = insideLabel !== undefined;\n  const inputGroupContext = useInputGroupContext();\n  const hasGroupContext = inputGroupContext !== null;\n  // depending on browser direction, apply the appropriate styling.\n  // when 'rtl' the flex row direction is reversed.\n  const inputGroupPosition = inputGroupContext\n    ? inputGroupContext.last\n      ? isLtr\n        ? 'groupRight'\n        : 'groupLeft'\n      : inputGroupContext.index === 0\n      ? isLtr\n        ? 'groupLeft'\n        : 'groupRight'\n      : 'groupMiddle'\n    : undefined;\n\n  const {\n    variantClasses: middleStyles,\n    styles: { textFieldEndContent }\n  } = useComponentTheme<TextFieldVariantOptions, TextFieldStyles>(TextFieldRedwoodTheme, {\n    middleContent: variant,\n    textAreaResizeDirection: resize && variant === 'textarea' ? direction : undefined\n  });\n\n  const {\n    classes: readonlyClassNames,\n    styles: {\n      readonlyTextFieldMiddleBase,\n      readonlyTextFieldMiddleNotInEnabledForm,\n      readonlyTextFieldMiddleInEnabledForm,\n      readonlyTextFieldMiddleInEnabledFormNotTextarea\n    }\n  } = useComponentTheme<ReadonlyTextFieldVariantOptions, ReadonlyTextFieldStyles>(\n    ReadonlyTextFieldRedwoodTheme,\n    {\n      insideNonReadonlyForm: isInsideNonReadonlyForm\n        ? 'isInsideNonReadonlyForm'\n        : 'notInsideNonReadonlyForm',\n      insideLabel: hasInsideLabel ? 'hasInsideLabel' : 'noInsideLabel',\n      textarea: variant === 'textarea' ? 'isTextArea' : 'notTextArea',\n      loading: isLoading ? 'isLoading' : 'notLoading',\n      withinGroup: hasGroupContext ? 'isWithinGroup' : undefined,\n      inputGroupPosition,\n      resize: resize ?? 'none'\n    }\n  );\n\n  const middleClasses = classNames([\n    middleStyles,\n    readonlyTextFieldMiddleBase,\n    isInsideNonReadonlyForm && readonlyTextFieldMiddleInEnabledForm,\n    isInsideNonReadonlyForm &&\n      variant !== 'textarea' &&\n      readonlyTextFieldMiddleInEnabledFormNotTextarea,\n    !isInsideNonReadonlyForm && readonlyTextFieldMiddleNotInEnabledForm\n  ]);\n\n  return (\n    <div role=\"presentation\" class={readonlyClassNames} ref={rootRef}>\n      <div class={middleClasses}>\n        {insideLabel}\n        {mainContent}\n      </div>\n      {endContent && (\n        <span class={textFieldEndContent}>\n          <Flex justify=\"center\" align=\"center\" hasZeroMargins={true}>\n            {endContent}\n          </Flex>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport type { VariantProps };\n","import { LabelRedwoodTheme } from '#UNSAFE_Label/themes/redwood/LabelTheme';\nimport { LabelValueLayout } from '#UNSAFE_LabelValueLayout';\nimport { SkeletonRedwoodTheme } from '#UNSAFE_Skeleton/themes/redwood/SkeletonTheme';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { useTestId, type TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { HTMLAttributesSignalExcluded } from '#utils/UNSAFE_attributeUtils';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { Size } from '#utils/UNSAFE_size';\nimport { LayoutColumnSpan, layoutSpanStyles } from '#utils/UNSAFE_styles/Layout';\nimport { StyledComponentProps } from '#utils/UNSAFE_typeUtils';\nimport { ComponentChildren, ComponentProps, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { ReadonlyTextFieldContent, VariantProps } from './ReadonlyTextFieldContent';\nimport { FormLayoutRedwoodTheme } from './themes/redwood/FormLayoutTheme';\nimport { TextFieldRedwoodTheme } from './themes/redwood/TextFieldTheme';\n\ntype DivProps = HTMLAttributesSignalExcluded<HTMLDivElement>;\ntype UAProps = {\n  compactUserAssistance?: ComponentChildren;\n  inlineUserAssistance?: ComponentChildren;\n};\ntype OuterClassNamesProps = {\n  outerClassNames?: string;\n};\n\ntype PickedPropsFromReadonlyTextFieldContent = Pick<\n  ComponentProps<typeof ReadonlyTextFieldContent>,\n  'mainContent' | 'endContent'\n>;\n\ntype StartTopLabelReadonlyTextFieldProps = Omit<DivProps, 'label'> &\n  UAProps &\n  VariantProps &\n  PickedPropsFromReadonlyTextFieldContent &\n  OuterClassNamesProps & {\n    label?: ComponentChildren;\n    labelEdge?: 'start' | 'top';\n    labelStartWidth?: Size;\n    rootRef?: Ref<HTMLDivElement>;\n  };\n\nconst StartTopLabelReadonlyTextField = forwardRef(\n  (\n    {\n      outerClassNames,\n      label,\n      labelEdge,\n      labelStartWidth,\n      compactUserAssistance,\n      inlineUserAssistance,\n      mainContent,\n      endContent,\n      rootRef,\n      variant,\n      resize,\n      ...props\n    }: StartTopLabelReadonlyTextFieldProps,\n    ref?: Ref<HTMLDivElement>\n  ) => {\n    const parentComponentVariant = variant === 'textarea' ? 'textArea' : 'textField';\n    return (\n      <div {...props} ref={ref} class={outerClassNames}>\n        {compactUserAssistance}\n        <LabelValueLayout\n          label={label}\n          labelEdge={labelEdge}\n          labelStartWidth={labelStartWidth}\n          parentComponentVariant={parentComponentVariant}>\n          <ReadonlyTextFieldContent\n            mainContent={mainContent}\n            endContent={endContent}\n            rootRef={rootRef}\n            {...(variant ? ({ variant, resize } as VariantProps) : {})}\n          />\n        </LabelValueLayout>\n        {inlineUserAssistance}\n      </div>\n    );\n  }\n);\n\ntype InsideLabelReadonlyTextFieldProps = Omit<DivProps, 'label'> &\n  UAProps &\n  VariantProps &\n  PickedPropsFromReadonlyTextFieldContent &\n  OuterClassNamesProps & {\n    label?: ComponentChildren;\n    rootRef?: Ref<HTMLDivElement>;\n  };\nconst InsideLabelReadonlyTextField = forwardRef(\n  (\n    {\n      outerClassNames,\n      compactUserAssistance,\n      inlineUserAssistance,\n      mainContent,\n      endContent,\n      label,\n      rootRef,\n      variant,\n      resize,\n      ...props\n    }: InsideLabelReadonlyTextFieldProps,\n    ref?: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <div {...props} ref={ref} class={outerClassNames}>\n        {compactUserAssistance}\n        <ReadonlyTextFieldContent\n          insideLabel={label}\n          mainContent={mainContent}\n          endContent={endContent}\n          rootRef={rootRef}\n          {...(variant ? ({ variant, resize } as VariantProps) : {})}\n        />\n        {inlineUserAssistance}\n      </div>\n    );\n  }\n);\n\nexport type StyleProps = UAProps &\n  VariantProps &\n  PickedPropsFromReadonlyTextFieldContent & {\n    columnSpan?: LayoutColumnSpan;\n    label?: ComponentChildren;\n    labelEdge?: 'inside' | 'start' | 'top';\n    variant?: 'textarea';\n    mainFieldRef?: Ref<HTMLDivElement>;\n  };\n\ntype Props = TestIdProps & StyledComponentProps<'div', StyleProps>;\n\nexport const ReadonlyTextField = forwardRef(\n  (\n    {\n      columnSpan = 1,\n      label,\n      labelEdge,\n      mainContent,\n      endContent,\n      variant,\n      mainFieldRef,\n      testId,\n      ...props\n    }: Props,\n    ref?: Ref<HTMLElement>\n  ) => {\n    const testIdProps = useTestId(testId);\n    const { classes, styles } = useComponentTheme(TextFieldRedwoodTheme, {\n      readonly: 'isReadonly'\n    });\n    const { baseTheme: labelBaseTheme } = useComponentTheme(LabelRedwoodTheme);\n    const { baseTheme: formLayoutTheme } = useComponentTheme(FormLayoutRedwoodTheme);\n\n    const { formControlBase } = styles;\n    // because TextField components reference Skeleton scoped vars, we need to bring in the Skeleton base theme\n    // to pick up the scoped var definitions.\n    const { baseTheme: skeletonBaseTheme } = useComponentTheme(SkeletonRedwoodTheme);\n\n    const outerClassNames = classNames([\n      classes,\n      skeletonBaseTheme,\n      formControlBase,\n      formLayoutTheme,\n      labelBaseTheme,\n      layoutSpanStyles.layoutSpanColumn[columnSpan]\n    ]);\n\n    if (label !== undefined && (labelEdge === 'start' || labelEdge === 'top')) {\n      return (\n        <StartTopLabelReadonlyTextField\n          outerClassNames={outerClassNames}\n          label={label}\n          labelEdge={labelEdge}\n          ref={ref as Ref<HTMLDivElement> | undefined}\n          mainContent={mainContent}\n          endContent={endContent}\n          rootRef={mainFieldRef}\n          variant={variant}\n          {...props}\n          {...testIdProps}></StartTopLabelReadonlyTextField>\n      );\n    }\n\n    return (\n      <InsideLabelReadonlyTextField\n        outerClassNames={outerClassNames}\n        ref={ref as Ref<HTMLDivElement> | undefined}\n        label={label}\n        mainContent={mainContent}\n        endContent={endContent}\n        rootRef={mainFieldRef}\n        variant={variant}\n        {...props}\n        {...testIdProps}></InsideLabelReadonlyTextField>\n    );\n  }\n);\n","import { Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { StyledComponentProps } from '../utils/UNSAFE_typeUtils';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { TextFieldStyles, TextFieldVariantOptions } from './themes/TextFieldStyles.css';\nimport { useInputGroupContext } from '../hooks/UNSAFE_useInputGroupContext';\nimport { FormLayoutRedwoodTheme } from './themes/redwood/FormLayoutTheme';\nimport { LabelRedwoodTheme } from '../UNSAFE_Label/themes/redwood/LabelTheme';\nimport { TextFieldRedwoodTheme } from './themes/redwood/TextFieldTheme';\nimport { SkeletonRedwoodTheme } from '../UNSAFE_Skeleton/themes/redwood/SkeletonTheme';\nimport { layoutSpanStyles, LayoutColumnSpan } from '../utils/UNSAFE_styles/Layout';\n\nexport type StyleProps = {\n  columnSpan?: LayoutColumnSpan;\n  hasInsideLabel?: boolean;\n  variant?: 'default' | 'embedded';\n};\ntype Props = StyledComponentProps<'div', StyleProps>;\n\nexport const StyledTextField = forwardRef(\n  (\n    { columnSpan = 1, hasInsideLabel = false, variant = 'default', ...props }: Props,\n    ref?: Ref<HTMLElement>\n  ) => {\n    // because of the mismatch of height for inputs with inside labels and no labels,\n    // we'll have to set everything to the same min-height while within an input group context.\n    // Here we'll look to see if it's present and apply the style as needed\n    const groupContext = useInputGroupContext();\n    const { isReadonly } = useFormFieldContext();\n    const { baseTheme: formLayoutTheme } = useComponentTheme(FormLayoutRedwoodTheme);\n    const { baseTheme: labelBaseTheme } = useComponentTheme(LabelRedwoodTheme);\n    const { classes: textFieldClasses, styles } = useComponentTheme<\n      TextFieldVariantOptions,\n      TextFieldStyles\n    >(TextFieldRedwoodTheme, {\n      readonly: isReadonly ? 'isReadonly' : 'notReadonly',\n      withinGroup: groupContext !== null ? 'isWithinGroup' : undefined\n    });\n\n    const { formControlBase, textFieldBase, textFieldEmbedded } = styles;\n\n    // because TextField components reference Skeleton scoped vars, we need to bring in the Skeleton base theme\n    // to pick up the scoped var definitions.\n    const { baseTheme: skeletonBaseTheme } = useComponentTheme(SkeletonRedwoodTheme);\n\n    const classes = classNames([\n      skeletonBaseTheme,\n      formControlBase,\n      textFieldBase,\n      variant === 'embedded' && textFieldEmbedded,\n      textFieldClasses,\n      formLayoutTheme,\n      labelBaseTheme,\n      layoutSpanStyles.layoutSpanColumn[columnSpan]\n    ]);\n\n    return <div {...props} class={classes} ref={ref as Ref<HTMLDivElement> | undefined} />;\n  }\n);\n"],"names":["useFormContext","useFormFieldContext","useUser","useInputGroupContext","useComponentTheme","TextFieldRedwoodTheme","ReadonlyTextFieldRedwoodTheme","classNames","_jsxs","_jsx","Flex","forwardRef","LabelValueLayout","useTestId","LabelRedwoodTheme","FormLayoutRedwoodTheme","SkeletonRedwoodTheme","layoutSpanStyles"],"mappings":"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"}

package/cjs/TabBar-bf94b95a.js

@@ -3,10 +3,10 @@
 
 var jsxRuntime = require('preact/jsx-runtime');
 require('preact/hooks');
-require('./LayerHost-a8c7f182.js');
+require('./LayerHost-7182bfaf.js');
 var compat = require('preact/compat');
 require('./UNSAFE_Text/themes/TextStyles.css.js');
-require('./Flex-e7a85bef.js');
+require('./Flex-ce16a2fa.js');
 var useTabBarContext = require('./useTabBarContext-2a6a796c.js');
 require('./flexitem-fee13e26.js');
 require('./dimensions-10159104.js');
@@ -21,15 +21,15 @@ require('preact');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-669c2ae0.js');
+require('./tooltipUtils-2228b0f7.js');
 
-require('./Floating-56621d20.js');
+require('./Floating-3a80c067.js');
 
 require('./keyboardUtils-691337c0.js');
 require('./tabbableUtils-39e647b7.js');
 require('./CollectionInteractionContext-f84ff7a1.js');
 
-require('./Sheet-86989265.js');
+require('./Sheet-73cb51b2.js');
 
 var TabBarLayout = require('./TabBarLayout-846a4d9a.js');
 var UNSAFE_TabBar_themes_TabBarStyles_css = require('./UNSAFE_TabBar/themes/TabBarStyles.css.js');

package/cjs/TabBarItem-00fcf601.js

@@ -5,9 +5,9 @@ var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var classNames = require('./classNames-c14c6ef3.js');
 var usePress = require('./usePress-886180e4.js');
-var useUser = require('./useUser-a4bfc560.js');
+var useUser = require('./useUser-8aaad5a7.js');
 var Text = require('./Text-5ed5f710.js');
-var Flex = require('./Flex-e7a85bef.js');
+var Flex = require('./Flex-ce16a2fa.js');
 var useTabBarContext = require('./useTabBarContext-2a6a796c.js');
 var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
 var flexitem = require('./flexitem-fee13e26.js');
@@ -22,7 +22,7 @@ var ErrorS = require('./ErrorS-ed472612.js');
 var InformationS = require('./InformationS-6d8c46d3.js');
 var SuccessS = require('./SuccessS-0f71f148.js');
 var mergeProps = require('./mergeProps-e3da7237.js');
-var useTooltipControlled = require('./useTooltipControlled-33832163.js');
+var useTooltipControlled = require('./useTooltipControlled-61581889.js');
 var UNSAFE_TabBarCommon_themes_TabBarItemContract_css = require('./UNSAFE_TabBarCommon/themes/TabBarItemContract.css.js');
 var Badge = require('./Badge-0e522f12.js');
 

package/cjs/TabBarLayout-846a4d9a.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
-var Flex = require('./Flex-e7a85bef.js');
+var Flex = require('./Flex-ce16a2fa.js');
 var useTabBarContext = require('./useTabBarContext-2a6a796c.js');
 
 /**

package/cjs/TabBarMixed-975141a6.js

@@ -4,9 +4,9 @@
 var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var compat = require('preact/compat');
-require('./LayerHost-a8c7f182.js');
+require('./LayerHost-7182bfaf.js');
 require('./UNSAFE_Text/themes/TextStyles.css.js');
-require('./Flex-e7a85bef.js');
+require('./Flex-ce16a2fa.js');
 var useTabBarContext = require('./useTabBarContext-2a6a796c.js');
 require('./flexitem-fee13e26.js');
 require('./dimensions-10159104.js');
@@ -21,15 +21,15 @@ require('preact');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-669c2ae0.js');
+require('./tooltipUtils-2228b0f7.js');
 
-require('./Floating-56621d20.js');
+require('./Floating-3a80c067.js');
 
 require('./keyboardUtils-691337c0.js');
 require('./tabbableUtils-39e647b7.js');
 require('./CollectionInteractionContext-f84ff7a1.js');
 
-require('./Sheet-86989265.js');
+require('./Sheet-73cb51b2.js');
 
 var UNSAFE_TabBarMixed_themes_TabBarMixedStyles_css = require('./UNSAFE_TabBarMixed/themes/TabBarMixedStyles.css.js');
 var useTabBar = require('./useTabBar-048ffd9f.js');

package/cjs/TabBarMixedSeparator-0f55c6f6.js

@@ -0,0 +1,21 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var View = require('./View-145a402d.js');
+var UNSAFE_TabBarMixed_themes_TabBarMixedSeparator_css = require('./UNSAFE_TabBarMixed/themes/TabBarMixedSeparator.css.js');
+
+/**
+ * TabBarMixedSeparator is a component that renders a visual separator (displayed
+ * as a vertical line) between collections of tabs within TabBarMixed.
+ *
+ * @param {TabBarMixedSeparatorProps} props Component props for TabBarMixedSeparator.
+ * @returns {JSX.Element} Component element for TabBarMixedSeparator.
+ */
+function TabBarMixedSeparator(props) {
+    const { padding = 0 } = props;
+    return (jsxRuntime.jsx(View.View, { padding: [0, padding, 0, padding], children: jsxRuntime.jsx("div", { class: UNSAFE_TabBarMixed_themes_TabBarMixedSeparator_css.styles.separator, role: "presentation" }) }));
+}
+
+exports.TabBarMixedSeparator = TabBarMixedSeparator;
+//# sourceMappingURL=TabBarMixedSeparator-0f55c6f6.js.map

package/cjs/TabBarMixedSeparator-0f55c6f6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarMixedSeparator-0f55c6f6.js","sources":["../../src/UNSAFE_TabBarMixed/TabBarMixedSeparator.tsx"],"sourcesContent":["import { View } from '../UNSAFE_View';\nimport { styles } from './themes/TabBarMixedSeparator.css';\n\nimport type { Size } from '../utils/UNSAFE_size';\n\ntype TabBarMixedSeparatorProps = {\n  /**\n   * Padding around the visual Separator line.\n   */\n  padding?: Size;\n};\n\n/**\n * TabBarMixedSeparator is a component that renders a visual separator (displayed\n * as a vertical line) between collections of tabs within TabBarMixed.\n *\n * @param {TabBarMixedSeparatorProps} props Component props for TabBarMixedSeparator.\n * @returns {JSX.Element} Component element for TabBarMixedSeparator.\n */\nexport function TabBarMixedSeparator(props: TabBarMixedSeparatorProps) {\n  const { padding = 0 } = props;\n\n  return (\n    <View padding={[0, padding, 0, padding]}>\n      <div class={styles.separator} role=\"presentation\" />\n    </View>\n  );\n}\n"],"names":["_jsx","View","styles"],"mappings":";;;;;;;AAYA;;;;;;AAMG;AACG,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,MAAM,EAAE,OAAO,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;AAE9B,IAAA,QACEA,cAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,EAAA,QAAA,EACrCD,cAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAEE,yDAAM,CAAC,SAAS,EAAE,IAAI,EAAC,cAAc,EAAG,CAAA,EAAA,CAC/C,EACP;AACJ;;;;"}