@oracle/oraclejet-preact 18.1.4 → 18.1.6

package/amd/CheckboxRadioField-1987c75d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxRadioField-1987c75d.js","sources":["../../src/PRIVATE_CheckboxRadioField/CheckboxRadioLabelValueLayout.tsx","../../src/PRIVATE_CheckboxRadioField/CheckboxRadioField.tsx"],"sourcesContent":["import { ComponentChildren, JSX } from 'preact';\n\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useFormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { sizeToCSS, Size } from '#utils/UNSAFE_size';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { RadioRedwoodTheme } from '#UNSAFE_RadioItem/themes/redwood/RadioTheme';\nimport { LabelRedwoodTheme } from '#UNSAFE_Label/themes/redwood/LabelTheme';\nimport { FormLayoutRedwoodTheme } from '#UNSAFE_TextField/themes/redwood/FormLayoutTheme';\nimport { CheckboxRedwoodTheme } from '#UNSAFE_Checkbox/themes/redwood/CheckboxTheme';\nimport {\n  labelSlotStyles,\n  labelInnerStyles\n} from '#UNSAFE_LabelValueLayout/LabelValueLayoutStyles.css';\nimport { StyledLabelValueLayout } from '#UNSAFE_LabelValueLayout/StyledLabelValueLayout';\nimport { checkboxRadioLabelInnerStyles } from './CheckboxRadioLabelValueLayoutStyles.css';\n\ntype Props = {\n  /**\n   * Defines how the label is going to be positioned. For CheckboxSet or RadioSet the start, top and inside values are supported.\n   */\n  labelEdge?: 'start' | 'top' | 'inside';\n  /**\n   * Specifies if the parent component is a CheckboxSet or RadioSet\n   */\n  parentComponentVariant: 'radioSet' | 'checkboxSet';\n  /**\n   * Specifies if there is assistive text or links at the top of the component below the label\n   */\n  hasTopUserAssistance?: boolean;\n  /**\n   * Label content of the layout\n   */\n  label?: ComponentChildren;\n  /**\n   * Defines the label width for labelEdge 'start' ('top' is always 100%)\n   */\n  labelStartWidth?: Size;\n  /**\n   * Value content of the layout\n   */\n  children: ComponentChildren;\n};\n\n/**\n * A layout component for rendering a label and value pair, used in form components\n * such as CheckboxSet and RadioSet.\n */\nexport const CheckboxRadioLabelValueLayout = ({\n  label,\n  labelEdge,\n  children,\n  parentComponentVariant,\n  labelStartWidth = '33%',\n  hasTopUserAssistance = false\n}: Props) => {\n  const { baseTheme: radioTheme } = useComponentTheme(RadioRedwoodTheme);\n  const { baseTheme: checkboxTheme } = useComponentTheme(CheckboxRedwoodTheme);\n  const { baseTheme: labelTheme } = useComponentTheme(LabelRedwoodTheme);\n  const { baseTheme: formLayoutTheme } = useComponentTheme(FormLayoutRedwoodTheme);\n\n  const isRadio = parentComponentVariant === 'radioSet';\n  const isCheckbox = parentComponentVariant === 'checkboxSet';\n  const isStart = labelEdge === 'start';\n  const isTop = labelEdge === 'top' || labelEdge === 'inside'; // 'inside' needs to pick up all 'top' styles.\n  const isInside = labelEdge === 'inside';\n  const width = sizeToCSS(labelStartWidth);\n  const valueWidth = `calc(100% - ${width})`;\n\n  const labelStyles: JSX.CSSProperties = isStart\n    ? { flexBasis: width, width: width, maxWidth: width }\n    : {};\n\n  const valueStyles: JSX.CSSProperties = isStart\n    ? { flexBasis: valueWidth, width: valueWidth, maxWidth: valueWidth }\n    : {};\n\n  const { isFormLayout, isReadonly: isFormReadonly, labelWrapping } = useFormContext();\n  const { isReadonly } = useFormFieldContext();\n  const isPureReadonly = (isFormLayout && isFormReadonly) || (!isFormLayout && isReadonly);\n\n  const labelStyleClasses = classNames([\n    formLayoutTheme,\n    labelSlotStyles.base,\n    isStart && labelSlotStyles.start,\n    isTop && labelSlotStyles.top,\n    isTop && hasTopUserAssistance && labelSlotStyles.topAndTopUA,\n    isTop && isPureReadonly && labelSlotStyles.topPureReadonly\n  ]);\n\n  const labelInnerClasses = classNames([\n    isRadio && radioTheme,\n    isCheckbox && checkboxTheme,\n    labelTheme,\n    formLayoutTheme,\n    labelInnerStyles.base,\n    isStart && labelInnerStyles.start,\n    isRadio && isInside && checkboxRadioLabelInnerStyles.insideRadioSet,\n    isCheckbox && isInside && checkboxRadioLabelInnerStyles.insideCheckboxSet,\n    isRadio &&\n      isStart &&\n      !hasTopUserAssistance &&\n      checkboxRadioLabelInnerStyles.startRadioSetWithoutTopUA,\n    isCheckbox &&\n      isStart &&\n      !hasTopUserAssistance &&\n      checkboxRadioLabelInnerStyles.startCheckboxSetWithoutTopUA,\n    labelWrapping === 'truncate' && labelInnerStyles.noWrap\n  ]);\n\n  return (\n    <StyledLabelValueLayout\n      // For readonly start aligned labels, we want the div that is the parent of the label to\n      // stretch to the height of the value content, including the end content (InputSensitiveText)\n      flexAlign={isReadonly && isStart ? 'stretch' : 'start'}\n      labelStyleClasses={labelStyleClasses}\n      labelStyles={labelStyles}\n      labelInnerClasses={labelInnerClasses}\n      label={label}\n      valueStyles={valueStyles}>\n      {children}\n    </StyledLabelValueLayout>\n  );\n};\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren, ComponentProps, Ref } from 'preact';\nimport { forwardRef, useImperativeHandle, useRef } from 'preact/compat';\n\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { useCollectionFocusRing } from '#hooks/PRIVATE_useCollectionFocusRing';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { FlexboxProps } from '#utils/UNSAFE_interpolations/flexbox';\nimport { Size } from '#utils/UNSAFE_size';\nimport { BundleType } from '#resources/nls/bundle';\nimport { Flex } from '#UNSAFE_Flex';\nimport { Label } from '#UNSAFE_Label';\nimport {\n  InlineHelp,\n  InlineUserAssistance,\n  InlineUserAssistanceContainer,\n  UserAssistanceDensityType\n} from '#UNSAFE_UserAssistance';\nimport { useCheckboxRadioField } from './useCheckboxRadioField';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { xUnits } from '#UNSAFE_Theme';\nimport { topUAContainerStyles } from './CheckboxRadioFieldStyles.css';\nimport { CheckboxRadioContext } from './CheckboxRadioContext';\nimport { layoutSpanStyles, LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { type TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\nimport { CheckboxRadioLabelValueLayout } from './CheckboxRadioLabelValueLayout';\nimport { AriaAttributesSignalExcluded } from '#utils/UNSAFE_attributeUtils';\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype AriaProps = Pick<AriaAttributesSignalExcluded, 'aria-describedby'>;\n\ntype Props = TestIdProps &\n  AriaProps & {\n    /**\n     * Text to provide guidance to help the user understand what data to enter.\n     */\n    assistiveText?: InlineUserAssistanceProps['assistiveText'];\n    /**\n     * baseId, used to generate other element IDs.\n     */\n    baseId: string;\n    /**\n     * <RadioItem /> or <CheckboxItem />\n     */\n    children: ComponentChildren;\n    /**\n     * Specifies how many columns to span in a FormLayout with direction === 'row'\n     */\n    columnSpan?: LayoutColumnSpan;\n    /**\n     * layout direction of the children elements\n     */\n    direction?: FlexboxProps['direction'];\n    /**\n     * Value of the radio option.\n     */\n    hasValue?: boolean;\n    /**\n     * Help source URL associated with the component.\n     */\n    helpSourceLink?: InlineUserAssistanceProps['helpSourceLink'];\n    /**\n     * Custom text to be rendered for the <code>helpSourceLink</code>.\n     */\n    helpSourceText?: InlineUserAssistanceProps['helpSourceText'];\n    /**\n     * Specifies if the radio group is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Specifies if the radio group is read-only.\n     */\n    isReadonly?: boolean;\n    /**\n     * Specifies whether the radio group requires a selection to be made.\n     */\n    isRequired?: boolean;\n    /**\n     * Label text for the group of radio buttons.\n     */\n    label: string;\n    /**\n     * Specifies where the label is positioned relative to the field.\n     */\n    labelEdge?: 'none' | 'top' | 'start' | 'inside';\n    /**\n     * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>.\n     */\n    labelStartWidth?: Size;\n    /**\n     * Messages to show on screen that are associated with the component.\n     */\n    messages?: InlineUserAssistanceProps['messages'];\n\n    role?: 'radiogroup' | 'group';\n    /**\n     * Specifies the density of the user assistance presentation.  It can be set to:\n     * <ul>\n     * <li><code>'reflow'</code>: Show inline. Layout will reflow when text is displayed.</li>\n     * <li><code>'efficient'</code>: Show inline and reserve space to prevent layout reflow when user\n     * assistance text is displayed.</li>\n     * <li><code>'compact'</code>: Show inline and reserve space to prevent layout reflow when user\n     * assistance text is displayed.</li>\n     * </ul>\n     */\n    userAssistanceDensity?: UserAssistanceDensityType;\n\n    parentComponentVariant: 'radioSet' | 'checkboxSet';\n  };\n\nexport const CheckboxRadioField = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      baseId,\n      direction = 'column',\n      columnSpan = 1,\n      hasValue,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled,\n      isReadonly,\n      isRequired,\n      label,\n      labelEdge,\n      labelStartWidth = '33%',\n      parentComponentVariant,\n      messages,\n      userAssistanceDensity,\n      role,\n      children,\n      testId\n    }: Props,\n    ref: Ref<FocusableHandle> = null\n  ) => {\n    const testIdProps = useTestId(testId);\n    const UAtestId = `${testId}-inline-user-assistance`;\n    const UAtestIdTop = testId ? `${UAtestId}-top` : undefined;\n    const UAtestIdBottom = testId ? `${UAtestId}-bottom` : undefined;\n    const hasTopUserAssistance =\n      !isDisabled && !isReadonly && (!!assistiveText || !!helpSourceLink);\n    // we still render <InlineUserAssistance/> if density is 'efficient' or 'compact' to save space,\n    // even though we don't render user assistance for disabled or readonly fields\n    const hasBottomUserAssistance = !isDisabled && !isReadonly;\n    const groupRef = useRef<HTMLDivElement>(null);\n\n    const {\n      groupProps,\n      labelProps,\n      topUserAssistanceProps,\n      bottomUserAssistanceProps,\n      readonlyId\n    } = useCheckboxRadioField({\n      ariaDescribedBy,\n      baseId,\n      isRequired,\n      isReadonly,\n      isDisabled,\n      label,\n      labelEdge,\n      messages,\n      hasValue,\n      hasTopUserAssistance,\n      hasBottomUserAssistance,\n      parentComponentVariant\n    });\n\n    const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const readonlyLabel = translations.formControl_readOnly();\n    const isRadioSet = parentComponentVariant === 'radioSet';\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        if (!isDisabled) {\n          const inputChildren = groupRef.current?.querySelectorAll<HTMLInputElement>('input') ?? [];\n          const selectedChild = Array.from(inputChildren).find((child) => child.checked);\n\n          if (selectedChild) {\n            selectedChild.focus();\n          } else {\n            inputChildren[0].focus();\n          }\n        }\n      },\n      blur: () => {\n        if (groupRef.current?.contains(document.activeElement)) {\n          (document.activeElement as HTMLElement).blur();\n        }\n      }\n    }));\n\n    // the props from the hook are used for focus management on the radioset variant to allow for arrow navigation\n    // while checkboxset uses tabbing\n    const [isFocusRingShown, focusRingProps] = useCollectionFocusRing(\n      groupRef,\n      isRadioSet ? ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'] : ['Tab']\n    );\n\n    const content = (\n      <>\n        {hasTopUserAssistance && (\n          <div\n            id={`${baseId}-top-ua-container`}\n            class={labelEdge === 'start' ? topUAContainerStyles.start : topUAContainerStyles.top}>\n            <InlineUserAssistanceContainer {...topUserAssistanceProps} testId={UAtestIdTop}>\n              <InlineHelp\n                assistiveText={assistiveText}\n                sourceLink={helpSourceLink}\n                sourceText={helpSourceText}\n              />\n            </InlineUserAssistanceContainer>\n          </div>\n        )}\n        <Flex\n          direction={direction}\n          {...(direction === 'row' && { gap: [0, xUnits(8) as Size], wrap: 'wrap' })}>\n          <CheckboxRadioContext.Provider value={{ isFocusRingShown }}>\n            {children}\n          </CheckboxRadioContext.Provider>\n        </Flex>\n        {hasBottomUserAssistance ? (\n          <InlineUserAssistance\n            {...bottomUserAssistanceProps}\n            requiredAlignment=\"start\"\n            messages={messages}\n            userAssistanceDensity={userAssistanceDensity === 'reflow' ? 'reflow' : 'efficient'}\n            testId={UAtestIdBottom}\n          />\n        ) : userAssistanceDensity === 'reflow' ? undefined : (\n          /* save space for user assistance if density is 'efficient' or 'compact', even though we don't\n             render user assistance for disabled or readonly fields */\n          <InlineUserAssistance\n            id={bottomUserAssistanceProps?.id}\n            userAssistanceDensity=\"efficient\"\n            testId={UAtestIdBottom}\n          />\n        )}\n      </>\n    );\n    // The top level element needs the column span class on it.\n    const classes = layoutSpanStyles.layoutSpanColumn[columnSpan];\n\n    return (\n      <div\n        role={role}\n        ref={groupRef}\n        class={classes}\n        {...groupProps}\n        {...focusRingProps}\n        {...testIdProps}>\n        {labelEdge === 'none' ? (\n          content\n        ) : (\n          <CheckboxRadioLabelValueLayout\n            parentComponentVariant={parentComponentVariant}\n            hasTopUserAssistance={hasTopUserAssistance}\n            label={\n              <Label\n                {...labelProps}\n                variant={labelEdge}\n                userAssistanceDensity=\"efficient\"\n                parentComponentVariant={parentComponentVariant}>\n                {label}\n              </Label>\n            }\n            labelEdge={labelEdge}\n            labelStartWidth={labelStartWidth}>\n            {content}\n          </CheckboxRadioLabelValueLayout>\n        )}\n        {isReadonly && (\n          <HiddenAccessible id={readonlyId} isHidden={true}>\n            {readonlyLabel}\n          </HiddenAccessible>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["CheckboxRadioLabelValueLayout","label","labelEdge","children","parentComponentVariant","labelStartWidth","hasTopUserAssistance","baseTheme","radioTheme","useComponentTheme","RadioRedwoodTheme","checkboxTheme","CheckboxRedwoodTheme","labelTheme","LabelRedwoodTheme","formLayoutTheme","FormLayoutRedwoodTheme","isRadio","isCheckbox","isStart","isTop","isInside","width","sizeToCSS","valueWidth","labelStyles","flexBasis","maxWidth","valueStyles","isFormLayout","isReadonly","isFormReadonly","labelWrapping","useFormContext","useFormFieldContext","isPureReadonly","labelStyleClasses","classNames","labelSlotStyles","base","start","top","topAndTopUA","topPureReadonly","labelInnerClasses","labelInnerStyles","checkboxRadioLabelInnerStyles","noWrap","_jsx","StyledLabelValueLayout","flexAlign","CheckboxRadioField","forwardRef","ariaDescribedBy","assistiveText","baseId","direction","columnSpan","hasValue","helpSourceLink","helpSourceText","isDisabled","isRequired","messages","userAssistanceDensity","role","testId","ref","testIdProps","useTestId","UAtestId","UAtestIdTop","undefined","UAtestIdBottom","hasBottomUserAssistance","groupRef","useRef","groupProps","labelProps","topUserAssistanceProps","bottomUserAssistanceProps","readonlyId","useCheckboxRadioField","readonlyLabel","useTranslationBundle","formControl_readOnly","isRadioSet","useImperativeHandle","focus","inputChildren","current","querySelectorAll","selectedChild","Array","from","find","child","checked","blur","contains","document","activeElement","isFocusRingShown","focusRingProps","useCollectionFocusRing","content","_jsxs","_Fragment","id","class","topUAContainerStyles","InlineUserAssistanceContainer","InlineHelp","sourceLink","sourceText","Flex","gap","xUnits","wrap","jsx","CheckboxRadioContext","Provider","value","InlineUserAssistance","requiredAlignment","classes","layoutSpanStyles","layoutSpanColumn","Label","variant","HiddenAccessible","isHidden"],"mappings":"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"}

package/amd/CheckboxSet-05423d28.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', 'preact', 'preact/hooks', 'preact/compat', './FormContext-5130e198', './useFormContext-30acdd33', './FormFieldContext-3c44aaaa', './useFormFieldContextProps-4e36b4c3', 'css!./CheckboxSetStyles.styles.css', './useId-c9578d26', './CheckboxRadioField-1987c75d'], (function(e,s,t,i,o,a,l,r,n,d,c,u){"use strict";const x=t.createContext({});var b="CheckboxSetStyles_styles_ul__68p6630";const h=o.forwardRef((({"aria-describedby":e,assistiveText:o,columnSpan:a,direction:d="column",helpSourceLink:h,helpSourceText:m,isDisabled:C,isReadonly:p,isRequired:S=!1,label:y,labelEdge:F,labelStartWidth:k,messages:v,onCommit:R,userAssistanceDensity:D,value:f,children:g,testId:j},I)=>{const A=void 0!==f&&f.size>0,P=c.useId(),{isDisabled:T,isReadonly:_,labelEdge:E,labelStartWidth:V,userAssistanceDensity:W}=l.useFormContext(),q=C??T,L=p??_,w=F??E,z=k??V,B=D??W,M=n.useFormFieldContextProps({hasValue:A,isDisabled:q,isReadonly:L}),N=i.useMemo((()=>({name:P,value:f,onCommit:R})),[P,R,f]),G=t.toChildArray(g).filter(Boolean).map((e=>s.jsx("li",{children:e})));return s.jsx(r.FormFieldContext.Provider,{value:M,children:s.jsx(u.CheckboxRadioField,{"aria-describedby":e,assistiveText:o,baseId:P,columnSpan:a,direction:d,helpSourceLink:h,helpSourceText:m,isDisabled:q,isReadonly:L,isRequired:S,label:y,labelEdge:w,labelStartWidth:z,parentComponentVariant:"checkboxSet",messages:v,userAssistanceDensity:B,hasValue:A,role:"group",testId:j,ref:I,children:s.jsx(x.Provider,{value:N,children:s.jsx("ul",{className:b,children:G})})})})}));e.CheckboxSet=h,e.CheckboxSetContext=x,e.useCheckboxSetContext=()=>i.useContext(x)}));
+//# sourceMappingURL=CheckboxSet-05423d28.js.map

package/amd/CheckboxSet-05423d28.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSet-05423d28.js","sources":["../../src/UNSAFE_CheckboxSet/CheckboxSetContext.ts","../../src/UNSAFE_CheckboxSet/CheckboxSet.tsx"],"sourcesContent":["import { createContext } from 'preact';\nimport { useContext } from 'preact/hooks';\n\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\n\ntype CheckboxSetContextValue = {\n  name: string;\n  value?: Set<string | number>;\n  onCommit?: (detail: ValueUpdateDetail<Set<string | number>>) => void;\n};\n\nconst CheckboxSetContext = createContext<CheckboxSetContextValue>({} as CheckboxSetContextValue);\nconst useCheckboxSetContext = () => useContext(CheckboxSetContext);\n\nexport { CheckboxSetContext, useCheckboxSetContext };\n","import { ComponentChildren, ComponentProps, Ref, toChildArray } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport { forwardRef } from 'preact/compat';\n\nimport { CheckboxSetContext } from './CheckboxSetContext';\nimport { CheckboxRadioField } from '#PRIVATE_CheckboxRadioField';\nimport { InlineUserAssistance, UserAssistanceDensityType } from '#UNSAFE_UserAssistance';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { useFormFieldContextProps } from '#hooks/UNSAFE_useFormFieldContextProps';\nimport { FlexboxProps } from '#utils/UNSAFE_interpolations/flexbox';\nimport { Size } from '#utils/UNSAFE_size';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { styles } from './CheckboxSetStyles.css';\nimport { AriaAttributesSignalExcluded } from '#utils/UNSAFE_attributeUtils';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype Props = {\n  /**\n   * The ID of an element (or space separated IDs of multiple elements) that\n   * describes the input.\n   */\n  'aria-describedby'?: AriaAttributesSignalExcluded['aria-describedby'];\n  /**\n   * Text to provide guidance to help the user understand what data to enter.\n   */\n  assistiveText?: InlineUserAssistanceProps['assistiveText'];\n  /**\n   * set of CheckboxItems\n   */\n  children: ComponentChildren;\n  /**\n   * Specifies how many columns to span in a FormLayout with direction === 'row'\n   */\n  columnSpan?: LayoutColumnSpan;\n  /**\n   * layout direction of the children elements\n   */\n  direction?: FlexboxProps['direction'];\n  /**\n   * Help source URL associated with the component.\n   */\n  helpSourceLink?: InlineUserAssistanceProps['helpSourceLink'];\n  /**\n   * Custom text to be rendered for the <code>helpSourceLink</code>.\n   */\n  helpSourceText?: InlineUserAssistanceProps['helpSourceText'];\n  /**\n   * Specifies whether the checkbox set requires a selection to be made.\n   */\n  isRequired?: boolean;\n  /**\n   * Specifies if the checkbox set is read-only.\n   */\n  isReadonly?: boolean;\n  /**\n   * Specifies if the checkbox set is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Label text for the group of checkbox items.\n   */\n  label: string;\n  /**\n   * Specifies where the label is positioned relative to the field.\n   */\n  labelEdge?: 'none' | 'top' | 'start' | 'inside';\n  /**\n   * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>.\n   */\n  labelStartWidth?: Size;\n  /**\n   * Messages to show on screen that are associated with the component.\n   */\n  messages?: InlineUserAssistanceProps['messages'];\n  /**\n   * Callback invoked each time the user changes selected option.\n   */\n  onCommit: (detail: ValueUpdateDetail<Set<string | number>>) => void;\n  /**\n   * Specifies the density of the user assistance presentation.  It can be set to:\n   * <ul>\n   * <li><code>'reflow'</code>: Show inline.  Layout will reflow when text is displayed.</li>\n   * <li><code>'efficient'</code>: Show inline and reserve space to prevent layout reflow when user\n   * assistance text is displayed.</li>\n   * <li><code>'compact'</code>: Show inline and reserve space to prevent layout reflow when user\n   * assistance text is displayed.</li>\n   * </ul>\n   */\n  userAssistanceDensity?: UserAssistanceDensityType;\n  /**\n   * Value of the selected checkbox option.\n   */\n  value?: Set<string | number>;\n} & TestIdProps;\n/**\n * A CheckboxSet allows the user to select one or more options from a set.\n */\nexport const CheckboxSet = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      columnSpan,\n      direction = 'column',\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequired = false,\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      messages,\n      onCommit,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value,\n      children,\n      testId\n    }: Props,\n    ref?: Ref<FocusableHandle>\n  ) => {\n    const hasValue = value !== undefined ? value.size > 0 : false;\n    const baseId = useId();\n\n    const {\n      isDisabled: isFormDisabled,\n      isReadonly: isFormReadonly,\n      labelEdge: formLabelEdge,\n      labelStartWidth: formLabelStartWidth,\n      userAssistanceDensity: formUserAssistanceDensity\n    } = useFormContext();\n\n    // default to FormContext values if component properties are not specified\n    const isDisabled = propIsDisabled ?? isFormDisabled;\n    const isReadonly = propIsReadonly ?? isFormReadonly;\n    const labelEdge = propLabelEdge ?? formLabelEdge;\n    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    const formFieldContext = useFormFieldContextProps({\n      hasValue,\n      isDisabled,\n      isReadonly\n    });\n\n    const checkboxSetContext = useMemo(\n      () => ({\n        name: baseId,\n        value,\n        onCommit\n      }),\n      [baseId, onCommit, value]\n    );\n\n    // wrap each CheckboxItem in an <li> tag and the entire set with <ul>\n    const childrenArray = toChildArray(children).filter(Boolean);\n    const wrappedChildren = childrenArray.map((item) => <li>{item}</li>);\n\n    return (\n      <FormFieldContext.Provider value={formFieldContext}>\n        <CheckboxRadioField\n          aria-describedby={ariaDescribedBy}\n          assistiveText={assistiveText}\n          baseId={baseId}\n          columnSpan={columnSpan}\n          direction={direction}\n          helpSourceLink={helpSourceLink}\n          helpSourceText={helpSourceText}\n          isDisabled={isDisabled}\n          isReadonly={isReadonly}\n          isRequired={isRequired}\n          label={label}\n          labelEdge={labelEdge}\n          labelStartWidth={labelStartWidth}\n          parentComponentVariant=\"checkboxSet\"\n          messages={messages}\n          userAssistanceDensity={userAssistanceDensity}\n          hasValue={hasValue}\n          role=\"group\"\n          testId={testId}\n          ref={ref}>\n          <CheckboxSetContext.Provider value={checkboxSetContext}>\n            <ul className={styles.ul}>{wrappedChildren}</ul>\n          </CheckboxSetContext.Provider>\n        </CheckboxRadioField>\n      </FormFieldContext.Provider>\n    );\n  }\n);\n"],"names":["CheckboxSetContext","createContext","CheckboxSet","forwardRef","ariaDescribedBy","assistiveText","columnSpan","direction","helpSourceLink","helpSourceText","isDisabled","propIsDisabled","isReadonly","propIsReadonly","isRequired","label","labelEdge","propLabelEdge","labelStartWidth","propLabelStartWidth","messages","onCommit","userAssistanceDensity","propUserAssistanceDensity","value","children","testId","ref","hasValue","undefined","size","baseId","useId","isFormDisabled","isFormReadonly","formLabelEdge","formLabelStartWidth","formUserAssistanceDensity","useFormContext","formFieldContext","useFormFieldContextProps","checkboxSetContext","useMemo","name","wrappedChildren","toChildArray","filter","Boolean","map","item","_jsx","FormFieldContext","Provider","CheckboxRadioField","parentComponentVariant","role","jsx","className","styles","useContext"],"mappings":"6UAWA,MAAMA,EAAqBC,EAAaA,cAA0B,iDC4F3D,MAAMC,EAAcC,EAAUA,YACnC,EAEI,mBAAoBC,EACpBC,gBACAC,aACAC,YAAY,SACZC,iBACAC,iBACAC,WAAYC,EACZC,WAAYC,EACZC,cAAa,EACbC,QACAC,UAAWC,EACXC,gBAAiBC,EACjBC,WACAC,WACAC,sBAAuBC,EACvBC,QACAC,WACAC,UAEFC,KAEA,MAAMC,OAAqBC,IAAVL,GAAsBA,EAAMM,KAAO,EAC9CC,EAASC,EAAAA,SAGbtB,WAAYuB,EACZrB,WAAYsB,EACZlB,UAAWmB,EACXjB,gBAAiBkB,EACjBd,sBAAuBe,GACrBC,EAAcA,iBAGZ5B,EAAaC,GAAkBsB,EAC/BrB,EAAaC,GAAkBqB,EAC/BlB,EAAYC,GAAiBkB,EAC7BjB,EAAkBC,GAAuBiB,EACzCd,EAAwBC,GAA6Bc,EAErDE,EAAmBC,EAAAA,yBAAyB,CAChDZ,WACAlB,aACAE,eAGI6B,EAAqBC,EAAAA,SACzB,KAAO,CACLC,KAAMZ,EACNP,QACAH,cAEF,CAACU,EAAQV,EAAUG,IAKfoB,EADgBC,EAAAA,aAAapB,GAAUqB,OAAOC,SACdC,KAAKC,GAASC,MAAA,KAAA,CAAAzB,SAAKwB,MAEzD,OACEC,EAAAA,IAACC,EAAAA,iBAAiBC,UAAS5B,MAAOe,EAAgBd,SAChDyB,EAAAA,IAACG,EAAAA,uCACmBjD,EAClBC,cAAeA,EACf0B,OAAQA,EACRzB,WAAYA,EACZC,UAAWA,EACXC,eAAgBA,EAChBC,eAAgBA,EAChBC,WAAYA,EACZE,WAAYA,EACZE,WAAYA,EACZC,MAAOA,EACPC,UAAWA,EACXE,gBAAiBA,EACjBoC,uBAAuB,cACvBlC,SAAUA,EACVE,sBAAuBA,EACvBM,SAAUA,EACV2B,KAAK,QACL7B,OAAQA,EACRC,IAAKA,EACLF,SAAAyB,EAAAM,IAACxD,EAAmBoD,SAAQ,CAAC5B,MAAOiB,EAAkBhB,SACpDyB,EAAAA,UAAIO,UAAWC,EAASjC,SAAGmB,SAIjC,mEDpLwB,IAAMe,EAAAA,WAAW3D"}

package/amd/CheckboxStyles.styles.css

@@ -26,4 +26,10 @@
   padding-block-start: calc((var(--rowHeight__1qyga5a2) - var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-line-height) * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size) + 1px) * 0.5);
   padding-block-end: calc((var(--rowHeight__1qyga5a2) - var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-line-height) * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size) - 1px) * 0.5);
   font-size: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size);
+}
+.CheckboxStyles_valueLabelStyle__13w91qj2 .LinkBaseTheme_baseTheme__eahcnn0 {
+  margin-top: calc(-1 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, 0.25rem));
+}
+.oj-scale-sm .CheckboxStyles_valueLabelStyle__13w91qj2 .LinkBaseTheme_baseTheme__eahcnn0, :root.oj-scale-sm .CheckboxStyles_valueLabelStyle__13w91qj2 .LinkBaseTheme_baseTheme__eahcnn0 {
+  margin-top: -5px;
 }

package/amd/ClearIcon-d73689cc.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', './useTranslationBundle-7c40cb58', './IconButton-368fba34', './DeleteCircleS-79c5ff5c', './TabbableModeContext-a9c97640', 'preact/hooks'], (function(e,t,n,o,r,c,a){"use strict";e.ClearIcon=function({onClick:e,testId:a}){const i=n.useTranslationBundle("@oracle/oraclejet-preact").formControl_clear();return t.jsx(c.TabbableModeContext.Provider,{value:{isTabbable:!1},children:t.jsx("div",{"aria-hidden":"true",children:t.jsx(o.IconButton,{variant:"ghost",size:"sm",onAction:e,tooltip:i,testId:a,children:t.jsx(r.SvgDeleteCircleS,{})})})})}}));
+//# sourceMappingURL=ClearIcon-d73689cc.js.map

package/amd/ClearIcon-d73689cc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearIcon-d73689cc.js","sources":["../../src/PRIVATE_ClearIcon/ClearIcon.tsx"],"sourcesContent":["import type { BundleType } from '#resources/nls/bundle';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { DeleteIcon } from '#PRIVATE_ThemedIcons/DeleteIcon';\nimport { TabbableModeContext } from '#hooks/UNSAFE_useTabbableMode';\n\ntype Props = {\n  onClick?: () => void;\n} & TestIdProps;\n\n/**\n * ClearIcon is used to clear an input value.\n * @param onClick Callback for clearing value when button is clicked\n * @param testId ID used for testing purposes\n */\nexport function ClearIcon({ onClick, testId }: Props) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const clearStr = translations.formControl_clear();\n\n  return (\n    <TabbableModeContext.Provider value={{ isTabbable: false }}>\n      <div aria-hidden=\"true\">\n        <IconButton variant=\"ghost\" size=\"sm\" onAction={onClick} tooltip={clearStr} testId={testId}>\n          <DeleteIcon />\n        </IconButton>\n      </div>\n    </TabbableModeContext.Provider>\n  );\n}\n"],"names":["onClick","testId","clearStr","useTranslationBundle","formControl_clear","_jsx","TabbableModeContext","Provider","value","isTabbable","jsx","IconButton","variant","size","onAction","tooltip","DeleteIcon"],"mappings":"yOAgB0BA,QAAEA,EAAOC,OAAEA,IACnC,MACMC,EADeC,uBAAiC,4BACxBC,oBAE9B,OACEC,EAAAA,IAACC,EAAAA,oBAAoBC,SAAS,CAAAC,MAAO,CAAEC,YAAY,YACjDJ,EAAiBK,IAAA,MAAA,CAAA,cAAA,gBACfL,EAACK,IAAAC,aAAW,CAAAC,QAAQ,QAAQC,KAAK,KAAKC,SAAUd,EAASe,QAASb,EAAUD,OAAQA,WAClFI,EAACK,IAAAM,4BAKX"}

package/amd/ComboChart-72eda15f.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', './layoutUtils-4304ffe4', './chartUtils-a85dd8f3', './useChartDnd-44674b7d', './LineSeries-ce197af6', './dataStyleUtils-a0ecedd5', './useUser-797287de', './colorUtils-bc5b1d84', './accUtils-93ee6f16', './Common/themes/themeContract.css', './BarGroup-d6909cb1', './Chart-79cfc878'], (function(e,t,i,r,s,o,n,a,d,l,c,g,h){"use strict";function p(e){return t.jsx(x,{datatip:()=>({content:""}),zoomAndScroll:"off",plotArea:{yMajorTick:{isRendered:!1},xMajorTick:{}},xAxis:{tickLabel:{autoRotate:!1,isRendered:!!e.xAxis?.timeAxisType}},series:e.series,groups:e.groups,getDataItem:e.getDataItem,yAxis:{tickLabel:{isRendered:!1}},overview:"off"})}const I=.5,m=.2,u=.2;function x({width:e,height:l,selectedIds:x=[],hiddenIds:f=[],highlightedIds:y,hideAndShowBehavior:S="none",orientation:v="vertical",yAxis:C,series:b,groups:A,isStacked:D=!1,getDataItem:T,selectionMode:L="none",drilling:k="off",dataItemGaps:j=.5,dataLabelEffect:M="outline",...R}){const{direction:w,forcedColors:U}=a.useUser(),W="active"===U,z=b.filter((e=>"bar"===e.type)),E="rtl"===w,G="log"===C?.scale,B=R.xAxis?.timeAxisType,F=new Set(f),P=new Set(x),H=new Set(y),N="horizontal"===v,q=d.getColorRamp(),O=s.getSeriesData(b.length,A.length,T,F,G),V=O.some(((e,t)=>"area"===b[t].type||"lineWithArea"===b[t].type)),J=O.some(((e,t)=>"bar"===b[t].type)),K=(e,t)=>D?{...T(e,t),value:O[e][t]}:T(e,t),Q=s.getMarkers(),X=[];return t.jsx(h.Chart,{width:e,height:l,selectedIds:P,hiddenIds:f,hideAndShowBehavior:S,orientation:v,yAxis:C,series:b,defaultOverviewContentRenderer:()=>t.jsx(p,{groups:A,series:b,getDataItem:T}),groups:A,selectionMode:L,drilling:k,isStacked:D,getDataItem:T,findNearest:(e,t)=>i.findNearestDataPoint(b,A,e,t,K,D,(()=>({offset:0,dataWidth:0})),((e,t)=>t.transform(e)),G,0,F,B),getDataItemPos:(e,t,i,s)=>{const o=J?g.getBarPosition(z,A,T,e,t,F,j,i,s,"log"===C?.scale,D,E,N,B):void 0;return(i,s)=>"bar"===b[i].type?o?o(i,s):void 0:r.getLineAreaChartItemPosition(i,s,O,T,A,N,e,t,B)},getMarkerInfo:(e,t)=>({color:n.getItemColor(e,t,b,T),markerType:n.getMarkerType(e,t,T)}),renderGridLinesInFront:V,getNavUtil:(e,t)=>n.getLineAreaChartNavUtil(T,b.length,e,t,D,E,N),getGapRatio:()=>1,offset:J?I:m,isRtl:E,...R,children:({xStartIndex:e,xEndIndex:i,xScale:n,yScale:a,activeId:d,focusedItemInfo:l,hoveredItemInfo:h,isPointInsideMarquee:p,getTextDimensions:I,defaultFontSize:m,groupWidth:x})=>{let f=-1;return t.jsx(t.Fragment,{children:O.map(((S,w)=>{const U=b[w],V="lineWithArea"===U.type?u:1,J="area"===U.type||"lineWithArea"===U.type,Y="area"===U.type;if(0===S.length)return;const Z=s.getLineAreaSegments(a,n,S,e,i,N,G,A,w,K,B);X[w]=Z[0];const $="bar"!==U.type?"curved"===U.lineType&&D&&O.length>1&&w>0:D&&O.length>1&&w>0,_=void 0===y||0===H.size||H.has(U.id),ee=D&&0!=w?X.reduce(((e,t,i)=>i>=w?e:t.length>0?i:e),0):void 0;return"bar"===U.type&&(f+=1),t.jsxs(t.Fragment,{children:["bar"===U.type&&A.slice(e,i+1).map(((r,s)=>t.jsx(g.BarGroup,{yScale:a,xScale:n,groupIndex:s+e,selectedIds:P,hiddenIds:F,highlightedIds:y?H:y,isDrillEnabled:"on"===k,series:z,barGapRatio:g.getBarGapRatio(D,e,i),dataItemGaps:j,isPointInsideMarquee:p,isStacked:D,groupWidth:x,group:A[s],timeAxisType:R.xAxis?.timeAxisType,colors:q,activeId:d,isLog:"log"===C?.scale,orientation:v,getDataItem:T,isSelectionEnabled:"none"!=L,isRtl:E,focusedItemInfo:l,hoveredItemInfo:h,getTextDimensions:I,defaultFontSize:m,seriesIndex:f}))),J&&t.jsx(r.AreaSeries,{yScale:a,lineType:U.lineType,color:U.areaColor||q[w%q.length],isHorizontal:N,areaColorOpacity:V,isBottomSegmentCurved:$,bottomCoords:void 0!==ee&&X[ee].some((e=>null!=e))?X[ee]:void 0,lineSegments:Z,isLog:G,isHighlighted:_,seriesIndex:w}),"line"===U.type&&t.jsx(o.LineSeries,{lineType:U.lineType,lineColor:Y?c.colorSchemeVars.dvt.contrastLine:U.lineColor,lineWidth:Y?1.25:U.lineWidth,lineStyle:U.lineStyle||"solid",color:U.lineColor||q[w%q.length],lineSegmentCoords:Z,isHorizontal:N,isHighlighted:_,seriesIndex:w}),!D&&("line"===U.type||J)&&t.jsx(o.MarkersWithLabel,{yScale:a,xScale:n,groups:A,series:U,timeAxisType:B,color:q[w%q.length],seriesIndex:w,startIndex:e,endIndex:i,markerType:Q[w%Q.length],orientation:v,isLog:G,activeId:d,getDataItem:T,isPointInsideMarquee:p,selectedIds:P,focusedItemIndex:l.seriesIndex!==w||!l.isFocusVisible||R.isDataCursorEnabled&&R.dataCursorStyle?.isMarkerDisplayed?void 0:l.groupIndex,hoveredItemIndex:h?.isCurrent&&h.seriesIndex===w?h.groupIndex:void 0,isSelectionEnabled:"single"===L||"multiple"===L,isDrillEnabled:"on"===k,defaultFontSize:m,dataLabelEffect:M,isHighContrast:W})]})}))})}})}e.ComboChart=x}));
+//# sourceMappingURL=ComboChart-72eda15f.js.map

package/amd/ComboChart-72eda15f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboChart-72eda15f.js","sources":["../../src/UNSAFE_ComboChart/OverviewComboChart.tsx","../../src/UNSAFE_ComboChart/ComboChart.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 */\n\nimport { ComboChart } from './ComboChart';\nimport { ComboChartProps, LineAreaItem } from './ComboChart.types';\n\nexport function OverviewComboChart<K extends string | number, D extends LineAreaItem<K>>(\n  props: ComboChartProps<K, D>\n) {\n  return (\n    <ComboChart\n      datatip={() => ({ content: '' })}\n      zoomAndScroll=\"off\"\n      plotArea={{\n        yMajorTick: {\n          isRendered: false\n        },\n        xMajorTick: {}\n      }}\n      xAxis={{\n        tickLabel: {\n          autoRotate: false,\n          // @ts-ignore\n          isRendered: props.xAxis?.timeAxisType ? true : false\n        }\n      }}\n      series={props.series}\n      groups={props.groups}\n      getDataItem={props.getDataItem}\n      yAxis={{\n        tickLabel: {\n          isRendered: false\n        }\n      }}\n      overview=\"off\"\n    />\n  );\n}\n","/**\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 */\n\nimport { ComboChartProps, LineAreaItem } from './ComboChart.types';\nimport { findNearestDataPoint } from '#utils/PRIVATE_chartUtils/layoutUtils';\nimport { AreaSeries } from '#PRIVATE_LineAreaComponents/AreaSeries';\nimport { getMarkers, getSeriesData } from '#utils/PRIVATE_chartUtils/utils';\nimport { MarkersWithLabel } from '#PRIVATE_Chart/MarkersWithLabel';\nimport { getLineAreaChartNavUtil } from '#utils/PRIVATE_chartUtils/navUtils';\nimport { Chart } from '#PRIVATE_Chart';\nimport { Scale, TimeAxisProps } from '#utils/UNSAFE_visTypes/chart';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { getColorRamp } from '#utils/UNSAFE_visUtils';\nimport { LineSeries } from '#PRIVATE_LineAreaComponents/LineSeries';\nimport { Point } from '#utils/PRIVATE_visSVGUtils';\nimport { getLineAreaSegments } from '#utils/PRIVATE_chartUtils/utils';\nimport { colorSchemeVars } from '#Common/themes/themeContract.css';\nimport { getItemColor, getMarkerType } from '#utils/PRIVATE_chartUtils/dataStyleUtils';\nimport { BarGroup } from '#UNSAFE_BarChart/BarGroup';\nimport { getBarPosition } from '#UNSAFE_BarChart/utils/barLayoutUtils';\nimport { getLineAreaChartItemPosition } from '#PRIVATE_LineAreaComponents/utils/chartUtils';\nimport { getBarGapRatio } from '#UNSAFE_BarChart/utils/barSeriesUtils';\nimport { OverviewComboChart } from './OverviewComboChart';\n\nconst BAR_AXIS_OFFSET = 0.5;\n\nconst AXIS_OFFSET = 0.2;\n\nconst LINE_WITH_AREA_OPACITY = 0.2;\n\n/**\n * The ComboChart displays information graphically using bars, lines and filled areas, making relationships among the data easier to understand.\n */\nexport function ComboChart<K extends string | number, D extends LineAreaItem<K>>({\n  width,\n  height,\n  selectedIds = [],\n  hiddenIds = [],\n  highlightedIds,\n  hideAndShowBehavior = 'none',\n  orientation = 'vertical',\n  yAxis,\n  series,\n  groups,\n  isStacked = false,\n  getDataItem,\n  selectionMode = 'none',\n  drilling = 'off',\n  dataItemGaps = 0.5,\n  dataLabelEffect = 'outline',\n  ...props\n}: ComboChartProps<K, D>) {\n  const { direction, forcedColors } = useUser();\n  const isHighContrast = forcedColors === 'active';\n  const filteredBarSeries = series.filter((currentSeries) => currentSeries.type === 'bar');\n  const isRtl = direction === 'rtl';\n  const isLog = yAxis?.scale === 'log';\n  const timeAxisType = (props.xAxis as TimeAxisProps)?.timeAxisType;\n  const hiddenSet = new Set(hiddenIds);\n  const selectedSet = new Set(selectedIds);\n  const highlightedSet = new Set(highlightedIds);\n  const isHoriz = orientation === 'horizontal';\n  const colors = getColorRamp();\n  // TODO: JET-71332 ; should only be (number | undefined)[][]\n  // remove the type inference from scatter chart item.\n  const renderedSeries = getSeriesData<K, D>(\n    series.length,\n    groups.length,\n    getDataItem,\n    hiddenSet,\n    isLog\n  );\n\n  const hasArea = renderedSeries.some(\n    (_, index) => series[index].type === 'area' || series[index].type === 'lineWithArea'\n  );\n  const hasBar = renderedSeries.some((_, index) => series[index].type === 'bar');\n  const renderedGetDataItem = (seriesIndex: number, groupIndex: number): D | undefined => {\n    if (!isStacked) return getDataItem(seriesIndex, groupIndex);\n    return {\n      ...getDataItem(seriesIndex, groupIndex),\n      value: renderedSeries[seriesIndex][groupIndex]\n    } as D;\n  };\n\n  const getGapRatio = () => {\n    return 1;\n  };\n\n  const getNextChartItemFunc = (startIndex: number, endIndex: number) => {\n    // TODO: JET-71332\n    //@ts-ignore\n    return getLineAreaChartNavUtil<D>(\n      getDataItem,\n      series.length,\n      startIndex,\n      endIndex,\n      isStacked,\n      isRtl,\n      isHoriz\n    );\n  };\n\n  const getDataItemPos = (xScale: Scale, yScale: Scale, groupWidth: number, gapRatio: number) => {\n    const _getBarPosition = hasBar\n      ? getBarPosition(\n          filteredBarSeries,\n          groups,\n          getDataItem,\n          xScale,\n          yScale,\n          hiddenSet,\n          dataItemGaps,\n          groupWidth,\n          gapRatio,\n          yAxis?.scale === 'log',\n          isStacked,\n          isRtl,\n          isHoriz,\n          timeAxisType\n        )\n      : undefined;\n\n    return (seriesIndex: number, groupIndex: number) => {\n      const seriesItem = series[seriesIndex];\n      if (seriesItem.type === 'bar') {\n        return _getBarPosition ? _getBarPosition(seriesIndex, groupIndex) : undefined;\n      } else {\n        return getLineAreaChartItemPosition(\n          seriesIndex,\n          groupIndex,\n          renderedSeries,\n          getDataItem,\n          groups,\n          isHoriz,\n          xScale,\n          yScale,\n          timeAxisType\n        );\n      }\n    };\n  };\n\n  const getMarkerColorAndType = (seriesIndex: number, groupIndex: number) => {\n    const color = getItemColor(seriesIndex, groupIndex, series, getDataItem);\n    const markerType = getMarkerType(seriesIndex, groupIndex, getDataItem);\n    return { color, markerType };\n  };\n\n  const findNearest = (xScale: Scale, yScale: Scale) => {\n    const getSeriesDataInfo = () => {\n      return {\n        offset: 0,\n        dataWidth: 0\n      };\n    };\n\n    const getYCoord = (value: number, yScale: Scale) => {\n      return yScale.transform(value);\n    };\n\n    return findNearestDataPoint<K, D>(\n      series,\n      groups,\n      xScale,\n      yScale,\n      renderedGetDataItem,\n      isStacked,\n      getSeriesDataInfo,\n      getYCoord,\n      isLog,\n      0,\n      hiddenSet,\n      timeAxisType\n    );\n  };\n  const markers = getMarkers();\n\n  const allLineSegmentCoords: Point[][] = [];\n  return (\n    <Chart\n      width={width}\n      height={height}\n      selectedIds={selectedSet}\n      hiddenIds={hiddenIds}\n      hideAndShowBehavior={hideAndShowBehavior}\n      orientation={orientation}\n      yAxis={yAxis}\n      series={series}\n      defaultOverviewContentRenderer={() => {\n        return <OverviewComboChart groups={groups} series={series} getDataItem={getDataItem} />;\n      }}\n      groups={groups}\n      selectionMode={selectionMode}\n      drilling={drilling}\n      isStacked={isStacked}\n      getDataItem={getDataItem}\n      findNearest={findNearest}\n      getDataItemPos={getDataItemPos}\n      getMarkerInfo={getMarkerColorAndType}\n      renderGridLinesInFront={hasArea}\n      getNavUtil={getNextChartItemFunc}\n      getGapRatio={getGapRatio}\n      offset={hasBar ? BAR_AXIS_OFFSET : AXIS_OFFSET}\n      isRtl={isRtl}\n      {...props}>\n      {({\n        xStartIndex,\n        xEndIndex,\n        xScale,\n        yScale,\n        activeId,\n        focusedItemInfo,\n        hoveredItemInfo,\n        isPointInsideMarquee,\n        getTextDimensions,\n        defaultFontSize,\n        groupWidth\n      }) => {\n        let barSeriesIndex = -1;\n        return (\n          <>\n            {renderedSeries.map((valueSeries, index) => {\n              const currentSeries = series[index];\n\n              const areaOpacity =\n                currentSeries.type === 'lineWithArea' ? LINE_WITH_AREA_OPACITY : 1;\n              const isAreaRendered =\n                currentSeries.type === 'area' || currentSeries.type === 'lineWithArea';\n              const isContrastLineNeeded = currentSeries.type === 'area';\n\n              if (valueSeries.length === 0) {\n                return;\n              }\n\n              const lineSegmentCoords: Point[][] = getLineAreaSegments<K, D>(\n                yScale,\n                xScale,\n                valueSeries,\n                xStartIndex,\n                xEndIndex,\n                isHoriz,\n                isLog,\n                groups,\n                index,\n                renderedGetDataItem,\n                timeAxisType\n              );\n              allLineSegmentCoords[index] = lineSegmentCoords[0];\n              const isBottomSegmentCurved =\n                currentSeries.type !== 'bar'\n                  ? currentSeries.lineType === 'curved' &&\n                    isStacked &&\n                    renderedSeries.length > 1 &&\n                    index > 0\n                  : isStacked && renderedSeries.length > 1 && index > 0;\n\n              const isHighlighted =\n                highlightedIds === undefined ||\n                highlightedSet.size === 0 ||\n                highlightedSet.has(currentSeries.id);\n\n              const prevCoords =\n                isStacked && index != 0\n                  ? allLineSegmentCoords.reduce((prevValue, newValue, j) => {\n                      // find the index i such that i < index, and series i  has at least\n                      // one or more data item unhidden. Only such series will can be\n                      // used as bottomCoord for current series. Otherwise we have to use\n                      // baseline coord\n                      if (j >= index) {\n                        return prevValue;\n                      }\n                      if (newValue.length > 0) {\n                        return j;\n                      }\n                      return prevValue;\n                    }, 0)\n                  : undefined;\n              if (currentSeries.type === 'bar') barSeriesIndex = barSeriesIndex + 1;\n              return (\n                <>\n                  {currentSeries.type === 'bar' &&\n                    groups.slice(xStartIndex, xEndIndex + 1).map((_, index) => {\n                      const barGroup = (\n                        <BarGroup\n                          yScale={yScale}\n                          xScale={xScale}\n                          groupIndex={index + xStartIndex}\n                          selectedIds={selectedSet}\n                          hiddenIds={hiddenSet}\n                          highlightedIds={highlightedIds ? highlightedSet : highlightedIds}\n                          isDrillEnabled={drilling === 'on'}\n                          series={filteredBarSeries}\n                          barGapRatio={getBarGapRatio(isStacked, xStartIndex, xEndIndex)}\n                          dataItemGaps={dataItemGaps}\n                          isPointInsideMarquee={isPointInsideMarquee}\n                          isStacked={isStacked}\n                          groupWidth={groupWidth}\n                          group={groups[index]}\n                          timeAxisType={(props.xAxis as TimeAxisProps)?.timeAxisType}\n                          colors={colors}\n                          activeId={activeId}\n                          isLog={yAxis?.scale === 'log'}\n                          orientation={orientation}\n                          getDataItem={getDataItem}\n                          isSelectionEnabled={selectionMode != 'none'}\n                          isRtl={isRtl}\n                          focusedItemInfo={focusedItemInfo}\n                          hoveredItemInfo={hoveredItemInfo}\n                          getTextDimensions={getTextDimensions}\n                          defaultFontSize={defaultFontSize}\n                          seriesIndex={barSeriesIndex}\n                        />\n                      );\n\n                      return barGroup;\n                    })}\n                  {isAreaRendered && (\n                    <AreaSeries\n                      yScale={yScale}\n                      lineType={currentSeries.lineType}\n                      color={currentSeries.areaColor || colors[index % colors.length]}\n                      isHorizontal={isHoriz}\n                      areaColorOpacity={areaOpacity}\n                      isBottomSegmentCurved={isBottomSegmentCurved}\n                      bottomCoords={\n                        prevCoords !== undefined &&\n                        allLineSegmentCoords[prevCoords].some((value) => value != null)\n                          ? allLineSegmentCoords[prevCoords]\n                          : undefined\n                      }\n                      lineSegments={lineSegmentCoords}\n                      isLog={isLog}\n                      isHighlighted={isHighlighted}\n                      seriesIndex={index}\n                    />\n                  )}\n                  {currentSeries.type === 'line' && (\n                    <LineSeries\n                      lineType={currentSeries.lineType}\n                      lineColor={\n                        isContrastLineNeeded\n                          ? colorSchemeVars.dvt.contrastLine\n                          : currentSeries.lineColor\n                      }\n                      lineWidth={isContrastLineNeeded ? 1.25 : currentSeries.lineWidth}\n                      lineStyle={currentSeries.lineStyle || 'solid'}\n                      color={currentSeries.lineColor || colors[index % colors.length]}\n                      lineSegmentCoords={lineSegmentCoords}\n                      isHorizontal={isHoriz}\n                      isHighlighted={isHighlighted}\n                      seriesIndex={index}\n                    />\n                  )}\n                  {\n                    /*for non stacked charts, markers should render in the order of series.\n                     some markers might get hidden behind area but this preserves the legacy behavior. */\n                    !isStacked && (currentSeries.type === 'line' || isAreaRendered) && (\n                      <MarkersWithLabel\n                        yScale={yScale}\n                        xScale={xScale}\n                        groups={groups}\n                        series={currentSeries}\n                        timeAxisType={timeAxisType}\n                        color={\n                          colors[\n                            index % colors.length\n                          ] /* TODO : make this use getItemColor function from dataStyleUtils. */\n                        }\n                        seriesIndex={index}\n                        startIndex={xStartIndex}\n                        endIndex={xEndIndex}\n                        markerType={markers[index % markers.length]}\n                        orientation={orientation}\n                        isLog={isLog}\n                        activeId={activeId}\n                        getDataItem={getDataItem}\n                        isPointInsideMarquee={isPointInsideMarquee}\n                        selectedIds={selectedSet}\n                        focusedItemIndex={\n                          focusedItemInfo.seriesIndex === index &&\n                          focusedItemInfo.isFocusVisible &&\n                          !(props.isDataCursorEnabled && props.dataCursorStyle?.isMarkerDisplayed)\n                            ? focusedItemInfo.groupIndex\n                            : undefined\n                        }\n                        hoveredItemIndex={\n                          hoveredItemInfo?.isCurrent && hoveredItemInfo.seriesIndex === index\n                            ? hoveredItemInfo.groupIndex\n                            : undefined\n                        }\n                        isSelectionEnabled={\n                          selectionMode === 'single' || selectionMode === 'multiple'\n                        }\n                        isDrillEnabled={drilling === 'on'}\n                        defaultFontSize={defaultFontSize}\n                        dataLabelEffect={dataLabelEffect}\n                        isHighContrast={isHighContrast}\n                      />\n                    )\n                  }\n                </>\n              );\n            })}\n          </>\n          //TODO - handle isStack part\n        );\n      }}\n    </Chart>\n  );\n}\n"],"names":["OverviewComboChart","props","_jsx","ComboChart","datatip","content","zoomAndScroll","plotArea","yMajorTick","isRendered","xMajorTick","xAxis","tickLabel","autoRotate","timeAxisType","series","groups","getDataItem","yAxis","overview","BAR_AXIS_OFFSET","AXIS_OFFSET","LINE_WITH_AREA_OPACITY","width","height","selectedIds","hiddenIds","highlightedIds","hideAndShowBehavior","orientation","isStacked","selectionMode","drilling","dataItemGaps","dataLabelEffect","direction","forcedColors","useUser","isHighContrast","filteredBarSeries","filter","currentSeries","type","isRtl","isLog","scale","hiddenSet","Set","selectedSet","highlightedSet","isHoriz","colors","getColorRamp","renderedSeries","getSeriesData","length","hasArea","some","_","index","hasBar","renderedGetDataItem","seriesIndex","groupIndex","value","markers","getMarkers","allLineSegmentCoords","jsx","Chart","defaultOverviewContentRenderer","findNearest","xScale","yScale","findNearestDataPoint","offset","dataWidth","transform","getDataItemPos","groupWidth","gapRatio","_getBarPosition","getBarPosition","undefined","getLineAreaChartItemPosition","getMarkerInfo","color","getItemColor","markerType","getMarkerType","renderGridLinesInFront","getNavUtil","startIndex","endIndex","getLineAreaChartNavUtil","getGapRatio","children","xStartIndex","xEndIndex","activeId","focusedItemInfo","hoveredItemInfo","isPointInsideMarquee","getTextDimensions","defaultFontSize","barSeriesIndex","_Fragment","Fragment","map","valueSeries","areaOpacity","isAreaRendered","isContrastLineNeeded","lineSegmentCoords","getLineAreaSegments","isBottomSegmentCurved","lineType","isHighlighted","size","has","id","prevCoords","reduce","prevValue","newValue","j","_jsxs","slice","BarGroup","isDrillEnabled","barGapRatio","getBarGapRatio","group","isSelectionEnabled","AreaSeries","areaColor","isHorizontal","areaColorOpacity","bottomCoords","lineSegments","LineSeries","lineColor","colorSchemeVars","dvt","contrastLine","lineWidth","lineStyle","MarkersWithLabel","focusedItemIndex","isFocusVisible","isDataCursorEnabled","dataCursorStyle","isMarkerDisplayed","hoveredItemIndex","isCurrent"],"mappings":"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"}

package/amd/CompactUserAssistance-3799998f.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', './useComponentTheme-5aa41a8f', 'preact/hooks', './Flex-590160eb', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-733ade2f', 'preact/compat', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-30886397', 'css!./IconStyle.styles.css', './IconButton-368fba34', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-2e19d8de', './logger-0f873e29', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme', './ComponentMessageContainer-cf186eeb', './FormFieldContext-3c44aaaa', './useFormFieldContext-8196183c', './Popup-3e2566da', './Separator-181f7541', './CompactHelpSource-de995a7f', './UNSAFE_UserAssistance/themes/UserAssistanceStyles.css'], (function(e,s,t,o,n,a,i,r,l,c,p,d,m,h,u,g,y,C,S,F,x,A,U,f,M,T,b,B,w,E,N,_,j,v){"use strict";e.CompactUserAssistance=function({anchorRef:e,assistiveText:o,fieldLabel:n,id:a,messages:i=[]}){const{isInputFocused:r,isReadonly:l}=E.useFormFieldContext(),{isFocused:c,popupProps:p}=j.usePopupFocusWithin(),d=!0===r||!0===c,{baseTheme:m}=t.useComponentTheme(b.UserAssistanceRedwoodTheme);return!0!==l&&(i.length>0||o)?s.jsx(N.Popup,{...p,placement:"end-top-corner",isOpen:d,anchorRef:e,flipOptions:{mainAxis:!0,crossAxis:!1},tail:"simple",maxWidth:"296px",children:s.jsxs("div",{id:a,class:m,children:[i.length>0&&s.jsx(B.ComponentMessageContainer,{fieldLabel:n,messages:i}),i.length>0&&o&&s.jsx("span",{class:v.dividerStyle,children:s.jsx(_.Separator,{})}),o&&s.jsx("span",{class:v.assistiveStyles,children:o})]})}):null}}));
+//# sourceMappingURL=CompactUserAssistance-3799998f.js.map

package/amd/CompactUserAssistance-3799998f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactUserAssistance-3799998f.js","sources":["../../src/UNSAFE_UserAssistance/CompactUserAssistance.tsx"],"sourcesContent":["import { RefObject } from 'preact/compat';\n\nimport { ComponentMessageContainer, ComponentMessageItem } from '../UNSAFE_ComponentMessage';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { Popup } from '../UNSAFE_Popup';\nimport { Coords } from '../UNSAFE_Floating';\nimport { Separator } from '../UNSAFE_Separator';\nimport { usePopupFocusWithin } from './usePopupFocusWithin';\nimport { assistiveStyles, dividerStyle } from './themes/UserAssistanceStyles.css';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { UserAssistanceRedwoodTheme } from './themes/redwood/UserAssistanceTheme';\n\ntype Props = {\n  anchorRef: RefObject<HTMLElement | Coords>;\n  assistiveText?: string;\n  fieldLabel?: string;\n  id?: string;\n  messages?: ComponentMessageItem[];\n};\n\nexport function CompactUserAssistance({\n  anchorRef,\n  assistiveText,\n  fieldLabel,\n  id,\n  messages = []\n}: Props) {\n  const { isInputFocused, isReadonly } = useFormFieldContext();\n  const flip = { mainAxis: true, crossAxis: false };\n  const { isFocused: isPopupFocused, popupProps } = usePopupFocusWithin();\n  const isOpen = isInputFocused === true || isPopupFocused === true;\n\n  const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);\n\n  const uaCompactContent =\n    isReadonly !== true && (messages.length > 0 || assistiveText) ? (\n      <Popup\n        {...popupProps}\n        placement=\"end-top-corner\"\n        isOpen={isOpen}\n        anchorRef={anchorRef}\n        flipOptions={flip}\n        tail=\"simple\"\n        maxWidth={'296px'}>\n        <div id={id} class={baseTheme}>\n          {messages.length > 0 && (\n            <ComponentMessageContainer fieldLabel={fieldLabel} messages={messages} />\n          )}\n          {messages.length > 0 && assistiveText && (\n            <span class={dividerStyle}>\n              <Separator />\n            </span>\n          )}\n          {assistiveText && <span class={assistiveStyles}>{assistiveText}</span>}\n        </div>\n      </Popup>\n    ) : null;\n\n  return uaCompactContent;\n}\n"],"names":["anchorRef","assistiveText","fieldLabel","id","messages","isInputFocused","isReadonly","useFormFieldContext","isFocused","isPopupFocused","popupProps","usePopupFocusWithin","isOpen","baseTheme","useComponentTheme","UserAssistanceRedwoodTheme","length","_jsx","jsx","Popup","placement","flipOptions","mainAxis","crossAxis","tail","maxWidth","children","_jsxs","jsxs","class","ComponentMessageContainer","dividerStyle","Separator","assistiveStyles"],"mappings":"u1CAoBgB,UAAsBA,UACpCA,EAASC,cACTA,EAAaC,WACbA,EAAUC,GACVA,EAAEC,SACFA,EAAW,KAEX,MAAMC,eAAEA,EAAcC,WAAEA,GAAeC,EAAmBA,uBAElDC,UAAWC,EAAcC,WAAEA,GAAeC,EAAmBA,sBAC/DC,GAA4B,IAAnBP,IAA8C,IAAnBI,GAEpCI,UAAEA,GAAcC,EAAiBA,kBAACC,EAA0BA,4BA0BlE,OAvBiB,IAAfT,IAAwBF,EAASY,OAAS,GAAKf,GAC7CgB,EAACC,IAAAC,EAAKA,MACA,IAAAT,EACJU,UAAU,iBACVR,OAAQA,EACRZ,UAAWA,EACXqB,YAbO,CAAEC,UAAU,EAAMC,WAAW,GAcpCC,KAAK,SACLC,SAAU,QAAOC,SACjBC,EAAKC,KAAA,MAAA,CAAAzB,GAAIA,EAAI0B,MAAOhB,YACjBT,EAASY,OAAS,GACjBC,EAACC,IAAAY,EAAyBA,0BAAC,CAAA5B,WAAYA,EAAYE,SAAUA,IAE9DA,EAASY,OAAS,GAAKf,GACtBgB,EAAAA,IAAM,OAAA,CAAAY,MAAOE,eACXL,SAAAT,EAAAA,IAACe,EAAAA,UAAS,CAAA,KAGb/B,GAAiBgB,EAAAC,IAAA,OAAA,CAAMW,MAAOI,EAAeA,gBAAGP,SAAAzB,SAGnD,IAGR"}

package/amd/ComponentMessageContainer-cf186eeb.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', 'preact/hooks', './Flex-590160eb', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', './logger-0f873e29', 'preact', './useTestId-c286f212', './LayerHost-733ade2f', 'preact/compat', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-30886397', 'css!./IconStyle.styles.css', './IconButton-368fba34', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-2e19d8de', './MessagesManager-2c4c218f', './useComponentTheme-5aa41a8f', './classNames-08d99695', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', './HiddenAccessible-037ef42d', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageTheme', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme', './UNSAFE_ComponentMessage/themes/ComponentMessageStyles.css'], (function(e,s,t,a,o,n,i,r,d,c,l,m,g,p,y,h,u,M,f,T,v,C,S,A,x,I,U,b,N){"use strict";function B({detail:e,fieldLabel:t,severity:a="error",testId:o}){const{classes:n}=C.useComponentTheme(U.ComponentMessageRedwoodTheme,{severity:a??"none"}),{baseTheme:i}=C.useComponentTheme(b.UserAssistanceRedwoodTheme),r=S.classNames([n,i]),d=c.useTestId(o);return s.jsxs("div",{class:r,"aria-live":"assertive","aria-atomic":"true",...d,children:[t&&s.jsx(I.HiddenAccessible,{children:t}),v.isSeverityIconNeeded(a)&&s.jsx(v.MessageStartIcon,{severity:a,testId:o?`${o}-icon`:void 0,variant:"inline"}),s.jsx(v.MessageSummary,{testId:o?`${o}-summary`:void 0,text:e,variant:"inline"})]})}function F(e){return e.map(((e,s)=>({key:s,data:{closeAffordance:"off",severity:e.severity||"error",detail:e.detail}})))}e.ComponentMessage=B,e.ComponentMessageContainer=function({fieldLabel:e,messages:t=[],testId:a}){const o=c.useTestId(a);return s.jsx("div",{class:N.componentMessageContainerBase,...o,children:s.jsx(v.MessagesManager,{data:F(t),children:({item:t})=>s.jsx(B,{detail:t.data.detail,fieldLabel:e,severity:t.data.severity,testId:a?`${a}-message-${t.key}`:void 0},t.key)})})}}));
+//# sourceMappingURL=ComponentMessageContainer-cf186eeb.js.map

package/amd/ComponentMessageContainer-cf186eeb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMessageContainer-cf186eeb.js","sources":["../../src/UNSAFE_ComponentMessage/ComponentMessage.tsx","../../src/UNSAFE_ComponentMessage/ComponentMessageContainer.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { isSeverityIconNeeded, MessageStartIcon, MessageSummary } from '../PRIVATE_Message';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { ComponentMessageVariantOptions } from './themes/ComponentMessageStyles.css';\nimport { ComponentMessageRedwoodTheme } from './themes/redwood/ComponentMessageTheme';\nimport { classNames } from '#utils/UNSAFE_classNames';\nimport { type TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\nimport { UserAssistanceRedwoodTheme } from '#UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme';\n/**\n * A type for a single component message\n */\nexport type ComponentMessageItem = {\n  summary?: string;\n  detail?: string;\n  severity?: 'confirmation' | 'error' | 'info' | 'warning';\n};\n\n/**\n * Props for the Message Component\n */\ntype Props = TestIdProps & {\n  /**\n   * The error detail text for the component message\n   */\n  detail?: ComponentMessageItem['detail'];\n\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * The severity of the component message\n   */\n  severity?: ComponentMessageItem['severity'];\n};\n\n/**\n * The component that renders an individual message for inline component messaging.\n */\nexport function ComponentMessage({ detail, fieldLabel, severity = 'error', testId }: Props) {\n  const { classes } = useComponentTheme<ComponentMessageVariantOptions>(\n    ComponentMessageRedwoodTheme,\n    {\n      severity: severity ?? 'none'\n    }\n  );\n\n  const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);\n  const styleClasses = classNames([classes, baseTheme]);\n  const testIdProps = useTestId(testId);\n\n  return (\n    <div class={styleClasses} aria-live=\"assertive\" aria-atomic=\"true\" {...testIdProps}>\n      {fieldLabel && <HiddenAccessible>{fieldLabel}</HiddenAccessible>}\n      {isSeverityIconNeeded(severity) && (\n        <MessageStartIcon\n          severity={severity}\n          testId={testId ? `${testId}-icon` : undefined}\n          variant=\"inline\"\n        />\n      )}\n      {/* We will be using the MessageSummary component, as this aligns with the style required */}\n      <MessageSummary\n        testId={testId ? `${testId}-summary` : undefined}\n        text={detail}\n        variant=\"inline\"\n      />\n    </div>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { MessagesManager } from '../PRIVATE_Message';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { ComponentMessage, ComponentMessageItem } from './ComponentMessage';\nimport { componentMessageContainerBase } from './themes/ComponentMessageStyles.css';\nimport { type TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\n\n/**\n * Converts the messages data into Item\n *\n * @param messages The messages data passed down as prop\n * @returns The messages data as Item\n */\nfunction generateMessagesData(messages: ComponentMessageItem[]) {\n  return messages.map<Item<number, ComponentMessageItem>>((message, index) => {\n    return {\n      key: index,\n      data: {\n        closeAffordance: 'off',\n        severity: message.severity || 'error',\n        detail: message.detail\n      }\n    };\n  });\n}\n\n/**\n * Props for the ComponentMessaging component\n */\ntype Props = TestIdProps & {\n  /**\n   * The label of the field which is showing this error\n   */\n  fieldLabel?: string;\n\n  /**\n   * Data for the messages. This data is used for rendering each message.\n   */\n  messages?: ComponentMessageItem[];\n};\n\nexport function ComponentMessageContainer({ fieldLabel, messages = [], testId }: Props) {\n  const testIdProps = useTestId(testId);\n  return (\n    <div class={componentMessageContainerBase} {...testIdProps}>\n      <MessagesManager data={generateMessagesData(messages)}>\n        {({ item }) => (\n          <ComponentMessage\n            key={item.key}\n            detail={item.data.detail}\n            fieldLabel={fieldLabel}\n            severity={item.data.severity}\n            testId={testId ? `${testId}-message-${item.key}` : undefined}\n          />\n        )}\n      </MessagesManager>\n    </div>\n  );\n}\n"],"names":["ComponentMessage","detail","fieldLabel","severity","testId","classes","useComponentTheme","ComponentMessageRedwoodTheme","baseTheme","UserAssistanceRedwoodTheme","styleClasses","classNames","testIdProps","useTestId","_jsxs","class","children","_jsx","HiddenAccessible","isSeverityIconNeeded","MessageStartIcon","undefined","variant","MessageSummary","text","generateMessagesData","messages","map","message","index","key","data","closeAffordance","jsx","componentMessageContainerBase","MessagesManager","item"],"mappings":"ilCAgDgB,SAAAA,GAAiBC,OAAEA,EAAMC,WAAEA,EAAUC,SAAEA,EAAW,QAAOC,OAAEA,IACzE,MAAMC,QAAEA,GAAYC,EAAiBA,kBACnCC,+BACA,CACEJ,SAAUA,GAAY,UAIpBK,UAAEA,GAAcF,EAAiBA,kBAACG,EAA0BA,4BAC5DC,EAAeC,EAAUA,WAAC,CAACN,EAASG,IACpCI,EAAcC,YAAUT,GAE9B,OACEU,OAAK,MAAA,CAAAC,MAAOL,cAAwB,YAAW,cAAa,UAAWE,EACpEI,SAAA,CAAAd,GAAce,EAAAA,IAACC,EAAgBA,2BAAEhB,IACjCiB,uBAAqBhB,IACpBc,EAAAA,IAACG,EAAgBA,iBAAA,CACfjB,SAAUA,EACVC,OAAQA,EAAS,GAAGA,cAAgBiB,EACpCC,QAAQ,WAIZL,EAAAA,IAACM,EAAAA,gBACCnB,OAAQA,EAAS,GAAGA,iBAAmBiB,EACvCG,KAAMvB,EACNqB,QAAQ,aAIhB,CC1DA,SAASG,EAAqBC,GAC5B,OAAOA,EAASC,KAAwC,CAACC,EAASC,KACzD,CACLC,IAAKD,EACLE,KAAM,CACJC,gBAAiB,MACjB7B,SAAUyB,EAAQzB,UAAY,QAC9BF,OAAQ2B,EAAQ3B,WAIxB,kDAiBM,UAAoCC,WAAEA,EAAUwB,SAAEA,EAAW,GAAEtB,OAAEA,IACrE,MAAMQ,EAAcC,YAAUT,GAC9B,OACEa,EAAAgB,IAAA,MAAA,CAAKlB,MAAOmB,EAAAA,iCAAmCtB,EAC7CI,SAAAC,EAAAgB,IAACE,kBAAgB,CAAAJ,KAAMN,EAAqBC,GACzCV,SAAA,EAAGoB,UACFnB,MAACjB,EAAgB,CAEfC,OAAQmC,EAAKL,KAAK9B,OAClBC,WAAYA,EACZC,SAAUiC,EAAKL,KAAK5B,SACpBC,OAAQA,EAAS,GAAGA,aAAkBgC,EAAKN,WAAQT,GAJ9Ce,EAAKN,QAUtB"}

package/amd/ConveyorBeltItem-e3002f4a.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', 'preact/hooks', './BaseButton-c86afd54', './ButtonLabelLayout-ce54dfdc', './ChevronRight-a81a35fd', './ChevronUp-833277c0', './ChevronDown-502b16f2', './classNames-08d99695', './UNSAFE_ConveyorBelt/themes/ConveyorBeltStyles.css', './useUser-797287de', './clientHints-fff66be9', './ConveyorBeltContext-d8653090', './useTestId-c286f212', 'preact/compat', './useComponentTheme-5aa41a8f', './UNSAFE_ConveyorBelt/themes/redwood/ConveyorBeltTheme', './useConveyorBeltItem-ce9e4c40'], (function(e,t,r,o,n,s,i,c,l,u,f,h,a,d,m,v,g,C){"use strict";function b(){return"phone"===h.getClientHints().deviceType}function p(e){return"fixed"===getComputedStyle(e).position?null:e.offsetParent}function x(e,t){let r=p(e),o=e.offsetLeft;for(;r&&r!==t&&r!==document.body;)o+=r.offsetLeft,r=p(r);return o}function y(e,t){let r=p(e),o=e.offsetTop;for(;r!==t;)null!=r&&(o+=r.offsetTop,r=p(r));return o}const W=m.forwardRef((({children:e,scrollPosition:h,onScrollPositionChanged:C,arrowVisibility:p="auto",orientation:W="horizontal",testId:T},B=null)=>{const[H,R]=r.useState(!1),[I,j]=r.useState(!1),w=r.useRef(null),E=r.useRef(null),S=r.useRef(null),L=r.useRef(null),N=r.useRef(null),z=r.useRef(null),k=r.useRef(null),A=r.useRef(null),V=r.useRef(null),[U,$]=r.useState(b()&&"auto"===p||"hidden"===p),{direction:F}=f.useUser(),{itemElementsRef:P,addItem:D}=((e,t,o,n,s)=>{const i=r.useRef(),c=r.useRef([]),[l]=r.useState([]),u=r.useCallback((e=>{null!==c.current&&(c.current.push(e),l.push(e))}),[l]);r.useEffect((()=>{if(l&&l.length>0&&e){const r="horizontal"===t?"ltr"===s?`0px ${n?-n.offsetWidth:0}px 0px ${o?-o.offsetWidth:0}px`:`0px ${o?-o.offsetWidth:0}px 0px ${n?-n.offsetWidth:0}px`:`${n?-n.offsetHeight:0}px 0px ${o?-o.offsetHeight:0}px 0px`;i.current=new IntersectionObserver(f,{root:e,rootMargin:r,threshold:1});for(const e of l)null!=e&&i.current.observe(e.element)}return()=>{for(const e of l)i.current&&null!=e&&i.current.unobserve(e.element)}}),[l,l.length,e,n,o,s,t]);const f=e=>{const t=c.current.map(((t,r)=>{const o=e.find((e=>e.target===t.element));return o?{element:o.target,isVisible:o.isIntersecting,isCurrent:t.isCurrent,index:r}:t}));c.current=t};return r.useMemo((()=>({itemElementsRef:c,addItem:u})),[c,u])})(w.current,W,L.current,S.current,F);m.useImperativeHandle(B,(()=>({scrollElementIntoView:e=>{Y(e)},scrollPrevious:()=>{te()},scrollNext:()=>{re()}})));const q=d.useTestId(T),M="leftArrow"+T,O="rightArrow"+T,{variantClasses:_}=v.useComponentTheme(g.ConveyorBeltRedwoodTheme,{orientation:W}),{variantClasses:G}=v.useComponentTheme(g.ConveyorBeltRedwoodTheme,{content:W}),{variantClasses:J}=v.useComponentTheme(g.ConveyorBeltRedwoodTheme,{pagination:H&&I?"both":H?"next":I?"previous":"none",direction:F,orientation:W,overflow:W,arrowVisibility:!0===U?"hidden":"visible"}),{classes:K}=v.useComponentTheme(g.ConveyorBeltRedwoodTheme,{nextButton:W,direction:F}),{classes:Q}=v.useComponentTheme(g.ConveyorBeltRedwoodTheme,{previousButton:W,direction:F});r.useEffect((()=>{(()=>{const e=E.current?Array.from(E.current.querySelectorAll("[data-oj-conveyorbelt-item]")):[];if(e){let t=-1;for(const r of e){t++;const e=r;e&&null==P.current.find((t=>t.element===e))&&D({element:e,isVisible:!1,index:t,isCurrent:!1})}}})()}));const X=r.useCallback((()=>{C&&C(w.current?.scrollLeft)}),[C]);r.useEffect((()=>{$(b()&&"auto"===p||"hidden"===p)}),[p]),r.useEffect((()=>{w.current&&w.current.scrollTo({left:h})}),[h]),r.useEffect((()=>{const e=w.current,t=z.current,r=k.current;return e&&t&&r&&(U||(A.current=new IntersectionObserver((e=>{e.forEach((e=>{"left"===e.target.getAttribute("data-intersection-id")?j(!e.isIntersecting):R(!e.isIntersecting)}))}),{root:e}),A.current.observe(t),A.current.observe(r)),e.addEventListener("scrollend",X)),()=>{e&&(e.removeEventListener("scrollend",X),A.current?.unobserve(t),A.current?.unobserve(r))}}),[U,X]);const Y=r.useCallback((e=>{const t=((e,t,r)=>{if(!t||!r)return!1;let o,n,s,i;if(r===document.documentElement)o=0,n=document.documentElement.clientWidth,s=0,i=document.documentElement.clientHeight;else{const e=r.getBoundingClientRect();o=I?e.left+L.current?.offsetWidth:e.left,n=H?e.right-S.current?.offsetWidth:e.right,s=I?e.top+L.current?.offsetHeight:e.top,i=H?e.bottom-S.current?.offsetHeight:e.bottom}const c=t.getBoundingClientRect();return"horizontal"===e?c.left<=n&&c.right<=n&&c.left>=o&&c.right>=o:c.top<=i&&c.bottom<=i&&c.top>=s&&c.bottom>=s})(W,e,w.current);if(t)return;const r=((e,t,r)=>{if(!t||!r)return!1;const o=t.getBoundingClientRect(),n=r.getBoundingClientRect();let s=n.width,i=n.height;return"horizontal"===e?(s=I&&L.current?s-L.current.offsetWidth:s,s=H&&S.current?s-S.current.offsetWidth:s):(i=I&&L.current?i-L.current.offsetHeight:i,i=H&&S.current?i-S.current.offsetHeight:i),"horizontal"===e?o.width>s:o.height>i})(W,e,w.current);if(!w.current||!E.current)return;const o=((e,t,r,o)=>{if(!r||!o)return!1;let n,s,i;if(o===document.documentElement)s=0,n=document.documentElement.clientWidth,i=document.documentElement.clientHeight;else{const e=o.getBoundingClientRect();n=H?e.right-S.current?.offsetWidth:e.right,s=H?e.left-S.current?.offsetWidth:e.left,i=H?e.bottom-S.current?.offsetHeight:e.bottom}const c=r.getBoundingClientRect();return"horizontal"===t?e?c.right>n:c.left<s:c.bottom>i})("ltr"===F,W,e,w.current);"vertical"!==W?"ltr"===F?o&&!r?w.current.scrollTo({left:x(e,E.current)+e.offsetWidth-w.current.offsetWidth+(S.current?.offsetWidth?S.current?.offsetWidth+1:0),behavior:"smooth"}):w.current.scrollTo({left:x(e,E.current)-(L.current?.offsetWidth?L.current?.offsetWidth+1:0),behavior:"smooth"}):o&&!r?w.current.scrollTo({left:x(e,E.current)-E.current.offsetWidth+w.current.offsetWidth-(S.current?.offsetWidth?S.current?.offsetWidth+1:0),behavior:"smooth"}):w.current.scrollTo({left:x(e,E.current)+e.offsetWidth-E.current.offsetWidth+(L.current?.offsetWidth?L.current?.offsetWidth+1:0),behavior:"smooth"}):o&&!r?w.current.scrollTo({top:y(e,E.current)+e.offsetHeight-w.current.offsetHeight+(S.current?.offsetHeight?S.current?.offsetHeight+1:0),behavior:"smooth"}):w.current.scrollTo({top:y(e,E.current)-(L.current?.offsetHeight?L.current?.offsetHeight+1:0),behavior:"smooth"})}),[H,I,F,W]),Z=r.useCallback((()=>{const e=P.current.find((e=>0==e.isVisible&&e.index>=1&&1==P.current[e.index-1].isVisible));return e?.element}),[P]),ee=r.useCallback((()=>{const e=P.current.find((e=>0==e.isVisible&&e.index<P.current.length-1&&1==P.current[e.index+1].isVisible));return e?.element}),[P]),te=r.useCallback((()=>{const e=w.current,t="horizontal"===W?w.current?.clientWidth:w.current?.clientHeight;if(e&&t){const r=ee();if("vertical"===W)return void(r?e.scrollTo({top:y(r,E.current)+r.offsetHeight-e.offsetHeight+(L.current?.offsetHeight?L.current?.offsetHeight+1:0),behavior:"smooth"}):e.scrollTo({top:e.scrollTop-t,behavior:"smooth"}));"ltr"===F?r?e.scrollTo({left:x(r,E.current)+r.offsetWidth-e.offsetWidth+(L.current?.offsetWidth?L.current?.offsetWidth+1:0),behavior:"smooth"}):e.scrollTo({left:e.scrollLeft-t,behavior:"smooth"}):r?e.scrollTo({left:x(r,E.current)-E.current?.offsetWidth+e.offsetWidth-(L.current?.offsetWidth?L.current?.offsetWidth+1:0),behavior:"smooth"}):e.scrollTo({left:e.scrollLeft+t,behavior:"smooth"})}}),[F,W,ee]),re=r.useCallback((()=>{const e=w.current,t="horizontal"===W?w.current?.clientWidth:w.current?.clientHeight;if(e&&t){const r=Z();if("vertical"===W)return void(r?e.scrollTo({top:y(r,E.current)-(S.current?.offsetHeight?S.current?.offsetHeight+1:0),behavior:"smooth"}):e.scrollTo({top:e.scrollTop+t,behavior:"smooth"}));"ltr"===F?r?e.scrollTo({left:(x(r,E.current)??0)-(S.current?.offsetWidth?S.current?.offsetWidth+1:0),behavior:"smooth"}):e.scrollTo({left:e.scrollLeft+t,behavior:"smooth"}):r?e.scrollTo({left:-(E.current?.offsetWidth-(x(r,E.current)??0))+(r?.offsetWidth??0)+(S.current?.offsetWidth?S.current?.offsetWidth+1:0),behavior:"smooth"}):e.scrollTo({left:e.scrollLeft-t,behavior:"smooth"})}}),[F,W,Z]),oe=r.useCallback((e=>{if(V.current!==e){const t=P.current.find((t=>t.element===e)),r=P.current.find((e=>!0===e.isCurrent));if(t===r||!t)return;r&&(r.isCurrent=!1),t.isCurrent=!0,V.current=e,e&&Y(e)}}),[P,Y]),ne=r.useCallback((e=>{if(!N.current?.isEqualNode(e.target))if(P.current.length>0){const t=P.current.find((t=>t.element.contains(e.target)));t&&Y(t.element)}else Y(e.target)}),[Y,P]),se=l.classNames([u.styles.buttonContainer,Q]),ie=l.classNames([u.styles.buttonContainer,K]);return t.jsx(a.ConveyorBeltContext.Provider,{value:{setCurrentItem:oe},children:t.jsxs("div",{onFocus:ne,ref:N,className:l.classNames([u.styles.conveyorStyle,_]),...q,children:[I&&!U&&t.jsx("div",{ref:L,class:se,children:t.jsx(o.BaseButton,{elementDetails:{type:"span",isFocusable:!1},styling:["min"],size:"sm",variant:"ghost",onAction:()=>te(),"aria-hidden":!0,testId:M,children:t.jsx(n.ButtonLabelLayout,{size:"sm",display:"icons",startIcon:"horizontal"===W?"ltr"===F?t.jsx(s.SvgChevronLeft,{}):t.jsx(s.SvgChevronRight,{}):t.jsx(i.SvgChevronUp,{})})})}),t.jsx("div",{className:l.classNames([u.styles.overflowContainer,J]),ref:w,tabIndex:-1,children:t.jsxs("div",{className:l.classNames([u.styles.contentContainer,_,G]),ref:E,children:[t.jsx("div",{"data-intersection-id":"left",ref:z,style:{minWidth:1,minHeight:1}}),e,t.jsx("div",{"data-intersection-id":"right",ref:k,style:{minWidth:1,minHeight:1}})]})}),H&&!U&&t.jsx("div",{ref:S,class:ie,children:t.jsx(o.BaseButton,{elementDetails:{type:"span",isFocusable:!1},styling:["min"],size:"sm",variant:"ghost",onAction:()=>re(),"aria-hidden":!0,testId:O,children:t.jsx(n.ButtonLabelLayout,{size:"sm",display:"icons",startIcon:"horizontal"===W?"ltr"===F?t.jsx(s.SvgChevronRight,{}):t.jsx(s.SvgChevronLeft,{}):t.jsx(c.SvgChevronDown,{})})})})]})})}));e.ConveyorBelt=W,e.ConveyorBeltItem=({children:e,isCurrent:r})=>{const o=C.useConveyorBeltItem({isCurrent:r});return t.jsx("div",{className:l.classNames([u.styles.conveyorBeltItemStyle]),...o,children:e})}}));
+//# sourceMappingURL=ConveyorBeltItem-e3002f4a.js.map

package/amd/ConveyorBeltItem-e3002f4a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConveyorBeltItem-e3002f4a.js","sources":["../../src/UNSAFE_ConveyorBelt/ConveyorBelt.tsx","../../src/UNSAFE_ConveyorBelt/ConveyorBeltItem.tsx"],"sourcesContent":["import { ComponentChildren, Ref } from 'preact';\nimport { useEffect, useRef, useState, useCallback, useMemo } from 'preact/hooks';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLabelLayout } from '../UNSAFE_ButtonLabelLayout';\nimport { ChevronLeft } from '../UNSAFE_RedwoodIcons/ChevronLeft';\nimport { ChevronRight } from '../UNSAFE_RedwoodIcons/ChevronRight';\nimport { ChevronUp } from '../UNSAFE_RedwoodIcons/ChevronUp';\nimport { ChevronDown } from '../UNSAFE_RedwoodIcons/ChevronDown';\nimport { classNames as clsx } from '../utils/UNSAFE_classNames';\nimport { styles } from './themes/ConveyorBeltStyles.css';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { ConveyorBeltContext } from './ConveyorBeltContext';\nimport { TestIdProps, useTestId } from '../hooks/UNSAFE_useTestId';\nimport { forwardRef, useImperativeHandle } from 'preact/compat';\nimport { ConveyorBeltVariantOptions } from './themes/ConveyorBeltStyles.css';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { ConveyorBeltRedwoodTheme } from './themes/redwood/ConveyorBeltTheme';\n\nexport type ConveyorBeltProps = TestIdProps & {\n  /**\n   * ConveyorBelt Component content\n   */\n  children?: ComponentChildren;\n  /**\n   * Sets the number of pixels that an element's content is scrolled from its initial position.\n   */\n  scrollPosition?: number;\n  /**\n   * Callback that is executed every time conveyor belt is scrolled and the scroll position is changed.\n   * @param value The value is the new scroll position of the conveyor belt.\n   * @returns\n   */\n  onScrollPositionChanged?: (value?: number) => void;\n  /**\n   * Indicates whether overflow content arrows are visible or hidden.\n   * \"auto\" show overflow arrows on desktop, hide on mobile.\n   * \"visible\" always show overflow arrows.\n   * \"hidden\" never show overflow arrows.\n   */\n  arrowVisibility?: 'auto' | 'visible' | 'hidden';\n\n  /**\n   * Specify the orientation of the conveyorBelt.\n   * \"horizontal\" Orient the conveyorBelt horizontally.\n   * \"vertical\" Orient the conveyorBelt vertically.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * Helper function to determine whether the current device is a mobile device\n * @returns true if runnning on a mobile device, false otherwise\n */\nfunction isMobile() {\n  const deviceType = getClientHints().deviceType;\n  return deviceType === 'phone';\n}\n\nfunction getOffsetParent(element: HTMLElement) {\n  if (getComputedStyle(element).position === 'fixed') {\n    return null;\n  }\n\n  return element.offsetParent as HTMLElement;\n}\n\nfunction getOffsetLeft(element: HTMLElement, contentContainer?: HTMLElement | null) {\n  let offsetParent = getOffsetParent(element);\n  let offsetLeft = element.offsetLeft;\n\n  while (offsetParent && offsetParent !== contentContainer && offsetParent !== document.body) {\n    offsetLeft = offsetLeft + offsetParent.offsetLeft;\n    offsetParent = getOffsetParent(offsetParent);\n  }\n  return offsetLeft;\n}\n\nfunction getOffsetTop(element: HTMLElement, contentContainer?: HTMLElement | null) {\n  let offsetParent = getOffsetParent(element);\n  let offsetTop = element.offsetTop;\n\n  while (offsetParent !== contentContainer) {\n    if (offsetParent != null) {\n      offsetTop = offsetTop + offsetParent.offsetTop;\n      offsetParent = getOffsetParent(offsetParent);\n    }\n  }\n  return offsetTop;\n}\n\ntype ConveyorItemElement = {\n  element: HTMLElement;\n  isVisible: boolean;\n  isCurrent: boolean;\n  index: number;\n};\n\n// utility hook that calculates which conveyorbelt items are visible inside conveyorbelt viewport\n// and which are hidden\nconst useConveyorElementsVisible = (\n  root: HTMLDivElement,\n  orientation: 'horizontal' | 'vertical',\n  prevBtn?: HTMLDivElement,\n  nextBtn?: HTMLDivElement,\n  direction?: 'ltr' | 'rtl'\n) => {\n  const observerRef = useRef<IntersectionObserver>();\n  const targetsRef = useRef<ConveyorItemElement[]>([]);\n  const [targets] = useState<ConveyorItemElement[]>([]);\n  const addTarget = useCallback(\n    (target: ConveyorItemElement) => {\n      if (targetsRef.current !== null) {\n        targetsRef.current.push(target);\n        targets.push(target);\n      }\n    },\n    [targets]\n  );\n\n  useEffect(() => {\n    if (targets && targets.length > 0 && root) {\n      // IntersectionObserver calls visibility change only when item is\n      // fully visible inside (threshold: 1)\n      // conveyorbelt viewport (root),\n      // taking arrow buttons into the account\n      // and viewport should be smaller by the buttons width (rootMargin)\n      const rootMargin =\n        orientation === 'horizontal'\n          ? direction === 'ltr'\n            ? `0px ${nextBtn ? -nextBtn.offsetWidth : 0}px 0px ${\n                prevBtn ? -prevBtn.offsetWidth : 0\n              }px`\n            : `0px ${prevBtn ? -prevBtn.offsetWidth : 0}px 0px ${\n                nextBtn ? -nextBtn.offsetWidth : 0\n              }px`\n          : `${nextBtn ? -nextBtn.offsetHeight : 0}px 0px ${\n              prevBtn ? -prevBtn.offsetHeight : 0\n            }px 0px`;\n\n      observerRef.current = new IntersectionObserver(onVisibilityChange, {\n        root,\n        rootMargin: rootMargin,\n        threshold: 1\n      });\n      for (const target of targets) {\n        if (target != null) observerRef.current.observe(target.element);\n      }\n    }\n    return () => {\n      for (const target of targets) {\n        if (observerRef.current && target != null) observerRef.current.unobserve(target.element);\n      }\n    };\n  }, [targets, targets.length, root, nextBtn, prevBtn, direction, orientation]);\n\n  // handle visibility changes\n  const onVisibilityChange = (entries: IntersectionObserverEntry[]) => {\n    const newItems: ConveyorItemElement[] = targetsRef.current.map((conveyorItem, index) => {\n      const foundEntry = entries.find((entry) => entry.target === conveyorItem.element);\n      // if visibility changed for the item, change isVisible property,\n      // otherwise just return the original\n      if (foundEntry) {\n        return {\n          element: foundEntry.target as HTMLDivElement,\n          isVisible: foundEntry.isIntersecting,\n          isCurrent: conveyorItem.isCurrent,\n          index: index\n        };\n      } else {\n        return conveyorItem;\n      }\n    });\n    targetsRef.current = newItems;\n  };\n\n  return useMemo(\n    () => ({\n      itemElementsRef: targetsRef,\n      addItem: addTarget\n    }),\n    [targetsRef, addTarget]\n  );\n};\n\nexport type ScrollableHandle = {\n  scrollElementIntoView: (element: HTMLElement) => void;\n};\n\n/**\n * The Conveyor belt component is a container element that manages\n * overflow for its child elements and allows scrolling among them\n */\nexport const ConveyorBelt = forwardRef(\n  (\n    {\n      children,\n      scrollPosition,\n      onScrollPositionChanged,\n      arrowVisibility = 'auto',\n      orientation = 'horizontal',\n      testId\n    }: ConveyorBeltProps,\n    ref: Ref<ScrollableHandle> = null\n  ) => {\n    const [canPaginateNext, setCanPaginateNext] = useState(false);\n    const [canPaginatePrevious, setCanPaginatePrevious] = useState(false);\n    const overflowContainerRef = useRef<HTMLDivElement | null>(null);\n    const contentContainerRef = useRef<HTMLDivElement | null>(null);\n    const nextButtonContainerRef = useRef<HTMLDivElement | null>(null);\n    const prevButtonContainerRef = useRef<HTMLDivElement | null>(null);\n    const baseRef = useRef<HTMLDivElement | null>(null);\n    const leftRef = useRef<HTMLDivElement | null>(null);\n    const rightRef = useRef<HTMLDivElement | null>(null);\n    const observerRef = useRef<any>(null);\n    const currentItemRef = useRef<HTMLElement | null>(null);\n    const [buttonsHidden, setButtonsHidden] = useState(\n      (isMobile() && arrowVisibility === 'auto') || arrowVisibility === 'hidden'\n    );\n    const { direction } = useUser();\n    const { itemElementsRef, addItem } = useConveyorElementsVisible(\n      overflowContainerRef.current!,\n      orientation,\n      prevButtonContainerRef.current!,\n      nextButtonContainerRef.current!,\n      direction\n    );\n\n    useImperativeHandle(ref, () => ({\n      scrollElementIntoView: (element: HTMLElement) => {\n        scrollIntoView(element);\n      },\n      scrollPrevious: () => {\n        scrollToPreviousPage();\n      },\n      scrollNext: () => {\n        scrollToNextPage();\n      }\n    }));\n\n    const testIdProps = useTestId(testId);\n    const leftArrowTestIdProps = 'leftArrow' + testId;\n    const rightArrowTestIdProps = 'rightArrow' + testId;\n\n    const { variantClasses } = useComponentTheme<ConveyorBeltVariantOptions>(\n      ConveyorBeltRedwoodTheme,\n      {\n        orientation\n      }\n    );\n\n    const { variantClasses: contentClasses } = useComponentTheme<ConveyorBeltVariantOptions>(\n      ConveyorBeltRedwoodTheme,\n      {\n        content: orientation\n      }\n    );\n\n    const { variantClasses: overflowClasses } = useComponentTheme<ConveyorBeltVariantOptions>(\n      ConveyorBeltRedwoodTheme,\n      {\n        pagination:\n          canPaginateNext && canPaginatePrevious\n            ? 'both'\n            : canPaginateNext\n            ? 'next'\n            : canPaginatePrevious\n            ? 'previous'\n            : 'none',\n        direction,\n        orientation,\n        overflow: orientation,\n        arrowVisibility: buttonsHidden === true ? 'hidden' : 'visible'\n      }\n    );\n\n    const { classes: nextButtonClasses } = useComponentTheme<ConveyorBeltVariantOptions>(\n      ConveyorBeltRedwoodTheme,\n      {\n        nextButton: orientation,\n        direction\n      }\n    );\n\n    const { classes: previousButtonClasses } = useComponentTheme<ConveyorBeltVariantOptions>(\n      ConveyorBeltRedwoodTheme,\n      {\n        previousButton: orientation,\n        direction\n      }\n    );\n\n    // utility method to get all conveyorbelt items\n    const _getConveyorItems = () => {\n      const conveyorContentChildren = contentContainerRef.current\n        ? Array.from(contentContainerRef.current.querySelectorAll('[data-oj-conveyorbelt-item]'))\n        : [];\n      if (conveyorContentChildren) {\n        let index = -1;\n        for (const child of conveyorContentChildren) {\n          index++;\n          const element = child as HTMLElement;\n          if (element) {\n            const item = itemElementsRef.current.find((item) => item.element === element);\n            if (item == null) {\n              addItem({\n                element: element!,\n                isVisible: false,\n                index: index,\n                isCurrent: false\n              });\n            }\n          }\n        }\n      }\n    };\n\n    useEffect(() => {\n      _getConveyorItems();\n    });\n\n    const scrollEndHandler = useCallback(() => {\n      if (onScrollPositionChanged)\n        onScrollPositionChanged(overflowContainerRef.current?.scrollLeft);\n    }, [onScrollPositionChanged]);\n\n    useEffect(() => {\n      setButtonsHidden((isMobile() && arrowVisibility === 'auto') || arrowVisibility === 'hidden');\n    }, [arrowVisibility]);\n\n    useEffect(() => {\n      if (!overflowContainerRef.current) return;\n      overflowContainerRef.current.scrollTo({\n        left: scrollPosition\n      });\n    }, [scrollPosition]);\n\n    // useEffect hook that calculates when arrow buttons should become visible or hidden\n    // using IntersectionObserver\n    useEffect(() => {\n      const overflowContainer = overflowContainerRef.current;\n      const leftGuard = leftRef.current;\n      const rightGuard = rightRef.current;\n\n      if (overflowContainer && leftGuard && rightGuard) {\n        if (!buttonsHidden) {\n          observerRef.current = new IntersectionObserver(\n            (entries) => {\n              entries.forEach((entry) => {\n                if (entry.target.getAttribute('data-intersection-id') === 'left') {\n                  setCanPaginatePrevious(!entry.isIntersecting);\n                } else {\n                  setCanPaginateNext(!entry.isIntersecting);\n                }\n              });\n            },\n            {\n              root: overflowContainer\n            }\n          );\n          observerRef.current.observe(leftGuard);\n          observerRef.current.observe(rightGuard);\n        }\n        overflowContainer.addEventListener('scrollend', scrollEndHandler);\n      }\n\n      // Clean-up\n      return () => {\n        if (!overflowContainer) return;\n        overflowContainer.removeEventListener('scrollend', scrollEndHandler);\n        observerRef.current?.unobserve(leftGuard);\n        observerRef.current?.unobserve(rightGuard);\n      };\n    }, [buttonsHidden, scrollEndHandler]);\n\n    const scrollIntoView = useCallback(\n      (element: HTMLElement) => {\n        // utility method to check if the element is closer to the end edge of the conveyorbelt\n        const _shouldSnapToTheEndEdge = (\n          ltr: boolean,\n          orientation: 'horizontal' | 'vertical',\n          elem?: HTMLElement | null,\n          scroller?: HTMLDivElement | null\n        ) => {\n          if (!elem || !scroller) return false;\n          let right;\n          let left;\n          let bottom;\n\n          if (scroller === document.documentElement) {\n            left = 0;\n            right = document.documentElement.clientWidth;\n            bottom = document.documentElement.clientHeight;\n          } else {\n            const scrollerBounds = scroller.getBoundingClientRect();\n            right = canPaginateNext\n              ? scrollerBounds.right - nextButtonContainerRef.current?.offsetWidth!\n              : scrollerBounds.right;\n            left = canPaginateNext\n              ? scrollerBounds.left - nextButtonContainerRef.current?.offsetWidth!\n              : scrollerBounds.left;\n            bottom = canPaginateNext\n              ? scrollerBounds.bottom - nextButtonContainerRef.current?.offsetHeight!\n              : scrollerBounds.bottom;\n          }\n          const bounds = elem.getBoundingClientRect();\n          return orientation === 'horizontal'\n            ? ltr\n              ? bounds.right > right\n              : bounds.left < left\n            : bounds.bottom > bottom;\n        };\n\n        // utility method to check that an element is fully visible inside conveyorbelt\n        const _isElementInsideScrollerBounds = (\n          orientation: 'vertical' | 'horizontal',\n          elem?: HTMLElement | null,\n          scroller?: HTMLDivElement | null\n        ) => {\n          if (!elem || !scroller) return false;\n          let left;\n          let right;\n          let top;\n          let bottom;\n          if (scroller === document.documentElement) {\n            left = 0;\n            right = document.documentElement.clientWidth;\n            top = 0;\n            bottom = document.documentElement.clientHeight;\n          } else {\n            const scrollerBounds = scroller.getBoundingClientRect();\n            left = canPaginatePrevious\n              ? scrollerBounds.left + prevButtonContainerRef.current?.offsetWidth!\n              : scrollerBounds.left;\n            right = canPaginateNext\n              ? scrollerBounds.right - nextButtonContainerRef.current?.offsetWidth!\n              : scrollerBounds.right;\n            top = canPaginatePrevious\n              ? scrollerBounds.top + prevButtonContainerRef.current?.offsetHeight!\n              : scrollerBounds.top;\n            bottom = canPaginateNext\n              ? scrollerBounds.bottom - nextButtonContainerRef.current?.offsetHeight!\n              : scrollerBounds.bottom;\n          }\n          const bounds = elem.getBoundingClientRect();\n          return orientation === 'horizontal'\n            ? bounds.left <= right &&\n                bounds.right <= right &&\n                bounds.left >= left &&\n                bounds.right >= left\n            : bounds.top <= bottom &&\n                bounds.bottom <= bottom &&\n                bounds.top >= top &&\n                bounds.bottom >= top;\n        };\n\n        const _isElementOverflowingScrollerBounds = (\n          orientation: 'vertical' | 'horizontal',\n          elem?: HTMLElement | null,\n          scroller?: HTMLDivElement | null\n        ) => {\n          if (!elem || !scroller) return false;\n          const bounds = elem.getBoundingClientRect();\n          const scrollerBounds = scroller.getBoundingClientRect();\n          let width = scrollerBounds.width;\n          let height = scrollerBounds.height;\n          if (orientation === 'horizontal') {\n            width =\n              canPaginatePrevious && prevButtonContainerRef.current\n                ? width - prevButtonContainerRef.current.offsetWidth\n                : width;\n            width =\n              canPaginateNext && nextButtonContainerRef.current\n                ? width - nextButtonContainerRef.current.offsetWidth\n                : width;\n          } else {\n            height =\n              canPaginatePrevious && prevButtonContainerRef.current\n                ? height - prevButtonContainerRef.current.offsetHeight!\n                : height;\n            height =\n              canPaginateNext && nextButtonContainerRef.current\n                ? height - nextButtonContainerRef.current.offsetHeight!\n                : height;\n          }\n\n          return orientation === 'horizontal' ? bounds.width > width : bounds.height > height;\n        };\n\n        const isElementVisible = _isElementInsideScrollerBounds(\n          orientation,\n          element,\n          overflowContainerRef.current\n        );\n        if (isElementVisible) {\n          return;\n        }\n        const isElementOverflowing = _isElementOverflowingScrollerBounds(\n          orientation,\n          element,\n          overflowContainerRef.current\n        );\n\n        if (!overflowContainerRef.current || !contentContainerRef.current) return;\n        const shouldSnapEnd = _shouldSnapToTheEndEdge(\n          direction === 'ltr',\n          orientation,\n          element,\n          overflowContainerRef.current\n        );\n        if (orientation === 'vertical') {\n          if (shouldSnapEnd && !isElementOverflowing) {\n            overflowContainerRef.current.scrollTo({\n              top:\n                getOffsetTop(element, contentContainerRef.current) +\n                element.offsetHeight -\n                overflowContainerRef.current.offsetHeight +\n                (nextButtonContainerRef.current?.offsetHeight\n                  ? nextButtonContainerRef.current?.offsetHeight + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainerRef.current.scrollTo({\n              top:\n                getOffsetTop(element, contentContainerRef.current) -\n                (prevButtonContainerRef.current?.offsetHeight\n                  ? prevButtonContainerRef.current?.offsetHeight + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n          return;\n        }\n\n        if (direction === 'ltr') {\n          if (shouldSnapEnd && !isElementOverflowing) {\n            overflowContainerRef.current.scrollTo({\n              left:\n                getOffsetLeft(element, contentContainerRef.current) +\n                element.offsetWidth -\n                overflowContainerRef.current.offsetWidth +\n                (nextButtonContainerRef.current?.offsetWidth\n                  ? nextButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainerRef.current.scrollTo({\n              left:\n                getOffsetLeft(element, contentContainerRef.current) -\n                (prevButtonContainerRef.current?.offsetWidth\n                  ? prevButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n        } else {\n          if (shouldSnapEnd && !isElementOverflowing) {\n            overflowContainerRef.current.scrollTo({\n              left:\n                getOffsetLeft(element, contentContainerRef.current) -\n                contentContainerRef.current.offsetWidth +\n                overflowContainerRef.current.offsetWidth -\n                (nextButtonContainerRef.current?.offsetWidth\n                  ? nextButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainerRef.current.scrollTo({\n              left:\n                getOffsetLeft(element, contentContainerRef.current) +\n                element.offsetWidth -\n                contentContainerRef.current.offsetWidth +\n                (prevButtonContainerRef.current?.offsetWidth\n                  ? prevButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n        }\n      },\n      [canPaginateNext, canPaginatePrevious, direction, orientation]\n    );\n\n    const getNextInvisible = useCallback(() => {\n      const nextInvisible = itemElementsRef.current.find((item) => {\n        if (\n          item.isVisible == false &&\n          item.index >= 1 &&\n          itemElementsRef.current[item.index - 1].isVisible == true\n        ) {\n          return true;\n        }\n        return false;\n      });\n      return nextInvisible?.element;\n    }, [itemElementsRef]);\n\n    const getPreviousInvisible = useCallback(() => {\n      const previousInvisible = itemElementsRef.current.find((item) => {\n        if (\n          item.isVisible == false &&\n          item.index < itemElementsRef.current.length - 1 &&\n          itemElementsRef.current[item.index + 1].isVisible == true\n        ) {\n          return true;\n        }\n        return false;\n      });\n      return previousInvisible?.element;\n    }, [itemElementsRef]);\n\n    // paginates to the previous partially visible or hidden item in the conveyorbelt,\n    // so that it is the last visible of the conveyorbelt view port\n    const scrollToPreviousPage = useCallback(() => {\n      const overflowContainer = overflowContainerRef.current;\n      const scrollAmount =\n        orientation === 'horizontal'\n          ? overflowContainerRef.current?.clientWidth\n          : overflowContainerRef.current?.clientHeight;\n\n      if (overflowContainer && scrollAmount) {\n        const previousInvisible: HTMLElement | undefined = getPreviousInvisible();\n        if (orientation === 'vertical') {\n          if (!previousInvisible) {\n            overflowContainer.scrollTo({\n              top: overflowContainer.scrollTop - scrollAmount,\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainer.scrollTo({\n              top:\n                getOffsetTop(previousInvisible, contentContainerRef.current) +\n                previousInvisible.offsetHeight -\n                overflowContainer.offsetHeight +\n                (prevButtonContainerRef.current?.offsetHeight\n                  ? prevButtonContainerRef.current?.offsetHeight + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n          return;\n        }\n        if (direction === 'ltr') {\n          if (!previousInvisible) {\n            overflowContainer.scrollTo({\n              left: overflowContainer.scrollLeft - scrollAmount,\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainer.scrollTo({\n              left:\n                getOffsetLeft(previousInvisible, contentContainerRef.current) +\n                previousInvisible.offsetWidth -\n                overflowContainer.offsetWidth +\n                (prevButtonContainerRef.current?.offsetWidth\n                  ? prevButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n        } else {\n          if (!previousInvisible) {\n            overflowContainer.scrollTo({\n              left: overflowContainer.scrollLeft + scrollAmount,\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainer.scrollTo({\n              left:\n                getOffsetLeft(previousInvisible, contentContainerRef.current) -\n                contentContainerRef.current?.offsetWidth! +\n                overflowContainer.offsetWidth -\n                (prevButtonContainerRef.current?.offsetWidth\n                  ? prevButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n        }\n      }\n    }, [direction, orientation, getPreviousInvisible]);\n\n    // paginates to the next partially visible or hidden item in the conveyorbelt,\n    // so that it is the first at the start of the conveyorbelt view port\n    const scrollToNextPage = useCallback(() => {\n      const overflowContainer = overflowContainerRef.current;\n      const scrollAmount =\n        orientation === 'horizontal'\n          ? overflowContainerRef.current?.clientWidth\n          : overflowContainerRef.current?.clientHeight;\n\n      if (overflowContainer && scrollAmount) {\n        const nextInvisible: HTMLElement | undefined = getNextInvisible();\n        if (orientation === 'vertical') {\n          if (!nextInvisible) {\n            overflowContainer.scrollTo({\n              top: overflowContainer.scrollTop + scrollAmount,\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainer.scrollTo({\n              top:\n                getOffsetTop(nextInvisible, contentContainerRef.current) -\n                (nextButtonContainerRef.current?.offsetHeight\n                  ? nextButtonContainerRef.current?.offsetHeight + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n          return;\n        }\n        if (direction === 'ltr') {\n          if (!nextInvisible) {\n            overflowContainer.scrollTo({\n              left: overflowContainer.scrollLeft + scrollAmount,\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainer.scrollTo({\n              left:\n                (getOffsetLeft(nextInvisible, contentContainerRef.current) ?? 0) -\n                (nextButtonContainerRef.current?.offsetWidth\n                  ? nextButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n        } else {\n          if (!nextInvisible) {\n            overflowContainer.scrollTo({\n              left: overflowContainer.scrollLeft - scrollAmount,\n              behavior: 'smooth'\n            });\n          } else {\n            overflowContainer.scrollTo({\n              left:\n                -(\n                  contentContainerRef.current?.offsetWidth! -\n                  (getOffsetLeft(nextInvisible, contentContainerRef.current) ?? 0)\n                ) +\n                (nextInvisible?.offsetWidth ?? 0) +\n                (nextButtonContainerRef.current?.offsetWidth\n                  ? nextButtonContainerRef.current?.offsetWidth + 1\n                  : 0),\n              behavior: 'smooth'\n            });\n          }\n        }\n      }\n    }, [direction, orientation, getNextInvisible]);\n\n    const setCurrentItem = useCallback(\n      (node: HTMLElement | null) => {\n        if (currentItemRef.current !== node) {\n          // this logic below is needed to make sure only one item is current\n          const item = itemElementsRef.current.find((item) => item.element === node);\n          const currentItem = itemElementsRef.current.find((item) => item.isCurrent === true);\n          if (item === currentItem || !item) return;\n          if (currentItem) currentItem.isCurrent = false;\n          item.isCurrent = true;\n\n          currentItemRef.current = node;\n          if (node) scrollIntoView(node);\n        }\n      },\n      [itemElementsRef, scrollIntoView]\n    );\n\n    const onFocus = useCallback(\n      (event: FocusEvent) => {\n        if (baseRef.current?.isEqualNode(event.target as HTMLElement)) {\n          return;\n        }\n        if (itemElementsRef.current.length > 0) {\n          const item = itemElementsRef.current.find((item) => item.element.contains(event.target as Node));\n          if (item) {\n            scrollIntoView(item.element)\n          } \n        } else {\n          scrollIntoView(event.target as HTMLElement);\n        }\n      },\n      [scrollIntoView, itemElementsRef]\n    );\n\n    const previousButtonStyle = clsx([styles.buttonContainer, previousButtonClasses]);\n\n    const nextButtonStyle = clsx([styles.buttonContainer, nextButtonClasses]);\n\n    return (\n      <ConveyorBeltContext.Provider value={{ setCurrentItem }}>\n        <div\n          onFocus={onFocus}\n          ref={baseRef}\n          className={clsx([styles.conveyorStyle, variantClasses])}\n          {...testIdProps}>\n          {canPaginatePrevious && !buttonsHidden && (\n            <div ref={prevButtonContainerRef} class={previousButtonStyle}>\n              <BaseButton\n                elementDetails={{ type: 'span', isFocusable: false }}\n                styling={['min']}\n                size={'sm'}\n                variant={'ghost'}\n                onAction={() => scrollToPreviousPage()}\n                aria-hidden={true}\n                testId={leftArrowTestIdProps}>\n                <ButtonLabelLayout\n                  size={'sm'}\n                  display={'icons'}\n                  startIcon={\n                    orientation === 'horizontal' ? (\n                      direction === 'ltr' ? (\n                        <ChevronLeft />\n                      ) : (\n                        <ChevronRight />\n                      )\n                    ) : (\n                      <ChevronUp />\n                    )\n                  }></ButtonLabelLayout>\n              </BaseButton>\n            </div>\n          )}\n          <div\n            className={clsx([styles.overflowContainer, overflowClasses])}\n            ref={overflowContainerRef}\n            tabIndex={-1}>\n            <div\n              className={clsx([styles.contentContainer, variantClasses, contentClasses])}\n              ref={contentContainerRef}>\n              <div\n                data-intersection-id=\"left\"\n                ref={leftRef}\n                style={{ minWidth: 1, minHeight: 1 }}\n              />\n              {children}\n              <div\n                data-intersection-id=\"right\"\n                ref={rightRef}\n                style={{ minWidth: 1, minHeight: 1 }}\n              />\n            </div>\n          </div>\n          {canPaginateNext && !buttonsHidden && (\n            <div ref={nextButtonContainerRef} class={nextButtonStyle}>\n              <BaseButton\n                elementDetails={{ type: 'span', isFocusable: false }}\n                styling={['min']}\n                size={'sm'}\n                variant={'ghost'}\n                onAction={() => scrollToNextPage()}\n                aria-hidden={true}\n                testId={rightArrowTestIdProps}>\n                <ButtonLabelLayout\n                  size={'sm'}\n                  display={'icons'}\n                  startIcon={\n                    orientation === 'horizontal' ? (\n                      direction === 'ltr' ? (\n                        <ChevronRight />\n                      ) : (\n                        <ChevronLeft />\n                      )\n                    ) : (\n                      <ChevronDown />\n                    )\n                  }></ButtonLabelLayout>\n              </BaseButton>\n            </div>\n          )}\n        </div>\n      </ConveyorBeltContext.Provider>\n    );\n  }\n);\n","import { ComponentChildren } from 'preact';\nimport { useConveyorBeltItem } from './useConveyorBeltItem';\nimport { styles } from './themes/ConveyorBeltStyles.css';\nimport { classNames as clsx } from '../utils/UNSAFE_classNames';\n\ntype ConveyorBeltItemProps = {\n  /**\n   * The ConveyorBeltItem content\n   */\n  children?: ComponentChildren;\n  /**\n   * Specifies the current item which should be scrolled into view\n   */\n  isCurrent?: boolean;\n};\n/**\n * A wrapper component for one conveyor belt item/child element.\n * It takes care of correctly mark the child components as conveyor belt items.\n * @param param0 ConveyorBeltItemProps\n * @returns\n */\nexport const ConveyorBeltItem = ({ children, isCurrent }: ConveyorBeltItemProps) => {\n  const props = useConveyorBeltItem({\n    isCurrent: isCurrent\n  });\n  return (\n    <div className={clsx([styles.conveyorBeltItemStyle])} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["isMobile","getClientHints","deviceType","getOffsetParent","element","getComputedStyle","position","offsetParent","getOffsetLeft","contentContainer","offsetLeft","document","body","getOffsetTop","offsetTop","ConveyorBelt","forwardRef","children","scrollPosition","onScrollPositionChanged","arrowVisibility","orientation","testId","ref","canPaginateNext","setCanPaginateNext","useState","canPaginatePrevious","setCanPaginatePrevious","overflowContainerRef","useRef","contentContainerRef","nextButtonContainerRef","prevButtonContainerRef","baseRef","leftRef","rightRef","observerRef","currentItemRef","buttonsHidden","setButtonsHidden","direction","useUser","itemElementsRef","addItem","root","prevBtn","nextBtn","targetsRef","targets","addTarget","useCallback","target","current","push","useEffect","length","rootMargin","offsetWidth","offsetHeight","IntersectionObserver","onVisibilityChange","threshold","observe","unobserve","entries","newItems","map","conveyorItem","index","foundEntry","find","entry","isVisible","isIntersecting","isCurrent","useMemo","useConveyorElementsVisible","useImperativeHandle","scrollElementIntoView","scrollIntoView","scrollPrevious","scrollToPreviousPage","scrollNext","scrollToNextPage","testIdProps","useTestId","leftArrowTestIdProps","rightArrowTestIdProps","variantClasses","useComponentTheme","ConveyorBeltRedwoodTheme","contentClasses","content","overflowClasses","pagination","overflow","classes","nextButtonClasses","nextButton","previousButtonClasses","previousButton","conveyorContentChildren","Array","from","querySelectorAll","child","item","_getConveyorItems","scrollEndHandler","scrollLeft","scrollTo","left","overflowContainer","leftGuard","rightGuard","forEach","getAttribute","addEventListener","removeEventListener","isElementVisible","elem","scroller","right","top","bottom","documentElement","clientWidth","clientHeight","scrollerBounds","getBoundingClientRect","bounds","_isElementInsideScrollerBounds","isElementOverflowing","width","height","_isElementOverflowingScrollerBounds","shouldSnapEnd","ltr","_shouldSnapToTheEndEdge","behavior","getNextInvisible","nextInvisible","getPreviousInvisible","previousInvisible","scrollAmount","scrollTop","setCurrentItem","node","currentItem","onFocus","event","isEqualNode","contains","previousButtonStyle","clsx","styles","buttonContainer","nextButtonStyle","_jsx","ConveyorBeltContext","Provider","value","_jsxs","className","conveyorStyle","jsx","class","BaseButton","elementDetails","type","isFocusable","styling","size","variant","onAction","ButtonLabelLayout","display","startIcon","ChevronLeft","SvgChevronLeft","ChevronRight","ChevronUp","tabIndex","style","minWidth","minHeight","ChevronDown","SvgChevronDown","props","useConveyorBeltItem","classNames","conveyorBeltItemStyle"],"mappings":"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"}

package/amd/DatePicker-9115226e.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', './Flex-590160eb', './useTestId-c286f212', './useFocusWithin-5a504fca', './useTranslationBundle-7c40cb58', './calendarDateUtils-5e25297c', 'preact/compat', './useBreakpointValues-3a067093', './Button-cb88d20f', './UNSAFE_DatePicker/themes/DatePickerContract.css', './useComponentTheme-5aa41a8f', './UNSAFE_DatePicker/themes/redwood/DatePickerTheme', './DatePickerHeader-a0da70a0', './MonthView-67179db3', './YearsGridView-e645d5de'], (function(e,a,o,t,i,n,s,r,d,c,u,l,h,w,y,v){"use strict";const V=["monthView","monthsGridView","yearsGridView","viewFocus","viewBlur"],p=["daySelected","goToToday","previousDay","nextDay","previousWeek","nextWeek","previousMonth","previousMonthAndFocus","nextMonth","nextMonthAndFocus","previousYear","nextYear","firstDayOfMonth","lastDayOfMonth"],m=["previousMonthInGridView","nextMonthInGridView","previousMonthRowInGridView","nextMonthRowInGridView","monthSelected"],b=["previousYearInGridView","nextYearInGridView","previousYearRowInGridView","nextYearRowInGridView","previousDecade","previousDecadeAndFocus","nextDecade","nextDecadeAndFocus","yearSelected"],g=(e,a)=>{if("reset"===a.type)return a.payload;switch(a.type){case"monthView":return{...e,currentView:"monthView",isViewFocused:!1,isNextNavigationButtonHidden:!1,isPreviousNavigationButtonHidden:!1,isTodayNavigationButtonHidden:!1};case"monthsGridView":return{...e,currentView:"monthsGridView",focusableMonth:e.focusableDate.month,isViewFocused:!1,isNextNavigationButtonHidden:!0,isPreviousNavigationButtonHidden:!0,isTodayNavigationButtonHidden:!0};case"yearsGridView":return{...e,currentView:"yearsGridView",focusableYear:e.focusableDate.year,isViewFocused:!1,isNextNavigationButtonHidden:!1,isPreviousNavigationButtonHidden:!1,isTodayNavigationButtonHidden:!0};case"viewFocus":return e.isViewFocused?e:{...e,isViewFocused:!0};case"viewBlur":return e.isViewFocused?{...e,isViewFocused:!1}:e;case"daySelected":case"goToToday":return{...e,isViewFocused:!0,focusableDate:a.payload};case"previousDay":{const o=s.addToCalendarDate(a.payload,{days:-1});return{...e,isViewFocused:!0,focusableDate:o}}case"nextDay":{const o=s.addToCalendarDate(a.payload,{days:1});return{...e,isViewFocused:!0,focusableDate:o}}case"previousWeek":{const o=s.addToCalendarDate(a.payload,{days:-7});return{...e,isViewFocused:!0,focusableDate:o}}case"nextWeek":{const o=s.addToCalendarDate(a.payload,{days:7});return{...e,isViewFocused:!0,focusableDate:o}}case"previousMonth":case"previousMonthAndFocus":{const o=s.addToCalendarDate(a.payload,{months:-1});return{...e,isViewFocused:"previousMonthAndFocus"===a.type,focusableDate:o}}case"nextMonth":case"nextMonthAndFocus":{const o=s.addToCalendarDate(a.payload,{months:1});return{...e,isViewFocused:"nextMonthAndFocus"===a.type,focusableDate:o}}case"previousYear":{const o=s.addToCalendarDate(a.payload,{years:-1});return{...e,isViewFocused:!0,focusableDate:o}}case"nextYear":{const o=s.addToCalendarDate(a.payload,{years:1});return{...e,isViewFocused:!0,focusableDate:o}}case"firstDayOfMonth":{const o=a.payload,t={year:o.year,month:o.month,day:1};return{...e,isViewFocused:!0,focusableDate:t}}case"lastDayOfMonth":{const o=a.payload,t=s.getDaysInMonth(o.month,o.year),i={year:o.year,month:o.month,day:t};return{...e,isViewFocused:!0,focusableDate:i}}case"previousMonthInGridView":{const o=s.addToMonth(a.payload.month,-1);return{...e,focusableMonth:o,isViewFocused:!0}}case"previousMonthRowInGridView":{const o=s.addToMonth(a.payload.month,-4);return{...e,focusableMonth:o,isViewFocused:!0}}case"nextMonthInGridView":{const o=s.addToMonth(a.payload.month,1);return{...e,focusableMonth:o,isViewFocused:!0}}case"nextMonthRowInGridView":{const o=s.addToMonth(a.payload.month,4);return{...e,focusableMonth:o,isViewFocused:!0}}case"monthSelected":{const o=a.payload.month-e.focusableDate.month,t=s.addToCalendarDate(e.focusableDate,{months:o});return{...e,currentView:"monthView",focusableDate:t,isViewFocused:!0,isNextNavigationButtonHidden:!1,isPreviousNavigationButtonHidden:!1,isTodayNavigationButtonHidden:!1}}case"previousYearInGridView":{const o=s.addToYear(a.payload.year,-1);return{...e,focusableYear:o,isViewFocused:!0}}case"previousYearRowInGridView":{const o=s.addToYear(a.payload.year,-4);return{...e,focusableYear:o,isViewFocused:!0}}case"previousDecade":case"previousDecadeAndFocus":{const o=s.addToYear(a.payload.year,-10);return{...e,focusableYear:o,isViewFocused:"previousDecadeAndFocus"===a.type}}case"nextYearInGridView":{const o=s.addToYear(a.payload.year,1);return{...e,focusableYear:o,isViewFocused:!0}}case"nextYearRowInGridView":{const o=s.addToYear(a.payload.year,4);return{...e,focusableYear:o,isViewFocused:!0}}case"nextDecade":case"nextDecadeAndFocus":{const o=s.addToYear(a.payload.year,10);return{...e,focusableYear:o,isViewFocused:"nextDecadeAndFocus"===a.type}}case"yearSelected":{const o=a.payload.year-e.focusableDate.year,t=s.addToCalendarDate(e.focusableDate,{years:o});return{...e,currentView:"monthView",focusableDate:t,isViewFocused:!0,isNextNavigationButtonHidden:!1,isPreviousNavigationButtonHidden:!1,isTodayNavigationButtonHidden:!1}}default:return e}},D={monthView:"none",monthsGridView:"month",yearsGridView:"year"},x=({isReadonly:e,max:a,min:o,todayTimeZone:t,value:d,onCommit:c})=>{if(o&&a&&s.isCalendarDateBefore(a,o))throw new Error("DatePicker: min must be equal or less than max.");const u=s.getCalendarDateToday(t),l=r.useMemo((()=>s.constrainCalendarDate(d??u,o,a)),[d,u,o,a]),{state:h,actions:w}=(({initialFocusableDate:e})=>{const a={currentView:"monthView",focusableDate:e,focusableMonth:e.month,focusableYear:e.year,isViewFocused:!1,isNextNavigationButtonHidden:!1,isPreviousNavigationButtonHidden:!1,isTodayNavigationButtonHidden:!1},[o,t]=r.useReducer(g,a),i=r.useRef(e);return 0!==s.compareDates(i.current,e)&&(i.current=e,0!==s.compareDates(e,o.focusableDate)&&t({type:"reset",payload:a})),{state:o,actions:r.useMemo((()=>{const e={};return V.forEach((a=>{e[a]=()=>t({type:a})})),p.forEach((a=>{e[a]=e=>t({type:a,payload:e})})),m.forEach((a=>{e[a]=e=>t({type:a,payload:e})})),b.forEach((a=>{e[a]=e=>t({type:a,payload:e})})),e}),[t])}})({initialFocusableDate:l}),y=n.useTranslationBundle("@oracle/oraclejet-preact"),v={next:y.datePicker_next(),previous:y.datePicker_prev(),goToToday:y.datePicker_goToToday(),today:y.datePicker_today()},x={handleMonthToggle:r.useCallback((()=>{"monthsGridView"!==h.currentView?w.monthsGridView(void 0):w.monthView(void 0)}),[w,h.currentView]),handleYearToggle:r.useCallback((()=>{"yearsGridView"!==h.currentView?w.yearsGridView(void 0):w.monthView(void 0)}),[w,h.currentView]),handleTodayNavigation:r.useCallback((()=>{w.goToToday(u)}),[w,u]),handlePreviousNavigation:r.useCallback((()=>"monthView"===h.currentView?w.previousMonth(h.focusableDate):"yearsGridView"===h.currentView?w.previousDecade({year:h.focusableYear}):void 0),[w,h.currentView,h.focusableDate,h.focusableYear]),handleNextNavigation:r.useCallback((()=>"monthView"===h.currentView?w.nextMonth(h.focusableDate):"yearsGridView"===h.currentView?w.nextDecade({year:h.focusableYear}):void 0),[w,h.currentView,h.focusableDate,h.focusableYear]),handleMonthViewAction:r.useCallback((a=>{void 0===a.date||e||(w.daySelected(a.date),c?.({previousValue:d,value:a.date}))}),[w,e,c,d]),handleMonthViewNavigation:r.useCallback((e=>{switch(e.direction){case"previousMonth":return w.previousMonthAndFocus(e.date);case"nextMonth":return w.nextMonthAndFocus(e.date);case"today":return w.goToToday(u);default:return w[e.direction](e.date)}}),[w,u]),handleMonthsGridViewAction:r.useCallback((e=>{w.monthSelected(e)}),[w]),handleMonthsGridViewNavigation:r.useCallback((e=>{switch(e.direction){case"down":return w.nextMonthRowInGridView({month:e.month});case"next":return w.nextMonthInGridView({month:e.month});case"previous":return w.previousMonthInGridView({month:e.month});case"up":return w.previousMonthRowInGridView({month:e.month})}}),[w]),handleYearsGridViewAction:r.useCallback((e=>{w.yearSelected(e)}),[w]),handleYearsGridViewNavigation:r.useCallback((e=>{switch(e.direction){case"down":return w.nextYearRowInGridView({year:e.year});case"next":return w.nextYearInGridView({year:e.year});case"nextDecade":return w.nextDecadeAndFocus({year:e.year});case"previous":return w.previousYearInGridView({year:e.year});case"previousDecade":return w.previousDecadeAndFocus({year:e.year});case"up":return w.previousYearRowInGridView({year:e.year})}}),[w])},{focusProps:f}=i.useFocusWithin({onBlurWithin:r.useCallback((()=>w.viewBlur(void 0)),[w]),onFocusWithin:r.useCallback((()=>w.viewFocus(void 0)),[w])});return{accessibleLabels:v,actions:w,handlers:x,state:h,todaysDate:u,toggleSelection:D[h.currentView],viewContainerProps:{...f}}},f=({onTodayNavigationAction:e,testId:t,todayNavigationAriaLabel:i,todayNavigationLabel:n})=>a.jsx(o.Flex,{direction:"column",children:a.jsx(c.Button,{testId:t,label:n,"aria-label":i,size:"sm",onAction:e})});e.DatePicker=({dayFormatter:e,daysOutsideMonth:i,height:n,isReadonly:s=!1,monthAndYearPicker:r="on",max:c,maxWidth:V,min:p,value:m,testId:b,todayTimeZone:g,todayButton:D="visible",weekDisplay:T="none",width:F,onCommit:N})=>{const{accessibleLabels:M,handlers:G,state:Y,todaysDate:k,toggleSelection:B,viewContainerProps:P}=x({isReadonly:s,max:c,min:p,todayTimeZone:g,value:m,onCommit:N}),{month:A,year:I}=Y.focusableDate,C="on"===r&&!s,H=d.useBreakpointValues({sm:!0,md:!1},{sm:"0px",md:"360px"}),R=!Y.isTodayNavigationButtonHidden&&H&&"visible"===D,{classes:S}=l.useComponentTheme(h.DatePickerRedwoodTheme),j=t.useTestId(b);return a.jsx("div",{class:S,...j,children:a.jsxs(o.Flex,{direction:"column",gap:"monthView"===Y.currentView?u.datePickerPropVars.calendarGridRowGap:u.datePickerPropVars.monthYearGridRowGap,height:"auto"===n?void 0:R?u.datePickerPropVars.todayFooterButtonHeight:u.datePickerPropVars.height,maxWidth:void 0!==V?V:u.datePickerPropVars.maxWidth,width:void 0!==F?F:u.datePickerPropVars.width,children:[a.jsx(w.DatePickerHeader,{testId:b?b+"_header":void 0,month:A,year:I,isPreviousNavigationButtonHidden:Y.isPreviousNavigationButtonHidden,isTodayNavigationButtonHidden:"hidden"===D||Y.isTodayNavigationButtonHidden||H,isNextNavigationButtonHidden:Y.isNextNavigationButtonHidden,monthYearHeader:C?"independentButtons":"text",toggleSelection:C?B:void 0,previousNavigationAccessibleLabel:M.previous,todayNavigationAccessibleLabel:M.goToToday,nextNavigationAccessibleLabel:M.next,onTodayNavigationAction:G.handleTodayNavigation,onPreviousNavigationAction:G.handlePreviousNavigation,onNextNavigationAction:G.handleNextNavigation,onMonthToggle:C?G.handleMonthToggle:void 0,onYearToggle:C?G.handleYearToggle:void 0}),a.jsxs("div",{...P,children:["monthView"===Y.currentView&&a.jsx(y.MonthView,{dayFormatter:e,daysOutsideMonth:i,isReadonly:s,max:c,min:p,selectedDate:m,focusableDate:Y.focusableDate,isFocused:Y.isViewFocused,testId:b?b+"_monthView":void 0,todaysDate:k,onNavigation:G.handleMonthViewNavigation,onAction:G.handleMonthViewAction,weekDisplay:T}),"monthsGridView"===Y.currentView&&a.jsx(v.MonthsGridView,{currentMonth:k.month,focusableMonth:Y.focusableMonth,isFocused:Y.isViewFocused,selectedMonth:A,testId:b?b+"_monthsGridView":void 0,onAction:G.handleMonthsGridViewAction,onNavigation:G.handleMonthsGridViewNavigation}),"yearsGridView"===Y.currentView&&a.jsx(v.YearsGridView,{currentYear:k.year,focusableYear:Y.focusableYear,isFocused:Y.isViewFocused,selectedYear:I,testId:b?b+"_yearsGridView":void 0,onAction:G.handleYearsGridViewAction,onNavigation:G.handleYearsGridViewNavigation})]}),R&&a.jsx("div",{children:a.jsx(f,{testId:b?b+"_footerTodayButton":void 0,todayNavigationLabel:M.today,todayNavigationAriaLabel:M.goToToday,onTodayNavigationAction:G.handleTodayNavigation})})]})})}}));
+//# sourceMappingURL=DatePicker-9115226e.js.map

package/amd/DatePicker-9115226e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker-9115226e.js","sources":["../../src/UNSAFE_DatePicker/useDatePickerState.ts","../../src/UNSAFE_DatePicker/useDatePicker.ts","../../src/UNSAFE_DatePicker/TodayButton.tsx","../../src/UNSAFE_DatePicker/DatePicker.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { CalendarDateRequired } from '#utils/UNSAFE_calendarDateUtils';\nimport {\n  addToCalendarDate,\n  addToMonth,\n  addToYear,\n  compareDates,\n  getDaysInMonth\n} from '#utils/UNSAFE_calendarDateUtils';\nimport { useMemo, useReducer, useRef } from 'preact/compat';\n\n// This is the type of the state that is returned from the useDatePickerState reducer.\n// This is a single state that will handle the different views of the DatePicker, the\n// MonthView, the MonthGridView, and the YearGridView. Initially we have implemented\n// the state for the MonthView.\ntype DatePickerState = {\n  /**\n   * Specifies the current view the DatePicker is showing.\n   */\n  currentView: 'monthView' | 'monthsGridView' | 'yearsGridView';\n\n  /**\n   * The focusableDate is the one day in the MonthView that has tabIndex: 0 on it.\n   * If nothing is selected, the DatePicker initially renders\n   * with Today as the focusableDate. The focusableDate doesn't have focus until the user tabs in\n   * to the Month View.\n   * When the user navigates the days with the arrow keys,\n   * the focusableDate changes along with the focusedDate, and they will be the same date.\n   * This is a 'roving' index.\n   * The focusableDate is never undefined.\n   * <p>\n   * If the user keyboards to the next month (Fn+Down Arrow on a Mac),\n   * then the focusableDate and the focusedDate of the next month\n   * is the same day number, or as close as possible to stay in the same month. For example,\n   * if the focusedDate and focusableDate is April 2, 2024, the focusedDate and focusableDate for the next month is May 2, 2024.\n   * If the focusedDate and focusableDate is February 28, 2024, the focusedDate and focusableDate for the next month is March 28, 2024.\n   * If the focusedDate and focusableDate is January 31, 2024, the focusedDate and focusableDate for the next month is February 29, 2024 (2024 is a leap year).\n   * </p>\n   * <p>\n   * If the user clicks the Next Month button in the DatePicker's header, then\n   * there is no date that has focus, so the focusedDate is undefined.\n   * The focusableDate will be set.\n   * For example,\n   * if the focusableDate is April 2, 2024, the focusableDate for the next month is May 2, 2024.\n   * If the focusableDate is February 28, 2024, the focusableDate for the next month is March 28, 2024.\n   * If the focusableDate is January 31, 2024, the focusableDate for the next month is February 29, 2024 (2024 is a leap year).\n   *\n   * </p>\n   */\n  focusableDate: CalendarDateRequired;\n\n  /**\n   * The focusableMonth is the one month in the MonthsGridView that has tabIndex: 0 on it.\n   * If nothing is selected, the DatePicker initially renders with Today's month as the\n   * focusableMonth. The focusableMonth doesn't have focus until the user tabs in\n   * to the Months Grid View.\n   *\n   * When the user navigates the month with the arrow keys, the focusableMonth changes\n   * along with the focusedMonth, and they will be the same date. This is a 'roving' index.\n   *\n   * The focusableMonth is never undefined.\n   */\n  focusableMonth: CalendarDateRequired['month'];\n\n  /**\n   * The focusableYear is the one month in the YearsGridView that has tabIndex: 0 on it.\n   * If nothing is selected, the DatePicker initially renders with Today's month as the\n   * focusableYear. The focusableYear doesn't have focus until the user tabs in\n   * to the Months Grid View.\n   *\n   * When the user navigates the month with the arrow keys, the focusableYear changes\n   * along with the focusedYear, and they will be the same date. This is a 'roving' index.\n   *\n   * The focusableYear is never undefined.\n   */\n  focusableYear: CalendarDateRequired['year'];\n\n  /**\n   * A boolean to indicate if the focus is in the view.\n   */\n  isViewFocused: boolean;\n\n  /**\n   * Specifies whether to hide the previous navigation button is hidden from the header.\n   */\n  isPreviousNavigationButtonHidden: boolean;\n\n  /**\n   * Specifies whether to hide the today navigation button is hidden from the header.\n   */\n  isTodayNavigationButtonHidden: boolean;\n\n  /**\n   * Specifies whether to hide the next navigation button is hidden from the header.\n   */\n  isNextNavigationButtonHidden: boolean;\n};\n\nconst datePickerResetActionTypes = ['reset'] as const;\n\nconst datePickerViewActionTypes = [\n  'monthView',\n  'monthsGridView',\n  'yearsGridView',\n  'viewFocus',\n  'viewBlur'\n] as const;\n\nconst monthViewActionTypes = [\n  'daySelected',\n  'goToToday',\n  'previousDay',\n  'nextDay',\n  'previousWeek',\n  'nextWeek',\n  'previousMonth',\n  'previousMonthAndFocus',\n  'nextMonth',\n  'nextMonthAndFocus',\n  'previousYear',\n  'nextYear',\n  'firstDayOfMonth',\n  'lastDayOfMonth'\n] as const;\n\nconst monthsGridViewActionTypes = [\n  'previousMonthInGridView',\n  'nextMonthInGridView',\n  'previousMonthRowInGridView',\n  'nextMonthRowInGridView',\n  'monthSelected'\n] as const;\n\nconst yearsGridViewActionTypes = [\n  'previousYearInGridView',\n  'nextYearInGridView',\n  'previousYearRowInGridView',\n  'nextYearRowInGridView',\n  'previousDecade',\n  'previousDecadeAndFocus',\n  'nextDecade',\n  'nextDecadeAndFocus',\n  'yearSelected'\n] as const;\n\ntype DatePickerViewActionTypes = (typeof datePickerViewActionTypes)[number];\ntype DatePickerResetActionTypes = (typeof datePickerResetActionTypes)[number];\ntype MonthViewActionTypes = (typeof monthViewActionTypes)[number];\ntype MonthsGridViewActionTypes = (typeof monthsGridViewActionTypes)[number];\ntype YearsGridViewActionTypes = (typeof yearsGridViewActionTypes)[number];\n\n// This is the type of the actions that the hook returns.\ntype DatePickerStateAction = ReturnType<typeof useDatePickerState>['actions'];\n\n// Type for the action of the datePickerReducer.\ntype DatePickerViewAction = {\n  [Type in DatePickerViewActionTypes]: { type: Type; payload?: undefined };\n}[DatePickerViewActionTypes];\n\ntype DatePickerResetAction = {\n  [Type in DatePickerResetActionTypes]: { type: Type; payload: DatePickerState };\n}[DatePickerResetActionTypes];\n\ntype MonthViewAction = {\n  [Type in MonthViewActionTypes]: { type: Type; payload: CalendarDateRequired };\n}[MonthViewActionTypes];\n\ntype MonthsGridViewAction = {\n  [Type in MonthsGridViewActionTypes]: { type: Type; payload: Pick<CalendarDateRequired, 'month'> };\n}[MonthsGridViewActionTypes];\n\ntype YearsGridViewAction = {\n  [Type in YearsGridViewActionTypes]: { type: Type; payload: Pick<CalendarDateRequired, 'year'> };\n}[YearsGridViewActionTypes];\n\ntype DatePickerReducerAction =\n  | DatePickerResetAction\n  | DatePickerViewAction\n  | MonthViewAction\n  | MonthsGridViewAction\n  | YearsGridViewAction;\n\n// A reducer is a plain old function you write that takes the current state,\n// and the action to be processed, and returns the state as it should be, based on that action occurring.\n// The reducer, not the sender,  determines how a given report (action) affects the state.\nconst datePickerReducer = (\n  state: DatePickerState,\n  action: DatePickerReducerAction\n): DatePickerState => {\n  // On mount, the reducer is initialized with initial state derived from the DatePicker's value.\n  // If that value is changed programmatically afterwards, the only way to push that update\n  // into the reducer is to define a \"reset\" action.\n  if (action.type === 'reset') {\n    return action.payload!;\n  }\n\n  switch (action.type) {\n    case 'monthView': {\n      return {\n        ...state,\n        currentView: 'monthView',\n        isViewFocused: false,\n        isNextNavigationButtonHidden: false,\n        isPreviousNavigationButtonHidden: false,\n        isTodayNavigationButtonHidden: false\n      };\n    }\n    case 'monthsGridView': {\n      return {\n        ...state,\n        currentView: 'monthsGridView',\n        focusableMonth: state.focusableDate.month,\n        isViewFocused: false,\n        isNextNavigationButtonHidden: true,\n        isPreviousNavigationButtonHidden: true,\n        isTodayNavigationButtonHidden: true\n      };\n    }\n    case 'yearsGridView': {\n      return {\n        ...state,\n        currentView: 'yearsGridView',\n        focusableYear: state.focusableDate.year,\n        isViewFocused: false,\n        isNextNavigationButtonHidden: false,\n        isPreviousNavigationButtonHidden: false,\n        isTodayNavigationButtonHidden: true\n      };\n    }\n    case 'viewFocus': {\n      return state.isViewFocused ? state : { ...state, isViewFocused: true };\n    }\n    case 'viewBlur': {\n      return state.isViewFocused ? { ...state, isViewFocused: false } : state;\n    }\n    case 'daySelected': {\n      return { ...state, isViewFocused: true, focusableDate: action.payload };\n    }\n    case 'goToToday': {\n      // User clicked on the 'Today' icon, which means they want to navigate to show the month of Today\n      // payload is Today's date. We also set the focus to Today.\n      return { ...state, isViewFocused: true, focusableDate: action.payload };\n    }\n    case 'previousDay': {\n      const previousDay = addToCalendarDate(action.payload, { days: -1 });\n      return { ...state, isViewFocused: true, focusableDate: previousDay };\n    }\n    case 'nextDay': {\n      const nextDay = addToCalendarDate(action.payload, { days: 1 });\n      return { ...state, isViewFocused: true, focusableDate: nextDay };\n    }\n    case 'previousWeek': {\n      const previousDay = addToCalendarDate(action.payload, { days: -7 });\n      return { ...state, isViewFocused: true, focusableDate: previousDay };\n    }\n    case 'nextWeek': {\n      const nextDay = addToCalendarDate(action.payload, { days: 7 });\n      return { ...state, isViewFocused: true, focusableDate: nextDay };\n    }\n    case 'previousMonth':\n    case 'previousMonthAndFocus': {\n      // PageUp moves focus to the previous month.\n      // We also get here if the DatePicker while in month view header's Previous navigation button is pressed.\n      const prevMonth = addToCalendarDate(action.payload, { months: -1 });\n      return {\n        ...state,\n        isViewFocused: action.type === 'previousMonthAndFocus',\n        focusableDate: prevMonth\n      };\n    }\n    case 'nextMonth':\n    case 'nextMonthAndFocus': {\n      // Shift PageDown moves focus to the next month. TODO: Confirm this works on a Windows machine.\n      // Shift Fn Arrow Down works on my Mac.\n      // We also get here if the DatePicker while in month view header's Next navigation button is pressed.\n      const nextMonth = addToCalendarDate(action.payload, { months: 1 });\n      return {\n        ...state,\n        isViewFocused: action.type === 'nextMonthAndFocus',\n        focusableDate: nextMonth\n      };\n    }\n    case 'previousYear': {\n      // Shift Page Up moves focus to the previous year. TODO: Confirm this works on a Windows machine.\n      const previousYear = addToCalendarDate(action.payload, { years: -1 });\n      return { ...state, isViewFocused: true, focusableDate: previousYear };\n    }\n    case 'nextYear': {\n      const nextYear = addToCalendarDate(action.payload, { years: 1 });\n      return { ...state, isViewFocused: true, focusableDate: nextYear };\n    }\n    case 'firstDayOfMonth': {\n      // Home moves focus to the first day of the month (Fn+LeftArrow on a mouse.)\n      const currentDate = action.payload;\n      const firstDayOfMonthDate = {\n        year: currentDate.year,\n        month: currentDate.month,\n        day: 1\n      } as CalendarDateRequired;\n      return { ...state, isViewFocused: true, focusableDate: firstDayOfMonthDate };\n    }\n    case 'lastDayOfMonth': {\n      // End moves focus to the last day of the month\n      const currentDate = action.payload;\n      const lastDay = getDaysInMonth(currentDate.month, currentDate.year);\n      const lastDayOfMonthDate = {\n        year: currentDate.year,\n        month: currentDate.month,\n        day: lastDay\n      } as CalendarDateRequired;\n      return { ...state, isViewFocused: true, focusableDate: lastDayOfMonthDate };\n    }\n\n    case 'previousMonthInGridView': {\n      const previousMonth = addToMonth(action.payload.month, -1);\n      return { ...state, focusableMonth: previousMonth, isViewFocused: true };\n    }\n    case 'previousMonthRowInGridView': {\n      const previousMonth = addToMonth(action.payload.month, -4);\n      return { ...state, focusableMonth: previousMonth, isViewFocused: true };\n    }\n    case 'nextMonthInGridView': {\n      const nextMonth = addToMonth(action.payload.month, 1);\n      return { ...state, focusableMonth: nextMonth, isViewFocused: true };\n    }\n    case 'nextMonthRowInGridView': {\n      const nextMonth = addToMonth(action.payload.month, 4);\n      return { ...state, focusableMonth: nextMonth, isViewFocused: true };\n    }\n    case 'monthSelected': {\n      const monthSteps = action.payload.month - state.focusableDate.month;\n      const goToDate = addToCalendarDate(state.focusableDate, { months: monthSteps });\n      return {\n        ...state,\n        currentView: 'monthView',\n        focusableDate: goToDate,\n        isViewFocused: true,\n        isNextNavigationButtonHidden: false,\n        isPreviousNavigationButtonHidden: false,\n        isTodayNavigationButtonHidden: false\n      };\n    }\n\n    case 'previousYearInGridView': {\n      const previousYear = addToYear(action.payload.year, -1);\n      return { ...state, focusableYear: previousYear, isViewFocused: true };\n    }\n    case 'previousYearRowInGridView': {\n      const previousYear = addToYear(action.payload.year, -4);\n      return { ...state, focusableYear: previousYear, isViewFocused: true };\n    }\n    case 'previousDecade':\n    case 'previousDecadeAndFocus': {\n      const previousYear = addToYear(action.payload.year, -10);\n      return {\n        ...state,\n        focusableYear: previousYear,\n        isViewFocused: action.type === 'previousDecadeAndFocus'\n      };\n    }\n    case 'nextYearInGridView': {\n      const nextYear = addToYear(action.payload.year, 1);\n      return { ...state, focusableYear: nextYear, isViewFocused: true };\n    }\n    case 'nextYearRowInGridView': {\n      const nextYear = addToYear(action.payload.year, 4);\n      return { ...state, focusableYear: nextYear, isViewFocused: true };\n    }\n    case 'nextDecade':\n    case 'nextDecadeAndFocus': {\n      const nextYear = addToYear(action.payload.year, 10);\n      return {\n        ...state,\n        focusableYear: nextYear,\n        isViewFocused: action.type === 'nextDecadeAndFocus'\n      };\n    }\n    case 'yearSelected': {\n      const yearSteps = action.payload.year - state.focusableDate.year;\n      const goToDate = addToCalendarDate(state.focusableDate, { years: yearSteps });\n      return {\n        ...state,\n        currentView: 'monthView',\n        focusableDate: goToDate,\n        isViewFocused: true,\n        isNextNavigationButtonHidden: false,\n        isPreviousNavigationButtonHidden: false,\n        isTodayNavigationButtonHidden: false\n      };\n    }\n    default:\n      return state;\n  }\n};\n\ntype Props = {\n  /**\n   * This becomes the state's focusableDate.\n   */\n  initialFocusableDate: CalendarDateRequired;\n};\n\n/**\n * useDatePickerState takes an object with the initialFocusableDate and\n * determines the initial state; i.e., focusableDate and focusedDate. It returns the state\n * and actions a user can take on the DatePicker that will update the state. The actions are functions\n * that call dispatch with the type and payload.\n * @param param0\n * @returns\n */\nconst useDatePickerState = ({ initialFocusableDate }: Props) => {\n  // Create the initial state to pass to our reducer.\n  const initialState: DatePickerState = {\n    currentView: 'monthView',\n    focusableDate: initialFocusableDate,\n    focusableMonth: initialFocusableDate.month,\n    focusableYear: initialFocusableDate.year,\n    isViewFocused: false,\n    isNextNavigationButtonHidden: false,\n    isPreviousNavigationButtonHidden: false,\n    isTodayNavigationButtonHidden: false\n  };\n\n  const [state, dispatch] = useReducer(datePickerReducer, initialState);\n\n  // initialFocusableDate is the controlled value passed from the parent.\n  const lastValueFromParentRef = useRef<CalendarDateRequired>(initialFocusableDate);\n\n  // If a new value is being pushed from the parent, and that value differs from\n  // the current focusableDate of the reducer, then this is a programmatic update\n  // and we need to call 'reset' to update the reducer state. Otherwise, the only\n  // time the reducer state is updated from the value is on mount.\n  if (compareDates(lastValueFromParentRef.current, initialFocusableDate) !== 0) {\n    lastValueFromParentRef.current = initialFocusableDate;\n    if (compareDates(initialFocusableDate, state.focusableDate) !== 0) {\n      dispatch({ type: 'reset', payload: initialState });\n    }\n  }\n\n  // Using an action creator like this is nice because now each time we want to add an action,\n  // we don't have to remember the action constant to use or how the payload should be structured. (from the redux doc)\n\n  // memoize the actions object since we pass this around to our components.\n  const actions = useMemo(() => {\n    const actionsObject: {\n      [Type in\n        | DatePickerViewActionTypes\n        | MonthViewActionTypes\n        | MonthsGridViewActionTypes\n        | YearsGridViewActionTypes]: (\n        payload: Extract<DatePickerReducerAction, { type: Type }>['payload']\n      ) => void;\n    } = {} as any;\n\n    datePickerViewActionTypes.forEach((type) => {\n      actionsObject[type] = () => dispatch({ type });\n    });\n\n    monthViewActionTypes.forEach((type) => {\n      actionsObject[type] = (\n        payload: Extract<DatePickerReducerAction, { type: MonthViewActionTypes }>['payload']\n      ) => dispatch({ type, payload });\n    });\n\n    monthsGridViewActionTypes.forEach((type) => {\n      actionsObject[type] = (\n        payload: Extract<DatePickerReducerAction, { type: MonthsGridViewActionTypes }>['payload']\n      ) => dispatch({ type, payload });\n    });\n\n    yearsGridViewActionTypes.forEach((type) => {\n      actionsObject[type] = (\n        payload: Extract<DatePickerReducerAction, { type: YearsGridViewActionTypes }>['payload']\n      ) => dispatch({ type, payload });\n    });\n\n    return actionsObject;\n  }, [dispatch]);\n\n  return { state, actions };\n};\n\nexport { useDatePickerState };\nexport type {\n  DatePickerState,\n  DatePickerStateAction,\n  DatePickerViewActionTypes,\n  MonthViewActionTypes,\n  MonthsGridViewActionTypes,\n  YearsGridViewActionTypes\n};\n","/**\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 { MonthView } from '#PRIVATE_MonthView';\nimport type { MonthsGridView, YearsGridView } from '#PRIVATE_MonthYearGridView';\nimport { useFocusWithin } from '#hooks/UNSAFE_useFocusWithin';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport {\n  constrainCalendarDate,\n  getCalendarDateToday,\n  isCalendarDateBefore,\n  type CalendarDateRequired\n} from '#utils/UNSAFE_calendarDateUtils';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { ComponentProps, useCallback, useMemo } from 'preact/compat';\nimport { useDatePickerState } from './useDatePickerState';\n\n/**\n * A map that specifies the selection of the header toggle button based on the\n * view we are in.\n */\nconst headerToggleSelection = {\n  monthView: 'none',\n  monthsGridView: 'month',\n  yearsGridView: 'year'\n} as const;\n\ntype MonthViewProps = ComponentProps<typeof MonthView>;\ntype MonthsGridViewProps = ComponentProps<typeof MonthsGridView>;\ntype YearsGridViewProps = ComponentProps<typeof YearsGridView>;\n\ntype UseDatePickerProps = {\n  isReadonly?: boolean;\n  max?: CalendarDateRequired;\n  min?: CalendarDateRequired;\n  todayTimeZone?: Intl.DateTimeFormatOptions['timeZone'];\n  value?: CalendarDateRequired;\n  onCommit: (detail: ValueUpdateDetail<CalendarDateRequired>) => void;\n};\n\n/**\n * A custom hook that adds functionality to the DatePicker component.\n */\nexport const useDatePicker = ({\n  isReadonly,\n  max,\n  min,\n  todayTimeZone,\n  value,\n  onCommit\n}: UseDatePickerProps) => {\n  // Check for errors first\n  if (min && max && isCalendarDateBefore(max, min)) {\n    throw new Error('DatePicker: min must be equal or less than max.');\n  }\n\n  const todaysDate = getCalendarDateToday(todayTimeZone);\n\n  // We need to make sure that this initialFocusableDate is within the min/max range.\n  // When there is no min or max set, we draw the month of the value if value is set, otherwise we draw today's month.\n  // If the initialFocusableDate is not within the min/max range, then we constrain the calendar date by changing the month to draw\n  // so that the initialFocusableDate is the min date if the initialFocusableDate is < min or the max month if the initialFocusableDate is > max.\n  const initialFocusableDate = useMemo(\n    () => constrainCalendarDate(value ?? todaysDate, min, max),\n    [value, todaysDate, min, max]\n  );\n\n  const { state, actions } = useDatePickerState({ initialFocusableDate });\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const accessibleLabels = {\n    next: translations.datePicker_next(),\n    previous: translations.datePicker_prev(),\n    goToToday: translations.datePicker_goToToday(),\n    today: translations.datePicker_today()\n  };\n\n  const handlers = {\n    /**\n     * Handler for DatePickerHeader.onMonthToggle.\n     * This is used for toggling between the MonthView and\n     * MonthsGridView.\n     */\n    handleMonthToggle: useCallback(() => {\n      if (state.currentView !== 'monthsGridView') {\n        actions.monthsGridView(undefined);\n      } else {\n        actions.monthView(undefined);\n      }\n    }, [actions, state.currentView]),\n\n    /**\n     * Handler for DatePickerHeader.onYearToggle.\n     * This is used for toggling between the MonthView and\n     * YearsGridView.\n     */\n    handleYearToggle: useCallback(() => {\n      if (state.currentView !== 'yearsGridView') {\n        actions.yearsGridView(undefined);\n      } else {\n        actions.monthView(undefined);\n      }\n    }, [actions, state.currentView]),\n\n    /**\n     * Handler for DatePickerHeader.onTodayNavigation.\n     * This is used for navigating to today in the MonthView.\n     */\n    handleTodayNavigation: useCallback(() => {\n      actions.goToToday(todaysDate);\n    }, [actions, todaysDate]),\n\n    /**\n     * Handler for DatePickerHeader.onPreviousNavigation.\n     * This is used for navigating to the previous month in MonthView\n     * and previous decade in YearsGridView.\n     */\n    handlePreviousNavigation: useCallback(() => {\n      if (state.currentView === 'monthView') {\n        return actions.previousMonth(state.focusableDate);\n      }\n\n      if (state.currentView === 'yearsGridView') {\n        return actions.previousDecade({ year: state.focusableYear });\n      }\n    }, [actions, state.currentView, state.focusableDate, state.focusableYear]),\n\n    /**\n     * Handler for DatePickerHeader.onNextNavigation.\n     * This is used for navigating to the next month in MonthView\n     * and next decade in YearsGridView.\n     */\n    handleNextNavigation: useCallback(() => {\n      if (state.currentView === 'monthView') {\n        return actions.nextMonth(state.focusableDate);\n      }\n\n      if (state.currentView === 'yearsGridView') {\n        return actions.nextDecade({ year: state.focusableYear });\n      }\n    }, [actions, state.currentView, state.focusableDate, state.focusableYear]),\n\n    /**\n     * Handler for MonthView.onAction.\n     * This is used for selecting a date in MonthView.\n     */\n    handleMonthViewAction: useCallback<MonthViewProps['onAction']>(\n      (payload) => {\n        if (payload.date === undefined || isReadonly) return;\n        actions.daySelected(payload.date);\n        // We purposely send onCommit even if the value is the same.\n        // The InputDatePicker closes the datepicker when the user commits,\n        // even if it is the already selected date.\n        onCommit?.({ previousValue: value, value: payload.date });\n      },\n      [actions, isReadonly, onCommit, value]\n    ),\n\n    /**\n     * Handler for MonthView.onNavigation.\n     * This is used for navigating in the MonthView like moving around the\n     * dates in the month and going to the prev/next month/year.\n     */\n    handleMonthViewNavigation: useCallback<MonthViewProps['onNavigation']>(\n      (detail) => {\n        switch (detail.direction) {\n          case 'previousMonth':\n            return actions.previousMonthAndFocus(detail.date);\n          case 'nextMonth':\n            return actions.nextMonthAndFocus(detail.date);\n          case 'today':\n            return actions.goToToday(todaysDate);\n          default:\n            return actions[detail.direction](detail.date);\n        }\n      },\n      [actions, todaysDate]\n    ),\n\n    /**\n     * Handler for MonthsGridView.onAction.\n     * This is used for selecting a month in MonthsGridView and navigating to\n     * the selected month in MonthView.\n     */\n    handleMonthsGridViewAction: useCallback<MonthsGridViewProps['onAction']>(\n      (detail) => {\n        actions.monthSelected(detail);\n      },\n      [actions]\n    ),\n\n    /**\n     * Handler for MonthsGridView.onNavigation.\n     * This is used for navigating through the MonthsGridView.\n     */\n    handleMonthsGridViewNavigation: useCallback<MonthsGridViewProps['onNavigation']>(\n      (detail) => {\n        switch (detail.direction) {\n          case 'down':\n            return actions.nextMonthRowInGridView({ month: detail.month });\n          case 'next':\n            return actions.nextMonthInGridView({ month: detail.month });\n          case 'previous':\n            return actions.previousMonthInGridView({ month: detail.month });\n          case 'up':\n            return actions.previousMonthRowInGridView({ month: detail.month });\n        }\n      },\n      [actions]\n    ),\n\n    /**\n     * Handler for YearsGridView.onAction.\n     * This is used for selecting a year in YearsGridView and navigating to\n     * the selected year in MonthView.\n     */\n    handleYearsGridViewAction: useCallback<YearsGridViewProps['onAction']>(\n      (detail) => {\n        actions.yearSelected(detail);\n      },\n      [actions]\n    ),\n\n    /**\n     * Handler for YearsGridView.onNavigation.\n     * This is used for navigating through the YearsGridView.\n     */\n    handleYearsGridViewNavigation: useCallback<YearsGridViewProps['onNavigation']>(\n      (detail) => {\n        switch (detail.direction) {\n          case 'down':\n            return actions.nextYearRowInGridView({ year: detail.year });\n          case 'next':\n            return actions.nextYearInGridView({ year: detail.year });\n          case 'nextDecade':\n            return actions.nextDecadeAndFocus({ year: detail.year });\n          case 'previous':\n            return actions.previousYearInGridView({ year: detail.year });\n          case 'previousDecade':\n            return actions.previousDecadeAndFocus({ year: detail.year });\n          case 'up':\n            return actions.previousYearRowInGridView({ year: detail.year });\n        }\n      },\n      [actions]\n    )\n  };\n\n  const { focusProps } = useFocusWithin({\n    // keep the state in sync with the actual focus state\n    onBlurWithin: useCallback(() => actions.viewBlur(undefined), [actions]),\n    onFocusWithin: useCallback(() => actions.viewFocus(undefined), [actions])\n  });\n\n  return {\n    accessibleLabels,\n    actions,\n    handlers,\n    state,\n    todaysDate,\n    toggleSelection: headerToggleSelection[state.currentView],\n    viewContainerProps: { ...focusProps }\n  };\n};\n","import { Flex } from '#UNSAFE_Flex';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { Button } from '#UNSAFE_Button';\nimport { ComponentProps } from 'preact/compat';\n\ntype ButtonOnAction = NonNullable<ComponentProps<typeof Button>['onAction']>;\n\ntype Props = TestIdProps & {\n  /**\n   * Accessible label for the today navigation button that is in the footer of the DatePicker\n   * in small screens.\n   *\n   * Use this property to provide a screen reader aria-label for the\n   * footer today navigation button.\n   */\n  todayNavigationAriaLabel: string;\n\n  /**\n   * Label for the today navigation button that is in the footer of the DatePicker in small screens.\n   * Use this property to provide a label for the footer today navigation button.\n   */\n  todayNavigationLabel: string;\n\n  /**\n   * A callback function to be called when the today button is clicked. Only\n   * applicable when `isTodayNavigationButtonHidden` is set to `false`.\n   */\n  onTodayNavigationAction?: ButtonOnAction;\n};\n\n/**\n * A Today button. The DatePicker puts this in its footer on small screens.\n * When a user presses the button, the DatePicker navigates to Today and sets focus on Today.\n */\nexport const TodayButton = ({\n  onTodayNavigationAction,\n  testId,\n  todayNavigationAriaLabel,\n  todayNavigationLabel\n}: Props) => {\n  return (\n    <Flex direction=\"column\">\n      <Button\n        testId={testId}\n        label={todayNavigationLabel}\n        aria-label={todayNavigationAriaLabel}\n        size=\"sm\"\n        onAction={onTodayNavigationAction}\n      />\n    </Flex>\n  );\n};\n","import { DatePickerHeader } from '#PRIVATE_DatePickerHeader';\nimport { MonthView } from '#PRIVATE_MonthView';\nimport { MonthsGridView, YearsGridView } from '#PRIVATE_MonthYearGridView';\nimport { Flex } from '#UNSAFE_Flex';\nimport { useTestId, type TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { type CalendarDateRequired } from '#utils/UNSAFE_calendarDateUtils';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { useDatePicker } from './useDatePicker';\nimport { useBreakpointValues } from '#hooks/UNSAFE_useBreakpointValues';\nimport { TodayButton } from './TodayButton';\nimport { datePickerPropVars } from './themes/DatePickerContract.css';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { DatePickerRedwoodTheme } from './themes/redwood/DatePickerTheme';\nimport { Size } from '#utils/UNSAFE_size';\n\nexport type DayFormatOptions = {\n  state: 'enabled' | 'disabled' | 'restricted';\n};\n\ntype Props = TestIdProps & {\n  /**\n   * A function that receives a date and returns an object specifying how to format the provided date.\n   * This function is called for each date that is rendered and this can be used to control how individual\n   * dates are rendered - disabled, restricted, or enabled.\n   * @param date The date to format\n   * @returns The format options\n   */\n  dayFormatter?: (date: CalendarDateRequired) => DayFormatOptions;\n\n  /**\n   * The daysOutsideMonth property affects the day cells that are outside of the current month.\n   * If set to 'hidden', then the days outside of the current month will be hidden.\n   * If set to 'selectable', then the days outside of the current month will be visible and selectable.\n   * This defaults to 'hidden'.\n   */\n  daysOutsideMonth?: 'hidden' | 'selectable';\n\n  /**\n   * When property is set to \"auto\", the date picker will automatically adjust to the height of the rows of weeks.\n   * This is mainly to be used in conjunction with InputDatePicker.\n   * <p>If not specified, defaults to the theme specified height.<br/>\n   */\n  height?: 'auto';\n\n  /**\n   * Specifies whether the component is readonly.\n   */\n  isReadonly?: boolean;\n\n  /**\n   * The monthAndYearPicker property can be used to specify whether or not the DatePicker should show the\n   * Months Grid View and Years Grid View.\n   */\n  monthAndYearPicker?: 'on' | 'off';\n\n  /**\n   * The maximum selectable date. The max must be equal or greater than the min if they are both specified or an error is thrown.\n   */\n  max?: CalendarDateRequired;\n\n  /**\n   * Specifies the component style maxWidth.\n   * <p>If not specified, defaults to the theme specified maxWidth.<br/>\n   * This attribute accepts values of type:<br/>\n   * 0 | `${number}${CssUnits}` | `${number}x` | `--${string}` | `var($string})` | `${number}%`</p>\n   * <p>When this component is used in composition and the component should take up 100% of the parent container's\n   * width, set maxWidth to '100%'.<br/>\n   * Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n   * set the maxWidth property to the same value.</p>\n   */\n  maxWidth?: Size;\n\n  /**\n   * The minimum selectable date. The min must be equal or less than the max if they are both specified or an error is thrown.\n   */\n  min?: CalendarDateRequired;\n\n  /**\n   * The todayTimeZone property is used to compute what the highlighted today cell is for the DatePicker.\n   * This defaults to the user's system timezone.\n   * <p>\n   * The only reason an application would set the todayTimeZone property is if they want the\n   * highlighted today cell to be in a different timezone than the user's system's timezone,\n   * like if the user has a preferred timezone that is not where they are physically working.\n   * </p>\n   */\n  todayTimeZone?: Intl.DateTimeFormatOptions['timeZone'];\n\n  /**\n   * Specifies how to render the 'Go to today' button.\n   * <ul>\n   * <li>'visible' - set this property to 'visible' to show the 'Go to today' button.</li>\n   * <li>'hidden' - set this property to 'hidden' to hide the 'Go to today' button.</li>\n   * </ul>\n   */\n  todayButton?: 'visible' | 'hidden';\n\n  /**\n   * The value of the DatePicker. The value property is the date that looks selected in the DatePicker.\n   * If the value is undefined, no day will look selected.\n   * <p>\n   * The DatePicker initially opens to the selected date if there is one and it is within the min/max range.\n   * If there is no value, the DatePicker initially opens to today's month.\n   * </p>\n   */\n  value?: CalendarDateRequired;\n\n  /**\n   * Specifies the component style width.\n   * <p>If not specified, defaults to '100%'.</p>\n   * <p>This attribute accepts values of type:</p>\n   * <p>0 | `${number}${CssUnits}` | `${number}x` | `--${string}`  | `var($string})` | `${number}%`</p>\n   * <br/>\n   * <p>Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n   * set the maxWidth property to the same value.</p>\n   */\n  width?: Size;\n\n  /**\n   * Callback invoked when the user selects a date in the DatePicker. This callback is called even when the previous\n   * value and the value are the same, that is, when the user selects an already selected date.\n   * The app needs to handle this to write back the controlled 'value' property, or else no date will be shown\n   * to be selected.\n   * If the app is using a DatePicker to control another component, like as a way to navigate an Event Calendar,\n   * then they would listen to the onCommit to get the value of the selected date.\n   */\n  onCommit: (detail: ValueUpdateDetail<CalendarDateRequired>) => void;\n\n  /**\n   * Whether week of the year will be shown in the DatePicker. The default calculation follows the\n   * rule for ISO 8601 as follows: The first week of the year is defined as the week that contains \n   * the first Thursday. Therefore, if January 1st falls on a Friday, it is considered part of the last week \n   * of the previous year. Conversely, if December 31st falls on a Wednesday, it is part of week 1 of the following year.\n   */\n  weekDisplay?: 'none' | 'number';\n};\n\n/**\n * A DatePicker is a calendar interface that allows users to select a single date.\n */\nexport const DatePicker = ({\n  dayFormatter,\n  daysOutsideMonth,\n  height,\n  isReadonly = false,\n  monthAndYearPicker = 'on',\n  max,\n  maxWidth,\n  min,\n  value,\n  testId,\n  todayTimeZone,\n  todayButton = 'visible',\n  weekDisplay = 'none',\n  width,\n  onCommit\n}: Props) => {\n  const { accessibleLabels, handlers, state, todaysDate, toggleSelection, viewContainerProps } =\n    useDatePicker({\n      isReadonly,\n      max,\n      min,\n      todayTimeZone,\n      value,\n      onCommit\n    });\n  const { month, year } = state.focusableDate;\n  const isMonthYearPickerEnabled = monthAndYearPicker === 'on' && !isReadonly;\n  // When the screen is < 360px, we hide the DatePickerHeader's today button and show a Today button\n  // on the bottom of the DatePicker instead.\n  // NOTE: I cannot use xs, sm here since useBreakpointValues's types do not allow it.\n  const shouldShowTodayFooterButton = useBreakpointValues(\n    {\n      sm: true,\n      md: false\n    },\n    { sm: '0px', md: '360px' }\n  );\n\n  const showTodayFooterButton =\n    !state.isTodayNavigationButtonHidden &&\n    shouldShowTodayFooterButton &&\n    todayButton === 'visible';\n\n  // we need to render the baseTheme on the root dom element so that the CSS vars in datePickerPropVars will be defined.\n  const { classes } = useComponentTheme(DatePickerRedwoodTheme);\n\n  const testIdProps = useTestId(testId);\n\n  return (\n    <div class={classes} {...testIdProps}>\n      <Flex\n        direction=\"column\"\n        gap={\n          state.currentView === 'monthView'\n            ? datePickerPropVars.calendarGridRowGap\n            : datePickerPropVars.monthYearGridRowGap\n        }\n        height={\n          height === 'auto'\n            ? undefined\n            : showTodayFooterButton\n            ? datePickerPropVars.todayFooterButtonHeight\n            : datePickerPropVars.height\n        }\n        maxWidth={maxWidth !== undefined ? maxWidth : datePickerPropVars.maxWidth}\n        width={width !== undefined ? width : datePickerPropVars.width}>\n        <DatePickerHeader\n          testId={testId ? testId + '_header' : undefined}\n          month={month}\n          year={year}\n          isPreviousNavigationButtonHidden={state.isPreviousNavigationButtonHidden}\n          isTodayNavigationButtonHidden={\n            todayButton === 'hidden' ||\n            state.isTodayNavigationButtonHidden ||\n            shouldShowTodayFooterButton\n          }\n          isNextNavigationButtonHidden={state.isNextNavigationButtonHidden}\n          monthYearHeader={isMonthYearPickerEnabled ? 'independentButtons' : 'text'}\n          toggleSelection={isMonthYearPickerEnabled ? toggleSelection : undefined}\n          previousNavigationAccessibleLabel={accessibleLabels.previous}\n          todayNavigationAccessibleLabel={accessibleLabels.goToToday}\n          nextNavigationAccessibleLabel={accessibleLabels.next}\n          onTodayNavigationAction={handlers.handleTodayNavigation}\n          onPreviousNavigationAction={handlers.handlePreviousNavigation}\n          onNextNavigationAction={handlers.handleNextNavigation}\n          onMonthToggle={isMonthYearPickerEnabled ? handlers.handleMonthToggle : undefined}\n          onYearToggle={isMonthYearPickerEnabled ? handlers.handleYearToggle : undefined}\n        />\n        <div {...viewContainerProps}>\n          {state.currentView === 'monthView' && (\n            <MonthView\n              dayFormatter={dayFormatter}\n              daysOutsideMonth={daysOutsideMonth}\n              isReadonly={isReadonly}\n              max={max}\n              min={min}\n              selectedDate={value}\n              focusableDate={state.focusableDate}\n              isFocused={state.isViewFocused}\n              testId={testId ? testId + '_monthView' : undefined}\n              todaysDate={todaysDate}\n              onNavigation={handlers.handleMonthViewNavigation}\n              onAction={handlers.handleMonthViewAction}\n              weekDisplay={weekDisplay}\n            />\n          )}\n          {state.currentView === 'monthsGridView' && (\n            <MonthsGridView\n              currentMonth={todaysDate.month}\n              focusableMonth={state.focusableMonth}\n              isFocused={state.isViewFocused}\n              selectedMonth={month}\n              testId={testId ? testId + '_monthsGridView' : undefined}\n              onAction={handlers.handleMonthsGridViewAction}\n              onNavigation={handlers.handleMonthsGridViewNavigation}\n            />\n          )}\n          {state.currentView === 'yearsGridView' && (\n            <YearsGridView\n              currentYear={todaysDate.year}\n              focusableYear={state.focusableYear}\n              isFocused={state.isViewFocused}\n              selectedYear={year}\n              testId={testId ? testId + '_yearsGridView' : undefined}\n              onAction={handlers.handleYearsGridViewAction}\n              onNavigation={handlers.handleYearsGridViewNavigation}\n            />\n          )}\n        </div>\n        {showTodayFooterButton && (\n          <div>\n            <TodayButton\n              testId={testId ? testId + '_footerTodayButton' : undefined}\n              todayNavigationLabel={accessibleLabels.today}\n              todayNavigationAriaLabel={accessibleLabels.goToToday}\n              onTodayNavigationAction={handlers.handleTodayNavigation}\n            />\n          </div>\n        )}\n      </Flex>\n    </div>\n  );\n};\n"],"names":["datePickerViewActionTypes","monthViewActionTypes","monthsGridViewActionTypes","yearsGridViewActionTypes","datePickerReducer","state","action","type","payload","currentView","isViewFocused","isNextNavigationButtonHidden","isPreviousNavigationButtonHidden","isTodayNavigationButtonHidden","focusableMonth","focusableDate","month","focusableYear","year","previousDay","addToCalendarDate","days","nextDay","prevMonth","months","nextMonth","previousYear","years","nextYear","currentDate","firstDayOfMonthDate","day","lastDay","getDaysInMonth","lastDayOfMonthDate","previousMonth","addToMonth","monthSteps","goToDate","addToYear","yearSteps","headerToggleSelection","monthView","monthsGridView","yearsGridView","useDatePicker","isReadonly","max","min","todayTimeZone","value","onCommit","isCalendarDateBefore","Error","todaysDate","getCalendarDateToday","initialFocusableDate","useMemo","constrainCalendarDate","actions","initialState","dispatch","useReducer","lastValueFromParentRef","useRef","compareDates","current","actionsObject","forEach","useDatePickerState","translations","useTranslationBundle","accessibleLabels","next","datePicker_next","previous","datePicker_prev","goToToday","datePicker_goToToday","today","datePicker_today","handlers","handleMonthToggle","useCallback","undefined","handleYearToggle","handleTodayNavigation","handlePreviousNavigation","previousDecade","handleNextNavigation","nextDecade","handleMonthViewAction","date","daySelected","previousValue","handleMonthViewNavigation","detail","direction","previousMonthAndFocus","nextMonthAndFocus","handleMonthsGridViewAction","monthSelected","handleMonthsGridViewNavigation","nextMonthRowInGridView","nextMonthInGridView","previousMonthInGridView","previousMonthRowInGridView","handleYearsGridViewAction","yearSelected","handleYearsGridViewNavigation","nextYearRowInGridView","nextYearInGridView","nextDecadeAndFocus","previousYearInGridView","previousDecadeAndFocus","previousYearRowInGridView","focusProps","useFocusWithin","onBlurWithin","viewBlur","onFocusWithin","viewFocus","toggleSelection","viewContainerProps","TodayButton","onTodayNavigationAction","testId","todayNavigationAriaLabel","todayNavigationLabel","_jsx","jsx","Flex","children","Button","label","size","onAction","dayFormatter","daysOutsideMonth","height","monthAndYearPicker","maxWidth","todayButton","weekDisplay","width","isMonthYearPickerEnabled","shouldShowTodayFooterButton","useBreakpointValues","sm","md","showTodayFooterButton","classes","useComponentTheme","DatePickerRedwoodTheme","testIdProps","useTestId","class","_jsxs","jsxs","gap","datePickerPropVars","calendarGridRowGap","monthYearGridRowGap","todayFooterButtonHeight","DatePickerHeader","monthYearHeader","previousNavigationAccessibleLabel","todayNavigationAccessibleLabel","nextNavigationAccessibleLabel","onPreviousNavigationAction","onNextNavigationAction","onMonthToggle","onYearToggle","MonthView","selectedDate","isFocused","onNavigation","MonthsGridView","currentMonth","selectedMonth","YearsGridView","currentYear","selectedYear"],"mappings":"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"}