@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/cjs/BaseRichSelection-c7cad1af.js

@@ -10,7 +10,7 @@ require('preact/hooks');
 var useFormFieldContextProps = require('./useFormFieldContextProps-0fa67f6c.js');
 var preact = require('preact');
 var useCollectionFocusRing = require('./useCollectionFocusRing-bed0aa16.js');
-var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
+var useTranslationBundle = require('./useTranslationBundle-990e7928.js');
 var Label = require('./Label-eb654b0e.js');
 var InlineHelp = require('./InlineHelp-2add2d34.js');
 require('./logger-2b636482.js');
@@ -19,16 +19,16 @@ require('./TabbableModeContext-e99d527e.js');
 
 require('./UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css.js');
 var InlineUserAssistance = require('./InlineUserAssistance-cfaa3d3e.js');
-require('./Flex-3a257bc3.js');
+require('./Flex-ec48072d.js');
 
 
 require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js');
-var useTestId = require('./useTestId-4f53d561.js');
-require('./LayerHost-3cd73603.js');
+var useTestId = require('./useTestId-a8b07506.js');
+require('./LayerHost-21391a0d.js');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-2bc15136.js');
+require('./tooltipUtils-c554343d.js');
 
 require('./IconButton-7503293b.js');
 
@@ -39,7 +39,7 @@ var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
 
 
 require('./UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js');
-require('./Popup-de16d915.js');
+require('./Popup-6de390dd.js');
 require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
 
 
@@ -49,14 +49,14 @@ require('./UNSAFE_Popup/themes/redwood/PopupVariants.css.js');
 var CheckboxRadioFieldStyles_css = require('./CheckboxRadioFieldStyles.css-b526d45d.js');
 var CheckboxRadioContext = require('./CheckboxRadioContext-3b134bd1.js');
 var LayoutStyles_css = require('./LayoutStyles.css-b4025421.js');
-var Grid = require('./Grid-cef20569.js');
+var Grid = require('./Grid-156807d4.js');
 var refUtils = require('./refUtils-a9872e75.js');
 var useContainerBreakpoints = require('./useContainerBreakpoints-1d967863.js');
 var RichSelectionStartContext = require('./RichSelectionStartContext-3d10f9ed.js');
-var View = require('./View-ed116d78.js');
+var View = require('./View-67ff7d0e.js');
 var classNames = require('./classNames-c14c6ef3.js');
 var useFormFieldContext = require('./useFormFieldContext-4632eb73.js');
-var StyledLabelValueLayout = require('./StyledLabelValueLayout-48da61b9.js');
+var StyledLabelValueLayout = require('./StyledLabelValueLayout-3ee66ef1.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var UNSAFE_RadioItem_themes_redwood_RadioTheme = require('./UNSAFE_RadioItem/themes/redwood/RadioTheme.js');
 var UNSAFE_Label_themes_redwood_LabelTheme = require('./UNSAFE_Label/themes/redwood/LabelTheme.js');

package/cjs/BaseSelector-2dc69917.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var useActive = require('./useActive-6770f917.js');
 var useFocus = require('./useFocus-1b288fb9.js');
-var useTestId = require('./useTestId-4f53d561.js');
+var useTestId = require('./useTestId-a8b07506.js');
 var useHover = require('./useHover-49b0430d.js');
 var mergeProps = require('./mergeProps-e3da7237.js');
 var StyledCheckbox = require('./StyledCheckbox-9047ed7d.js');

package/cjs/BaseSwatchView-76da473f.js

@@ -10,7 +10,7 @@ var TabbableModeContext = require('./TabbableModeContext-e99d527e.js');
 var useTabbableMode = require('./useTabbableMode-dbd254e8.js');
 var keys = require('./keys-25710458.js');
 var collectionUtils = require('./collectionUtils-f1d3183f.js');
-var useCurrentKey = require('./useCurrentKey-1b9e3382.js');
+var useCurrentKey = require('./useCurrentKey-b66cf089.js');
 var useCollectionFocusRing = require('./useCollectionFocusRing-bed0aa16.js');
 var useTabbableModeSet = require('./useTabbableModeSet-5bce852a.js');
 var useSwatchSelection = require('./useSwatchSelection-8ca16859.js');
@@ -22,7 +22,7 @@ var tabbableUtils = require('./tabbableUtils-22a50472.js');
 var useId = require('./useId-6c0eeb27.js');
 var useResizeObserver = require('./useResizeObserver-a9e97180.js');
 var FocusTrap = require('./FocusTrap-4873a3f2.js');
-var Flex = require('./Flex-3a257bc3.js');
+var Flex = require('./Flex-ec48072d.js');
 
 /**
  * The internal component used to render a single item in SwatchView.

package/cjs/Button-d79df225.js

@@ -0,0 +1,24 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var BaseButton = require('./BaseButton-15b86552.js');
+var ButtonLabelLayout = require('./ButtonLabelLayout-c876923f.js');
+var compat = require('preact/compat');
+
+/**
+ * A button is a pressable element that invokes an action.
+ */
+const Button = compat.forwardRef(({ variant = 'outlined', isDisabled = false, isRepeat = false, size = 'md', display = 'all', type: buttonType = 'button', endIcon, startIcon, autofocus, edge, testId, onAction, label = '', 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart }, ref) => {
+    const labelOnly = (!startIcon && !endIcon) || display === 'label';
+    const elementDetails = {
+        type: 'button',
+        buttonType: buttonType
+    };
+    const content = labelOnly ? (label) : (jsxRuntime.jsx(ButtonLabelLayout.ButtonLabelLayout, { display: display, startIcon: startIcon, endIcon: endIcon, size: size, children: label }));
+    return (jsxRuntime.jsx(BaseButton.BaseButton, { ref: ref, elementDetails: elementDetails, isDisabled: isDisabled, isRepeat: isRepeat, size: size, width: width, autofocus: autofocus, edge: edge, variant: variant, styling: [labelOnly ? 'default' : 'min'], onAction: onAction, "aria-label": accessibleLabel ?? label, "aria-describedby": ariaDescribedBy, onBlur: onBlur, onFocus: onFocus, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart, testId: testId, children: content }));
+});
+Button.displayName = 'Button';
+
+exports.Button = Button;
+//# sourceMappingURL=Button-d79df225.js.map

package/cjs/Button-d79df225.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-d79df225.js","sources":["../../src/UNSAFE_Button/Button.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 type { ComponentChildren, ComponentProps, JSX } from 'preact';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLabelLayout } from '../UNSAFE_ButtonLabelLayout';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { forwardRef, ForwardedRef, ElementRef } from 'preact/compat';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\n\ntype ButtonHandle = ElementRef<typeof BaseButton>;\n\ntype IntrinsicProps = Pick<\n  UnpackSignals<JSX.HTMLAttributes<HTMLElement>>,\n  | 'autofocus'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onMouseEnter'\n  | 'onMouseLeave'\n  | 'onTouchEnd'\n  | 'onTouchStart'\n>;\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\ntype Props = IntrinsicProps &\n  WidthProps &\n  TestIdProps & {\n    /**\n     * The startIcon is the button's start icon.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if repeated events are dispatched for key or pointer held down\n     */\n    isRepeat?: boolean;\n\n    /**\n     * Specifes the button type\n     */\n    type?: 'button' | 'submit';\n\n    /**\n     * label - button label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * aria-label - override label for accessibility\n     */\n    'aria-label'?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"ghost\": \"Ghost buttons are the least prominent variation. Ghost buttons are\n     * useful for performing low-priority tasks, such as manipulating the UI.\",\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\",\n     *     \"callToAction\"': \"A Call To Action (CTA) button guides the user to take or\n     * complete the action that is the main goal of the page or page section. There\n     * should only be one CTA button on a page at any given time.\",\n     *     \"danger\"': \"A Danger button alerts the user to a dangerous situation.\"\n     */\n    variant?: ComponentProps<typeof BaseButton>['variant'];\n\n    /**\n     * The size indicates how large the button is rendered.\n     */\n    size?: 'xs' | 'sm' | 'md' | 'lg';\n\n    /**\n     * Edge can be used to specify that the button is intended to go at the bottom of\n     * a region, stretching from left to right.\n     */\n    edge?: ComponentProps<typeof BaseButton>['edge'];\n\n    /**\n     * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n     */\n    onAction?: ComponentProps<typeof BaseButton>['onAction'];\n\n    /**\n     * Display indicates whether only the label or all elements should be rendered by the button.\n     */\n    display?: 'label' | 'all';\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n  };\n/**\n * A button is a pressable element that invokes an action.\n */\nexport const Button = forwardRef(\n  (\n    {\n      variant = 'outlined',\n      isDisabled = false,\n      isRepeat = false,\n      size = 'md',\n      display = 'all',\n      type: buttonType = 'button',\n      endIcon,\n      startIcon,\n      autofocus,\n      edge,\n      testId,\n      onAction,\n      label = '',\n      'aria-label': accessibleLabel,\n      'aria-describedby': ariaDescribedBy,\n      width,\n      onBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart\n    }: Props,\n    ref: ForwardedRef<ButtonHandle>\n  ) => {\n    const labelOnly = (!startIcon && !endIcon) || display === 'label';\n    const elementDetails = {\n      type: 'button' as const,\n      buttonType: buttonType\n    };\n    const content = labelOnly ? (\n      label\n    ) : (\n      <ButtonLabelLayout display={display} startIcon={startIcon} endIcon={endIcon} size={size}>\n        {label}\n      </ButtonLabelLayout>\n    );\n\n    return (\n      <BaseButton\n        ref={ref}\n        elementDetails={elementDetails}\n        isDisabled={isDisabled}\n        isRepeat={isRepeat}\n        size={size}\n        width={width}\n        autofocus={autofocus}\n        edge={edge}\n        variant={variant}\n        styling={[labelOnly ? 'default' : 'min']}\n        onAction={onAction}\n        aria-label={accessibleLabel ?? label}\n        aria-describedby={ariaDescribedBy}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onTouchEnd={onTouchEnd}\n        onTouchStart={onTouchStart}\n        testId={testId}>\n        {content}\n      </BaseButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["forwardRef","_jsx","ButtonLabelLayout","BaseButton"],"mappings":";;;;;;;;AAgHA;;AAEG;AACI,MAAM,MAAM,GAAGA,iBAAU,CAC9B,CACE,EACE,OAAO,GAAG,UAAU,EACpB,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,IAAI,EAAE,UAAU,GAAG,QAAQ,EAC3B,OAAO,EACP,SAAS,EACT,SAAS,EACT,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACN,EACR,GAA+B,KAC7B;AACF,IAAA,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,IAAI,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,CAAC;AAClE,IAAA,MAAM,cAAc,GAAG;AACrB,QAAA,IAAI,EAAE,QAAiB;AACvB,QAAA,UAAU,EAAE,UAAU;KACvB,CAAC;AACF,IAAA,MAAM,OAAO,GAAG,SAAS,IACvB,KAAK,KAELC,cAAA,CAACC,mCAAiB,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAA,QAAA,EACpF,KAAK,EAAA,CACY,CACrB,CAAC;IAEF,QACED,eAACE,qBAAU,EAAA,EACT,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC,EACxC,QAAQ,EAAE,QAAQ,EACN,YAAA,EAAA,eAAe,IAAI,KAAK,EAAA,kBAAA,EAClB,eAAe,EACjC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACb,QAAA,EAAA,OAAO,EACG,CAAA,EACb;AACJ,CAAC,EACD;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/cjs/ButtonSet-ed013090.js

@@ -12,8 +12,8 @@ var preact = require('preact');
 var ButtonSetPositionContext = require('./ButtonSetPositionContext-6a358667.js');
 var hooks = require('preact/hooks');
 var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
-var useTestId = require('./useTestId-4f53d561.js');
-var useRovingTabIndexContainer = require('./useRovingTabIndexContainer-0ce4681d.js');
+var useTestId = require('./useTestId-a8b07506.js');
+var useRovingTabIndexContainer = require('./useRovingTabIndexContainer-46b897fd.js');
 var TabbableModeContext = require('./TabbableModeContext-e99d527e.js');
 var useTabbableMode = require('./useTabbableMode-dbd254e8.js');
 var refUtils = require('./refUtils-a9872e75.js');

package/cjs/ButtonSetButton-a7384fb3.js

@@ -0,0 +1,35 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var BaseButton = require('./BaseButton-15b86552.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-ce19879c.js');
+var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
+var buttonUtils = require('./buttonUtils-dff2ea3e.js');
+
+/**
+ * Toggle buttons allow users to switch between states when pressed.
+ */
+const ButtonSetButton = compat.forwardRef(({ startIcon, endIcon, isSelected = false, onToggle, position, autofocus, testId, label, value, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, ...props }, ref) => {
+    const buttonSetProps = useButtonSetContext.useButtonSetContext();
+    const { inputProps: baseInputProps, buttonSetButtonProps, globalEventProps, isDisabled } = buttonUtils.processSetButtonProps(props, buttonSetProps);
+    const inputProps = {
+        ...baseInputProps,
+        display: buttonSetProps.display ?? props.display ?? 'all'
+    };
+    const styling = toggleButtonUtils.toggleStyling(buttonSetButtonProps.layoutWidth, isSelected, false, // switch
+    true, // label
+    buttonSetButtonProps.variant === 'outlined', position, true, // hasLabel
+    false // iconOnly
+    );
+    return (jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(globalEventProps, buttonSetButtonProps), ref: ref, onAction: () => {
+            onToggle?.({ value: isSelected });
+        }, elementDetails: { type: 'span', isFocusable: false, isLabel: true }, width: buttonSetProps.width ? '100%' : width, autofocus: autofocus, styling: styling, "aria-describedby": ariaDescribedBy, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { label: label, isSelected: isSelected, isDisabled: isDisabled, startIcon: startIcon, endIcon: endIcon, value: value, ...inputProps }) }));
+});
+ButtonSetButton.displayName = 'ButtonSetButton';
+
+exports.ButtonSetButton = ButtonSetButton;
+//# sourceMappingURL=ButtonSetButton-a7384fb3.js.map

package/cjs/ButtonSetButton-a7384fb3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetButton-a7384fb3.js","sources":["../../src/UNSAFE_ButtonSetButton/ButtonSetButton.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 { ComponentChildren, Ref } from 'preact';\nimport { forwardRef, ElementRef } from 'preact/compat';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport { ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { useButtonSetContext } from '#hooks/UNSAFE_useButtonSetContext';\nimport { ToggleButtonLabel } from '../UNSAFE_ToggleButtonLabel';\nimport {\n  toggleStyling,\n  processSetButtonProps,\n  LayoutWidths,\n  ButtonSetPosition,\n  type InputTypes,\n  type ButtonIntrinsicProps\n} from '#utils/UNSAFE_buttonUtils';\n\ntype ButtonHandle = ElementRef<typeof BaseButton>;\n\ntype WidthProps = Pick<DimensionProps, 'width'>;\n\nexport type ButtonSetButtonProps = ButtonIntrinsicProps &\n  WidthProps &\n  TestIdProps & {\n    /**\n     * The startIcon is the button's start icon. This should not vary depending on state.\n     */\n    startIcon?: ComponentChildren;\n\n    /**\n     * The endIcon is the button's end icon. This should not vary depending on state.\n     */\n    endIcon?: ComponentChildren;\n\n    /**\n     * Input type indicate if the toggle is intended as a radio or checkbox.\n     */\n    inputType?: InputTypes;\n\n    /**\n     * The name of the input group\n     */\n    inputName?: string;\n\n    /**\n     * Specifies that the buttonsetbutton element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * label - buttonsetbutton label, used for accessibility if no override\n     */\n    label?: string;\n\n    /**\n     * value - buttonsetbutton value\n     */\n    value?: string;\n\n    /**\n     * aria-label - override label for accessibility\n     */\n    'aria-label'?: string;\n\n    /**\n     * Indicates in what states the buttonsetbutton has chrome (background and border).\n     *     \"borderless\"': \"Borderless buttonsetbuttons are a more prominent variation. Borderless\n     * buttonsetbuttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttonsetbuttons are salient, but lighter weight than\n     * solid buttonsetbuttons. Outlined buttonsetbuttons are useful for secondary actions.\",\n     */\n    variant?: 'outlined' | 'borderless';\n\n    /**\n     * The size indicates how large the buttonsetbutton is rendered.\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Specifies if the toggle button is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * The position modifies the borders for usage inside a button group.\n     */\n    position?: ButtonSetPosition;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n\n    /**\n     * Display indicates whether only the label or all elements should be rendered by the buttonsetbutton.\n     */\n    display?: 'label' | 'all';\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the buttonsetbutton.\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * The layoutWidth specifies if the toggle button width fits the contents or\n     * the container.\n     */\n    layoutWidth?: LayoutWidths;\n  };\n\n/**\n * Toggle buttons allow users to switch between states when pressed.\n */\nexport const ButtonSetButton = forwardRef(\n  (\n    {\n      startIcon,\n      endIcon,\n      isSelected = false,\n      onToggle,\n      position,\n      autofocus,\n      testId,\n      label,\n      value,\n      'aria-label': accessibleLabel,\n      'aria-describedby': ariaDescribedBy,\n      width,\n      ...props\n    }: ButtonSetButtonProps,\n    ref: Ref<ButtonHandle>\n  ) => {\n    const buttonSetProps = useButtonSetContext();\n    const {\n      inputProps: baseInputProps,\n      buttonSetButtonProps,\n      globalEventProps,\n      isDisabled\n    } = processSetButtonProps(props, buttonSetProps);\n    const inputProps = {\n      ...baseInputProps,\n      display: buttonSetProps.display ?? props.display ?? 'all'\n    };\n\n    const styling = toggleStyling(\n      buttonSetButtonProps.layoutWidth,\n      isSelected,\n      false, // switch\n      true, // label\n      buttonSetButtonProps.variant === 'outlined',\n      position,\n      true, // hasLabel\n      false // iconOnly\n    );\n\n    return (\n      <BaseButton\n        {...mergeProps(globalEventProps, buttonSetButtonProps)}\n        ref={ref}\n        onAction={() => {\n          onToggle?.({ value: isSelected });\n        }}\n        elementDetails={{ type: 'span', isFocusable: false, isLabel: true }}\n        width={buttonSetProps.width ? '100%' : width}\n        autofocus={autofocus}\n        styling={styling}\n        aria-describedby={ariaDescribedBy}\n        testId={testId}>\n        <ToggleButtonLabel\n          label={label}\n          isSelected={isSelected}\n          isDisabled={isDisabled}\n          startIcon={startIcon}\n          endIcon={endIcon}\n          value={value}\n          {...inputProps}></ToggleButtonLabel>\n      </BaseButton>\n    );\n  }\n);\n\nButtonSetButton.displayName = 'ButtonSetButton';\n"],"names":["forwardRef","useButtonSetContext","processSetButtonProps","toggleStyling","_jsx","BaseButton","mergeProps","ToggleButtonLabel"],"mappings":";;;;;;;;;;;;AAwHA;;AAEG;MACU,eAAe,GAAGA,iBAAU,CACvC,CACE,EACE,SAAS,EACT,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAK,EACL,KAAK,EACL,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,GAAG,KAAK,EACa,EACvB,GAAsB,KACpB;AACF,IAAA,MAAM,cAAc,GAAGC,uCAAmB,EAAE,CAAC;AAC7C,IAAA,MAAM,EACJ,UAAU,EAAE,cAAc,EAC1B,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACX,GAAGC,iCAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,GAAG,cAAc;QACjB,OAAO,EAAE,cAAc,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK;KAC1D,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGC,+BAAa,CAC3B,oBAAoB,CAAC,WAAW,EAChC,UAAU,EACV,KAAK;AACL,IAAA,IAAI;IACJ,oBAAoB,CAAC,OAAO,KAAK,UAAU,EAC3C,QAAQ,EACR,IAAI;AACJ,IAAA,KAAK;KACN,CAAC;AAEF,IAAA,QACEC,cAAC,CAAAC,qBAAU,OACLC,qBAAU,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,EACtD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,MAAK;YACb,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;AACpC,SAAC,EACD,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EACnE,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EACE,kBAAA,EAAA,eAAe,EACjC,MAAM,EAAE,MAAM,EAAA,QAAA,EACdF,eAACG,mCAAiB,EAAA,EAChB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACR,GAAA,UAAU,EAAsB,CAAA,EAAA,CAC3B,EACb;AACJ,CAAC,EACD;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/cjs/ButtonSetIconButton-345ead86.js

@@ -0,0 +1,40 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var compat = require('preact/compat');
+var BaseButton = require('./BaseButton-15b86552.js');
+var useTooltip = require('./useTooltip-d1200aff.js');
+require('preact/hooks');
+var mergeProps = require('./mergeProps-e3da7237.js');
+require('./logger-2b636482.js');
+require('./LayerHost-21391a0d.js');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-c554343d.js');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+var ToggleButtonLabel = require('./ToggleButtonLabel-ce19879c.js');
+var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
+var buttonUtils = require('./buttonUtils-dff2ea3e.js');
+
+/**
+ * A ButtonSetIconButton is an icon button that allows users to switch
+ * between states when pressed.
+ */
+const ButtonSetIconButton = compat.forwardRef(({ children, tooltip, value, accessibleLabel, isSelected = false, onToggle, position, testId, width, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const buttonSetProps = useButtonSetContext.useButtonSetContext();
+    const { inputProps, buttonSetButtonProps, isDisabled } = buttonUtils.processSetButtonProps(props, buttonSetProps);
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text: tooltip ?? accessibleLabel,
+        isDisabled: isDisabled
+    });
+    const styling = toggleButtonUtils.toggleStyling(buttonSetButtonProps.layoutWidth, isSelected, false, true, buttonSetButtonProps.variant === 'outlined', position, undefined, true);
+    const ariaProps = { 'aria-describedby': ariaDescribedBy };
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(BaseButton.BaseButton, { ...mergeProps.mergeProps(buttonSetButtonProps, ariaProps, tooltipProps), elementDetails: { type: 'span', isFocusable: false, isLabel: true }, onAction: () => onToggle?.({ value: isSelected }), styling: styling, width: buttonSetProps.width ? '100%' : width, ref: ref, testId: testId, children: jsxRuntime.jsx(ToggleButtonLabel.ToggleButtonLabel, { label: accessibleLabel ?? tooltip, display: 'icons', isSelected: isSelected, ...inputProps, value: value, startIcon: children }) }), tooltipContent] }));
+});
+ButtonSetIconButton.displayName = 'ButtonSetIconButton';
+
+exports.ButtonSetIconButton = ButtonSetIconButton;
+//# sourceMappingURL=ButtonSetIconButton-345ead86.js.map

package/cjs/ButtonSetIconButton-345ead86.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetIconButton-345ead86.js","sources":["../../src/UNSAFE_ButtonSetIconButton/ButtonSetIconButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChild, Fragment } from 'preact';\nimport { forwardRef, ForwardedRef, ElementRef } from 'preact/compat';\n\nimport { BaseButton } from '#UNSAFE_BaseButton';\nimport { ToggleDetail } from '#hooks/UNSAFE_useToggleAction';\nimport { useTooltip } from '#hooks/UNSAFE_useTooltip';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { DimensionProps } from '#utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { useButtonSetContext } from '#hooks/UNSAFE_useButtonSetContext';\nimport { ToggleButtonLabel } from '#UNSAFE_ToggleButtonLabel';\nimport {\n  toggleStyling,\n  processSetButtonProps,\n  ButtonSetPosition,\n  LayoutWidths,\n  type InputTypes\n} from '#utils/UNSAFE_buttonUtils';\n\ntype ButtonHandle = ElementRef<typeof BaseButton>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type ButtonSetIconButtonProps = WidthInterpolationProps &\n  TestIdProps & {\n    /**\n     * icon - the icon for the button\n     */\n    children?: ComponentChild;\n\n    /**\n     * InpuType indicate if the toggle is a radio or checkbox,\n     */\n    inputType?: InputTypes;\n\n    /**\n     * The name of the input group\n     */\n    inputName?: string;\n\n    /**\n     * The value of the input\n     */\n    value?: string;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Specifies if the toggle button is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"ghost\": \"Ghost buttons are the least prominent variant. Ghost buttons are\n     * useful for performing low-priority tasks, such as manipulating the UI.\",\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     */\n    variant?: 'ghost' | 'borderless' | 'outlined';\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     * The position modifies the borders for usage inside a button group.\n     */\n    position?: ButtonSetPosition;\n\n    /**\n     * The layoutWidth specifies if the toggle button width fits the contents or\n     * the container.\n     */\n    layoutWidth?: LayoutWidths;\n  };\n\n/**\n * Note that either an accessibleLabel or tooltip must be specified.\n */\ntype VariationAccessibleLabelProps =\n  | {\n      /**\n       * accessibleLabel - the aria label\n       */\n      accessibleLabel: string;\n\n      /**\n       * tooltip - overrides the accessibleLabel for the tooltip\n       */\n      tooltip?: string;\n    }\n  | {\n      accessibleLabel?: string;\n\n      tooltip: string;\n    };\n\n/**\n * A ButtonSetIconButton is an icon button that allows users to switch\n * between states when pressed.\n */\nexport const ButtonSetIconButton = forwardRef(\n  (\n    {\n      children,\n      tooltip,\n      value,\n      accessibleLabel,\n      isSelected = false,\n      onToggle,\n      position,\n      testId,\n      width,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    }: ButtonSetIconButtonProps & VariationAccessibleLabelProps & TestIdProps,\n    ref: ForwardedRef<ButtonHandle>\n  ) => {\n    const buttonSetProps = useButtonSetContext();\n    const { inputProps, buttonSetButtonProps, isDisabled } = processSetButtonProps(\n      props,\n      buttonSetProps\n    );\n\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: tooltip ?? accessibleLabel,\n      isDisabled: isDisabled\n    });\n\n    const styling = toggleStyling(\n      buttonSetButtonProps.layoutWidth,\n      isSelected,\n      false,\n      true,\n      buttonSetButtonProps.variant === 'outlined',\n      position,\n      undefined,\n      true\n    );\n\n    const ariaProps = { 'aria-describedby': ariaDescribedBy };\n\n    return (\n      <Fragment>\n        <BaseButton\n          {...mergeProps(buttonSetButtonProps, ariaProps, tooltipProps)}\n          elementDetails={{ type: 'span', isFocusable: false, isLabel: true }}\n          onAction={() => onToggle?.({ value: isSelected })}\n          styling={styling}\n          width={buttonSetProps.width ? '100%' : width}\n          ref={ref}\n          testId={testId}>\n          <ToggleButtonLabel\n            label={accessibleLabel ?? tooltip}\n            display={'icons'}\n            isSelected={isSelected}\n            {...inputProps}\n            value={value}\n            startIcon={children}></ToggleButtonLabel>\n        </BaseButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n\nButtonSetIconButton.displayName = 'ButtonSetIconButton';\n"],"names":["forwardRef","useButtonSetContext","processSetButtonProps","useTooltip","toggleStyling","_jsxs","Fragment","_jsx","BaseButton","mergeProps","ToggleButtonLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0HA;;;AAGG;AACU,MAAA,mBAAmB,GAAGA,iBAAU,CAC3C,CACE,EACE,QAAQ,EACR,OAAO,EACP,KAAK,EACL,eAAe,EACf,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,EACL,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EAC+D,EACzE,GAA+B,KAC7B;AACF,IAAA,MAAM,cAAc,GAAGC,uCAAmB,EAAE,CAAC;AAC7C,IAAA,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,UAAU,EAAE,GAAGC,iCAAqB,CAC5E,KAAK,EACL,cAAc,CACf,CAAC;AAEF,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,qBAAU,CAAC;QAClD,IAAI,EAAE,OAAO,IAAI,eAAe;AAChC,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA,CAAC,CAAC;IAEH,MAAM,OAAO,GAAGC,+BAAa,CAC3B,oBAAoB,CAAC,WAAW,EAChC,UAAU,EACV,KAAK,EACL,IAAI,EACJ,oBAAoB,CAAC,OAAO,KAAK,UAAU,EAC3C,QAAQ,EACR,SAAS,EACT,IAAI,CACL,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC;IAE1D,QACEC,gBAACC,eAAQ,EAAA,EAAA,QAAA,EAAA,CACPC,eAACC,qBAAU,EAAA,EAAA,GACLC,qBAAU,CAAC,oBAAoB,EAAE,SAAS,EAAE,YAAY,CAAC,EAC7D,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EACnE,QAAQ,EAAE,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EACjD,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK,EAC5C,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,YACdF,cAAC,CAAAG,mCAAiB,EAChB,EAAA,KAAK,EAAE,eAAe,IAAI,OAAO,EACjC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,QAAQ,EAAA,CAAsB,GAChC,EACZ,cAAc,CACN,EAAA,CAAA,EACX;AACJ,CAAC,EACD;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/cjs/ButtonSetItem-1f2f6742.js

@@ -0,0 +1,67 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var ButtonSetButton = require('./ButtonSetButton-a7384fb3.js');
+var ButtonSetIconButton = require('./ButtonSetIconButton-345ead86.js');
+var hooks = require('preact/hooks');
+var useButtonSetContext = require('./useButtonSetContext-a2f31c8e.js');
+require('./ButtonSetPositionContext-6a358667.js');
+var useButtonSetPositionContext = require('./useButtonSetPositionContext-409e4cd6.js');
+var toggleButtonUtils = require('./toggleButtonUtils-245111a7.js');
+
+/**
+ * A ButtonSetItem specifies buttons for a buttonset.
+ */
+const ButtonSetItem = ({ isDisabled: isPropsDisabled, ...props }) => {
+    // The buttonSetItem context determines if a buttonset button or icon button rendered
+    // The buttonset context control provides variant, size, isItemDisabled, inputType, inputName. value
+    // The buttonset position control provides position, isSelected,
+    const { display, inputType, isDisabled: isSetDisabled, buttonSetValue, onCommit, ...buttonsetProps } = useButtonSetContext.useButtonSetContext();
+    const positionProps = useButtonSetPositionContext.useButtonSetPositionContext();
+    // The property isItemDisabled, if defined, overrides buttonSetItem settings.
+    const isItemDisabled = isPropsDisabled ?? isSetDisabled;
+    const iconProps = {
+        tooltip: props.label,
+        value: props.value
+    };
+    const isRadio = inputType === 'radio';
+    const onToggleHandlerSingle = hooks.useCallback(() => {
+        if (isRadio) {
+            onCommit?.({
+                previousValue: buttonSetValue,
+                value: [props.value]
+            });
+        }
+    }, [buttonSetValue, onCommit, isRadio, props.value]);
+    const onToggleHandlerMultiple = hooks.useCallback(() => {
+        if (!isRadio) {
+            const newButtonSetValue = toggleButtonUtils.toggleButtonSetItem(props.value, buttonSetValue);
+            onCommit?.({
+                previousValue: buttonSetValue,
+                value: newButtonSetValue
+            });
+        }
+    }, [buttonSetValue, onCommit, isRadio, props.value]);
+    // When toggled, the button invokes the buttonset commit, which can update the buttonset value, which then
+    // updates the buttonset context buttonSetValue causing this buttonSetItem to render appropriately.
+    return display === 'icons' ? (jsxRuntime.jsx(ButtonSetIconButton.ButtonSetIconButton, { isSelected: isButtonSetItemSelected(props.value, buttonSetValue), onToggle: isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple, isDisabled: isItemDisabled, ...iconProps, ...positionProps, ...buttonsetProps, children: props.startIcon })) : (jsxRuntime.jsx(ButtonSetButton.ButtonSetButton, { isSelected: isButtonSetItemSelected(props.value, buttonSetValue), onToggle: isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple, isDisabled: isItemDisabled, ...props, ...positionProps, ...buttonsetProps }));
+};
+/**
+ * Check if buttonSetValue contains the buttonSetItem.
+ * Note the buttonSetValue can be a set of strings or a string, depending on whether a checkbox or
+ * radio type is used.
+ * @param buttonSetItemValue
+ * @param buttonSetValue
+ * @returns
+ */
+function isButtonSetItemSelected(buttonSetItemValue, buttonSetValue) {
+    if (!buttonSetValue) {
+        return false;
+    }
+    return buttonSetValue?.indexOf(buttonSetItemValue) > -1;
+}
+ButtonSetItem.displayName = 'ButtonSetItem';
+
+exports.ButtonSetItem = ButtonSetItem;
+//# sourceMappingURL=ButtonSetItem-1f2f6742.js.map

package/cjs/ButtonSetItem-1f2f6742.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSetItem-1f2f6742.js","sources":["../../src/UNSAFE_ButtonSetItem/ButtonSetItem.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 { ComponentChildren } from 'preact';\n\nimport { ButtonSetButton } from '../UNSAFE_ButtonSetButton';\nimport { ButtonSetIconButton } from '../UNSAFE_ButtonSetIconButton';\nimport { useCallback } from 'preact/hooks';\n\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useButtonSetContext } from '../hooks/UNSAFE_useButtonSetContext';\nimport { useButtonSetPositionContext } from '../hooks/UNSAFE_useButtonSetPositionContext';\nimport { toggleButtonSetItem } from '#utils/UNSAFE_buttonUtils';\n\nexport type ButtonSetItemProps = TestIdProps & {\n  /**\n   * Value of the selected buttonSetItem option.\n   */\n  value: string;\n\n  /**\n   * label - label\n   */\n  label?: string;\n\n  /**\n   * The startIcon is the button's start icon.\n   */\n  startIcon?: ComponentChildren;\n\n  /**\n   * The endIcon is the button's end icon.\n   */\n  endIcon?: ComponentChildren;\n\n  /**\n   * Specifies that the ButtonSetSingle element should be disabled.\n   */\n  isDisabled?: boolean;\n};\n\n/**\n * A ButtonSetItem specifies buttons for a buttonset.\n */\nexport const ButtonSetItem = ({ isDisabled: isPropsDisabled, ...props }: ButtonSetItemProps) => {\n  // The buttonSetItem context determines if a buttonset button or icon button rendered\n  // The buttonset context control provides variant, size, isItemDisabled, inputType, inputName. value\n  // The buttonset position control provides position, isSelected,\n  const {\n    display,\n    inputType,\n    isDisabled: isSetDisabled,\n    buttonSetValue,\n    onCommit,\n    ...buttonsetProps\n  } = useButtonSetContext();\n\n  const positionProps = useButtonSetPositionContext();\n  // The property isItemDisabled, if defined, overrides buttonSetItem settings.\n  const isItemDisabled = isPropsDisabled ?? isSetDisabled;\n  const iconProps = {\n    tooltip: props.label,\n    value: props.value\n  };\n\n  const isRadio = inputType === 'radio';\n\n  const onToggleHandlerSingle = useCallback(() => {\n    if (isRadio) {\n      onCommit?.({\n        previousValue: buttonSetValue,\n        value: [props.value]\n      });\n    }\n  }, [buttonSetValue, onCommit, isRadio, props.value]);\n\n  const onToggleHandlerMultiple = useCallback(() => {\n    if (!isRadio) {\n      const newButtonSetValue = toggleButtonSetItem(props.value, buttonSetValue);\n      onCommit?.({\n        previousValue: buttonSetValue,\n        value: newButtonSetValue\n      });\n    }\n  }, [buttonSetValue, onCommit, isRadio, props.value]);\n\n  // When toggled, the button invokes the buttonset commit, which can update the buttonset value, which then\n  // updates the buttonset context buttonSetValue causing this buttonSetItem to render appropriately.\n  return display === 'icons' ? (\n    <ButtonSetIconButton\n      isSelected={isButtonSetItemSelected(props.value, buttonSetValue)}\n      onToggle={isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple}\n      isDisabled={isItemDisabled}\n      {...iconProps}\n      {...positionProps}\n      {...buttonsetProps}>\n      {props.startIcon}\n    </ButtonSetIconButton>\n  ) : (\n    <ButtonSetButton\n      isSelected={isButtonSetItemSelected(props.value, buttonSetValue)}\n      onToggle={isRadio ? onToggleHandlerSingle : onToggleHandlerMultiple}\n      isDisabled={isItemDisabled}\n      {...props}\n      {...positionProps}\n      {...buttonsetProps}></ButtonSetButton>\n  );\n};\n\n/**\n * Check if buttonSetValue contains the buttonSetItem.\n * Note the buttonSetValue can be a set of strings or a string, depending on whether a checkbox or\n * radio type is used.\n * @param buttonSetItemValue\n * @param buttonSetValue\n * @returns\n */\nfunction isButtonSetItemSelected(\n  buttonSetItemValue: string,\n  buttonSetValue: Array<string> | undefined\n): boolean {\n  if (!buttonSetValue) {\n    return false;\n  }\n  return buttonSetValue?.indexOf(buttonSetItemValue) > -1;\n}\n\nButtonSetItem.displayName = 'ButtonSetItem';\n"],"names":["useButtonSetContext","useButtonSetPositionContext","useCallback","toggleButtonSetItem","_jsx","ButtonSetIconButton","ButtonSetButton"],"mappings":";;;;;;;;;;;;AA6CA;;AAEG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,KAAK,EAAsB,KAAI;;;;AAI7F,IAAA,MAAM,EACJ,OAAO,EACP,SAAS,EACT,UAAU,EAAE,aAAa,EACzB,cAAc,EACd,QAAQ,EACR,GAAG,cAAc,EAClB,GAAGA,uCAAmB,EAAE,CAAC;AAE1B,IAAA,MAAM,aAAa,GAAGC,uDAA2B,EAAE,CAAC;;AAEpD,IAAA,MAAM,cAAc,GAAG,eAAe,IAAI,aAAa,CAAC;AACxD,IAAA,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,KAAK,CAAC,KAAK;QACpB,KAAK,EAAE,KAAK,CAAC,KAAK;KACnB,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,SAAS,KAAK,OAAO,CAAC;AAEtC,IAAA,MAAM,qBAAqB,GAAGC,iBAAW,CAAC,MAAK;QAC7C,IAAI,OAAO,EAAE;AACX,YAAA,QAAQ,GAAG;AACT,gBAAA,aAAa,EAAE,cAAc;AAC7B,gBAAA,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;AACrB,aAAA,CAAC,CAAC;SACJ;AACH,KAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAErD,IAAA,MAAM,uBAAuB,GAAGA,iBAAW,CAAC,MAAK;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,MAAM,iBAAiB,GAAGC,qCAAmB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;AAC3E,YAAA,QAAQ,GAAG;AACT,gBAAA,aAAa,EAAE,cAAc;AAC7B,gBAAA,KAAK,EAAE,iBAAiB;AACzB,aAAA,CAAC,CAAC;SACJ;AACH,KAAC,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;;;AAIrD,IAAA,OAAO,OAAO,KAAK,OAAO,IACxBC,cAAC,CAAAC,uCAAmB,IAClB,UAAU,EAAE,uBAAuB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,EAChE,QAAQ,EAAE,OAAO,GAAG,qBAAqB,GAAG,uBAAuB,EACnE,UAAU,EAAE,cAAc,EACtB,GAAA,SAAS,KACT,aAAa,EAAA,GACb,cAAc,EACjB,QAAA,EAAA,KAAK,CAAC,SAAS,GACI,KAEtBD,eAACE,+BAAe,EAAA,EACd,UAAU,EAAE,uBAAuB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,EAChE,QAAQ,EAAE,OAAO,GAAG,qBAAqB,GAAG,uBAAuB,EACnE,UAAU,EAAE,cAAc,EAAA,GACtB,KAAK,EACL,GAAA,aAAa,KACb,cAAc,EAAA,CAAoB,CACzC,CAAC;AACJ,EAAE;AAEF;;;;;;;AAOG;AACH,SAAS,uBAAuB,CAC9B,kBAA0B,EAC1B,cAAyC,EAAA;IAEzC,IAAI,CAAC,cAAc,EAAE;AACnB,QAAA,OAAO,KAAK,CAAC;KACd;IACD,OAAO,cAAc,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/cjs/Center-a23cf0cd.js

@@ -0,0 +1,18 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var Flex = require('./Flex-ec48072d.js');
+
+/**
+ * Center is a convenience component that creates a flexbox
+ * with justifyContent: center and alignItems: center.
+ *
+ */
+// TODO: How do I add background-color, border, etc?
+function Center({ children, width = '100%', height = '100%', ...props }) {
+    return (jsxRuntime.jsx(Flex.Flex, { ...props, justify: "center", align: "center", width: width, height: height, children: children }));
+}
+
+exports.Center = Center;
+//# sourceMappingURL=Center-a23cf0cd.js.map

package/cjs/Center-a23cf0cd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center-a23cf0cd.js","sources":["../../src/UNSAFE_Center/Center.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { Flex } from '../UNSAFE_Flex';\n\ntype Props = DimensionProps & {\n  children?: ComponentChildren;\n};\n\n/**\n * Center is a convenience component that creates a flexbox\n * with justifyContent: center and alignItems: center.\n *\n */\n// TODO: How do I add background-color, border, etc?\nfunction Center({ children, width = '100%', height = '100%', ...props }: Props) {\n  return (\n    <Flex {...props} justify=\"center\" align=\"center\" width={width} height={height}>\n      {children}\n    </Flex>\n  );\n}\n\nexport { Center };\n"],"names":["_jsx","Flex"],"mappings":";;;;;;AAQA;;;;AAIG;AACH;AACA,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,KAAK,EAAS,EAAA;IAC5E,QACEA,cAAC,CAAAC,SAAI,EAAK,EAAA,GAAA,KAAK,EAAE,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAC1E,QAAA,EAAA,QAAQ,EACJ,CAAA,EACP;AACJ;;;;"}