@oracle/oraclejet-preact 17.0.0 → 17.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/amd/ActionCard-c8070525.js +1 -1
- package/amd/{BarChart-be1d51d4.js → BarChart-6c921af0.js} +2 -2
- package/amd/{BarChart-be1d51d4.js.map → BarChart-6c921af0.js.map} +1 -1
- package/amd/BaseButton-83ce1d00.js +1 -1
- package/amd/{BaseCardView-1aa0d986.js → BaseCardView-3c1e5b4c.js} +2 -2
- package/amd/{BaseCardView-1aa0d986.js.map → BaseCardView-3c1e5b4c.js.map} +1 -1
- package/amd/{BaseCardViewSelectionTest-09799a11.js → BaseCardViewSelectionTest-28e25f08.js} +2 -2
- package/amd/{BaseCardViewSelectionTest-09799a11.js.map → BaseCardViewSelectionTest-28e25f08.js.map} +1 -1
- package/amd/BaseNavigationListItem-4a940426.js +1 -1
- package/amd/ButtonSet-d8cd5447.js +1 -1
- package/amd/ButtonSetIconButton-08612ca6.js +1 -1
- package/amd/CardFlexView-3e4bd681.js +2 -0
- package/amd/{CardFlexView-a647550f.js.map → CardFlexView-3e4bd681.js.map} +1 -1
- package/amd/CardGridView-8fb55ad7.js +2 -0
- package/amd/{CardGridView-06fb67cb.js.map → CardGridView-8fb55ad7.js.map} +1 -1
- package/amd/Center-5f845605.js +2 -0
- package/amd/{Center-ce88b58a.js.map → Center-5f845605.js.map} +1 -1
- package/amd/{Chart-4796be31.js → Chart-0f54dae3.js} +2 -2
- package/amd/{Chart-4796be31.js.map → Chart-0f54dae3.js.map} +1 -1
- package/amd/CheckboxControl-7d539ab3.js +1 -1
- package/amd/CheckboxRadioField-da88bd6f.js +1 -1
- package/amd/CheckboxSetContext-2e486ea8.js +2 -0
- package/{cjs/CheckboxSetContext-c62db26d.js.map → amd/CheckboxSetContext-2e486ea8.js.map} +1 -1
- package/amd/Chip-26339152.js +1 -1
- package/amd/ClearIcon-a29e57fb.js +1 -1
- package/amd/CollapseIcon-c433fd3e.js +1 -1
- package/amd/Collapsible-8f15bec2.js +1 -1
- package/amd/CompactHelpSource-7de24d56.js +1 -1
- package/amd/CompactLabelAssistance-91aeaa2e.js +2 -0
- package/amd/{CompactLabelAssistance-9b6b3be2.js.map → CompactLabelAssistance-91aeaa2e.js.map} +1 -1
- package/amd/CompactUserAssistance-b2cbdbad.js +1 -1
- package/amd/ComponentMessageContainer-dc4b7c7f.js +1 -1
- package/amd/ConveyorBeltItem-d398eaa6.js +1 -1
- package/amd/{DatePicker-70b1aba4.js → DatePicker-3996fc76.js} +2 -2
- package/amd/{DatePicker-70b1aba4.js.map → DatePicker-3996fc76.js.map} +1 -1
- package/amd/DatePickerHeader-52c085e6.js +1 -1
- package/amd/{Diagram-9627b062.js → Diagram-737e9921.js} +2 -2
- package/amd/{Diagram-9627b062.js.map → Diagram-737e9921.js.map} +1 -1
- package/amd/DirectionalCollapseArrowIcon-09a24655.js +1 -1
- package/amd/DirectionalExpandArrowIcon-c8f2e596.js +1 -1
- package/amd/DragHandle-351a20be.js +1 -1
- package/amd/{Dropdown-c62373dd.js → Dropdown-de472a1d.js} +2 -2
- package/amd/{Dropdown-c62373dd.js.map → Dropdown-de472a1d.js.map} +1 -1
- package/amd/{EnvironmentProvider-9e71b5c2.js → EnvironmentProvider-46d0a245.js} +2 -2
- package/amd/{EnvironmentProvider-9e71b5c2.js.map → EnvironmentProvider-46d0a245.js.map} +1 -1
- package/amd/FilePicker-9b2fb661.js +1 -1
- package/amd/{Flex-db3ddadb.js → Flex-1f27b601.js} +2 -2
- package/amd/{Flex-db3ddadb.js.map → Flex-1f27b601.js.map} +1 -1
- package/amd/{Floating-8f519f4d.js → Floating-85851b1a.js} +2 -2
- package/amd/{Floating-8f519f4d.js.map → Floating-85851b1a.js.map} +1 -1
- package/amd/FormLayout-80b89e74.js +1 -1
- package/amd/Gantt-6fe34398.js +1 -1
- package/amd/{Grid-209ab070.js → Grid-85171367.js} +2 -2
- package/amd/{Grid-209ab070.js.map → Grid-85171367.js.map} +1 -1
- package/amd/{Gridlines-8ca4f9ee.js → Gridlines-11a94c28.js} +2 -2
- package/amd/{Gridlines-8ca4f9ee.js.map → Gridlines-11a94c28.js.map} +1 -1
- package/amd/GroupLoadingIndicator-e66ed431.js +1 -1
- package/amd/HighlightText-ad9bc1f8.js +2 -0
- package/amd/{HighlightText-415dc14f.js.map → HighlightText-ad9bc1f8.js.map} +1 -1
- package/amd/Icon-599f55f3.js +1 -1
- package/amd/IconButton-1b328b69.js +1 -1
- package/amd/IconMenuButton-c275cfbb.js +1 -1
- package/amd/IconSwitchButton-0e888503.js +1 -1
- package/amd/IconToggleButton-563a5127.js +1 -1
- package/amd/{IconUserAssistance-f8928f19.js → IconUserAssistance-5bdaa6bf.js} +2 -2
- package/amd/{IconUserAssistance-f8928f19.js.map → IconUserAssistance-5bdaa6bf.js.map} +1 -1
- package/amd/{Indexer-204a6d88.js → Indexer-51d51cda.js} +2 -2
- package/amd/{Indexer-204a6d88.js.map → Indexer-51d51cda.js.map} +1 -1
- package/amd/InlineHelpSource-359fd9df.js +1 -1
- package/amd/InlineUserAssistance-f4d1fa1b.js +1 -1
- package/amd/InputDateMask-b7a27faa.js +1 -1
- package/amd/InputDatePicker-da5d8728.js +1 -1
- package/amd/InputPassword-03f24e78.js +1 -1
- package/amd/InputText-da0a5c0f.js +1 -1
- package/amd/Label-3f8fc274.js +1 -1
- package/amd/LabelValueLayout-89e9f1be.js +1 -1
- package/amd/Layer-3cc44164.js +2 -0
- package/amd/{Layer-8d7bbd69.js.map → Layer-3cc44164.js.map} +1 -1
- package/amd/{LayerHost-0a244de8.js → LayerHost-eab40731.js} +2 -2
- package/amd/{LayerHost-0a244de8.js.map → LayerHost-eab40731.js.map} +1 -1
- package/amd/{LayerManager-00983765.js → LayerManager-d0836029.js} +2 -2
- package/amd/{LayerManager-00983765.js.map → LayerManager-d0836029.js.map} +1 -1
- package/amd/Legend-42f8653b.js +1 -1
- package/amd/{LineAreaChart-b68c4620.js → LineAreaChart-337cac30.js} +2 -2
- package/amd/{LineAreaChart-b68c4620.js.map → LineAreaChart-337cac30.js.map} +1 -1
- package/amd/Link-6f583879.js +1 -1
- package/amd/List-88a7bee6.js +2 -0
- package/amd/{List-5958c802.js.map → List-88a7bee6.js.map} +1 -1
- package/amd/ListItemLayout-dba9e24b.js +2 -0
- package/amd/{ListItemLayout-12aee4bd.js.map → ListItemLayout-dba9e24b.js.map} +1 -1
- package/amd/{ListView-27d10b67.js → ListView-6739207e.js} +2 -2
- package/amd/{ListView-27d10b67.js.map → ListView-6739207e.js.map} +1 -1
- package/amd/LiveRegion-be6f36d7.js +2 -0
- package/amd/{LiveRegion-09197914.js.map → LiveRegion-be6f36d7.js.map} +1 -1
- package/amd/LoadMoreCollection-a6adbc3f.js +2 -0
- package/amd/{LoadMoreCollection-83413a59.js.map → LoadMoreCollection-a6adbc3f.js.map} +1 -1
- package/amd/MaxLengthLiveRegion-23d7e335.js +2 -0
- package/amd/{MaxLengthLiveRegion-e3856a98.js.map → MaxLengthLiveRegion-23d7e335.js.map} +1 -1
- package/amd/{Menu-6a5d7fce.js → Menu-51409b28.js} +2 -2
- package/amd/{Menu-6a5d7fce.js.map → Menu-51409b28.js.map} +1 -1
- package/amd/MenuButton-c8fb534d.js +1 -1
- package/amd/MenuItem-644f8619.js +1 -1
- package/amd/Message-51d787d0.js +1 -1
- package/amd/MessageLayer-d2c49999.js +2 -0
- package/amd/{MessageLayer-cf2fbea9.js.map → MessageLayer-d2c49999.js.map} +1 -1
- package/amd/MessageToast-e0e07765.js +1 -1
- package/amd/MessagesManager-78a10f78.js +1 -1
- package/amd/MeterBar-38666619.js +1 -1
- package/amd/MeterCircle-f1561632.js +1 -1
- package/amd/{Modal-8f19889c.js → Modal-8c095bea.js} +2 -2
- package/amd/{Modal-8f19889c.js.map → Modal-8c095bea.js.map} +1 -1
- package/amd/{MonthView-297fceb8.js → MonthView-b5d1d69d.js} +2 -2
- package/amd/{MonthView-297fceb8.js.map → MonthView-b5d1d69d.js.map} +1 -1
- package/amd/NavigationListItem-c96ac144.js +2 -0
- package/amd/{NavigationListItem-0a4f8a9c.js.map → NavigationListItem-c96ac144.js.map} +1 -1
- package/amd/NumberInputText-0d8284f8.js +1 -1
- package/amd/{OverflowTabBarItem-aae4eb2f.js → OverflowTabBarItem-f781e527.js} +2 -2
- package/amd/{OverflowTabBarItem-aae4eb2f.js.map → OverflowTabBarItem-f781e527.js.map} +1 -1
- package/amd/PRIVATE_BaseCardView.js +1 -1
- package/amd/PRIVATE_Chart.js +1 -1
- package/amd/PRIVATE_CheckboxControl.js +1 -1
- package/amd/PRIVATE_CheckboxRadioField.js +1 -1
- package/amd/PRIVATE_ClearIcon.js +1 -1
- package/amd/PRIVATE_DatePickerHeader.js +1 -1
- package/amd/PRIVATE_DatePickerLayout.js +1 -1
- package/amd/PRIVATE_EmbeddedIconButton.js +1 -1
- package/amd/PRIVATE_FormControls.js +1 -1
- package/amd/PRIVATE_IconSwitchButton.js +1 -1
- package/amd/PRIVATE_Icons/CheckboxMixed.js +1 -1
- package/amd/PRIVATE_Icons/CheckboxOff.js +1 -1
- package/amd/PRIVATE_Icons/CheckboxOn.js +1 -1
- package/amd/PRIVATE_Icons/RadiobuttonOff.js +1 -1
- package/amd/PRIVATE_Icons/RadiobuttonOn.js +1 -1
- package/amd/PRIVATE_Icons/WarningS.js +1 -1
- package/amd/PRIVATE_List.js +1 -1
- package/amd/PRIVATE_LoadMoreCollection.js +1 -1
- package/amd/PRIVATE_Message.js +1 -1
- package/amd/PRIVATE_MessageLayer.js +1 -1
- package/amd/PRIVATE_MonthView.js +1 -1
- package/amd/PRIVATE_MonthYearGridView.js +1 -1
- package/amd/PRIVATE_PlotArea.js +1 -1
- package/amd/PRIVATE_RevealToggleIcon.js +1 -1
- package/amd/PRIVATE_SelectCommon.js +1 -1
- package/amd/PRIVATE_StyledCheckbox.js +1 -1
- package/amd/PRIVATE_Table.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CalendarIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/ChartMarqueeSelectIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/ChartPanIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/ChartZoomIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CheckIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CheckboxMixedIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CheckboxOffIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CheckboxOnIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CloseIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CollapseIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/CollapseUpIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/DecrementIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/DeleteIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/DirectionalCollapseArrowIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/DirectionalExpandArrowIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/DropdownArrowIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/ExpandIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/HelpIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/IncrementIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/MenuButtonDropdownIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/MessageConfirmationIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/MessageErrorIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/MessageInfoIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/MessageWarningIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/MinusIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/NavDownIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/PlusIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/RadioOffIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/RadioOnIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/SortAscendingIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/SortDefaultIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/SortDescendingIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/ViewHideIcon.js +1 -1
- package/amd/PRIVATE_ThemedIcons/ViewIcon.js +1 -1
- package/amd/PRIVATE_TimeComponent.js +1 -1
- package/amd/PRIVATE_VirtualizedCollection.js +1 -1
- package/amd/PRIVATE_VisTabularDatatip.js +1 -1
- package/amd/PictoChart-4d70af90.js +1 -1
- package/amd/{PieChart-295e2dbf.js → PieChart-ab4c95f7.js} +2 -2
- package/amd/{PieChart-295e2dbf.js.map → PieChart-ab4c95f7.js.map} +1 -1
- package/amd/{Popup-b5495d55.js → Popup-249d77c3.js} +2 -2
- package/amd/{Popup-b5495d55.js.map → Popup-249d77c3.js.map} +1 -1
- package/amd/{ProgressBar-e9b37565.js → ProgressBar-f82d6b43.js} +2 -2
- package/amd/{ProgressBar-e9b37565.js.map → ProgressBar-f82d6b43.js.map} +1 -1
- package/amd/{ProgressCircle-3b0d70d1.js → ProgressCircle-fc85cd7c.js} +2 -2
- package/amd/{ProgressCircle-3b0d70d1.js.map → ProgressCircle-fc85cd7c.js.map} +1 -1
- package/amd/RadioItem-27c120ba.js +1 -1
- package/amd/RatingGauge-dfe9f698.js +1 -1
- package/amd/ReadonlyTextFieldInput-a5e85e5d.js +1 -1
- package/amd/RemovableNavigationListItem-87ecbae7.js +1 -1
- package/amd/RemovableTabBarItem-89287a9b.js +1 -1
- package/amd/ReorderableTabBar-05821909.js +1 -1
- package/amd/RevealToggleIcon-ef89d654.js +1 -1
- package/amd/SectionalLegend-798dbecb.js +1 -1
- package/amd/SectionedContent-655a773a.js +2 -0
- package/amd/{SectionedContent-d896b84f.js.map → SectionedContent-655a773a.js.map} +1 -1
- package/amd/{SelectMultiple-fabd883c.js → SelectMultiple-06da3db0.js} +2 -2
- package/amd/{SelectMultiple-fabd883c.js.map → SelectMultiple-06da3db0.js.map} +1 -1
- package/amd/{SelectSingle-34d636a8.js → SelectSingle-2266e5c4.js} +2 -2
- package/amd/{SelectSingle-34d636a8.js.map → SelectSingle-2266e5c4.js.map} +1 -1
- package/amd/SelectionCard-0ecc7773.js +2 -0
- package/amd/{SelectionCard-ec3ee20d.js.map → SelectionCard-0ecc7773.js.map} +1 -1
- package/amd/Selector-ad2af152.js +1 -1
- package/amd/SelectorAll-879d186e.js +1 -1
- package/amd/{Sheet-a398d015.js → Sheet-6447f399.js} +2 -2
- package/amd/{Sheet-a398d015.js.map → Sheet-6447f399.js.map} +1 -1
- package/amd/SplitMenuButton-deb0fc04.js +1 -1
- package/amd/StyledTextField-8ac3bbb4.js +1 -1
- package/amd/Submenu-b20a55aa.js +1 -1
- package/amd/TabBar-10096a0c.js +1 -1
- package/amd/TabBarItem-7f4a5e0b.js +1 -1
- package/amd/TabBarLayout-f8e0fcad.js +1 -1
- package/amd/TabBarMixed-5adc54c4.js +1 -1
- package/amd/TabBarMixedSeparator-10a52b13.js +2 -0
- package/amd/{TabBarMixedSeparator-234c9a75.js.map → TabBarMixedSeparator-10a52b13.js.map} +1 -1
- package/amd/{Table-fda0ad21.js → Table-8e271f0f.js} +2 -2
- package/amd/{Table-fda0ad21.js.map → Table-8e271f0f.js.map} +1 -1
- package/amd/{TableView-e4216655.js → TableView-cc05c32f.js} +2 -2
- package/amd/{TableView-e4216655.js.map → TableView-cc05c32f.js.map} +1 -1
- package/amd/TagCloud-a37fcea5.js +1 -1
- package/amd/TextArea-2c7af40c.js +2 -0
- package/{es/TextArea-979496a0.js.map → amd/TextArea-2c7af40c.js.map} +1 -1
- package/amd/TextAreaAutosize-9dc5bffe.js +2 -0
- package/amd/{TextAreaAutosize-0a023972.js.map → TextAreaAutosize-9dc5bffe.js.map} +1 -1
- package/amd/TextField-0fc70892.js +1 -1
- package/amd/TextFieldInput-dfd9529f.js +1 -1
- package/amd/Theme-redwood/theme.css +279 -279
- package/amd/Theme-stable/theme.css +291 -291
- package/amd/TimeComponentCanvas2D-d4a5891c.js +1 -1
- package/amd/Toolbar-98c1d888.js +1 -1
- package/amd/TruncatingBadge-67192c05.js +1 -1
- package/amd/TruncatingText-27ffd8e4.js +1 -1
- package/amd/UNSAFE_ActionCard.js +1 -1
- package/amd/UNSAFE_BarChart/__test__/BarChart.spec.js +1 -1
- package/amd/UNSAFE_BarChart.js +1 -1
- package/amd/UNSAFE_BaseButton.js +1 -1
- package/amd/UNSAFE_Button.js +1 -1
- package/amd/UNSAFE_ButtonLayout/tests/ButtonLayout.spec.js +1 -1
- package/amd/UNSAFE_ButtonSet.js +1 -1
- package/amd/UNSAFE_ButtonSetButton.js +1 -1
- package/amd/UNSAFE_ButtonSetIconButton.js +1 -1
- package/amd/UNSAFE_ButtonSetItem.js +1 -1
- package/amd/UNSAFE_ButtonSetMultiple.js +1 -1
- package/amd/UNSAFE_ButtonSetSingle.js +1 -1
- package/amd/UNSAFE_CardFlexView.js +1 -1
- package/amd/UNSAFE_CardGridView.js +1 -1
- package/amd/UNSAFE_Center.js +1 -1
- package/amd/UNSAFE_ChartWithLegend.js +1 -1
- package/amd/UNSAFE_Checkbox.js +1 -1
- package/amd/UNSAFE_CheckboxItem.js +1 -1
- package/amd/UNSAFE_CheckboxItem.js.map +1 -1
- package/amd/UNSAFE_CheckboxSet.js +1 -1
- package/amd/UNSAFE_CheckboxSet.js.map +1 -1
- package/amd/UNSAFE_Chip.js +1 -1
- package/amd/UNSAFE_Collapsible.js +1 -1
- package/amd/UNSAFE_ComponentMessage.js +1 -1
- package/amd/UNSAFE_ConveyorBelt.js +1 -1
- package/amd/UNSAFE_DatePicker.js +1 -1
- package/amd/UNSAFE_Diagram.js +1 -1
- package/amd/UNSAFE_Dialog.js +1 -1
- package/amd/UNSAFE_DragHandle.js +1 -1
- package/amd/UNSAFE_DrawerLayout.js +1 -1
- package/amd/UNSAFE_DrawerPopup.js +1 -1
- package/amd/UNSAFE_Dropdown.js +1 -1
- package/amd/UNSAFE_Environment.js +1 -1
- package/amd/UNSAFE_ExpandableList.js +1 -1
- package/amd/UNSAFE_FilePicker.js +1 -1
- package/amd/UNSAFE_Flex.js +1 -1
- package/amd/UNSAFE_Floating.js +1 -1
- package/amd/UNSAFE_FormLayout.js +1 -1
- package/amd/UNSAFE_Gantt.js +1 -1
- package/amd/UNSAFE_Grid.js +1 -1
- package/amd/UNSAFE_HighlightText.js +1 -1
- package/amd/UNSAFE_Icon.js +1 -1
- package/amd/UNSAFE_IconButton.js +1 -1
- package/amd/UNSAFE_IconMenuButton.js +1 -1
- package/amd/UNSAFE_IconToggleButton.js +1 -1
- package/amd/UNSAFE_Indexer.js +1 -1
- package/amd/UNSAFE_InputDateMask.js +1 -1
- package/amd/UNSAFE_InputDatePicker.js +1 -1
- package/amd/UNSAFE_InputPassword.js +1 -1
- package/amd/UNSAFE_InputSensitiveText.js +1 -1
- package/amd/UNSAFE_InputText.js +1 -1
- package/amd/UNSAFE_Label.js +1 -1
- package/amd/UNSAFE_LabelValueLayout.js +1 -1
- package/amd/UNSAFE_LabelledLink.js +1 -1
- package/amd/UNSAFE_Layer.js +1 -1
- package/amd/UNSAFE_Legend.js +1 -1
- package/amd/UNSAFE_LineAreaChart/__test__/LineChart.spec.js +1 -1
- package/amd/UNSAFE_LineAreaChart.js +1 -1
- package/amd/UNSAFE_Link.js +1 -1
- package/amd/UNSAFE_ListItemLayout.js +1 -1
- package/amd/UNSAFE_ListView.js +1 -1
- package/amd/UNSAFE_LiveRegion.js +1 -1
- package/amd/UNSAFE_Menu.js +1 -1
- package/amd/UNSAFE_MenuButton.js +1 -1
- package/amd/UNSAFE_MessageBanner.js +1 -1
- package/amd/UNSAFE_MessageToast.js +1 -1
- package/amd/UNSAFE_MeterBar.js +1 -1
- package/amd/UNSAFE_MeterCircle.js +1 -1
- package/amd/UNSAFE_Modal.js +1 -1
- package/amd/UNSAFE_NavigationList.js +1 -1
- package/amd/UNSAFE_NavigationListCommon.js +1 -1
- package/amd/UNSAFE_NumberInputText.js +1 -1
- package/amd/UNSAFE_OverflowTabBar.js +1 -1
- package/amd/UNSAFE_PictoChart.js +1 -1
- package/amd/UNSAFE_PieChart/__test__/PieChart.spec.js +1 -1
- package/amd/UNSAFE_PieChart.js +1 -1
- package/amd/UNSAFE_Popup.js +1 -1
- package/amd/UNSAFE_ProgressBar.js +1 -1
- package/amd/UNSAFE_ProgressCircle.js +1 -1
- package/amd/UNSAFE_RadioItem.js +1 -1
- package/amd/UNSAFE_RadioSet.js +1 -1
- package/amd/UNSAFE_RatingGauge.js +1 -1
- package/amd/UNSAFE_ReorderableTabBar.js +1 -1
- package/amd/UNSAFE_SectionalLegend.js +1 -1
- package/amd/UNSAFE_SelectMultiple.js +1 -1
- package/amd/UNSAFE_SelectSingle.js +1 -1
- package/amd/UNSAFE_SelectionCard.js +1 -1
- package/amd/UNSAFE_Selector.js +1 -1
- package/amd/UNSAFE_SelectorAll.js +1 -1
- package/amd/UNSAFE_Sheet/__test__/Sheet.spec.js +1 -1
- package/amd/UNSAFE_Sheet.js +1 -1
- package/amd/UNSAFE_SplitMenuButton.js +1 -1
- package/amd/UNSAFE_TabBar.js +1 -1
- package/amd/UNSAFE_TabBarCommon.js +1 -1
- package/amd/UNSAFE_TabBarMixed.js +1 -1
- package/amd/UNSAFE_TableView.js +1 -1
- package/amd/UNSAFE_TagCloud.js +1 -1
- package/amd/UNSAFE_TextArea.js +1 -1
- package/amd/UNSAFE_TextAreaAutosize.js +1 -1
- package/amd/UNSAFE_TextField.js +1 -1
- package/amd/UNSAFE_ToggleButton.js +1 -1
- package/amd/UNSAFE_Toolbar/tests/Toolbar.spec.js +1 -1
- package/amd/UNSAFE_Toolbar.js +1 -1
- package/amd/UNSAFE_Train.js +1 -1
- package/amd/UNSAFE_TruncatingBadge.js +1 -1
- package/amd/UNSAFE_TruncatingText.js +1 -1
- package/amd/UNSAFE_UserAssistance.js +1 -1
- package/amd/UNSAFE_View.js +1 -1
- package/amd/UNSAFE_VirtualizedListView.js +1 -1
- package/amd/UNSAFE_VisProgressiveLoader/__test__/VisProgressiveLoader.spec.js +1 -1
- package/amd/UNSAFE_VisProgressiveLoader.js +1 -1
- package/amd/UNSAFE_VisStatusMessage.js +1 -1
- package/amd/UNSAFE_WindowOverlay.js +1 -1
- package/amd/{View-10a5769c.js → View-8701dec6.js} +2 -2
- package/amd/{View-10a5769c.js.map → View-8701dec6.js.map} +1 -1
- package/amd/{VirtualizedCollection-897516a5.js → VirtualizedCollection-63223f5e.js} +2 -2
- package/amd/{VirtualizedCollection-897516a5.js.map → VirtualizedCollection-63223f5e.js.map} +1 -1
- package/amd/VirtualizedListView-0924cf91.js +2 -0
- package/amd/{VirtualizedListView-ead601c7.js.map → VirtualizedListView-0924cf91.js.map} +1 -1
- package/amd/VisNoData-bfb5065e.js +2 -0
- package/amd/{VisNoData-95d951c2.js.map → VisNoData-bfb5065e.js.map} +1 -1
- package/amd/{VisProgressiveLoader-39f1b4ef.js → VisProgressiveLoader-ef9de93a.js} +2 -2
- package/amd/{VisProgressiveLoader-39f1b4ef.js.map → VisProgressiveLoader-ef9de93a.js.map} +1 -1
- package/amd/{VisTabularDatatip-e945d6f6.js → VisTabularDatatip-5e43455b.js} +2 -2
- package/amd/{VisTabularDatatip-e945d6f6.js.map → VisTabularDatatip-5e43455b.js.map} +1 -1
- package/amd/{WindowOverlay-ad61cfea.js → WindowOverlay-c09fece2.js} +2 -2
- package/amd/{WindowOverlay-ad61cfea.js.map → WindowOverlay-c09fece2.js.map} +1 -1
- package/amd/{YearsGridView-c76bb4da.js → YearsGridView-91e4744d.js} +2 -2
- package/amd/{YearsGridView-c76bb4da.js.map → YearsGridView-91e4744d.js.map} +1 -1
- package/amd/hoc/PRIVATE_withDirectionIcon.js +1 -1
- package/amd/hoc/PRIVATE_withThemeIcon.js +1 -1
- package/amd/hoc/UNSAFE_withThemeProps.js +1 -1
- package/amd/hooks/PRIVATE_useChartContextMenu.js +1 -1
- package/amd/hooks/PRIVATE_useChartDatatip.js +1 -1
- package/amd/hooks/PRIVATE_useChartEvents.js +1 -1
- package/amd/hooks/PRIVATE_useChartMarquee.js +1 -1
- package/amd/hooks/PRIVATE_useCssVars.js +1 -1
- package/amd/hooks/PRIVATE_useCurrentKey.js +1 -1
- package/amd/hooks/PRIVATE_useDatatip.js +1 -1
- package/amd/hooks/PRIVATE_useFloating.js +1 -1
- package/amd/hooks/PRIVATE_useReorderable.js +1 -1
- package/amd/hooks/PRIVATE_useRovingTabIndexContainer.js +1 -1
- package/amd/hooks/PRIVATE_useSelection.js +1 -1
- package/amd/hooks/PRIVATE_useTabBar.js +1 -1
- package/amd/hooks/PRIVATE_useVisContextMenu.js +1 -1
- package/amd/hooks/PRIVATE_useVisEvents.js +1 -1
- package/amd/hooks/PRIVATE_useVisMeterEvents.js +1 -1
- package/amd/hooks/PRIVATE_useVisSelection.js +1 -1
- package/amd/hooks/UNSAFE_useColorScheme.js +1 -1
- package/amd/hooks/UNSAFE_useContainerBreakpointValues.js +1 -1
- package/amd/hooks/UNSAFE_useCurrentBgColor.js +1 -1
- package/amd/hooks/UNSAFE_useDensity.js +1 -1
- package/amd/hooks/UNSAFE_useOutsideClick.js +1 -1
- package/amd/hooks/UNSAFE_usePrefixSuffix.js +1 -1
- package/amd/hooks/UNSAFE_useScale.js +1 -1
- package/amd/hooks/UNSAFE_useTestId.js +1 -1
- package/amd/hooks/UNSAFE_useTheme.js +1 -1
- package/amd/hooks/UNSAFE_useThemeInterpolations.js +1 -1
- package/amd/hooks/UNSAFE_useTooltip.js +1 -1
- package/amd/hooks/UNSAFE_useTranslationBundle.js +1 -1
- package/amd/hooks/UNSAFE_useUser.js +1 -1
- package/amd/{index-8d4da04e.js → index-17fdb080.js} +2 -2
- package/amd/index-17fdb080.js.map +1 -0
- package/amd/listViewSelectionTests-a0132dcc.js +1 -1
- package/amd/{render-6de552e4.js → render-9b32a558.js} +2 -2
- package/amd/{render-6de552e4.js.map → render-9b32a558.js.map} +1 -1
- package/amd/{tabbableUtils-78cc49fd.js → tabbableUtils-5b5b70da.js} +2 -2
- package/amd/{tabbableUtils-78cc49fd.js.map → tabbableUtils-5b5b70da.js.map} +1 -1
- package/amd/{testData-6d873339.js → testData-8e20304d.js} +2 -2
- package/amd/{testData-6d873339.js.map → testData-8e20304d.js.map} +1 -1
- package/amd/useCellNavigation-37e0539a.js +1 -1
- package/amd/useChartContextMenu-c50617f2.js +1 -1
- package/amd/{useChartDatatip-34e2636c.js → useChartDatatip-672232af.js} +2 -2
- package/amd/{useChartDatatip-34e2636c.js.map → useChartDatatip-672232af.js.map} +1 -1
- package/amd/useChartMarquee-0e818e77.js +1 -1
- package/amd/{useColorScheme-3ffd80c4.js → useColorScheme-711c1e4b.js} +2 -2
- package/amd/{useColorScheme-3ffd80c4.js.map → useColorScheme-711c1e4b.js.map} +1 -1
- package/amd/useContextMenu-e6b10380.js +1 -1
- package/amd/useCssVars-948d1e7c.js +2 -0
- package/amd/{useCssVars-7efb591d.js.map → useCssVars-948d1e7c.js.map} +1 -1
- package/amd/{useCurrentBgColor-44e3f377.js → useCurrentBgColor-40103ccc.js} +2 -2
- package/amd/{useCurrentBgColor-44e3f377.js.map → useCurrentBgColor-40103ccc.js.map} +1 -1
- package/amd/useCurrentKey-00f81f0b.js +2 -0
- package/amd/{useCurrentKey-26170e5e.js.map → useCurrentKey-00f81f0b.js.map} +1 -1
- package/amd/{useDatatip-34fb67d2.js → useDatatip-d00735e9.js} +2 -2
- package/amd/{useDatatip-34fb67d2.js.map → useDatatip-d00735e9.js.map} +1 -1
- package/amd/{useDensity-be2ff874.js → useDensity-435224bb.js} +2 -2
- package/amd/{useDensity-be2ff874.js.map → useDensity-435224bb.js.map} +1 -1
- package/amd/{useFloating-30975c41.js → useFloating-bbd3396b.js} +2 -2
- package/amd/{useFloating-30975c41.js.map → useFloating-bbd3396b.js.map} +1 -1
- package/amd/useKeyboardEvents-e9a2b72b.js +2 -0
- package/amd/{useKeyboardEvents-57008a1d.js.map → useKeyboardEvents-e9a2b72b.js.map} +1 -1
- package/amd/useLegendContextMenu-5b1ca75b.js +1 -1
- package/amd/{useMeterDatatip-1a3890aa.js → useMeterDatatip-60af9281.js} +2 -2
- package/amd/{useMeterDatatip-1a3890aa.js.map → useMeterDatatip-60af9281.js.map} +1 -1
- package/amd/{useOutsideClick-90052c27.js → useOutsideClick-4519a64e.js} +2 -2
- package/amd/{useOutsideClick-90052c27.js.map → useOutsideClick-4519a64e.js.map} +1 -1
- package/amd/{usePopupAnimation-a0193874.js → usePopupAnimation-273054a0.js} +2 -2
- package/amd/{usePopupAnimation-a0193874.js.map → usePopupAnimation-273054a0.js.map} +1 -1
- package/amd/usePrefixSuffix-6ad5569e.js +2 -0
- package/amd/{usePrefixSuffix-da47e340.js.map → usePrefixSuffix-6ad5569e.js.map} +1 -1
- package/amd/useReorderableItem-d977f935.js +1 -1
- package/amd/{useRovingTabIndexContainer-079ed64f.js → useRovingTabIndexContainer-12784fca.js} +2 -2
- package/amd/{useRovingTabIndexContainer-079ed64f.js.map → useRovingTabIndexContainer-12784fca.js.map} +1 -1
- package/amd/{useScale-fe3420c6.js → useScale-e6b83382.js} +2 -2
- package/amd/{useScale-fe3420c6.js.map → useScale-e6b83382.js.map} +1 -1
- package/amd/{useSelectCommon-8657b927.js → useSelectCommon-cbb310df.js} +2 -2
- package/amd/{useSelectCommon-8657b927.js.map → useSelectCommon-cbb310df.js.map} +1 -1
- package/amd/{useSelectDrill-f69d15aa.js → useSelectDrill-f2ae347c.js} +2 -2
- package/amd/{useSelectDrill-f69d15aa.js.map → useSelectDrill-f2ae347c.js.map} +1 -1
- package/amd/useSelection-0440840d.js +2 -0
- package/amd/{useSelection-91c04393.js.map → useSelection-0440840d.js.map} +1 -1
- package/amd/useSelection-f1d96ce9.js +2 -0
- package/amd/{useSelection-2c9ff75a.js.map → useSelection-f1d96ce9.js.map} +1 -1
- package/amd/{useTabBar-254fbf75.js → useTabBar-451e6953.js} +2 -2
- package/amd/{useTabBar-254fbf75.js.map → useTabBar-451e6953.js.map} +1 -1
- package/amd/{useTestId-f3b8b319.js → useTestId-82cf22a4.js} +2 -2
- package/amd/{useTestId-f3b8b319.js.map → useTestId-82cf22a4.js.map} +1 -1
- package/amd/{useTheme-45e3b0b3.js → useTheme-1941efb7.js} +2 -2
- package/amd/{useTheme-45e3b0b3.js.map → useTheme-1941efb7.js.map} +1 -1
- package/amd/useThemeInterpolations-41cbd433.js +2 -0
- package/amd/{useThemeInterpolations-1f5fd8f3.js.map → useThemeInterpolations-41cbd433.js.map} +1 -1
- package/amd/useTooltip-d28e9b0f.js +2 -0
- package/amd/{useTooltip-e965a559.js.map → useTooltip-d28e9b0f.js.map} +1 -1
- package/amd/{useTooltipControlled-18271c7a.js → useTooltipControlled-abf886f2.js} +2 -2
- package/amd/{useTooltipControlled-18271c7a.js.map → useTooltipControlled-abf886f2.js.map} +1 -1
- package/amd/{useTranslationBundle-20bfc0f3.js → useTranslationBundle-6ef0dab6.js} +2 -2
- package/amd/{useTranslationBundle-20bfc0f3.js.map → useTranslationBundle-6ef0dab6.js.map} +1 -1
- package/amd/{useUser-9b166ca3.js → useUser-6dd85af9.js} +2 -2
- package/amd/{useUser-9b166ca3.js.map → useUser-6dd85af9.js.map} +1 -1
- package/amd/{useVisEvents-ac97d087.js → useVisEvents-75dbf576.js} +2 -2
- package/amd/{useVisEvents-ac97d087.js.map → useVisEvents-75dbf576.js.map} +1 -1
- package/amd/utils/PRIVATE_visTestUtils.js +1 -1
- package/amd/{withDirectionIcon-9e4dae53.js → withDirectionIcon-c0ee0f7e.js} +2 -2
- package/amd/{withDirectionIcon-9e4dae53.js.map → withDirectionIcon-c0ee0f7e.js.map} +1 -1
- package/cjs/{BarChart-acda079d.js → BarChart-11c56b6a.js} +2 -2
- package/cjs/{BarChart-acda079d.js.map → BarChart-11c56b6a.js.map} +1 -1
- package/cjs/{Chart-c55ecfa4.js → Chart-6684fa6d.js} +2 -2
- package/cjs/{Chart-c55ecfa4.js.map → Chart-6684fa6d.js.map} +1 -1
- package/cjs/CheckboxSet-13a5c10c.js +53 -0
- package/{amd/CheckboxSet-9c883a32.js.map → cjs/CheckboxSet-13a5c10c.js.map} +1 -1
- package/cjs/{InputDatePicker-005c03d0.js → InputDatePicker-91be7790.js} +2 -2
- package/cjs/{InputDatePicker-005c03d0.js.map → InputDatePicker-91be7790.js.map} +1 -1
- package/cjs/{LineAreaChart-5353ed1f.js → LineAreaChart-e8165e93.js} +2 -2
- package/cjs/{LineAreaChart-5353ed1f.js.map → LineAreaChart-e8165e93.js.map} +1 -1
- package/cjs/PRIVATE_Chart.js +4 -4
- package/cjs/{TextArea-b2646d51.js → TextArea-aff8b46e.js} +22 -4
- package/cjs/TextArea-aff8b46e.js.map +1 -0
- package/cjs/{TextAreaAutosize-d8cad6ce.js → TextAreaAutosize-c12ae7e7.js} +3 -3
- package/cjs/{TextAreaAutosize-d8cad6ce.js.map → TextAreaAutosize-c12ae7e7.js.map} +1 -1
- package/cjs/Theme-redwood/theme.css +149 -149
- package/cjs/Theme-stable/theme.css +197 -197
- package/cjs/UNSAFE_BarChart/__test__/BarChart.spec.js +5 -5
- package/cjs/UNSAFE_BarChart.js +5 -5
- package/cjs/UNSAFE_CheckboxItem.js +80 -30
- package/cjs/UNSAFE_CheckboxItem.js.map +1 -1
- package/cjs/UNSAFE_CheckboxSet.js +15 -44
- package/cjs/UNSAFE_CheckboxSet.js.map +1 -1
- package/cjs/UNSAFE_InputDatePicker.js +87 -87
- package/cjs/UNSAFE_LineAreaChart/__test__/LineChart.spec.js +5 -5
- package/cjs/UNSAFE_LineAreaChart.js +5 -5
- package/cjs/UNSAFE_TextArea.js +3 -4
- package/cjs/UNSAFE_TextArea.js.map +1 -1
- package/cjs/UNSAFE_TextAreaAutosize.js +2 -2
- package/es/{BarChart-c8f78f4b.js → BarChart-72948598.js} +2 -2
- package/es/{BarChart-c8f78f4b.js.map → BarChart-72948598.js.map} +1 -1
- package/es/ButtonLayoutVariants.styles.css +2 -2
- package/es/ButtonLayoutVariants.styles2.css +2 -2
- package/es/{Chart-793bd008.js → Chart-304043b3.js} +2 -2
- package/es/{Chart-793bd008.js.map → Chart-304043b3.js.map} +1 -1
- package/es/{LineAreaChart-35327196.js → LineAreaChart-09df0269.js} +2 -2
- package/es/{LineAreaChart-35327196.js.map → LineAreaChart-09df0269.js.map} +1 -1
- package/es/MaxLengthCounter-cead2dac.js +25 -0
- package/{amd/MaxLengthCounter-caafceef.js.map → es/MaxLengthCounter-cead2dac.js.map} +1 -1
- package/es/PRIVATE_Chart.js +4 -4
- package/es/{TextArea-979496a0.js → TextArea-d97aac1f.js} +8 -25
- package/{amd/TextArea-44c90bc4.js.map → es/TextArea-d97aac1f.js.map} +1 -1
- package/es/{TextAreaAutosize-b73aaa2f.js → TextAreaAutosize-68a4786d.js} +2 -2
- package/es/{TextAreaAutosize-b73aaa2f.js.map → TextAreaAutosize-68a4786d.js.map} +1 -1
- package/es/Theme-redwood/theme.css +509 -509
- package/es/Theme-stable/theme.css +790 -790
- package/es/UNSAFE_BarChart/__test__/BarChart.spec.js +5 -5
- package/es/UNSAFE_BarChart.js +5 -5
- package/es/UNSAFE_ButtonLayout/tests/ButtonLayout.spec.js +1 -1
- package/es/UNSAFE_ButtonLayout/themes/redwood/ButtonLayoutTheme.js +1 -1
- package/es/UNSAFE_ButtonLayout/themes/redwood/ButtonLayoutVariants.css.js +1 -1
- package/es/UNSAFE_ButtonLayout/themes/stable/ButtonLayoutTheme.js +1 -1
- package/es/UNSAFE_ButtonLayout/themes/stable/ButtonLayoutVariants.css.js +1 -1
- package/es/UNSAFE_ButtonLayout.js +1 -1
- package/es/UNSAFE_LineAreaChart/__test__/LineChart.spec.js +5 -5
- package/es/UNSAFE_LineAreaChart.js +5 -5
- package/es/UNSAFE_TextArea.js +3 -2
- package/es/UNSAFE_TextArea.js.map +1 -1
- package/es/UNSAFE_TextAreaAutosize.js +2 -2
- package/es/UNSAFE_Toolbar/tests/Toolbar.spec.js +1 -1
- package/es/UNSAFE_Toolbar.js +1 -1
- package/package.json +2 -2
- package/amd/CardFlexView-a647550f.js +0 -2
- package/amd/CardGridView-06fb67cb.js +0 -2
- package/amd/Center-ce88b58a.js +0 -2
- package/amd/CheckboxSet-9c883a32.js +0 -2
- package/amd/CompactLabelAssistance-9b6b3be2.js +0 -2
- package/amd/HighlightText-415dc14f.js +0 -2
- package/amd/Layer-8d7bbd69.js +0 -2
- package/amd/List-5958c802.js +0 -2
- package/amd/ListItemLayout-12aee4bd.js +0 -2
- package/amd/LiveRegion-09197914.js +0 -2
- package/amd/LoadMoreCollection-83413a59.js +0 -2
- package/amd/MaxLengthCounter-caafceef.js +0 -2
- package/amd/MaxLengthLiveRegion-e3856a98.js +0 -2
- package/amd/MessageLayer-cf2fbea9.js +0 -2
- package/amd/NavigationListItem-0a4f8a9c.js +0 -2
- package/amd/SectionedContent-d896b84f.js +0 -2
- package/amd/SelectionCard-ec3ee20d.js +0 -2
- package/amd/TabBarMixedSeparator-234c9a75.js +0 -2
- package/amd/TextArea-44c90bc4.js +0 -2
- package/amd/TextAreaAutosize-0a023972.js +0 -2
- package/amd/VirtualizedListView-ead601c7.js +0 -2
- package/amd/VisNoData-95d951c2.js +0 -2
- package/amd/index-8d4da04e.js.map +0 -1
- package/amd/useCssVars-7efb591d.js +0 -2
- package/amd/useCurrentKey-26170e5e.js +0 -2
- package/amd/useKeyboardEvents-57008a1d.js +0 -2
- package/amd/usePrefixSuffix-da47e340.js +0 -2
- package/amd/useSelection-2c9ff75a.js +0 -2
- package/amd/useSelection-91c04393.js +0 -2
- package/amd/useThemeInterpolations-1f5fd8f3.js +0 -2
- package/amd/useTooltip-e965a559.js +0 -2
- package/cjs/CheckboxSetContext-c62db26d.js +0 -12
- package/cjs/MaxLengthCounter-a5370f66.js +0 -27
- package/cjs/MaxLengthCounter-a5370f66.js.map +0 -1
- package/cjs/TextArea-b2646d51.js.map +0 -1
package/amd/Message-51d787d0.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', 'preact/hooks', './Flex-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/hooks', './Flex-1f27b601', './UNSAFE_MessageBanner/themes/redwood/MessageBannerTheme', './useComponentTheme-5aa41a8f', './timer-571d3748', './classNames-08d99695', './Close-479a300b', './IconButton-1b328b69', './useTranslationBundle-6ef0dab6', './PRIVATE_Message/themes/MessageStyles.css', 'preact', './MessageFormattingUtils-2e19d8de', './MessagesManager-78a10f78', './utils-61ef4ad6'], (function(e,s,a,t,n,r,o,l,i,c,u,m,d,g,f,y){"use strict";function v({onAction:e,variant:a="banner"}){const t=u.useTranslationBundle("@oracle/oraclejet-preact"),n=s.jsx(c.IconButton,{"aria-label":t.message_close(),size:"sm",variant:"borderless",onAction:e,children:s.jsx(i.SvgClose,{})}),r=l.classNames([m.messageCloseButtonStyles.base,m.messageCloseButtonStyles[a]]);return s.jsx("div",{class:r,"data-oj-message-close-button":"",children:n})}function b({item:e,renderer:a}){const t=l.classNames([m.messageStartIconStyles.base,m.messageStartIconStyles.toast,m.messageStartIconStyles.customToast]);return s.jsx("div",{class:t,role:"presentation","data-oj-message-custom-icon":"",children:a(e)})}function p(e){const{detail:a}=e.data;return g.isValidValueForProp(a)?s.jsx(d.Fragment,{children:a}):null}function x({item:e,renderer:a,variant:t="banner"}){const n=null!=a,r=(a??p)(e);if(null==r)return null;const o=l.classNames([m.messageDetailStyles.base,m.messageDetailStyles[t]]);return s.jsx("div",{class:o,...n?{"data-oj-message-custom-detail":""}:{},children:r})}function j({children:e,variant:a="banner"}){const t=l.classNames([m.messageHeaderStyles.base,m.messageHeaderStyles[a]]);return s.jsx("div",{role:"presentation",class:t,children:e})}function S({value:e,variant:a="banner"}){const t=l.classNames([m.messageTimestampStyles[a]]),n=g.formatTimestamp(e);return s.jsx("div",{class:t,children:n})}function h(e){return g.isValidValueForProp(e,"severity")&&"none"!==e}e.Message=function({detailRenderer:e,iconRenderer:i,item:c,onClose:u,messageRef:d=(()=>{}),variant:p="pageBanner"}){const{closeAffordance:C="on",severity:B="error",sound:M,summary:T,timestamp:k}=c.data,{autoTimeout:F="off"}=c.data,I=function(e){return"pageBanner"===e||"sectionBanner"===e?"banner":"toast"}(p),N=a.useCallback((()=>{u?.(c)}),[c,u]),V=a.useCallback((e=>{"Escape"===e.key&&"on"===C&&u?.(c)}),[C,c,u]),A="toast"===I&&"off"!==F,R=a.useRef(),P="on"===F?5e3:"number"==typeof F?F:5e3,E=a.useCallback((()=>{R.current||(R.current=new o.Timer(N,P))}),[N,P]),U=a.useCallback((()=>{R.current&&(R.current.clear(),R.current=void 0)}),[]),w=a.useCallback((()=>{R.current?.pause()}),[]),D=a.useCallback((()=>{R.current?.resume()}),[]);a.useEffect((()=>(g.isValidValueForProp(M)&&f.playSound(M),A&&E(),()=>{U()})),[]);const{variantClasses:_}=r.useComponentTheme(n.MessageBannerRedwoodTheme,{severity:B}),H=l.classNames(["banner"===I&&_,m.messageStyles.base[I],"toast"!==p&&f.severityBasedStyleClass(B,I),"sectionBanner"===p&&m.messageStyles.section]),$=l.classNames([m.messageStyles.content.base,m.messageStyles.content[I]]);return s.jsx("div",{ref:d,class:H,role:"alert","aria-atomic":"true","data-oj-key":`${typeof c.key}-${c.key}`,tabIndex:0,onKeyUp:V,onFocusIn:w,onFocusOut:D,children:s.jsxs("div",{class:$,children:[i?s.jsx(b,{item:c,renderer:i}):h(B)?s.jsx(f.MessageStartIcon,{severity:B,variant:I}):null,s.jsxs(t.Flex,{direction:"column",flex:"1",gap:y.xUnits(2),children:[s.jsxs(j,{variant:I,children:[s.jsx(f.MessageSummary,{variant:I,text:T,role:"heading","aria-level":2}),g.isValidValueForProp(k,"timestamp")&&"toast"!==p&&s.jsx(S,{variant:I,value:k})]}),s.jsx(x,{variant:I,item:c,renderer:e})]}),"on"===C&&s.jsx(v,{variant:I,onAction:N})]})})},e.MessageCloseButton=v,e.MessageDetail=x,e.MessageTimestamp=S}));
|
|
2
2
|
//# sourceMappingURL=Message-51d787d0.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', './Flex-1f27b601', './WindowOverlay-c09fece2', './useUser-6dd85af9', './Layer-3cc44164', 'preact/compat', './LayerHost-eab40731'], (function(t,e,o,s,r,i,a,n){"use strict";t.MessageLayer=({children:t,offset:a,testId:n,position:c="bottom"})=>{const l=c.split("-")[0];let p;p="number"==typeof a?{mainAxis:a,crossAxis:a}:"top"==l||"bottom"==l?{mainAxis:a?.vertical,crossAxis:a?.horizontal}:{mainAxis:a?.horizontal,crossAxis:a?.vertical};const{direction:d}=r.useUser(),m="ltr"===d;let b;switch(c){case"top-left":b=m?"top-start":"top-end";break;case"top-right":b=m?"top-end":"top-start";break;case"bottom-left":b=m?"bottom-start":"bottom-end";break;case"bottom-right":b=m?"bottom-end":"bottom-start";break;default:b=c}return e.jsx(i.Layer,{priority:"messages",level:"topLevel",children:e.jsx(s.WindowOverlay,{placement:b,offset:p,children:e.jsx("div",{"data-testid":n,children:e.jsx(o.Flex,{direction:"column",gap:"2x",children:t})})})})},t.positions=["top","top-left","top-right","top-start","top-end","bottom","bottom-left","bottom-right","bottom-start","bottom-end"]}));
|
|
2
|
+
//# sourceMappingURL=MessageLayer-d2c49999.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageLayer-
|
|
1
|
+
{"version":3,"file":"MessageLayer-d2c49999.js","sources":["../../src/PRIVATE_MessageLayer/MessageLayer.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport { Flex } from '../UNSAFE_Flex';\nimport { WindowOverlay, WindowOverlayPlacement } from '../UNSAFE_WindowOverlay';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { Layer } from '../UNSAFE_Layer';\n\nconst positions = [\n 'top',\n 'top-left',\n 'top-right',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-left',\n 'bottom-right',\n 'bottom-start',\n 'bottom-end'\n] as const;\n\ntype Position = (typeof positions)[number];\n\ntype Offset =\n | number\n | {\n horizontal?: number;\n vertical?: number;\n };\n\ntype Props = {\n children: ComponentChildren;\n\n /**\n * Defines the fixed position where the notifications will to be placed on the screen.\n * - top-start resolves to top-left in LTR (top-right in RTL)\n * - top-end resolves to top-right in LTR (top-left in RTL)\n * - bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n * - bottom-end resolves to bottom-right in LTR (bottom-left in RTL)\n *\n * default bottom\n */\n position?: Position;\n\n /**\n * Defines an offset (in pixels) in the placement. Value can be supplied as a number or\n * an object with horizontal and vertical values.\n *\n * default 0\n */\n offset?: Offset;\n\n /**\n * The test id which is assigned to the \"data-testid\" for the component's element.\n * Used for test automation, it is assigned to the wrapper element rendered by the component.\n */\n testId?: string;\n};\n\nconst MessageLayer = ({ children, offset, testId, position = 'bottom' }: Props) => {\n const side = position.split('-')[0];\n let windowOverlayOffset;\n if (typeof offset === 'number') {\n windowOverlayOffset = { mainAxis: offset, crossAxis: offset };\n } else if (side == 'top' || side == 'bottom') {\n windowOverlayOffset = { mainAxis: offset?.vertical, crossAxis: offset?.horizontal };\n } else {\n windowOverlayOffset = { mainAxis: offset?.horizontal, crossAxis: offset?.vertical };\n }\n\n const { direction } = useUser();\n const isLtr = direction === 'ltr';\n let windowOverlayPlacement: WindowOverlayPlacement | undefined;\n switch (position) {\n case 'top-left':\n windowOverlayPlacement = isLtr ? 'top-start' : 'top-end';\n break;\n case 'top-right':\n windowOverlayPlacement = isLtr ? 'top-end' : 'top-start';\n break;\n case 'bottom-left':\n windowOverlayPlacement = isLtr ? 'bottom-start' : 'bottom-end';\n break;\n case 'bottom-right':\n windowOverlayPlacement = isLtr ? 'bottom-end' : 'bottom-start';\n break;\n default:\n windowOverlayPlacement = position;\n break;\n }\n return (\n <Layer priority=\"messages\" level=\"topLevel\">\n <WindowOverlay placement={windowOverlayPlacement} offset={windowOverlayOffset}>\n <div data-testid={testId}>\n <Flex direction=\"column\" gap=\"2x\">\n {children}\n </Flex>\n </div>\n </WindowOverlay>\n </Layer>\n );\n};\n\nexport type { Position, Offset };\nexport { MessageLayer, positions };\n"],"names":["children","offset","testId","position","side","split","windowOverlayOffset","mainAxis","crossAxis","vertical","horizontal","direction","useUser","isLtr","windowOverlayPlacement","_jsx","Layer","priority","level","WindowOverlay","placement","jsx","Flex","gap"],"mappings":"2NAyDqB,EAAGA,WAAUC,SAAQC,SAAQC,WAAW,aAC3D,MAAMC,EAAOD,EAASE,MAAM,KAAK,GACjC,IAAIC,EAEFA,EADoB,iBAAXL,EACa,CAAEM,SAAUN,EAAQO,UAAWP,GACpC,OAARG,GAAyB,UAARA,EACJ,CAAEG,SAAUN,GAAQQ,SAAUD,UAAWP,GAAQS,YAEjD,CAAEH,SAAUN,GAAQS,WAAYF,UAAWP,GAAQQ,UAG3E,MAAME,UAAEA,GAAcC,EAAAA,UAChBC,EAAsB,QAAdF,EACd,IAAIG,EACJ,OAAQX,GACN,IAAK,WACHW,EAAyBD,EAAQ,YAAc,UAC/C,MACF,IAAK,YACHC,EAAyBD,EAAQ,UAAY,YAC7C,MACF,IAAK,cACHC,EAAyBD,EAAQ,eAAiB,aAClD,MACF,IAAK,eACHC,EAAyBD,EAAQ,aAAe,eAChD,MACF,QACEC,EAAyBX,EAG7B,OACEY,EAAAA,IAACC,EAAAA,OAAMC,SAAS,WAAWC,MAAM,WAAUlB,SACzCe,EAAAA,IAACI,EAAAA,cAAa,CAACC,UAAWN,EAAwBb,OAAQK,EACxDN,SAAAe,EAAAM,IAAA,MAAA,CAAA,cAAkBnB,EAChBF,SAAAe,EAAAA,IAACO,EAAAA,KAAK,CAAAX,UAAU,SAASY,IAAI,cAC1BvB,SAKT,cA5Fc,CAChB,MACA,WACA,YACA,YACA,UACA,SACA,cACA,eACA,eACA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', 'preact/hooks', './LayerHost-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/hooks', './LayerHost-eab40731', './EnvironmentProvider-46d0a245', './useMessagesFocusManager-8777bce0', './useBreakpointValues-3a067093', './MessagesContext-602a69a2', './useMessagesContext-1395a997', './useTranslationBundle-6ef0dab6', './Message-51d787d0', 'preact', './utils-61ef4ad6', './useTooltipControlled-abf886f2', 'css!./IconStyle.styles.css', './IconButton-1b328b69', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-2e19d8de', './MessagesManager-78a10f78', './Flex-1f27b601', './useTestId-82cf22a4', './FocusTrap-eb3989cb', './LiveRegion-be6f36d7', './useComponentTheme-5aa41a8f', './UNSAFE_MessageToast/themes/redwood/MessageToastTheme', './MessageLayer-d2c49999'], (function(e,s,t,n,a,o,r,i,l,c,u,d,g,f,m,h,p,y,M,v,x,R,b,T,F,k){"use strict";const C={entering:e=>({from:{transform:`translate(0, ${e.offsetHeight}px)`,opacity:1},to:{transform:"translate(0, 0)",opacity:1},end:{transform:"unset",opacity:1},options:{duration:250}}),exiting:{from:{opacity:1},to:{opacity:0},end:{opacity:0},options:{duration:250}}},j={opacity:0};e.MessageToast=function({data:e,detailRendererKey:n,iconRendererKey:i,renderers:d,onClose:f,offset:m,position:h,testId:p}){const y=x.useTestId(p),S=t.useRef(new Map),I=t.useRef(null),L=t.useRef(null),E=t.useRef(null),[B,U]=t.useState(),[w,z]=t.useState(e.length>0),[_,$]=t.useState(!1),A=c.useTranslationBundle("@oracle/oraclejet-preact"),{UNSAFE_messagesLayerId:H}=l.useMessagesContext(),K=t.useRef(e.length),P=t.useRef(0);K.current=e.length,t.useImperativeHandle(E,(()=>({focus:()=>!!e.length&&(I.current=S.current.get(e[0].key)??null,$(!0),!0),contains:s=>!(!e.length||!s)&&(L.current?.contains(s)??!1)})),[e]);const{controller:V,handlers:N}=o.useMessageFocusManager(E,{onFocus:t.useCallback((()=>{U(A.message_navigationFromMessagesRegion())}),[A]),onFocusLeave:t.useCallback((()=>{$(!1)}),[])},{handleEscapeKey:!1}),W=t.useCallback(((s,t,n)=>{const a=n?.contains(document.activeElement);if(0===K.current)return z(!1),$(!1),void(a&&setImmediate((()=>V.restorePriorFocus())));const o=t+1<e.length?t+1:t-1;if(o>-1&&a){const s=e[o].key;S.current.get(s)?.focus()}}),[V,e]),D=t.useCallback((e=>s=>S.current.set(e,s)),[]);t.useEffect((()=>{const s=P.current;if(P.current=e.length,e.length)return z(!0),e.length>s&&U(A.message_navigationToMessagesRegion()),void V.prioritize();U(s?A.messageToast_allMessagesClosed():"")}),[V,e.length,A]);const q=r.useBreakpointValues({sm:`calc(100vw - ${g.xUnits(8)})`,md:`calc(100vw - ${g.xUnits(12)})`,lg:`calc(150 * ${g.xUnits(1)})`}),G=r.useBreakpointValues({sm:{horizontal:"number"==typeof m?m:m?.horizontal??0,vertical:16+("number"==typeof m?m:m?.vertical??0)},lg:{horizontal:"number"==typeof m?m:m?.horizontal??0,vertical:24+("number"==typeof m?m:m?.vertical??0)}}),{classes:J}=T.useComponentTheme(F.MessageToastRedwoodTheme);return w||0!==e.length?s.jsxs(a.EnvironmentProvider,{environment:{colorScheme:"dark"},children:[s.jsx(k.MessageLayer,{offset:G,position:h,children:s.jsx("div",{class:J,ref:L,tabIndex:-1,id:H,...N,...y,children:s.jsx(R.FocusTrap,{autoFocusRef:I,isDisabled:!_,children:s.jsx(v.Flex,{direction:"column",gap:"1x",align:"center",maxWidth:q,children:s.jsx(M.MessagesManager,{animationStates:C,initialAnimationStyles:j,data:e,onMessageWillRemove:W,children:({item:e})=>s.jsx(u.Message,{messageRef:D(e.key),item:e,detailRenderer:M.getRenderer(e,n,d),iconRenderer:M.getRenderer(e,i,d),onClose:f,variant:"toast"},e.key)})})})})}),s.jsx(b.LiveRegion,{children:B})]}):s.jsx(b.LiveRegion,{children:B})}}));
|
|
2
2
|
//# sourceMappingURL=MessageToast-e0e07765.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', './classNames-08d99695', './SuccessS-e1f2cad9', './ErrorS-f41bce95', './InformationS-28ac133d', './WarningS-f0365779', './Flex-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', './classNames-08d99695', './SuccessS-e1f2cad9', './ErrorS-f41bce95', './InformationS-28ac133d', './WarningS-f0365779', './Flex-1f27b601', './PRIVATE_Message/themes/MessageStyles.css', './useTranslationBundle-6ef0dab6', './useTestId-82cf22a4', './logger-0f873e29', './soundUtils-f6535f03', './MessageFormattingUtils-2e19d8de', 'preact', 'preact/hooks', './TransitionGroup-3b9d81b6', './useAnimation-5bd3adfc', './MessagesContext-602a69a2', './useMessagesContext-1395a997', './Transition-04efcc49'], (function(e,n,t,a,s,i,r,o,c,l,u,d,g,m,f,y,S,v,x,h,p){"use strict";const b={confirmation:a.SvgSuccessS,error:s.SvgErrorS,info:i.SvgInformationS,warning:r.SvgWarningS};const I=(e,n="common")=>d.warn(`JET Message(${n}): ${e}`);function j(e,n="common"){throw new Error(`JET Message(${n}) - ${e}`)}const E={};function M({animationStates:e=E,initialAnimationStyles:t,onEntering:a,onExiting:s,...i}){const[r,o]=y.useState("entering"),c=y.useRef(),l=y.useRef(),{controller:u,nodeRef:d}=v.useAnimation(r,{animationStates:e,isAnimatedOnMount:!0,onAnimationEnd:y.useCallback((()=>{c.current?.(),c.current=void 0,l.current?.(),l.current=void 0}),[])}),{addBusyState:g}=h.useMessagesContext(),m=y.useCallback(((n,t,s)=>{c.current&&(c.current=void 0,u.cancel()),l.current?.(),l.current=void 0,a?.(n,void 0,s),o("entering"),void 0!==e.entering||void 0!==e["exiting => entering"]?(c.current=t,l.current=g?.("messages animating")):t?.()}),[e,u,g,a]),f=y.useCallback(((n,t,a)=>{c.current&&(c.current=void 0,u.cancel()),l.current?.(),l.current=void 0,s?.(n,void 0,a),o("exiting"),void 0!==e.exiting||void 0!==e["entering => exiting"]?(c.current=t,l.current=g?.("messages animating")):t?.()}),[e,u,g,s]);return y.useLayoutEffect((()=>()=>l.current?.()),[]),n.jsx("div",{ref:d,style:t,children:n.jsx(p.Transition,{...i,onEntering:m,onExiting:f})})}e.MessageStartIcon=function({severity:e,testId:a,variant:s="banner"}){const i=b[e],r=l.useTranslationBundle("@oracle/oraclejet-preact"),d={confirmation:r.message_confirmation(),error:r.message_error(),info:r.message_info(),warning:r.message_warning()},g=u.useTestId(a),m="inline"!==s?n.jsx(o.Flex,{align:"center",height:"100%",children:n.jsx("span",{class:c.startIconContainerStyles[s],role:"img","aria-label":d[e],children:n.jsx(i,{})})}):n.jsx("span",{class:c.startIconContainerStyles.inline,role:"img","aria-label":d[e],children:n.jsx(i,{})});return n.jsx("div",{class:t.classNames([c.messageStartIconStyles.base,c.messageStartIconStyles[s],c.severityIconStyles[s]]),role:"presentation",...g,children:m})},e.MessageSummary=function({"aria-level":e,role:a,text:s,testId:i,variant:r="banner"}){const o=u.useTestId(i),l=t.classNames([c.messageSummaryStyles.base,c.messageSummaryStyles[r]]);return n.jsx("div",{"aria-level":e,role:a,class:l,...o,children:s})},e.MessagesManager=function({data:e,animationStates:t,children:a,initialAnimationStyles:s,onMessageWillRemove:i}){const r=y.useCallback((async(e,n)=>{n&&i?.(n.key,n.index,e)}),[i]);return n.jsx(S.TransitionGroup,{elementType:f.Fragment,children:e.map(((e,i)=>n.jsx(M,{animationStates:t,initialAnimationStyles:s,metadata:{index:i,key:e.key},onExited:r,children:a?.({index:i,item:e})},e.key)))})},e.getRenderer=function(e,n,t,a){if(!n||!t)return;const s="function"==typeof n?n(e):n;return null!=s?(s in t||j(`${s} is not a valid template name for the message with key=${e.key}`,a),t[s]):void 0},e.isSeverityIconNeeded=function(e){return m.isValidValueForProp(e,"severity")&&"none"!==e},e.playSound=async function(e){if("none"!==e)if("default"!==e)try{await g.playAudioFromURL(e)}catch(n){I(`Failed to play the audio from the url ${e}. ${n}.`)}else try{g.playDefaultNotificationSound()}catch(e){I(`Failed to play the default sound. ${e}.`)}},e.severityBasedStyleClass=function(e,n){return m.isValidValueForProp(e,"severity")&&"none"!==e?`oj-c-message${n}-${e}`:""},e.throwError=j}));
|
|
2
2
|
//# sourceMappingURL=MessagesManager-78a10f78.js.map
|
package/amd/MeterBar-38666619.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', './TrackResizeContainer-905caab2', './size-4e81acac', './classNames-08d99695', './mergeProps-bcfa6a92', 'preact/hooks', './useUser-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', './TrackResizeContainer-905caab2', './size-4e81acac', './classNames-08d99695', './mergeProps-bcfa6a92', 'preact/hooks', './useUser-6dd85af9', './useMeterDatatip-60af9281', './useKeyboardEvents-e9a2b72b', './meterUtils-dcd89d95', './UNSAFE_MeterBar/themes/MeterBarStyles.css', './utils-95689660', './TabbableModeContext-a9c97640', './useTabbableMode-dc440317', './useComponentTheme-5aa41a8f', './UNSAFE_MeterBar/themes/redwood/MeterBarTheme', './useTestId-82cf22a4', './UNSAFE_MeterBar/themes/MeterBarContract.css', './utils-61ef4ad6', './LinearMeter-82411a78'], (function(e,t,r,a,s,n,i,o,l,c,d,h,u,S,m,y,g,f,b,p,T){"use strict";function x(e){if(!e)return{width:0,height:0};const t=e.getBoundingClientRect();return{width:t.width,height:t.height}}const k=function(e,t,r,a,s,n){const i=[];return e.start&&i.push(t?r:a),e.end&&i.push(t?s:n),i},z=function(e,t,r,a,s,n){const i=[];return e.start&&i.push(t?r:a),e.end&&i.push(t?s:n),i},M=function(e,t,r){return t&&(e.start&&!r&&(t-=16),e.end&&!r&&(t-=16)),t},B=function(e,t,r){return t&&(e.start&&r&&(t-=16),e.end&&r&&(t-=16)),t};function C({orientation:e,percentage:r,color:a,position:n,width:i,height:l}){const c="horizontal"===e,{direction:d}=o.useUser(),S="rtl"===d,m="start"===n;return t.jsx("div",{class:s.classNames([h.styles.referenceLinesBaseStyle,c?h.styles.referenceLinesHorizontalStyle:h.styles.referenceLinesVerticalStyle,m?c?h.styles.referenceLinesHoriontalStartStyle:S?h.styles.referenceLinesVerticalStartRtlStyle:h.styles.referenceLinesVerticalStartLtrStyle:""]),style:{left:c&&!S?r:void 0,right:c&&S?r:void 0,bottom:c?void 0:r,backgroundColor:u.getVisThresholdColor(a),width:i,height:l}})}function v({color:e,length:r,orientation:a,...n}){const{direction:i}=o.useUser(),l="horizontal"===a,c="rtl"===i;return t.jsx("div",{class:s.classNames([h.styles.thresholdBarBaseStyle,l?c?h.styles.thresholdBarHorizontalBarTrackSectionRtlStyle:h.styles.thresholdBarHorizontalBarTrackSectionLtrStyle:h.styles.thresholdBarVerticalBarTrackSectionStyle,n.class]),style:{width:l?r:"100%",height:l?"100%":r,backgroundColor:u.getVisThresholdColor(e)}})}function V({max:e=100,min:r=0,value:h=0,step:u=1,length:S="100%",width:V,height:w,size:j,orientation:L="horizontal",isTrackRendered:R=!0,thresholdDisplay:F="all",indicatorSize:I=1,testId:U,...E}){const H=f.useTestId(U);d.validateRange(r,e,h,u);const N=i.useRef(),A="horizontal"===L,P=i.useRef(null),$=i.useRef(x(null)),{direction:D,forcedColors:_}=o.useUser(),K="rtl"===D;i.useEffect((()=>{(E.onCommit||E.onInput)&&($.current=x(P.current))}),[j,S,L,E.onCommit,E.onInput]);const X=i.useRef(!1),Y=l.usePointerEvents(h,(t=>{if(t.target==P.current)return function(e,t,r,a,s,n,i){const o=t.current;if(!o||0===o.width)return;let l;if("horizontal"===n){const t=e.offsetX;l=r+(a-r)*(i?o.width-t:t)/o.width}else l=r+(a-r)*(o.height-e.offsetY)/o.height;return l=Math.round(l/s)*s,Math.max(r,Math.min(a,l))}(t,$,r,e,u,L,K)}),P,N,X,E.onCommit,E.onInput),q=c.useKeyboardEvents(h,r,e,u,N,E.onCommit,E.onInput),{datatipContent:G,datatipProps:J}=l.useMeterDatatip(h,X,E.datatip,E["aria-describedby"]),O=d.getMeterAriaProps(h,r,e,E["aria-label"],E["aria-labelledby"],E.thresholds),Q=n.mergeProps(Y,q,J,O),W=Math.max(0,Math.min(1,I)),Z=100*(h-r)/(e-r)+"%",ee=100*W+"%",{trackColor:te,indicatorColor:re}=d.getTrackAndIndicatorColor(h,F,E.trackColor,E.indicatorColor,E.thresholds),ae=function(e){let t={start:!1,end:!1};return e&&(t=e.reduce(((e,t)=>(e.start=e.start||"start"===t.position,e.end=e.end||"end"===t.position||null==t.position,e)),t)),t}(E.referenceLines),se=E.onCommit||E.onInput,{isTabbable:ne}=m.useTabbableMode(),{classes:ie,styles:{interactiveStyle:oe,barValueBaseStyle:le,barValueVerticalStyle:ce,barValueHorizontalStyle:de,barValueHighContrastStyle:he,barTrackBaseStyle:ue,barTrackHorizontalSizeStyle:Se,barTrackVerticalSizeStyle:me,barTrackBorderStyle:ye,barTrackMarginTopStyle:ge,barTrackMarginStartStyle:fe,barTrackMarginBottomStyle:be,barTrackMarginEndStyle:pe,barTrackMarginTopFitStyle:Te,barTrackMarginStartFitStyle:xe,barTrackMarginBottomFitStyle:ke,barTrackMarginEndFitStyle:ze,trackSectionHorizontalFirstStyle:Me,trackSectionHorizontalLastStyle:Be,trackSectionVerticalFirstStyle:Ce,trackSectionVerticalLastStyle:ve,trackSectionRoundedCornersStyle:Ve}}=y.useComponentTheme(g.MeterBarRedwoodTheme,{size:j,orientation:L}),we="fit"===j;return t.jsxs(t.Fragment,{children:[t.jsx("div",{tabIndex:ne?0:-1,...H,...Q,style:{width:we?M(ae,V,A):A?a.sizeToCSS(S):void 0,height:we?B(ae,w,A):A?void 0:a.sizeToCSS(S)},class:s.classNames([ie,...we?z(ae,A,Te,xe,ke,ze):[]]),children:t.jsxs(T.BarTrack,{ref:P,orientation:L,color:!R||"all"===F&&E.thresholds?"transparent":te,class:s.classNames([ue,se?oe:"",A?Se:me,!R||"all"===F&&E.thresholds?void 0:ye,...we?"":k(ae,A,ge,fe,be,pe)]),children:["all"===F&&E.thresholds?.filter((t=>t.max>r&&t.max<=e)).sort(((e,t)=>e.max-t.max)).map(((a,s,n)=>{const i=0===s?a.max-r:a.max-n[s-1].max,o=A?Be:ve;let l=0===s?A?Me:Ce:"";return a.max===e&&(l=0===s?Ve:o),t.jsxs(t.Fragment,{children:[t.jsx(v,{class:l,orientation:L,length:100*i/(e-r)+"%",color:a.color}),R&&s===n.length-1&&a.max<e?t.jsx(v,{class:o,color:te,orientation:L,length:100*(e-n[s].max)/(e-r)+"%"}):""]})})),t.jsx(T.BarValue,{length:Z,size:ee,orientation:L,class:s.classNames([le,A?de:ce,"active"===_?he:""]),color:re}),E.referenceLines?.map((a=>t.jsx(C,{color:a.color,orientation:L,percentage:100*(a.value-r)/(e-r)+"%",position:a.position,width:we?A?void 0:`calc(${p.xUnits(4)} + ${b.meterBarVars.size})`:void 0,height:we&&A?`calc(${p.xUnits(4)} + ${b.meterBarVars.size})`:void 0})))]})}),G]})}e.MeterBar=function({orientation:e,length:a,size:s,...n}){return t.jsx(t.Fragment,{children:"fit"===s?t.jsx(r.TrackResizeContainer,{width:"100%",height:"100%",children:(r,a)=>t.jsx(V,{width:r,height:a,orientation:e,size:s,...n})}):t.jsx(V,{size:s,length:a,orientation:e,...n})})}}));
|
|
2
2
|
//# sourceMappingURL=MeterBar-38666619.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', './useUser-9b166ca3', 'preact/hooks', './mergeProps-bcfa6a92', './classNames-08d99695', './meterUtils-dcd89d95', './circleUtils-1886e5b4', './utils-95689660', './UNSAFE_MeterCircle/themes/MeterCircleStyles.css', './TrackResizeContainer-905caab2', './UNSAFE_MeterCircle/themes/MeterCircleContract.css', './Common/themes/themeContract.css', './utils-61ef4ad6', './useMeterDatatip-1a3890aa', './useKeyboardEvents-57008a1d', './TabbableModeContext-a9c97640', './useTabbableMode-dc440317', './useComponentTheme-5aa41a8f', './UNSAFE_MeterCircle/themes/redwood/MeterCircleTheme', './useTestId-f3b8b319', './CircularMeter-d19358bc'], (function(e,t,n,r,i,s,a,l,c,o,d,u,h,m,f,g,p,x,C,R,$,b){"use strict";function M({color:e,angle:n,radius:r,length:i,section:a="full"}){const d=l.getCenterCoord(a),u=`calc(${100*d.y}% - ((${Math.sin(2*n*Math.PI/360)} * ${r})))`,h=`calc(${100*d.x}% + ((${Math.cos(2*n*Math.PI/360)} * ${r})))`;return t.jsx("div",{class:s.classNames([o.styles.referenceBaseLineStyle,e?void 0:o.styles.referenceBorderStyle]),style:{left:h,top:u,width:`calc(${i})`,transform:`translate(0, -1px) rotate(${360-n}deg)`,backgroundColor:e?c.getVisThresholdColor(e):void 0}})}function y(e,t){if(!e)return{width:0,height:0,innerRadius:0,outerRadius:0};const n=e.children[0],r=n.getBoundingClientRect();return{width:Math.round(r.width),height:Math.round(r.height),...S(n,r,t)}}function S(e,t,n){const r=e.clientWidth,i=e.clientHeight;return"bottom"===n||"top"===n?{outerRadius:t.width/2,innerRadius:i}:"left"===n||"right"===n?{outerRadius:t.height/2,innerRadius:r}:{innerRadius:r/2,outerRadius:t.width/2}}function v(e,t,n,r,i,s,a,c,o){const d=i.current;if(!d)return;const u=l.getCenterCoord(c),{angle:h}=l.convertToPolar(d.width*u.x,d.height*u.y,e.offsetX,e.offsetY),m=l.getPositiveAngle(h);let f;if(o&&s+a>m&&(f=l.getPositiveAngle(h-s)/a*(n-t)),!o){const e=l.getPositiveAngle(s-m);e<=a&&(f=e*(n-t)/a)}return null!=f&&(f=Math.round(f/r)*r,f=Math.max(Math.min(n,f),t)),f}function w(e,t,n,r){return e*r/(n-t)}function T(e,t,n,r,i,s){return r+(s?1:-1)*w(e-t,t,n,i)}function z(e,t){const n=e.current;if(!n)return;const r=l.getCenterCoord(t),i=r.x*n.width,s=r.y*n.height;let a,c,o,d,u,h,m,f;return"top"===t||"bottom"===t||"full"===t?(m=2*n.innerRadius,f="full"===t?2*n.innerRadius:n.innerRadius,u=i-n.innerRadius,h="bottom"===t?0:s-n.innerRadius,o=Math.sqrt(2)*n.innerRadius,d="full"===t?o:n.innerRadius/Math.sqrt(2),a=i-n.innerRadius/Math.sqrt(2),c="bottom"===t?0:s-n.innerRadius/Math.sqrt(2)):(f=2*n.innerRadius,m=n.innerRadius,u="left"===t?i-n.innerRadius:0,h=s-n.innerRadius,d=Math.sqrt(2)*n.innerRadius,o=n.innerRadius/Math.sqrt(2),a="left"===t?i-n.innerRadius/Math.sqrt(2):0,c=s-n.innerRadius/Math.sqrt(2)),{outerBounds:{x:u,y:h,width:m,height:f},innerBounds:{x:a,y:c,width:o,height:d}}}const I=8,P=16;function j(e,t){return e?"fit"===e?`${t}px`:u.meterCircleVars.sizes[e]:u.meterCircleVars.size}function k(e){return e?u.meterCircleVars.trackSizes[e]:u.meterCircleVars.trackSize}function A(e,t,n){return null!=t?`(${j(e,n)} * ${t/2})`:`(${j(e,n)} * 0.5 - ${k(e)})`}function E(e,t,n){return null!=t?`(${j(e,n)} * ${1-t} / 2)`:k(e)}function N(e,t,n,r){return`${E(e,t,r)} + ${m.xUnits("fit"!==e||n?2:4)}`}function B(e,t,n,r,i,s){const{min:a,max:o,startAngle:d,angleExtent:u,size:h,section:m,isRtl:f,innerRadius:g}=e,p=`calc(${E(h,i,s)})`,x=[],C=t.filter((e=>e.max>a&&e.max<=o)).sort(((e,t)=>e.max-t.max)),R=C.length;for(let e=0;e<R;e++){const t=C[e],i=0===e?a:C[e-1].max,s=0===e?t.max:t.max-C[e-1].max;let h=T(i,a,o,d,u,f),$=w(s,a,o,u);const{startOffset:b,extentOffset:M}=U(g,u,0===e,t.max===o,f),y=l.getClipPath(h+b,$+M,f,m);if(x.push({clipPath:y,color:c.getVisThresholdColor(t.color),size:p,section:m}),e===R-1&&t.max<o&&n){h+=(f?1:-1)*$,$=w(o-t.max,a,o,u);const{startOffset:e,extentOffset:n}=U(g,u,!1,!0,f);x.push({clipPath:l.getClipPath(h+e,$+n,f,m),color:r,size:p,section:m})}}return x}function V(e,t,n,r,i){const{min:s,max:a,startAngle:l,angleExtent:c,size:o,isRtl:d}=e;return{radius:A(o,n,i),length:N(o,n,r,i),angle:T(t.value,s,a,l,c,d),color:t.color}}function D(e,t,n,r,i,s,a){const{startAngle:c,angleExtent:o,size:d,section:u,isRtl:m}=e;return{section:u,color:t?"all"===n&&s?`${h.colorSchemeVars.dvt.contrastLine}`:r:"transparent",clipPath:l.getClipPath(c,o,m,u),size:`calc(${E(d,i,a)})`}}function L(e,t,n,r){const{value:i,min:s,max:a,startAngle:c,angleExtent:o,size:d,section:u,isRtl:h}=e,m=(i-s)*o/(a-s),f=Math.min(Math.max(0,t),1),g="left"===u||"right"===u,p="top"===u||"bottom"===u,x=`calc(${E(d,n,r)} * ${f})`,C=`${j(d,r)} - ((1 - ${f}) * ${E(d,n,r)})`,R=`(${C}) / 2`;return{section:u,width:g?`calc(${R})`:`calc(${C})`,height:p?`calc(${R})`:`calc(${C})`,size:x,clipPath:l.getClipPath(c,m,h,u)}}function U(e,t,n,r,i){if(!e)return{startOffset:0,extentOffset:0};const s=360/(2*Math.PI*e);let a=s/2*(i?1:-1),l=-1*s;return n&&t<360&&(a=0,l=-.5*s),r&&t<360&&(l=-.5*s),{startOffset:a,extentOffset:l}}function q(e,t,n){return"top"===n||"bottom"===n?{height:Math.min(t,e/2),width:2*Math.min(t,e/2)}:"left"===n||"right"===n?{width:Math.min(e,t/2),height:2*Math.min(e,t/2)}:{width:Math.min(e,t),height:Math.min(e,t)}}const O=360,F=.8;function W({max:e=100,min:c=0,value:o=0,step:u=1,size:h="fit",startAngle:m=90,angleExtent:p=360,isTrackRendered:S=!0,thresholdDisplay:w="all",indicatorSize:T=1,testId:j,...k}){const A=$.useTestId(j);a.validateRange(c,e,o,u);const E=k.onCommit||k.onInput,{classes:N,styles:U}=C.useComponentTheme(R.MeterCircleRedwoodTheme,{size:h,interaction:E?"isInteractive":void 0});return t.jsx(d.TrackResizeContainer,{class:N,width:"100%",height:"100%",children:function(d,C){const{direction:R}=n.useUser(),$="rtl"===R;let j=m;$&&(j=180-j);const E=l.getCircleSection(j,p,$),{width:W}=q(d,C,E),K=W<O,_=k.innerRadius||"fit"===h?F:void 0,{width:H,height:X}=function(e,t,n,r,i){return n?"full"===i?{width:e-2*(r?I:P),height:t-2*(r?I:P)}:"top"===i||"bottom"===i?{width:e-2*(r?I:P),height:t-(r?I:P)}:{width:e-(r?I:P),height:t-2*(r?I:P)}:{width:e,height:t}}(d,C,!!k.referenceLines?.length,K,E),{width:Y,height:G}=q(H,X,E),J="full"===E?Math.min(Y,G)/2:Math.min(Y,G),Q=2*J,Z=r.useRef(),ee=r.useRef(y(null,E)),te=r.useRef(null),[ne,re]=r.useState(!1);r.useEffect((()=>{(k.onCommit||k.onInput||k.children)&&(ee.current=y(te.current,E),re(!0))}),[E]);const ie=r.useRef(!1),se=f.usePointerEvents(o,(t=>{const n=te.current;if(t.target==n)return v(t,c,e,u,ee,j,p,E,$)}),te,Z,ie,k.onCommit,k.onInput),ae=g.useKeyboardEvents(o,c,e,u,Z,k.onCommit,k.onInput),{datatipContent:le,datatipProps:ce}=f.useMeterDatatip(o,ie,k.datatip,k["aria-describedby"]),oe=a.getMeterAriaProps(o,c,e,k["aria-label"],k["aria-labelledby"],k.thresholds),de=i.mergeProps(se,ae,ce,oe),{trackColor:ue,indicatorColor:he}=a.getTrackAndIndicatorColor(o,w,k.trackColor,k.indicatorColor,k.thresholds),me={min:c,max:e,value:o,startAngle:j,angleExtent:p,size:h,section:E,isRtl:$,innerRadius:ee.current.innerRadius},{isTabbable:fe}=x.useTabbableMode(),ge=z(ee,E);return t.jsxs(t.Fragment,{children:[t.jsx("div",{class:s.classNames([N,"full"===E?`${U.meterCircleFullSizeStyle}, ${U.centerDiv}`:""]),style:{width:d,height:C},tabIndex:fe?0:-1,...A,...de,children:t.jsxs(b.CircleWrapper,{wrapperRef:te,class:s.classNames([U.circleWrapperBaseStyle,k.referenceLines&&k.referenceLines.length>0?h&&U[`fit${K?"Sm":"Lg"}${E}Style`]:"",U.centerDiv]),width:`${Y}px`,height:`${G}px`,children:[t.jsx(b.CircleInner,{width:`${Y}px`,height:`${G}px`,class:s.classNames([U.circleTrackBaseStyle,U[`${E}Style`]]),...D(me,S,w,ue,_,k.thresholds,Q)}),"all"===w&&k.thresholds&&B(me,k.thresholds,S,ue,_,Q).map((e=>t.jsx(b.CircleInner,{class:s.classNames([U.circleTrackBaseStyle,U[`${E}Style`]]),...e,width:`${Y}px`,height:`${G}px`}))),t.jsx(b.CircleInner,{color:he,class:s.classNames([U.circleValueBaseStyle,U[`circleValue${E}Style`],U[`${E}Style`]]),...L(me,T,_,2*J)}),k.referenceLines?.map((e=>t.jsx(M,{...V(me,e,_,K,Q),section:E}))),ne&&k.children&&ge&&t.jsx("div",{class:s.classNames([U.meterCircleCenterContent]),children:k.children(ge)})]})}),le]})}})}function K({max:e=100,min:c=0,value:o=0,step:d=1,size:u,startAngle:h=90,angleExtent:m=360,isTrackRendered:p=!0,thresholdDisplay:S="all",indicatorSize:w=1,testId:T,...I}){const P=$.useTestId(T);a.validateRange(c,e,o,d);const j=r.useRef(),{direction:k}=n.useUser(),A="rtl"===k;let E=h;A&&(E=180-E);const N=l.getCircleSection(E,m,A),U=r.useRef(y(null,N)),q=r.useRef(null),[O,F]=r.useState(!1);r.useEffect((()=>{(I.onCommit||I.onInput||I.children)&&(U.current=y(q.current,N),F(!0))}),[u,N,I.onCommit,I.onInput,I.children]);const W=r.useRef(!1),K=f.usePointerEvents(o,(t=>{const n=q.current;if(t.target==n)return v(t,c,e,d,U,E,m,N,A)}),q,j,W,I.onCommit,I.onInput),_=g.useKeyboardEvents(o,c,e,d,j,I.onCommit,I.onInput),{datatipContent:H,datatipProps:X}=f.useMeterDatatip(o,W,I.datatip,I["aria-describedby"]),Y=a.getMeterAriaProps(o,c,e,I["aria-label"],I["aria-labelledby"],I.thresholds),G=i.mergeProps(K,_,X,Y),{trackColor:J,indicatorColor:Q}=a.getTrackAndIndicatorColor(o,S,I.trackColor,I.indicatorColor,I.thresholds),Z="bottom"===N||"top"===N?"Horizontal":"left"===N||"right"===N?"Vertical":"Full",ee={min:c,max:e,value:o,startAngle:E,angleExtent:m,size:u,section:N,isRtl:A,innerRadius:U.current.innerRadius},te=I.onCommit||I.onInput,{classes:ne,styles:re}=C.useComponentTheme(R.MeterCircleRedwoodTheme,{size:u,interaction:te?"isInteractive":void 0}),{isTabbable:ie}=x.useTabbableMode(),se=z(U,N);return t.jsxs(t.Fragment,{children:[t.jsx("div",{class:s.classNames([ne]),tabIndex:ie?0:-1,...P,...G,children:t.jsxs(b.CircleWrapper,{wrapperRef:q,class:s.classNames([re.circleWrapperBaseStyle,I.referenceLines&&I.referenceLines.length>0?u&&re[`${u}${N}Style`]:"",re[`meterCircle${Z}SizeStyle`]]),children:[t.jsx(b.CircleInner,{class:s.classNames([re.circleTrackBaseStyle,re[`${N}Style`]]),...D(ee,p,S,J,I.innerRadius,I.thresholds)}),"all"===S&&I.thresholds&&B(ee,I.thresholds,p,J,I.innerRadius).map((e=>t.jsx(b.CircleInner,{class:s.classNames([re.circleTrackBaseStyle,re[`${N}Style`]]),...e}))),t.jsx(b.CircleInner,{color:Q,class:s.classNames([re.circleValueBaseStyle,re[`circleValue${N}Style`],re[`${N}Style`]]),...L(ee,w,I.innerRadius)}),I.referenceLines?.map((e=>t.jsx(M,{...V(ee,e,I.innerRadius),section:N}))),O&&I.children&&se&&t.jsx("div",{class:s.classNames([re.meterCircleCenterContent]),children:I.children(se)})]})}),H]})}e.MeterCircle=function({size:e,max:n=100,min:r=0,value:i=0,step:s=1,startAngle:a=90,angleExtent:l=360,isTrackRendered:c=!0,thresholdDisplay:o="all",indicatorSize:d=1,...u}){return"fit"===e?t.jsx(W,{min:r,value:i,max:n,step:s,startAngle:a,angleExtent:l,isTrackRendered:c,thresholdDisplay:o,indicatorSize:d,...u}):t.jsx(K,{size:e||"lg",min:r,value:i,max:n,step:s,startAngle:a,angleExtent:l,isTrackRendered:c,thresholdDisplay:o,indicatorSize:d,...u})}}));
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', './useUser-6dd85af9', 'preact/hooks', './mergeProps-bcfa6a92', './classNames-08d99695', './meterUtils-dcd89d95', './circleUtils-1886e5b4', './utils-95689660', './UNSAFE_MeterCircle/themes/MeterCircleStyles.css', './TrackResizeContainer-905caab2', './UNSAFE_MeterCircle/themes/MeterCircleContract.css', './Common/themes/themeContract.css', './utils-61ef4ad6', './useMeterDatatip-60af9281', './useKeyboardEvents-e9a2b72b', './TabbableModeContext-a9c97640', './useTabbableMode-dc440317', './useComponentTheme-5aa41a8f', './UNSAFE_MeterCircle/themes/redwood/MeterCircleTheme', './useTestId-82cf22a4', './CircularMeter-d19358bc'], (function(e,t,n,r,i,s,a,l,c,o,d,u,h,m,f,g,p,x,C,R,$,b){"use strict";function M({color:e,angle:n,radius:r,length:i,section:a="full"}){const d=l.getCenterCoord(a),u=`calc(${100*d.y}% - ((${Math.sin(2*n*Math.PI/360)} * ${r})))`,h=`calc(${100*d.x}% + ((${Math.cos(2*n*Math.PI/360)} * ${r})))`;return t.jsx("div",{class:s.classNames([o.styles.referenceBaseLineStyle,e?void 0:o.styles.referenceBorderStyle]),style:{left:h,top:u,width:`calc(${i})`,transform:`translate(0, -1px) rotate(${360-n}deg)`,backgroundColor:e?c.getVisThresholdColor(e):void 0}})}function y(e,t){if(!e)return{width:0,height:0,innerRadius:0,outerRadius:0};const n=e.children[0],r=n.getBoundingClientRect();return{width:Math.round(r.width),height:Math.round(r.height),...S(n,r,t)}}function S(e,t,n){const r=e.clientWidth,i=e.clientHeight;return"bottom"===n||"top"===n?{outerRadius:t.width/2,innerRadius:i}:"left"===n||"right"===n?{outerRadius:t.height/2,innerRadius:r}:{innerRadius:r/2,outerRadius:t.width/2}}function v(e,t,n,r,i,s,a,c,o){const d=i.current;if(!d)return;const u=l.getCenterCoord(c),{angle:h}=l.convertToPolar(d.width*u.x,d.height*u.y,e.offsetX,e.offsetY),m=l.getPositiveAngle(h);let f;if(o&&s+a>m&&(f=l.getPositiveAngle(h-s)/a*(n-t)),!o){const e=l.getPositiveAngle(s-m);e<=a&&(f=e*(n-t)/a)}return null!=f&&(f=Math.round(f/r)*r,f=Math.max(Math.min(n,f),t)),f}function w(e,t,n,r){return e*r/(n-t)}function T(e,t,n,r,i,s){return r+(s?1:-1)*w(e-t,t,n,i)}function z(e,t){const n=e.current;if(!n)return;const r=l.getCenterCoord(t),i=r.x*n.width,s=r.y*n.height;let a,c,o,d,u,h,m,f;return"top"===t||"bottom"===t||"full"===t?(m=2*n.innerRadius,f="full"===t?2*n.innerRadius:n.innerRadius,u=i-n.innerRadius,h="bottom"===t?0:s-n.innerRadius,o=Math.sqrt(2)*n.innerRadius,d="full"===t?o:n.innerRadius/Math.sqrt(2),a=i-n.innerRadius/Math.sqrt(2),c="bottom"===t?0:s-n.innerRadius/Math.sqrt(2)):(f=2*n.innerRadius,m=n.innerRadius,u="left"===t?i-n.innerRadius:0,h=s-n.innerRadius,d=Math.sqrt(2)*n.innerRadius,o=n.innerRadius/Math.sqrt(2),a="left"===t?i-n.innerRadius/Math.sqrt(2):0,c=s-n.innerRadius/Math.sqrt(2)),{outerBounds:{x:u,y:h,width:m,height:f},innerBounds:{x:a,y:c,width:o,height:d}}}const I=8,P=16;function j(e,t){return e?"fit"===e?`${t}px`:u.meterCircleVars.sizes[e]:u.meterCircleVars.size}function k(e){return e?u.meterCircleVars.trackSizes[e]:u.meterCircleVars.trackSize}function A(e,t,n){return null!=t?`(${j(e,n)} * ${t/2})`:`(${j(e,n)} * 0.5 - ${k(e)})`}function E(e,t,n){return null!=t?`(${j(e,n)} * ${1-t} / 2)`:k(e)}function N(e,t,n,r){return`${E(e,t,r)} + ${m.xUnits("fit"!==e||n?2:4)}`}function B(e,t,n,r,i,s){const{min:a,max:o,startAngle:d,angleExtent:u,size:h,section:m,isRtl:f,innerRadius:g}=e,p=`calc(${E(h,i,s)})`,x=[],C=t.filter((e=>e.max>a&&e.max<=o)).sort(((e,t)=>e.max-t.max)),R=C.length;for(let e=0;e<R;e++){const t=C[e],i=0===e?a:C[e-1].max,s=0===e?t.max:t.max-C[e-1].max;let h=T(i,a,o,d,u,f),$=w(s,a,o,u);const{startOffset:b,extentOffset:M}=U(g,u,0===e,t.max===o,f),y=l.getClipPath(h+b,$+M,f,m);if(x.push({clipPath:y,color:c.getVisThresholdColor(t.color),size:p,section:m}),e===R-1&&t.max<o&&n){h+=(f?1:-1)*$,$=w(o-t.max,a,o,u);const{startOffset:e,extentOffset:n}=U(g,u,!1,!0,f);x.push({clipPath:l.getClipPath(h+e,$+n,f,m),color:r,size:p,section:m})}}return x}function V(e,t,n,r,i){const{min:s,max:a,startAngle:l,angleExtent:c,size:o,isRtl:d}=e;return{radius:A(o,n,i),length:N(o,n,r,i),angle:T(t.value,s,a,l,c,d),color:t.color}}function D(e,t,n,r,i,s,a){const{startAngle:c,angleExtent:o,size:d,section:u,isRtl:m}=e;return{section:u,color:t?"all"===n&&s?`${h.colorSchemeVars.dvt.contrastLine}`:r:"transparent",clipPath:l.getClipPath(c,o,m,u),size:`calc(${E(d,i,a)})`}}function L(e,t,n,r){const{value:i,min:s,max:a,startAngle:c,angleExtent:o,size:d,section:u,isRtl:h}=e,m=(i-s)*o/(a-s),f=Math.min(Math.max(0,t),1),g="left"===u||"right"===u,p="top"===u||"bottom"===u,x=`calc(${E(d,n,r)} * ${f})`,C=`${j(d,r)} - ((1 - ${f}) * ${E(d,n,r)})`,R=`(${C}) / 2`;return{section:u,width:g?`calc(${R})`:`calc(${C})`,height:p?`calc(${R})`:`calc(${C})`,size:x,clipPath:l.getClipPath(c,m,h,u)}}function U(e,t,n,r,i){if(!e)return{startOffset:0,extentOffset:0};const s=360/(2*Math.PI*e);let a=s/2*(i?1:-1),l=-1*s;return n&&t<360&&(a=0,l=-.5*s),r&&t<360&&(l=-.5*s),{startOffset:a,extentOffset:l}}function q(e,t,n){return"top"===n||"bottom"===n?{height:Math.min(t,e/2),width:2*Math.min(t,e/2)}:"left"===n||"right"===n?{width:Math.min(e,t/2),height:2*Math.min(e,t/2)}:{width:Math.min(e,t),height:Math.min(e,t)}}const O=360,F=.8;function W({max:e=100,min:c=0,value:o=0,step:u=1,size:h="fit",startAngle:m=90,angleExtent:p=360,isTrackRendered:S=!0,thresholdDisplay:w="all",indicatorSize:T=1,testId:j,...k}){const A=$.useTestId(j);a.validateRange(c,e,o,u);const E=k.onCommit||k.onInput,{classes:N,styles:U}=C.useComponentTheme(R.MeterCircleRedwoodTheme,{size:h,interaction:E?"isInteractive":void 0});return t.jsx(d.TrackResizeContainer,{class:N,width:"100%",height:"100%",children:function(d,C){const{direction:R}=n.useUser(),$="rtl"===R;let j=m;$&&(j=180-j);const E=l.getCircleSection(j,p,$),{width:W}=q(d,C,E),K=W<O,_=k.innerRadius||"fit"===h?F:void 0,{width:H,height:X}=function(e,t,n,r,i){return n?"full"===i?{width:e-2*(r?I:P),height:t-2*(r?I:P)}:"top"===i||"bottom"===i?{width:e-2*(r?I:P),height:t-(r?I:P)}:{width:e-(r?I:P),height:t-2*(r?I:P)}:{width:e,height:t}}(d,C,!!k.referenceLines?.length,K,E),{width:Y,height:G}=q(H,X,E),J="full"===E?Math.min(Y,G)/2:Math.min(Y,G),Q=2*J,Z=r.useRef(),ee=r.useRef(y(null,E)),te=r.useRef(null),[ne,re]=r.useState(!1);r.useEffect((()=>{(k.onCommit||k.onInput||k.children)&&(ee.current=y(te.current,E),re(!0))}),[E]);const ie=r.useRef(!1),se=f.usePointerEvents(o,(t=>{const n=te.current;if(t.target==n)return v(t,c,e,u,ee,j,p,E,$)}),te,Z,ie,k.onCommit,k.onInput),ae=g.useKeyboardEvents(o,c,e,u,Z,k.onCommit,k.onInput),{datatipContent:le,datatipProps:ce}=f.useMeterDatatip(o,ie,k.datatip,k["aria-describedby"]),oe=a.getMeterAriaProps(o,c,e,k["aria-label"],k["aria-labelledby"],k.thresholds),de=i.mergeProps(se,ae,ce,oe),{trackColor:ue,indicatorColor:he}=a.getTrackAndIndicatorColor(o,w,k.trackColor,k.indicatorColor,k.thresholds),me={min:c,max:e,value:o,startAngle:j,angleExtent:p,size:h,section:E,isRtl:$,innerRadius:ee.current.innerRadius},{isTabbable:fe}=x.useTabbableMode(),ge=z(ee,E);return t.jsxs(t.Fragment,{children:[t.jsx("div",{class:s.classNames([N,"full"===E?`${U.meterCircleFullSizeStyle}, ${U.centerDiv}`:""]),style:{width:d,height:C},tabIndex:fe?0:-1,...A,...de,children:t.jsxs(b.CircleWrapper,{wrapperRef:te,class:s.classNames([U.circleWrapperBaseStyle,k.referenceLines&&k.referenceLines.length>0?h&&U[`fit${K?"Sm":"Lg"}${E}Style`]:"",U.centerDiv]),width:`${Y}px`,height:`${G}px`,children:[t.jsx(b.CircleInner,{width:`${Y}px`,height:`${G}px`,class:s.classNames([U.circleTrackBaseStyle,U[`${E}Style`]]),...D(me,S,w,ue,_,k.thresholds,Q)}),"all"===w&&k.thresholds&&B(me,k.thresholds,S,ue,_,Q).map((e=>t.jsx(b.CircleInner,{class:s.classNames([U.circleTrackBaseStyle,U[`${E}Style`]]),...e,width:`${Y}px`,height:`${G}px`}))),t.jsx(b.CircleInner,{color:he,class:s.classNames([U.circleValueBaseStyle,U[`circleValue${E}Style`],U[`${E}Style`]]),...L(me,T,_,2*J)}),k.referenceLines?.map((e=>t.jsx(M,{...V(me,e,_,K,Q),section:E}))),ne&&k.children&&ge&&t.jsx("div",{class:s.classNames([U.meterCircleCenterContent]),children:k.children(ge)})]})}),le]})}})}function K({max:e=100,min:c=0,value:o=0,step:d=1,size:u,startAngle:h=90,angleExtent:m=360,isTrackRendered:p=!0,thresholdDisplay:S="all",indicatorSize:w=1,testId:T,...I}){const P=$.useTestId(T);a.validateRange(c,e,o,d);const j=r.useRef(),{direction:k}=n.useUser(),A="rtl"===k;let E=h;A&&(E=180-E);const N=l.getCircleSection(E,m,A),U=r.useRef(y(null,N)),q=r.useRef(null),[O,F]=r.useState(!1);r.useEffect((()=>{(I.onCommit||I.onInput||I.children)&&(U.current=y(q.current,N),F(!0))}),[u,N,I.onCommit,I.onInput,I.children]);const W=r.useRef(!1),K=f.usePointerEvents(o,(t=>{const n=q.current;if(t.target==n)return v(t,c,e,d,U,E,m,N,A)}),q,j,W,I.onCommit,I.onInput),_=g.useKeyboardEvents(o,c,e,d,j,I.onCommit,I.onInput),{datatipContent:H,datatipProps:X}=f.useMeterDatatip(o,W,I.datatip,I["aria-describedby"]),Y=a.getMeterAriaProps(o,c,e,I["aria-label"],I["aria-labelledby"],I.thresholds),G=i.mergeProps(K,_,X,Y),{trackColor:J,indicatorColor:Q}=a.getTrackAndIndicatorColor(o,S,I.trackColor,I.indicatorColor,I.thresholds),Z="bottom"===N||"top"===N?"Horizontal":"left"===N||"right"===N?"Vertical":"Full",ee={min:c,max:e,value:o,startAngle:E,angleExtent:m,size:u,section:N,isRtl:A,innerRadius:U.current.innerRadius},te=I.onCommit||I.onInput,{classes:ne,styles:re}=C.useComponentTheme(R.MeterCircleRedwoodTheme,{size:u,interaction:te?"isInteractive":void 0}),{isTabbable:ie}=x.useTabbableMode(),se=z(U,N);return t.jsxs(t.Fragment,{children:[t.jsx("div",{class:s.classNames([ne]),tabIndex:ie?0:-1,...P,...G,children:t.jsxs(b.CircleWrapper,{wrapperRef:q,class:s.classNames([re.circleWrapperBaseStyle,I.referenceLines&&I.referenceLines.length>0?u&&re[`${u}${N}Style`]:"",re[`meterCircle${Z}SizeStyle`]]),children:[t.jsx(b.CircleInner,{class:s.classNames([re.circleTrackBaseStyle,re[`${N}Style`]]),...D(ee,p,S,J,I.innerRadius,I.thresholds)}),"all"===S&&I.thresholds&&B(ee,I.thresholds,p,J,I.innerRadius).map((e=>t.jsx(b.CircleInner,{class:s.classNames([re.circleTrackBaseStyle,re[`${N}Style`]]),...e}))),t.jsx(b.CircleInner,{color:Q,class:s.classNames([re.circleValueBaseStyle,re[`circleValue${N}Style`],re[`${N}Style`]]),...L(ee,w,I.innerRadius)}),I.referenceLines?.map((e=>t.jsx(M,{...V(ee,e,I.innerRadius),section:N}))),O&&I.children&&se&&t.jsx("div",{class:s.classNames([re.meterCircleCenterContent]),children:I.children(se)})]})}),H]})}e.MeterCircle=function({size:e,max:n=100,min:r=0,value:i=0,step:s=1,startAngle:a=90,angleExtent:l=360,isTrackRendered:c=!0,thresholdDisplay:o="all",indicatorSize:d=1,...u}){return"fit"===e?t.jsx(W,{min:r,value:i,max:n,step:s,startAngle:a,angleExtent:l,isTrackRendered:c,thresholdDisplay:o,indicatorSize:d,...u}):t.jsx(K,{size:e||"lg",min:r,value:i,max:n,step:s,startAngle:a,angleExtent:l,isTrackRendered:c,thresholdDisplay:o,indicatorSize:d,...u})}}));
|
|
2
2
|
//# sourceMappingURL=MeterCircle-f1561632.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', 'preact/compat', './Layer-
|
|
2
|
-
//# sourceMappingURL=Modal-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/compat', './Layer-3cc44164', './LayerHost-eab40731', './UNSAFE_Modal/themes/ModalStyles.css'], (function(e,t,r,n,o,s){"use strict";const a=e=>{const{isOpen:t,onBackdropClick:n}=e,o=r.useRef(null),s=r.useRef(null),a=r.useCallback((e=>{o.current===e.target&&(s.current=e.target)}),[]),l=r.useCallback((e=>{o.current===e.target&&(e.stopPropagation(),s.current===e.target&&n?.(e))}),[n]);return r.useEffect((()=>{const e=o.current;return e?(e.addEventListener("mousedown",a),e.addEventListener("click",l),()=>{e.removeEventListener("mousedown",a),e.removeEventListener("click",l)}):()=>{}}),[t,a,l]),{backdropRef:o}},l=r.forwardRef((({variant:e="scrim"},r)=>{const n=s.multiVariantStyles({backdrop:"transparent"===e?"transparent":"scrim"});return t.jsx("div",{ref:r,class:n})}));function i(e){const t=[];let r=e.previousSibling;for(;null!=r;)1===r.nodeType&&t.push(r),r=r.previousSibling;for(r=e.nextSibling;null!=r;)1===r.nodeType&&t.push(r),r=r.nextSibling;return t}function d(e){if(!e.modalRef)return[];const t=[];let r=e.modalRef.parentElement;do{if(!r)break;i(r).forEach((e=>{"script"!==e.tagName.toLowerCase()&&"true"!==e.getAttribute("aria-hidden")&&(t.push(e),e.setAttribute("aria-hidden","true"))})),r=r.parentElement}while(r&&"body"!==r.tagName.toLowerCase());return t}const u=new class{constructor(){this.modals=[],this.styleBackup=[]}push(e){if(-1===this._findModalIndex(e)&&(this.modals.push({modal:e,ariaHiddenChildren:d(e)}),1===this.modals.length)){const t=this._getOwnerDocument(e.modalRef).body,r=window.innerWidth-document.documentElement.clientWidth;if(r>1){Math.round(document.documentElement.getBoundingClientRect().left)+document.documentElement.scrollLeft?(this.styleBackup.push({property:"padding-left",value:t.style.paddingLeft}),t.style.paddingLeft=`${r}px`):(this.styleBackup.push({property:"padding-right",value:t.style.paddingRight}),t.style.paddingRight=`${r}px`)}this.styleBackup.push({property:"overflow",value:t.style.overflow}),this.styleBackup.push({property:"overflow-x",value:t.style.overflowX}),this.styleBackup.push({property:"overflow-y",value:t.style.overflowY}),t.style.overflow="hidden"}}pop(e){const t=this._findModalIndex(e);if(-1===t)return;if(t!==this.modals.length-1)return;const r=this.modals.pop();var n;if(r&&(n=r?.ariaHiddenChildren,n.forEach((e=>{e.removeAttribute("aria-hidden")}))),0===this.modals.length){const t=this._getOwnerDocument(e.modalRef).body;this.styleBackup.forEach((({property:e,value:r})=>{t.style.setProperty(e,r)}))}}isTopModal(e){return this.modals.length>0&&this.modals[this.modals.length-1]===e}_findModalIndex(e){let t=-1;return this.modals.forEach(((r,n)=>{r.modal!==e||(t=n)})),t}_getOwnerDocument(e){return e&&e.ownerDocument||document}};e.Modal=({children:e,isOpen:o,onBackdropClick:i,backdropVariant:d})=>{const c=u,{backdropRef:p}=a({isOpen:o,onBackdropClick:i}),h=r.useRef(null),f=r.useRef({}),m=()=>(f.current.modalRef=h.current,f.current);return r.useEffect((()=>{o&&h.current?c?.push(m()):f.current.modalRef&&c?.pop(m())}),[o,c]),r.useEffect((()=>{const e=f.current.modalRef;return()=>{e&&c?.pop(m())}}),[c]),o?t.jsx(n.Layer,{children:t.jsxs("div",{ref:h,class:s.baseStyle,children:[t.jsx(l,{ref:p,variant:d}),e]})}):null},e.useModal=a}));
|
|
2
|
+
//# sourceMappingURL=Modal-8c095bea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal-8f19889c.js","sources":["../../src/UNSAFE_Modal/hooks/useModal.ts","../../src/UNSAFE_Modal/ModalBackdrop.tsx","../../src/UNSAFE_Modal/ModalManager.ts","../../src/UNSAFE_Modal/Modal.tsx"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'preact/compat';\n\nexport type UseModalProps = Readonly<{\n /**\n * Determines whether the Modal is open.\n */\n isOpen: boolean;\n /**\n * On backdrop click callback.\n */\n onBackdropClick?: (event: MouseEvent) => void;\n}>;\n\n/**\n *\n * @param props\n */\nexport const useModal = (props: UseModalProps) => {\n const { isOpen, onBackdropClick: onBackdropClickProp } = props;\n\n const backdropRef = useRef<HTMLDivElement>(null);\n\n const mouseDownTarget = useRef<EventTarget | null>(null);\n\n const onMouseDown = useCallback((event: MouseEvent) => {\n if (backdropRef.current === event.target) {\n mouseDownTarget.current = event.target;\n }\n }, []);\n\n const onBackdropClick = useCallback(\n (event: MouseEvent) => {\n if (backdropRef.current === event.target) {\n event.stopPropagation();\n // event should originate on the same target\n if (mouseDownTarget.current === event.target) {\n onBackdropClickProp?.(event);\n }\n }\n },\n [onBackdropClickProp]\n );\n\n useEffect(() => {\n const modal = backdropRef.current;\n\n if (modal) {\n modal.addEventListener('mousedown', onMouseDown);\n modal.addEventListener('click', onBackdropClick);\n\n return () => {\n modal.removeEventListener('mousedown', onMouseDown);\n modal.removeEventListener('click', onBackdropClick);\n };\n }\n\n return () => {};\n }, [isOpen, onMouseDown, onBackdropClick]);\n\n return {\n backdropRef\n };\n};\n\nexport default useModal;\n","import { forwardRef, ForwardedRef } from 'preact/compat';\nimport { multiVariantStyles } from './themes/ModalStyles.css';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\n\ntype Props = IntrinsicProps & {\n /**\n * Specifies the backdrop is visible or transparent. Default is 'scrim' (visible).\n */\n variant?: 'scrim' | 'transparent';\n};\n\nconst ModalBackdrop = forwardRef<HTMLDivElement, Props>(\n ({ variant = 'scrim' }, ref: ForwardedRef<HTMLDivElement | null>) => {\n const variantClasses = multiVariantStyles({\n backdrop: variant === 'transparent' ? 'transparent' : 'scrim'\n });\n\n return <div ref={ref} class={variantClasses} />;\n }\n);\n\nexport default ModalBackdrop;\n","interface Modal {\n modalRef?: HTMLDivElement | null;\n}\n\n/**\n * CSS property backup type.\n */\ntype StyleBackup = Array<{\n property: string;\n value: string;\n}>;\n\n/**\n * ModalDescriptor. Associates an open Modal with overlayed aria-hidden children.\n */\ntype ModalDescriptor = {\n modal: Modal;\n ariaHiddenChildren: Element[];\n};\n\n/**\n * Returns an array of element's siblings.\n *\n * @param elem\n * @returns\n */\nfunction getSiblings(elem: Element): Element[] {\n const siblings: Element[] = [];\n let sibling = elem.previousSibling;\n while (sibling != null) {\n if (sibling.nodeType === 1) {\n siblings.push(sibling as Element);\n }\n sibling = sibling.previousSibling;\n }\n sibling = elem.nextSibling;\n while (sibling != null) {\n if (sibling.nodeType === 1) {\n siblings.push(sibling as Element);\n }\n sibling = sibling.nextSibling;\n }\n return siblings;\n}\n\n/**\n * Sets aria-hidden=true on Modal ancestors and siblings.\n *\n * @param modal\n * @returns An array of modified elements.\n */\nfunction setAriaHiddenOnBackgroundElements(modal: Modal) {\n if (!modal.modalRef) {\n return [];\n }\n const ariaHiddenElements: Element[] = [];\n let node: Element | null = modal.modalRef.parentElement as Element;\n\n do {\n if (!node) {\n break;\n }\n const siblings = getSiblings(node);\n siblings.forEach((elem: Element) => {\n if (elem.tagName.toLowerCase() !== 'script' && elem.getAttribute('aria-hidden') !== 'true') {\n ariaHiddenElements.push(elem);\n elem.setAttribute('aria-hidden', 'true');\n }\n });\n node = node.parentElement;\n } while (node && node.tagName.toLowerCase() !== 'body');\n\n return ariaHiddenElements;\n}\n\n/**\n * Resets the aria-hidden state on previously aria-hidden elements.\n *\n * @param elements\n */\nfunction resetAriaHiddenOnBackgroundElements(elements: Element[]) {\n elements.forEach((elem) => {\n elem.removeAttribute('aria-hidden');\n });\n}\n\nexport default class ModalManager {\n /**\n * Array of ModalDescriptors managed by ModalManager\n */\n private modals: ModalDescriptor[];\n /**\n * Backup of the main container's (body) CSS props potentially altered by Modal.\n */\n private styleBackup: StyleBackup;\n\n constructor() {\n this.modals = [];\n this.styleBackup = [];\n }\n\n /**\n * Registers a modal with ModalManager\n *\n * @param modal\n * @returns\n */\n push(modal: Modal) {\n const modalIndex = this._findModalIndex(modal);\n\n if (modalIndex !== -1) {\n // Do not try to register the same modal multiple times\n return;\n }\n\n this.modals.push({\n modal: modal,\n ariaHiddenChildren: setAriaHiddenOnBackgroundElements(modal)\n });\n\n // if this is the first modal in the container, block container scrolling\n if (this.modals.length === 1) {\n const ownerDocument = this._getOwnerDocument(modal.modalRef);\n const scrollContainer = ownerDocument.body;\n\n const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;\n if (scrollBarWidth > 1) {\n // in RTL, scrollbar is on the left\n const scrollBarLeft =\n Math.round(document.documentElement.getBoundingClientRect().left) +\n document.documentElement.scrollLeft;\n\n if (scrollBarLeft) {\n this.styleBackup.push({\n property: 'padding-left',\n value: scrollContainer.style.paddingLeft\n });\n scrollContainer.style.paddingLeft = `${scrollBarWidth}px`;\n } else {\n this.styleBackup.push({\n property: 'padding-right',\n value: scrollContainer.style.paddingRight\n });\n scrollContainer.style.paddingRight = `${scrollBarWidth}px`;\n }\n }\n\n this.styleBackup.push({ property: 'overflow', value: scrollContainer.style.overflow });\n this.styleBackup.push({ property: 'overflow-x', value: scrollContainer.style.overflowX });\n this.styleBackup.push({ property: 'overflow-y', value: scrollContainer.style.overflowY });\n\n scrollContainer.style.overflow = 'hidden';\n }\n }\n\n /**\n * Unegisters a modal from ModalManager\n *\n * @param modal\n * @returns\n */\n pop(modal: Modal) {\n const modalIndex = this._findModalIndex(modal);\n\n if (modalIndex === -1) {\n // modal to be removed not found!'\n return;\n }\n\n if (modalIndex !== this.modals.length - 1) {\n // trying to remove modal out of order!\n return;\n }\n\n const modalDescriptor = this.modals.pop();\n\n if (modalDescriptor) {\n resetAriaHiddenOnBackgroundElements(modalDescriptor?.ariaHiddenChildren);\n }\n\n // if this was the last modal in the container, restore its overflow props\n if (this.modals.length === 0) {\n const ownerDocument = this._getOwnerDocument(modal.modalRef);\n const scrollContainer = ownerDocument.body;\n\n this.styleBackup.forEach(({ property, value }) => {\n scrollContainer.style.setProperty(property, value);\n });\n }\n }\n\n isTopModal(modal: Modal): boolean {\n return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;\n }\n\n private _findModalIndex(modal: Modal): number {\n let index = -1;\n this.modals.forEach((elem, idx) => {\n if (elem.modal === modal) {\n index = idx;\n return;\n }\n });\n return index;\n }\n\n private _getOwnerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n }\n}\n","import { useEffect, useRef } from 'preact/compat';\nimport { useModal } from './hooks/useModal';\nimport { Layer } from '../UNSAFE_Layer';\nimport ModalBackdrop from './ModalBackdrop';\nimport ModalManager from './ModalManager';\nimport { baseStyle } from './themes/ModalStyles.css';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\n// Global ModalManager singleton instance\nconst globalModalManager = new ModalManager();\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype UseModalProps = Parameters<typeof useModal>[0];\ntype Props = UseModalProps &\n IntrinsicProps & {\n /**\n * Determines if the modal is active.\n */\n isOpen: boolean;\n /**\n * Specifies if modal backdrop is visible or transparent. Default is 'scrim' (visible).\n */\n backdropVariant?: 'scrim' | 'transparent';\n /**\n * A callback to be invoked when a click on the modal backdrop occurs.\n */\n onBackdropClick?: (event: MouseEvent) => void;\n };\n\n/**\n * Modal is a low-level component that provides the 'modality' feature with built-in overlay (scrim).\n * It is typically used for building higher-level components (such as 'Dialog' or 'Popup') that need\n * to support modal behavior preventing interaction with the rest of the page while the modal is open.\n */\nconst Modal = ({ children, isOpen, onBackdropClick, backdropVariant }: Props) => {\n // get the global ModalContext instance\n const modalManager = globalModalManager;\n\n const { backdropRef } = useModal({ isOpen, onBackdropClick });\n // main modal element ref\n const modalRef = useRef<HTMLDivElement>(null);\n\n // modal ref cache, required to lookup the item in modal manger when the actual ref is unmounted\n const modal = useRef<{\n modalRef?: typeof modalRef.current;\n }>({});\n\n // populates and returns the modal ref cache\n const getModal = () => {\n modal.current.modalRef = modalRef.current;\n return modal.current;\n };\n\n useEffect(() => {\n if (isOpen && modalRef.current) {\n modalManager?.push(getModal());\n } else {\n if (modal.current.modalRef) {\n modalManager?.pop(getModal());\n }\n }\n }, [isOpen, modalManager]);\n\n useEffect(() => {\n const modalRef = modal.current.modalRef;\n return () => {\n if (modalRef) {\n modalManager?.pop(getModal());\n }\n };\n }, [modalManager]);\n\n return isOpen ? (\n <Layer>\n <div ref={modalRef} class={baseStyle}>\n <ModalBackdrop ref={backdropRef} variant={backdropVariant} />\n {children}\n </div>\n </Layer>\n ) : null;\n};\n\nexport default Modal;\n"],"names":["useModal","props","isOpen","onBackdropClick","onBackdropClickProp","backdropRef","useRef","mouseDownTarget","onMouseDown","useCallback","event","current","target","stopPropagation","useEffect","modal","addEventListener","removeEventListener","ModalBackdrop","forwardRef","variant","ref","variantClasses","multiVariantStyles","backdrop","_jsx","class","getSiblings","elem","siblings","sibling","previousSibling","nodeType","push","nextSibling","setAriaHiddenOnBackgroundElements","modalRef","ariaHiddenElements","node","parentElement","forEach","tagName","toLowerCase","getAttribute","setAttribute","globalModalManager","constructor","this","modals","styleBackup","_findModalIndex","ariaHiddenChildren","length","scrollContainer","_getOwnerDocument","body","scrollBarWidth","window","innerWidth","document","documentElement","clientWidth","Math","round","getBoundingClientRect","left","scrollLeft","property","value","style","paddingLeft","paddingRight","overflow","overflowX","overflowY","pop","modalIndex","modalDescriptor","elements","removeAttribute","setProperty","isTopModal","index","idx","ownerDocument","children","backdropVariant","modalManager","getModal","Layer","_jsxs","baseStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal-8c095bea.js","sources":["../../src/UNSAFE_Modal/hooks/useModal.ts","../../src/UNSAFE_Modal/ModalBackdrop.tsx","../../src/UNSAFE_Modal/ModalManager.ts","../../src/UNSAFE_Modal/Modal.tsx"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'preact/compat';\n\nexport type UseModalProps = Readonly<{\n /**\n * Determines whether the Modal is open.\n */\n isOpen: boolean;\n /**\n * On backdrop click callback.\n */\n onBackdropClick?: (event: MouseEvent) => void;\n}>;\n\n/**\n *\n * @param props\n */\nexport const useModal = (props: UseModalProps) => {\n const { isOpen, onBackdropClick: onBackdropClickProp } = props;\n\n const backdropRef = useRef<HTMLDivElement>(null);\n\n const mouseDownTarget = useRef<EventTarget | null>(null);\n\n const onMouseDown = useCallback((event: MouseEvent) => {\n if (backdropRef.current === event.target) {\n mouseDownTarget.current = event.target;\n }\n }, []);\n\n const onBackdropClick = useCallback(\n (event: MouseEvent) => {\n if (backdropRef.current === event.target) {\n event.stopPropagation();\n // event should originate on the same target\n if (mouseDownTarget.current === event.target) {\n onBackdropClickProp?.(event);\n }\n }\n },\n [onBackdropClickProp]\n );\n\n useEffect(() => {\n const modal = backdropRef.current;\n\n if (modal) {\n modal.addEventListener('mousedown', onMouseDown);\n modal.addEventListener('click', onBackdropClick);\n\n return () => {\n modal.removeEventListener('mousedown', onMouseDown);\n modal.removeEventListener('click', onBackdropClick);\n };\n }\n\n return () => {};\n }, [isOpen, onMouseDown, onBackdropClick]);\n\n return {\n backdropRef\n };\n};\n\nexport default useModal;\n","import { forwardRef, ForwardedRef } from 'preact/compat';\nimport { multiVariantStyles } from './themes/ModalStyles.css';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\n\ntype Props = IntrinsicProps & {\n /**\n * Specifies the backdrop is visible or transparent. Default is 'scrim' (visible).\n */\n variant?: 'scrim' | 'transparent';\n};\n\nconst ModalBackdrop = forwardRef<HTMLDivElement, Props>(\n ({ variant = 'scrim' }, ref: ForwardedRef<HTMLDivElement | null>) => {\n const variantClasses = multiVariantStyles({\n backdrop: variant === 'transparent' ? 'transparent' : 'scrim'\n });\n\n return <div ref={ref} class={variantClasses} />;\n }\n);\n\nexport default ModalBackdrop;\n","interface Modal {\n modalRef?: HTMLDivElement | null;\n}\n\n/**\n * CSS property backup type.\n */\ntype StyleBackup = Array<{\n property: string;\n value: string;\n}>;\n\n/**\n * ModalDescriptor. Associates an open Modal with overlayed aria-hidden children.\n */\ntype ModalDescriptor = {\n modal: Modal;\n ariaHiddenChildren: Element[];\n};\n\n/**\n * Returns an array of element's siblings.\n *\n * @param elem\n * @returns\n */\nfunction getSiblings(elem: Element): Element[] {\n const siblings: Element[] = [];\n let sibling = elem.previousSibling;\n while (sibling != null) {\n if (sibling.nodeType === 1) {\n siblings.push(sibling as Element);\n }\n sibling = sibling.previousSibling;\n }\n sibling = elem.nextSibling;\n while (sibling != null) {\n if (sibling.nodeType === 1) {\n siblings.push(sibling as Element);\n }\n sibling = sibling.nextSibling;\n }\n return siblings;\n}\n\n/**\n * Sets aria-hidden=true on Modal ancestors and siblings.\n *\n * @param modal\n * @returns An array of modified elements.\n */\nfunction setAriaHiddenOnBackgroundElements(modal: Modal) {\n if (!modal.modalRef) {\n return [];\n }\n const ariaHiddenElements: Element[] = [];\n let node: Element | null = modal.modalRef.parentElement as Element;\n\n do {\n if (!node) {\n break;\n }\n const siblings = getSiblings(node);\n siblings.forEach((elem: Element) => {\n if (elem.tagName.toLowerCase() !== 'script' && elem.getAttribute('aria-hidden') !== 'true') {\n ariaHiddenElements.push(elem);\n elem.setAttribute('aria-hidden', 'true');\n }\n });\n node = node.parentElement;\n } while (node && node.tagName.toLowerCase() !== 'body');\n\n return ariaHiddenElements;\n}\n\n/**\n * Resets the aria-hidden state on previously aria-hidden elements.\n *\n * @param elements\n */\nfunction resetAriaHiddenOnBackgroundElements(elements: Element[]) {\n elements.forEach((elem) => {\n elem.removeAttribute('aria-hidden');\n });\n}\n\nexport default class ModalManager {\n /**\n * Array of ModalDescriptors managed by ModalManager\n */\n private modals: ModalDescriptor[];\n /**\n * Backup of the main container's (body) CSS props potentially altered by Modal.\n */\n private styleBackup: StyleBackup;\n\n constructor() {\n this.modals = [];\n this.styleBackup = [];\n }\n\n /**\n * Registers a modal with ModalManager\n *\n * @param modal\n * @returns\n */\n push(modal: Modal) {\n const modalIndex = this._findModalIndex(modal);\n\n if (modalIndex !== -1) {\n // Do not try to register the same modal multiple times\n return;\n }\n\n this.modals.push({\n modal: modal,\n ariaHiddenChildren: setAriaHiddenOnBackgroundElements(modal)\n });\n\n // if this is the first modal in the container, block container scrolling\n if (this.modals.length === 1) {\n const ownerDocument = this._getOwnerDocument(modal.modalRef);\n const scrollContainer = ownerDocument.body;\n\n const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;\n if (scrollBarWidth > 1) {\n // in RTL, scrollbar is on the left\n const scrollBarLeft =\n Math.round(document.documentElement.getBoundingClientRect().left) +\n document.documentElement.scrollLeft;\n\n if (scrollBarLeft) {\n this.styleBackup.push({\n property: 'padding-left',\n value: scrollContainer.style.paddingLeft\n });\n scrollContainer.style.paddingLeft = `${scrollBarWidth}px`;\n } else {\n this.styleBackup.push({\n property: 'padding-right',\n value: scrollContainer.style.paddingRight\n });\n scrollContainer.style.paddingRight = `${scrollBarWidth}px`;\n }\n }\n\n this.styleBackup.push({ property: 'overflow', value: scrollContainer.style.overflow });\n this.styleBackup.push({ property: 'overflow-x', value: scrollContainer.style.overflowX });\n this.styleBackup.push({ property: 'overflow-y', value: scrollContainer.style.overflowY });\n\n scrollContainer.style.overflow = 'hidden';\n }\n }\n\n /**\n * Unegisters a modal from ModalManager\n *\n * @param modal\n * @returns\n */\n pop(modal: Modal) {\n const modalIndex = this._findModalIndex(modal);\n\n if (modalIndex === -1) {\n // modal to be removed not found!'\n return;\n }\n\n if (modalIndex !== this.modals.length - 1) {\n // trying to remove modal out of order!\n return;\n }\n\n const modalDescriptor = this.modals.pop();\n\n if (modalDescriptor) {\n resetAriaHiddenOnBackgroundElements(modalDescriptor?.ariaHiddenChildren);\n }\n\n // if this was the last modal in the container, restore its overflow props\n if (this.modals.length === 0) {\n const ownerDocument = this._getOwnerDocument(modal.modalRef);\n const scrollContainer = ownerDocument.body;\n\n this.styleBackup.forEach(({ property, value }) => {\n scrollContainer.style.setProperty(property, value);\n });\n }\n }\n\n isTopModal(modal: Modal): boolean {\n return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;\n }\n\n private _findModalIndex(modal: Modal): number {\n let index = -1;\n this.modals.forEach((elem, idx) => {\n if (elem.modal === modal) {\n index = idx;\n return;\n }\n });\n return index;\n }\n\n private _getOwnerDocument(node: Node | null | undefined): Document {\n return (node && node.ownerDocument) || document;\n }\n}\n","import { useEffect, useRef } from 'preact/compat';\nimport { useModal } from './hooks/useModal';\nimport { Layer } from '../UNSAFE_Layer';\nimport ModalBackdrop from './ModalBackdrop';\nimport ModalManager from './ModalManager';\nimport { baseStyle } from './themes/ModalStyles.css';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\n// Global ModalManager singleton instance\nconst globalModalManager = new ModalManager();\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype UseModalProps = Parameters<typeof useModal>[0];\ntype Props = UseModalProps &\n IntrinsicProps & {\n /**\n * Determines if the modal is active.\n */\n isOpen: boolean;\n /**\n * Specifies if modal backdrop is visible or transparent. Default is 'scrim' (visible).\n */\n backdropVariant?: 'scrim' | 'transparent';\n /**\n * A callback to be invoked when a click on the modal backdrop occurs.\n */\n onBackdropClick?: (event: MouseEvent) => void;\n };\n\n/**\n * Modal is a low-level component that provides the 'modality' feature with built-in overlay (scrim).\n * It is typically used for building higher-level components (such as 'Dialog' or 'Popup') that need\n * to support modal behavior preventing interaction with the rest of the page while the modal is open.\n */\nconst Modal = ({ children, isOpen, onBackdropClick, backdropVariant }: Props) => {\n // get the global ModalContext instance\n const modalManager = globalModalManager;\n\n const { backdropRef } = useModal({ isOpen, onBackdropClick });\n // main modal element ref\n const modalRef = useRef<HTMLDivElement>(null);\n\n // modal ref cache, required to lookup the item in modal manger when the actual ref is unmounted\n const modal = useRef<{\n modalRef?: typeof modalRef.current;\n }>({});\n\n // populates and returns the modal ref cache\n const getModal = () => {\n modal.current.modalRef = modalRef.current;\n return modal.current;\n };\n\n useEffect(() => {\n if (isOpen && modalRef.current) {\n modalManager?.push(getModal());\n } else {\n if (modal.current.modalRef) {\n modalManager?.pop(getModal());\n }\n }\n }, [isOpen, modalManager]);\n\n useEffect(() => {\n const modalRef = modal.current.modalRef;\n return () => {\n if (modalRef) {\n modalManager?.pop(getModal());\n }\n };\n }, [modalManager]);\n\n return isOpen ? (\n <Layer>\n <div ref={modalRef} class={baseStyle}>\n <ModalBackdrop ref={backdropRef} variant={backdropVariant} />\n {children}\n </div>\n </Layer>\n ) : null;\n};\n\nexport default Modal;\n"],"names":["useModal","props","isOpen","onBackdropClick","onBackdropClickProp","backdropRef","useRef","mouseDownTarget","onMouseDown","useCallback","event","current","target","stopPropagation","useEffect","modal","addEventListener","removeEventListener","ModalBackdrop","forwardRef","variant","ref","variantClasses","multiVariantStyles","backdrop","_jsx","class","getSiblings","elem","siblings","sibling","previousSibling","nodeType","push","nextSibling","setAriaHiddenOnBackgroundElements","modalRef","ariaHiddenElements","node","parentElement","forEach","tagName","toLowerCase","getAttribute","setAttribute","globalModalManager","constructor","this","modals","styleBackup","_findModalIndex","ariaHiddenChildren","length","scrollContainer","_getOwnerDocument","body","scrollBarWidth","window","innerWidth","document","documentElement","clientWidth","Math","round","getBoundingClientRect","left","scrollLeft","property","value","style","paddingLeft","paddingRight","overflow","overflowX","overflowY","pop","modalIndex","modalDescriptor","elements","removeAttribute","setProperty","isTopModal","index","idx","ownerDocument","children","backdropVariant","modalManager","getModal","Layer","_jsxs","baseStyle"],"mappings":"8KAiBa,MAAAA,EAAYC,IACvB,MAAMC,OAAEA,EAAQC,gBAAiBC,GAAwBH,EAEnDI,EAAcC,SAAuB,MAErCC,EAAkBD,SAA2B,MAE7CE,EAAcC,eAAaC,IAC3BL,EAAYM,UAAYD,EAAME,SAChCL,EAAgBI,QAAUD,EAAME,OACjC,GACA,IAEGT,EAAkBM,eACrBC,IACKL,EAAYM,UAAYD,EAAME,SAChCF,EAAMG,kBAEFN,EAAgBI,UAAYD,EAAME,QACpCR,IAAsBM,GAEzB,GAEH,CAACN,IAmBH,OAhBAU,EAAAA,WAAU,KACR,MAAMC,EAAQV,EAAYM,QAE1B,OAAII,GACFA,EAAMC,iBAAiB,YAAaR,GACpCO,EAAMC,iBAAiB,QAASb,GAEzB,KACLY,EAAME,oBAAoB,YAAaT,GACvCO,EAAME,oBAAoB,QAASd,EAAgB,GAIhD,MAAQ,GACd,CAACD,EAAQM,EAAaL,IAElB,CACLE,cACD,EChDGa,EAAgBC,EAAUA,YAC9B,EAAGC,UAAU,SAAWC,KACtB,MAAMC,EAAiBC,EAAAA,mBAAmB,CACxCC,SAAsB,gBAAZJ,EAA4B,cAAgB,UAGxD,OAAOK,EAAAA,IAAA,MAAA,CAAKJ,IAAKA,EAAKK,MAAOJ,GAAkB,ICOnD,SAASK,EAAYC,GACnB,MAAMC,EAAsB,GAC5B,IAAIC,EAAUF,EAAKG,gBACnB,KAAkB,MAAXD,GACoB,IAArBA,EAAQE,UACVH,EAASI,KAAKH,GAEhBA,EAAUA,EAAQC,gBAGpB,IADAD,EAAUF,EAAKM,YACG,MAAXJ,GACoB,IAArBA,EAAQE,UACVH,EAASI,KAAKH,GAEhBA,EAAUA,EAAQI,YAEpB,OAAOL,CACT,CAQA,SAASM,EAAkCpB,GACzC,IAAKA,EAAMqB,SACT,MAAO,GAET,MAAMC,EAAgC,GACtC,IAAIC,EAAuBvB,EAAMqB,SAASG,cAE1C,EAAG,CACD,IAAKD,EACH,MAEeX,EAAYW,GACpBE,SAASZ,IACmB,WAA/BA,EAAKa,QAAQC,eAAmE,SAArCd,EAAKe,aAAa,iBAC/DN,EAAmBJ,KAAKL,GACxBA,EAAKgB,aAAa,cAAe,QAClC,IAEHN,EAAOA,EAAKC,aACb,OAAQD,GAAuC,SAA/BA,EAAKG,QAAQC,eAE9B,OAAOL,CACT,CChEA,MAAMQ,EAAqB,ID6Eb,MAUZ,WAAAC,GACEC,KAAKC,OAAS,GACdD,KAAKE,YAAc,EACpB,CAQD,IAAAhB,CAAKlB,GAGH,IAAoB,IAFDgC,KAAKG,gBAAgBnC,KAOxCgC,KAAKC,OAAOf,KAAK,CACflB,MAAOA,EACPoC,mBAAoBhB,EAAkCpB,KAI7B,IAAvBgC,KAAKC,OAAOI,QAAc,CAC5B,MACMC,EADgBN,KAAKO,kBAAkBvC,EAAMqB,UACbmB,KAEhCC,EAAiBC,OAAOC,WAAaC,SAASC,gBAAgBC,YACpE,GAAIL,EAAiB,EAAG,CAGpBM,KAAKC,MAAMJ,SAASC,gBAAgBI,wBAAwBC,MAC5DN,SAASC,gBAAgBM,YAGzBnB,KAAKE,YAAYhB,KAAK,CACpBkC,SAAU,eACVC,MAAOf,EAAgBgB,MAAMC,cAE/BjB,EAAgBgB,MAAMC,YAAc,GAAGd,QAEvCT,KAAKE,YAAYhB,KAAK,CACpBkC,SAAU,gBACVC,MAAOf,EAAgBgB,MAAME,eAE/BlB,EAAgBgB,MAAME,aAAe,GAAGf,MAE3C,CAEDT,KAAKE,YAAYhB,KAAK,CAAEkC,SAAU,WAAYC,MAAOf,EAAgBgB,MAAMG,WAC3EzB,KAAKE,YAAYhB,KAAK,CAAEkC,SAAU,aAAcC,MAAOf,EAAgBgB,MAAMI,YAC7E1B,KAAKE,YAAYhB,KAAK,CAAEkC,SAAU,aAAcC,MAAOf,EAAgBgB,MAAMK,YAE7ErB,EAAgBgB,MAAMG,SAAW,QAClC,CACF,CAQD,GAAAG,CAAI5D,GACF,MAAM6D,EAAa7B,KAAKG,gBAAgBnC,GAExC,IAAoB,IAAhB6D,EAEF,OAGF,GAAIA,IAAe7B,KAAKC,OAAOI,OAAS,EAEtC,OAGF,MAAMyB,EAAkB9B,KAAKC,OAAO2B,MA9FxC,IAA6CG,EAqGzC,GALID,IAhGqCC,EAiGHD,GAAiB1B,mBAhGzD2B,EAAStC,SAASZ,IAChBA,EAAKmD,gBAAgB,cAAc,KAmGR,IAAvBhC,KAAKC,OAAOI,OAAc,CAC5B,MACMC,EADgBN,KAAKO,kBAAkBvC,EAAMqB,UACbmB,KAEtCR,KAAKE,YAAYT,SAAQ,EAAG2B,WAAUC,YACpCf,EAAgBgB,MAAMW,YAAYb,EAAUC,EAAM,GAErD,CACF,CAED,UAAAa,CAAWlE,GACT,OAAOgC,KAAKC,OAAOI,OAAS,GAAKL,KAAKC,OAAOD,KAAKC,OAAOI,OAAS,KAAOrC,CAC1E,CAEO,eAAAmC,CAAgBnC,GACtB,IAAImE,GAAS,EAOb,OANAnC,KAAKC,OAAOR,SAAQ,CAACZ,EAAMuD,KACrBvD,EAAKb,QAAUA,IACjBmE,EAAQC,EAET,IAEID,CACR,CAEO,iBAAA5B,CAAkBhB,GACxB,OAAQA,GAAQA,EAAK8C,eAAkBzB,QACxC,WC9KW,EAAG0B,WAAUnF,SAAQC,kBAAiBmF,sBAElD,MAAMC,EAAe1C,GAEfxC,YAAEA,GAAgBL,EAAS,CAAEE,SAAQC,oBAErCiC,EAAW9B,SAAuB,MAGlCS,EAAQT,SAEX,CAAA,GAGGkF,EAAW,KACfzE,EAAMJ,QAAQyB,SAAWA,EAASzB,QAC3BI,EAAMJ,SAsBf,OAnBAG,EAAAA,WAAU,KACJZ,GAAUkC,EAASzB,QACrB4E,GAActD,KAAKuD,KAEfzE,EAAMJ,QAAQyB,UAChBmD,GAAcZ,IAAIa,IAErB,GACA,CAACtF,EAAQqF,IAEZzE,EAAAA,WAAU,KACR,MAAMsB,EAAWrB,EAAMJ,QAAQyB,SAC/B,MAAO,KACDA,GACFmD,GAAcZ,IAAIa,IACnB,CACF,GACA,CAACD,IAEGrF,EACLuB,EAAAA,IAACgE,EAAKA,MAAA,CAAAJ,SACJK,EAAAA,KAAK,MAAA,CAAArE,IAAKe,EAAUV,MAAOiE,EAAAA,UACzBN,SAAA,CAAA5D,EAAAA,IAACP,EAAa,CAACG,IAAKhB,EAAae,QAASkE,IACzCD,OAGH,IAAI"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', './dayUtils-a902fbf8', './getFormatParse-b7ff0219', './logger-0f873e29', './calendarDateUtils-1f56aaf5', './StyledDatePickerButton-862edcfd', './useUser-
|
|
2
|
-
//# sourceMappingURL=MonthView-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', './dayUtils-a902fbf8', './getFormatParse-b7ff0219', './logger-0f873e29', './calendarDateUtils-1f56aaf5', './StyledDatePickerButton-862edcfd', './useUser-6dd85af9', 'preact/compat', './useTranslationBundle-6ef0dab6', './useCellNavigation-37e0539a', './PRIVATE_MonthView/themes/DayCellStyles.css', './Grid-85171367', './PRIVATE_MonthView/themes/redwood/MonthViewTheme', './useComponentTheme-5aa41a8f', './PRIVATE_MonthView/themes/MonthViewContract.css'], (function(e,t,a,o,s,n,r,i,d,l,c,h,u,m,y,p){"use strict";const f=()=>({state:"enabled"}),g=e=>{const{buttonProps:a}=(({date:e,dayFormatter:t=f,isAdjacentMonth:a,isDisabled:o,isFocusable:s,isFocused:r,isHidden:h,isReadonly:u,isSelected:m,isToday:y,onAction:p,onNavigation:g})=>{const{locale:D}=i.useUser(),{state:b}=t(e),w="disabled"===b,v="restricted"===b,x=c.useFocusableCell({isFocusable:s,isFocused:r}),M=d.useCallback((e=>{o||u||w||v||p(e)}),[o,w,u,v,p]),T=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:M,onNavigation:g}),A=l.useTranslationBundle("@oracle/oraclejet-preact"),V=A.datePicker_today(),P=A.datePicker_selected(),S=A.datePicker_restricted(),j=n.formatFullCalendarDate(D,e,"day");let C=y?`${V}, ${j}`:j;C=v?`${C}, ${S}`:C,C=m?`${C}, ${P}`:C;const F=n.toJSDate(e.year,e.month,e.day).getDate().toString();return{buttonProps:{"aria-label":C,...(h||o||w||v)&&{"aria-disabled":!0},isActivable:!(o||u||w||v),isAdjacentMonth:a,isDimmed:o||w,isHidden:h,isHoverable:!(o||u||w||v),isReadonly:u,isSelected:m,isRestricted:v,isToday:y,label:F,...x,...T}}})(e);return t.jsx("div",{role:"gridcell",class:h.dayCellStyles,children:t.jsx(r.StyledDatePickerButton,{...a})})};function D(e,t){return e.year===t.year&&e.month===t.month&&e.day===t.day}e.MonthView=({dayFormatter:e,daysOutsideMonth:o="hidden",isReadonly:s=!1,max:r,min:d,onAction:l,onNavigation:c,selectedDate:h,focusableDate:f,isFocused:b=!1,testId:w,todaysDate:v})=>{const{locale:x}=i.useUser(),M=a.getWeeksInMonth(f.year,f.month,x),{baseTheme:T,styles:A}=y.useComponentTheme(m.MonthViewRedwoodTheme,{}),V=n.formatFullCalendarDate(x,f,"month");return t.jsx("div",{class:T,children:t.jsxs(u.Grid,{gap:p.monthViewScaleVars.rowGap,"aria-label":V,role:"grid",testId:w,children:[(()=>{const e=a.getDaysOfWeekNames(x,"short");return t.jsx(u.Grid,{role:"row","aria-hidden":"true",gridTemplateColumns:"repeat(7, 1fr)",gap:p.monthViewScaleVars.columnGap,children:e.map((e=>t.jsx("div",{role:"columnheader",class:A.doyOfTheWeek,children:t.jsx("span",{children:e})})))})})(),(()=>{const i=[];for(let m=0;m<M;m++){const y=a.getStartOfWeek(f.year,f.month,1,x),w=a.getDatesInWeek(m,y.year,y.month,y.day).map((a=>{const i=n.isDateOutOfRange(a,d,r),u=!!h&&D(a,h),m=D(a,v),y=D(a,f),p=(w=f,a.month!==w.month);var w;const x=p&&"hidden"===o;return t.jsx(g,{date:a,dayFormatter:e,isAdjacentMonth:p,isDisabled:i,isFocusable:y,isFocused:y&&b,isHidden:x,isReadonly:s,isSelected:u,isToday:m,onAction:l,onNavigation:c},`${a.year}-${a.month}-${a.day}`)}));i.push(t.jsx(u.Grid,{role:"row",gridTemplateColumns:"repeat(7, 1fr)",gap:p.monthViewScaleVars.columnGap,children:w},m))}return i})()]})})}}));
|
|
2
|
+
//# sourceMappingURL=MonthView-b5d1d69d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthView-297fceb8.js","sources":["../../src/PRIVATE_MonthView/useDayCell.ts","../../src/PRIVATE_MonthView/DayCell.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 { useUser } from '#hooks/UNSAFE_useUser';\nimport { formatFullCalendarDate, 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 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 * 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 isAdjacentMonth,\n isDisabled,\n isFocusable,\n isFocused,\n isHidden,\n isReadonly,\n isSelected,\n isToday,\n onAction,\n onNavigation\n}: UseDayCellProps) => {\n const { locale } = useUser();\n\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 formattedDate = formatFullCalendarDate(locale, date, 'day');\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 | '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","/**\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 {\n CalendarDateRequired,\n formatFullCalendarDate,\n isDateOutOfRange\n} from '#utils/UNSAFE_calendarDateUtils';\nimport { DayCell } from './DayCell';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { Grid } from '#UNSAFE_Grid';\nimport { MonthViewVariantOptions } 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';\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\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}: MonthViewProps) => {\n const { locale } = useUser();\n const weeksInMonth = getWeeksInMonth(focusableDate.year, focusableDate.month, locale);\n const { baseTheme, styles } = useComponentTheme<MonthViewVariantOptions>(\n MonthViewRedwoodTheme,\n {}\n );\n\n const renderMonthViewHeaderRow = () => {\n const weekDays = getDaysOfWeekNames(locale, 'short');\n return (\n <Grid\n role=\"row\"\n aria-hidden=\"true\"\n gridTemplateColumns=\"repeat(7, 1fr)\"\n gap={monthViewScaleVars.columnGap}>\n {weekDays.map((day) => (\n <div role=\"columnheader\" class={styles['doyOfTheWeek']}>\n <span>{day}</span>\n </div>\n ))}\n </Grid>\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 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 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}></DayCell>\n );\n });\n\n calendarGrid.push(\n <Grid\n key={weekIndex}\n role=\"row\"\n gridTemplateColumns=\"repeat(7, 1fr)\"\n gap={monthViewScaleVars.columnGap}>\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","isAdjacentMonth","isDisabled","isFocusable","isFocused","isHidden","isReadonly","isSelected","isToday","onAction","onNavigation","locale","useUser","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","formatFullCalendarDate","ariaLabel","dayOfMonth","toJSDate","year","month","day","getDate","toString","isActivable","isDimmed","isHoverable","isRestricted","label","useDayCell","_jsx","jsx","role","class","dayCellStyles","children","StyledDatePickerButton","isSameDate","date1","date2","daysOutsideMonth","max","min","selectedDate","focusableDate","testId","todaysDate","weeksInMonth","getWeeksInMonth","baseTheme","styles","useComponentTheme","MonthViewRedwoodTheme","monthViewAriaLabel","_jsxs","jsxs","Grid","gap","monthViewScaleVars","rowGap","weekDays","getDaysOfWeekNames","gridTemplateColumns","columnGap","map","renderMonthViewHeaderRow","calendarGrid","weekIndex","startDateOfWeek","getStartOfWeek","weekCells","getDatesInWeek","dayCellDate","isDateOutOfRange","currentMonthDate","push","renderMonthView"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MonthView-b5d1d69d.js","sources":["../../src/PRIVATE_MonthView/useDayCell.ts","../../src/PRIVATE_MonthView/DayCell.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 { useUser } from '#hooks/UNSAFE_useUser';\nimport { formatFullCalendarDate, 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 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 * 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 isAdjacentMonth,\n isDisabled,\n isFocusable,\n isFocused,\n isHidden,\n isReadonly,\n isSelected,\n isToday,\n onAction,\n onNavigation\n}: UseDayCellProps) => {\n const { locale } = useUser();\n\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 formattedDate = formatFullCalendarDate(locale, date, 'day');\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 | '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","/**\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 {\n CalendarDateRequired,\n formatFullCalendarDate,\n isDateOutOfRange\n} from '#utils/UNSAFE_calendarDateUtils';\nimport { DayCell } from './DayCell';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { Grid } from '#UNSAFE_Grid';\nimport { MonthViewVariantOptions } 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';\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\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}: MonthViewProps) => {\n const { locale } = useUser();\n const weeksInMonth = getWeeksInMonth(focusableDate.year, focusableDate.month, locale);\n const { baseTheme, styles } = useComponentTheme<MonthViewVariantOptions>(\n MonthViewRedwoodTheme,\n {}\n );\n\n const renderMonthViewHeaderRow = () => {\n const weekDays = getDaysOfWeekNames(locale, 'short');\n return (\n <Grid\n role=\"row\"\n aria-hidden=\"true\"\n gridTemplateColumns=\"repeat(7, 1fr)\"\n gap={monthViewScaleVars.columnGap}>\n {weekDays.map((day) => (\n <div role=\"columnheader\" class={styles['doyOfTheWeek']}>\n <span>{day}</span>\n </div>\n ))}\n </Grid>\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 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 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}></DayCell>\n );\n });\n\n calendarGrid.push(\n <Grid\n key={weekIndex}\n role=\"row\"\n gridTemplateColumns=\"repeat(7, 1fr)\"\n gap={monthViewScaleVars.columnGap}>\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","isAdjacentMonth","isDisabled","isFocusable","isFocused","isHidden","isReadonly","isSelected","isToday","onAction","onNavigation","locale","useUser","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","formatFullCalendarDate","ariaLabel","dayOfMonth","toJSDate","year","month","day","getDate","toString","isActivable","isDimmed","isHoverable","isRestricted","label","useDayCell","_jsx","jsx","role","class","dayCellStyles","children","StyledDatePickerButton","isSameDate","date1","date2","daysOutsideMonth","max","min","selectedDate","focusableDate","testId","todaysDate","weeksInMonth","getWeeksInMonth","baseTheme","styles","useComponentTheme","MonthViewRedwoodTheme","monthViewAriaLabel","_jsxs","jsxs","Grid","gap","monthViewScaleVars","rowGap","weekDays","getDaysOfWeekNames","gridTemplateColumns","columnGap","map","renderMonthViewHeaderRow","calendarGrid","weekIndex","startDateOfWeek","getStartOfWeek","weekCells","getDatesInWeek","dayCellDate","isDateOutOfRange","currentMonthDate","push","renderMonthView"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/hooks', './mergeProps-bcfa6a92', './classNames-08d99695', './useId-c9578d26', './UNSAFE_NavigationList/themes/NavigationListStyles.css', './collectionUtils-6740111c', './useCollectionFocusRing-64636529', './useCurrentKey-00f81f0b', 'preact/compat', './useTestId-82cf22a4', './BaseNavigationListItem-4a940426'], (function(e,t,n,r,o,a,i,s,c,l,u,d,y){"use strict";const f=(e,t,n)=>{const r=e.closest(t),o=e.closest(n);return r?.contains(o)?null:s.keyExtractor(e,t)},g=(e,t,n)=>{const r=n.indexOf(e);if(r>0){const e=n[r===n.length-1?r-1:r+1];if(-1!==t.indexOf(e))return e}return t[0]},v=u.forwardRef((({children:e,selection:v,onSelectionChange:m,onRemove:b,"aria-label":K,"aria-labelledby":h,testId:C},x)=>{const I=n.useRef(null),{showFocusRing:R,currentKey:N,onCurrentKeyChange:k,containerHandlers:w,onKeyDown:p}=function({containerRef:e,selection:t,onRemove:o,onSelectionChange:a,children:i}){const u='[role="tab"]',[d,y]=n.useState(t),v=n.useCallback((e=>{y(e.value)}),[]),{currentKeyProps:m}=l.useCurrentKey((e=>o?f(e,u,"[data-oj-navigationlist-item-remove-icon]"):s.keyExtractor(e,u)),!1,s.getPrevNextKeyUsingRef(e,d,!0,u),s.getPrevNextKeyUsingRef(e,d,!1,u),void 0,void 0,d,v),[b,K]=c.useCollectionFocusRing(e,["Home","End","ArrowUp","ArrowDown"]),h={onFocus:n.useCallback((()=>{if(e.current&&void 0===d){const t=s.getFirstVisibleKey(e.current,u);t&&y(t)}}),[d,e])},C=n.useRef();n.useEffect((()=>{if(e.current){const t=Array.from(e.current.querySelectorAll(u),(e=>s.getKey(e)));if(null!=d&&-1!==t.indexOf(d)){const t=s.findElementByKey(e.current,d,u);t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded():t.scrollIntoView({block:"nearest"})}else d&&-1===t.indexOf(d)&&(C.current?y(g(d,t,C.current)):y(t[0])),C.current=t}}),[i,d,e]);const x=n.useCallback((t=>{if(("Home"===t.key||"End"===t.key)&&e.current&&d){const n=Array.from(e.current.querySelectorAll(u),(e=>s.getKey(e)));v?.({value:n["Home"===t.key?0:n.length-1]})}d&&"Enter"===t.key&&a?.({value:d,reason:"keyboard"}),d&&"Delete"===t.key&&o?.({value:d})}),[d,a,o,v,e]);return{showFocusRing:b,currentKey:d,onCurrentKeyChange:v,onKeyDown:x,containerHandlers:r.mergeProps(K,m,h)}}({containerRef:I,selection:v,onRemove:b,onSelectionChange:m,children:e}),S={onKeyDown:p},L=o.classNames([i.navigationListStyles.uListStyle]),E=a.useId()+"_",F=d.useTestId(C);return u.useImperativeHandle(x,(()=>({focus:()=>{I.current&&I.current.focus()},blur:()=>{I.current&&I.current.focus()}}))),t.jsx("ul",{"aria-label":K,"aria-labelledby":h,role:"tablist",ref:I,"aria-orientation":"vertical",tabIndex:0,"aria-activedescendant":N?E+N:"",...r.mergeProps(S,w),...F,class:L,children:t.jsx(y.NavigationListContext.Provider,{value:{selection:v,onSelectionChange:m,onCurrentKeyChange:k,currentKey:N,showFocusRing:R,navigationListItemPrefix:E,onRemove:b},children:e})})}));e.NavigationList=v,e.NavigationListItem=function({itemKey:e,label:n,badge:r,metadata:o,severity:a}){return t.jsx(y.BaseNavigationListItem,{itemKey:e,label:n,badge:r,metadata:o,severity:a})}}));
|
|
2
|
+
//# sourceMappingURL=NavigationListItem-c96ac144.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationListItem-0a4f8a9c.js","sources":["../../src/UNSAFE_NavigationList/useNavigationList.ts","../../src/UNSAFE_NavigationList/NavigationList.tsx","../../src/UNSAFE_NavigationList/NavigationListItem.tsx"],"sourcesContent":["import { useState, useCallback, MutableRef, useRef, useEffect } from 'preact/hooks';\nimport {\n keyExtractor,\n getFirstVisibleKey,\n getKey,\n getPrevNextKeyUsingRef,\n findElementByKey\n} from '../utils/PRIVATE_collectionUtils';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { NavigationListContextProps } from '../UNSAFE_NavigationListCommon';\n\nimport { ComponentChildren } from 'preact';\n\n/**\n * type for payload of current key change event handler\n */\ntype CurrentKeyDetail<K> = {\n value: K;\n};\n/**\n * type for payload of selection change event handler\n */\ntype SelectionDetail<K> = {\n value: K;\n reason: 'pointer' | 'keyboard';\n};\n/**\n * type for payload of remove event handler\n */\ntype RemoveDetail<K> = {\n value: K;\n};\n\n/*TODO: JET-58534. Create a hook to share some logic between navlist and tabbar. Hook will be used inside this one. */\nexport function useNavigationList<K extends string | number>({\n containerRef,\n selection,\n onRemove,\n onSelectionChange,\n children\n}: {\n containerRef: MutableRef<HTMLUListElement>;\n selection?: K;\n onRemove?: <K extends string | number>(detail: RemoveDetail<K>) => void;\n onSelectionChange?: <K extends string | number>(detail: SelectionDetail<K>) => void;\n children: ComponentChildren;\n}) {\n const ITEM_SELECTOR = '[role=\"tab\"]';\n const REMOVAL_ICON_SELECTOR = '[data-oj-navigationlist-item-remove-icon]';\n const [currentKey, setCurrentKey] = useState<K | undefined>(selection);\n\n const onCurrentKeyChange = useCallback((detail: CurrentKeyDetail<K | undefined>) => {\n setCurrentKey(detail.value);\n }, []) as NavigationListContextProps<K>['onCurrentKeyChange'];\n\n const { currentKeyProps } = useCurrentKey(\n (element) =>\n onRemove\n ? (extractOnlyItemKey(element, ITEM_SELECTOR, REMOVAL_ICON_SELECTOR) as K)\n : keyExtractor(element, ITEM_SELECTOR),\n false,\n getPrevNextKeyUsingRef(containerRef, currentKey, true, ITEM_SELECTOR),\n getPrevNextKeyUsingRef(containerRef, currentKey, false, ITEM_SELECTOR),\n undefined,\n undefined,\n currentKey,\n onCurrentKeyChange\n );\n\n const [showFocusRing, focusRingProps] = useCollectionFocusRing(containerRef, [\n 'Home',\n 'End',\n 'ArrowUp',\n 'ArrowDown'\n ]);\n\n const onFocus = useCallback(() => {\n if (containerRef.current && currentKey === undefined) {\n const key = getFirstVisibleKey(containerRef.current, ITEM_SELECTOR);\n if (key) {\n setCurrentKey(key as K);\n }\n }\n }, [currentKey, containerRef]);\n\n const onFocusProps = { onFocus };\n const prevNavItems = useRef<K[]>();\n\n useEffect(() => {\n if (containerRef.current) {\n const navListItemKeys = Array.from(\n containerRef.current.querySelectorAll(ITEM_SELECTOR),\n (elem) => getKey(elem as HTMLElement) as K\n );\n if (currentKey != null && navListItemKeys.indexOf(currentKey) !== -1) {\n const navListItem = findElementByKey(\n containerRef.current,\n currentKey,\n ITEM_SELECTOR\n ) as any;\n if (navListItem.scrollIntoViewIfNeeded) {\n // for some browsers, we'll need the non-standard scrollIntoViewIfNeeded\n navListItem.scrollIntoViewIfNeeded();\n } else {\n navListItem.scrollIntoView({ block: 'nearest' });\n }\n } else {\n if (currentKey && navListItemKeys.indexOf(currentKey) === -1) {\n prevNavItems.current\n ? setCurrentKey(findNextCurrentKey(currentKey, navListItemKeys, prevNavItems.current))\n : setCurrentKey(navListItemKeys[0] as K);\n }\n prevNavItems.current = navListItemKeys;\n }\n }\n }, [children, currentKey, containerRef]);\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if ((event.key === 'Home' || event.key === 'End') && containerRef.current && currentKey) {\n const navListItemKey = Array.from(\n containerRef.current.querySelectorAll(ITEM_SELECTOR),\n (elem) => getKey(elem as HTMLElement) as K\n );\n onCurrentKeyChange?.({\n value: navListItemKey[event.key === 'Home' ? 0 : navListItemKey.length - 1] as K\n });\n }\n if (currentKey && event.key === 'Enter') {\n onSelectionChange?.({\n value: currentKey as K,\n reason: 'keyboard'\n });\n }\n if (currentKey && event.key === 'Delete') {\n onRemove?.({ value: currentKey as K });\n }\n },\n [currentKey, onSelectionChange, onRemove, onCurrentKeyChange, containerRef]\n );\n\n return {\n showFocusRing,\n currentKey,\n onCurrentKeyChange,\n onKeyDown,\n containerHandlers: mergeProps(focusRingProps, currentKeyProps, onFocusProps)\n };\n}\n\nconst extractOnlyItemKey = (element: HTMLElement, itemSelector: string, itemEliminator: string) => {\n const navigationListItem = element.closest(itemSelector);\n const removeButton = element.closest(itemEliminator);\n return navigationListItem?.contains(removeButton) ? null : keyExtractor(element, itemSelector);\n};\n\nconst findNextCurrentKey = <K>(currentKey: K, currNavs: K[], prevNavs: K[]) => {\n const index = prevNavs.indexOf(currentKey);\n if (index > 0) {\n const nextIndex = index === prevNavs.length - 1 ? index - 1 : index + 1;\n const nextKey = prevNavs[nextIndex];\n if (currNavs.indexOf(nextKey) !== -1) {\n return nextKey;\n }\n }\n // update current key to be the first one if we can't find a suitable next key\n return currNavs[0];\n};\n","import { Ref } from 'preact';\nimport { MutableRef, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { navigationListStyles } from './themes/NavigationListStyles.css';\nimport { useNavigationList } from './useNavigationList';\nimport { forwardRef, useImperativeHandle } from 'preact/compat';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { NavigationListProps, NavigationListContext } from '../UNSAFE_NavigationListCommon';\nexport { RemovableNavigationListItem } from '../UNSAFE_NavigationListCommon';\n\nexport type FocusableHandle = {\n focus: () => void;\n blur: () => void;\n};\n\nexport const NavigationList = forwardRef(\n <K extends string | number>(\n {\n children,\n selection,\n onSelectionChange,\n onRemove,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelLedBy,\n testId\n }: NavigationListProps<K> & TestIdProps,\n ref?: Ref<FocusableHandle>\n ) => {\n const containerRef = useRef<HTMLUListElement>(null);\n\n const { showFocusRing, currentKey, onCurrentKeyChange, containerHandlers, onKeyDown } =\n useNavigationList({\n containerRef: containerRef as MutableRef<HTMLUListElement>,\n selection,\n onRemove,\n onSelectionChange,\n children\n });\n\n const eventProps = { onKeyDown };\n const navigationListClass = classNames([navigationListStyles.uListStyle]);\n const navigationListItemPrefix = useId() + '_';\n const testIdProps = useTestId(testId);\n\n //Allows to call focus on rootRef without having to expose it\n useImperativeHandle(ref!, () => ({\n focus: () => {\n if (containerRef.current) {\n containerRef.current.focus();\n }\n },\n blur: () => {\n if (containerRef.current) {\n containerRef.current.focus();\n }\n }\n }));\n\n return (\n <ul\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelLedBy}\n role=\"tablist\"\n ref={containerRef}\n aria-orientation={'vertical'}\n tabIndex={0}\n aria-activedescendant={currentKey ? navigationListItemPrefix + currentKey : ''}\n {...mergeProps(eventProps, containerHandlers)}\n {...testIdProps}\n class={navigationListClass}>\n <NavigationListContext.Provider\n value={{\n selection,\n onSelectionChange,\n onCurrentKeyChange,\n currentKey,\n showFocusRing,\n navigationListItemPrefix,\n onRemove\n }}>\n {children}\n </NavigationListContext.Provider>\n </ul>\n );\n }\n);\n","import {\n BaseNavigationListItem,\n BaseNavigationListItemProps\n} from '../UNSAFE_NavigationListCommon/BaseNavigationListItem';\n\nexport type NavigationListItemProps<K extends string | number> = Omit<\n BaseNavigationListItemProps<K>,\n 'removeIcon'\n>;\n\nexport function NavigationListItem<K extends string | number>({\n itemKey,\n label,\n badge,\n metadata,\n severity\n}: NavigationListItemProps<K>) {\n return (\n <BaseNavigationListItem\n itemKey={itemKey}\n label={label}\n badge={badge}\n metadata={metadata}\n severity={severity}\n />\n );\n}\n"],"names":["extractOnlyItemKey","element","itemSelector","itemEliminator","navigationListItem","closest","removeButton","contains","keyExtractor","findNextCurrentKey","currentKey","currNavs","prevNavs","index","indexOf","nextKey","length","NavigationList","forwardRef","children","selection","onSelectionChange","onRemove","ariaLabel","ariaLabelLedBy","testId","ref","containerRef","useRef","showFocusRing","onCurrentKeyChange","containerHandlers","onKeyDown","ITEM_SELECTOR","setCurrentKey","useState","useCallback","detail","value","currentKeyProps","useCurrentKey","getPrevNextKeyUsingRef","undefined","focusRingProps","useCollectionFocusRing","onFocusProps","onFocus","current","key","getFirstVisibleKey","prevNavItems","useEffect","navListItemKeys","Array","from","querySelectorAll","elem","getKey","navListItem","findElementByKey","scrollIntoViewIfNeeded","scrollIntoView","block","event","navListItemKey","reason","mergeProps","useNavigationList","eventProps","navigationListClass","classNames","navigationListStyles","uListStyle","navigationListItemPrefix","useId","testIdProps","useTestId","useImperativeHandle","focus","blur","_jsx","role","tabIndex","class","NavigationListContext","Provider","itemKey","label","badge","metadata","severity","jsx","BaseNavigationListItem"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NavigationListItem-c96ac144.js","sources":["../../src/UNSAFE_NavigationList/useNavigationList.ts","../../src/UNSAFE_NavigationList/NavigationList.tsx","../../src/UNSAFE_NavigationList/NavigationListItem.tsx"],"sourcesContent":["import { useState, useCallback, MutableRef, useRef, useEffect } from 'preact/hooks';\nimport {\n keyExtractor,\n getFirstVisibleKey,\n getKey,\n getPrevNextKeyUsingRef,\n findElementByKey\n} from '../utils/PRIVATE_collectionUtils';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { NavigationListContextProps } from '../UNSAFE_NavigationListCommon';\n\nimport { ComponentChildren } from 'preact';\n\n/**\n * type for payload of current key change event handler\n */\ntype CurrentKeyDetail<K> = {\n value: K;\n};\n/**\n * type for payload of selection change event handler\n */\ntype SelectionDetail<K> = {\n value: K;\n reason: 'pointer' | 'keyboard';\n};\n/**\n * type for payload of remove event handler\n */\ntype RemoveDetail<K> = {\n value: K;\n};\n\n/*TODO: JET-58534. Create a hook to share some logic between navlist and tabbar. Hook will be used inside this one. */\nexport function useNavigationList<K extends string | number>({\n containerRef,\n selection,\n onRemove,\n onSelectionChange,\n children\n}: {\n containerRef: MutableRef<HTMLUListElement>;\n selection?: K;\n onRemove?: <K extends string | number>(detail: RemoveDetail<K>) => void;\n onSelectionChange?: <K extends string | number>(detail: SelectionDetail<K>) => void;\n children: ComponentChildren;\n}) {\n const ITEM_SELECTOR = '[role=\"tab\"]';\n const REMOVAL_ICON_SELECTOR = '[data-oj-navigationlist-item-remove-icon]';\n const [currentKey, setCurrentKey] = useState<K | undefined>(selection);\n\n const onCurrentKeyChange = useCallback((detail: CurrentKeyDetail<K | undefined>) => {\n setCurrentKey(detail.value);\n }, []) as NavigationListContextProps<K>['onCurrentKeyChange'];\n\n const { currentKeyProps } = useCurrentKey(\n (element) =>\n onRemove\n ? (extractOnlyItemKey(element, ITEM_SELECTOR, REMOVAL_ICON_SELECTOR) as K)\n : keyExtractor(element, ITEM_SELECTOR),\n false,\n getPrevNextKeyUsingRef(containerRef, currentKey, true, ITEM_SELECTOR),\n getPrevNextKeyUsingRef(containerRef, currentKey, false, ITEM_SELECTOR),\n undefined,\n undefined,\n currentKey,\n onCurrentKeyChange\n );\n\n const [showFocusRing, focusRingProps] = useCollectionFocusRing(containerRef, [\n 'Home',\n 'End',\n 'ArrowUp',\n 'ArrowDown'\n ]);\n\n const onFocus = useCallback(() => {\n if (containerRef.current && currentKey === undefined) {\n const key = getFirstVisibleKey(containerRef.current, ITEM_SELECTOR);\n if (key) {\n setCurrentKey(key as K);\n }\n }\n }, [currentKey, containerRef]);\n\n const onFocusProps = { onFocus };\n const prevNavItems = useRef<K[]>();\n\n useEffect(() => {\n if (containerRef.current) {\n const navListItemKeys = Array.from(\n containerRef.current.querySelectorAll(ITEM_SELECTOR),\n (elem) => getKey(elem as HTMLElement) as K\n );\n if (currentKey != null && navListItemKeys.indexOf(currentKey) !== -1) {\n const navListItem = findElementByKey(\n containerRef.current,\n currentKey,\n ITEM_SELECTOR\n ) as any;\n if (navListItem.scrollIntoViewIfNeeded) {\n // for some browsers, we'll need the non-standard scrollIntoViewIfNeeded\n navListItem.scrollIntoViewIfNeeded();\n } else {\n navListItem.scrollIntoView({ block: 'nearest' });\n }\n } else {\n if (currentKey && navListItemKeys.indexOf(currentKey) === -1) {\n prevNavItems.current\n ? setCurrentKey(findNextCurrentKey(currentKey, navListItemKeys, prevNavItems.current))\n : setCurrentKey(navListItemKeys[0] as K);\n }\n prevNavItems.current = navListItemKeys;\n }\n }\n }, [children, currentKey, containerRef]);\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if ((event.key === 'Home' || event.key === 'End') && containerRef.current && currentKey) {\n const navListItemKey = Array.from(\n containerRef.current.querySelectorAll(ITEM_SELECTOR),\n (elem) => getKey(elem as HTMLElement) as K\n );\n onCurrentKeyChange?.({\n value: navListItemKey[event.key === 'Home' ? 0 : navListItemKey.length - 1] as K\n });\n }\n if (currentKey && event.key === 'Enter') {\n onSelectionChange?.({\n value: currentKey as K,\n reason: 'keyboard'\n });\n }\n if (currentKey && event.key === 'Delete') {\n onRemove?.({ value: currentKey as K });\n }\n },\n [currentKey, onSelectionChange, onRemove, onCurrentKeyChange, containerRef]\n );\n\n return {\n showFocusRing,\n currentKey,\n onCurrentKeyChange,\n onKeyDown,\n containerHandlers: mergeProps(focusRingProps, currentKeyProps, onFocusProps)\n };\n}\n\nconst extractOnlyItemKey = (element: HTMLElement, itemSelector: string, itemEliminator: string) => {\n const navigationListItem = element.closest(itemSelector);\n const removeButton = element.closest(itemEliminator);\n return navigationListItem?.contains(removeButton) ? null : keyExtractor(element, itemSelector);\n};\n\nconst findNextCurrentKey = <K>(currentKey: K, currNavs: K[], prevNavs: K[]) => {\n const index = prevNavs.indexOf(currentKey);\n if (index > 0) {\n const nextIndex = index === prevNavs.length - 1 ? index - 1 : index + 1;\n const nextKey = prevNavs[nextIndex];\n if (currNavs.indexOf(nextKey) !== -1) {\n return nextKey;\n }\n }\n // update current key to be the first one if we can't find a suitable next key\n return currNavs[0];\n};\n","import { Ref } from 'preact';\nimport { MutableRef, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { navigationListStyles } from './themes/NavigationListStyles.css';\nimport { useNavigationList } from './useNavigationList';\nimport { forwardRef, useImperativeHandle } from 'preact/compat';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { NavigationListProps, NavigationListContext } from '../UNSAFE_NavigationListCommon';\nexport { RemovableNavigationListItem } from '../UNSAFE_NavigationListCommon';\n\nexport type FocusableHandle = {\n focus: () => void;\n blur: () => void;\n};\n\nexport const NavigationList = forwardRef(\n <K extends string | number>(\n {\n children,\n selection,\n onSelectionChange,\n onRemove,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelLedBy,\n testId\n }: NavigationListProps<K> & TestIdProps,\n ref?: Ref<FocusableHandle>\n ) => {\n const containerRef = useRef<HTMLUListElement>(null);\n\n const { showFocusRing, currentKey, onCurrentKeyChange, containerHandlers, onKeyDown } =\n useNavigationList({\n containerRef: containerRef as MutableRef<HTMLUListElement>,\n selection,\n onRemove,\n onSelectionChange,\n children\n });\n\n const eventProps = { onKeyDown };\n const navigationListClass = classNames([navigationListStyles.uListStyle]);\n const navigationListItemPrefix = useId() + '_';\n const testIdProps = useTestId(testId);\n\n //Allows to call focus on rootRef without having to expose it\n useImperativeHandle(ref!, () => ({\n focus: () => {\n if (containerRef.current) {\n containerRef.current.focus();\n }\n },\n blur: () => {\n if (containerRef.current) {\n containerRef.current.focus();\n }\n }\n }));\n\n return (\n <ul\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelLedBy}\n role=\"tablist\"\n ref={containerRef}\n aria-orientation={'vertical'}\n tabIndex={0}\n aria-activedescendant={currentKey ? navigationListItemPrefix + currentKey : ''}\n {...mergeProps(eventProps, containerHandlers)}\n {...testIdProps}\n class={navigationListClass}>\n <NavigationListContext.Provider\n value={{\n selection,\n onSelectionChange,\n onCurrentKeyChange,\n currentKey,\n showFocusRing,\n navigationListItemPrefix,\n onRemove\n }}>\n {children}\n </NavigationListContext.Provider>\n </ul>\n );\n }\n);\n","import {\n BaseNavigationListItem,\n BaseNavigationListItemProps\n} from '../UNSAFE_NavigationListCommon/BaseNavigationListItem';\n\nexport type NavigationListItemProps<K extends string | number> = Omit<\n BaseNavigationListItemProps<K>,\n 'removeIcon'\n>;\n\nexport function NavigationListItem<K extends string | number>({\n itemKey,\n label,\n badge,\n metadata,\n severity\n}: NavigationListItemProps<K>) {\n return (\n <BaseNavigationListItem\n itemKey={itemKey}\n label={label}\n badge={badge}\n metadata={metadata}\n severity={severity}\n />\n );\n}\n"],"names":["extractOnlyItemKey","element","itemSelector","itemEliminator","navigationListItem","closest","removeButton","contains","keyExtractor","findNextCurrentKey","currentKey","currNavs","prevNavs","index","indexOf","nextKey","length","NavigationList","forwardRef","children","selection","onSelectionChange","onRemove","ariaLabel","ariaLabelLedBy","testId","ref","containerRef","useRef","showFocusRing","onCurrentKeyChange","containerHandlers","onKeyDown","ITEM_SELECTOR","setCurrentKey","useState","useCallback","detail","value","currentKeyProps","useCurrentKey","getPrevNextKeyUsingRef","undefined","focusRingProps","useCollectionFocusRing","onFocusProps","onFocus","current","key","getFirstVisibleKey","prevNavItems","useEffect","navListItemKeys","Array","from","querySelectorAll","elem","getKey","navListItem","findElementByKey","scrollIntoViewIfNeeded","scrollIntoView","block","event","navListItemKey","reason","mergeProps","useNavigationList","eventProps","navigationListClass","classNames","navigationListStyles","uListStyle","navigationListItemPrefix","useId","testIdProps","useTestId","useImperativeHandle","focus","blur","_jsx","role","tabIndex","class","NavigationListContext","Provider","itemKey","label","badge","metadata","severity","jsx","BaseNavigationListItem"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './useFocusableTextField-c2f98a8b', './FormContext-5130e198', './useFormContext-30acdd33', './FormFieldContext-3c44aaaa', './useTextField-e6877c79', './Label-3f8fc274', './PrefixSuffix-0efb3bc6', './usePrefixSuffix-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './useFocusableTextField-c2f98a8b', './FormContext-5130e198', './useFormContext-30acdd33', './FormFieldContext-3c44aaaa', './useTextField-e6877c79', './Label-3f8fc274', './PrefixSuffix-0efb3bc6', './usePrefixSuffix-6ad5569e', './clientHints-030d25aa', './TextFieldInput-dfd9529f', 'css!./ObfuscatedTextFieldInputStyles.styles.css', './ReadonlyTextFieldInput-a5e85e5d', './StyledTextField-8ac3bbb4', './TextField-0fc70892', './LayerHost-eab40731', 'css!./LiveRegionStyles.styles.css', './logger-0f873e29', './TabbableModeContext-a9c97640', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-f4d1fa1b', './CompactUserAssistance-b2cbdbad', './useTooltipControlled-abf886f2', 'preact', 'css!./IconStyle.styles.css', './Popup-249d77c3', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', 'css!./HiddenAccessibleStyles.styles.css', 'module', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './useCurrentValueReducer-faded381', './ChevronDown-575edbfc', './ChevronUp-dd92fc9c', './Minus-b821ce41', './Plus-6a258f29', './IconButton-1b328b69', './useTranslationBundle-6ef0dab6', './Grid-85171367', './useSpinning-d5dd87af'], (function(e,s,i,t,a,n,o,l,r,d,u,c,p,b,x,f,v,h,m,S,y,F,C,P,A,T,g,I,j,D,U,R,w,L,E,V,B,N,k,q,_,H,M,O,G,W,z){"use strict";function K({direction:e,isDisabled:i,children:t,onPointerDown:a,onPointerUp:n,onPointerOut:o,onPointerCancel:l}){const r=G.useTranslationBundle("@oracle/oraclejet-preact"),d=r.inputNumber_increase(),u=r.inputNumber_decrease(),c="increase"===e?d:u;return s.jsx(F.TabbableModeContext.Provider,{value:{isTabbable:!1},children:s.jsx("div",{"aria-hidden":"true",onPointerDown:a,onPointerUp:n,onPointerOut:o,onPointerCancel:l,children:s.jsx(O.IconButton,{isDisabled:i,tooltip:c,variant:"ghost",size:"sm",children:t})})})}function Z({children:e}){return s.jsx(W.Grid,{align:"center",gap:"1x",gridTemplateColumns:"1fr 1fr",children:e})}const J=i.forwardRef((({"aria-describedby":e,"aria-valuemax":i,"aria-valuemin":n,"aria-valuenow":p,"aria-valuetext":x,assistiveText:m,autoComplete:S="off",autoFocus:y=!1,columnSpan:F,helpSourceLink:C,helpSourceText:P,isDisabled:A,isReadonly:I,isRequired:j=!1,isRequiredShown:D,isStepDownDisabled:U,isStepUpDisabled:R,hasSteppers:w=!1,stepperVariant:L="directional",label:E,labelEdge:V,labelStartWidth:B,messages:N,placeholder:O,prefix:G,suffix:W,textAlign:J,userAssistanceDensity:X,value:Y,variant:$="default",virtualKeyboard:ee,onInput:se,onCommit:ie,onSpin:te,onSpinComplete:ae,onStep:ne,testId:oe},le)=>{const{currentCommitValue:re,dispatch:de}=k.useCurrentValueReducer({value:Y}),ue=t.useCallback((e=>{de({type:"input",payload:e.value}),se?.(e)}),[se,de]),ce=t.useCallback((e=>{de({type:"commit",payload:e.value}),ie?.(e)}),[ie,de]),{isDisabled:pe,isReadonly:be,labelEdge:xe,labelStartWidth:fe,textAlign:ve,userAssistanceDensity:he}=o.useFormContext(),me=A??pe,Se=I??be,ye=V??xe,Fe=B??fe,Ce=J??ve,Pe=X??he,{enabledElementRef:Ae,focusProps:Te,isFocused:ge,readonlyElementRef:Ie}=a.useFocusableTextField({isDisabled:me,isReadonly:Se,ref:le}),{baseId:je,formFieldContext:De,inputProps:Ue,labelProps:Re,textFieldProps:we,userAssistanceProps:Le}=r.useTextField({ariaDescribedBy:e,helpSourceLink:C,helpSourceText:P,isDisabled:me,isFocused:ge,isReadonly:Se,isRequiredShown:D,labelEdge:ye,messages:N,styleVariant:$,userAssistanceDensity:Pe,value:Y}),Ee=me||U,Ve=me||R,Be=t.useCallback((e=>{ge||Ae.current?.focus(),ne?.(e)}),[ne,ge,Ae]),{keyboardHandlerProps:Ne,pointerIncreaseHandlerProps:ke,pointerDecreaseHandlerProps:qe}=z.useSpinning({isStepDownDisabled:Ee,isStepUpDisabled:Ve,onSpin:te,onSpinComplete:ae,onStep:Be}),_e=w?s.jsx(K,{direction:"decrease",isDisabled:Ee,...qe,children:"directional"===L?s.jsx(q.SvgChevronDown,{}):s.jsx(H.SvgMinus,{})}):void 0,He=w?s.jsx(K,{direction:"increase",isDisabled:Ve,...ke,children:"directional"===L?s.jsx(_.SvgChevronUp,{}):s.jsx(M.SvgPlus,{})}):void 0,Me=w&&"quantitative"===L?_e:void 0,Oe=w?"directional"===L?s.jsxs(Z,{children:[_e,He]}):He:void 0,Ge=void 0!==E&&"inside"===ye,{shouldRenderPrefix:We,shouldRenderSuffix:ze,prefixProps:Ke,suffixProps:Ze,valuePrefixSuffix:Je,ariaLabelledBy:Qe}=c.usePrefixSuffix({baseId:je,hasEndContent:void 0!==Oe,hasInsideLabel:Ge,hasStartContent:void 0!==Me,hasValue:De.hasValue,isDisabled:me,isFocused:ge,labelId:Re.id,prefix:G,suffix:W,value:Y}),Xe=We?s.jsx(u.PrefixSuffix,{...Ke}):void 0,Ye=ze?s.jsx(u.PrefixSuffix,{...Ze}):void 0,$e="none"!==ye?s.jsx(d.Label,{...Re,children:E}):void 0,es={label:"none"!==ye?$e:void 0,labelEdge:"none"!==ye?ye:void 0,labelStartWidth:"none"!==ye?Fe:void 0},ss="none"===ye?E:void 0,is="efficient"===Pe||"reflow"===Pe?me||Se?"efficient"!==Pe?void 0:s.jsx(T.InlineUserAssistance,{userAssistanceDensity:Pe,...Le}):s.jsx(T.InlineUserAssistance,{assistiveText:m,fieldLabel:E,helpSourceLink:C,helpSourceText:P,messages:N,isRequiredShown:D,userAssistanceDensity:Pe,...Le}):void 0,ts=t.useRef(null),as="compact"===Pe?s.jsx(g.CompactUserAssistance,{anchorRef:ts,messages:N,assistiveText:m,...Le}):void 0;if(Se){const e=s.jsx(f.ReadonlyTextFieldInput,{"aria-describedby":Ue["aria-describedby"],"aria-label":ss,"aria-labelledby":Re.id,as:"div",autoFocus:y,elementRef:Ie,textAlign:Ce,value:Je,hasEmptyLabel:""===E&&"none"===ye,hasInsideLabel:Ge});return s.jsx(l.FormFieldContext.Provider,{value:De,children:s.jsx(v.ReadonlyTextField,{role:"presentation",columnSpan:F,compactUserAssistance:as,inlineUserAssistance:is,onBlur:Te.onFocusOut,onFocus:Te.onFocusIn,ref:ts,mainContent:e,testId:oe,...es})})}const ns=void 0===p||p.toString()!==x?x:void 0,os=s.jsxs(s.Fragment,{children:[Xe,s.jsx(b.TextFieldInput,{"aria-labelledby":Qe,"aria-label":ss,"aria-valuemax":w?i:void 0,"aria-valuemin":w?n:void 0,"aria-valuenow":w?p:void 0,"aria-valuetext":w?ns:void 0,autoComplete:S,autoFocus:y,currentCommitValue:re,hasEmptyLabel:""===E&&"none"===ye,hasEndContent:void 0!==Oe,hasInsideLabel:Ge,hasPrefix:void 0!==Xe,hasStartContent:void 0!==Me,hasSuffix:void 0!==Ye,inputRef:Ae,isRequired:j,placeholder:O,role:w?"spinbutton":void 0,textAlign:Ce,type:Q()?ee:void 0,value:me?Je:Y,onCommit:ce,onInput:ue,...Ue,...w?Ne:{}}),Ye]});return s.jsx(l.FormFieldContext.Provider,{value:De,children:s.jsx(h.TextField,{startContent:Me,endContent:Oe,columnSpan:F,compactUserAssistance:as,inlineUserAssistance:is,mainContent:os,onBlur:Te.onFocusOut,onFocus:Te.onFocusIn,mainFieldRef:ts,hasZeroStartMargin:w&&"quantitative"===L,testId:oe,...we,...es})})}));function Q(){const e=p.getClientHints().deviceType;return"phone"===e||"tablet"===e}e.NumberInputText=J,e.stepperVariants=["directional","quantitative"]}));
|
|
2
2
|
//# sourceMappingURL=NumberInputText-0d8284f8.js.map
|