@oracle/oraclejet-preact 20.0.0 → 20.0.2

package/amd/InputDatePicker-7227a858.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './Calendar-feffa985', './InputDateMask-c91323d7', './HiddenAccessible-037ef42d', './IconButton-dc1be00e', './clientHints-6d361eaa', './FormFieldContext-a024b891', './logger-0f873e29', './TabbableModeContext-a9c97640', './useTranslationBundle-e4dd341e', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-a59440e5', './Flex-4b81b412', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-0b288129', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-2bb62284', 'css!./IconStyle.styles.css', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './Popup-6b57cc3e', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', 'module', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './UNSAFE_InputDatePicker/themes/InputDatePickerDropdownStyles.css', './Sheet-1d02491d', './DatePicker-bf521b1c', './SectionedContent-74559d9d', './stringUtils-4ffd9d59', './FormContext-6b0879a0', './useFormContext-b8cbbb21', './useId-c9578d26', './getFormatParse-918996fc', './maskUtils-339ed9b6', './useHiddenTestMethod-8321d341', './calendarDateUtils-ab83f6b1', './useTestId-f4240cbd'], (function(e,s,t,a,n,o,r,i,l,d,c,u,m,p,h,y,b,f,C,D,v,S,k,x,A,T,g,F,I,V,P,R,w,M,U,_,j,H,B,E,N,L,O,Y,Z,W,z,G,q,J,K,Q,X,$,ee,se,te){"use strict";const ae=({anchorRef:e,assistiveText:t,dayFormatter:n,daysOutsideMonth:o,helpSourceLink:r,helpSourceText:i,isDisabled:l,isOpen:c,isReadonly:u,label:p,onClose:h,onCommit:y,max:f,messages:C,min:D,monthAndYearPicker:v,testId:S,todayButton:k,todayTimeZone:x,userAssistanceDensity:A,value:T,weekDisplay:g})=>{const[F,I]=a.useState(!1),[V,P]=a.useState(c),R=a.useCallback((e=>{I(e.placement.startsWith("top"))}),[]);V!==c&&(P(c),c||I(!1));const w=ne(),{datePicker_label:M}=m.useTranslationBundle("@oracle/oraclejet-preact"),U=M(),_=s.jsx(z.DatePicker,{dayFormatter:n,daysOutsideMonth:o,height:w?void 0:"auto",onCommit:y,max:f,min:D,maxWidth:w?"100%":void 0,width:"100%",monthAndYearPicker:v,testId:S,todayTimeZone:x,todayButton:k,value:T,weekDisplay:g}),j=!c||F&&!w||l||u||!(t||r||C&&C.length>0)||"efficient"!==A&&"reflow"!==A?void 0:s.jsx(d.FormFieldContext.Provider,{value:{isFocused:!0},children:s.jsx("div",{class:Z.userAssistanceStyles,children:s.jsx(b.InlineUserAssistance,{assistiveText:t,fieldLabel:p,helpSourceLink:r,helpSourceText:i,messages:C,userAssistanceDensity:A})})}),H=S?S+(w?"_sheet":"_dropdown"):void 0,B=s.jsx("div",{class:Z.dropdownStyles,children:s.jsx(G.SectionedContent,{"aria-label":U,footer:j,hasFocusTrap:!0,main:_,role:"dialog",testId:H})});return w?s.jsx(W.Sheet,{initialFocus:"firstFocusable",isOpen:c,onClose:h,children:s.jsx(G.SectionedContent,{"aria-label":U,footer:j,hasFocusTrap:!0,main:_,role:"dialog",testId:H})}):s.jsx(G.StickyPositioningDropdown,{anchorRef:e,initialFocus:"firstFocusable",isOpen:c,onClose:h,onPosition:R,sizeOptions:{isMaxWidthAdjusted:!1,isMaxHeightAdjusted:!0},children:B})},ne=()=>"phone"===l.getClientHints().deviceType,oe=e=>e&&se.isCompleteCalendarDate(e)?e:void 0,re=(e,s)=>{switch(s.type){case"dateChanged":return{...e,dateValue:s.data,completeDateValue:oe(s.data)};case"dateSelected":return{...e,dateValue:s.data,completeDateValue:s.data};case"reset":return{completeDateValue:oe(s.data),dateValue:s.data};default:return e}},ie=({isDisabled:e,isReadonly:s,onCommit:t,onInput:n,rootRef:o,value:r})=>{const[i,l]=a.useState(!1),d=a.useRef(null),c=a.useRef(null),u=a.useRef(!1),m=a.useRef(),p=a.useRef(r),h=a.useRef(r),y=a.useRef(r),b=a.useRef(!1),{state:f,dispatch:C}=(({value:e})=>{const[s,t]=a.useReducer(re,{completeDateValue:oe(e),dateValue:e});return{state:s,dispatch:t}})({value:r});$.calendarDatesAreDifferent(y.current,r)&&(y.current=r,$.calendarDatesAreDifferent(r,f.dateValue)&&(C({type:"reset",data:r}),h.current=r,p.current=r)),a.useEffect((()=>{$.calendarDatesAreDifferent(f.dateValue,h.current)&&(n({previousValue:h.current,value:f.dateValue}),h.current=f.dateValue),b.current&&$.calendarDatesAreDifferent(f.dateValue,p.current)&&(t?.({previousValue:p.current,value:f.dateValue}),p.current=f.dateValue,b.current=!1)}),[t,n,f.dateValue]);const D=a.useCallback((e=>{C({type:"dateChanged",data:e.value})}),[C]),v=a.useCallback((e=>{$.calendarDatesAreDifferent(p.current,e.value)&&(t?.({value:e.value,previousValue:p.current}),p.current=e.value)}),[t]),S=a.useCallback((()=>{u.current||l((e=>!e)),u.current=!1}),[]),k=a.useCallback((e=>{"outsideMousedown"===e.reason?(u.current=!0,clearTimeout(m.current),m.current=setTimeout((()=>{u.current=!1}),200)):"dismissed"!==e.reason&&"keyboardDismissed"!==e.reason||d.current?.focus(),l(!1)}),[]),x=a.useCallback((e=>{d.current?.focus(),b.current=!0,C({type:"dateSelected",data:e.value}),l(!1)}),[C]),A=a.useCallback((a=>s||e?Promise.reject("Component is readonly or disabled"):(n({value:a,previousValue:r}),t?.({value:a,previousValue:r}),Promise.resolve())),[r,e,s,t,n]);return ee.useHiddenTestMethod({elementRef:o,method:A,name:"_changeValue"}),{calendarIconActionHandler:S,datePickerCommitHandler:x,dropdownCloseHandler:k,completeDateValue:f.completeDateValue,dateValue:f.dateValue,iconRef:d,isOpen:i,maskCommitHandler:v,maskInputHandler:D,maskRef:c}},le=t.forwardRef((({"aria-describedby":e,assistiveText:t,dayFormatter:l,daysOutsideMonth:d,helpSourceLink:c,helpSourceText:u,isDisabled:p,isReadonly:h,label:y,max:b,messages:f,min:C,monthAndYearPicker:D,todayTimeZone:v,todayButton:S,value:k,onCommit:x,onInput:A,testId:T,userAssistanceDensity:g,weekDisplay:F,...I},V)=>{const P=te.useTestId(T),R=a.useRef(null),{calendarIconActionHandler:w,datePickerCommitHandler:M,completeDateValue:U,dateValue:_,dropdownCloseHandler:j,iconRef:H,isOpen:B,maskCommitHandler:E,maskInputHandler:N,maskRef:L}=ie({isDisabled:p,isReadonly:h,onCommit:x,onInput:A,rootRef:R,value:k}),O=a.useRef(null),{inputDatePicker_selectDate:Y,inputDatePicker_instruction:Z}=m.useTranslationBundle("@oracle/oraclejet-preact"),W=Y(),{userAssistanceDensity:z}=K.useFormContext(),G=g??z;a.useImperativeHandle(V,(()=>({focus:()=>{L.current?.focus()},blur:()=>{L.current?.blur()}})));const J=Q.useId(),X=Z(),$=p||h?void 0:s.jsx(r.HiddenAccessible,{id:J,isHidden:!0,children:X}),ee=p||h?e:q.l([e,J]),se=s.jsx(i.IconButton,{"aria-haspopup":"dialog","aria-label":W,isDisabled:p,ref:H,size:"sm",testId:T?T+"_calendarIcon":void 0,variant:"ghost",onAction:w,children:s.jsx(n.SvgCalendar,{})}),ne=B;return s.jsxs("div",{...P,ref:R,children:[s.jsx(o.InputDateMaskContext.Provider,{value:{isDropdownOpen:B,isInputDatePickerParent:!0},children:s.jsx(o.InputDateMask,{"aria-describedby":ee,assistiveText:t,endContent:se,helpSourceLink:c,helpSourceText:u,isDisabled:p,isReadonly:h,label:y,onCommit:E,onInput:N,mainFieldRef:O,messages:f,testId:T?T+"_mask":void 0,ref:L,userAssistanceDensity:g,value:_,...I})}),$,ne&&s.jsx(ae,{anchorRef:O,assistiveText:t,dayFormatter:l,daysOutsideMonth:d,helpSourceLink:c,helpSourceText:u,isDisabled:p,isReadonly:h,isOpen:B,label:y,onClose:j,onCommit:M,max:b,messages:f,min:C,monthAndYearPicker:D,testId:T?T+"_datePicker":void 0,todayTimeZone:v,todayButton:S,userAssistanceDensity:G,value:U,weekDisplay:F})]})}));e.InputDatePicker=le}));
+//# sourceMappingURL=InputDatePicker-7227a858.js.map

package/amd/{InputDatePicker-48633486.js.map → InputDatePicker-7227a858.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InputDatePicker-48633486.js","sources":["../../src/UNSAFE_InputDatePicker/InputDatePickerDropdown.tsx","../../src/UNSAFE_InputDatePicker/useInputDatePickerState.ts","../../src/UNSAFE_InputDatePicker/useInputDatePicker.ts","../../src/UNSAFE_InputDatePicker/InputDatePicker.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 { ComponentProps } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { DatePicker } from '#UNSAFE_DatePicker';\nimport { type CloseDetail as DropdownCloseDetail } from '#UNSAFE_Dropdown';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { InputDatePicker } from './InputDatePicker';\nimport { dropdownStyles, userAssistanceStyles } from './themes/InputDatePickerDropdownStyles.css';\nimport { PositionData } from '../UNSAFE_Floating';\nimport { StickyPositioningDropdown } from '#PRIVATE_FormControls';\nimport { SectionedContent } from '#PRIVATE_FormControls';\nimport { type CloseDetail as SheetCloseDetail, Sheet } from '#UNSAFE_Sheet';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { SizeOptions } from '#UNSAFE_Floating/Floating';\n\ntype StickyPositioningDropdownProps = ComponentProps<typeof StickyPositioningDropdown>;\ntype InputDatePickerProps = ComponentProps<typeof InputDatePicker>;\ntype PickedPropsFromInputDatePicker = Pick<\n  InputDatePickerProps,\n  | 'assistiveText'\n  | 'dayFormatter'\n  | 'daysOutsideMonth'\n  | 'helpSourceLink'\n  | 'helpSourceText'\n  | 'isDisabled'\n  | 'isReadonly'\n  | 'label'\n  | 'messages'\n  | 'min'\n  | 'max'\n  | 'monthAndYearPicker'\n  | 'todayButton'\n  | 'todayTimeZone'\n  | 'userAssistanceDensity'\n  | 'value'\n  | 'weekDisplay'\n>;\ntype DatePickerProps = ComponentProps<typeof DatePicker>;\ntype PickedPropsFromDatePicker = Pick<DatePickerProps, 'value' | 'onCommit'>;\ntype PickedPropsFromDropdown = Omit<StickyPositioningDropdownProps, 'onClose'>;\ntype CloseDetail = SheetCloseDetail | DropdownCloseDetail;\n\ntype Props = PickedPropsFromDatePicker &\n  PickedPropsFromInputDatePicker &\n  PickedPropsFromDropdown &\n  TestIdProps & {\n    /**\n     * Called when the dropdown or sheet is supposed to be closed.\n     */\n    onClose?: (detail: CloseDetail) => void;\n  };\n\n/**\n * Component that renders DatePicker either inside a dropdown or sheet; at small screen\n * widths, it renders inside a sheet. Additionally, when a dropdown is being shown beneath\n * the component, we also show any user assistance text or messages below the picker\n * because otherwise that information would be obscured from view. When a sheet is being\n * shown, it will always display UA and messages at the bottom of the sheet.\n */\nconst InputDatePickerDropdown = ({\n  anchorRef,\n  assistiveText,\n  dayFormatter,\n  daysOutsideMonth,\n  helpSourceLink,\n  helpSourceText,\n  isDisabled,\n  isOpen,\n  isReadonly,\n  label,\n  onClose,\n  onCommit,\n  max,\n  messages,\n  min,\n  monthAndYearPicker,\n  testId,\n  todayButton,\n  todayTimeZone,\n  userAssistanceDensity,\n  value,\n  weekDisplay\n}: Props) => {\n  // If the dropdown opens above the component, we don't want to show UA or messages.\n  const [isDropdownAbove, setDropdownAbove] = useState(false);\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  const handleDropdownPosition = useCallback<\n    NonNullable<StickyPositioningDropdownProps['onPosition']>\n  >((data: PositionData) => {\n    setDropdownAbove(data.placement.startsWith('top'));\n  }, []);\n  // Reset the flag when the dropdown is closed.\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setDropdownAbove(false);\n    }\n  }\n\n  const sizeOptions: SizeOptions = {\n    isMaxWidthAdjusted: false,\n    isMaxHeightAdjusted: true\n  };\n\n  // On mobile phones, the dropdown becomes a sheet.\n  const shouldShowSheet = isPhone();\n\n  const { datePicker_label } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const datePickerAriaLabel = datePicker_label();\n\n  const datePickerMainContent = (\n    <DatePicker\n      dayFormatter={dayFormatter}\n      daysOutsideMonth={daysOutsideMonth}\n      height={!shouldShowSheet ? 'auto' : undefined}\n      onCommit={onCommit}\n      max={max}\n      min={min}\n      // for sheet, we want the width to grow to the width of the sheet, otherwise it will use the theme default.\n      maxWidth={shouldShowSheet ? '100%' : undefined}\n      width=\"100%\"\n      monthAndYearPicker={monthAndYearPicker}\n      testId={testId}\n      todayTimeZone={todayTimeZone}\n      todayButton={todayButton}\n      value={value}\n      weekDisplay={weekDisplay}\n    />\n  );\n\n  const inlineUserAssistanceFooter =\n    isOpen &&\n    (!isDropdownAbove || shouldShowSheet) &&\n    !isDisabled &&\n    !isReadonly &&\n    (assistiveText || helpSourceLink || (messages && messages.length > 0)) &&\n    (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (\n      <FormFieldContext.Provider value={{ isFocused: true }}>\n        <div class={userAssistanceStyles}>\n          <InlineUserAssistance\n            assistiveText={assistiveText}\n            fieldLabel={label}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            messages={messages}\n            userAssistanceDensity={userAssistanceDensity}\n          />\n        </div>\n      </FormFieldContext.Provider>\n    ) : undefined;\n\n  const contentTestId = testId ? testId + (shouldShowSheet ? '_sheet' : '_dropdown') : undefined;\n\n  // The same content is displayed either in a dropdown or sheet: date picker and inline UA.\n  // Add styling to the dropdown to enforce a fixed width.\n  const dropdownContent = (\n    <div class={dropdownStyles}>\n      <SectionedContent\n        aria-label={datePickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={datePickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </div>\n  );\n\n  const dropdown = shouldShowSheet ? (\n    <Sheet initialFocus=\"firstFocusable\" isOpen={isOpen} onClose={onClose}>\n      <SectionedContent\n        aria-label={datePickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={datePickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </Sheet>\n  ) : (\n    <StickyPositioningDropdown\n      anchorRef={anchorRef}\n      initialFocus=\"firstFocusable\"\n      isOpen={isOpen}\n      onClose={onClose}\n      onPosition={handleDropdownPosition}\n      sizeOptions={sizeOptions}>\n      {dropdownContent}\n    </StickyPositioningDropdown>\n  );\n\n  return dropdown;\n};\n\nconst isPhone = () => {\n  return getClientHints().deviceType === 'phone';\n};\n\nexport { InputDatePickerDropdown, type CloseDetail };\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 { useReducer } from 'preact/hooks';\nimport type { CalendarDate, CalendarDateRequired } from '#utils/UNSAFE_calendarDateUtils';\nimport { isCompleteCalendarDate } from '#utils/UNSAFE_calendarDateUtils';\n\ntype InputDatePickerState = {\n  /**\n   * If dateValue is a complete date, then completeDateValue is the same as dateValue\n   * otherwise is is undefined. We need to maintain separate states because\n   * InputDateMask uses CalendarDate, but DatePicker uses CalendarDateRequired.\n   * If the user types a partial date then opens the picker, we treat that as\n   * no selection. The picker opens to the current month showing today.\n   */\n  completeDateValue?: CalendarDateRequired;\n\n  /**\n   * Represents the current date value of the component. The user either selected\n   * the date in the picker, or typed it into the date field.\n   */\n  dateValue?: CalendarDate;\n};\n\ntype DateChangedAction = { type: 'dateChanged'; data?: CalendarDate };\ntype DateResetAction = { type: 'reset'; data?: CalendarDate };\ntype DateSelectedAction = { type: 'dateSelected'; data?: CalendarDateRequired };\ntype InputDatePickerReducerAction = DateChangedAction | DateResetAction | DateSelectedAction;\n\n// If dateVal is a complete date, return it as a CalendarDateRequired\n// otherwise return undefined.\nconst convertToCalendarDateRequired = (dateVal?: CalendarDate) => {\n  return !dateVal || !isCompleteCalendarDate(dateVal)\n    ? undefined\n    : (dateVal as CalendarDateRequired);\n};\n\n// Use a reducer function to manage InputDatePickerState.\nconst inputDatePickerReducer = (\n  state: InputDatePickerState,\n  action: InputDatePickerReducerAction\n): InputDatePickerState => {\n  switch (action.type) {\n    case 'dateChanged': {\n      return {\n        ...state,\n        dateValue: action.data,\n        completeDateValue: convertToCalendarDateRequired(action.data)\n      };\n    }\n    case 'dateSelected': {\n      return { ...state, dateValue: action.data, completeDateValue: action.data };\n    }\n    case 'reset': {\n      return {\n        completeDateValue: convertToCalendarDateRequired(action.data),\n        dateValue: action.data\n      };\n    }\n    default:\n      return state;\n  }\n};\n\ntype Props = {\n  /**\n   * The value of the InputDatePicker, or undefined.\n   */\n  value?: CalendarDate;\n};\n\n/**\n * useInputDatePickerState calls useReducer to determine the initial state. Any changes to that state\n * are managed by dispatching actions to the reducer function.\n */\nconst useInputDatePickerState = ({ value }: Props) => {\n  const [state, dispatch] = useReducer(inputDatePickerReducer, {\n    completeDateValue: convertToCalendarDateRequired(value),\n    dateValue: value\n  });\n\n  return { state, dispatch };\n};\n\nexport { useInputDatePickerState };\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 type { ComponentProps, RefObject } from 'preact';\nimport type { ElementRef } from 'preact/compat';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport type { CalendarDate, CalendarDateRequired } from '#utils/UNSAFE_calendarDateUtils';\nimport { calendarDatesAreDifferent } from '#utils/PRIVATE_dayUtils';\nimport { DatePicker } from '#UNSAFE_DatePicker';\nimport { CloseDetail, InputDatePickerDropdown } from './InputDatePickerDropdown';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport { InputDateMask } from '#UNSAFE_InputDateMask';\nimport { InputDatePicker } from './InputDatePicker';\nimport { useHiddenTestMethod } from '#hooks/UNSAFE_useHiddenTestMethod';\nimport { useInputDatePickerState } from './useInputDatePickerState';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\n\ntype InputDatePickerProps = ComponentProps<typeof InputDatePicker>;\ntype InputDateMaskProps = ComponentProps<typeof InputDateMask>;\ntype DatePickerProps = ComponentProps<typeof DatePicker>;\ntype IconButtonProps = ComponentProps<typeof IconButton>;\ntype DropdownProps = ComponentProps<typeof InputDatePickerDropdown>;\n\ntype IconButtonHandle = ElementRef<typeof IconButton>;\n\ntype Props = {\n  isDisabled: InputDatePickerProps['isDisabled'];\n  isReadonly: InputDatePickerProps['isReadonly'];\n  onCommit: InputDatePickerProps['onCommit'];\n  onInput: InputDatePickerProps['onInput'];\n  rootRef: RefObject<HTMLElement>;\n  value: InputDatePickerProps['value'];\n};\n\n/**\n * Hook that provides handlers and other functionality for InputDatePicker.\n */\nconst useInputDatePicker = ({\n  isDisabled,\n  isReadonly,\n  onCommit,\n  onInput,\n  rootRef,\n  value: currentValue\n}: Props) => {\n  // Whether the dropdown is open.\n  const [isOpen, setIsOpen] = useState(false);\n\n  // Ref to the calendar icon button.\n  const iconRef = useRef<IconButtonHandle>(null);\n\n  // Ref to the InputDateMask component.\n  const maskRef: RefObject<HTMLElement> = useRef<HTMLElement>(null);\n\n  // Keep track of whether the dropdown was just dismissed from an outside mousedown event.\n  const outsideMousedownRef = useRef<boolean>(false);\n  const outsideMousedownTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>();\n\n  // Keep track of the last date values passed to onInput and onCommit.\n  const lastCommittedDateRef = useRef<CalendarDate | undefined>(currentValue);\n  const lastDateRef = useRef<CalendarDate | undefined>(currentValue);\n\n  // Keep track of the last controlled value passed from the parent, so we can detect a programmatic change.\n  const lastValueFromParentRef = useRef<CalendarDate | undefined>(currentValue);\n\n  // Keep track of whether a date was selected in the date picker.\n  const dateSelectedRef = useRef<boolean>(false);\n\n  const { state, dispatch } = useInputDatePickerState({ value: currentValue });\n\n  // If a new value is being pushed from the parent, and that value differs from\n  // the current value 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 (calendarDatesAreDifferent(lastValueFromParentRef.current, currentValue)) {\n    lastValueFromParentRef.current = currentValue;\n    if (calendarDatesAreDifferent(currentValue, state.dateValue)) {\n      dispatch({ type: 'reset', data: currentValue });\n      lastDateRef.current = currentValue;\n      lastCommittedDateRef.current = currentValue;\n    }\n  }\n\n  // Reducer updates are async, so wait until the state updates and then call our callbacks.\n  useEffect(() => {\n    if (calendarDatesAreDifferent(state.dateValue, lastDateRef.current)) {\n      onInput({ previousValue: lastDateRef.current, value: state.dateValue });\n      lastDateRef.current = state.dateValue;\n    }\n    if (\n      dateSelectedRef.current &&\n      calendarDatesAreDifferent(state.dateValue, lastCommittedDateRef.current)\n    ) {\n      onCommit?.({ previousValue: lastCommittedDateRef.current, value: state.dateValue });\n      lastCommittedDateRef.current = state.dateValue;\n      dateSelectedRef.current = false;\n    }\n  }, [onCommit, onInput, state.dateValue]);\n\n  // Handle onInput from InputDateMask as segment values are being added or changed in the input field.\n  // We wait for the state to update before calling onInput.\n  const maskInputHandler = useCallback<InputDateMaskProps['onInput']>(\n    (detail: ValueUpdateDetail<CalendarDate>) => {\n      dispatch({ type: 'dateChanged', data: detail.value });\n    },\n    [dispatch]\n  );\n\n  // Handle onCommit from InputDateMask, which is called when the user presses Enter or the field is blurred.\n  const maskCommitHandler = useCallback<NonNullable<InputDateMaskProps['onCommit']>>(\n    (detail: ValueUpdateDetail<CalendarDate>) => {\n      // If the value we get from InputDateMask's onCommit differs from the last committed value, then call onCommit.\n      if (calendarDatesAreDifferent(lastCommittedDateRef.current, detail.value)) {\n        onCommit?.({ value: detail.value, previousValue: lastCommittedDateRef.current });\n        lastCommittedDateRef.current = detail.value;\n      }\n    },\n    [onCommit]\n  );\n\n  // Respond to onAction event from the calendar icon button. Toggles the date picker dropdown.\n  const calendarIconActionHandler = useCallback<NonNullable<IconButtonProps['onAction']>>(() => {\n    // Only toggle the value of isOpen if we didn't just dismiss the dropdown.\n    if (!outsideMousedownRef.current) {\n      setIsOpen((prevIsOpen) => !prevIsOpen);\n    }\n    outsideMousedownRef.current = false;\n  }, []);\n\n  const dropdownCloseHandler = useCallback<NonNullable<DropdownProps['onClose']>>(\n    (detail: CloseDetail) => {\n      // Keep track of when the dropdown is closed via outside mousedown, including when the calendar icon\n      // is clicked. We need this in order to toggle visibility of the picker and dropdown.\n      if (detail.reason === 'outsideMousedown') {\n        outsideMousedownRef.current = true;\n        clearTimeout(outsideMousedownTimerRef.current);\n\n        // Clear the flag after a short delay to ensure the dropdown can be opened again.\n        outsideMousedownTimerRef.current = setTimeout(() => {\n          outsideMousedownRef.current = false;\n        }, 200);\n      } else if (detail.reason === 'dismissed' || detail.reason === 'keyboardDismissed') {\n        // Focus the calendar icon when the dropdown is closed.\n        iconRef.current?.focus();\n      }\n      setIsOpen(false);\n    },\n    []\n  );\n\n  // Handle date selection in the picker.\n  //   - Updates the value in state.\n  //   - Closes the dropdown.\n  //   - Sets focus to the date field.\n  const datePickerCommitHandler = useCallback<DatePickerProps['onCommit']>(\n    (detail: ValueUpdateDetail<CalendarDateRequired>) => {\n      // Set focus to the calendar icon when a date is selected.\n      iconRef.current?.focus();\n\n      // Set a ref indicating a date was selected.\n      dateSelectedRef.current = true;\n      dispatch({ type: 'dateSelected', data: detail.value });\n      setIsOpen(false);\n    },\n    [dispatch]\n  );\n\n  // Create a changeValue method that can be called by a test adapter to simulate a user\n  // changing the value and committing it.\n  const changeValue = useCallback(\n    (newValue?: CalendarDate) => {\n      // We always want this method available on the DOM element so that a test can call it,\n      // but we only want it to change the value when the component is enabled because that's\n      // the only time the user could change the value through the UI.\n      if (!isReadonly && !isDisabled) {\n        onInput({ value: newValue, previousValue: currentValue });\n        onCommit?.({ value: newValue, previousValue: currentValue });\n        return Promise.resolve();\n      }\n      return Promise.reject('Component is readonly or disabled');\n    },\n    [currentValue, isDisabled, isReadonly, onCommit, onInput]\n  );\n  // Expose _changeValue as a hidden method on the root DOM.\n  useHiddenTestMethod({\n    elementRef: rootRef,\n    method: changeValue,\n    name: '_changeValue'\n  });\n\n  return {\n    calendarIconActionHandler,\n    datePickerCommitHandler,\n    dropdownCloseHandler,\n    completeDateValue: state.completeDateValue,\n    dateValue: state.dateValue,\n    iconRef,\n    isOpen,\n    maskCommitHandler,\n    maskInputHandler,\n    maskRef\n  };\n};\n\nexport { useInputDatePicker };\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 */\nimport { ComponentProps, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { useImperativeHandle, useRef } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { CalendarIcon } from '#PRIVATE_ThemedIcons/CalendarIcon';\nimport {\n  CalendarDate,\n  CalendarDatePlaceholders,\n  InputDateMask,\n  InputDateMaskContext\n} from '#UNSAFE_InputDateMask';\nimport { DatePicker } from '#UNSAFE_DatePicker';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport { InputDatePickerDropdown } from './InputDatePickerDropdown';\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { merge } from '@oracle/oraclejet-internal-utilities/stringUtils';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { useInputDatePicker } from './useInputDatePicker';\nimport { useTestId } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\n\ntype InputDateMaskProps = ComponentProps<typeof InputDateMask>;\ntype PickedPropsFromInputDateMask = Pick<\n  InputDateMaskProps,\n  | 'aria-describedby'\n  | 'assistiveText'\n  | 'columnSpan'\n  | 'helpSourceLink'\n  | 'helpSourceText'\n  | 'isDisabled'\n  | 'isReadonly'\n  | 'isRequired'\n  | 'isRequiredShown'\n  | 'label'\n  | 'labelEdge'\n  | 'labelStartWidth'\n  | 'messages'\n  | 'textAlign'\n  | 'testId'\n  | 'userAssistanceDensity'\n  | 'variant'\n>;\n\ntype DatePickerProps = ComponentProps<typeof DatePicker>;\ntype PickedPropsFromDatePicker = Pick<\n  DatePickerProps,\n  | 'dayFormatter'\n  | 'daysOutsideMonth'\n  | 'max'\n  | 'min'\n  | 'monthAndYearPicker'\n  | 'todayTimeZone'\n  | 'todayButton'\n  | 'weekDisplay'\n>;\n\ntype Props = PickedPropsFromInputDateMask &\n  PickedPropsFromDatePicker & {\n    /**\n     * If specified, overrides the locale specific order of the individual date segments\n     * in the date field as well as the locale specific separator. The value of each placeholder\n     * is only used when the type is 'literal', otherwise it is replaced with a translated\n     * placeholder for month, day, or year. The placeholders must include month, day, and year.\n     */\n    masks?: CalendarDatePlaceholders;\n\n    /**\n     * The current display value of the component.\n     * This is a CalendarDate, not CalendarDateRequired, because this is a controlled component and\n     * the user may type the month, day, and year separately. If a selection is made in the date\n     * picker, then the value is a complete date.\n     */\n    value?: CalendarDate;\n\n    /**\n     * Callback invoked when the user commits the entered value by blurring or hitting the enter key.\n     * It is also called when a selection is made in the date picker.\n     */\n    onCommit?: (detail: ValueUpdateDetail<CalendarDate>) => void;\n\n    /**\n     * Callback invoked each time the user changes the value of a segment. For example, if the user\n     * types '12' into the month segment, this callback will be called twice to change the month\n     * first to '1' and then '12'.\n     */\n    onInput: (detail: ValueUpdateDetail<CalendarDate>) => void;\n  };\n\n/**\n * InputDatePicker allows users to enter or select a single date using a calendar interface.\n */\nexport const InputDatePicker = forwardRef(\n  (\n    {\n      'aria-describedby': propDescribedBy,\n      assistiveText,\n      dayFormatter,\n      daysOutsideMonth,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled,\n      isReadonly,\n      label,\n      max,\n      messages,\n      min,\n      monthAndYearPicker,\n      todayTimeZone,\n      todayButton,\n      value,\n      onCommit,\n      onInput,\n      testId,\n      userAssistanceDensity: propUserAssistanceDensity,\n      weekDisplay,\n      ...dateMaskProps\n    }: Props,\n    ref?: Ref<FocusableHandle>\n  ) => {\n    const testIdProps = useTestId(testId);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const {\n      calendarIconActionHandler,\n      datePickerCommitHandler,\n      completeDateValue,\n      dateValue,\n      dropdownCloseHandler,\n      iconRef,\n      isOpen,\n      maskCommitHandler,\n      maskInputHandler,\n      maskRef\n    } = useInputDatePicker({\n      isDisabled,\n      isReadonly,\n      onCommit,\n      onInput,\n      rootRef,\n      value\n    });\n\n    const mainFieldRef = useRef<HTMLDivElement>(null);\n    const { inputDatePicker_selectDate, inputDatePicker_instruction } =\n      useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const calendarIconAriaLabel = inputDatePicker_selectDate();\n\n    // We need this to determine if UA/messaging should be shown in the dropdown.\n    const { userAssistanceDensity: formUserAssistanceDensity } = useFormContext();\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    useImperativeHandle(ref!, () => ({\n      focus: () => {\n        maskRef.current?.focus();\n      },\n      blur: () => {\n        maskRef.current?.blur();\n      }\n    }));\n\n    const maskFieldInstructionId = useId();\n    const maskFieldInstructionText = inputDatePicker_instruction();\n    const maskFieldInstruction =\n      !isDisabled && !isReadonly ? (\n        <HiddenAccessible id={maskFieldInstructionId} isHidden={true}>\n          {maskFieldInstructionText}\n        </HiddenAccessible>\n      ) : undefined;\n    const ariaDescribedBy =\n      !isDisabled && !isReadonly\n        ? merge([propDescribedBy, maskFieldInstructionId])\n        : propDescribedBy;\n\n    const endContent = (\n      <IconButton\n        aria-haspopup=\"dialog\"\n        aria-label={calendarIconAriaLabel}\n        isDisabled={isDisabled}\n        ref={iconRef}\n        size=\"sm\"\n        testId={testId ? testId + '_calendarIcon' : undefined}\n        variant=\"ghost\"\n        onAction={calendarIconActionHandler}>\n        <CalendarIcon />\n      </IconButton>\n    );\n\n    const shouldShowDropdown = isOpen as boolean;\n\n    return (\n      <div {...testIdProps} ref={rootRef}>\n        <InputDateMaskContext.Provider\n          value={{ isDropdownOpen: isOpen, isInputDatePickerParent: true }}>\n          <InputDateMask\n            aria-describedby={ariaDescribedBy}\n            assistiveText={assistiveText}\n            endContent={endContent}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            label={label}\n            onCommit={maskCommitHandler}\n            onInput={maskInputHandler}\n            mainFieldRef={mainFieldRef}\n            messages={messages}\n            testId={testId ? testId + '_mask' : undefined}\n            ref={maskRef}\n            userAssistanceDensity={propUserAssistanceDensity}\n            value={dateValue}\n            {...dateMaskProps}\n          />\n        </InputDateMaskContext.Provider>\n\n        {maskFieldInstruction}\n\n        {shouldShowDropdown && (\n          <InputDatePickerDropdown\n            anchorRef={mainFieldRef}\n            assistiveText={assistiveText}\n            dayFormatter={dayFormatter}\n            daysOutsideMonth={daysOutsideMonth}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            isOpen={isOpen}\n            label={label}\n            onClose={dropdownCloseHandler}\n            onCommit={datePickerCommitHandler}\n            max={max}\n            messages={messages}\n            min={min}\n            monthAndYearPicker={monthAndYearPicker}\n            testId={testId ? testId + '_datePicker' : undefined}\n            todayTimeZone={todayTimeZone}\n            todayButton={todayButton}\n            userAssistanceDensity={userAssistanceDensity}\n            value={completeDateValue}\n            weekDisplay={weekDisplay}\n          />\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputDatePickerDropdown","anchorRef","assistiveText","dayFormatter","daysOutsideMonth","helpSourceLink","helpSourceText","isDisabled","isOpen","isReadonly","label","onClose","onCommit","max","messages","min","monthAndYearPicker","testId","todayButton","todayTimeZone","userAssistanceDensity","value","weekDisplay","isDropdownAbove","setDropdownAbove","useState","prevIsOpen","setPrevIsOpen","handleDropdownPosition","useCallback","data","placement","startsWith","shouldShowSheet","isPhone","datePicker_label","useTranslationBundle","datePickerAriaLabel","datePickerMainContent","_jsx","DatePicker","height","undefined","maxWidth","width","inlineUserAssistanceFooter","length","FormFieldContext","Provider","isFocused","children","jsx","class","userAssistanceStyles","InlineUserAssistance","fieldLabel","contentTestId","dropdownContent","dropdownStyles","SectionedContent","footer","hasFocusTrap","main","role","Sheet","initialFocus","StickyPositioningDropdown","onPosition","sizeOptions","isMaxWidthAdjusted","isMaxHeightAdjusted","getClientHints","deviceType","convertToCalendarDateRequired","dateVal","isCompleteCalendarDate","inputDatePickerReducer","state","action","type","dateValue","completeDateValue","useInputDatePicker","onInput","rootRef","currentValue","setIsOpen","iconRef","useRef","maskRef","outsideMousedownRef","outsideMousedownTimerRef","lastCommittedDateRef","lastDateRef","lastValueFromParentRef","dateSelectedRef","dispatch","useReducer","useInputDatePickerState","calendarDatesAreDifferent","current","useEffect","previousValue","maskInputHandler","detail","maskCommitHandler","calendarIconActionHandler","dropdownCloseHandler","reason","clearTimeout","setTimeout","focus","datePickerCommitHandler","changeValue","newValue","Promise","reject","resolve","useHiddenTestMethod","elementRef","method","name","InputDatePicker","forwardRef","propDescribedBy","propUserAssistanceDensity","dateMaskProps","ref","testIdProps","useTestId","mainFieldRef","inputDatePicker_selectDate","inputDatePicker_instruction","calendarIconAriaLabel","formUserAssistanceDensity","useFormContext","useImperativeHandle","blur","maskFieldInstructionId","useId","maskFieldInstructionText","maskFieldInstruction","HiddenAccessible","id","isHidden","ariaDescribedBy","merge","endContent","IconButton","size","variant","onAction","CalendarIcon","shouldShowDropdown","_jsxs","InputDateMaskContext","isDropdownOpen","isInputDatePickerParent","InputDateMask"],"mappings":"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"}
+{"version":3,"file":"InputDatePicker-7227a858.js","sources":["../../src/UNSAFE_InputDatePicker/InputDatePickerDropdown.tsx","../../src/UNSAFE_InputDatePicker/useInputDatePickerState.ts","../../src/UNSAFE_InputDatePicker/useInputDatePicker.ts","../../src/UNSAFE_InputDatePicker/InputDatePicker.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 { ComponentProps } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { DatePicker } from '#UNSAFE_DatePicker';\nimport { type CloseDetail as DropdownCloseDetail } from '#UNSAFE_Dropdown';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { InputDatePicker } from './InputDatePicker';\nimport { dropdownStyles, userAssistanceStyles } from './themes/InputDatePickerDropdownStyles.css';\nimport { PositionData } from '../UNSAFE_Floating';\nimport { StickyPositioningDropdown } from '#PRIVATE_FormControls';\nimport { SectionedContent } from '#PRIVATE_FormControls';\nimport { type CloseDetail as SheetCloseDetail, Sheet } from '#UNSAFE_Sheet';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { SizeOptions } from '#UNSAFE_Floating/Floating';\n\ntype StickyPositioningDropdownProps = ComponentProps<typeof StickyPositioningDropdown>;\ntype InputDatePickerProps = ComponentProps<typeof InputDatePicker>;\ntype PickedPropsFromInputDatePicker = Pick<\n  InputDatePickerProps,\n  | 'assistiveText'\n  | 'dayFormatter'\n  | 'daysOutsideMonth'\n  | 'helpSourceLink'\n  | 'helpSourceText'\n  | 'isDisabled'\n  | 'isReadonly'\n  | 'label'\n  | 'messages'\n  | 'min'\n  | 'max'\n  | 'monthAndYearPicker'\n  | 'todayButton'\n  | 'todayTimeZone'\n  | 'userAssistanceDensity'\n  | 'value'\n  | 'weekDisplay'\n>;\ntype DatePickerProps = ComponentProps<typeof DatePicker>;\ntype PickedPropsFromDatePicker = Pick<DatePickerProps, 'value' | 'onCommit'>;\ntype PickedPropsFromDropdown = Omit<StickyPositioningDropdownProps, 'onClose'>;\ntype CloseDetail = SheetCloseDetail | DropdownCloseDetail;\n\ntype Props = PickedPropsFromDatePicker &\n  PickedPropsFromInputDatePicker &\n  PickedPropsFromDropdown &\n  TestIdProps & {\n    /**\n     * Called when the dropdown or sheet is supposed to be closed.\n     */\n    onClose?: (detail: CloseDetail) => void;\n  };\n\n/**\n * Component that renders DatePicker either inside a dropdown or sheet; at small screen\n * widths, it renders inside a sheet. Additionally, when a dropdown is being shown beneath\n * the component, we also show any user assistance text or messages below the picker\n * because otherwise that information would be obscured from view. When a sheet is being\n * shown, it will always display UA and messages at the bottom of the sheet.\n */\nconst InputDatePickerDropdown = ({\n  anchorRef,\n  assistiveText,\n  dayFormatter,\n  daysOutsideMonth,\n  helpSourceLink,\n  helpSourceText,\n  isDisabled,\n  isOpen,\n  isReadonly,\n  label,\n  onClose,\n  onCommit,\n  max,\n  messages,\n  min,\n  monthAndYearPicker,\n  testId,\n  todayButton,\n  todayTimeZone,\n  userAssistanceDensity,\n  value,\n  weekDisplay\n}: Props) => {\n  // If the dropdown opens above the component, we don't want to show UA or messages.\n  const [isDropdownAbove, setDropdownAbove] = useState(false);\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  const handleDropdownPosition = useCallback<\n    NonNullable<StickyPositioningDropdownProps['onPosition']>\n  >((data: PositionData) => {\n    setDropdownAbove(data.placement.startsWith('top'));\n  }, []);\n  // Reset the flag when the dropdown is closed.\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setDropdownAbove(false);\n    }\n  }\n\n  const sizeOptions: SizeOptions = {\n    isMaxWidthAdjusted: false,\n    isMaxHeightAdjusted: true\n  };\n\n  // On mobile phones, the dropdown becomes a sheet.\n  const shouldShowSheet = isPhone();\n\n  const { datePicker_label } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const datePickerAriaLabel = datePicker_label();\n\n  const datePickerMainContent = (\n    <DatePicker\n      dayFormatter={dayFormatter}\n      daysOutsideMonth={daysOutsideMonth}\n      height={!shouldShowSheet ? 'auto' : undefined}\n      onCommit={onCommit}\n      max={max}\n      min={min}\n      // for sheet, we want the width to grow to the width of the sheet, otherwise it will use the theme default.\n      maxWidth={shouldShowSheet ? '100%' : undefined}\n      width=\"100%\"\n      monthAndYearPicker={monthAndYearPicker}\n      testId={testId}\n      todayTimeZone={todayTimeZone}\n      todayButton={todayButton}\n      value={value}\n      weekDisplay={weekDisplay}\n    />\n  );\n\n  const inlineUserAssistanceFooter =\n    isOpen &&\n    (!isDropdownAbove || shouldShowSheet) &&\n    !isDisabled &&\n    !isReadonly &&\n    (assistiveText || helpSourceLink || (messages && messages.length > 0)) &&\n    (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (\n      <FormFieldContext.Provider value={{ isFocused: true }}>\n        <div class={userAssistanceStyles}>\n          <InlineUserAssistance\n            assistiveText={assistiveText}\n            fieldLabel={label}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            messages={messages}\n            userAssistanceDensity={userAssistanceDensity}\n          />\n        </div>\n      </FormFieldContext.Provider>\n    ) : undefined;\n\n  const contentTestId = testId ? testId + (shouldShowSheet ? '_sheet' : '_dropdown') : undefined;\n\n  // The same content is displayed either in a dropdown or sheet: date picker and inline UA.\n  // Add styling to the dropdown to enforce a fixed width.\n  const dropdownContent = (\n    <div class={dropdownStyles}>\n      <SectionedContent\n        aria-label={datePickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={datePickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </div>\n  );\n\n  const dropdown = shouldShowSheet ? (\n    <Sheet initialFocus=\"firstFocusable\" isOpen={isOpen} onClose={onClose}>\n      <SectionedContent\n        aria-label={datePickerAriaLabel}\n        footer={inlineUserAssistanceFooter}\n        hasFocusTrap={true}\n        main={datePickerMainContent}\n        role=\"dialog\"\n        testId={contentTestId}\n      />\n    </Sheet>\n  ) : (\n    <StickyPositioningDropdown\n      anchorRef={anchorRef}\n      initialFocus=\"firstFocusable\"\n      isOpen={isOpen}\n      onClose={onClose}\n      onPosition={handleDropdownPosition}\n      sizeOptions={sizeOptions}>\n      {dropdownContent}\n    </StickyPositioningDropdown>\n  );\n\n  return dropdown;\n};\n\nconst isPhone = () => {\n  return getClientHints().deviceType === 'phone';\n};\n\nexport { InputDatePickerDropdown, type CloseDetail };\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 { useReducer } from 'preact/hooks';\nimport type { CalendarDate, CalendarDateRequired } from '#utils/UNSAFE_calendarDateUtils';\nimport { isCompleteCalendarDate } from '#utils/UNSAFE_calendarDateUtils';\n\ntype InputDatePickerState = {\n  /**\n   * If dateValue is a complete date, then completeDateValue is the same as dateValue\n   * otherwise is is undefined. We need to maintain separate states because\n   * InputDateMask uses CalendarDate, but DatePicker uses CalendarDateRequired.\n   * If the user types a partial date then opens the picker, we treat that as\n   * no selection. The picker opens to the current month showing today.\n   */\n  completeDateValue?: CalendarDateRequired;\n\n  /**\n   * Represents the current date value of the component. The user either selected\n   * the date in the picker, or typed it into the date field.\n   */\n  dateValue?: CalendarDate;\n};\n\ntype DateChangedAction = { type: 'dateChanged'; data?: CalendarDate };\ntype DateResetAction = { type: 'reset'; data?: CalendarDate };\ntype DateSelectedAction = { type: 'dateSelected'; data?: CalendarDateRequired };\ntype InputDatePickerReducerAction = DateChangedAction | DateResetAction | DateSelectedAction;\n\n// If dateVal is a complete date, return it as a CalendarDateRequired\n// otherwise return undefined.\nconst convertToCalendarDateRequired = (dateVal?: CalendarDate) => {\n  return !dateVal || !isCompleteCalendarDate(dateVal)\n    ? undefined\n    : (dateVal as CalendarDateRequired);\n};\n\n// Use a reducer function to manage InputDatePickerState.\nconst inputDatePickerReducer = (\n  state: InputDatePickerState,\n  action: InputDatePickerReducerAction\n): InputDatePickerState => {\n  switch (action.type) {\n    case 'dateChanged': {\n      return {\n        ...state,\n        dateValue: action.data,\n        completeDateValue: convertToCalendarDateRequired(action.data)\n      };\n    }\n    case 'dateSelected': {\n      return { ...state, dateValue: action.data, completeDateValue: action.data };\n    }\n    case 'reset': {\n      return {\n        completeDateValue: convertToCalendarDateRequired(action.data),\n        dateValue: action.data\n      };\n    }\n    default:\n      return state;\n  }\n};\n\ntype Props = {\n  /**\n   * The value of the InputDatePicker, or undefined.\n   */\n  value?: CalendarDate;\n};\n\n/**\n * useInputDatePickerState calls useReducer to determine the initial state. Any changes to that state\n * are managed by dispatching actions to the reducer function.\n */\nconst useInputDatePickerState = ({ value }: Props) => {\n  const [state, dispatch] = useReducer(inputDatePickerReducer, {\n    completeDateValue: convertToCalendarDateRequired(value),\n    dateValue: value\n  });\n\n  return { state, dispatch };\n};\n\nexport { useInputDatePickerState };\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 type { ComponentProps, RefObject } from 'preact';\nimport type { ElementRef } from 'preact/compat';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport type { CalendarDate, CalendarDateRequired } from '#utils/UNSAFE_calendarDateUtils';\nimport { calendarDatesAreDifferent } from '#utils/PRIVATE_dayUtils';\nimport { DatePicker } from '#UNSAFE_DatePicker';\nimport { CloseDetail, InputDatePickerDropdown } from './InputDatePickerDropdown';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport { InputDateMask } from '#UNSAFE_InputDateMask';\nimport { InputDatePicker } from './InputDatePicker';\nimport { useHiddenTestMethod } from '#hooks/UNSAFE_useHiddenTestMethod';\nimport { useInputDatePickerState } from './useInputDatePickerState';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\n\ntype InputDatePickerProps = ComponentProps<typeof InputDatePicker>;\ntype InputDateMaskProps = ComponentProps<typeof InputDateMask>;\ntype DatePickerProps = ComponentProps<typeof DatePicker>;\ntype IconButtonProps = ComponentProps<typeof IconButton>;\ntype DropdownProps = ComponentProps<typeof InputDatePickerDropdown>;\n\ntype IconButtonHandle = ElementRef<typeof IconButton>;\n\ntype Props = {\n  isDisabled: InputDatePickerProps['isDisabled'];\n  isReadonly: InputDatePickerProps['isReadonly'];\n  onCommit: InputDatePickerProps['onCommit'];\n  onInput: InputDatePickerProps['onInput'];\n  rootRef: RefObject<HTMLElement>;\n  value: InputDatePickerProps['value'];\n};\n\n/**\n * Hook that provides handlers and other functionality for InputDatePicker.\n */\nconst useInputDatePicker = ({\n  isDisabled,\n  isReadonly,\n  onCommit,\n  onInput,\n  rootRef,\n  value: currentValue\n}: Props) => {\n  // Whether the dropdown is open.\n  const [isOpen, setIsOpen] = useState(false);\n\n  // Ref to the calendar icon button.\n  const iconRef = useRef<IconButtonHandle>(null);\n\n  // Ref to the InputDateMask component.\n  const maskRef: RefObject<HTMLElement> = useRef<HTMLElement>(null);\n\n  // Keep track of whether the dropdown was just dismissed from an outside mousedown event.\n  const outsideMousedownRef = useRef<boolean>(false);\n  const outsideMousedownTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>();\n\n  // Keep track of the last date values passed to onInput and onCommit.\n  const lastCommittedDateRef = useRef<CalendarDate | undefined>(currentValue);\n  const lastDateRef = useRef<CalendarDate | undefined>(currentValue);\n\n  // Keep track of the last controlled value passed from the parent, so we can detect a programmatic change.\n  const lastValueFromParentRef = useRef<CalendarDate | undefined>(currentValue);\n\n  // Keep track of whether a date was selected in the date picker.\n  const dateSelectedRef = useRef<boolean>(false);\n\n  const { state, dispatch } = useInputDatePickerState({ value: currentValue });\n\n  // If a new value is being pushed from the parent, and that value differs from\n  // the current value 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 (calendarDatesAreDifferent(lastValueFromParentRef.current, currentValue)) {\n    lastValueFromParentRef.current = currentValue;\n    if (calendarDatesAreDifferent(currentValue, state.dateValue)) {\n      dispatch({ type: 'reset', data: currentValue });\n      lastDateRef.current = currentValue;\n      lastCommittedDateRef.current = currentValue;\n    }\n  }\n\n  // Reducer updates are async, so wait until the state updates and then call our callbacks.\n  useEffect(() => {\n    if (calendarDatesAreDifferent(state.dateValue, lastDateRef.current)) {\n      onInput({ previousValue: lastDateRef.current, value: state.dateValue });\n      lastDateRef.current = state.dateValue;\n    }\n    if (\n      dateSelectedRef.current &&\n      calendarDatesAreDifferent(state.dateValue, lastCommittedDateRef.current)\n    ) {\n      onCommit?.({ previousValue: lastCommittedDateRef.current, value: state.dateValue });\n      lastCommittedDateRef.current = state.dateValue;\n      dateSelectedRef.current = false;\n    }\n  }, [onCommit, onInput, state.dateValue]);\n\n  // Handle onInput from InputDateMask as segment values are being added or changed in the input field.\n  // We wait for the state to update before calling onInput.\n  const maskInputHandler = useCallback<InputDateMaskProps['onInput']>(\n    (detail: ValueUpdateDetail<CalendarDate>) => {\n      dispatch({ type: 'dateChanged', data: detail.value });\n    },\n    [dispatch]\n  );\n\n  // Handle onCommit from InputDateMask, which is called when the user presses Enter or the field is blurred.\n  const maskCommitHandler = useCallback<NonNullable<InputDateMaskProps['onCommit']>>(\n    (detail: ValueUpdateDetail<CalendarDate>) => {\n      // If the value we get from InputDateMask's onCommit differs from the last committed value, then call onCommit.\n      if (calendarDatesAreDifferent(lastCommittedDateRef.current, detail.value)) {\n        onCommit?.({ value: detail.value, previousValue: lastCommittedDateRef.current });\n        lastCommittedDateRef.current = detail.value;\n      }\n    },\n    [onCommit]\n  );\n\n  // Respond to onAction event from the calendar icon button. Toggles the date picker dropdown.\n  const calendarIconActionHandler = useCallback<NonNullable<IconButtonProps['onAction']>>(() => {\n    // Only toggle the value of isOpen if we didn't just dismiss the dropdown.\n    if (!outsideMousedownRef.current) {\n      setIsOpen((prevIsOpen) => !prevIsOpen);\n    }\n    outsideMousedownRef.current = false;\n  }, []);\n\n  const dropdownCloseHandler = useCallback<NonNullable<DropdownProps['onClose']>>(\n    (detail: CloseDetail) => {\n      // Keep track of when the dropdown is closed via outside mousedown, including when the calendar icon\n      // is clicked. We need this in order to toggle visibility of the picker and dropdown.\n      if (detail.reason === 'outsideMousedown') {\n        outsideMousedownRef.current = true;\n        clearTimeout(outsideMousedownTimerRef.current);\n\n        // Clear the flag after a short delay to ensure the dropdown can be opened again.\n        outsideMousedownTimerRef.current = setTimeout(() => {\n          outsideMousedownRef.current = false;\n        }, 200);\n      } else if (detail.reason === 'dismissed' || detail.reason === 'keyboardDismissed') {\n        // Focus the calendar icon when the dropdown is closed.\n        iconRef.current?.focus();\n      }\n      setIsOpen(false);\n    },\n    []\n  );\n\n  // Handle date selection in the picker.\n  //   - Updates the value in state.\n  //   - Closes the dropdown.\n  //   - Sets focus to the date field.\n  const datePickerCommitHandler = useCallback<DatePickerProps['onCommit']>(\n    (detail: ValueUpdateDetail<CalendarDateRequired>) => {\n      // Set focus to the calendar icon when a date is selected.\n      iconRef.current?.focus();\n\n      // Set a ref indicating a date was selected.\n      dateSelectedRef.current = true;\n      dispatch({ type: 'dateSelected', data: detail.value });\n      setIsOpen(false);\n    },\n    [dispatch]\n  );\n\n  // Create a changeValue method that can be called by a test adapter to simulate a user\n  // changing the value and committing it.\n  const changeValue = useCallback(\n    (newValue?: CalendarDate) => {\n      // We always want this method available on the DOM element so that a test can call it,\n      // but we only want it to change the value when the component is enabled because that's\n      // the only time the user could change the value through the UI.\n      if (!isReadonly && !isDisabled) {\n        onInput({ value: newValue, previousValue: currentValue });\n        onCommit?.({ value: newValue, previousValue: currentValue });\n        return Promise.resolve();\n      }\n      return Promise.reject('Component is readonly or disabled');\n    },\n    [currentValue, isDisabled, isReadonly, onCommit, onInput]\n  );\n  // Expose _changeValue as a hidden method on the root DOM.\n  useHiddenTestMethod({\n    elementRef: rootRef,\n    method: changeValue,\n    name: '_changeValue'\n  });\n\n  return {\n    calendarIconActionHandler,\n    datePickerCommitHandler,\n    dropdownCloseHandler,\n    completeDateValue: state.completeDateValue,\n    dateValue: state.dateValue,\n    iconRef,\n    isOpen,\n    maskCommitHandler,\n    maskInputHandler,\n    maskRef\n  };\n};\n\nexport { useInputDatePicker };\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 */\nimport { ComponentProps, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { useImperativeHandle, useRef } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { CalendarIcon } from '#PRIVATE_ThemedIcons/CalendarIcon';\nimport {\n  CalendarDate,\n  CalendarDatePlaceholders,\n  InputDateMask,\n  InputDateMaskContext\n} from '#UNSAFE_InputDateMask';\nimport { DatePicker } from '#UNSAFE_DatePicker';\nimport { HiddenAccessible } from '#UNSAFE_HiddenAccessible';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport { InputDatePickerDropdown } from './InputDatePickerDropdown';\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { merge } from '@oracle/oraclejet-internal-utilities/stringUtils';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { useInputDatePicker } from './useInputDatePicker';\nimport { useTestId } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\n\ntype InputDateMaskProps = ComponentProps<typeof InputDateMask>;\ntype PickedPropsFromInputDateMask = Pick<\n  InputDateMaskProps,\n  | 'aria-describedby'\n  | 'assistiveText'\n  | 'columnSpan'\n  | 'helpSourceLink'\n  | 'helpSourceText'\n  | 'isDisabled'\n  | 'isReadonly'\n  | 'isRequired'\n  | 'isRequiredShown'\n  | 'label'\n  | 'labelEdge'\n  | 'labelStartWidth'\n  | 'messages'\n  | 'textAlign'\n  | 'testId'\n  | 'userAssistanceDensity'\n  | 'variant'\n>;\n\ntype DatePickerProps = ComponentProps<typeof DatePicker>;\ntype PickedPropsFromDatePicker = Pick<\n  DatePickerProps,\n  | 'dayFormatter'\n  | 'daysOutsideMonth'\n  | 'max'\n  | 'min'\n  | 'monthAndYearPicker'\n  | 'todayTimeZone'\n  | 'todayButton'\n  | 'weekDisplay'\n>;\n\ntype Props = PickedPropsFromInputDateMask &\n  PickedPropsFromDatePicker & {\n    /**\n     * If specified, overrides the locale specific order of the individual date segments\n     * in the date field as well as the locale specific separator. The value of each placeholder\n     * is only used when the type is 'literal', otherwise it is replaced with a translated\n     * placeholder for month, day, or year. The placeholders must include month, day, and year.\n     */\n    masks?: CalendarDatePlaceholders;\n\n    /**\n     * The current display value of the component.\n     * This is a CalendarDate, not CalendarDateRequired, because this is a controlled component and\n     * the user may type the month, day, and year separately. If a selection is made in the date\n     * picker, then the value is a complete date.\n     */\n    value?: CalendarDate;\n\n    /**\n     * Callback invoked when the user commits the entered value by blurring or hitting the enter key.\n     * It is also called when a selection is made in the date picker.\n     */\n    onCommit?: (detail: ValueUpdateDetail<CalendarDate>) => void;\n\n    /**\n     * Callback invoked each time the user changes the value of a segment. For example, if the user\n     * types '12' into the month segment, this callback will be called twice to change the month\n     * first to '1' and then '12'.\n     */\n    onInput: (detail: ValueUpdateDetail<CalendarDate>) => void;\n  };\n\n/**\n * InputDatePicker allows users to enter or select a single date using a calendar interface.\n */\nexport const InputDatePicker = forwardRef(\n  (\n    {\n      'aria-describedby': propDescribedBy,\n      assistiveText,\n      dayFormatter,\n      daysOutsideMonth,\n      helpSourceLink,\n      helpSourceText,\n      isDisabled,\n      isReadonly,\n      label,\n      max,\n      messages,\n      min,\n      monthAndYearPicker,\n      todayTimeZone,\n      todayButton,\n      value,\n      onCommit,\n      onInput,\n      testId,\n      userAssistanceDensity: propUserAssistanceDensity,\n      weekDisplay,\n      ...dateMaskProps\n    }: Props,\n    ref?: Ref<FocusableHandle>\n  ) => {\n    const testIdProps = useTestId(testId);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const {\n      calendarIconActionHandler,\n      datePickerCommitHandler,\n      completeDateValue,\n      dateValue,\n      dropdownCloseHandler,\n      iconRef,\n      isOpen,\n      maskCommitHandler,\n      maskInputHandler,\n      maskRef\n    } = useInputDatePicker({\n      isDisabled,\n      isReadonly,\n      onCommit,\n      onInput,\n      rootRef,\n      value\n    });\n\n    const mainFieldRef = useRef<HTMLDivElement>(null);\n    const { inputDatePicker_selectDate, inputDatePicker_instruction } =\n      useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n    const calendarIconAriaLabel = inputDatePicker_selectDate();\n\n    // We need this to determine if UA/messaging should be shown in the dropdown.\n    const { userAssistanceDensity: formUserAssistanceDensity } = useFormContext();\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    useImperativeHandle(ref!, () => ({\n      focus: () => {\n        maskRef.current?.focus();\n      },\n      blur: () => {\n        maskRef.current?.blur();\n      }\n    }));\n\n    const maskFieldInstructionId = useId();\n    const maskFieldInstructionText = inputDatePicker_instruction();\n    const maskFieldInstruction =\n      !isDisabled && !isReadonly ? (\n        <HiddenAccessible id={maskFieldInstructionId} isHidden={true}>\n          {maskFieldInstructionText}\n        </HiddenAccessible>\n      ) : undefined;\n    const ariaDescribedBy =\n      !isDisabled && !isReadonly\n        ? merge([propDescribedBy, maskFieldInstructionId])\n        : propDescribedBy;\n\n    const endContent = (\n      <IconButton\n        aria-haspopup=\"dialog\"\n        aria-label={calendarIconAriaLabel}\n        isDisabled={isDisabled}\n        ref={iconRef}\n        size=\"sm\"\n        testId={testId ? testId + '_calendarIcon' : undefined}\n        variant=\"ghost\"\n        onAction={calendarIconActionHandler}>\n        <CalendarIcon />\n      </IconButton>\n    );\n\n    const shouldShowDropdown = isOpen as boolean;\n\n    return (\n      <div {...testIdProps} ref={rootRef}>\n        <InputDateMaskContext.Provider\n          value={{ isDropdownOpen: isOpen, isInputDatePickerParent: true }}>\n          <InputDateMask\n            aria-describedby={ariaDescribedBy}\n            assistiveText={assistiveText}\n            endContent={endContent}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            label={label}\n            onCommit={maskCommitHandler}\n            onInput={maskInputHandler}\n            mainFieldRef={mainFieldRef}\n            messages={messages}\n            testId={testId ? testId + '_mask' : undefined}\n            ref={maskRef}\n            userAssistanceDensity={propUserAssistanceDensity}\n            value={dateValue}\n            {...dateMaskProps}\n          />\n        </InputDateMaskContext.Provider>\n\n        {maskFieldInstruction}\n\n        {shouldShowDropdown && (\n          <InputDatePickerDropdown\n            anchorRef={mainFieldRef}\n            assistiveText={assistiveText}\n            dayFormatter={dayFormatter}\n            daysOutsideMonth={daysOutsideMonth}\n            helpSourceLink={helpSourceLink}\n            helpSourceText={helpSourceText}\n            isDisabled={isDisabled}\n            isReadonly={isReadonly}\n            isOpen={isOpen}\n            label={label}\n            onClose={dropdownCloseHandler}\n            onCommit={datePickerCommitHandler}\n            max={max}\n            messages={messages}\n            min={min}\n            monthAndYearPicker={monthAndYearPicker}\n            testId={testId ? testId + '_datePicker' : undefined}\n            todayTimeZone={todayTimeZone}\n            todayButton={todayButton}\n            userAssistanceDensity={userAssistanceDensity}\n            value={completeDateValue}\n            weekDisplay={weekDisplay}\n          />\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputDatePickerDropdown","anchorRef","assistiveText","dayFormatter","daysOutsideMonth","helpSourceLink","helpSourceText","isDisabled","isOpen","isReadonly","label","onClose","onCommit","max","messages","min","monthAndYearPicker","testId","todayButton","todayTimeZone","userAssistanceDensity","value","weekDisplay","isDropdownAbove","setDropdownAbove","useState","prevIsOpen","setPrevIsOpen","handleDropdownPosition","useCallback","data","placement","startsWith","shouldShowSheet","isPhone","datePicker_label","useTranslationBundle","datePickerAriaLabel","datePickerMainContent","_jsx","DatePicker","height","undefined","maxWidth","width","inlineUserAssistanceFooter","length","FormFieldContext","Provider","isFocused","children","jsx","class","userAssistanceStyles","InlineUserAssistance","fieldLabel","contentTestId","dropdownContent","dropdownStyles","SectionedContent","footer","hasFocusTrap","main","role","Sheet","initialFocus","StickyPositioningDropdown","onPosition","sizeOptions","isMaxWidthAdjusted","isMaxHeightAdjusted","getClientHints","deviceType","convertToCalendarDateRequired","dateVal","isCompleteCalendarDate","inputDatePickerReducer","state","action","type","dateValue","completeDateValue","useInputDatePicker","onInput","rootRef","currentValue","setIsOpen","iconRef","useRef","maskRef","outsideMousedownRef","outsideMousedownTimerRef","lastCommittedDateRef","lastDateRef","lastValueFromParentRef","dateSelectedRef","dispatch","useReducer","useInputDatePickerState","calendarDatesAreDifferent","current","useEffect","previousValue","maskInputHandler","detail","maskCommitHandler","calendarIconActionHandler","dropdownCloseHandler","reason","clearTimeout","setTimeout","focus","datePickerCommitHandler","changeValue","newValue","Promise","reject","resolve","useHiddenTestMethod","elementRef","method","name","InputDatePicker","forwardRef","propDescribedBy","propUserAssistanceDensity","dateMaskProps","ref","testIdProps","useTestId","mainFieldRef","inputDatePicker_selectDate","inputDatePicker_instruction","calendarIconAriaLabel","formUserAssistanceDensity","useFormContext","useImperativeHandle","blur","maskFieldInstructionId","useId","maskFieldInstructionText","maskFieldInstruction","HiddenAccessible","id","isHidden","ariaDescribedBy","merge","endContent","IconButton","size","variant","onAction","CalendarIcon","shouldShowDropdown","_jsxs","InputDateMaskContext","isDropdownOpen","isInputDatePickerParent","InputDateMask"],"mappings":"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"}

package/amd/ListView-6d21e8f9.js

@@ -0,0 +1,2 @@
+define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './LayerHost-0b288129', './StyledCheckbox-368fed68', 'css!./SelectorStyles.styles.css', './CollectionInteractionContext-0b4ed98b', 'css!./DragAndDropStyles.styles.css', 'css!./ReorderableItemStyles.styles.css', './ReorderableContext-6d10a1b7', './HiddenAccessible-037ef42d', './List-daac1169', './TabbableModeContext-a9c97640', './logger-0f873e29', './flexitem-5db48325', './PRIVATE_List/themes/ListStyles.css', './UNSAFE_GroupedList/themes/GroupedListStyles.css', 'module', './Flex-4b81b412', './Skeleton-3e52c94a', './keys-4755c121', './useReorderableItem-7b4b2c3d', './classNames-08d99695', './useNavigation-4d87e7e6', './UNSAFE_ListView/themes/ListViewStyles.css', './mergeProps-bcfa6a92', './collectionUtils-77dc5fa1', './Menu-1b8fefc5', './MenuItem-85e4ffdc', 'preact', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-2bb62284', 'css!./IconStyle.styles.css', './SelectMenuGroupContext-67f24a8f', './UNSAFE_Menu/themes/MenuItemStyles.css', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./MenuSeparatorStyles.styles.css', 'module', './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css', './menuUtils-8e42385f', 'css!./MenuStyles.styles.css', './useItemAction-3616efde', './useContextMenuGesture-750ef2c6', './LoadMoreCollection-895f1ed5'], (function(e,t,r,o,s,n,i,a,l,c,d,u,m,f,y,I,S,p,C,g,x,R,b,h,M,v,L,T,E,P,k,O,_,K,w,A,D,F,j,N,U,V,G,B,H,z,Z){"use strict";const J=r.memo((function({children:e,dragKey:r,setDragKey:s,onReorder:n,rootRef:i,itemKey:a}){const l=o.useRef(null),c={itemOverlayFront:v.styles.reorderableItemOverlayFront,itemOverlayRear:v.styles.reorderableItemOverlayRear,itemDragger:v.styles.reorderableItemDragger},d=o.useCallback((e=>{e.dataTransfer?.setData("text/listview-items-key",JSON.stringify(a))}),[a]),{rootProps:u,isDragged:m,overlayZoneBeforeProps:f,overlayZoneAfterProps:y}=b.useReorderableItem({isDisabled:!n,dragKey:r,setDragKey:s,onReorder:n,rootRef:i,ref:l,getItem:()=>l?.current?.closest(M.LIST_ITEM_SELECTOR),setTransferData:d,itemStyles:c,itemSelector:M.LIST_ITEM_SELECTOR,isVertical:!0}),I=h.classNames([u?.class,v.styles.reorderableItemDnd]);return t.jsxs("div",{...u,class:I,children:[e,!m&&R.isKeyDefined(r)&&t.jsxs(t.Fragment,{children:[t.jsx("div",{...f}),t.jsx("div",{...y})]})]})}),((e,t)=>!(!e||!t)&&(e.children===t.children&&e.dragKey===t.dragKey)));function Y({contextMenuConfig:e,testId:r,contextMenuContext:o,...s}){const n=e.accessibleLabel;let i;if(s.isOpen){if(i=e.itemsRenderer(o),G.isMenuChildrenFalsy(i))return null}else i=null;return t.jsx(E.Menu,{...s,...n&&{"aria-label":n},testId:r,children:i})}const q={mouse:{initialFocus:"menu",placement:"bottom-start",offsetValue:0},keyboard:{initialFocus:"firstItem",placement:"bottom-start",offsetValue:0},touch:{initialFocus:"firstItem",placement:"end",offsetValue:40}},Q={isOpen:!1,initialFocus:"menu",placement:"bottom-start",offsetValue:0,anchorRef:{current:null}},W=r.forwardRef((({children:e,...r},s)=>{const{contextMenuConfig:n}=r,i=o.useRef(null),{currentItemOverride:a,updateCurrentItemOverride:l}=(e=>{const t=o.useRef(),r=o.useRef();r.current!==e&&(r.current=e,t.current=e);const s=o.useCallback((e=>{t.current={rowKey:e}}),[]);return{currentItemOverride:t.current,updateCurrentItemOverride:s}})(r.currentItemOverride),c=r.data?r.data.map((e=>({data:e,metadata:{key:r.getRowKey(e)}}))):null,f=r.onLoadMore?r.onLoadMore:()=>{},y=c?{offset:0,data:c,sizePrecision:r.hasMore?"atLeast":"exact",totalSize:c.length}:null;o.useImperativeHandle(s,(()=>({getScrollPosition:()=>i.current?m.getScrollPosition(i.current):{y:0},focus:()=>{i.current&&i.current.focus()}})));const I=null!=r.onReorder,{reorderProps:S,reorderItemProps:p,reorderContext:C,reorderInstructionsId:g,reorderInstructions:x}=(({onReorder:e,rootRef:t,viewportConfig:r})=>{const s=null!=e,[n,i]=o.useState(void 0),{reorderProps:a,reorderContext:l,reorderInstructionsId:c,reorderInstructions:d}=b.useReorderable({onReorder:e,rootRef:t,itemSelector:M.LIST_ITEM_SELECTOR,isDisabled:!s,columns:1}),u=o.useRef(!1);o.useEffect((()=>{if(s&&u.current){const e=t.current,o=T.findElementByKey(e,l.currentItemKey.current,M.LIST_ITEM_SELECTOR);if(o){const t=r?.scrollerRef.current||e;M.scrollToVisible(o,t,0),u.current=!1}}}));const m=o.useMemo((()=>({dragKey:n,setDragKey:i,onReorder:e,rootRef:t})),[n,e,t]);return s?{reorderProps:L.mergeProps({onKeyDown:e=>{s&&("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.metaKey||e.ctrlKey)&&e.shiftKey&&(u.current=!0,a.onKeyDown?.(e))},onDragOver:e=>{void 0!==n&&(u.current=!1,T.dragToScroll(e,void 0!==n,t.current))}}),reorderItemProps:m,reorderContext:l,reorderInstructionsId:c,reorderInstructions:d}:{reorderProps:a,reorderContext:l,reorderInstructionsId:c,reorderInstructions:d}})({onReorder:r.onReorder,rootRef:i,viewportConfig:r.viewportConfig}),{triggerProps:R,menuProps:h,contextMenuContext:v,notifyCurrentKeyChanged:E}=((e,t,r,s)=>{const[n,i]=o.useState(),[a,l]=o.useState(Q),c=o.useRef(),{triggerProps:d}=z.useContextMenuGesture((({gesture:t,anchor:o,target:n})=>{let a=o;if("keyboard"===t){a=T.findElementByKey(r.current,c.current,M.LIST_ITEM_SELECTOR)||o;const t=H.findItemContext(c.current,e);i(t)}else{const t=T.keyExtractor(n,M.LIST_ITEM_SELECTOR),r=H.findItemContext(t,e);i(r),s(t)}l({...q[t],anchorRef:{current:a},isOpen:!0})}),{isDisabled:!t}),u=o.useCallback((e=>{"dismissed"!==e.reason&&"itemAction"!==e.reason||r.current?.focus({preventScroll:!0}),l({...Q})}),[r]);return{menuProps:{...a,onClose:u},onClose:u,contextMenuContext:n,triggerProps:d,notifyCurrentKeyChanged:e=>{c.current=e.value}}})(y,n,i,l),P=e=>{r.onPersistCurrentItem?.(e),E(e)},k=o.useCallback((r=>t.jsx(J,{...p,itemKey:r.metadata.key,children:e(r)})),[e,p]);if(I&&p)return t.jsxs(t.Fragment,{children:[t.jsxs(d.ReorderableContext.Provider,{value:C,children:[t.jsx(m.List,{...r,"aria-describedby":g,contextMenuTriggerProps:R,reorderProps:S,onLoadRange:f,scrollerRef:i,data:y,currentItemOverride:a,onPersistCurrentItem:P,children:k}),t.jsx("span",{id:g,children:t.jsx(u.HiddenAccessible,{children:x})})]}),n&&t.jsx(Y,{...h,testId:r.testId?r.testId+"-menu":void 0,contextMenuConfig:n,contextMenuContext:v})]});return t.jsxs(t.Fragment,{children:[t.jsx(m.List,{...r,loadingIndicator:r.skeletonRenderer?(O=r.skeletonRenderer,t.jsx(m.SkeletonContainer,{minimumCount:25,children:e=>O({loadingStatus:"initial",index:e})})):void 0,loadMoreIndicator:r.skeletonRenderer?(e=>t.jsx("div",{class:Z.LOADMORE_STYLE_CLASS,children:t.jsx(m.SkeletonContainer,{minimumCount:3,children:t=>e({loadingStatus:"loadMore",index:t})})}))(r.skeletonRenderer):void 0,onLoadRange:f,scrollerRef:i,data:y,contextMenuTriggerProps:R,currentItemOverride:a,onPersistCurrentItem:P,children:e}),n&&t.jsx(Y,{...h,contextMenuConfig:n,contextMenuContext:v,testId:r.testId?r.testId+"-menu":void 0})]});var O}));e.ListView=W}));
+//# sourceMappingURL=ListView-6d21e8f9.js.map

package/amd/{ListView-2678b2af.js.map → ListView-6d21e8f9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ListView-2678b2af.js","sources":["../../src/UNSAFE_ListView/ListViewReorderableItem.tsx","../../src/UNSAFE_ListView/ListViewContextMenu.tsx","../../src/UNSAFE_ListView/useListViewContextMenu.ts","../../src/UNSAFE_ListView/ListView.tsx","../../src/UNSAFE_ListView/useListViewCurrentItemOverride.tsx","../../src/UNSAFE_ListView/useListViewReorder.ts"],"sourcesContent":["import { memo } from 'preact/compat';\nimport { useRef, useCallback } from 'preact/hooks';\nimport { useReorderableItem } from '../hooks/PRIVATE_useReorderable';\nimport { ReorderableItemProps } from '../UNSAFE_Collection/Reorderable.types';\nimport { LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { styles } from './themes/ListViewStyles.css';\nimport { isKeyDefined } from '../utils/UNSAFE_keys';\n\nexport type ListReorderableItemProps<K> = ReorderableItemProps<K>;\n\n/**\n * A private item that will be used by ReorderableCardFlexView, location TBD (could be moved to PRIVATE_CardFlexView)\n */\nexport function ListViewReorderableItem<K extends string | number>({\n  children,\n  dragKey,\n  setDragKey,\n  onReorder,\n  rootRef,\n  itemKey\n}: ListReorderableItemProps<K> & { itemKey: K }) {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const itemStyles = {\n    itemOverlayFront: styles.reorderableItemOverlayFront,\n    itemOverlayRear: styles.reorderableItemOverlayRear,\n    itemDragger: styles.reorderableItemDragger\n  };\n  const getItem = () => itemRef?.current?.closest(LIST_ITEM_SELECTOR);\n  const setTransferData = useCallback(\n    (event: DragEvent) => {\n      event.dataTransfer?.setData('text/listview-items-key', JSON.stringify(itemKey));\n    },\n    [itemKey]\n  );\n  const { rootProps, isDragged, overlayZoneBeforeProps, overlayZoneAfterProps } =\n    useReorderableItem({\n      isDisabled: onReorder ? false : true,\n      dragKey,\n      setDragKey,\n      onReorder,\n      rootRef,\n      ref: itemRef,\n      getItem,\n      setTransferData,\n      itemStyles,\n      itemSelector: LIST_ITEM_SELECTOR,\n      isVertical: true\n    });\n  const classes = classNames([rootProps?.class, styles.reorderableItemDnd]);\n\n  return (\n    <div {...rootProps} class={classes}>\n      {children}\n      {!isDragged && isKeyDefined(dragKey) && (\n        <>\n          <div {...overlayZoneBeforeProps}></div>\n          <div {...overlayZoneAfterProps}></div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const MemoizeListViewReorderableItem = memo(\n  ListViewReorderableItem,\n  <K,>(prev: ListReorderableItemProps<K>, next: ListReorderableItemProps<K>) => {\n    if (prev && next) {\n      return prev.children === next.children && prev.dragKey === next.dragKey;\n    }\n    return false;\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 */\nimport { ComponentChildren, ComponentProps } from 'preact';\n\nimport { ListItemContext } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { ListViewContextMenuConfig } from './List.types';\nimport { isMenuChildrenFalsy } from '#UNSAFE_Menu/menuUtils';\n\nexport type Props<K extends string | number, D> = Omit<ComponentProps<typeof Menu>, 'children'> & {\n  contextMenuConfig: ListViewContextMenuConfig<K, D>;\n} & { contextMenuContext: ListItemContext<K, D> } & {\n  testId: ComponentProps<typeof Menu>['testId'];\n};\n\n/**\n * The internal component used to render a custom context menu\n */\nexport function ListViewContextMenu<K extends string | number, D>({\n  contextMenuConfig,\n  testId,\n  contextMenuContext,\n  ...menuProps\n}: Props<K, D>) {\n  const accessibleLabel = contextMenuConfig.accessibleLabel;\n\n  let menuItems: ComponentChildren;\n  // Important to call items renderer only when isOpen is true so we know there is a contextMenuContext\n  if (menuProps.isOpen) {\n    menuItems = contextMenuConfig.itemsRenderer(contextMenuContext);\n    if (isMenuChildrenFalsy(menuItems)) {\n      return null;\n    }\n  } else {\n    menuItems = null;\n  }\n\n  return (\n    <Menu\n      {...menuProps}\n      {...(accessibleLabel && {\n        'aria-label': accessibleLabel\n      })}\n      testId={testId}>\n      {menuItems}\n    </Menu>\n  );\n}\n","import type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useState, useRef } from 'preact/hooks';\n\nimport { DataState, ListItemContext, CurrentKeyDetail } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { findItemContext } from '#hooks/PRIVATE_useItemAction';\nimport { useContextMenuGesture } from '#hooks/UNSAFE_useContextMenuGesture';\nimport { findElementByKey, keyExtractor } from '#utils/PRIVATE_collectionUtils';\nimport { ListView } from './ListView';\nimport { LIST_ITEM_SELECTOR } from '#PRIVATE_List';\n\ntype MenuProps = Pick<\n  ComponentProps<typeof Menu>,\n  'anchorRef' | 'initialFocus' | 'placement' | 'offsetValue' | 'isOpen'\n>;\n\nconst TOUCH_OFFSET_VALUE = 40;\n\nconst menuPropGestureStates: Record<\n  'mouse' | 'keyboard' | 'touch',\n  Omit<Required<MenuProps>, 'anchorRef' | 'isOpen'>\n> = {\n  mouse: {\n    initialFocus: 'menu',\n    placement: 'bottom-start',\n    offsetValue: 0\n  },\n  keyboard: {\n    initialFocus: 'firstItem',\n    placement: 'bottom-start',\n    offsetValue: 0\n  },\n  touch: {\n    initialFocus: 'firstItem',\n    placement: 'end',\n    offsetValue: TOUCH_OFFSET_VALUE\n  }\n};\n\nconst initialMenuProps: MenuProps = {\n  isOpen: false,\n  initialFocus: 'menu',\n  placement: 'bottom-start',\n  offsetValue: 0,\n  anchorRef: { current: null }\n};\n\ntype ListViewProps<K extends string | number, D> = ComponentProps<typeof ListView<K, D>>;\n\nexport const useListViewContextMenu = <K extends string | number, D>(\n  dataState: DataState<K, D> | null,\n  contextMenuConfig: ListViewProps<K, D>['contextMenuConfig'],\n  scrollListRef: RefObject<HTMLElement | null>,\n  updateCurrentKey: (key: K) => void\n) => {\n  /*Context Menu section\n   TODO: A version of context Menu listview will be merged using useContextMenuGesture instead. Once it's merged we\n   can go back to this to create a hook or utility that could be share among all collection comps. JET-60320\n  */\n\n  /*\n  Steps to open a menu:\n    1.- useContextMenu handler is called when menu is supposed to be opened.\n    2.- We set contextMenuContext when contextMenuRenderer is called.\n    3.- We dispatch opening the menu with the correct anchor.\n    5.- Menu receives updated props and updated contextMenuContext.\n    6.- Menu is opened.\n\n    */\n\n  //Supposed to be updated when menu is about to be opened\n  //We set an initial key value for the context menu context, to allow user use object destructuring inside the\n  //contextMenuRenderer. It doesn't matter if the key is not correct at the initial rendering since menu starts\n  //being closed always\n  const [contextMenuContext, setContextMenuContext] = useState<ListItemContext<K, D>>();\n\n  const [menuProps, setMenuProps] = useState<MenuProps>(initialMenuProps);\n\n  const currentKeyRef = useRef<K>();\n  const notifyCurrentKeyChanged = (detail: CurrentKeyDetail<K>) => {\n    currentKeyRef.current = detail.value;\n  };\n\n  const { triggerProps } = useContextMenuGesture(\n    ({ gesture, anchor, target }) => {\n      let anchorBasedOnGesture = anchor;\n      if (gesture === 'keyboard') {\n        //We find the element where the position of the menu is going to be based of\n        const elem = findElementByKey(\n          scrollListRef.current as HTMLElement,\n          currentKeyRef.current as K,\n          LIST_ITEM_SELECTOR\n        );\n\n        //We set the correct anchor\n        anchorBasedOnGesture = elem ? elem : anchor;\n\n        const context = findItemContext(\n          currentKeyRef.current as K,\n          dataState as DataState<string | number | null, D>\n        );\n\n        setContextMenuContext(context as ListItemContext<K, D>);\n      } else {\n        //We search for the key using the target of the event\n        const key = keyExtractor(target as HTMLElement, LIST_ITEM_SELECTOR);\n\n        const context = findItemContext(key, dataState as DataState<string | number | null, D>);\n\n        setContextMenuContext(context as ListItemContext<K, D>);\n\n        //We update the key so when we close logical focus is on the correct item\n        updateCurrentKey(key as K);\n      }\n      setMenuProps({\n        ...menuPropGestureStates[gesture],\n        anchorRef: { current: anchorBasedOnGesture },\n        isOpen: true\n      });\n    },\n    {\n      isDisabled: !contextMenuConfig //If there is no a context menu renderer we disable the hook\n    }\n  );\n\n  const handleCloseContextMenu = useCallback<Required<ComponentProps<typeof Menu>>['onClose']>(\n    (detail) => {\n      /*\n      TODO: Focus ring should be visible when context menu was closed because of selecting an item using keyboard,\n      but should not be visible when the selection was done using mouse or touch. This would probably means menu\n      onClose API is going to be changed a little bit so we can satisfy this requirement. JET-62372\n      */\n      //Focus has to be set on the current target that was obtained\n      //during context menu gesture when menu is dismissed or item is \"selected\"\n      if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {\n        scrollListRef.current?.focus({ preventScroll: true });\n      }\n      // We close the menu.The only prop that matters here is isOpen\n      setMenuProps({ ...initialMenuProps });\n    },\n    [scrollListRef]\n  );\n\n  return {\n    menuProps: { ...menuProps, onClose: handleCloseContextMenu },\n    onClose: handleCloseContextMenu,\n    contextMenuContext: contextMenuContext as ListItemContext<K, D>,\n    triggerProps,\n    notifyCurrentKeyChanged\n  } as const;\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 */\nimport { ComponentChildren, JSX } from 'preact';\nimport { ForwardedRef, forwardRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { ReorderableContext } from '../hooks/PRIVATE_useReorderable';\nimport { DataState, CurrentKeyDetail, ListItemRendererContext } from '../UNSAFE_Collection';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { List, SkeletonContainer } from '../PRIVATE_List';\nimport {\n  ListProps,\n  ListViewContextMenuConfig,\n  ListViewHandle,\n  SkeletonRendererContext\n} from './List.types';\nimport { getScrollPosition } from './ScrollPositionUtils';\nimport { MemoizeListViewReorderableItem } from './ListViewReorderableItem';\nimport { useListViewReorder } from './useListViewReorder';\nimport { ListViewContextMenu } from './ListViewContextMenu';\nimport { useListViewContextMenu } from './useListViewContextMenu';\nimport { useListViewCurrentItemOverride } from './useListViewCurrentItemOverride';\nimport { LOADMORE_STYLE_CLASS } from '../PRIVATE_LoadMoreCollection';\n\n/**\n * Props specific to non-virtualized ListView\n */\ntype NonVirtualizedListProps<K, D> = {\n  /**\n   * The data that is used to render each item in ListView.  If the value is null, then ListView will show nothing\n   * if hasMore is false, or loading indicator if hasMore is true.\n   */\n  data: D[] | null;\n  /**\n   * A callback function to extract the key which is used to identify the item.\n   */\n  getRowKey: (data: D) => K;\n  /**\n   * Whether there are more data available to load.  By default this returns false.\n   */\n  hasMore?: boolean;\n  /**\n   * An optional callback function which is invoked when user scrolls to the end of the list.\n   */\n  onLoadMore?: () => void;\n\n  /**\n   * Configuration used to specify a context menu.\n   */\n  contextMenuConfig?: ListViewContextMenuConfig<K, D>;\n};\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = Pick<\n  ListProps<K, D>,\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n  | 'gridlines'\n  | 'currentItemOverride'\n  | 'onPersistCurrentItem'\n  | 'onItemAction'\n  | 'onSelectionChange'\n  | 'promotedSection'\n  | 'selectedKeys'\n  | 'selectionMode'\n  | 'viewportConfig'\n  | 'testId'\n  | 'scrollPositionOverride'\n  | 'onReorder'\n  | 'itemPadding'\n  | 'itemEnterKeyFocusBehavior'\n  | 'skeletonRenderer'\n> &\n  NonVirtualizedListProps<K, D>;\n/**\n * A list view displays data items as a list or a grid with highly interactive features.\n */\nexport const ListView = forwardRef(\n  <K extends string | number, D>(\n    { children, ...props }: Props<K, D>,\n    ref?: ForwardedRef<ListViewHandle<K>>\n  ) => {\n    const { contextMenuConfig } = props;\n    const listRef = useRef<HTMLDivElement | null>(null);\n\n    const { currentItemOverride, updateCurrentItemOverride } = useListViewCurrentItemOverride(\n      props.currentItemOverride\n    );\n\n    const dataMetadata = props.data\n      ? props.data.map((aData: D) => {\n          const key = props.getRowKey(aData);\n          return { data: aData, metadata: { key } };\n        })\n      : null;\n\n    const loadRange = props.onLoadMore ? props.onLoadMore : () => {};\n    const dataState = dataMetadata\n      ? ({\n          offset: 0,\n          data: dataMetadata,\n          sizePrecision: props.hasMore ? 'atLeast' : 'exact',\n          totalSize: dataMetadata.length\n        } as DataState<K, D>)\n      : null;\n\n    useImperativeHandle(ref!, () => ({\n      getScrollPosition: () => {\n        if (listRef.current) {\n          return getScrollPosition(listRef.current);\n        }\n        return { y: 0 };\n      },\n      focus: () => {\n        if (listRef.current) {\n          listRef.current.focus();\n        }\n      }\n    }));\n\n    /**\n     * Reorder Section\n     */\n    const isReorderEnabled = props.onReorder != undefined;\n    const {\n      reorderProps,\n      reorderItemProps,\n      reorderContext,\n      reorderInstructionsId,\n      reorderInstructions\n    } = useListViewReorder({\n      onReorder: props.onReorder,\n      rootRef: listRef,\n      viewportConfig: props.viewportConfig\n    });\n\n    const { triggerProps, menuProps, contextMenuContext, notifyCurrentKeyChanged } =\n      useListViewContextMenu(dataState, contextMenuConfig, listRef, updateCurrentItemOverride);\n\n    const onPersistCurrentItem = (detail: CurrentKeyDetail<K>) => {\n      props.onPersistCurrentItem?.(detail);\n      notifyCurrentKeyChanged(detail);\n    };\n\n    const reorderableItemRenderer = useCallback(\n      (context: ListItemRendererContext<K, D>) => (\n        <MemoizeListViewReorderableItem {...reorderItemProps} itemKey={context.metadata.key}>\n          {children(context)}\n        </MemoizeListViewReorderableItem>\n      ),\n      [children, reorderItemProps]\n    );\n\n    if (isReorderEnabled && reorderItemProps) {\n      return (\n        <>\n          <ReorderableContext.Provider value={reorderContext}>\n            <List\n              {...props}\n              aria-describedby={reorderInstructionsId}\n              contextMenuTriggerProps={triggerProps}\n              reorderProps={reorderProps}\n              onLoadRange={loadRange}\n              scrollerRef={listRef}\n              data={dataState}\n              currentItemOverride={currentItemOverride}\n              onPersistCurrentItem={onPersistCurrentItem}>\n              {reorderableItemRenderer}\n            </List>\n            <span id={reorderInstructionsId}>\n              <HiddenAccessible>{reorderInstructions}</HiddenAccessible>\n            </span>\n          </ReorderableContext.Provider>\n          {contextMenuConfig && (\n            <ListViewContextMenu\n              {...menuProps}\n              testId={props.testId ? props.testId + '-menu' : undefined}\n              contextMenuConfig={contextMenuConfig}\n              contextMenuContext={contextMenuContext}\n            />\n          )}\n        </>\n      );\n    }\n\n    const customInitialSkeleton = (\n      skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n    ) => {\n      return (\n        <SkeletonContainer minimumCount={25}>\n          {(index) => {\n            const context: SkeletonRendererContext = {\n              loadingStatus: 'initial',\n              index: index\n            };\n            return skeletonRenderer(context);\n          }}\n        </SkeletonContainer>\n      );\n    };\n\n    const customLoadMoreSkeleton = (\n      skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n    ) => {\n      return (\n        <div class={LOADMORE_STYLE_CLASS}>\n          <SkeletonContainer minimumCount={3}>\n            {(index) => {\n              const context: SkeletonRendererContext = {\n                loadingStatus: 'loadMore',\n                index: index\n              };\n              return skeletonRenderer(context);\n            }}\n          </SkeletonContainer>\n        </div>\n      );\n    };\n\n    return (\n      <>\n        <List\n          {...props}\n          loadingIndicator={\n            props.skeletonRenderer ? customInitialSkeleton(props.skeletonRenderer) : undefined\n          }\n          loadMoreIndicator={\n            props.skeletonRenderer ? customLoadMoreSkeleton(props.skeletonRenderer) : undefined\n          }\n          onLoadRange={loadRange}\n          scrollerRef={listRef}\n          data={dataState}\n          contextMenuTriggerProps={triggerProps}\n          currentItemOverride={currentItemOverride}\n          onPersistCurrentItem={onPersistCurrentItem}>\n          {children}\n        </List>\n        {contextMenuConfig && (\n          <ListViewContextMenu\n            {...menuProps}\n            contextMenuConfig={contextMenuConfig}\n            contextMenuContext={contextMenuContext}\n            testId={props.testId ? props.testId + '-menu' : undefined}\n          />\n        )}\n      </>\n    );\n  }\n) as <K extends string | number, D>(\n  props: Props<K, D> & { ref?: ForwardedRef<ListViewHandle<K>> }\n) => JSX.Element;\n","import { useCallback, useRef } from 'preact/hooks';\nimport { Item as CurrentItem } from '#UNSAFE_Collection';\nimport { ListProps } from './List.types';\n\n/**\n * This hook handles the currentItemOverride passing to PRIVATE_List layer.\n *\n * If the app provided new value for 'currentItemOverride', we pass that down to PRIVATE_List layer;\n * otherwise, we will pass down the value of internal override, which would be the value\n * updated by useListViewContextMenu hook\n *\n * @param currentItemOverride\n */\nexport const useListViewCurrentItemOverride = <K extends string | number, D>(\n  currentItemOverride: ListProps<K, D>['currentItemOverride']\n) => {\n  // the override that will be passed down to PRIVATE_List layer\n  const listOverrideRef = useRef<CurrentItem<K>>();\n\n  // track the currentItemOverride attribute set by app\n  const appOverrideRef = useRef<CurrentItem<K>>();\n  if (appOverrideRef.current !== currentItemOverride) {\n    appOverrideRef.current = currentItemOverride;\n    listOverrideRef.current = currentItemOverride;\n  }\n\n  // track the internal override updated by useListViewContextMenu hook\n  // we can just update ref here since the hook will trigger a state update for its context, which will trigger a rerender\n  const updateCurrentItemOverride = useCallback((key: K) => {\n    listOverrideRef.current = { rowKey: key };\n  }, []);\n\n  return {\n    currentItemOverride: listOverrideRef.current,\n    updateCurrentItemOverride\n  };\n};\n","import type { RefObject } from 'preact';\nimport { useMemo, useState, useEffect, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { dragToScroll, findElementByKey } from '../utils/PRIVATE_collectionUtils';\nimport { ViewportConfig } from '../hooks/UNSAFE_useViewportIntersect';\nimport { useReorderable } from '../hooks/PRIVATE_useReorderable';\nimport { scrollToVisible, LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { ListProps } from './List.types';\n\ntype useListViewReorderProps<K, D> = Pick<ListProps<K, D>, 'onReorder'> & {\n  rootRef: RefObject<HTMLDivElement>;\n  viewportConfig?: ViewportConfig;\n};\n\nexport const useListViewReorder = <K extends string | number, D>({\n  onReorder,\n  rootRef,\n  viewportConfig\n}: useListViewReorderProps<K, D>) => {\n  const isReorderEnabled = onReorder != undefined;\n\n  const [dragKey, setDragKey] = useState<K | undefined>(undefined);\n  const { reorderProps, reorderContext, reorderInstructionsId, reorderInstructions } =\n    useReorderable({\n      onReorder,\n      rootRef,\n      itemSelector: LIST_ITEM_SELECTOR,\n      isDisabled: !isReorderEnabled,\n      columns: 1\n    });\n\n  // ensure the current item is scrolled into view during keyboard reordering,\n  // disable that during mouse reordering\n  const reorderScrollIntoView = useRef(false);\n  useEffect(() => {\n    if (isReorderEnabled && reorderScrollIntoView.current) {\n      const rootElement = rootRef.current as HTMLElement;\n      const elem = findElementByKey(\n        rootElement,\n        reorderContext.currentItemKey.current as K,\n        LIST_ITEM_SELECTOR\n      );\n      if (elem) {\n        const scroller = viewportConfig?.scrollerRef.current || rootElement;\n        // make sure item is visible\n        scrollToVisible(elem, scroller, 0);\n        reorderScrollIntoView.current = false;\n      }\n    }\n  });\n\n  const reorderItemProps = useMemo(() => {\n    return { dragKey, setDragKey, onReorder, rootRef };\n  }, [dragKey, onReorder, rootRef]);\n\n  if (!isReorderEnabled) {\n    return {\n      reorderProps,\n      reorderContext,\n      reorderInstructionsId,\n      reorderInstructions\n    } as const;\n  }\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // listview only do keyboard reordering with arrow up/down keys\n    if (\n      isReorderEnabled &&\n      (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n      (event.metaKey || event.ctrlKey) &&\n      event.shiftKey\n    ) {\n      reorderScrollIntoView.current = true;\n      reorderProps.onKeyDown?.(event);\n    }\n  };\n\n  const handleDragOver = (event: DragEvent) => {\n    if (dragKey !== undefined) {\n      reorderScrollIntoView.current = false;\n      dragToScroll(event, dragKey !== undefined, rootRef.current);\n    }\n  };\n\n  const reorderEventProps = mergeProps({ onKeyDown: handleKeyDown, onDragOver: handleDragOver });\n\n  return {\n    reorderProps: reorderEventProps,\n    reorderItemProps,\n    reorderContext,\n    reorderInstructionsId,\n    reorderInstructions\n  } as const;\n};\n"],"names":["MemoizeListViewReorderableItem","memo","children","dragKey","setDragKey","onReorder","rootRef","itemKey","itemRef","useRef","itemStyles","itemOverlayFront","styles","reorderableItemOverlayFront","itemOverlayRear","reorderableItemOverlayRear","itemDragger","reorderableItemDragger","setTransferData","useCallback","event","dataTransfer","setData","JSON","stringify","rootProps","isDragged","overlayZoneBeforeProps","overlayZoneAfterProps","useReorderableItem","isDisabled","ref","getItem","current","closest","LIST_ITEM_SELECTOR","itemSelector","isVertical","classes","classNames","class","reorderableItemDnd","_jsxs","isKeyDefined","jsxs","_Fragment","Fragment","_jsx","jsx","prev","next","ListViewContextMenu","contextMenuConfig","testId","contextMenuContext","menuProps","accessibleLabel","menuItems","isOpen","itemsRenderer","isMenuChildrenFalsy","Menu","menuPropGestureStates","mouse","initialFocus","placement","offsetValue","keyboard","touch","initialMenuProps","anchorRef","ListView","forwardRef","props","listRef","currentItemOverride","updateCurrentItemOverride","listOverrideRef","appOverrideRef","key","rowKey","useListViewCurrentItemOverride","dataMetadata","data","map","aData","metadata","getRowKey","loadRange","onLoadMore","dataState","offset","sizePrecision","hasMore","totalSize","length","useImperativeHandle","getScrollPosition","y","focus","isReorderEnabled","undefined","reorderProps","reorderItemProps","reorderContext","reorderInstructionsId","reorderInstructions","viewportConfig","useState","useReorderable","columns","reorderScrollIntoView","useEffect","rootElement","elem","findElementByKey","currentItemKey","scroller","scrollerRef","scrollToVisible","useMemo","mergeProps","onKeyDown","metaKey","ctrlKey","shiftKey","onDragOver","dragToScroll","useListViewReorder","triggerProps","notifyCurrentKeyChanged","scrollListRef","updateCurrentKey","setContextMenuContext","setMenuProps","currentKeyRef","useContextMenuGesture","gesture","anchor","target","anchorBasedOnGesture","context","findItemContext","keyExtractor","handleCloseContextMenu","detail","reason","preventScroll","onClose","value","useListViewContextMenu","onPersistCurrentItem","reorderableItemRenderer","ReorderableContext","Provider","List","contextMenuTriggerProps","onLoadRange","id","HiddenAccessible","loadingIndicator","skeletonRenderer","SkeletonContainer","minimumCount","index","loadingStatus","loadMoreIndicator","LOADMORE_STYLE_CLASS","customLoadMoreSkeleton"],"mappings":"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"}
+{"version":3,"file":"ListView-6d21e8f9.js","sources":["../../src/UNSAFE_ListView/ListViewReorderableItem.tsx","../../src/UNSAFE_ListView/ListViewContextMenu.tsx","../../src/UNSAFE_ListView/useListViewContextMenu.ts","../../src/UNSAFE_ListView/ListView.tsx","../../src/UNSAFE_ListView/useListViewCurrentItemOverride.tsx","../../src/UNSAFE_ListView/useListViewReorder.ts"],"sourcesContent":["import { memo } from 'preact/compat';\nimport { useRef, useCallback } from 'preact/hooks';\nimport { useReorderableItem } from '../hooks/PRIVATE_useReorderable';\nimport { ReorderableItemProps } from '../UNSAFE_Collection/Reorderable.types';\nimport { LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { styles } from './themes/ListViewStyles.css';\nimport { isKeyDefined } from '../utils/UNSAFE_keys';\n\nexport type ListReorderableItemProps<K> = ReorderableItemProps<K>;\n\n/**\n * A private item that will be used by ReorderableCardFlexView, location TBD (could be moved to PRIVATE_CardFlexView)\n */\nexport function ListViewReorderableItem<K extends string | number>({\n  children,\n  dragKey,\n  setDragKey,\n  onReorder,\n  rootRef,\n  itemKey\n}: ListReorderableItemProps<K> & { itemKey: K }) {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const itemStyles = {\n    itemOverlayFront: styles.reorderableItemOverlayFront,\n    itemOverlayRear: styles.reorderableItemOverlayRear,\n    itemDragger: styles.reorderableItemDragger\n  };\n  const getItem = () => itemRef?.current?.closest(LIST_ITEM_SELECTOR);\n  const setTransferData = useCallback(\n    (event: DragEvent) => {\n      event.dataTransfer?.setData('text/listview-items-key', JSON.stringify(itemKey));\n    },\n    [itemKey]\n  );\n  const { rootProps, isDragged, overlayZoneBeforeProps, overlayZoneAfterProps } =\n    useReorderableItem({\n      isDisabled: onReorder ? false : true,\n      dragKey,\n      setDragKey,\n      onReorder,\n      rootRef,\n      ref: itemRef,\n      getItem,\n      setTransferData,\n      itemStyles,\n      itemSelector: LIST_ITEM_SELECTOR,\n      isVertical: true\n    });\n  const classes = classNames([rootProps?.class, styles.reorderableItemDnd]);\n\n  return (\n    <div {...rootProps} class={classes}>\n      {children}\n      {!isDragged && isKeyDefined(dragKey) && (\n        <>\n          <div {...overlayZoneBeforeProps}></div>\n          <div {...overlayZoneAfterProps}></div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const MemoizeListViewReorderableItem = memo(\n  ListViewReorderableItem,\n  <K,>(prev: ListReorderableItemProps<K>, next: ListReorderableItemProps<K>) => {\n    if (prev && next) {\n      return prev.children === next.children && prev.dragKey === next.dragKey;\n    }\n    return false;\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 */\nimport { ComponentChildren, ComponentProps } from 'preact';\n\nimport { ListItemContext } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { ListViewContextMenuConfig } from './List.types';\nimport { isMenuChildrenFalsy } from '#UNSAFE_Menu/menuUtils';\n\nexport type Props<K extends string | number, D> = Omit<ComponentProps<typeof Menu>, 'children'> & {\n  contextMenuConfig: ListViewContextMenuConfig<K, D>;\n} & { contextMenuContext: ListItemContext<K, D> } & {\n  testId: ComponentProps<typeof Menu>['testId'];\n};\n\n/**\n * The internal component used to render a custom context menu\n */\nexport function ListViewContextMenu<K extends string | number, D>({\n  contextMenuConfig,\n  testId,\n  contextMenuContext,\n  ...menuProps\n}: Props<K, D>) {\n  const accessibleLabel = contextMenuConfig.accessibleLabel;\n\n  let menuItems: ComponentChildren;\n  // Important to call items renderer only when isOpen is true so we know there is a contextMenuContext\n  if (menuProps.isOpen) {\n    menuItems = contextMenuConfig.itemsRenderer(contextMenuContext);\n    if (isMenuChildrenFalsy(menuItems)) {\n      return null;\n    }\n  } else {\n    menuItems = null;\n  }\n\n  return (\n    <Menu\n      {...menuProps}\n      {...(accessibleLabel && {\n        'aria-label': accessibleLabel\n      })}\n      testId={testId}>\n      {menuItems}\n    </Menu>\n  );\n}\n","import type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useState, useRef } from 'preact/hooks';\n\nimport { DataState, ListItemContext, CurrentKeyDetail } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { findItemContext } from '#hooks/PRIVATE_useItemAction';\nimport { useContextMenuGesture } from '#hooks/UNSAFE_useContextMenuGesture';\nimport { findElementByKey, keyExtractor } from '#utils/PRIVATE_collectionUtils';\nimport { ListView } from './ListView';\nimport { LIST_ITEM_SELECTOR } from '#PRIVATE_List';\n\ntype MenuProps = Pick<\n  ComponentProps<typeof Menu>,\n  'anchorRef' | 'initialFocus' | 'placement' | 'offsetValue' | 'isOpen'\n>;\n\nconst TOUCH_OFFSET_VALUE = 40;\n\nconst menuPropGestureStates: Record<\n  'mouse' | 'keyboard' | 'touch',\n  Omit<Required<MenuProps>, 'anchorRef' | 'isOpen'>\n> = {\n  mouse: {\n    initialFocus: 'menu',\n    placement: 'bottom-start',\n    offsetValue: 0\n  },\n  keyboard: {\n    initialFocus: 'firstItem',\n    placement: 'bottom-start',\n    offsetValue: 0\n  },\n  touch: {\n    initialFocus: 'firstItem',\n    placement: 'end',\n    offsetValue: TOUCH_OFFSET_VALUE\n  }\n};\n\nconst initialMenuProps: MenuProps = {\n  isOpen: false,\n  initialFocus: 'menu',\n  placement: 'bottom-start',\n  offsetValue: 0,\n  anchorRef: { current: null }\n};\n\ntype ListViewProps<K extends string | number, D> = ComponentProps<typeof ListView<K, D>>;\n\nexport const useListViewContextMenu = <K extends string | number, D>(\n  dataState: DataState<K, D> | null,\n  contextMenuConfig: ListViewProps<K, D>['contextMenuConfig'],\n  scrollListRef: RefObject<HTMLElement | null>,\n  updateCurrentKey: (key: K) => void\n) => {\n  /*Context Menu section\n   TODO: A version of context Menu listview will be merged using useContextMenuGesture instead. Once it's merged we\n   can go back to this to create a hook or utility that could be share among all collection comps. JET-60320\n  */\n\n  /*\n  Steps to open a menu:\n    1.- useContextMenu handler is called when menu is supposed to be opened.\n    2.- We set contextMenuContext when contextMenuRenderer is called.\n    3.- We dispatch opening the menu with the correct anchor.\n    5.- Menu receives updated props and updated contextMenuContext.\n    6.- Menu is opened.\n\n    */\n\n  //Supposed to be updated when menu is about to be opened\n  //We set an initial key value for the context menu context, to allow user use object destructuring inside the\n  //contextMenuRenderer. It doesn't matter if the key is not correct at the initial rendering since menu starts\n  //being closed always\n  const [contextMenuContext, setContextMenuContext] = useState<ListItemContext<K, D>>();\n\n  const [menuProps, setMenuProps] = useState<MenuProps>(initialMenuProps);\n\n  const currentKeyRef = useRef<K>();\n  const notifyCurrentKeyChanged = (detail: CurrentKeyDetail<K>) => {\n    currentKeyRef.current = detail.value;\n  };\n\n  const { triggerProps } = useContextMenuGesture(\n    ({ gesture, anchor, target }) => {\n      let anchorBasedOnGesture = anchor;\n      if (gesture === 'keyboard') {\n        //We find the element where the position of the menu is going to be based of\n        const elem = findElementByKey(\n          scrollListRef.current as HTMLElement,\n          currentKeyRef.current as K,\n          LIST_ITEM_SELECTOR\n        );\n\n        //We set the correct anchor\n        anchorBasedOnGesture = elem ? elem : anchor;\n\n        const context = findItemContext(\n          currentKeyRef.current as K,\n          dataState as DataState<string | number | null, D>\n        );\n\n        setContextMenuContext(context as ListItemContext<K, D>);\n      } else {\n        //We search for the key using the target of the event\n        const key = keyExtractor(target as HTMLElement, LIST_ITEM_SELECTOR);\n\n        const context = findItemContext(key, dataState as DataState<string | number | null, D>);\n\n        setContextMenuContext(context as ListItemContext<K, D>);\n\n        //We update the key so when we close logical focus is on the correct item\n        updateCurrentKey(key as K);\n      }\n      setMenuProps({\n        ...menuPropGestureStates[gesture],\n        anchorRef: { current: anchorBasedOnGesture },\n        isOpen: true\n      });\n    },\n    {\n      isDisabled: !contextMenuConfig //If there is no a context menu renderer we disable the hook\n    }\n  );\n\n  const handleCloseContextMenu = useCallback<Required<ComponentProps<typeof Menu>>['onClose']>(\n    (detail) => {\n      /*\n      TODO: Focus ring should be visible when context menu was closed because of selecting an item using keyboard,\n      but should not be visible when the selection was done using mouse or touch. This would probably means menu\n      onClose API is going to be changed a little bit so we can satisfy this requirement. JET-62372\n      */\n      //Focus has to be set on the current target that was obtained\n      //during context menu gesture when menu is dismissed or item is \"selected\"\n      if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {\n        scrollListRef.current?.focus({ preventScroll: true });\n      }\n      // We close the menu.The only prop that matters here is isOpen\n      setMenuProps({ ...initialMenuProps });\n    },\n    [scrollListRef]\n  );\n\n  return {\n    menuProps: { ...menuProps, onClose: handleCloseContextMenu },\n    onClose: handleCloseContextMenu,\n    contextMenuContext: contextMenuContext as ListItemContext<K, D>,\n    triggerProps,\n    notifyCurrentKeyChanged\n  } as const;\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 */\nimport { ComponentChildren, JSX } from 'preact';\nimport { ForwardedRef, forwardRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { ReorderableContext } from '../hooks/PRIVATE_useReorderable';\nimport { DataState, CurrentKeyDetail, ListItemRendererContext } from '../UNSAFE_Collection';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { List, SkeletonContainer } from '../PRIVATE_List';\nimport {\n  ListProps,\n  ListViewContextMenuConfig,\n  ListViewHandle,\n  SkeletonRendererContext\n} from './List.types';\nimport { getScrollPosition } from './ScrollPositionUtils';\nimport { MemoizeListViewReorderableItem } from './ListViewReorderableItem';\nimport { useListViewReorder } from './useListViewReorder';\nimport { ListViewContextMenu } from './ListViewContextMenu';\nimport { useListViewContextMenu } from './useListViewContextMenu';\nimport { useListViewCurrentItemOverride } from './useListViewCurrentItemOverride';\nimport { LOADMORE_STYLE_CLASS } from '../PRIVATE_LoadMoreCollection';\n\n/**\n * Props specific to non-virtualized ListView\n */\ntype NonVirtualizedListProps<K, D> = {\n  /**\n   * The data that is used to render each item in ListView.  If the value is null, then ListView will show nothing\n   * if hasMore is false, or loading indicator if hasMore is true.\n   */\n  data: D[] | null;\n  /**\n   * A callback function to extract the key which is used to identify the item.\n   */\n  getRowKey: (data: D) => K;\n  /**\n   * Whether there are more data available to load.  By default this returns false.\n   */\n  hasMore?: boolean;\n  /**\n   * An optional callback function which is invoked when user scrolls to the end of the list.\n   */\n  onLoadMore?: () => void;\n\n  /**\n   * Configuration used to specify a context menu.\n   */\n  contextMenuConfig?: ListViewContextMenuConfig<K, D>;\n};\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = Pick<\n  ListProps<K, D>,\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n  | 'gridlines'\n  | 'currentItemOverride'\n  | 'onPersistCurrentItem'\n  | 'onItemAction'\n  | 'onSelectionChange'\n  | 'promotedSection'\n  | 'selectedKeys'\n  | 'selectionMode'\n  | 'viewportConfig'\n  | 'testId'\n  | 'scrollPositionOverride'\n  | 'onReorder'\n  | 'itemPadding'\n  | 'itemEnterKeyFocusBehavior'\n  | 'skeletonRenderer'\n> &\n  NonVirtualizedListProps<K, D>;\n/**\n * A list view displays data items as a list or a grid with highly interactive features.\n */\nexport const ListView = forwardRef(\n  <K extends string | number, D>(\n    { children, ...props }: Props<K, D>,\n    ref?: ForwardedRef<ListViewHandle<K>>\n  ) => {\n    const { contextMenuConfig } = props;\n    const listRef = useRef<HTMLDivElement | null>(null);\n\n    const { currentItemOverride, updateCurrentItemOverride } = useListViewCurrentItemOverride(\n      props.currentItemOverride\n    );\n\n    const dataMetadata = props.data\n      ? props.data.map((aData: D) => {\n          const key = props.getRowKey(aData);\n          return { data: aData, metadata: { key } };\n        })\n      : null;\n\n    const loadRange = props.onLoadMore ? props.onLoadMore : () => {};\n    const dataState = dataMetadata\n      ? ({\n          offset: 0,\n          data: dataMetadata,\n          sizePrecision: props.hasMore ? 'atLeast' : 'exact',\n          totalSize: dataMetadata.length\n        } as DataState<K, D>)\n      : null;\n\n    useImperativeHandle(ref!, () => ({\n      getScrollPosition: () => {\n        if (listRef.current) {\n          return getScrollPosition(listRef.current);\n        }\n        return { y: 0 };\n      },\n      focus: () => {\n        if (listRef.current) {\n          listRef.current.focus();\n        }\n      }\n    }));\n\n    /**\n     * Reorder Section\n     */\n    const isReorderEnabled = props.onReorder != undefined;\n    const {\n      reorderProps,\n      reorderItemProps,\n      reorderContext,\n      reorderInstructionsId,\n      reorderInstructions\n    } = useListViewReorder({\n      onReorder: props.onReorder,\n      rootRef: listRef,\n      viewportConfig: props.viewportConfig\n    });\n\n    const { triggerProps, menuProps, contextMenuContext, notifyCurrentKeyChanged } =\n      useListViewContextMenu(dataState, contextMenuConfig, listRef, updateCurrentItemOverride);\n\n    const onPersistCurrentItem = (detail: CurrentKeyDetail<K>) => {\n      props.onPersistCurrentItem?.(detail);\n      notifyCurrentKeyChanged(detail);\n    };\n\n    const reorderableItemRenderer = useCallback(\n      (context: ListItemRendererContext<K, D>) => (\n        <MemoizeListViewReorderableItem {...reorderItemProps} itemKey={context.metadata.key}>\n          {children(context)}\n        </MemoizeListViewReorderableItem>\n      ),\n      [children, reorderItemProps]\n    );\n\n    if (isReorderEnabled && reorderItemProps) {\n      return (\n        <>\n          <ReorderableContext.Provider value={reorderContext}>\n            <List\n              {...props}\n              aria-describedby={reorderInstructionsId}\n              contextMenuTriggerProps={triggerProps}\n              reorderProps={reorderProps}\n              onLoadRange={loadRange}\n              scrollerRef={listRef}\n              data={dataState}\n              currentItemOverride={currentItemOverride}\n              onPersistCurrentItem={onPersistCurrentItem}>\n              {reorderableItemRenderer}\n            </List>\n            <span id={reorderInstructionsId}>\n              <HiddenAccessible>{reorderInstructions}</HiddenAccessible>\n            </span>\n          </ReorderableContext.Provider>\n          {contextMenuConfig && (\n            <ListViewContextMenu\n              {...menuProps}\n              testId={props.testId ? props.testId + '-menu' : undefined}\n              contextMenuConfig={contextMenuConfig}\n              contextMenuContext={contextMenuContext}\n            />\n          )}\n        </>\n      );\n    }\n\n    const customInitialSkeleton = (\n      skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n    ) => {\n      return (\n        <SkeletonContainer minimumCount={25}>\n          {(index) => {\n            const context: SkeletonRendererContext = {\n              loadingStatus: 'initial',\n              index: index\n            };\n            return skeletonRenderer(context);\n          }}\n        </SkeletonContainer>\n      );\n    };\n\n    const customLoadMoreSkeleton = (\n      skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n    ) => {\n      return (\n        <div class={LOADMORE_STYLE_CLASS}>\n          <SkeletonContainer minimumCount={3}>\n            {(index) => {\n              const context: SkeletonRendererContext = {\n                loadingStatus: 'loadMore',\n                index: index\n              };\n              return skeletonRenderer(context);\n            }}\n          </SkeletonContainer>\n        </div>\n      );\n    };\n\n    return (\n      <>\n        <List\n          {...props}\n          loadingIndicator={\n            props.skeletonRenderer ? customInitialSkeleton(props.skeletonRenderer) : undefined\n          }\n          loadMoreIndicator={\n            props.skeletonRenderer ? customLoadMoreSkeleton(props.skeletonRenderer) : undefined\n          }\n          onLoadRange={loadRange}\n          scrollerRef={listRef}\n          data={dataState}\n          contextMenuTriggerProps={triggerProps}\n          currentItemOverride={currentItemOverride}\n          onPersistCurrentItem={onPersistCurrentItem}>\n          {children}\n        </List>\n        {contextMenuConfig && (\n          <ListViewContextMenu\n            {...menuProps}\n            contextMenuConfig={contextMenuConfig}\n            contextMenuContext={contextMenuContext}\n            testId={props.testId ? props.testId + '-menu' : undefined}\n          />\n        )}\n      </>\n    );\n  }\n) as <K extends string | number, D>(\n  props: Props<K, D> & { ref?: ForwardedRef<ListViewHandle<K>> }\n) => JSX.Element;\n","import { useCallback, useRef } from 'preact/hooks';\nimport { Item as CurrentItem } from '#UNSAFE_Collection';\nimport { ListProps } from './List.types';\n\n/**\n * This hook handles the currentItemOverride passing to PRIVATE_List layer.\n *\n * If the app provided new value for 'currentItemOverride', we pass that down to PRIVATE_List layer;\n * otherwise, we will pass down the value of internal override, which would be the value\n * updated by useListViewContextMenu hook\n *\n * @param currentItemOverride\n */\nexport const useListViewCurrentItemOverride = <K extends string | number, D>(\n  currentItemOverride: ListProps<K, D>['currentItemOverride']\n) => {\n  // the override that will be passed down to PRIVATE_List layer\n  const listOverrideRef = useRef<CurrentItem<K>>();\n\n  // track the currentItemOverride attribute set by app\n  const appOverrideRef = useRef<CurrentItem<K>>();\n  if (appOverrideRef.current !== currentItemOverride) {\n    appOverrideRef.current = currentItemOverride;\n    listOverrideRef.current = currentItemOverride;\n  }\n\n  // track the internal override updated by useListViewContextMenu hook\n  // we can just update ref here since the hook will trigger a state update for its context, which will trigger a rerender\n  const updateCurrentItemOverride = useCallback((key: K) => {\n    listOverrideRef.current = { rowKey: key };\n  }, []);\n\n  return {\n    currentItemOverride: listOverrideRef.current,\n    updateCurrentItemOverride\n  };\n};\n","import type { RefObject } from 'preact';\nimport { useMemo, useState, useEffect, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { dragToScroll, findElementByKey } from '../utils/PRIVATE_collectionUtils';\nimport { ViewportConfig } from '../hooks/UNSAFE_useViewportIntersect';\nimport { useReorderable } from '../hooks/PRIVATE_useReorderable';\nimport { scrollToVisible, LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { ListProps } from './List.types';\n\ntype useListViewReorderProps<K, D> = Pick<ListProps<K, D>, 'onReorder'> & {\n  rootRef: RefObject<HTMLDivElement>;\n  viewportConfig?: ViewportConfig;\n};\n\nexport const useListViewReorder = <K extends string | number, D>({\n  onReorder,\n  rootRef,\n  viewportConfig\n}: useListViewReorderProps<K, D>) => {\n  const isReorderEnabled = onReorder != undefined;\n\n  const [dragKey, setDragKey] = useState<K | undefined>(undefined);\n  const { reorderProps, reorderContext, reorderInstructionsId, reorderInstructions } =\n    useReorderable({\n      onReorder,\n      rootRef,\n      itemSelector: LIST_ITEM_SELECTOR,\n      isDisabled: !isReorderEnabled,\n      columns: 1\n    });\n\n  // ensure the current item is scrolled into view during keyboard reordering,\n  // disable that during mouse reordering\n  const reorderScrollIntoView = useRef(false);\n  useEffect(() => {\n    if (isReorderEnabled && reorderScrollIntoView.current) {\n      const rootElement = rootRef.current as HTMLElement;\n      const elem = findElementByKey(\n        rootElement,\n        reorderContext.currentItemKey.current as K,\n        LIST_ITEM_SELECTOR\n      );\n      if (elem) {\n        const scroller = viewportConfig?.scrollerRef.current || rootElement;\n        // make sure item is visible\n        scrollToVisible(elem, scroller, 0);\n        reorderScrollIntoView.current = false;\n      }\n    }\n  });\n\n  const reorderItemProps = useMemo(() => {\n    return { dragKey, setDragKey, onReorder, rootRef };\n  }, [dragKey, onReorder, rootRef]);\n\n  if (!isReorderEnabled) {\n    return {\n      reorderProps,\n      reorderContext,\n      reorderInstructionsId,\n      reorderInstructions\n    } as const;\n  }\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // listview only do keyboard reordering with arrow up/down keys\n    if (\n      isReorderEnabled &&\n      (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n      (event.metaKey || event.ctrlKey) &&\n      event.shiftKey\n    ) {\n      reorderScrollIntoView.current = true;\n      reorderProps.onKeyDown?.(event);\n    }\n  };\n\n  const handleDragOver = (event: DragEvent) => {\n    if (dragKey !== undefined) {\n      reorderScrollIntoView.current = false;\n      dragToScroll(event, dragKey !== undefined, rootRef.current);\n    }\n  };\n\n  const reorderEventProps = mergeProps({ onKeyDown: handleKeyDown, onDragOver: handleDragOver });\n\n  return {\n    reorderProps: reorderEventProps,\n    reorderItemProps,\n    reorderContext,\n    reorderInstructionsId,\n    reorderInstructions\n  } as const;\n};\n"],"names":["MemoizeListViewReorderableItem","memo","children","dragKey","setDragKey","onReorder","rootRef","itemKey","itemRef","useRef","itemStyles","itemOverlayFront","styles","reorderableItemOverlayFront","itemOverlayRear","reorderableItemOverlayRear","itemDragger","reorderableItemDragger","setTransferData","useCallback","event","dataTransfer","setData","JSON","stringify","rootProps","isDragged","overlayZoneBeforeProps","overlayZoneAfterProps","useReorderableItem","isDisabled","ref","getItem","current","closest","LIST_ITEM_SELECTOR","itemSelector","isVertical","classes","classNames","class","reorderableItemDnd","_jsxs","isKeyDefined","jsxs","_Fragment","Fragment","_jsx","jsx","prev","next","ListViewContextMenu","contextMenuConfig","testId","contextMenuContext","menuProps","accessibleLabel","menuItems","isOpen","itemsRenderer","isMenuChildrenFalsy","Menu","menuPropGestureStates","mouse","initialFocus","placement","offsetValue","keyboard","touch","initialMenuProps","anchorRef","ListView","forwardRef","props","listRef","currentItemOverride","updateCurrentItemOverride","listOverrideRef","appOverrideRef","key","rowKey","useListViewCurrentItemOverride","dataMetadata","data","map","aData","metadata","getRowKey","loadRange","onLoadMore","dataState","offset","sizePrecision","hasMore","totalSize","length","useImperativeHandle","getScrollPosition","y","focus","isReorderEnabled","undefined","reorderProps","reorderItemProps","reorderContext","reorderInstructionsId","reorderInstructions","viewportConfig","useState","useReorderable","columns","reorderScrollIntoView","useEffect","rootElement","elem","findElementByKey","currentItemKey","scroller","scrollerRef","scrollToVisible","useMemo","mergeProps","onKeyDown","metaKey","ctrlKey","shiftKey","onDragOver","dragToScroll","useListViewReorder","triggerProps","notifyCurrentKeyChanged","scrollListRef","updateCurrentKey","setContextMenuContext","setMenuProps","currentKeyRef","useContextMenuGesture","gesture","anchor","target","anchorBasedOnGesture","context","findItemContext","keyExtractor","handleCloseContextMenu","detail","reason","preventScroll","onClose","value","useListViewContextMenu","onPersistCurrentItem","reorderableItemRenderer","ReorderableContext","Provider","List","contextMenuTriggerProps","onLoadRange","id","HiddenAccessible","loadingIndicator","skeletonRenderer","SkeletonContainer","minimumCount","index","loadingStatus","loadMoreIndicator","LOADMORE_STYLE_CLASS","customLoadMoreSkeleton"],"mappings":"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"}

package/amd/{MonthView-ea883c49.js → MonthView-96fafba4.js}

@@ -1,2 +1,2 @@
-define(['exports', 'preact/jsx-runtime', './dayUtils-b8ee6544', './getFormatParse-918996fc', './logger-0f873e29', './calendarDateUtils-ab83f6b1', 'preact/hooks', './StyledDatePickerButton-b664f4f0', 'preact/compat', './useTranslationBundle-e4dd341e', './useCellNavigation-fe5a7be7', './PRIVATE_MonthView/themes/DayCellStyles.css', './useUser-08901aba', './Grid-caac1c86', './PRIVATE_MonthView/themes/redwood/MonthViewTheme', './useComponentTheme-5aa41a8f', './PRIVATE_MonthView/themes/MonthViewContract.css', './PRIVATE_MonthView/themes/WeekNumberCellStyle.css'], (function(e,t,a,s,o,r,n,i,l,d,c,u,h,m,y,p,g,D){"use strict";const b=()=>({state:"enabled"}),f=e=>{const{buttonProps:a}=(({date:e,dayFormatter:t=b,dateFormatter:a,isAdjacentMonth:s,isDisabled:o,isFocusable:n,isFocused:i,isHidden:u,isReadonly:h,isSelected:m,isToday:y,onAction:p,onNavigation:g})=>{const{state:D}=t(e),f="disabled"===D,w="restricted"===D,T=c.useFocusableCell({isFocusable:n,isFocused:i}),k=l.useCallback((e=>{o||h||f||w||p(e)}),[o,f,h,w,p]),S=c.useCellNavigation({navigationMap:{ArrowLeft:{ltr:"previousDay",rtl:"nextDay"},ArrowRight:{ltr:"nextDay",rtl:"previousDay"},ArrowDown:"nextWeek",ArrowUp:"previousWeek",PageDown:"nextMonth",PageUp:"previousMonth",Home:"firstDayOfMonth",End:"lastDayOfMonth",ShiftPageDown:"nextYear",ShiftPageUp:"previousYear",CtrlAltT:"today"},payload:{date:e},onAction:k,onNavigation:g}),C=d.useTranslationBundle("@oracle/oraclejet-preact"),x=C.datePicker_today(),M=C.datePicker_selected(),v=C.datePicker_restricted(),j=a(r.getIsoDateStr(e.year,e.month,e.day));let P=y?`${x}, ${j}`:j;P=w?`${P}, ${v}`:P,P=m?`${P}, ${M}`:P;const V=r.toJSDate(e.year,e.month,e.day).getDate().toString();return{buttonProps:{"aria-label":P,...(u||o||f||w)&&{"aria-disabled":!0},isActivable:!(o||h||f||w),isAdjacentMonth:s,isDimmed:o||f,isHidden:u,isHoverable:!(o||h||f||w),isReadonly:h,isSelected:m,isRestricted:w,isToday:y,label:V,...T,...S}}})(e);return t.jsx("div",{role:"gridcell",class:u.dayCellStyles,children:t.jsx(i.StyledDatePickerButton,{...a})})},w=({startDateOfWeek:e})=>{const a=(e=>{const t=r.toJSDateUTC(e.year,e.month,e.day),a=t.getUTCDay();0!==a&&1!==a&&6!==a&&o.warn("calculateWeekNumber's date property's getUTCDay() is assumed to be 0 (Sunday), 1 (Monday) or 6 (Saturday)\n      since that is the first day of the week for the locale's JET supports."),1!==a&&t.setUTCDate(t.getUTCDate()+(0===a?1:2)),t.setUTCDate(t.getUTCDate()+3);const s=r.toJSDate(t.getUTCFullYear(),1,1);return Math.floor(Math.round((t.getTime()-s.getTime())/864e5)/7)+1})(e),s=d.useTranslationBundle("@oracle/oraclejet-preact");return t.jsx("div",{"aria-label":s.datePicker_weekNum({NUM:String(a)}),class:D.weekNumberCellStyles,role:"rowheader",children:t.jsx("span",{class:D.weekNumberStyles,children:a})})};function T(e,t){return e.year===t.year&&e.month===t.month&&e.day===t.day}e.MonthView=({dayFormatter:e,daysOutsideMonth:o="hidden",isReadonly:i=!1,max:l,min:d,onAction:c,onNavigation:u,selectedDate:D,focusableDate:b,isFocused:k=!1,testId:S,todaysDate:C,weekDisplay:x="none"})=>{const{locale:M}=h.useUser(),v=a.getWeeksInMonth(b.year,b.month,M),{baseTheme:j,styles:P}=p.useComponentTheme(y.MonthViewRedwoodTheme,{}),V="number"===x,A=`repeat(${V?8:7}, 1fr)`,F=n.useMemo((()=>{r.checkNoCalendarExtension(M);const e={locale:M,dateStyle:"full"},{format:t}=s.getFormatParse(e);return t}),[M]),U=r.formatFullCalendarDate(M,b,"month");return t.jsx("div",{class:j,children:t.jsxs(m.Grid,{gap:g.monthViewScaleVars.rowGap,"aria-label":U,role:"grid",testId:S,children:[(()=>{const e=a.getDaysOfWeekNames(M,"short");return t.jsx("div",{class:P.sticky,children:t.jsxs(m.Grid,{role:"row","aria-hidden":"true",gridTemplateColumns:A,gap:g.monthViewScaleVars.columnGap,children:[V&&t.jsx("div",{role:"presentation"}),e.map((e=>t.jsx("div",{role:"columnheader",class:P.dayOfTheWeek,children:t.jsx("span",{children:e})})))]})})})(),(()=>{const s=[];for(let n=0;n<v;n++){const h=a.getStartOfWeek(b.year,b.month,1,M),y=a.getDatesInWeek(n,h.year,h.month,h.day),p=y.map((a=>{const s=r.isDateOutOfRange(a,d,l),n=!!D&&T(a,D),h=T(a,C),m=T(a,b),y=(p=b,a.month!==p.month);var p;const g=y&&"hidden"===o;return t.jsx(f,{date:a,dateFormatter:F,dayFormatter:e,isAdjacentMonth:y,isDisabled:s,isFocusable:m,isFocused:m&&k,isHidden:g,isReadonly:i,isSelected:n,isToday:h,onAction:c,onNavigation:u},`${a.year}-${a.month}-${a.day}`)}));s.push(t.jsxs(m.Grid,{role:"row",gridTemplateColumns:A,gap:g.monthViewScaleVars.columnGap,children:[V&&t.jsx(w,{startDateOfWeek:y[0]}),p]},n))}return s})()]})})}}));
-//# sourceMappingURL=MonthView-ea883c49.js.map
+define(['exports', 'preact/jsx-runtime', './dayUtils-b8ee6544', './getFormatParse-918996fc', './logger-0f873e29', './calendarDateUtils-ab83f6b1', 'preact/hooks', './StyledDatePickerButton-bceb62e1', 'preact/compat', './useTranslationBundle-e4dd341e', './useCellNavigation-fe5a7be7', './PRIVATE_MonthView/themes/DayCellStyles.css', './useUser-08901aba', './Grid-caac1c86', './PRIVATE_MonthView/themes/redwood/MonthViewTheme', './useComponentTheme-5aa41a8f', './PRIVATE_MonthView/themes/MonthViewContract.css', './PRIVATE_MonthView/themes/WeekNumberCellStyle.css'], (function(e,t,a,s,o,r,n,i,l,d,c,u,h,m,y,p,g,D){"use strict";const b=()=>({state:"enabled"}),f=e=>{const{buttonProps:a}=(({date:e,dayFormatter:t=b,dateFormatter:a,isAdjacentMonth:s,isDisabled:o,isFocusable:n,isFocused:i,isHidden:u,isReadonly:h,isSelected:m,isToday:y,onAction:p,onNavigation:g})=>{const{state:D}=t(e),f="disabled"===D,w="restricted"===D,T=c.useFocusableCell({isFocusable:n,isFocused:i}),k=l.useCallback((e=>{o||h||f||w||p(e)}),[o,f,h,w,p]),S=c.useCellNavigation({navigationMap:{ArrowLeft:{ltr:"previousDay",rtl:"nextDay"},ArrowRight:{ltr:"nextDay",rtl:"previousDay"},ArrowDown:"nextWeek",ArrowUp:"previousWeek",PageDown:"nextMonth",PageUp:"previousMonth",Home:"firstDayOfMonth",End:"lastDayOfMonth",ShiftPageDown:"nextYear",ShiftPageUp:"previousYear",CtrlAltT:"today"},payload:{date:e},onAction:k,onNavigation:g}),C=d.useTranslationBundle("@oracle/oraclejet-preact"),x=C.datePicker_today(),M=C.datePicker_selected(),v=C.datePicker_restricted(),j=a(r.getIsoDateStr(e.year,e.month,e.day));let P=y?`${x}, ${j}`:j;P=w?`${P}, ${v}`:P,P=m?`${P}, ${M}`:P;const V=r.toJSDate(e.year,e.month,e.day).getDate().toString();return{buttonProps:{"aria-label":P,...(u||o||f||w)&&{"aria-disabled":!0},isActivable:!(o||h||f||w),isAdjacentMonth:s,isDimmed:o||f,isHidden:u,isHoverable:!(o||h||f||w),isReadonly:h,isSelected:m,isRestricted:w,isToday:y,label:V,...T,...S}}})(e);return t.jsx("div",{role:"gridcell",class:u.dayCellStyles,children:t.jsx(i.StyledDatePickerButton,{...a})})},w=({startDateOfWeek:e})=>{const a=(e=>{const t=r.toJSDateUTC(e.year,e.month,e.day),a=t.getUTCDay();0!==a&&1!==a&&6!==a&&o.warn("calculateWeekNumber's date property's getUTCDay() is assumed to be 0 (Sunday), 1 (Monday) or 6 (Saturday)\n      since that is the first day of the week for the locale's JET supports."),1!==a&&t.setUTCDate(t.getUTCDate()+(0===a?1:2)),t.setUTCDate(t.getUTCDate()+3);const s=r.toJSDate(t.getUTCFullYear(),1,1);return Math.floor(Math.round((t.getTime()-s.getTime())/864e5)/7)+1})(e),s=d.useTranslationBundle("@oracle/oraclejet-preact");return t.jsx("div",{"aria-label":s.datePicker_weekNum({NUM:String(a)}),class:D.weekNumberCellStyles,role:"rowheader",children:t.jsx("span",{class:D.weekNumberStyles,children:a})})};function T(e,t){return e.year===t.year&&e.month===t.month&&e.day===t.day}e.MonthView=({dayFormatter:e,daysOutsideMonth:o="hidden",isReadonly:i=!1,max:l,min:d,onAction:c,onNavigation:u,selectedDate:D,focusableDate:b,isFocused:k=!1,testId:S,todaysDate:C,weekDisplay:x="none"})=>{const{locale:M}=h.useUser(),v=a.getWeeksInMonth(b.year,b.month,M),{baseTheme:j,styles:P}=p.useComponentTheme(y.MonthViewRedwoodTheme,{}),V="number"===x,A=`repeat(${V?8:7}, 1fr)`,F=n.useMemo((()=>{r.checkNoCalendarExtension(M);const e={locale:M,dateStyle:"full"},{format:t}=s.getFormatParse(e);return t}),[M]),U=r.formatFullCalendarDate(M,b,"month");return t.jsx("div",{class:j,children:t.jsxs(m.Grid,{gap:g.monthViewScaleVars.rowGap,"aria-label":U,role:"grid",testId:S,children:[(()=>{const e=a.getDaysOfWeekNames(M,"short");return t.jsx("div",{class:P.sticky,children:t.jsxs(m.Grid,{role:"row","aria-hidden":"true",gridTemplateColumns:A,gap:g.monthViewScaleVars.columnGap,children:[V&&t.jsx("div",{role:"presentation"}),e.map((e=>t.jsx("div",{role:"columnheader",class:P.dayOfTheWeek,children:t.jsx("span",{children:e})})))]})})})(),(()=>{const s=[];for(let n=0;n<v;n++){const h=a.getStartOfWeek(b.year,b.month,1,M),y=a.getDatesInWeek(n,h.year,h.month,h.day),p=y.map((a=>{const s=r.isDateOutOfRange(a,d,l),n=!!D&&T(a,D),h=T(a,C),m=T(a,b),y=(p=b,a.month!==p.month);var p;const g=y&&"hidden"===o;return t.jsx(f,{date:a,dateFormatter:F,dayFormatter:e,isAdjacentMonth:y,isDisabled:s,isFocusable:m,isFocused:m&&k,isHidden:g,isReadonly:i,isSelected:n,isToday:h,onAction:c,onNavigation:u},`${a.year}-${a.month}-${a.day}`)}));s.push(t.jsxs(m.Grid,{role:"row",gridTemplateColumns:A,gap:g.monthViewScaleVars.columnGap,children:[V&&t.jsx(w,{startDateOfWeek:y[0]}),p]},n))}return s})()]})})}}));
+//# sourceMappingURL=MonthView-96fafba4.js.map

package/amd/{MonthView-ea883c49.js.map → MonthView-96fafba4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MonthView-ea883c49.js","sources":["../../src/PRIVATE_MonthView/useDayCell.ts","../../src/PRIVATE_MonthView/DayCell.tsx","../../src/PRIVATE_MonthView/WeekNumberCell.tsx","../../src/PRIVATE_MonthView/MonthView.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 { DateISOStr } from '#UNSAFE_IntlDateTime';\nimport { FormatterFunc } from '#UNSAFE_IntlFormatParse';\nimport { getIsoDateStr, toJSDate } from '#utils/UNSAFE_calendarDateUtils';\nimport { ComponentProps, useCallback } from 'preact/compat';\n\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { useFocusableCell } from '#UNSAFE_DatePicker/useFocusableCell';\nimport { useCellNavigation } from '#UNSAFE_DatePicker/useCellNavigation';\nimport { StyledDatePickerButton } from '#PRIVATE_StyledDatePickerButton';\n\ntype NavigationDirections =\n  | 'previousDay'\n  | 'nextDay'\n  | 'previousWeek'\n  | 'nextWeek'\n  | 'previousMonth'\n  | 'nextMonth'\n  | 'previousYear'\n  | 'nextYear'\n  | 'firstDayOfMonth'\n  | 'lastDayOfMonth'\n  | 'today';\n\nexport type DayFormatOptions = {\n  state: 'enabled' | 'disabled' | 'restricted';\n};\n\n// These are the properties the useDayCell hook takes.\nexport type UseDayCellProps = {\n  /**\n   * Date of the day cell. This will be formatted as a full date and put in the aria-label.\n   */\n  date: CalendarDateRequired;\n  /**\n   * A function used to format the day cell date as a full date.\n   */\n  dateFormatter: FormatterFunc<DateISOStr>;\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   * Whether the day cell is in an adjacent month, not the current month.\n   */\n  isAdjacentMonth: boolean;\n  /**\n   * Whether the day cell is disabled, like if it is out of the min/max range.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the day cell is focusable, meaning it will have tabIndex 0.\n   */\n  isFocusable: boolean;\n  /**\n   * Whether the day cell has focus.\n   */\n  isFocused: boolean;\n  /**\n   * Whether the day cell is hidden. For example, days outside of the current month are hidden by default.\n   */\n  isHidden: boolean;\n  /**\n   * Whether the day cell is readonly. It is not activeable.\n   */\n  isReadonly: boolean;\n  /**\n   * Whether the day cell looks selected.\n   */\n  isSelected: boolean;\n  /**\n   * Whether the day cell's date is today.\n   */\n  isToday: boolean;\n  /**\n   * A callback that will be invoked when the user selects the date by clicking on a day cell or selecting the enter or space key on a day cell.\n   * @param payload The payload containing the date represented by this cell.\n   */\n  onAction: (payload: { date: CalendarDateRequired }) => void;\n\n  /**\n   * A callback that will be invoked when the user navigates.\n   */\n  onNavigation: (detail: { direction: NavigationDirections; date: CalendarDateRequired }) => void;\n};\n\n/**\n * The useDayCell hook returns properties for an individual DayCell. The properties returned should be spread on the StyledDatePickerButton.\n * These include the event handlers for keydown and click.\n */\nexport const useDayCell = ({\n  date,\n  dayFormatter = defaultDayFormatter,\n  dateFormatter,\n  isAdjacentMonth,\n  isDisabled,\n  isFocusable,\n  isFocused,\n  isHidden,\n  isReadonly,\n  isSelected,\n  isToday,\n  onAction,\n  onNavigation\n}: UseDayCellProps) => {\n  // apply day formatting\n  const { state } = dayFormatter(date);\n  const isDisabledFormat = state === 'disabled';\n  const isRestrictedFormat = state === 'restricted';\n\n  // Focus the day cell with isFocused true when the state updates.\n  const buttonProps = useFocusableCell({ isFocusable, isFocused });\n  // Override onAction to not call it if disabled, readonly or restricted\n  const handleAction: UseDayCellProps['onAction'] = useCallback(\n    (payload) => {\n      if (isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat) return;\n      onAction(payload);\n    },\n    [isDisabled, isDisabledFormat, isReadonly, isRestrictedFormat, onAction]\n  );\n  const buttonEventHandlers = useCellNavigation({\n    navigationMap: {\n      ArrowLeft: { ltr: 'previousDay', rtl: 'nextDay' },\n      ArrowRight: { ltr: 'nextDay', rtl: 'previousDay' },\n      ArrowDown: 'nextWeek',\n      ArrowUp: 'previousWeek',\n      PageDown: 'nextMonth',\n      PageUp: 'previousMonth',\n      Home: 'firstDayOfMonth',\n      End: 'lastDayOfMonth',\n      ShiftPageDown: 'nextYear',\n      ShiftPageUp: 'previousYear',\n      CtrlAltT: 'today'\n    },\n    payload: { date },\n    onAction: handleAction,\n    onNavigation\n  });\n\n  // For accessibility, we want a full date.\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const today = translations.datePicker_today();\n  const selected = translations.datePicker_selected();\n  const restricted = translations.datePicker_restricted();\n\n  const dateIsoStr = getIsoDateStr(date.year, date.month, date.day);\n  const formattedDate = dateFormatter(dateIsoStr);\n  let ariaLabel = isToday ? `${today}, ${formattedDate}` : formattedDate;\n  ariaLabel = isRestrictedFormat ? `${ariaLabel}, ${restricted}` : ariaLabel;\n  ariaLabel = isSelected ? `${ariaLabel}, ${selected}` : ariaLabel;\n  const dayOfMonth = toJSDate(date.year, date.month, date.day).getDate().toString();\n\n  return {\n    buttonProps: {\n      'aria-label': ariaLabel,\n      ...((isHidden || isDisabled || isDisabledFormat || isRestrictedFormat) && {\n        'aria-disabled': true\n      }),\n      isActivable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),\n      isAdjacentMonth,\n      isDimmed: isDisabled || isDisabledFormat,\n      isHidden,\n      isHoverable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),\n      isReadonly,\n      isSelected,\n      isRestricted: isRestrictedFormat,\n      isToday,\n      label: dayOfMonth,\n      ...buttonProps,\n      ...buttonEventHandlers\n    } as ComponentProps<typeof StyledDatePickerButton>\n  };\n};\n\n/**\n * A default day formatter that always formats as enabled state.\n */\nconst defaultDayFormatter = () => ({ state: 'enabled' }) as DayFormatOptions;\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 { StyledDatePickerButton } from '#PRIVATE_StyledDatePickerButton';\nimport { UseDayCellProps, useDayCell } from './useDayCell';\nimport { dayCellStyles } from './themes/DayCellStyles.css';\n\ntype PickedUseDayCellProps = Pick<\n  UseDayCellProps,\n  | 'date'\n  | 'dateFormatter'\n  | 'dayFormatter'\n  | 'isAdjacentMonth'\n  | 'isDisabled'\n  | 'isFocusable'\n  | 'isFocused'\n  | 'isHidden'\n  | 'isReadonly'\n  | 'isSelected'\n  | 'isToday'\n  | 'onAction'\n  | 'onNavigation'\n>;\n\ntype DayCellProps = PickedUseDayCellProps;\n\n/**\n * The DayCell is the cell within the DatePicker's month view that contains the day in the month view.\n * This component will format the date for the aria-label.\n * The DayCell components uses the useDayCell hook to handle the user interactions with the day cell.\n */\nexport const DayCell = (props: DayCellProps) => {\n  const { buttonProps } = useDayCell(props);\n  // buttonProps, e.g., tabIndex, aria-label, onclick, onkeydown and visual states\n  return (\n    <div role=\"gridcell\" class={dayCellStyles}>\n      <StyledDatePickerButton {...buttonProps} />\n    </div>\n  );\n};\n","import { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { CalendarDateRequired, toJSDate, toJSDateUTC } from '#utils/UNSAFE_calendarDateUtils';\nimport { weekNumberCellStyles, weekNumberStyles } from './themes/WeekNumberCellStyle.css';\nimport * as Logger from '../utils/UNSAFE_logger';\n\ntype Props = {\n  /**\n   * startDateOfWeek is the first date of the week row\n   */\n  startDateOfWeek: CalendarDateRequired;\n};\n\n/**\n * The ISO 8601 definition for week 01 is the week with the first Thursday of the Gregorian year (i.e. of January) in it.\n * https://en.wikipedia.org/wiki/ISO_week_date\n * @param date The first date of the week row to be used to calculate the week number.\n * The date must be a Saturday, Sunday, or Monday. We assume this because the week for\n * all the locales we support start on one of these days.\n * @returns the number of week in the year\n */\nconst calculateWeekNumber = (date: CalendarDateRequired) => {\n  const checkDate = toJSDateUTC(date.year, date.month, date.day);\n  const dayNumber = checkDate.getUTCDay(); // 0 for Sunday, 1 for Monday, 2 for Tuesday, etc.\n\n  if (dayNumber !== 0 && dayNumber !== 1 && dayNumber !== 6) {\n    // This message is for internal JET developers. We should never see this message. In all locales the day of the\n    // week starts on Sunday, Monday or Saturday.\n    Logger.warn(`calculateWeekNumber's date property's getUTCDay() is assumed to be 0 (Sunday), 1 (Monday) or 6 (Saturday)\n      since that is the first day of the week for the locale's JET supports.`);\n  }\n\n  // For ISO week, we set the start of the week to Monday\n  if (dayNumber !== 1) {\n    // If it is already Monday, do nothing.\n    // If it is Sunday (0), add 1 to move it up to Monday.\n    // If it is Saturday (6), move it up two days to Monday.\n    checkDate.setUTCDate(checkDate.getUTCDate() + (dayNumber === 0 ? 1 : 2));\n  }\n\n  // Find Thursday (day value of 4) of this week. Since we know checkDate at this point is a Monday,\n  // we move it up 3 days.\n  checkDate.setUTCDate(checkDate.getUTCDate() + 3);\n\n  // Create the start of the year date\n  const janFirst = toJSDate(checkDate.getUTCFullYear(), 1, 1);\n\n  return Math.floor(Math.round((checkDate.getTime() - janFirst.getTime()) / 86400000) / 7) + 1;\n};\n\n/**\n * The WeekNumberCell is the cell at the start of a week's row within the DatePicker's\n * month view that contains the week's number within the year. This displays when\n * the DatePicker's 'weekDisplay' prop is set to 'number'.\n * This component will format the week number for the aria-label.\n */\nconst WeekNumberCell = ({ startDateOfWeek }: Props) => {\n  const weekNumber = calculateWeekNumber(startDateOfWeek);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  return (\n    <div\n      aria-label={translations.datePicker_weekNum({ NUM: String(weekNumber) })}\n      class={weekNumberCellStyles}\n      role=\"rowheader\">\n      <span class={weekNumberStyles}>{weekNumber}</span>\n    </div>\n  );\n};\n\nexport { WeekNumberCell };\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 {\n  getWeeksInMonth,\n  getDatesInWeek,\n  getStartOfWeek,\n  getDaysOfWeekNames,\n  WeekInMonthIndex\n} from '#utils/PRIVATE_dayUtils';\nimport { ComponentProps } from 'preact/compat';\nimport { useMemo } from 'preact/hooks';\nimport {\n  CalendarDateRequired,\n  checkNoCalendarExtension,\n  formatFullCalendarDate,\n  isDateOutOfRange\n} from '#utils/UNSAFE_calendarDateUtils';\nimport { getFormatParse, NativeDateTimeOptions } from '#UNSAFE_IntlDateTime';\nimport { DayCell } from './DayCell';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { Grid } from '#UNSAFE_Grid';\nimport {\n  MonthViewStyles,\n  MonthViewVariantOptions\n} from '#PRIVATE_MonthView/themes/MonthViewStyles.css';\nimport { MonthViewRedwoodTheme } from '#PRIVATE_MonthView/themes/redwood/MonthViewTheme';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { monthViewScaleVars } from '#PRIVATE_MonthView/themes/MonthViewContract.css';\nimport { WeekNumberCell } from './WeekNumberCell';\n\ntype PickedDayCellProps = Pick<\n  ComponentProps<typeof DayCell>,\n  'dayFormatter' | 'onAction' | 'onNavigation'\n>;\n\ntype MonthViewProps = TestIdProps &\n  PickedDayCellProps & {\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     * The MonthView renders with the month of the focusableDate.\n     * The focusableDate is the only day in the MonthView that has tabIndex: 0 on it.\n     * The focusableDate doesn't have focus until the user tabs in to the Month View.\n     * The focusableDate is never undefined.\n     */\n    focusableDate: CalendarDateRequired;\n    /**\n     * If set to true, the focusableDate will be focused and you will see the focus ring. It will be\n     * false when no date has focus.\n     * @default false\n     */\n    isFocused?: boolean;\n    /**\n     * Specifies whether the component is readonly.\n     */\n    isReadonly?: boolean;\n    /**\n     * The maximum selectable date. The max must be greater than the min if they are both specified.\n     */\n    max?: CalendarDateRequired;\n    /**\n     * The minimum selectable date. The min must be less than the max if they are both specified.\n     */\n    min?: CalendarDateRequired;\n    /**\n     * The selected date of the MonthView, or undefined is there is no selected date. This\n     * is used to highlight the selected day cell if it is within the min/max range.\n     */\n    selectedDate?: CalendarDateRequired;\n    /**\n     * Today's date. This is used to highlight the Today day cell.\n     */\n    todaysDate: CalendarDateRequired;\n    /**\n     * Whether week of the year will be shown in the DatePicker. The default calculation follows the\n     * ISO 8601 definition: the first week of the year contains the first Thursday of the year.\n     * This means that some days from one year may be placed into weeks 'belonging' to another year.\n     */\n    weekDisplay?: 'none' | 'number';\n  };\n\n/**\n * A MonthView is a month interface that allows users to select a single date. The MonthView is the week day header\n * abbreviations and the days of the month. A MonthView is used inside of a DatePicker\n * along with the DatePickerHeader and the MonthGridView and YearGridView.\n */\nexport const MonthView = ({\n  dayFormatter,\n  daysOutsideMonth = 'hidden',\n  isReadonly = false,\n  max,\n  min,\n  onAction,\n  onNavigation,\n  selectedDate,\n  focusableDate,\n  isFocused = false,\n  testId,\n  todaysDate,\n  weekDisplay = 'none'\n}: MonthViewProps) => {\n  const { locale } = useUser();\n  const weeksInMonth = getWeeksInMonth(focusableDate.year, focusableDate.month, locale);\n  const { baseTheme, styles } = useComponentTheme<MonthViewVariantOptions, MonthViewStyles>(\n    MonthViewRedwoodTheme,\n    {}\n  );\n  const isWeekNumberDisplayed = weekDisplay === 'number';\n  const gridTemplateColumns = `repeat(${isWeekNumberDisplayed ? 8 : 7}, 1fr)`;\n\n  const dateFormatter = useMemo(() => {\n    checkNoCalendarExtension(locale);\n    const dateFormatOptions: NativeDateTimeOptions = {\n      locale,\n      dateStyle: 'full'\n    };\n    const { format } = getFormatParse(dateFormatOptions);\n    return format;\n  }, [locale]);\n\n  const renderMonthViewHeaderRow = () => {\n    const weekDays = getDaysOfWeekNames(locale, 'short');\n\n    return (\n      <div class={styles.sticky}>\n        <Grid\n          role=\"row\"\n          aria-hidden=\"true\"\n          gridTemplateColumns={gridTemplateColumns}\n          gap={monthViewScaleVars.columnGap}>\n          {isWeekNumberDisplayed && <div role=\"presentation\" />}\n          {weekDays.map((day) => (\n            <div role=\"columnheader\" class={styles.dayOfTheWeek}>\n              <span>{day}</span>\n            </div>\n          ))}\n        </Grid>\n      </div>\n    );\n  };\n\n  const renderMonthView = () => {\n    const calendarGrid: JSX.Element[] = [];\n\n    for (let weekIndex = 0; weekIndex < weeksInMonth; weekIndex++) {\n      const startDateOfWeek = getStartOfWeek(focusableDate.year, focusableDate.month, 1, locale);\n\n      const weekDates = getDatesInWeek(\n        weekIndex as WeekInMonthIndex,\n        startDateOfWeek.year,\n        startDateOfWeek.month,\n        startDateOfWeek.day\n      );\n\n      const weekCells = weekDates.map((dayCellDate) => {\n        // This figures out the visual state of the DayCell.\n        const isDisabled = isDateOutOfRange(dayCellDate, min, max);\n\n        // Even if the selected date is out of range, the UX design shows it as selected.\n        const isSelected = selectedDate ? isSameDate(dayCellDate, selectedDate) : false;\n        const isToday = isSameDate(dayCellDate, todaysDate);\n        const isFocusable = isSameDate(dayCellDate, focusableDate);\n        const isAdjacentMonth = isOutOfMonth(dayCellDate, focusableDate);\n        const isHidden = isAdjacentMonth && daysOutsideMonth === 'hidden';\n\n        return (\n          <DayCell\n            key={`${dayCellDate.year}-${dayCellDate.month}-${dayCellDate.day}`}\n            date={dayCellDate}\n            dateFormatter={dateFormatter}\n            dayFormatter={dayFormatter}\n            isAdjacentMonth={isAdjacentMonth}\n            isDisabled={isDisabled}\n            isFocusable={isFocusable}\n            isFocused={isFocusable && isFocused}\n            isHidden={isHidden}\n            isReadonly={isReadonly}\n            isSelected={isSelected}\n            isToday={isToday}\n            onAction={onAction}\n            onNavigation={onNavigation}\n          />\n        );\n      });\n\n      calendarGrid.push(\n        <Grid\n          key={weekIndex}\n          role=\"row\"\n          gridTemplateColumns={gridTemplateColumns}\n          gap={monthViewScaleVars.columnGap}>\n          {isWeekNumberDisplayed && <WeekNumberCell startDateOfWeek={weekDates[0]} />}\n          {weekCells}\n        </Grid>\n      );\n    }\n\n    return calendarGrid;\n  };\n\n  const monthViewAriaLabel = formatFullCalendarDate(locale, focusableDate, 'month');\n  return (\n    <div class={baseTheme}>\n      <Grid\n        gap={monthViewScaleVars.rowGap}\n        aria-label={monthViewAriaLabel}\n        role=\"grid\"\n        testId={testId}>\n        {renderMonthViewHeaderRow()}\n        {renderMonthView()}\n      </Grid>\n    </div>\n  );\n};\n\nfunction isSameDate(date1: CalendarDateRequired, date2: CalendarDateRequired) {\n  return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;\n}\n\nfunction isOutOfMonth(date1: CalendarDateRequired, currentMonthDate: CalendarDateRequired) {\n  return date1.month !== currentMonthDate.month;\n}\n"],"names":["defaultDayFormatter","state","DayCell","props","buttonProps","date","dayFormatter","dateFormatter","isAdjacentMonth","isDisabled","isFocusable","isFocused","isHidden","isReadonly","isSelected","isToday","onAction","onNavigation","isDisabledFormat","isRestrictedFormat","useFocusableCell","handleAction","useCallback","payload","buttonEventHandlers","useCellNavigation","navigationMap","ArrowLeft","ltr","rtl","ArrowRight","ArrowDown","ArrowUp","PageDown","PageUp","Home","End","ShiftPageDown","ShiftPageUp","CtrlAltT","translations","useTranslationBundle","today","datePicker_today","selected","datePicker_selected","restricted","datePicker_restricted","formattedDate","getIsoDateStr","year","month","day","ariaLabel","dayOfMonth","toJSDate","getDate","toString","isActivable","isDimmed","isHoverable","isRestricted","label","useDayCell","_jsx","jsx","role","class","dayCellStyles","children","StyledDatePickerButton","WeekNumberCell","startDateOfWeek","weekNumber","checkDate","toJSDateUTC","dayNumber","getUTCDay","Logger.warn","setUTCDate","getUTCDate","janFirst","getUTCFullYear","Math","floor","round","getTime","calculateWeekNumber","datePicker_weekNum","NUM","String","weekNumberCellStyles","weekNumberStyles","isSameDate","date1","date2","daysOutsideMonth","max","min","selectedDate","focusableDate","testId","todaysDate","weekDisplay","locale","useUser","weeksInMonth","getWeeksInMonth","baseTheme","styles","useComponentTheme","MonthViewRedwoodTheme","isWeekNumberDisplayed","gridTemplateColumns","useMemo","checkNoCalendarExtension","dateFormatOptions","dateStyle","format","getFormatParse","monthViewAriaLabel","formatFullCalendarDate","_jsxs","jsxs","Grid","gap","monthViewScaleVars","rowGap","weekDays","getDaysOfWeekNames","sticky","columnGap","map","dayOfTheWeek","renderMonthViewHeaderRow","calendarGrid","weekIndex","getStartOfWeek","weekDates","getDatesInWeek","weekCells","dayCellDate","isDateOutOfRange","currentMonthDate","push","renderMonthView"],"mappings":"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"}
+{"version":3,"file":"MonthView-96fafba4.js","sources":["../../src/PRIVATE_MonthView/useDayCell.ts","../../src/PRIVATE_MonthView/DayCell.tsx","../../src/PRIVATE_MonthView/WeekNumberCell.tsx","../../src/PRIVATE_MonthView/MonthView.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 { DateISOStr } from '#UNSAFE_IntlDateTime';\nimport { FormatterFunc } from '#UNSAFE_IntlFormatParse';\nimport { getIsoDateStr, toJSDate } from '#utils/UNSAFE_calendarDateUtils';\nimport { ComponentProps, useCallback } from 'preact/compat';\n\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { useFocusableCell } from '#UNSAFE_DatePicker/useFocusableCell';\nimport { useCellNavigation } from '#UNSAFE_DatePicker/useCellNavigation';\nimport { StyledDatePickerButton } from '#PRIVATE_StyledDatePickerButton';\n\ntype NavigationDirections =\n  | 'previousDay'\n  | 'nextDay'\n  | 'previousWeek'\n  | 'nextWeek'\n  | 'previousMonth'\n  | 'nextMonth'\n  | 'previousYear'\n  | 'nextYear'\n  | 'firstDayOfMonth'\n  | 'lastDayOfMonth'\n  | 'today';\n\nexport type DayFormatOptions = {\n  state: 'enabled' | 'disabled' | 'restricted';\n};\n\n// These are the properties the useDayCell hook takes.\nexport type UseDayCellProps = {\n  /**\n   * Date of the day cell. This will be formatted as a full date and put in the aria-label.\n   */\n  date: CalendarDateRequired;\n  /**\n   * A function used to format the day cell date as a full date.\n   */\n  dateFormatter: FormatterFunc<DateISOStr>;\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   * Whether the day cell is in an adjacent month, not the current month.\n   */\n  isAdjacentMonth: boolean;\n  /**\n   * Whether the day cell is disabled, like if it is out of the min/max range.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the day cell is focusable, meaning it will have tabIndex 0.\n   */\n  isFocusable: boolean;\n  /**\n   * Whether the day cell has focus.\n   */\n  isFocused: boolean;\n  /**\n   * Whether the day cell is hidden. For example, days outside of the current month are hidden by default.\n   */\n  isHidden: boolean;\n  /**\n   * Whether the day cell is readonly. It is not activeable.\n   */\n  isReadonly: boolean;\n  /**\n   * Whether the day cell looks selected.\n   */\n  isSelected: boolean;\n  /**\n   * Whether the day cell's date is today.\n   */\n  isToday: boolean;\n  /**\n   * A callback that will be invoked when the user selects the date by clicking on a day cell or selecting the enter or space key on a day cell.\n   * @param payload The payload containing the date represented by this cell.\n   */\n  onAction: (payload: { date: CalendarDateRequired }) => void;\n\n  /**\n   * A callback that will be invoked when the user navigates.\n   */\n  onNavigation: (detail: { direction: NavigationDirections; date: CalendarDateRequired }) => void;\n};\n\n/**\n * The useDayCell hook returns properties for an individual DayCell. The properties returned should be spread on the StyledDatePickerButton.\n * These include the event handlers for keydown and click.\n */\nexport const useDayCell = ({\n  date,\n  dayFormatter = defaultDayFormatter,\n  dateFormatter,\n  isAdjacentMonth,\n  isDisabled,\n  isFocusable,\n  isFocused,\n  isHidden,\n  isReadonly,\n  isSelected,\n  isToday,\n  onAction,\n  onNavigation\n}: UseDayCellProps) => {\n  // apply day formatting\n  const { state } = dayFormatter(date);\n  const isDisabledFormat = state === 'disabled';\n  const isRestrictedFormat = state === 'restricted';\n\n  // Focus the day cell with isFocused true when the state updates.\n  const buttonProps = useFocusableCell({ isFocusable, isFocused });\n  // Override onAction to not call it if disabled, readonly or restricted\n  const handleAction: UseDayCellProps['onAction'] = useCallback(\n    (payload) => {\n      if (isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat) return;\n      onAction(payload);\n    },\n    [isDisabled, isDisabledFormat, isReadonly, isRestrictedFormat, onAction]\n  );\n  const buttonEventHandlers = useCellNavigation({\n    navigationMap: {\n      ArrowLeft: { ltr: 'previousDay', rtl: 'nextDay' },\n      ArrowRight: { ltr: 'nextDay', rtl: 'previousDay' },\n      ArrowDown: 'nextWeek',\n      ArrowUp: 'previousWeek',\n      PageDown: 'nextMonth',\n      PageUp: 'previousMonth',\n      Home: 'firstDayOfMonth',\n      End: 'lastDayOfMonth',\n      ShiftPageDown: 'nextYear',\n      ShiftPageUp: 'previousYear',\n      CtrlAltT: 'today'\n    },\n    payload: { date },\n    onAction: handleAction,\n    onNavigation\n  });\n\n  // For accessibility, we want a full date.\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const today = translations.datePicker_today();\n  const selected = translations.datePicker_selected();\n  const restricted = translations.datePicker_restricted();\n\n  const dateIsoStr = getIsoDateStr(date.year, date.month, date.day);\n  const formattedDate = dateFormatter(dateIsoStr);\n  let ariaLabel = isToday ? `${today}, ${formattedDate}` : formattedDate;\n  ariaLabel = isRestrictedFormat ? `${ariaLabel}, ${restricted}` : ariaLabel;\n  ariaLabel = isSelected ? `${ariaLabel}, ${selected}` : ariaLabel;\n  const dayOfMonth = toJSDate(date.year, date.month, date.day).getDate().toString();\n\n  return {\n    buttonProps: {\n      'aria-label': ariaLabel,\n      ...((isHidden || isDisabled || isDisabledFormat || isRestrictedFormat) && {\n        'aria-disabled': true\n      }),\n      isActivable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),\n      isAdjacentMonth,\n      isDimmed: isDisabled || isDisabledFormat,\n      isHidden,\n      isHoverable: !(isDisabled || isReadonly || isDisabledFormat || isRestrictedFormat),\n      isReadonly,\n      isSelected,\n      isRestricted: isRestrictedFormat,\n      isToday,\n      label: dayOfMonth,\n      ...buttonProps,\n      ...buttonEventHandlers\n    } as ComponentProps<typeof StyledDatePickerButton>\n  };\n};\n\n/**\n * A default day formatter that always formats as enabled state.\n */\nconst defaultDayFormatter = () => ({ state: 'enabled' }) as DayFormatOptions;\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 { StyledDatePickerButton } from '#PRIVATE_StyledDatePickerButton';\nimport { UseDayCellProps, useDayCell } from './useDayCell';\nimport { dayCellStyles } from './themes/DayCellStyles.css';\n\ntype PickedUseDayCellProps = Pick<\n  UseDayCellProps,\n  | 'date'\n  | 'dateFormatter'\n  | 'dayFormatter'\n  | 'isAdjacentMonth'\n  | 'isDisabled'\n  | 'isFocusable'\n  | 'isFocused'\n  | 'isHidden'\n  | 'isReadonly'\n  | 'isSelected'\n  | 'isToday'\n  | 'onAction'\n  | 'onNavigation'\n>;\n\ntype DayCellProps = PickedUseDayCellProps;\n\n/**\n * The DayCell is the cell within the DatePicker's month view that contains the day in the month view.\n * This component will format the date for the aria-label.\n * The DayCell components uses the useDayCell hook to handle the user interactions with the day cell.\n */\nexport const DayCell = (props: DayCellProps) => {\n  const { buttonProps } = useDayCell(props);\n  // buttonProps, e.g., tabIndex, aria-label, onclick, onkeydown and visual states\n  return (\n    <div role=\"gridcell\" class={dayCellStyles}>\n      <StyledDatePickerButton {...buttonProps} />\n    </div>\n  );\n};\n","import { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '#resources/nls/bundle';\nimport { CalendarDateRequired, toJSDate, toJSDateUTC } from '#utils/UNSAFE_calendarDateUtils';\nimport { weekNumberCellStyles, weekNumberStyles } from './themes/WeekNumberCellStyle.css';\nimport * as Logger from '../utils/UNSAFE_logger';\n\ntype Props = {\n  /**\n   * startDateOfWeek is the first date of the week row\n   */\n  startDateOfWeek: CalendarDateRequired;\n};\n\n/**\n * The ISO 8601 definition for week 01 is the week with the first Thursday of the Gregorian year (i.e. of January) in it.\n * https://en.wikipedia.org/wiki/ISO_week_date\n * @param date The first date of the week row to be used to calculate the week number.\n * The date must be a Saturday, Sunday, or Monday. We assume this because the week for\n * all the locales we support start on one of these days.\n * @returns the number of week in the year\n */\nconst calculateWeekNumber = (date: CalendarDateRequired) => {\n  const checkDate = toJSDateUTC(date.year, date.month, date.day);\n  const dayNumber = checkDate.getUTCDay(); // 0 for Sunday, 1 for Monday, 2 for Tuesday, etc.\n\n  if (dayNumber !== 0 && dayNumber !== 1 && dayNumber !== 6) {\n    // This message is for internal JET developers. We should never see this message. In all locales the day of the\n    // week starts on Sunday, Monday or Saturday.\n    Logger.warn(`calculateWeekNumber's date property's getUTCDay() is assumed to be 0 (Sunday), 1 (Monday) or 6 (Saturday)\n      since that is the first day of the week for the locale's JET supports.`);\n  }\n\n  // For ISO week, we set the start of the week to Monday\n  if (dayNumber !== 1) {\n    // If it is already Monday, do nothing.\n    // If it is Sunday (0), add 1 to move it up to Monday.\n    // If it is Saturday (6), move it up two days to Monday.\n    checkDate.setUTCDate(checkDate.getUTCDate() + (dayNumber === 0 ? 1 : 2));\n  }\n\n  // Find Thursday (day value of 4) of this week. Since we know checkDate at this point is a Monday,\n  // we move it up 3 days.\n  checkDate.setUTCDate(checkDate.getUTCDate() + 3);\n\n  // Create the start of the year date\n  const janFirst = toJSDate(checkDate.getUTCFullYear(), 1, 1);\n\n  return Math.floor(Math.round((checkDate.getTime() - janFirst.getTime()) / 86400000) / 7) + 1;\n};\n\n/**\n * The WeekNumberCell is the cell at the start of a week's row within the DatePicker's\n * month view that contains the week's number within the year. This displays when\n * the DatePicker's 'weekDisplay' prop is set to 'number'.\n * This component will format the week number for the aria-label.\n */\nconst WeekNumberCell = ({ startDateOfWeek }: Props) => {\n  const weekNumber = calculateWeekNumber(startDateOfWeek);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  return (\n    <div\n      aria-label={translations.datePicker_weekNum({ NUM: String(weekNumber) })}\n      class={weekNumberCellStyles}\n      role=\"rowheader\">\n      <span class={weekNumberStyles}>{weekNumber}</span>\n    </div>\n  );\n};\n\nexport { WeekNumberCell };\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 {\n  getWeeksInMonth,\n  getDatesInWeek,\n  getStartOfWeek,\n  getDaysOfWeekNames,\n  WeekInMonthIndex\n} from '#utils/PRIVATE_dayUtils';\nimport { ComponentProps } from 'preact/compat';\nimport { useMemo } from 'preact/hooks';\nimport {\n  CalendarDateRequired,\n  checkNoCalendarExtension,\n  formatFullCalendarDate,\n  isDateOutOfRange\n} from '#utils/UNSAFE_calendarDateUtils';\nimport { getFormatParse, NativeDateTimeOptions } from '#UNSAFE_IntlDateTime';\nimport { DayCell } from './DayCell';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { Grid } from '#UNSAFE_Grid';\nimport {\n  MonthViewStyles,\n  MonthViewVariantOptions\n} from '#PRIVATE_MonthView/themes/MonthViewStyles.css';\nimport { MonthViewRedwoodTheme } from '#PRIVATE_MonthView/themes/redwood/MonthViewTheme';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { monthViewScaleVars } from '#PRIVATE_MonthView/themes/MonthViewContract.css';\nimport { WeekNumberCell } from './WeekNumberCell';\n\ntype PickedDayCellProps = Pick<\n  ComponentProps<typeof DayCell>,\n  'dayFormatter' | 'onAction' | 'onNavigation'\n>;\n\ntype MonthViewProps = TestIdProps &\n  PickedDayCellProps & {\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     * The MonthView renders with the month of the focusableDate.\n     * The focusableDate is the only day in the MonthView that has tabIndex: 0 on it.\n     * The focusableDate doesn't have focus until the user tabs in to the Month View.\n     * The focusableDate is never undefined.\n     */\n    focusableDate: CalendarDateRequired;\n    /**\n     * If set to true, the focusableDate will be focused and you will see the focus ring. It will be\n     * false when no date has focus.\n     * @default false\n     */\n    isFocused?: boolean;\n    /**\n     * Specifies whether the component is readonly.\n     */\n    isReadonly?: boolean;\n    /**\n     * The maximum selectable date. The max must be greater than the min if they are both specified.\n     */\n    max?: CalendarDateRequired;\n    /**\n     * The minimum selectable date. The min must be less than the max if they are both specified.\n     */\n    min?: CalendarDateRequired;\n    /**\n     * The selected date of the MonthView, or undefined is there is no selected date. This\n     * is used to highlight the selected day cell if it is within the min/max range.\n     */\n    selectedDate?: CalendarDateRequired;\n    /**\n     * Today's date. This is used to highlight the Today day cell.\n     */\n    todaysDate: CalendarDateRequired;\n    /**\n     * Whether week of the year will be shown in the DatePicker. The default calculation follows the\n     * ISO 8601 definition: the first week of the year contains the first Thursday of the year.\n     * This means that some days from one year may be placed into weeks 'belonging' to another year.\n     */\n    weekDisplay?: 'none' | 'number';\n  };\n\n/**\n * A MonthView is a month interface that allows users to select a single date. The MonthView is the week day header\n * abbreviations and the days of the month. A MonthView is used inside of a DatePicker\n * along with the DatePickerHeader and the MonthGridView and YearGridView.\n */\nexport const MonthView = ({\n  dayFormatter,\n  daysOutsideMonth = 'hidden',\n  isReadonly = false,\n  max,\n  min,\n  onAction,\n  onNavigation,\n  selectedDate,\n  focusableDate,\n  isFocused = false,\n  testId,\n  todaysDate,\n  weekDisplay = 'none'\n}: MonthViewProps) => {\n  const { locale } = useUser();\n  const weeksInMonth = getWeeksInMonth(focusableDate.year, focusableDate.month, locale);\n  const { baseTheme, styles } = useComponentTheme<MonthViewVariantOptions, MonthViewStyles>(\n    MonthViewRedwoodTheme,\n    {}\n  );\n  const isWeekNumberDisplayed = weekDisplay === 'number';\n  const gridTemplateColumns = `repeat(${isWeekNumberDisplayed ? 8 : 7}, 1fr)`;\n\n  const dateFormatter = useMemo(() => {\n    checkNoCalendarExtension(locale);\n    const dateFormatOptions: NativeDateTimeOptions = {\n      locale,\n      dateStyle: 'full'\n    };\n    const { format } = getFormatParse(dateFormatOptions);\n    return format;\n  }, [locale]);\n\n  const renderMonthViewHeaderRow = () => {\n    const weekDays = getDaysOfWeekNames(locale, 'short');\n\n    return (\n      <div class={styles.sticky}>\n        <Grid\n          role=\"row\"\n          aria-hidden=\"true\"\n          gridTemplateColumns={gridTemplateColumns}\n          gap={monthViewScaleVars.columnGap}>\n          {isWeekNumberDisplayed && <div role=\"presentation\" />}\n          {weekDays.map((day) => (\n            <div role=\"columnheader\" class={styles.dayOfTheWeek}>\n              <span>{day}</span>\n            </div>\n          ))}\n        </Grid>\n      </div>\n    );\n  };\n\n  const renderMonthView = () => {\n    const calendarGrid: JSX.Element[] = [];\n\n    for (let weekIndex = 0; weekIndex < weeksInMonth; weekIndex++) {\n      const startDateOfWeek = getStartOfWeek(focusableDate.year, focusableDate.month, 1, locale);\n\n      const weekDates = getDatesInWeek(\n        weekIndex as WeekInMonthIndex,\n        startDateOfWeek.year,\n        startDateOfWeek.month,\n        startDateOfWeek.day\n      );\n\n      const weekCells = weekDates.map((dayCellDate) => {\n        // This figures out the visual state of the DayCell.\n        const isDisabled = isDateOutOfRange(dayCellDate, min, max);\n\n        // Even if the selected date is out of range, the UX design shows it as selected.\n        const isSelected = selectedDate ? isSameDate(dayCellDate, selectedDate) : false;\n        const isToday = isSameDate(dayCellDate, todaysDate);\n        const isFocusable = isSameDate(dayCellDate, focusableDate);\n        const isAdjacentMonth = isOutOfMonth(dayCellDate, focusableDate);\n        const isHidden = isAdjacentMonth && daysOutsideMonth === 'hidden';\n\n        return (\n          <DayCell\n            key={`${dayCellDate.year}-${dayCellDate.month}-${dayCellDate.day}`}\n            date={dayCellDate}\n            dateFormatter={dateFormatter}\n            dayFormatter={dayFormatter}\n            isAdjacentMonth={isAdjacentMonth}\n            isDisabled={isDisabled}\n            isFocusable={isFocusable}\n            isFocused={isFocusable && isFocused}\n            isHidden={isHidden}\n            isReadonly={isReadonly}\n            isSelected={isSelected}\n            isToday={isToday}\n            onAction={onAction}\n            onNavigation={onNavigation}\n          />\n        );\n      });\n\n      calendarGrid.push(\n        <Grid\n          key={weekIndex}\n          role=\"row\"\n          gridTemplateColumns={gridTemplateColumns}\n          gap={monthViewScaleVars.columnGap}>\n          {isWeekNumberDisplayed && <WeekNumberCell startDateOfWeek={weekDates[0]} />}\n          {weekCells}\n        </Grid>\n      );\n    }\n\n    return calendarGrid;\n  };\n\n  const monthViewAriaLabel = formatFullCalendarDate(locale, focusableDate, 'month');\n  return (\n    <div class={baseTheme}>\n      <Grid\n        gap={monthViewScaleVars.rowGap}\n        aria-label={monthViewAriaLabel}\n        role=\"grid\"\n        testId={testId}>\n        {renderMonthViewHeaderRow()}\n        {renderMonthView()}\n      </Grid>\n    </div>\n  );\n};\n\nfunction isSameDate(date1: CalendarDateRequired, date2: CalendarDateRequired) {\n  return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;\n}\n\nfunction isOutOfMonth(date1: CalendarDateRequired, currentMonthDate: CalendarDateRequired) {\n  return date1.month !== currentMonthDate.month;\n}\n"],"names":["defaultDayFormatter","state","DayCell","props","buttonProps","date","dayFormatter","dateFormatter","isAdjacentMonth","isDisabled","isFocusable","isFocused","isHidden","isReadonly","isSelected","isToday","onAction","onNavigation","isDisabledFormat","isRestrictedFormat","useFocusableCell","handleAction","useCallback","payload","buttonEventHandlers","useCellNavigation","navigationMap","ArrowLeft","ltr","rtl","ArrowRight","ArrowDown","ArrowUp","PageDown","PageUp","Home","End","ShiftPageDown","ShiftPageUp","CtrlAltT","translations","useTranslationBundle","today","datePicker_today","selected","datePicker_selected","restricted","datePicker_restricted","formattedDate","getIsoDateStr","year","month","day","ariaLabel","dayOfMonth","toJSDate","getDate","toString","isActivable","isDimmed","isHoverable","isRestricted","label","useDayCell","_jsx","jsx","role","class","dayCellStyles","children","StyledDatePickerButton","WeekNumberCell","startDateOfWeek","weekNumber","checkDate","toJSDateUTC","dayNumber","getUTCDay","Logger.warn","setUTCDate","getUTCDate","janFirst","getUTCFullYear","Math","floor","round","getTime","calculateWeekNumber","datePicker_weekNum","NUM","String","weekNumberCellStyles","weekNumberStyles","isSameDate","date1","date2","daysOutsideMonth","max","min","selectedDate","focusableDate","testId","todaysDate","weekDisplay","locale","useUser","weeksInMonth","getWeeksInMonth","baseTheme","styles","useComponentTheme","MonthViewRedwoodTheme","isWeekNumberDisplayed","gridTemplateColumns","useMemo","checkNoCalendarExtension","dateFormatOptions","dateStyle","format","getFormatParse","monthViewAriaLabel","formatFullCalendarDate","_jsxs","jsxs","Grid","gap","monthViewScaleVars","rowGap","weekDays","getDaysOfWeekNames","sticky","columnGap","map","dayOfTheWeek","renderMonthViewHeaderRow","calendarGrid","weekIndex","getStartOfWeek","weekDates","getDatesInWeek","weekCells","dayCellDate","isDateOutOfRange","currentMonthDate","push","renderMonthView"],"mappings":"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"}

package/amd/{OverflowTabBar-b142f8d4.js → OverflowTabBar-5ff68da7.js}

@@ -1,2 +1,2 @@
-define(['exports', 'preact/jsx-runtime', 'preact', 'preact/hooks', './classNames-08d99695', './TabBar-fcebb560', './UNSAFE_OverflowTabBar/themes/OverflowTabBarStyles.css', './useDetectHorizontalOverflow-5882ed4b', './TabBarLinkItem-57587dbd', './RemovableTabBarItem-e1bee7fa', './TabBarItem-224bc6b3', './OverflowTabBarItem-49a82149'], (function(e,a,t,l,r,s,i,o,n,b,m,c){"use strict";e.OverflowTabBar=function({items:e,layout:d="stretch",display:u="standard",size:y="md",edge:f="top",selection:v,truncation:I,onSelect:g,onRemove:B,"aria-label":K,"aria-labelledby":T,contextMenuConfig:h,testId:x}){const p="stacked"===u?{display:u}:{display:u,size:y},w=l.useRef(null),R=t.createRef(),[O,j]=l.useState(!1),M=l.useRef(!1),k=l.useCallback((e=>{"more"===e.value?M.current?j(!1):j(!0):g?.(e),M.current=!1}),[g]),S=l.useMemo((()=>e.map((e=>e.itemKey))),[e]),{visibleItemKeys:z,overflowItemKeys:C,maxWidths:W}=o.useDetectHorizontalOverflow({rootRef:R,keysArray:S,isTruncationDisabled:!(I&&"progressive"===I)}),A=r.classNames([i.styles.overflowTabBarBase]);return a.jsx("div",{ref:w,class:A,children:a.jsxs(s.TabBar,{ref:R,selection:v,onSelect:k,...p,layout:d,edge:f,onRemove:B,"aria-label":K,"aria-labelledby":T,testId:x,contextMenuConfig:h,children:[null!=z&&z.length>0&&e.filter((e=>z?.includes(e.itemKey))).map((e=>null!=e.href?a.jsx(n.TabBarLinkItem,{href:e.href,itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}):e.isRemovable?a.jsx(b.RemovableTabBarItem,{itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}):a.jsx(m.TabBarItem,{itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}))),null!=C&&C.length>0&&a.jsx(c.OverflowTabBarItem,{isOpen:O,onClose:e=>{R.current&&["itemAction","dismissed"].includes(e.reason)&&R?.current?.focus(),"outsideMousedown"===e.reason&&(M.current=!0),j(!1)},overflowItemKey:"more",overflowItems:e.filter((e=>C?.includes(e.itemKey)))})]})})}}));
-//# sourceMappingURL=OverflowTabBar-b142f8d4.js.map
+define(['exports', 'preact/jsx-runtime', 'preact', 'preact/hooks', './classNames-08d99695', './TabBar-de723fbc', './UNSAFE_OverflowTabBar/themes/OverflowTabBarStyles.css', './useDetectHorizontalOverflow-5882ed4b', './TabBarLinkItem-944b1e8d', './RemovableTabBarItem-9ae273fe', './TabBarItem-a39c5de3', './OverflowTabBarItem-926b0c8a'], (function(e,a,t,l,r,s,i,o,n,c,d,m){"use strict";e.OverflowTabBar=function({items:e,layout:b="stretch",display:u="standard",size:y="md",edge:f="top",selection:v,truncation:I,onSelect:g,onRemove:B,"aria-label":K,"aria-labelledby":T,contextMenuConfig:h,testId:x}){const p="stacked"===u?{display:u}:{display:u,size:y},w=l.useRef(null),R=t.createRef(),[O,j]=l.useState(!1),M=l.useRef(!1),k=l.useCallback((e=>{"more"===e.value?M.current?j(!1):j(!0):g?.(e),M.current=!1}),[g]),S=l.useMemo((()=>e.map((e=>e.itemKey))),[e]),{visibleItemKeys:z,overflowItemKeys:C,maxWidths:W}=o.useDetectHorizontalOverflow({rootRef:R,keysArray:S,isTruncationDisabled:!(I&&"progressive"===I)}),A=r.classNames([i.styles.overflowTabBarBase]);return a.jsx("div",{ref:w,class:A,children:a.jsxs(s.TabBar,{ref:R,selection:v,onSelect:k,...p,layout:b,edge:f,onRemove:B,"aria-label":K,"aria-labelledby":T,testId:x,contextMenuConfig:h,children:[null!=z&&z.length>0&&e.filter((e=>z?.includes(e.itemKey))).map((e=>null!=e.href?a.jsx(n.TabBarLinkItem,{href:e.href,itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}):e.isRemovable?a.jsx(c.RemovableTabBarItem,{itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}):a.jsx(d.TabBarItem,{itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}))),null!=C&&C.length>0&&a.jsx(m.OverflowTabBarItem,{isOpen:O,onClose:e=>{R.current&&["itemAction","dismissed"].includes(e.reason)&&R?.current?.focus(),"outsideMousedown"===e.reason&&(M.current=!0),j(!1)},overflowItemKey:"more",overflowItems:e.filter((e=>C?.includes(e.itemKey)))})]})})}}));
+//# sourceMappingURL=OverflowTabBar-5ff68da7.js.map