@oracle/oraclejet-preact 19.0.6 → 19.0.8
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/{BarChart-d94f9c56.js → BarChart-8521c53a.js} +2 -2
- package/amd/{BarChart-d94f9c56.js.map → BarChart-8521c53a.js.map} +1 -1
- package/amd/{Chart-3108fa88.js → Chart-061335fe.js} +2 -2
- package/amd/{Chart-3108fa88.js.map → Chart-061335fe.js.map} +1 -1
- package/amd/CheckboxSetContext-2e486ea8.js +2 -0
- package/amd/CheckboxSetContext-2e486ea8.js.map +1 -0
- package/amd/ColorPalette-d9ceb947.js +2 -0
- package/amd/{ColorPalette-b26f3861.js.map → ColorPalette-d9ceb947.js.map} +1 -1
- package/amd/{ColorPicker-d578df9c.js → ColorPicker-fdbea1d5.js} +2 -2
- package/amd/{ColorPicker-d578df9c.js.map → ColorPicker-fdbea1d5.js.map} +1 -1
- package/amd/{ComboChart-e61b5581.js → ComboChart-f3876b51.js} +2 -2
- package/amd/{ComboChart-e61b5581.js.map → ComboChart-f3876b51.js.map} +1 -1
- package/amd/{InputColor-192a309b.js → InputColor-d8c29025.js} +2 -2
- package/amd/{InputColor-192a309b.js.map → InputColor-d8c29025.js.map} +1 -1
- package/amd/InputDatePicker-8c8e14ca.js +2 -0
- package/amd/{InputDatePicker-c5ceeb44.js.map → InputDatePicker-8c8e14ca.js.map} +1 -1
- package/amd/{LineAreaChart-ee71fd90.js → LineAreaChart-07848f77.js} +2 -2
- package/amd/{LineAreaChart-ee71fd90.js.map → LineAreaChart-07848f77.js.map} +1 -1
- package/amd/NavigationListItem-82b0c382.js +2 -0
- package/amd/{NavigationListItem-cdbcc394.js.map → NavigationListItem-82b0c382.js.map} +1 -1
- package/amd/{OverflowTabBar-587b7c2a.js → OverflowTabBar-e2b5f36e.js} +2 -2
- package/amd/{OverflowTabBar-587b7c2a.js.map → OverflowTabBar-e2b5f36e.js.map} +1 -1
- package/amd/{OverflowTabBarItem-bcf24ceb.js → OverflowTabBarItem-e01e53ae.js} +2 -2
- package/amd/{OverflowTabBarItem-bcf24ceb.js.map → OverflowTabBarItem-e01e53ae.js.map} +1 -1
- package/amd/PRIVATE_Chart.js +1 -1
- package/amd/{ScatterChart-2b76df73.js → ScatterChart-292935ff.js} +2 -2
- package/amd/{ScatterChart-2b76df73.js.map → ScatterChart-292935ff.js.map} +1 -1
- package/amd/Theme-redwood/theme.css +210 -210
- package/amd/Theme-stable/theme.css +205 -205
- package/amd/UNSAFE_BarChart/__test__/BarChart.spec.js +1 -1
- package/amd/UNSAFE_BarChart.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_ColorPalette.js +1 -1
- package/amd/UNSAFE_ColorPicker.js +1 -1
- package/amd/UNSAFE_ComboChart.js +1 -1
- package/amd/UNSAFE_InputColor.js +1 -1
- package/amd/UNSAFE_InputDatePicker.js +1 -1
- package/amd/UNSAFE_LineAreaChart.js +1 -1
- package/amd/UNSAFE_NavigationList.js +1 -1
- package/amd/UNSAFE_OverflowTabBar.js +1 -1
- package/amd/UNSAFE_RichCheckboxSet.js +1 -1
- package/amd/UNSAFE_RichCheckboxSet.js.map +1 -1
- package/amd/UNSAFE_RichSelectionItem.js +1 -1
- package/amd/UNSAFE_RichSelectionItem.js.map +1 -1
- package/amd/UNSAFE_ScatterChart.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/cjs/{BaseButton-d48ce138.js → BaseButton-acda944a.js} +2 -2
- package/cjs/{BaseButton-d48ce138.js.map → BaseButton-acda944a.js.map} +1 -1
- package/cjs/BaseCardView-43379b36.js +6 -6
- package/cjs/BaseRichSelection-9b1ada4d.js +9 -9
- package/cjs/BaseSwatchView-3d9dbf9a.js +2 -2
- package/cjs/{Button-fd334204.js → Button-170bea0b.js} +2 -2
- package/cjs/{Button-fd334204.js.map → Button-170bea0b.js.map} +1 -1
- package/cjs/ButtonSet-a1f0f8b9.js +2 -2
- package/cjs/ButtonSetButton-97ceb927.js +1 -1
- package/cjs/ButtonSetIconButton-5bad7aa5.js +4 -4
- package/cjs/{Center-1098ae1b.js → Center-8b52b781.js} +2 -2
- package/cjs/{Center-1098ae1b.js.map → Center-8b52b781.js.map} +1 -1
- package/cjs/{Chart-c07adbbd.js → Chart-55c4cd8f.js} +12 -12
- package/cjs/{Chart-c07adbbd.js.map → Chart-55c4cd8f.js.map} +1 -1
- package/cjs/CheckboxControl-45f11f7e.js +6 -6
- package/cjs/CheckboxRadioField-c707f81f.js +6 -6
- package/cjs/CheckboxRadioLabelValueLayout-e9110e5f.js +1 -1
- package/cjs/CheckboxSetContext-c62db26d.js +12 -0
- package/cjs/CheckboxSetContext-c62db26d.js.map +1 -0
- package/cjs/Chip-6d729286.js +1 -1
- package/cjs/ClearIcon-d2d959a1.js +1 -1
- package/cjs/CollapseIcon-7612943e.js +1 -1
- package/cjs/ColorPalette-ea5e1bed.js +2 -2
- package/cjs/{ColorPicker-e3c74415.js → ColorPicker-03036ee3.js} +4 -4
- package/cjs/{ColorPicker-e3c74415.js.map → ColorPicker-03036ee3.js.map} +1 -1
- package/cjs/ColorSwatch-590183e3.js +4 -4
- package/cjs/{CompactLabelAssistance-d5bbeb5e.js → CompactLabelAssistance-eb32e7f5.js} +6 -6
- package/cjs/{CompactLabelAssistance-d5bbeb5e.js.map → CompactLabelAssistance-eb32e7f5.js.map} +1 -1
- package/cjs/CompactUserAssistance-58a6899d.js +5 -5
- package/cjs/ComponentMessageContainer-1b9e8036.js +4 -4
- package/cjs/{DatePicker-b46146c5.js → DatePicker-142a4531.js} +8 -8
- package/cjs/{DatePicker-b46146c5.js.map → DatePicker-142a4531.js.map} +1 -1
- package/cjs/DatePickerHeader-305234ff.js +3 -3
- package/cjs/{Dialog-be4d8900.js → Dialog-152ab89d.js} +8 -8
- package/cjs/{Dialog-be4d8900.js.map → Dialog-152ab89d.js.map} +1 -1
- package/cjs/DirectionalCollapseArrowIcon-c6d6750f.js +1 -1
- package/cjs/DirectionalExpandArrowIcon-33ebe393.js +1 -1
- package/cjs/{Dropdown-b2579045.js → Dropdown-08111f9d.js} +6 -6
- package/cjs/{Dropdown-b2579045.js.map → Dropdown-08111f9d.js.map} +1 -1
- package/cjs/{EmbeddedIconButton-79de5690.js → EmbeddedIconButton-88b1a5cd.js} +2 -2
- package/cjs/{EmbeddedIconButton-79de5690.js.map → EmbeddedIconButton-88b1a5cd.js.map} +1 -1
- package/cjs/{EnvironmentProvider-8696a5b8.js → EnvironmentProvider-5a401f32.js} +3 -3
- package/cjs/{EnvironmentProvider-8696a5b8.js.map → EnvironmentProvider-5a401f32.js.map} +1 -1
- package/cjs/Expander-01af6642.js +1 -1
- package/cjs/{Flex-6ca216a7.js → Flex-a6d1c038.js} +2 -2
- package/cjs/{Flex-6ca216a7.js.map → Flex-a6d1c038.js.map} +1 -1
- package/cjs/{Floating-5a704a27.js → Floating-a360e16a.js} +4 -4
- package/cjs/{Floating-5a704a27.js.map → Floating-a360e16a.js.map} +1 -1
- package/cjs/{Grid-57fb11dc.js → Grid-44ca9332.js} +2 -2
- package/cjs/{Grid-57fb11dc.js.map → Grid-44ca9332.js.map} +1 -1
- package/cjs/{Gridlines-3bdce0b7.js → Gridlines-7e6b9ff9.js} +2 -2
- package/cjs/{Gridlines-3bdce0b7.js.map → Gridlines-7e6b9ff9.js.map} +1 -1
- package/cjs/GroupLoadingIndicator-19c221cd.js +1 -1
- package/cjs/{HighlightText-e622ae4f.js → HighlightText-188f85a6.js} +2 -2
- package/cjs/{HighlightText-e622ae4f.js.map → HighlightText-188f85a6.js.map} +1 -1
- package/cjs/Icon-bc05e7bd.js +3 -3
- package/cjs/IconButton-7ebfcb64.js +4 -4
- package/cjs/IconSwitchButton-84e07848.js +4 -4
- package/cjs/IconToggleButton-5cb32026.js +4 -4
- package/cjs/{IconUserAssistance-b0f33cac.js → IconUserAssistance-65d6d06c.js} +3 -3
- package/cjs/{IconUserAssistance-b0f33cac.js.map → IconUserAssistance-65d6d06c.js.map} +1 -1
- package/cjs/InlineHelp-8097a102.js +1 -1
- package/cjs/InlineUserAssistance-74680664.js +5 -5
- package/cjs/InputDateMask-8a4b2660.js +7 -7
- package/cjs/Label-670472a7.js +8 -8
- package/cjs/LabelValueLayout-efc94d8e.js +1 -1
- package/cjs/{Layer-28b1afce.js → Layer-c8668ea4.js} +3 -3
- package/cjs/{Layer-28b1afce.js.map → Layer-c8668ea4.js.map} +1 -1
- package/cjs/{LayerHost-aee0e070.js → LayerHost-f1a1533f.js} +2 -2
- package/cjs/{LayerHost-aee0e070.js.map → LayerHost-f1a1533f.js.map} +1 -1
- package/cjs/{LayerManager-fc4df14f.js → LayerManager-2a80307c.js} +2 -2
- package/cjs/{LayerManager-fc4df14f.js.map → LayerManager-2a80307c.js.map} +1 -1
- package/cjs/Link-33dcecc2.js +1 -1
- package/cjs/List-d4904e56.js +5 -5
- package/cjs/{LiveRegion-e410e187.js → LiveRegion-a2c839ea.js} +2 -2
- package/cjs/{LiveRegion-e410e187.js.map → LiveRegion-a2c839ea.js.map} +1 -1
- package/cjs/{MaxLengthLiveRegion-bfb22b29.js → MaxLengthLiveRegion-cf615038.js} +3 -3
- package/cjs/{MaxLengthLiveRegion-bfb22b29.js.map → MaxLengthLiveRegion-cf615038.js.map} +1 -1
- package/cjs/Message-4dfcf417.js +2 -2
- package/cjs/{MessageLayer-0b0feb51.js → MessageLayer-29034032.js} +6 -6
- package/cjs/{MessageLayer-0b0feb51.js.map → MessageLayer-29034032.js.map} +1 -1
- package/cjs/MessagesManager-5f1e36da.js +3 -3
- package/cjs/{Modal-0cea796e.js → Modal-b00b9f5e.js} +4 -4
- package/cjs/{Modal-0cea796e.js.map → Modal-b00b9f5e.js.map} +1 -1
- package/cjs/{MonthView-044bcacb.js → MonthView-7fc19b53.js} +4 -4
- package/cjs/{MonthView-044bcacb.js.map → MonthView-7fc19b53.js.map} +1 -1
- package/cjs/NavigationListItem-843e014d.js +8 -8
- package/cjs/NavigationListLinkItem-0931af4d.js +4 -4
- package/cjs/NumberInputText-565c84b9.js +6 -6
- package/cjs/OverflowTabBarItem-6c3c9629.js +7 -7
- package/cjs/PRIVATE_BaseCardView.js +22 -22
- package/cjs/PRIVATE_BaseSwatchView.js +5 -5
- package/cjs/PRIVATE_Chart.js +40 -40
- package/cjs/PRIVATE_CheckboxControl.js +26 -26
- package/cjs/PRIVATE_CheckboxRadioField.js +28 -28
- package/cjs/PRIVATE_ClearIcon.js +19 -19
- package/cjs/PRIVATE_ContainerDiagram.js +30 -30
- package/cjs/PRIVATE_DatePickerHeader.js +20 -20
- package/cjs/PRIVATE_DatePickerLayout.js +4 -4
- package/cjs/PRIVATE_EmbeddedIconButton.js +6 -6
- package/cjs/PRIVATE_Expander.js +19 -19
- package/cjs/PRIVATE_FormControls.js +21 -21
- package/cjs/PRIVATE_IconSwitchButton.js +17 -17
- package/cjs/PRIVATE_Icons/CheckboxCrossed.js +16 -16
- package/cjs/PRIVATE_Icons/CheckboxMixed.js +16 -16
- package/cjs/PRIVATE_Icons/CheckboxOff.js +16 -16
- package/cjs/PRIVATE_Icons/CheckboxOn.js +16 -16
- package/cjs/PRIVATE_Icons/DragV.js +16 -16
- package/cjs/PRIVATE_Icons/None.js +16 -16
- package/cjs/PRIVATE_List.js +20 -20
- package/cjs/PRIVATE_Message.js +20 -20
- package/cjs/PRIVATE_MessageLayer.js +12 -12
- package/cjs/PRIVATE_MonthView.js +7 -7
- package/cjs/PRIVATE_MonthYearGridView.js +7 -7
- package/cjs/PRIVATE_PlotArea.js +4 -4
- package/cjs/PRIVATE_RevealToggleIcon.js +18 -18
- package/cjs/PRIVATE_RichSelectionCommon.js +29 -29
- package/cjs/PRIVATE_SelectCommon.js +32 -32
- package/cjs/PRIVATE_StyledCard.js +4 -4
- package/cjs/PRIVATE_StyledCheckbox.js +16 -16
- package/cjs/PRIVATE_SwatchFlexView.js +5 -5
- package/cjs/PRIVATE_Table.js +37 -37
- package/cjs/PRIVATE_ThemedIcons/CalendarIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/ChartMarqueeSelectIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/ChartPanIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/ChartZoomIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/CheckIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/CheckboxCrossedIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/CheckboxMixedIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/CheckboxOffIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/CheckboxOnIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/CloseIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/CollapseIcon.js +17 -17
- package/cjs/PRIVATE_ThemedIcons/CollapseUpIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/DecrementIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/DeleteIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/DirectionalCollapseArrowIcon.js +17 -17
- package/cjs/PRIVATE_ThemedIcons/DirectionalExpandArrowIcon.js +17 -17
- package/cjs/PRIVATE_ThemedIcons/DragHandleIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/DropdownArrowIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/ExpandIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/HelpIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/IncrementIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/MenuButtonDropdownIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/MessageConfirmationIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/MessageErrorIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/MessageInfoIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/MessageWarningIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/MinusIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/NavDownIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/None.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/OverviewHorizontalDragHandleIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/PlusIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/RadioOffIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/RadioOnIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/SortAscendingIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/SortDescendingIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/ViewHideIcon.js +16 -16
- package/cjs/PRIVATE_ThemedIcons/ViewIcon.js +16 -16
- package/cjs/PRIVATE_TimeComponent.js +19 -19
- package/cjs/PRIVATE_VisOverview.js +16 -16
- package/cjs/PRIVATE_VisTabularDatatip.js +4 -4
- package/cjs/{Popup-080e8f67.js → Popup-91e33a1d.js} +11 -11
- package/cjs/{Popup-080e8f67.js.map → Popup-91e33a1d.js.map} +1 -1
- package/cjs/ProgressButtonLabelLayout-689a7a8d.js +3 -3
- package/cjs/{ProgressCircle-dcd9f3e3.js → ProgressCircle-fb0abf95.js} +2 -2
- package/cjs/{ProgressCircle-dcd9f3e3.js.map → ProgressCircle-fb0abf95.js.map} +1 -1
- package/cjs/ReadonlyTextFieldInput-00b3e796.js +1 -1
- package/cjs/RevealToggleIcon-98b44cc6.js +1 -1
- package/cjs/{SectionedContent-bece051b.js → SectionedContent-ac2d4bd2.js} +5 -5
- package/cjs/{SectionedContent-bece051b.js.map → SectionedContent-ac2d4bd2.js.map} +1 -1
- package/cjs/SelectMenuGroupContext-ae5e1373.js +7 -7
- package/cjs/SelectMobileFieldInput-33427c18.js +8 -8
- package/cjs/Selector-9b72f861.js +1 -1
- package/cjs/{SelectorAll-c7d87dc7.js → SelectorAll-c497a428.js} +7 -7
- package/cjs/{SelectorAll-c7d87dc7.js.map → SelectorAll-c497a428.js.map} +1 -1
- package/cjs/{Sheet-44b25f1d.js → Sheet-65ae604e.js} +4 -4
- package/cjs/{Sheet-44b25f1d.js.map → Sheet-65ae604e.js.map} +1 -1
- package/cjs/SortControl-5ca85c6b.js +3 -3
- package/cjs/{StyledCard-1767aa5b.js → StyledCard-acec9285.js} +2 -2
- package/cjs/{StyledCard-1767aa5b.js.map → StyledCard-acec9285.js.map} +1 -1
- package/cjs/{StyledLabelValueLayout-d7705c97.js → StyledLabelValueLayout-dd89f379.js} +2 -2
- package/cjs/{StyledLabelValueLayout-d7705c97.js.map → StyledLabelValueLayout-dd89f379.js.map} +1 -1
- package/cjs/StyledTextField-d8c8a3bf.js +5 -5
- package/cjs/Submenu-416179ad.js +1 -1
- package/cjs/TabBar-1885c9c5.js +7 -7
- package/cjs/TabBarContextMenu-42fdbda0.js +2 -2
- package/cjs/TabBarLayout-b74e2f96.js +1 -1
- package/cjs/Table-49575528.js +11 -11
- package/cjs/TextArea-8608dba1.js +5 -5
- package/cjs/TextField-71dba81e.js +3 -3
- package/cjs/Theme-redwood/theme.css +226 -226
- package/cjs/Theme-stable/theme.css +199 -199
- package/cjs/TimeComponentCanvas2D-471abe04.js +6 -6
- package/cjs/ToggleButton-14cd62ef.js +1 -1
- package/cjs/TruncatingText-82495650.js +1 -1
- package/cjs/UNSAFE_ActionCard.js +3 -3
- package/cjs/UNSAFE_BarChart.js +41 -41
- package/cjs/UNSAFE_BareButton.js +2 -2
- package/cjs/UNSAFE_BaseButton.js +5 -5
- package/cjs/UNSAFE_Button.js +6 -6
- package/cjs/UNSAFE_ButtonSet.js +4 -4
- package/cjs/UNSAFE_ButtonSetButton.js +5 -5
- package/cjs/UNSAFE_ButtonSetIconButton.js +17 -17
- package/cjs/UNSAFE_ButtonSetItem.js +18 -18
- package/cjs/UNSAFE_ButtonSetMultiple.js +4 -4
- package/cjs/UNSAFE_ButtonSetSingle.js +4 -4
- package/cjs/UNSAFE_Card.js +4 -4
- package/cjs/UNSAFE_CardFlexView.js +22 -22
- package/cjs/UNSAFE_CardGridView.js +22 -22
- package/cjs/UNSAFE_Center.js +5 -5
- package/cjs/UNSAFE_Checkbox.js +26 -26
- package/cjs/UNSAFE_CheckboxItem.js +66 -120
- package/cjs/UNSAFE_CheckboxItem.js.map +1 -1
- package/cjs/UNSAFE_CheckboxRadioField.js +4 -4
- package/cjs/UNSAFE_CheckboxSet.js +71 -42
- package/cjs/UNSAFE_CheckboxSet.js.map +1 -1
- package/cjs/UNSAFE_Chip.js +2 -2
- package/cjs/UNSAFE_Collapsible.js +18 -18
- package/cjs/UNSAFE_ColorPalette.js +19 -19
- package/cjs/UNSAFE_ColorPicker.js +44 -44
- package/cjs/UNSAFE_ColorSwatch.js +17 -17
- package/cjs/UNSAFE_ComboChart.js +41 -41
- package/cjs/UNSAFE_ComponentMessage.js +20 -20
- package/cjs/UNSAFE_ConveyorBelt.js +18 -18
- package/cjs/UNSAFE_DatePicker.js +27 -27
- package/cjs/UNSAFE_Diagram.js +30 -30
- package/cjs/UNSAFE_Dialog.js +23 -23
- package/cjs/UNSAFE_DragHandle.js +17 -17
- package/cjs/UNSAFE_DrawerLayout.js +12 -12
- package/cjs/UNSAFE_DrawerPopup.js +12 -12
- package/cjs/UNSAFE_Dropdown.js +15 -15
- package/cjs/UNSAFE_Environment.js +4 -4
- package/cjs/UNSAFE_ExpandableList.js +25 -25
- package/cjs/UNSAFE_FilePicker.js +4 -4
- package/cjs/UNSAFE_FlatTreeView.js +25 -25
- package/cjs/UNSAFE_Flex.js +4 -4
- package/cjs/UNSAFE_Floating.js +11 -11
- package/cjs/UNSAFE_FormLayout.js +2 -2
- package/cjs/UNSAFE_Gantt.js +23 -23
- package/cjs/UNSAFE_Grid.js +4 -4
- package/cjs/UNSAFE_HighlightText.js +4 -4
- package/cjs/UNSAFE_Icon.js +16 -16
- package/cjs/UNSAFE_IconButton.js +17 -17
- package/cjs/UNSAFE_IconMenuButton.js +27 -27
- package/cjs/UNSAFE_IconProgressButton.js +20 -20
- package/cjs/UNSAFE_IconToggleButton.js +17 -17
- package/cjs/UNSAFE_Indexer.js +6 -6
- package/cjs/UNSAFE_InlineSelectSingle.js +33 -33
- package/cjs/UNSAFE_InputColor.js +35 -35
- package/cjs/UNSAFE_InputDateMask.js +27 -27
- package/cjs/UNSAFE_InputDatePicker.js +38 -38
- package/cjs/UNSAFE_InputPassword.js +27 -27
- package/cjs/UNSAFE_InputSensitiveText.js +28 -28
- package/cjs/UNSAFE_InputText.js +29 -29
- package/cjs/UNSAFE_InputTimeMask.js +27 -27
- package/cjs/UNSAFE_Label.js +26 -26
- package/cjs/UNSAFE_LabelValueLayout.js +4 -4
- package/cjs/UNSAFE_LabelledLink.js +28 -28
- package/cjs/UNSAFE_Layer.js +8 -8
- package/cjs/UNSAFE_Legend.js +29 -29
- package/cjs/UNSAFE_LineAreaChart.js +41 -41
- package/cjs/UNSAFE_Link.js +2 -2
- package/cjs/UNSAFE_ListItemLayout.js +4 -4
- package/cjs/UNSAFE_ListView.js +30 -30
- package/cjs/UNSAFE_LiveRegion.js +4 -4
- package/cjs/UNSAFE_Menu.js +28 -28
- package/cjs/UNSAFE_MenuButton.js +27 -27
- package/cjs/UNSAFE_MessageBanner.js +20 -20
- package/cjs/UNSAFE_MessageToast.js +22 -22
- package/cjs/UNSAFE_MeterBar.js +16 -16
- package/cjs/UNSAFE_MeterCircle.js +17 -17
- package/cjs/UNSAFE_Modal.js +9 -9
- package/cjs/UNSAFE_NavigationList.js +30 -30
- package/cjs/UNSAFE_NavigationListCommon.js +20 -20
- package/cjs/UNSAFE_NumberInputText.js +29 -29
- package/cjs/UNSAFE_OverflowTabBar.js +29 -29
- package/cjs/UNSAFE_PictoChart.js +27 -27
- package/cjs/UNSAFE_PieChart.js +28 -28
- package/cjs/UNSAFE_Popup.js +19 -19
- package/cjs/UNSAFE_ProgressBar.js +4 -4
- package/cjs/UNSAFE_ProgressButton.js +20 -20
- package/cjs/UNSAFE_ProgressButtonLabelLayout.js +10 -10
- package/cjs/UNSAFE_ProgressCircle.js +4 -4
- package/cjs/UNSAFE_RadioItem.js +26 -26
- package/cjs/UNSAFE_RadioSet.js +27 -27
- package/cjs/UNSAFE_RatingGauge.js +18 -18
- package/cjs/UNSAFE_ReorderableTabBar.js +27 -27
- package/cjs/UNSAFE_RichCheckboxSet.js +50 -54
- package/cjs/UNSAFE_RichCheckboxSet.js.map +1 -1
- package/cjs/UNSAFE_RichRadioSet.js +29 -29
- package/cjs/UNSAFE_RichSelectionItem.js +50 -193
- package/cjs/UNSAFE_RichSelectionItem.js.map +1 -1
- package/cjs/UNSAFE_ScatterChart.js +41 -41
- package/cjs/UNSAFE_SectionalLegend.js +29 -29
- package/cjs/UNSAFE_SelectMultiple.js +36 -36
- package/cjs/UNSAFE_SelectSingle.js +35 -35
- package/cjs/UNSAFE_SelectionCard.js +4 -4
- package/cjs/UNSAFE_Selector.js +16 -16
- package/cjs/UNSAFE_SelectorAll.js +20 -20
- package/cjs/UNSAFE_Sheet.js +13 -13
- package/cjs/UNSAFE_SortControl.js +20 -20
- package/cjs/UNSAFE_SplitMenuButton.js +27 -27
- package/cjs/UNSAFE_TabBar.js +30 -30
- package/cjs/UNSAFE_TabBarCommon.js +30 -30
- package/cjs/UNSAFE_TabBarMixed.js +30 -30
- package/cjs/UNSAFE_TableView.js +37 -37
- package/cjs/UNSAFE_TagCloud.js +28 -28
- package/cjs/UNSAFE_TextArea.js +28 -28
- package/cjs/UNSAFE_TextAreaAutosize.js +28 -28
- package/cjs/UNSAFE_TextField.js +20 -20
- package/cjs/UNSAFE_ToggleButton.js +5 -5
- package/cjs/UNSAFE_Toolbar.js +4 -4
- package/cjs/UNSAFE_Train.js +17 -17
- package/cjs/UNSAFE_TruncatingBadge.js +17 -17
- package/cjs/UNSAFE_TruncatingText.js +17 -17
- package/cjs/UNSAFE_UserAssistance.js +27 -27
- package/cjs/UNSAFE_View.js +7 -7
- package/cjs/UNSAFE_VirtualizedListView.js +20 -20
- package/cjs/UNSAFE_VisProgressiveLoader.js +5 -5
- package/cjs/UNSAFE_VisStatusMessage.js +5 -5
- package/cjs/UNSAFE_WindowOverlay.js +4 -4
- package/cjs/{View-7d9034a7.js → View-251db2a6.js} +5 -5
- package/cjs/{View-7d9034a7.js.map → View-251db2a6.js.map} +1 -1
- package/cjs/{VisTabularDatatip-9e44a7dd.js → VisTabularDatatip-f9ba79d0.js} +2 -2
- package/cjs/{VisTabularDatatip-9e44a7dd.js.map → VisTabularDatatip-f9ba79d0.js.map} +1 -1
- package/cjs/{WindowOverlay-a10f995e.js → WindowOverlay-5a341d43.js} +2 -2
- package/cjs/{WindowOverlay-a10f995e.js.map → WindowOverlay-5a341d43.js.map} +1 -1
- package/cjs/{YearsGridView-6c18a6df.js → YearsGridView-5062a05d.js} +4 -4
- package/cjs/{YearsGridView-6c18a6df.js.map → YearsGridView-5062a05d.js.map} +1 -1
- package/cjs/hoc/PRIVATE_withDirectionIcon.js +4 -4
- package/cjs/hoc/PRIVATE_withThemeIcon.js +3 -3
- package/cjs/hoc/UNSAFE_withThemeProps.js +3 -3
- package/cjs/hooks/PRIVATE_useChartContextMenu.js +25 -25
- package/cjs/hooks/PRIVATE_useChartDatatip.js +14 -14
- package/cjs/hooks/PRIVATE_useChartEvents.js +19 -19
- package/cjs/hooks/PRIVATE_useChartMarquee.js +19 -19
- package/cjs/hooks/PRIVATE_useCssVars.js +7 -7
- package/cjs/hooks/PRIVATE_useCurrentKey.js +4 -4
- package/cjs/hooks/PRIVATE_useDatatip.js +12 -12
- package/cjs/hooks/PRIVATE_useFloating.js +4 -4
- package/cjs/hooks/PRIVATE_useListCommon.js +5 -5
- package/cjs/hooks/PRIVATE_useOutsideMousedown.js +9 -9
- package/cjs/hooks/PRIVATE_useReorderable.js +5 -5
- package/cjs/hooks/PRIVATE_useRovingTabIndexContainer.js +4 -4
- package/cjs/hooks/PRIVATE_useSelection.js +4 -4
- package/cjs/hooks/PRIVATE_useTabBar.js +26 -26
- package/cjs/hooks/PRIVATE_useTooltipOnTruncation.js +17 -17
- package/cjs/hooks/PRIVATE_useVisContextMenu.js +25 -25
- package/cjs/hooks/PRIVATE_useVisDragModeControls.js +19 -19
- package/cjs/hooks/PRIVATE_useVisEvents.js +4 -4
- package/cjs/hooks/PRIVATE_useVisMeterEvents.js +14 -14
- package/cjs/hooks/PRIVATE_useVisSelection.js +15 -15
- package/cjs/hooks/UNSAFE_useBareButton.js +2 -2
- package/cjs/hooks/UNSAFE_useColorScheme.js +3 -3
- package/cjs/hooks/UNSAFE_useCurrentBgColor.js +2 -2
- package/cjs/hooks/UNSAFE_useDensity.js +3 -3
- package/cjs/hooks/UNSAFE_useHiddenTestMethod.js +3 -3
- package/cjs/hooks/UNSAFE_useOutsideClick.js +8 -8
- package/cjs/hooks/UNSAFE_usePrefixSuffix.js +4 -4
- package/cjs/hooks/UNSAFE_useScale.js +3 -3
- package/cjs/hooks/UNSAFE_useTestId.js +3 -3
- package/cjs/hooks/UNSAFE_useTheme.js +3 -3
- package/cjs/hooks/UNSAFE_useThemeInterpolations.js +6 -6
- package/cjs/hooks/UNSAFE_useTooltip.js +17 -17
- package/cjs/hooks/UNSAFE_useTranslationBundle.js +3 -3
- package/cjs/hooks/UNSAFE_useUser.js +3 -3
- package/cjs/{popupUtils-488fe8f7.js → popupUtils-96acfe58.js} +2 -2
- package/cjs/{popupUtils-488fe8f7.js.map → popupUtils-96acfe58.js.map} +1 -1
- package/cjs/{tooltipUtils-ae48fed6.js → tooltipUtils-842e04c7.js} +5 -5
- package/cjs/{tooltipUtils-ae48fed6.js.map → tooltipUtils-842e04c7.js.map} +1 -1
- package/cjs/useBareButton-3c8d1a5d.js +1 -1
- package/cjs/useCellNavigation-d5b07844.js +1 -1
- package/cjs/useChartContextMenu-a8c6d928.js +2 -2
- package/cjs/{useChartDatatip-76d4aeaa.js → useChartDatatip-488151ad.js} +4 -4
- package/cjs/{useChartDatatip-76d4aeaa.js.map → useChartDatatip-488151ad.js.map} +1 -1
- package/cjs/{useColorScheme-23e4aab4.js → useColorScheme-a379cdb9.js} +2 -2
- package/cjs/{useColorScheme-23e4aab4.js.map → useColorScheme-a379cdb9.js.map} +1 -1
- package/cjs/useContextMenu-e90f401c.js +2 -2
- package/cjs/{useCssVars-cc025013.js → useCssVars-7a254269.js} +5 -5
- package/cjs/{useCssVars-cc025013.js.map → useCssVars-7a254269.js.map} +1 -1
- package/cjs/{useCurrentKey-76fed320.js → useCurrentKey-25fa7256.js} +2 -2
- package/cjs/{useCurrentKey-76fed320.js.map → useCurrentKey-25fa7256.js.map} +1 -1
- package/cjs/{useDatatip-4f6d3759.js → useDatatip-44a30e0a.js} +4 -4
- package/cjs/{useDatatip-4f6d3759.js.map → useDatatip-44a30e0a.js.map} +1 -1
- package/cjs/{useDensity-022a8f80.js → useDensity-a1ed72b0.js} +2 -2
- package/cjs/{useDensity-022a8f80.js.map → useDensity-a1ed72b0.js.map} +1 -1
- package/cjs/useDisplayValue-981e83e0.js +5 -5
- package/cjs/{useExpandCollapse-336b4f0c.js → useExpandCollapse-6267248f.js} +2 -2
- package/cjs/{useExpandCollapse-336b4f0c.js.map → useExpandCollapse-6267248f.js.map} +1 -1
- package/cjs/{useFloating-13101293.js → useFloating-768519ce.js} +2 -2
- package/cjs/{useFloating-13101293.js.map → useFloating-768519ce.js.map} +1 -1
- package/cjs/{useHiddenTestMethod-51be5bf2.js → useHiddenTestMethod-07be6a8e.js} +2 -2
- package/cjs/{useHiddenTestMethod-51be5bf2.js.map → useHiddenTestMethod-07be6a8e.js.map} +1 -1
- package/cjs/{useKeyboardEvents-caa4eb2d.js → useKeyboardEvents-aeae6a28.js} +2 -2
- package/cjs/{useKeyboardEvents-caa4eb2d.js.map → useKeyboardEvents-aeae6a28.js.map} +1 -1
- package/cjs/useLegendContextMenu-2a905d60.js +4 -4
- package/cjs/{useMeterDatatip-45a314e6.js → useMeterDatatip-05aea311.js} +3 -3
- package/cjs/{useMeterDatatip-45a314e6.js.map → useMeterDatatip-05aea311.js.map} +1 -1
- package/cjs/useNavigation-49344b44.js +1 -1
- package/cjs/{useOutsideClick-c3802f86.js → useOutsideClick-0ad85b65.js} +2 -2
- package/cjs/{useOutsideClick-c3802f86.js.map → useOutsideClick-0ad85b65.js.map} +1 -1
- package/cjs/{useOutsideMousedown-8f913d1a.js → useOutsideMousedown-fee3f752.js} +2 -2
- package/cjs/{useOutsideMousedown-8f913d1a.js.map → useOutsideMousedown-fee3f752.js.map} +1 -1
- package/cjs/{usePopupAnimation-18040396.js → usePopupAnimation-d24b74af.js} +2 -2
- package/cjs/{usePopupAnimation-18040396.js.map → usePopupAnimation-d24b74af.js.map} +1 -1
- package/cjs/{usePrefixSuffix-37dfbfbd.js → usePrefixSuffix-aca06b3b.js} +2 -2
- package/cjs/{usePrefixSuffix-37dfbfbd.js.map → usePrefixSuffix-aca06b3b.js.map} +1 -1
- package/cjs/{useReorderableItem-db13db70.js → useReorderableItem-cee284be.js} +3 -3
- package/cjs/{useReorderableItem-db13db70.js.map → useReorderableItem-cee284be.js.map} +1 -1
- package/cjs/{useRovingTabIndexContainer-a3594203.js → useRovingTabIndexContainer-7474adbd.js} +2 -2
- package/cjs/{useRovingTabIndexContainer-a3594203.js.map → useRovingTabIndexContainer-7474adbd.js.map} +1 -1
- package/cjs/{useScale-adc62f41.js → useScale-349360cd.js} +2 -2
- package/cjs/{useScale-adc62f41.js.map → useScale-349360cd.js.map} +1 -1
- package/cjs/useSelectCommon-c3f3b7bc.js +5 -5
- package/cjs/{useSelectDrill-d6321bb7.js → useSelectDrill-97935ff4.js} +3 -3
- package/cjs/{useSelectDrill-d6321bb7.js.map → useSelectDrill-97935ff4.js.map} +1 -1
- package/cjs/{useSelection-45d53f55.js → useSelection-1ffadc6e.js} +6 -6
- package/cjs/{useSelection-45d53f55.js.map → useSelection-1ffadc6e.js.map} +1 -1
- package/cjs/{useSelection-e11d979f.js → useSelection-ec8ed204.js} +2 -2
- package/cjs/{useSelection-e11d979f.js.map → useSelection-ec8ed204.js.map} +1 -1
- package/cjs/useTabBar-6df595c7.js +3 -3
- package/cjs/{useTestId-9093a54b.js → useTestId-15ee37d6.js} +2 -2
- package/cjs/{useTestId-9093a54b.js.map → useTestId-15ee37d6.js.map} +1 -1
- package/cjs/{useTheme-09dfbb78.js → useTheme-9ced18e9.js} +2 -2
- package/cjs/{useTheme-09dfbb78.js.map → useTheme-9ced18e9.js.map} +1 -1
- package/cjs/{useThemeInterpolations-4faece98.js → useThemeInterpolations-b29f0f7d.js} +5 -5
- package/cjs/{useThemeInterpolations-4faece98.js.map → useThemeInterpolations-b29f0f7d.js.map} +1 -1
- package/cjs/{useTooltip-8728f2ff.js → useTooltip-43bfe8a3.js} +2 -2
- package/cjs/{useTooltip-8728f2ff.js.map → useTooltip-43bfe8a3.js.map} +1 -1
- package/cjs/{useTooltipControlled-3c2afa53.js → useTooltipControlled-4a59aaf5.js} +5 -5
- package/cjs/{useTooltipControlled-3c2afa53.js.map → useTooltipControlled-4a59aaf5.js.map} +1 -1
- package/cjs/{useTooltipOnTruncation-781972d7.js → useTooltipOnTruncation-77728bdf.js} +4 -4
- package/cjs/{useTooltipOnTruncation-781972d7.js.map → useTooltipOnTruncation-77728bdf.js.map} +1 -1
- package/cjs/{useTranslationBundle-18b7bf8b.js → useTranslationBundle-24c593f4.js} +2 -2
- package/cjs/{useTranslationBundle-18b7bf8b.js.map → useTranslationBundle-24c593f4.js.map} +1 -1
- package/cjs/{useUser-f900ddf1.js → useUser-081e5bd5.js} +2 -2
- package/cjs/{useUser-f900ddf1.js.map → useUser-081e5bd5.js.map} +1 -1
- package/cjs/useVisDragModeControls-6acfca25.js +1 -1
- package/cjs/{useVisEvents-9b21e260.js → useVisEvents-c0863287.js} +2 -2
- package/cjs/{useVisEvents-9b21e260.js.map → useVisEvents-c0863287.js.map} +1 -1
- package/cjs/utils/PRIVATE_tooltipUtils.js +14 -14
- package/cjs/utils/PRIVATE_visTestUtils.js +4 -4
- package/cjs/utils/UNSAFE_popupUtils.js +8 -8
- package/cjs/{withDirectionIcon-edb93142.js → withDirectionIcon-574c8e58.js} +2 -2
- package/cjs/{withDirectionIcon-edb93142.js.map → withDirectionIcon-574c8e58.js.map} +1 -1
- package/cjs/withThemeProps-59cfaa3e.js +2 -2
- package/es/{Expander-f035d214.js → Expander-138433a6.js} +2 -2
- package/es/{Expander-f035d214.js.map → Expander-138433a6.js.map} +1 -1
- package/es/MeterCircleVariants.styles.css +8 -8
- package/es/MeterCircleVariants.styles2.css +8 -8
- package/es/{NavigationListItem-70f70367.js → NavigationListItem-db2a88ef.js} +2 -4
- package/es/{NavigationListItem-70f70367.js.map → NavigationListItem-db2a88ef.js.map} +1 -1
- package/es/NavigationListItemVariants.styles.css +4 -4
- package/es/NavigationListItemVariants.styles2.css +4 -4
- package/es/{NavigationListLinkItem-8a575042.js → NavigationListLinkItem-fc69548b.js} +2 -2
- package/es/{NavigationListLinkItem-8a575042.js.map → NavigationListLinkItem-fc69548b.js.map} +1 -1
- package/es/{OverflowTabBarItem-187bd359.js → OverflowTabBarItem-49be7e0a.js} +4 -4
- package/es/{OverflowTabBarItem-187bd359.js.map → OverflowTabBarItem-49be7e0a.js.map} +1 -1
- package/es/PRIVATE_Expander.js +55 -55
- package/es/PRIVATE_Table.js +5 -5
- package/es/SegmentStyles.styles.css +8 -11
- package/es/SegmentStyles.styles2.css +11 -8
- package/es/{SortControl-36062682.js → SortControl-2eaa26f5.js} +2 -2
- package/es/{SortControl-36062682.js.map → SortControl-2eaa26f5.js.map} +1 -1
- package/es/{TabBar-218d6e96.js → TabBar-0de29233.js} +1 -3
- package/es/{TabBar-218d6e96.js.map → TabBar-0de29233.js.map} +1 -1
- package/es/{TabBarLinkItem-574d7229.js → TabBarLinkItem-af4541c2.js} +2 -2
- package/es/{TabBarLinkItem-574d7229.js.map → TabBarLinkItem-af4541c2.js.map} +1 -1
- package/es/{Table-3f93cee3.js → Table-c8a87739.js} +2 -2
- package/es/{Table-3f93cee3.js.map → Table-c8a87739.js.map} +1 -1
- package/es/Theme-redwood/theme.css +439 -439
- package/es/Theme-stable/theme.css +469 -469
- package/es/TrainVariants.styles.css +6 -6
- package/es/TrainVariants.styles2.css +6 -6
- package/es/UNSAFE_FlatTreeView.js +30 -30
- package/es/UNSAFE_InputDateMask/themes/SegmentStyles.css.js +1 -1
- package/es/UNSAFE_InputDateMask.js +1 -1
- package/es/UNSAFE_InputDatePicker.js +1 -1
- package/es/UNSAFE_InputTimeMask/themes/SegmentStyles.css.js +1 -1
- package/es/UNSAFE_InputTimeMask.js +1 -1
- package/es/UNSAFE_MeterCircle/themes/redwood/MeterCircleTheme.js +1 -1
- package/es/UNSAFE_MeterCircle/themes/redwood/MeterCircleVariants.css.js +1 -1
- package/es/UNSAFE_MeterCircle/themes/stable/MeterCircleTheme.js +1 -1
- package/es/UNSAFE_MeterCircle/themes/stable/MeterCircleVariants.css.js +1 -1
- package/es/UNSAFE_MeterCircle.js +1 -1
- package/es/UNSAFE_NavigationList/themes/redwood/NavigationListItemVariants.css.js +1 -1
- package/es/UNSAFE_NavigationList/themes/stable/NavigationListItemTheme.js +1 -1
- package/es/UNSAFE_NavigationList/themes/stable/NavigationListItemVariants.css.js +1 -1
- package/es/UNSAFE_NavigationList.js +14 -14
- package/es/UNSAFE_NavigationListCommon/themes/redwood/NavigationListItemTheme.js +1 -1
- package/es/UNSAFE_NavigationListCommon.js +3 -3
- package/es/UNSAFE_OverflowTabBar.js +36 -36
- package/es/UNSAFE_ReorderableTabBar.js +9 -30
- package/es/UNSAFE_ReorderableTabBar.js.map +1 -1
- package/es/UNSAFE_SortControl.js +47 -47
- package/es/UNSAFE_TabBar.js +36 -36
- package/es/UNSAFE_TabBarCommon.js +56 -56
- package/es/UNSAFE_TabBarMixed.js +35 -35
- package/es/UNSAFE_TableView.js +5 -5
- package/es/UNSAFE_Train/themes/redwood/TrainTheme.js +1 -1
- package/es/UNSAFE_Train/themes/redwood/TrainVariants.css.js +1 -1
- package/es/UNSAFE_Train/themes/stable/TrainTheme.js +1 -1
- package/es/UNSAFE_Train/themes/stable/TrainVariants.css.js +1 -1
- package/es/UNSAFE_Train.js +1 -1
- package/package.json +2 -2
- package/amd/CheckboxSet-678ea1d4.js +0 -2
- package/amd/CheckboxSet-678ea1d4.js.map +0 -1
- package/amd/ColorPalette-b26f3861.js +0 -2
- package/amd/InputDatePicker-c5ceeb44.js +0 -2
- package/amd/NavigationListItem-cdbcc394.js +0 -2
- package/cjs/CheckboxSet-ee5f6850.js +0 -53
- package/cjs/CheckboxSet-ee5f6850.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker-
|
|
1
|
+
{"version":3,"file":"ColorPicker-fdbea1d5.js","sources":["../../src/UNSAFE_ColorPicker/ColorPicker.tsx"],"sourcesContent":["// import { Flex } from '#UNSAFE_Flex';\nimport { useTestId, type TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { colorPickerPropVars } from './themes/ColorPickerContract.css';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { ColorPickerRedwoodTheme } from './themes/redwood/ColorPickerTheme';\nimport { ColorPalette } from '#UNSAFE_ColorPalette';\nimport { Size } from '#utils/UNSAFE_size';\nimport { ComponentProps } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { type ColorValue } from '#utils/UNSAFE_color';\nimport { Flex } from '#UNSAFE_Flex';\nimport { isMobile } from '#utils/UNSAFE_clientUtils';\n\ntype ColorPaletteProps = ComponentProps<typeof ColorPalette>;\ntype PickedPropsFromColorPalette = Pick<ColorPaletteProps, 'swatchSize' | 'palette'>;\n\ntype Props = TestIdProps &\n PickedPropsFromColorPalette & {\n /**\n * The selected color\n */\n value?: ColorValue;\n\n /**\n * When property is set to \"auto\", the color picker will automatically adjust to the height of the palette.\n * This is mainly to be used in conjunction with InputColor.\n * <p>If not specified, defaults to the theme specified height.<br/>\n */\n height?: 'auto';\n\n /**\n * Specifies the component style maxWidth.\n * <p>If not specified, defaults to the theme specified maxWidth.<br/>\n * This attribute accepts values of type:<br/>\n * 0 | `${number}${CssUnits}` | `${number}x` | `--${string}` | `var($string})` | `${number}%`</p>\n * <p>When this component is used in composition and the component should take up 100% of the parent container's\n * width, set maxWidth to '100%'.<br/>\n * Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n * set the maxWidth property to the same value.</p>\n */\n maxWidth?: Size;\n\n /**\n * Specifies the component style width.\n * <p>If not specified, defaults to '100%'.</p>\n * <p>This attribute accepts values of type:</p>\n * <p>0 | `${number}${CssUnits}` | `${number}x` | `--${string}` | `var($string})` | `${number}%`</p>\n * <br/>\n * <p>Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n * set the maxWidth property to the same value.</p>\n */\n width?: Size;\n\n /**\n * Callback invoked when the user selects a color in the Palette. This callback is called even when the previous\n * value and the value are the same, that is, when the user selects an already selected color.\n * The app needs to handle this to write back the controlled 'value' property, or else no color will be shown\n * to be selected.\n */\n onCommit: (detail: ValueUpdateDetail<ColorValue>) => void;\n };\n\n/**\n * A ColorPicker is a component that allows users to select a single color.\n */\nexport const ColorPicker = forwardRef(\n (\n { swatchSize = 'xs', palette, height, maxWidth, value, testId, width, onCommit }: Props,\n pickerRef?: ForwardedRef<HTMLDivElement>\n ) => {\n // we need to render the baseTheme on the root dom element so that the CSS vars in colorPickerPropVars will be defined.\n const { classes } = useComponentTheme(ColorPickerRedwoodTheme);\n\n const testIdProps = useTestId(testId);\n\n return (\n <div ref={pickerRef} class={classes} {...testIdProps}>\n <Flex\n direction=\"column\"\n height={\n height === 'auto' ? undefined : isMobile() ? undefined : colorPickerPropVars.maxHeight\n }\n maxWidth={\n maxWidth !== undefined ? maxWidth : isMobile() ? '100%' : colorPickerPropVars.maxWidth\n }\n width={width !== undefined ? width : colorPickerPropVars.width}>\n <ColorPalette\n palette={palette}\n swatchSize={swatchSize}\n value={value}\n testId={testId ? testId + '_picker' : undefined}\n onCommit={onCommit}></ColorPalette>\n </Flex>\n </div>\n );\n }\n);\n"],"names":["ColorPicker","forwardRef","swatchSize","palette","height","maxWidth","value","testId","width","onCommit","pickerRef","classes","useComponentTheme","ColorPickerRedwoodTheme","testIdProps","useTestId","_jsx","jsx","ref","class","children","Flex","direction","isMobile","undefined","colorPickerPropVars","maxHeight","ColorPalette"],"mappings":"4UAkEa,MAAAA,EAAcC,EAAAA,YACzB,EACIC,aAAa,KAAMC,UAASC,SAAQC,WAAUC,QAAOC,SAAQC,QAAOC,YACtEC,KAGA,MAAMC,QAAEA,GAAYC,EAAiBA,kBAACC,EAAuBA,yBAEvDC,EAAcC,YAAUR,GAE9B,OACES,EAAKC,IAAA,MAAA,CAAAC,IAAKR,EAAWS,MAAOR,KAAaG,EACvCM,SAAAJ,EAAAC,IAACI,EAAIA,KAAA,CACHC,UAAU,SACVlB,OACa,SAAXA,GAAgCmB,EAAAA,gBAAZC,EAAqCC,sBAAoBC,UAE/ErB,cACemB,IAAbnB,EAAyBA,EAAWkB,EAAAA,WAAa,OAASE,EAAAA,oBAAoBpB,SAEhFG,WAAiBgB,IAAVhB,EAAsBA,EAAQiB,sBAAoBjB,MAAKY,SAC9DJ,EAAAA,IAACW,EAAAA,aACC,CAAAxB,QAASA,EACTD,WAAYA,EACZI,MAAOA,EACPC,OAAQA,EAASA,EAAS,eAAYiB,EACtCf,SAAUA,OAGhB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', './utils-8ccd1b88', './chartUtils-d0a5aa01', './LineSeries-53e65053', './dataStyleUtils-9895ff76', './useUser-12ec03f1', './colorUtils-7aaca9f1', './accUtils-acd70e81', './themeContract.css-2e4b066d', './BarGroup-c171e6cb', './Chart-
|
|
2
|
-
//# sourceMappingURL=ComboChart-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', './utils-8ccd1b88', './chartUtils-d0a5aa01', './LineSeries-53e65053', './dataStyleUtils-9895ff76', './useUser-12ec03f1', './colorUtils-7aaca9f1', './accUtils-acd70e81', './themeContract.css-2e4b066d', './BarGroup-c171e6cb', './Chart-061335fe'], (function(e,t,i,a,r,s,n,o,l,d,c,h){"use strict";function g({width:e,height:l,selectedIds:g=[],hiddenIds:I=[],highlightedIds:x,hideAndShowBehavior:m="none",orientation:u="vertical",yAxis:y,series:S,groups:f,isStacked:A=!1,getDataItem:C,selectionMode:v="none",drilling:b="off",dataItemGaps:T=.5,dataLabelEffect:D="outline",...L}){const{direction:k,forcedColors:R}=n.useUser(),j="active"===R,M=S.filter((e=>"bar"===e.type)),U="rtl"===k,B="log"===y?.scale,P=L.xAxis?.timeAxisType,W=new Set(I),E=new Set(g),G=new Set(x),w="horizontal"===u,z=o.getColorRamp();let F=i.getSeriesData(S.length,f.length,C,W,B);const H=(e,t)=>A?{...C(e,t),value:F[e][t]}:C(e,t),N="number"==typeof L.y2Axis?.split,O=i.getMarkers(),q=[],{hasBar:V,hasCenteredSeries:Y,hasUncenteredSeries:Z,hasArea:J}=S.reduce(((e,t)=>({hasArea:e.hasArea||"area"===t.type||"lineWithArea"===t.type,hasBar:e.hasBar||"bar"===t.type,hasCenteredSeries:e.hasCenteredSeries||"centeredSegmented"===t.lineType||"centeredStepped"===t.lineType,hasUncenteredSeries:e.hasUncenteredSeries||"segmented"===t.lineType||"stepped"===t.lineType})),{hasBar:!1,hasCenteredSeries:!1,hasUncenteredSeries:!1,hasArea:!1});return t.jsx(h.Chart,{width:e,height:l,selectedIds:E,hiddenIds:I,hideAndShowBehavior:m,orientation:u,yAxis:y,series:S,defaultOverviewContentRenderer:()=>t.jsx(p,{groups:f,series:S,getDataItem:C}),groups:f,selectionMode:v,drilling:b,isStacked:A,getDataItem:C,findNearest:(e,t,a)=>i.findNearestDataPoint(S,f,e,t,H,A,(()=>({offset:0,dataWidth:0})),((e,t)=>t.transform(e)),B,0,W,P,a),getDataItemPos:(e,t,i,r,s,n)=>{const o=V?c.getBarPosition(M,f,C,e,t,i,W,T,r,s,n,"log"===y?.scale,A,U,w,N,P):void 0;return(i,r)=>"bar"===S[i].type?o?o(i,r):void 0:a.getLineAreaChartItemPosition(i,r,F,C,f,w,e,t,P)},getMarkerInfo:(e,t)=>({color:s.getItemColor(e,t,S,C),markerType:s.getMarkerType(e,t,C)}),renderGridLinesInFront:J,getNavUtil:(e,t)=>s.getLineAreaChartNavUtil(C,S.length,e,t,A,U,w),getGapRatio:()=>1,getStartAndEndAxesOffset:e=>i.getStartAndEndAxesOffset(Y,Z,w,e,V),isRtl:U,...L,children:({xStartIndex:e,xEndIndex:s,xScale:n,groupsInfo:o,yScale:l,y2Scale:h,activeId:g,focusedItemInfo:p,hoveredItemInfo:I,isPointInsideMarquee:m,getTextDimensions:f,defaultFontSize:k,axisStepWidth:R,averageGroupZ:V,getItemAriaLabel:Y,plotAreaClipPathId:Z})=>{let J=-1;const K=o.map((({item:e})=>e));return F=i.getSeriesData(S.length,K.length,C,W,B),t.jsx(t.Fragment,{children:F.map(((o,Q)=>{const X=S[Q],$="y2"===X.associatedYAxis,_="lineWithArea"===X.type?.2:1,ee="area"===X.type||"lineWithArea"===X.type,te="area"===X.type;if(0===o.length)return;const ie=i.getLineAreaSegments($?h:l,n,o,e,s,B,K,Q,H,P);q[Q]=ie[0];const ae="bar"!==X.type?"curved"===X.lineType&&A&&F.length>1&&Q>0:A&&F.length>1&&Q>0,re=void 0===x||0===G.size||G.has(X.id),se=A&&0!=Q?q.reduce(((e,t,i)=>i>=Q?e:t.length>0?i:e),0):void 0;return"bar"===X.type&&(J+=1),t.jsxs(t.Fragment,{children:["bar"===X.type&&K.slice(e,s+1).map(((a,r)=>t.jsx(c.BarGroup,{plotAreaClipPathId:Z,yScale:l,y2Scale:h,xScale:n,splitDualY:N,groupIndex:r+e,selectedIds:E,hiddenIds:W,highlightedIds:x?G:x,isDrillEnabled:"on"===b,series:M,barGapRatio:i.getBarGapRatio(A,e,s),dataItemGaps:T,isPointInsideMarquee:m,isStacked:A,axisStepWidth:R,averageGroupZ:V,group:K[r],timeAxisType:L.xAxis?.timeAxisType,colors:z,activeId:g,isLog:"log"===y?.scale,orientation:u,getDataItem:C,isSelectionEnabled:"none"!=v,isRtl:U,focusedItemInfo:p,hoveredItemInfo:I,getTextDimensions:f,defaultFontSize:k,seriesIndex:J,getItemAriaLabel:Y}))),ee&&t.jsx(a.AreaSeries,{yScale:$?h:l,plotAreaClipPathId:Z,lineType:X.lineType,color:X.areaColor||z[Q%z.length],isHorizontal:w,areaColorOpacity:_,isBottomSegmentCurved:ae,bottomCoords:void 0!==se&&q[se].some((e=>null!=e))?q[se]:void 0,lineSegments:ie,isLog:B,isHighlighted:re,seriesIndex:Q,groupWidth:R,isRtl:U,timeAxisType:P}),"line"===X.type&&t.jsx(r.LineSeries,{plotAreaClipPathId:Z,lineType:X.lineType,lineColor:te?d.colorSchemeVars.dvt.contrastLine:X.lineColor,lineWidth:te?1.25:X.lineWidth,lineStyle:X.lineStyle||"solid",color:X.lineColor||z[Q%z.length],lineSegmentCoords:ie,isHorizontal:w,isHighlighted:re,seriesIndex:Q,groupWidth:R,isRtl:U,timeAxisType:P}),!A&&("line"===X.type||ee)&&t.jsx(r.MarkersWithLabel,{yScale:$?h:l,xScale:n,groups:K,series:X,timeAxisType:P,color:z[Q%z.length],seriesIndex:Q,startIndex:e,endIndex:s,markerType:O[Q%O.length],orientation:u,isLog:B,activeId:g,getDataItem:C,isPointInsideMarquee:m,selectedIds:E,focusedItemIndex:p.seriesIndex!==Q||!p.isFocusVisible||L.isDataCursorEnabled&&L.dataCursorStyle?.isMarkerDisplayed?void 0:p.groupIndex,hoveredItemIndex:I?.isCurrent&&I.seriesIndex===Q?I.groupIndex:void 0,isSelectionEnabled:"single"===v||"multiple"===v,isDrillEnabled:"on"===b,defaultFontSize:k,dataLabelEffect:D,isHighContrast:j,getItemAriaLabel:Y})]})}))})}})}function p(e){return t.jsx(g,{datatip:()=>({content:""}),zoomAndScroll:"off",plotArea:{yMajorTick:{isRendered:!1},xMajorTick:{}},xAxis:{tickLabel:{autoRotate:!1,isRendered:!!e.xAxis?.timeAxisType}},series:e.series,groups:e.groups,getDataItem:e.getDataItem,yAxis:{tickLabel:{isRendered:!1}},overview:"off"})}e.ComboChart=g}));
|
|
2
|
+
//# sourceMappingURL=ComboChart-f3876b51.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboChart-e61b5581.js","sources":["../../src/UNSAFE_ComboChart/ComboChart.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComboChartProps, LineAreaItem } from './ComboChart.types';\nimport {\n findNearestDataPoint,\n getStartAndEndAxesOffset\n} from '#utils/PRIVATE_chartUtils/layoutUtils';\nimport { AreaSeries } from '#PRIVATE_LineAreaComponents/AreaSeries';\nimport { getMarkers, getSeriesData } from '#utils/PRIVATE_chartUtils/utils';\nimport { MarkersWithLabel } from '#PRIVATE_Chart/MarkersWithLabel';\nimport { getLineAreaChartNavUtil } from '#utils/PRIVATE_chartUtils/navUtils';\nimport { Chart } from '#PRIVATE_Chart';\nimport { Scale, TimeAxisProps } from '#utils/UNSAFE_visTypes/chart';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { getColorRamp } from '#utils/UNSAFE_visUtils';\nimport { LineSeries } from '#PRIVATE_LineAreaComponents/LineSeries';\nimport { Point } from '#utils/PRIVATE_visSVGUtils';\nimport { getLineAreaSegments } from '#utils/PRIVATE_chartUtils/utils';\nimport { colorSchemeVars } from '@oracle/oraclejet-internal-theme-contract/themeContract.css';\nimport { getItemColor, getMarkerType } from '#utils/PRIVATE_chartUtils/dataStyleUtils';\nimport { BarGroup } from '#UNSAFE_BarChart/BarGroup';\nimport { getBarPosition } from '#UNSAFE_BarChart/utils/barLayoutUtils';\nimport { getLineAreaChartItemPosition } from '#PRIVATE_LineAreaComponents/utils/chartUtils';\nimport { getBarGapRatio } from '#UNSAFE_BarChart/utils/barSeriesUtils';\n\nconst LINE_WITH_AREA_OPACITY = 0.2;\n\n/**\n * The ComboChart displays information graphically using bars, lines and filled areas, making relationships among the data easier to understand.\n */\nexport function ComboChart<K extends string | number, D extends LineAreaItem<K>>({\n width,\n height,\n selectedIds = [],\n hiddenIds = [],\n highlightedIds,\n hideAndShowBehavior = 'none',\n orientation = 'vertical',\n yAxis,\n series,\n groups,\n isStacked = false,\n getDataItem,\n selectionMode = 'none',\n drilling = 'off',\n dataItemGaps = 0.5,\n dataLabelEffect = 'outline',\n ...props\n}: ComboChartProps<K, D>) {\n const { direction, forcedColors } = useUser();\n const isHighContrast = forcedColors === 'active';\n const filteredBarSeries = series.filter((currentSeries) => currentSeries.type === 'bar');\n const isRtl = direction === 'rtl';\n const isLog = yAxis?.scale === 'log';\n const timeAxisType = (props.xAxis as TimeAxisProps)?.timeAxisType;\n const hiddenSet = new Set(hiddenIds);\n const selectedSet = new Set(selectedIds);\n const highlightedSet = new Set(highlightedIds);\n const isHoriz = orientation === 'horizontal';\n const colors = getColorRamp();\n // TODO: JET-71332 ; should only be (number | undefined)[][]\n // remove the type inference from scatter chart item.\n let renderedSeries = getSeriesData<K, D>(\n series.length,\n groups.length,\n getDataItem,\n hiddenSet,\n isLog\n );\n\n const renderedGetDataItem = (seriesIndex: number, groupIndex: number): D | undefined => {\n if (!isStacked) return getDataItem(seriesIndex, groupIndex);\n return {\n ...getDataItem(seriesIndex, groupIndex),\n value: renderedSeries[seriesIndex][groupIndex]\n } as D;\n };\n\n const getGapRatio = () => {\n return 1;\n };\n\n const getNextChartItemFunc = (startIndex: number, endIndex: number) => {\n // TODO: JET-71332\n //@ts-ignore\n return getLineAreaChartNavUtil<D>(\n getDataItem,\n series.length,\n startIndex,\n endIndex,\n isStacked,\n isRtl,\n isHoriz\n );\n };\n const isSplitDualY = typeof props.y2Axis?.split === 'number';\n const getDataItemPos = (\n xScale: Scale,\n yScale: Scale,\n y2Scale: Scale,\n axisStepWidth: number,\n averageGroupZ: number,\n gapRatio: number\n ) => {\n const _getBarPosition = hasBar\n ? getBarPosition(\n filteredBarSeries,\n groups,\n getDataItem,\n xScale,\n yScale,\n y2Scale,\n hiddenSet,\n dataItemGaps,\n axisStepWidth,\n averageGroupZ,\n gapRatio,\n yAxis?.scale === 'log',\n isStacked,\n isRtl,\n isHoriz,\n isSplitDualY,\n timeAxisType\n )\n : undefined;\n\n return (seriesIndex: number, groupIndex: number) => {\n const seriesItem = series[seriesIndex];\n if (seriesItem.type === 'bar') {\n return _getBarPosition ? _getBarPosition(seriesIndex, groupIndex) : undefined;\n } else {\n return getLineAreaChartItemPosition(\n seriesIndex,\n groupIndex,\n renderedSeries,\n getDataItem,\n groups,\n isHoriz,\n xScale,\n yScale,\n timeAxisType\n );\n }\n };\n };\n\n const getMarkerColorAndType = (seriesIndex: number, groupIndex: number) => {\n const color = getItemColor(seriesIndex, groupIndex, series, getDataItem);\n const markerType = getMarkerType(seriesIndex, groupIndex, getDataItem);\n return { color, markerType };\n };\n\n const findNearest = (xScale: Scale, yScale: Scale, y2Scale: Scale) => {\n const getSeriesDataInfo = () => {\n return {\n offset: 0,\n dataWidth: 0\n };\n };\n\n const getYCoord = (value: number, yScale: Scale) => {\n return yScale.transform(value);\n };\n\n return findNearestDataPoint<K, D>(\n series,\n groups,\n xScale,\n yScale,\n renderedGetDataItem,\n isStacked,\n getSeriesDataInfo,\n getYCoord,\n isLog,\n 0,\n hiddenSet,\n timeAxisType,\n y2Scale\n );\n };\n const markers = getMarkers();\n\n const allLineSegmentCoords: Point[][] = [];\n\n const { hasBar, hasCenteredSeries, hasUncenteredSeries, hasArea } = (\n series as { lineType: string; type: string }[]\n ).reduce(\n (acc, s) => {\n return {\n hasArea: acc.hasArea || s.type === 'area' || s.type === 'lineWithArea',\n hasBar: acc.hasBar || s.type === 'bar',\n hasCenteredSeries:\n acc.hasCenteredSeries ||\n s.lineType === 'centeredSegmented' ||\n s.lineType === 'centeredStepped',\n hasUncenteredSeries:\n acc.hasUncenteredSeries || s.lineType === 'segmented' || s.lineType === 'stepped'\n };\n },\n { hasBar: false, hasCenteredSeries: false, hasUncenteredSeries: false, hasArea: false }\n );\n\n const getOffset = (groupCount: number) => {\n return getStartAndEndAxesOffset(\n hasCenteredSeries,\n hasUncenteredSeries,\n isHoriz,\n groupCount,\n hasBar\n );\n };\n\n return (\n <Chart\n width={width}\n height={height}\n selectedIds={selectedSet}\n hiddenIds={hiddenIds}\n hideAndShowBehavior={hideAndShowBehavior}\n orientation={orientation}\n yAxis={yAxis}\n series={series}\n defaultOverviewContentRenderer={() => {\n return <OverviewComboChart groups={groups} series={series} getDataItem={getDataItem} />;\n }}\n groups={groups}\n selectionMode={selectionMode}\n drilling={drilling}\n isStacked={isStacked}\n getDataItem={getDataItem}\n findNearest={findNearest}\n getDataItemPos={getDataItemPos}\n getMarkerInfo={getMarkerColorAndType}\n renderGridLinesInFront={hasArea}\n getNavUtil={getNextChartItemFunc}\n getGapRatio={getGapRatio}\n getStartAndEndAxesOffset={getOffset}\n isRtl={isRtl}\n {...props}>\n {({\n xStartIndex,\n xEndIndex,\n xScale,\n groupsInfo,\n yScale,\n y2Scale,\n activeId,\n focusedItemInfo,\n hoveredItemInfo,\n isPointInsideMarquee,\n getTextDimensions,\n defaultFontSize,\n axisStepWidth,\n averageGroupZ,\n getItemAriaLabel,\n plotAreaClipPathId\n }) => {\n let barSeriesIndex = -1;\n const leafGroups = groupsInfo.map(({ item }) => item);\n renderedSeries = getSeriesData<K, D>(\n series.length,\n leafGroups.length,\n getDataItem,\n hiddenSet,\n isLog\n );\n\n return (\n <>\n {renderedSeries.map((valueSeries, index) => {\n const currentSeries = series[index];\n const isAssociatedToY2 = currentSeries.associatedYAxis === 'y2';\n const areaOpacity =\n currentSeries.type === 'lineWithArea' ? LINE_WITH_AREA_OPACITY : 1;\n const isAreaRendered =\n currentSeries.type === 'area' || currentSeries.type === 'lineWithArea';\n const isContrastLineNeeded = currentSeries.type === 'area';\n\n if (valueSeries.length === 0) {\n return;\n }\n\n const lineSegmentCoords: Point[][] = getLineAreaSegments<K, D>(\n isAssociatedToY2 ? y2Scale : yScale,\n xScale,\n valueSeries,\n xStartIndex,\n xEndIndex,\n isLog,\n leafGroups,\n index,\n renderedGetDataItem,\n timeAxisType\n );\n allLineSegmentCoords[index] = lineSegmentCoords[0];\n const isBottomSegmentCurved =\n currentSeries.type !== 'bar'\n ? currentSeries.lineType === 'curved' &&\n isStacked &&\n renderedSeries.length > 1 &&\n index > 0\n : isStacked && renderedSeries.length > 1 && index > 0;\n\n const isHighlighted =\n highlightedIds === undefined ||\n highlightedSet.size === 0 ||\n highlightedSet.has(currentSeries.id);\n\n const prevCoords =\n isStacked && index != 0\n ? allLineSegmentCoords.reduce((prevValue, newValue, j) => {\n // find the index i such that i < index, and series i has at least\n // one or more data item unhidden. Only such series will can be\n // used as bottomCoord for current series. Otherwise we have to use\n // baseline coord\n if (j >= index) {\n return prevValue;\n }\n if (newValue.length > 0) {\n return j;\n }\n return prevValue;\n }, 0)\n : undefined;\n if (currentSeries.type === 'bar') barSeriesIndex = barSeriesIndex + 1;\n return (\n <>\n {currentSeries.type === 'bar' &&\n leafGroups.slice(xStartIndex, xEndIndex + 1).map((_, index) => {\n const barGroup = (\n <BarGroup\n plotAreaClipPathId={plotAreaClipPathId}\n yScale={yScale}\n y2Scale={y2Scale}\n xScale={xScale}\n splitDualY={isSplitDualY}\n groupIndex={index + xStartIndex}\n selectedIds={selectedSet}\n hiddenIds={hiddenSet}\n highlightedIds={highlightedIds ? highlightedSet : highlightedIds}\n isDrillEnabled={drilling === 'on'}\n series={filteredBarSeries}\n barGapRatio={getBarGapRatio(isStacked, xStartIndex, xEndIndex)}\n dataItemGaps={dataItemGaps}\n isPointInsideMarquee={isPointInsideMarquee}\n isStacked={isStacked}\n axisStepWidth={axisStepWidth}\n averageGroupZ={averageGroupZ!}\n group={leafGroups[index]}\n timeAxisType={(props.xAxis as TimeAxisProps)?.timeAxisType}\n colors={colors}\n activeId={activeId}\n isLog={yAxis?.scale === 'log'}\n orientation={orientation}\n getDataItem={getDataItem}\n isSelectionEnabled={selectionMode != 'none'}\n isRtl={isRtl}\n focusedItemInfo={focusedItemInfo}\n hoveredItemInfo={hoveredItemInfo}\n getTextDimensions={getTextDimensions}\n defaultFontSize={defaultFontSize}\n seriesIndex={barSeriesIndex}\n getItemAriaLabel={getItemAriaLabel}\n />\n );\n\n return barGroup;\n })}\n {isAreaRendered && (\n <AreaSeries\n yScale={isAssociatedToY2 ? y2Scale : yScale}\n plotAreaClipPathId={plotAreaClipPathId}\n lineType={currentSeries.lineType}\n color={currentSeries.areaColor || colors[index % colors.length]}\n isHorizontal={isHoriz}\n areaColorOpacity={areaOpacity}\n isBottomSegmentCurved={isBottomSegmentCurved}\n bottomCoords={\n prevCoords !== undefined &&\n allLineSegmentCoords[prevCoords].some((value) => value != null)\n ? allLineSegmentCoords[prevCoords]\n : undefined\n }\n lineSegments={lineSegmentCoords}\n isLog={isLog}\n isHighlighted={isHighlighted}\n seriesIndex={index}\n groupWidth={axisStepWidth}\n isRtl={isRtl}\n timeAxisType={timeAxisType}\n />\n )}\n {currentSeries.type === 'line' && (\n <LineSeries\n plotAreaClipPathId={plotAreaClipPathId}\n lineType={currentSeries.lineType}\n lineColor={\n isContrastLineNeeded\n ? colorSchemeVars.dvt.contrastLine\n : currentSeries.lineColor\n }\n lineWidth={isContrastLineNeeded ? 1.25 : currentSeries.lineWidth}\n lineStyle={currentSeries.lineStyle || 'solid'}\n color={currentSeries.lineColor || colors[index % colors.length]}\n lineSegmentCoords={lineSegmentCoords}\n isHorizontal={isHoriz}\n isHighlighted={isHighlighted}\n seriesIndex={index}\n groupWidth={axisStepWidth}\n isRtl={isRtl}\n timeAxisType={timeAxisType}\n />\n )}\n {\n /*for non stacked charts, markers should render in the order of series.\n some markers might get hidden behind area but this preserves the legacy behavior. */\n !isStacked && (currentSeries.type === 'line' || isAreaRendered) && (\n <MarkersWithLabel\n yScale={isAssociatedToY2 ? y2Scale : yScale}\n xScale={xScale}\n groups={leafGroups}\n series={currentSeries}\n timeAxisType={timeAxisType}\n color={\n colors[\n index % colors.length\n ] /* TODO : make this use getItemColor function from dataStyleUtils. */\n }\n seriesIndex={index}\n startIndex={xStartIndex}\n endIndex={xEndIndex}\n markerType={markers[index % markers.length]}\n orientation={orientation}\n isLog={isLog}\n activeId={activeId}\n getDataItem={getDataItem}\n isPointInsideMarquee={isPointInsideMarquee}\n selectedIds={selectedSet}\n focusedItemIndex={\n focusedItemInfo.seriesIndex === index &&\n focusedItemInfo.isFocusVisible &&\n !(props.isDataCursorEnabled && props.dataCursorStyle?.isMarkerDisplayed)\n ? focusedItemInfo.groupIndex\n : undefined\n }\n hoveredItemIndex={\n hoveredItemInfo?.isCurrent && hoveredItemInfo.seriesIndex === index\n ? hoveredItemInfo.groupIndex\n : undefined\n }\n isSelectionEnabled={\n selectionMode === 'single' || selectionMode === 'multiple'\n }\n isDrillEnabled={drilling === 'on'}\n defaultFontSize={defaultFontSize}\n dataLabelEffect={dataLabelEffect}\n isHighContrast={isHighContrast}\n getItemAriaLabel={getItemAriaLabel}\n />\n )\n }\n </>\n );\n })}\n </>\n //TODO - handle isStack part\n );\n }}\n </Chart>\n );\n}\n\nfunction OverviewComboChart<K extends string | number, D extends LineAreaItem<K>>(\n props: ComboChartProps<K, D>\n) {\n return (\n <ComboChart\n datatip={() => ({ content: '' })}\n zoomAndScroll=\"off\"\n plotArea={{\n yMajorTick: {\n isRendered: false\n },\n xMajorTick: {}\n }}\n xAxis={{\n tickLabel: {\n autoRotate: false,\n // @ts-ignore\n isRendered: props.xAxis?.timeAxisType ? true : false\n }\n }}\n series={props.series}\n groups={props.groups}\n getDataItem={props.getDataItem}\n yAxis={{\n tickLabel: {\n isRendered: false\n }\n }}\n overview=\"off\"\n />\n );\n}\n"],"names":["ComboChart","width","height","selectedIds","hiddenIds","highlightedIds","hideAndShowBehavior","orientation","yAxis","series","groups","isStacked","getDataItem","selectionMode","drilling","dataItemGaps","dataLabelEffect","props","direction","forcedColors","useUser","isHighContrast","filteredBarSeries","filter","currentSeries","type","isRtl","isLog","scale","timeAxisType","xAxis","hiddenSet","Set","selectedSet","highlightedSet","isHoriz","colors","getColorRamp","renderedSeries","getSeriesData","length","renderedGetDataItem","seriesIndex","groupIndex","value","isSplitDualY","y2Axis","split","markers","getMarkers","allLineSegmentCoords","hasBar","hasCenteredSeries","hasUncenteredSeries","hasArea","reduce","acc","s","lineType","_jsx","jsx","Chart","defaultOverviewContentRenderer","OverviewComboChart","findNearest","xScale","yScale","y2Scale","findNearestDataPoint","offset","dataWidth","transform","getDataItemPos","axisStepWidth","averageGroupZ","gapRatio","_getBarPosition","getBarPosition","undefined","getLineAreaChartItemPosition","getMarkerInfo","color","getItemColor","markerType","getMarkerType","renderGridLinesInFront","getNavUtil","startIndex","endIndex","getLineAreaChartNavUtil","getGapRatio","getStartAndEndAxesOffset","groupCount","children","xStartIndex","xEndIndex","groupsInfo","activeId","focusedItemInfo","hoveredItemInfo","isPointInsideMarquee","getTextDimensions","defaultFontSize","getItemAriaLabel","plotAreaClipPathId","barSeriesIndex","leafGroups","map","item","_Fragment","Fragment","valueSeries","index","isAssociatedToY2","associatedYAxis","areaOpacity","isAreaRendered","isContrastLineNeeded","lineSegmentCoords","getLineAreaSegments","isBottomSegmentCurved","isHighlighted","size","has","id","prevCoords","prevValue","newValue","j","_jsxs","slice","_","BarGroup","splitDualY","isDrillEnabled","barGapRatio","getBarGapRatio","group","isSelectionEnabled","AreaSeries","areaColor","isHorizontal","areaColorOpacity","bottomCoords","some","lineSegments","groupWidth","LineSeries","lineColor","colorSchemeVars","dvt","contrastLine","lineWidth","lineStyle","MarkersWithLabel","focusedItemIndex","isFocusVisible","isDataCursorEnabled","dataCursorStyle","isMarkerDisplayed","hoveredItemIndex","isCurrent","datatip","content","zoomAndScroll","plotArea","yMajorTick","isRendered","xMajorTick","tickLabel","autoRotate","overview"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboChart-f3876b51.js","sources":["../../src/UNSAFE_ComboChart/ComboChart.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComboChartProps, LineAreaItem } from './ComboChart.types';\nimport {\n findNearestDataPoint,\n getStartAndEndAxesOffset\n} from '#utils/PRIVATE_chartUtils/layoutUtils';\nimport { AreaSeries } from '#PRIVATE_LineAreaComponents/AreaSeries';\nimport { getMarkers, getSeriesData } from '#utils/PRIVATE_chartUtils/utils';\nimport { MarkersWithLabel } from '#PRIVATE_Chart/MarkersWithLabel';\nimport { getLineAreaChartNavUtil } from '#utils/PRIVATE_chartUtils/navUtils';\nimport { Chart } from '#PRIVATE_Chart';\nimport { Scale, TimeAxisProps } from '#utils/UNSAFE_visTypes/chart';\nimport { useUser } from '#hooks/UNSAFE_useUser';\nimport { getColorRamp } from '#utils/UNSAFE_visUtils';\nimport { LineSeries } from '#PRIVATE_LineAreaComponents/LineSeries';\nimport { Point } from '#utils/PRIVATE_visSVGUtils';\nimport { getLineAreaSegments } from '#utils/PRIVATE_chartUtils/utils';\nimport { colorSchemeVars } from '@oracle/oraclejet-internal-theme-contract/themeContract.css';\nimport { getItemColor, getMarkerType } from '#utils/PRIVATE_chartUtils/dataStyleUtils';\nimport { BarGroup } from '#UNSAFE_BarChart/BarGroup';\nimport { getBarPosition } from '#UNSAFE_BarChart/utils/barLayoutUtils';\nimport { getLineAreaChartItemPosition } from '#PRIVATE_LineAreaComponents/utils/chartUtils';\nimport { getBarGapRatio } from '#UNSAFE_BarChart/utils/barSeriesUtils';\n\nconst LINE_WITH_AREA_OPACITY = 0.2;\n\n/**\n * The ComboChart displays information graphically using bars, lines and filled areas, making relationships among the data easier to understand.\n */\nexport function ComboChart<K extends string | number, D extends LineAreaItem<K>>({\n width,\n height,\n selectedIds = [],\n hiddenIds = [],\n highlightedIds,\n hideAndShowBehavior = 'none',\n orientation = 'vertical',\n yAxis,\n series,\n groups,\n isStacked = false,\n getDataItem,\n selectionMode = 'none',\n drilling = 'off',\n dataItemGaps = 0.5,\n dataLabelEffect = 'outline',\n ...props\n}: ComboChartProps<K, D>) {\n const { direction, forcedColors } = useUser();\n const isHighContrast = forcedColors === 'active';\n const filteredBarSeries = series.filter((currentSeries) => currentSeries.type === 'bar');\n const isRtl = direction === 'rtl';\n const isLog = yAxis?.scale === 'log';\n const timeAxisType = (props.xAxis as TimeAxisProps)?.timeAxisType;\n const hiddenSet = new Set(hiddenIds);\n const selectedSet = new Set(selectedIds);\n const highlightedSet = new Set(highlightedIds);\n const isHoriz = orientation === 'horizontal';\n const colors = getColorRamp();\n // TODO: JET-71332 ; should only be (number | undefined)[][]\n // remove the type inference from scatter chart item.\n let renderedSeries = getSeriesData<K, D>(\n series.length,\n groups.length,\n getDataItem,\n hiddenSet,\n isLog\n );\n\n const renderedGetDataItem = (seriesIndex: number, groupIndex: number): D | undefined => {\n if (!isStacked) return getDataItem(seriesIndex, groupIndex);\n return {\n ...getDataItem(seriesIndex, groupIndex),\n value: renderedSeries[seriesIndex][groupIndex]\n } as D;\n };\n\n const getGapRatio = () => {\n return 1;\n };\n\n const getNextChartItemFunc = (startIndex: number, endIndex: number) => {\n // TODO: JET-71332\n //@ts-ignore\n return getLineAreaChartNavUtil<D>(\n getDataItem,\n series.length,\n startIndex,\n endIndex,\n isStacked,\n isRtl,\n isHoriz\n );\n };\n const isSplitDualY = typeof props.y2Axis?.split === 'number';\n const getDataItemPos = (\n xScale: Scale,\n yScale: Scale,\n y2Scale: Scale,\n axisStepWidth: number,\n averageGroupZ: number,\n gapRatio: number\n ) => {\n const _getBarPosition = hasBar\n ? getBarPosition(\n filteredBarSeries,\n groups,\n getDataItem,\n xScale,\n yScale,\n y2Scale,\n hiddenSet,\n dataItemGaps,\n axisStepWidth,\n averageGroupZ,\n gapRatio,\n yAxis?.scale === 'log',\n isStacked,\n isRtl,\n isHoriz,\n isSplitDualY,\n timeAxisType\n )\n : undefined;\n\n return (seriesIndex: number, groupIndex: number) => {\n const seriesItem = series[seriesIndex];\n if (seriesItem.type === 'bar') {\n return _getBarPosition ? _getBarPosition(seriesIndex, groupIndex) : undefined;\n } else {\n return getLineAreaChartItemPosition(\n seriesIndex,\n groupIndex,\n renderedSeries,\n getDataItem,\n groups,\n isHoriz,\n xScale,\n yScale,\n timeAxisType\n );\n }\n };\n };\n\n const getMarkerColorAndType = (seriesIndex: number, groupIndex: number) => {\n const color = getItemColor(seriesIndex, groupIndex, series, getDataItem);\n const markerType = getMarkerType(seriesIndex, groupIndex, getDataItem);\n return { color, markerType };\n };\n\n const findNearest = (xScale: Scale, yScale: Scale, y2Scale: Scale) => {\n const getSeriesDataInfo = () => {\n return {\n offset: 0,\n dataWidth: 0\n };\n };\n\n const getYCoord = (value: number, yScale: Scale) => {\n return yScale.transform(value);\n };\n\n return findNearestDataPoint<K, D>(\n series,\n groups,\n xScale,\n yScale,\n renderedGetDataItem,\n isStacked,\n getSeriesDataInfo,\n getYCoord,\n isLog,\n 0,\n hiddenSet,\n timeAxisType,\n y2Scale\n );\n };\n const markers = getMarkers();\n\n const allLineSegmentCoords: Point[][] = [];\n\n const { hasBar, hasCenteredSeries, hasUncenteredSeries, hasArea } = (\n series as { lineType: string; type: string }[]\n ).reduce(\n (acc, s) => {\n return {\n hasArea: acc.hasArea || s.type === 'area' || s.type === 'lineWithArea',\n hasBar: acc.hasBar || s.type === 'bar',\n hasCenteredSeries:\n acc.hasCenteredSeries ||\n s.lineType === 'centeredSegmented' ||\n s.lineType === 'centeredStepped',\n hasUncenteredSeries:\n acc.hasUncenteredSeries || s.lineType === 'segmented' || s.lineType === 'stepped'\n };\n },\n { hasBar: false, hasCenteredSeries: false, hasUncenteredSeries: false, hasArea: false }\n );\n\n const getOffset = (groupCount: number) => {\n return getStartAndEndAxesOffset(\n hasCenteredSeries,\n hasUncenteredSeries,\n isHoriz,\n groupCount,\n hasBar\n );\n };\n\n return (\n <Chart\n width={width}\n height={height}\n selectedIds={selectedSet}\n hiddenIds={hiddenIds}\n hideAndShowBehavior={hideAndShowBehavior}\n orientation={orientation}\n yAxis={yAxis}\n series={series}\n defaultOverviewContentRenderer={() => {\n return <OverviewComboChart groups={groups} series={series} getDataItem={getDataItem} />;\n }}\n groups={groups}\n selectionMode={selectionMode}\n drilling={drilling}\n isStacked={isStacked}\n getDataItem={getDataItem}\n findNearest={findNearest}\n getDataItemPos={getDataItemPos}\n getMarkerInfo={getMarkerColorAndType}\n renderGridLinesInFront={hasArea}\n getNavUtil={getNextChartItemFunc}\n getGapRatio={getGapRatio}\n getStartAndEndAxesOffset={getOffset}\n isRtl={isRtl}\n {...props}>\n {({\n xStartIndex,\n xEndIndex,\n xScale,\n groupsInfo,\n yScale,\n y2Scale,\n activeId,\n focusedItemInfo,\n hoveredItemInfo,\n isPointInsideMarquee,\n getTextDimensions,\n defaultFontSize,\n axisStepWidth,\n averageGroupZ,\n getItemAriaLabel,\n plotAreaClipPathId\n }) => {\n let barSeriesIndex = -1;\n const leafGroups = groupsInfo.map(({ item }) => item);\n renderedSeries = getSeriesData<K, D>(\n series.length,\n leafGroups.length,\n getDataItem,\n hiddenSet,\n isLog\n );\n\n return (\n <>\n {renderedSeries.map((valueSeries, index) => {\n const currentSeries = series[index];\n const isAssociatedToY2 = currentSeries.associatedYAxis === 'y2';\n const areaOpacity =\n currentSeries.type === 'lineWithArea' ? LINE_WITH_AREA_OPACITY : 1;\n const isAreaRendered =\n currentSeries.type === 'area' || currentSeries.type === 'lineWithArea';\n const isContrastLineNeeded = currentSeries.type === 'area';\n\n if (valueSeries.length === 0) {\n return;\n }\n\n const lineSegmentCoords: Point[][] = getLineAreaSegments<K, D>(\n isAssociatedToY2 ? y2Scale : yScale,\n xScale,\n valueSeries,\n xStartIndex,\n xEndIndex,\n isLog,\n leafGroups,\n index,\n renderedGetDataItem,\n timeAxisType\n );\n allLineSegmentCoords[index] = lineSegmentCoords[0];\n const isBottomSegmentCurved =\n currentSeries.type !== 'bar'\n ? currentSeries.lineType === 'curved' &&\n isStacked &&\n renderedSeries.length > 1 &&\n index > 0\n : isStacked && renderedSeries.length > 1 && index > 0;\n\n const isHighlighted =\n highlightedIds === undefined ||\n highlightedSet.size === 0 ||\n highlightedSet.has(currentSeries.id);\n\n const prevCoords =\n isStacked && index != 0\n ? allLineSegmentCoords.reduce((prevValue, newValue, j) => {\n // find the index i such that i < index, and series i has at least\n // one or more data item unhidden. Only such series will can be\n // used as bottomCoord for current series. Otherwise we have to use\n // baseline coord\n if (j >= index) {\n return prevValue;\n }\n if (newValue.length > 0) {\n return j;\n }\n return prevValue;\n }, 0)\n : undefined;\n if (currentSeries.type === 'bar') barSeriesIndex = barSeriesIndex + 1;\n return (\n <>\n {currentSeries.type === 'bar' &&\n leafGroups.slice(xStartIndex, xEndIndex + 1).map((_, index) => {\n const barGroup = (\n <BarGroup\n plotAreaClipPathId={plotAreaClipPathId}\n yScale={yScale}\n y2Scale={y2Scale}\n xScale={xScale}\n splitDualY={isSplitDualY}\n groupIndex={index + xStartIndex}\n selectedIds={selectedSet}\n hiddenIds={hiddenSet}\n highlightedIds={highlightedIds ? highlightedSet : highlightedIds}\n isDrillEnabled={drilling === 'on'}\n series={filteredBarSeries}\n barGapRatio={getBarGapRatio(isStacked, xStartIndex, xEndIndex)}\n dataItemGaps={dataItemGaps}\n isPointInsideMarquee={isPointInsideMarquee}\n isStacked={isStacked}\n axisStepWidth={axisStepWidth}\n averageGroupZ={averageGroupZ!}\n group={leafGroups[index]}\n timeAxisType={(props.xAxis as TimeAxisProps)?.timeAxisType}\n colors={colors}\n activeId={activeId}\n isLog={yAxis?.scale === 'log'}\n orientation={orientation}\n getDataItem={getDataItem}\n isSelectionEnabled={selectionMode != 'none'}\n isRtl={isRtl}\n focusedItemInfo={focusedItemInfo}\n hoveredItemInfo={hoveredItemInfo}\n getTextDimensions={getTextDimensions}\n defaultFontSize={defaultFontSize}\n seriesIndex={barSeriesIndex}\n getItemAriaLabel={getItemAriaLabel}\n />\n );\n\n return barGroup;\n })}\n {isAreaRendered && (\n <AreaSeries\n yScale={isAssociatedToY2 ? y2Scale : yScale}\n plotAreaClipPathId={plotAreaClipPathId}\n lineType={currentSeries.lineType}\n color={currentSeries.areaColor || colors[index % colors.length]}\n isHorizontal={isHoriz}\n areaColorOpacity={areaOpacity}\n isBottomSegmentCurved={isBottomSegmentCurved}\n bottomCoords={\n prevCoords !== undefined &&\n allLineSegmentCoords[prevCoords].some((value) => value != null)\n ? allLineSegmentCoords[prevCoords]\n : undefined\n }\n lineSegments={lineSegmentCoords}\n isLog={isLog}\n isHighlighted={isHighlighted}\n seriesIndex={index}\n groupWidth={axisStepWidth}\n isRtl={isRtl}\n timeAxisType={timeAxisType}\n />\n )}\n {currentSeries.type === 'line' && (\n <LineSeries\n plotAreaClipPathId={plotAreaClipPathId}\n lineType={currentSeries.lineType}\n lineColor={\n isContrastLineNeeded\n ? colorSchemeVars.dvt.contrastLine\n : currentSeries.lineColor\n }\n lineWidth={isContrastLineNeeded ? 1.25 : currentSeries.lineWidth}\n lineStyle={currentSeries.lineStyle || 'solid'}\n color={currentSeries.lineColor || colors[index % colors.length]}\n lineSegmentCoords={lineSegmentCoords}\n isHorizontal={isHoriz}\n isHighlighted={isHighlighted}\n seriesIndex={index}\n groupWidth={axisStepWidth}\n isRtl={isRtl}\n timeAxisType={timeAxisType}\n />\n )}\n {\n /*for non stacked charts, markers should render in the order of series.\n some markers might get hidden behind area but this preserves the legacy behavior. */\n !isStacked && (currentSeries.type === 'line' || isAreaRendered) && (\n <MarkersWithLabel\n yScale={isAssociatedToY2 ? y2Scale : yScale}\n xScale={xScale}\n groups={leafGroups}\n series={currentSeries}\n timeAxisType={timeAxisType}\n color={\n colors[\n index % colors.length\n ] /* TODO : make this use getItemColor function from dataStyleUtils. */\n }\n seriesIndex={index}\n startIndex={xStartIndex}\n endIndex={xEndIndex}\n markerType={markers[index % markers.length]}\n orientation={orientation}\n isLog={isLog}\n activeId={activeId}\n getDataItem={getDataItem}\n isPointInsideMarquee={isPointInsideMarquee}\n selectedIds={selectedSet}\n focusedItemIndex={\n focusedItemInfo.seriesIndex === index &&\n focusedItemInfo.isFocusVisible &&\n !(props.isDataCursorEnabled && props.dataCursorStyle?.isMarkerDisplayed)\n ? focusedItemInfo.groupIndex\n : undefined\n }\n hoveredItemIndex={\n hoveredItemInfo?.isCurrent && hoveredItemInfo.seriesIndex === index\n ? hoveredItemInfo.groupIndex\n : undefined\n }\n isSelectionEnabled={\n selectionMode === 'single' || selectionMode === 'multiple'\n }\n isDrillEnabled={drilling === 'on'}\n defaultFontSize={defaultFontSize}\n dataLabelEffect={dataLabelEffect}\n isHighContrast={isHighContrast}\n getItemAriaLabel={getItemAriaLabel}\n />\n )\n }\n </>\n );\n })}\n </>\n //TODO - handle isStack part\n );\n }}\n </Chart>\n );\n}\n\nfunction OverviewComboChart<K extends string | number, D extends LineAreaItem<K>>(\n props: ComboChartProps<K, D>\n) {\n return (\n <ComboChart\n datatip={() => ({ content: '' })}\n zoomAndScroll=\"off\"\n plotArea={{\n yMajorTick: {\n isRendered: false\n },\n xMajorTick: {}\n }}\n xAxis={{\n tickLabel: {\n autoRotate: false,\n // @ts-ignore\n isRendered: props.xAxis?.timeAxisType ? true : false\n }\n }}\n series={props.series}\n groups={props.groups}\n getDataItem={props.getDataItem}\n yAxis={{\n tickLabel: {\n isRendered: false\n }\n }}\n overview=\"off\"\n />\n );\n}\n"],"names":["ComboChart","width","height","selectedIds","hiddenIds","highlightedIds","hideAndShowBehavior","orientation","yAxis","series","groups","isStacked","getDataItem","selectionMode","drilling","dataItemGaps","dataLabelEffect","props","direction","forcedColors","useUser","isHighContrast","filteredBarSeries","filter","currentSeries","type","isRtl","isLog","scale","timeAxisType","xAxis","hiddenSet","Set","selectedSet","highlightedSet","isHoriz","colors","getColorRamp","renderedSeries","getSeriesData","length","renderedGetDataItem","seriesIndex","groupIndex","value","isSplitDualY","y2Axis","split","markers","getMarkers","allLineSegmentCoords","hasBar","hasCenteredSeries","hasUncenteredSeries","hasArea","reduce","acc","s","lineType","_jsx","jsx","Chart","defaultOverviewContentRenderer","OverviewComboChart","findNearest","xScale","yScale","y2Scale","findNearestDataPoint","offset","dataWidth","transform","getDataItemPos","axisStepWidth","averageGroupZ","gapRatio","_getBarPosition","getBarPosition","undefined","getLineAreaChartItemPosition","getMarkerInfo","color","getItemColor","markerType","getMarkerType","renderGridLinesInFront","getNavUtil","startIndex","endIndex","getLineAreaChartNavUtil","getGapRatio","getStartAndEndAxesOffset","groupCount","children","xStartIndex","xEndIndex","groupsInfo","activeId","focusedItemInfo","hoveredItemInfo","isPointInsideMarquee","getTextDimensions","defaultFontSize","getItemAriaLabel","plotAreaClipPathId","barSeriesIndex","leafGroups","map","item","_Fragment","Fragment","valueSeries","index","isAssociatedToY2","associatedYAxis","areaOpacity","isAreaRendered","isContrastLineNeeded","lineSegmentCoords","getLineAreaSegments","isBottomSegmentCurved","isHighlighted","size","has","id","prevCoords","prevValue","newValue","j","_jsxs","slice","_","BarGroup","splitDualY","isDrillEnabled","barGapRatio","getBarGapRatio","group","isSelectionEnabled","AreaSeries","areaColor","isHorizontal","areaColorOpacity","bottomCoords","some","lineSegments","groupWidth","LineSeries","lineColor","colorSchemeVars","dvt","contrastLine","lineWidth","lineStyle","MarkersWithLabel","focusedItemIndex","isFocusVisible","isDataCursorEnabled","dataCursorStyle","isMarkerDisplayed","hoveredItemIndex","isCurrent","datatip","content","zoomAndScroll","plotArea","yMajorTick","isRendered","xMajorTick","tickLabel","autoRotate","overview"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './swatchData-ef8329c2', './clientHints-6d361eaa', './FormFieldContext-a024b891', './logger-0f873e29', './TabbableModeContext-a9c97640', './useTranslationBundle-8e42d505', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-e406e352', './Flex-07d2aa5b', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-daf96749', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-ae57629b', 'css!./IconStyle.styles.css', './IconButton-232d63fc', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './Popup-695781d6', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', 'module', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './UNSAFE_InputColor/themes/InputColorPickerDropdownStyles.css', './Sheet-c7f3fe2d', './ColorPicker-d578df9c', './SectionedContent-054e2fc2', './ColorSwatch-57d78771', './useDownToggle-80b61b43', './useClearIcon-05225968', './useFocusableTextField-8b755b15', './FormContext-6b0879a0', './useFormContext-b8cbbb21', './useHover-8b8a1496', './useTextField-3ab0a23b', './Label-3c17bcc9', './keyboardUtils-fb6219eb', './TextFieldInput-eb40adaa', 'css!./ObfuscatedTextFieldInputStyles.styles.css', './ReadonlyTextFieldInput-e5723c48', './StyledTextField-5e554e5b', './TextField-51b63f5f', 'css!./LiveRegionStyles.styles.css', './UNSAFE_TextField/themes/TextFieldStyles.css', 'css!./SkeletonStyles.styles.css', 'css!./TextFieldLoadingStyles.styles.css', 'css!./TextFieldStyles.styles.css', 'module', './UNSAFE_TextField/themes/redwood/TextFieldVariants.css', './CompactUserAssistance-5ef03b0a', './mergeProps-bcfa6a92', './ClearIcon-13bd61d3', './useCurrentValueReducer-faded381', './useSelectableTextField-900d2860'], (function(e,s,t,o,a,l,n,r,i,c,d,u,p,m,b,h,y,x,C,S,f,v,F,T,g,A,I,R,w,V,U,k,D,E,j,P,_,B,L,H,M,N,O,z,W,q,G,K,Z,$,J,Q,X,Y,ee,se,te,oe,ae,le,ne,re,ie,ce,de,ue,pe,me,be,he,ye,xe,Ce){"use strict";const Se=({anchorRef:e,assistiveText:t,swatchSize:a,palette:l,helpSourceLink:r,helpSourceText:i,isDisabled:d,isOpen:u,isReadonly:p,label:b,onClose:h,onCommit:y,messages:x,testId:C,userAssistanceDensity:S,value:f})=>{const[v,F]=o.useState(!1),[T,g]=o.useState(u),A=o.useCallback((e=>{F(e.placement.startsWith("top"))}),[]);T!==u&&(g(u),u||F(!1));const I=fe(),{colorPicker_label:R}=c.useTranslationBundle("@oracle/oraclejet-preact"),w=R(),V=s.jsx(W.ColorPicker,{height:I?void 0:"auto",onCommit:y,maxWidth:I?"100%":void 0,width:"100%",swatchSize:a,palette:l,testId:C,value:f}),U=!u||v&&!I||d||p||!(t||r||x&&x.length>0)||"efficient"!==S&&"reflow"!==S?void 0:s.jsx(n.FormFieldContext.Provider,{value:{isFocused:!0},children:s.jsx("div",{class:O.userAssistanceStyles,children:s.jsx(m.InlineUserAssistance,{assistiveText:t,fieldLabel:b,helpSourceLink:r,helpSourceText:i,messages:x,userAssistanceDensity:S})})}),k=C?C+(I?"_sheet":"_dropdown"):void 0,D=s.jsx("div",{class:O.dropdownStyles,children:s.jsx(q.SectionedContent,{paddingBlockEnd:"3.5x",paddingBlockStart:"3.5x",paddingInlineEnd:"3.5x",paddingInlineStart:"3.5x","aria-label":w,footer:U,hasFocusTrap:!0,main:V,role:"dialog",testId:k})});return I?s.jsx(z.Sheet,{isOpen:u,onClose:h,children:s.jsx(q.SectionedContent,{"aria-label":w,footer:U,hasFocusTrap:!0,main:V,role:"dialog",testId:k})}):s.jsx(q.StickyPositioningDropdown,{anchorRef:e,isOpen:u,onClose:h,onPosition:A,sizeOptions:{isMaxWidthAdjusted:!1,isMaxHeightAdjusted:!0},children:D})},fe=()=>"phone"===l.getClientHints().deviceType,ve=(e,s)=>{switch(s.type){case"colorChanged":case"colorSelected":return{...e,colorValue:s.data};case"reset":return{colorValue:s.data};default:return e}},Fe=({onCommit:e,onInput:s,value:t})=>{const[l,n]=o.useState(!1),r=o.useRef(null),i=o.useRef(null),c=o.useRef(!1),d=o.useRef(),u=o.useRef(t),p=o.useRef(t),m=o.useRef(t),b=o.useRef(!1),{state:h,dispatch:y}=(({value:e})=>{const[s,t]=o.useReducer(ve,{colorValue:e});return{state:s,dispatch:t}})({value:t});a.colorsAreDifferent(m.current,t)&&(m.current=t,a.colorsAreDifferent(t,h.colorValue)&&(y({type:"reset",data:t}),p.current=t,u.current=t)),o.useEffect((()=>{a.colorsAreDifferent(h.colorValue,p.current)&&(s({previousValue:p.current,value:h.colorValue}),p.current=h.colorValue),b.current&&a.colorsAreDifferent(h.colorValue,u.current)&&(e?.({previousValue:u.current,value:h.colorValue}),u.current=h.colorValue,b.current=!1)}),[e,s,h.colorValue]);const x=o.useCallback((e=>{y({type:"colorChanged",data:e.value})}),[y]),C=o.useCallback((()=>{a.colorsAreDifferent(u.current,h.colorValue)&&(e?.({value:h.colorValue,previousValue:u.current}),u.current=h.colorValue)}),[e,h.colorValue]),S=o.useCallback((()=>{c.current||n((e=>!e)),c.current=!1}),[]),f=o.useCallback((e=>{"outsideMousedown"===e.reason?(c.current=!0,clearTimeout(d.current),d.current=setTimeout((()=>{c.current=!1}),200)):"dismissed"!==e.reason&&"keyboardDismissed"!==e.reason||r.current?.focus(),n(!1)}),[]),v=o.useCallback((e=>{r.current?.focus(),b.current=!0,y({type:"colorSelected",data:e.value}),n(!1)}),[y]),F=o.useCallback((()=>{n(!0)}),[]),{triggerProps:T}=K.useDownToggle({isOpen:l,onToggle:F});return{colorIconActionHandler:S,colorPickerCommitHandler:v,dropdownCloseHandler:f,containerDropdownProps:T,colorValue:h.colorValue,iconRef:r,isOpen:l,colorCommitHandler:C,colorInputHandler:x,colorRef:i}},Te=t.forwardRef((({"aria-describedby":e,swatchSize:t,palette:l,value:r,isDisabled:i,isReadonly:d,labelEdge:u,labelStartWidth:p,isRequiredShown:b=!1,isRequired:h=!1,placeholder:y,hasClearIcon:x,columnSpan:C,textAlign:S,autoComplete:f,messages:v,assistiveText:F,helpSourceLink:T,helpSourceText:g,label:A,onCommit:I,onInput:R,testId:w,variant:V,userAssistanceDensity:U},k)=>{const{colorIconActionHandler:D,colorPickerCommitHandler:E,dropdownCloseHandler:j,colorValue:P,containerDropdownProps:_,iconRef:B,isOpen:L,colorCommitHandler:H,colorInputHandler:M,colorRef:N}=Fe({onCommit:I,onInput:R,value:r}),O=o.useRef(null),{inputColor_selectColor:z}=c.useTranslationBundle("@oracle/oraclejet-preact"),W=z(),{onKeyDown:q,...K}=_,{currentCommitValue:J,dispatch:se}=xe.useCurrentValueReducer({value:P}),oe=o.useCallback((e=>{se({type:"input",payload:e.value}),M?.(e)}),[M,se]),re=o.useCallback((e=>{se({type:"commit",payload:e.value}),H?.(e)}),[H,se]),{isDisabled:ie,isReadonly:ce,labelEdge:de,labelStartWidth:ue,textAlign:pe,userAssistanceDensity:me}=Q.useFormContext(),fe=i??ie,ve=d??ce,Te=u??de,Ae=p??ue,Ie=S??pe,Re=U??me,we=o.useRef(null),{focusProps:Ve,isFocused:Ue,methods:ke}=$.useFocusableTextField({isDisabled:fe,isReadonly:ve,enabledElementRef:N,readonlyElementRef:we}),{methods:De}=Ce.useSelectableTextField(N);o.useImperativeHandle(k,(()=>he.mergeProps(ke,De)),[ke,De]);const{hoverProps:Ee,isHover:je}=X.useHover({isDisabled:ve||fe||!1}),{formFieldContext:Pe,inputProps:_e,labelProps:Be,textFieldProps:Le,userAssistanceProps:He}=Y.useTextField({ariaDescribedBy:e,helpSourceLink:T,helpSourceText:g,isDisabled:fe,isFocused:Ue||L,isReadonly:ve,isRequiredShown:b,labelEdge:Te,messages:v,styleVariant:V,userAssistanceDensity:Re,value:P}),Me=o.useCallback((()=>{N.current?.focus(),oe?.({previousValue:P,value:void 0})}),[oe,P,N]),Ne=Z.useClearIcon({clearIcon:s.jsx(ye.ClearIcon,{onClick:Me,testId:`${w}_clearicon`}),display:x,hasValue:Pe.hasValue,isFocused:Ue,isEnabled:!ve&&!fe,isHover:je}),Oe=void 0!==A&&"inside"===Te,ze="none"!==Te?s.jsx(ee.Label,{...Be,children:A}):void 0,We={label:"none"!==Te?ze:void 0,labelEdge:"none"!==Te?Te:void 0,labelStartWidth:"none"!==Te?Ae:void 0},qe="none"===Te?A:void 0,Ge="efficient"===Re||"reflow"===Re?fe||ve?"efficient"!==Re?void 0:s.jsx(m.InlineUserAssistance,{userAssistanceDensity:Re,...He}):s.jsx(m.InlineUserAssistance,{assistiveText:F,fieldLabel:A,helpSourceLink:T,helpSourceText:g,messages:v,isRequiredShown:b,userAssistanceDensity:Re,...He}):void 0,Ke=o.useRef(null),Ze=O??Ke,$e="compact"===Re?s.jsx(be.CompactUserAssistance,{anchorRef:Ze,messages:v,assistiveText:F,...He}):void 0,Je=ve?s.jsx(ae.ReadonlyTextFieldInput,{"aria-describedby":_e["aria-describedby"],"aria-label":qe,"aria-labelledby":Be.id,as:"div",elementRef:we,textAlign:Ie,value:P,hasEmptyLabel:""===A&&"none"===Te,hasInsideLabel:Oe}):s.jsx(te.TextFieldInput,{"aria-labelledby":Be.id,"aria-label":qe,autoComplete:f,currentCommitValue:J,hasEmptyLabel:""===A&&"none"===Te,hasEndContent:!1,hasInsideLabel:void 0!==ze&&"inside"===Te,hasStartContent:!0,inputRef:N,isRequired:h,placeholder:y,textAlign:Ie,type:ge()?"text":void 0,value:P,onCommit:re,onInput:oe,onKeyDown:q,..._e});return s.jsxs(s.Fragment,{children:[s.jsx(n.FormFieldContext.Provider,{value:Pe,children:ve?s.jsx(le.ReadonlyTextField,{role:"presentation",columnSpan:C,compactUserAssistance:$e,inlineUserAssistance:Ge,onBlur:Ve.onFocusOut,onFocus:Ve.onFocusIn,ref:Ze,mainContent:Je,testId:w,...We}):s.jsx(ne.TextField,{endContent:Ne,columnSpan:C,compactUserAssistance:$e,inlineUserAssistance:Ge,mainContent:Je,onBlur:Ve.onFocusOut,onFocus:Ve.onFocusIn,startContent:s.jsx(G.ColorSwatch,{size:"xs","aria-haspopup":l?"grid":void 0,"aria-label":l?W:void 0,isDisabled:fe,isButton:!0,isTooltipDisabled:L,ref:B,testId:w?w+"_colorIcon":void 0,value:J,onToggle:fe||!l?void 0:D}),mainFieldRef:Ze,hasZeroStartMargin:!0,testId:w,...Le,...We,...Ee,...K})}),L&&!ve&&!fe&&s.jsx(Se,{anchorRef:O,assistiveText:F,helpSourceLink:T,helpSourceText:g,isDisabled:fe,isReadonly:ve,isOpen:L,label:A,onClose:j,onCommit:E,messages:v,testId:w?w+"_colorPicker":void 0,userAssistanceDensity:Re,value:P&&a.isValidColorValue(P)?P:void 0,palette:l,swatchSize:t})]})}));function ge(){const e=l.getClientHints().deviceType;return"phone"===e||"tablet"===e}Te.displayName="InputColor",e.InputColor=Te}));
|
|
2
|
-
//# sourceMappingURL=InputColor-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './swatchData-ef8329c2', './clientHints-6d361eaa', './FormFieldContext-a024b891', './logger-0f873e29', './TabbableModeContext-a9c97640', './useTranslationBundle-8e42d505', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-e406e352', './Flex-07d2aa5b', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-daf96749', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-ae57629b', 'css!./IconStyle.styles.css', './IconButton-232d63fc', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './Popup-695781d6', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', 'module', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './UNSAFE_InputColor/themes/InputColorPickerDropdownStyles.css', './Sheet-c7f3fe2d', './ColorPicker-fdbea1d5', './SectionedContent-054e2fc2', './useDownToggle-80b61b43', './useClearIcon-05225968', './useFocusableTextField-8b755b15', './FormContext-6b0879a0', './useFormContext-b8cbbb21', './useHover-8b8a1496', './useTextField-3ab0a23b', './Label-3c17bcc9', './keyboardUtils-fb6219eb', './TextFieldInput-eb40adaa', 'css!./ObfuscatedTextFieldInputStyles.styles.css', './ReadonlyTextFieldInput-e5723c48', './StyledTextField-5e554e5b', './TextField-51b63f5f', 'css!./LiveRegionStyles.styles.css', './UNSAFE_TextField/themes/TextFieldStyles.css', 'css!./SkeletonStyles.styles.css', 'css!./TextFieldLoadingStyles.styles.css', 'css!./TextFieldStyles.styles.css', 'module', './UNSAFE_TextField/themes/redwood/TextFieldVariants.css', './CompactUserAssistance-5ef03b0a', './mergeProps-bcfa6a92', './ClearIcon-13bd61d3', './useCurrentValueReducer-faded381', './useSelectableTextField-900d2860', './ColorSwatch-57d78771'], (function(e,s,t,o,a,l,n,r,i,c,d,u,p,m,b,h,y,x,C,S,f,v,F,T,g,A,I,R,w,V,U,k,D,E,j,P,_,B,L,H,M,N,O,z,W,q,G,K,Z,$,J,Q,X,Y,ee,se,te,oe,ae,le,ne,re,ie,ce,de,ue,pe,me,be,he,ye,xe,Ce){"use strict";const Se=({anchorRef:e,assistiveText:t,swatchSize:a,palette:l,helpSourceLink:r,helpSourceText:i,isDisabled:d,isOpen:u,isReadonly:p,label:b,onClose:h,onCommit:y,messages:x,testId:C,userAssistanceDensity:S,value:f})=>{const[v,F]=o.useState(!1),[T,g]=o.useState(u),A=o.useCallback((e=>{F(e.placement.startsWith("top"))}),[]);T!==u&&(g(u),u||F(!1));const I=fe(),{colorPicker_label:R}=c.useTranslationBundle("@oracle/oraclejet-preact"),w=R(),V=s.jsx(W.ColorPicker,{height:I?void 0:"auto",onCommit:y,maxWidth:I?"100%":void 0,width:"100%",swatchSize:a,palette:l,testId:C,value:f}),U=!u||v&&!I||d||p||!(t||r||x&&x.length>0)||"efficient"!==S&&"reflow"!==S?void 0:s.jsx(n.FormFieldContext.Provider,{value:{isFocused:!0},children:s.jsx("div",{class:O.userAssistanceStyles,children:s.jsx(m.InlineUserAssistance,{assistiveText:t,fieldLabel:b,helpSourceLink:r,helpSourceText:i,messages:x,userAssistanceDensity:S})})}),k=C?C+(I?"_sheet":"_dropdown"):void 0,D=s.jsx("div",{class:O.dropdownStyles,children:s.jsx(q.SectionedContent,{paddingBlockEnd:"3.5x",paddingBlockStart:"3.5x",paddingInlineEnd:"3.5x",paddingInlineStart:"3.5x","aria-label":w,footer:U,hasFocusTrap:!0,main:V,role:"dialog",testId:k})});return I?s.jsx(z.Sheet,{isOpen:u,onClose:h,children:s.jsx(q.SectionedContent,{"aria-label":w,footer:U,hasFocusTrap:!0,main:V,role:"dialog",testId:k})}):s.jsx(q.StickyPositioningDropdown,{anchorRef:e,isOpen:u,onClose:h,onPosition:A,sizeOptions:{isMaxWidthAdjusted:!1,isMaxHeightAdjusted:!0},children:D})},fe=()=>"phone"===l.getClientHints().deviceType,ve=(e,s)=>{switch(s.type){case"colorChanged":case"colorSelected":return{...e,colorValue:s.data};case"reset":return{colorValue:s.data};default:return e}},Fe=({onCommit:e,onInput:s,value:t})=>{const[l,n]=o.useState(!1),r=o.useRef(null),i=o.useRef(null),c=o.useRef(!1),d=o.useRef(),u=o.useRef(t),p=o.useRef(t),m=o.useRef(t),b=o.useRef(!1),{state:h,dispatch:y}=(({value:e})=>{const[s,t]=o.useReducer(ve,{colorValue:e});return{state:s,dispatch:t}})({value:t});a.colorsAreDifferent(m.current,t)&&(m.current=t,a.colorsAreDifferent(t,h.colorValue)&&(y({type:"reset",data:t}),p.current=t,u.current=t)),o.useEffect((()=>{a.colorsAreDifferent(h.colorValue,p.current)&&(s({previousValue:p.current,value:h.colorValue}),p.current=h.colorValue),b.current&&a.colorsAreDifferent(h.colorValue,u.current)&&(e?.({previousValue:u.current,value:h.colorValue}),u.current=h.colorValue,b.current=!1)}),[e,s,h.colorValue]);const x=o.useCallback((e=>{y({type:"colorChanged",data:e.value})}),[y]),C=o.useCallback((()=>{a.colorsAreDifferent(u.current,h.colorValue)&&(e?.({value:h.colorValue,previousValue:u.current}),u.current=h.colorValue)}),[e,h.colorValue]),S=o.useCallback((()=>{c.current||n((e=>!e)),c.current=!1}),[]),f=o.useCallback((e=>{"outsideMousedown"===e.reason?(c.current=!0,clearTimeout(d.current),d.current=setTimeout((()=>{c.current=!1}),200)):"dismissed"!==e.reason&&"keyboardDismissed"!==e.reason||r.current?.focus(),n(!1)}),[]),v=o.useCallback((e=>{r.current?.focus(),b.current=!0,y({type:"colorSelected",data:e.value}),n(!1)}),[y]),F=o.useCallback((()=>{n(!0)}),[]),{triggerProps:T}=G.useDownToggle({isOpen:l,onToggle:F});return{colorIconActionHandler:S,colorPickerCommitHandler:v,dropdownCloseHandler:f,containerDropdownProps:T,colorValue:h.colorValue,iconRef:r,isOpen:l,colorCommitHandler:C,colorInputHandler:x,colorRef:i}},Te=t.forwardRef((({"aria-describedby":e,swatchSize:t,palette:l,value:r,isDisabled:i,isReadonly:d,labelEdge:u,labelStartWidth:p,isRequiredShown:b=!1,isRequired:h=!1,placeholder:y,hasClearIcon:x,columnSpan:C,textAlign:S,autoComplete:f,messages:v,assistiveText:F,helpSourceLink:T,helpSourceText:g,label:A,onCommit:I,onInput:R,testId:w,variant:V,userAssistanceDensity:U},k)=>{const{colorIconActionHandler:D,colorPickerCommitHandler:E,dropdownCloseHandler:j,colorValue:P,containerDropdownProps:_,iconRef:B,isOpen:L,colorCommitHandler:H,colorInputHandler:M,colorRef:N}=Fe({onCommit:I,onInput:R,value:r}),O=o.useRef(null),{inputColor_selectColor:z}=c.useTranslationBundle("@oracle/oraclejet-preact"),W=z(),{onKeyDown:q,...G}=_,{currentCommitValue:$,dispatch:ee}=ye.useCurrentValueReducer({value:P}),te=o.useCallback((e=>{ee({type:"input",payload:e.value}),M?.(e)}),[M,ee]),ne=o.useCallback((e=>{ee({type:"commit",payload:e.value}),H?.(e)}),[H,ee]),{isDisabled:re,isReadonly:ie,labelEdge:ce,labelStartWidth:de,textAlign:ue,userAssistanceDensity:pe}=J.useFormContext(),fe=i??re,ve=d??ie,Te=u??ce,Ae=p??de,Ie=S??ue,Re=U??pe,we=o.useRef(null),{focusProps:Ve,isFocused:Ue,methods:ke}=Z.useFocusableTextField({isDisabled:fe,isReadonly:ve,enabledElementRef:N,readonlyElementRef:we}),{methods:De}=xe.useSelectableTextField(N);o.useImperativeHandle(k,(()=>be.mergeProps(ke,De)),[ke,De]);const{hoverProps:Ee,isHover:je}=Q.useHover({isDisabled:ve||fe||!1}),{formFieldContext:Pe,inputProps:_e,labelProps:Be,textFieldProps:Le,userAssistanceProps:He}=X.useTextField({ariaDescribedBy:e,helpSourceLink:T,helpSourceText:g,isDisabled:fe,isFocused:Ue||L,isReadonly:ve,isRequiredShown:b,labelEdge:Te,messages:v,styleVariant:V,userAssistanceDensity:Re,value:P}),Me=o.useCallback((()=>{N.current?.focus(),te?.({previousValue:P,value:void 0})}),[te,P,N]),Ne=K.useClearIcon({clearIcon:s.jsx(he.ClearIcon,{onClick:Me,testId:`${w}_clearicon`}),display:x,hasValue:Pe.hasValue,isFocused:Ue,isEnabled:!ve&&!fe,isHover:je}),Oe=void 0!==A&&"inside"===Te,ze="none"!==Te?s.jsx(Y.Label,{...Be,children:A}):void 0,We={label:"none"!==Te?ze:void 0,labelEdge:"none"!==Te?Te:void 0,labelStartWidth:"none"!==Te?Ae:void 0},qe="none"===Te?A:void 0,Ge="efficient"===Re||"reflow"===Re?fe||ve?"efficient"!==Re?void 0:s.jsx(m.InlineUserAssistance,{userAssistanceDensity:Re,...He}):s.jsx(m.InlineUserAssistance,{assistiveText:F,fieldLabel:A,helpSourceLink:T,helpSourceText:g,messages:v,isRequiredShown:b,userAssistanceDensity:Re,...He}):void 0,Ke=o.useRef(null),Ze=O??Ke,$e="compact"===Re?s.jsx(me.CompactUserAssistance,{anchorRef:Ze,messages:v,assistiveText:F,...He}):void 0,Je=ve?s.jsx(oe.ReadonlyTextFieldInput,{"aria-describedby":_e["aria-describedby"],"aria-label":qe,"aria-labelledby":Be.id,as:"div",elementRef:we,textAlign:Ie,value:P,hasEmptyLabel:""===A&&"none"===Te,hasInsideLabel:Oe}):s.jsx(se.TextFieldInput,{"aria-labelledby":Be.id,"aria-label":qe,autoComplete:f,currentCommitValue:$,hasEmptyLabel:""===A&&"none"===Te,hasEndContent:!1,hasInsideLabel:void 0!==ze&&"inside"===Te,hasStartContent:!0,inputRef:N,isRequired:h,placeholder:y,textAlign:Ie,type:ge()?"text":void 0,value:P,onCommit:ne,onInput:te,onKeyDown:q,..._e});return s.jsxs(s.Fragment,{children:[s.jsx(n.FormFieldContext.Provider,{value:Pe,children:ve?s.jsx(ae.ReadonlyTextField,{role:"presentation",columnSpan:C,compactUserAssistance:$e,inlineUserAssistance:Ge,onBlur:Ve.onFocusOut,onFocus:Ve.onFocusIn,ref:Ze,mainContent:Je,testId:w,...We}):s.jsx(le.TextField,{endContent:Ne,columnSpan:C,compactUserAssistance:$e,inlineUserAssistance:Ge,mainContent:Je,onBlur:Ve.onFocusOut,onFocus:Ve.onFocusIn,startContent:s.jsx(Ce.ColorSwatch,{size:"xs","aria-haspopup":l?"grid":void 0,"aria-label":l?W:void 0,isDisabled:fe,isButton:!0,isTooltipDisabled:L,ref:B,testId:w?w+"_colorIcon":void 0,value:$,onToggle:fe||!l?void 0:D}),mainFieldRef:Ze,hasZeroStartMargin:!0,testId:w,...Le,...We,...Ee,...G})}),L&&!ve&&!fe&&s.jsx(Se,{anchorRef:O,assistiveText:F,helpSourceLink:T,helpSourceText:g,isDisabled:fe,isReadonly:ve,isOpen:L,label:A,onClose:j,onCommit:E,messages:v,testId:w?w+"_colorPicker":void 0,userAssistanceDensity:Re,value:P&&a.isValidColorValue(P)?P:void 0,palette:l,swatchSize:t})]})}));function ge(){const e=l.getClientHints().deviceType;return"phone"===e||"tablet"===e}Te.displayName="InputColor",e.InputColor=Te}));
|
|
2
|
+
//# sourceMappingURL=InputColor-d8c29025.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputColor-192a309b.js","sources":["../../src/UNSAFE_InputColor/InputColorPickerDropdown.tsx","../../src/UNSAFE_InputColor/useInputColorState.ts","../../src/UNSAFE_InputColor/useInputColor.ts","../../src/UNSAFE_InputColor/InputColor.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentProps } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { type CloseDetail as DropdownCloseDetail } from '#UNSAFE_Dropdown';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { dropdownStyles, userAssistanceStyles } from './themes/InputColorPickerDropdownStyles.css';\nimport { PositionData } from '../UNSAFE_Floating';\nimport { StickyPositioningDropdown } from '#PRIVATE_FormControls';\nimport { SectionedContent } from '#PRIVATE_FormControls';\nimport { type CloseDetail as SheetCloseDetail, Sheet } from '#UNSAFE_Sheet';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { SizeOptions } from '#UNSAFE_Floating/Floating';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype StickyPositioningDropdownProps = ComponentProps<typeof StickyPositioningDropdown>;\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype PickedPropsFromColorPicker = Pick<ColorPickerProps, 'value' | 'onCommit'>;\ntype PickedPropsFromDropdown = Omit<StickyPositioningDropdownProps, 'onClose'>;\ntype CloseDetail = SheetCloseDetail | DropdownCloseDetail;\ntype PickedPropsFromInputColor = Pick<\n InputColorProps,\n | 'swatchSize'\n | 'palette'\n | 'value'\n | 'aria-describedby'\n | 'assistiveText'\n | 'columnSpan'\n | 'helpSourceLink'\n | 'helpSourceText'\n | 'isDisabled'\n | 'isReadonly'\n | 'isRequired'\n | 'isRequiredShown'\n | 'label'\n | 'labelEdge'\n | 'labelStartWidth'\n | 'messages'\n | 'textAlign'\n | 'testId'\n | 'userAssistanceDensity'\n | 'variant'\n>;\n\ntype Props = PickedPropsFromColorPicker &\n PickedPropsFromInputColor &\n PickedPropsFromDropdown &\n TestIdProps & {\n /**\n * Called when the dropdown or sheet is supposed to be closed.\n */\n onClose?: (detail: CloseDetail) => void;\n };\n\n/**\n * Component that renders ColorPicker either inside a dropdown or sheet; in mobile,\n * it renders inside a sheet. Additionally, when a dropdown is being shown beneath\n * the component, we also show any user assistance text or messages below the picker\n * because otherwise that information would be obscured from view. When a sheet is being\n * shown, it will always display UA and messages at the bottom of the sheet.\n */\nconst InputColorPickerDropdown = ({\n anchorRef,\n assistiveText,\n swatchSize,\n palette,\n helpSourceLink,\n helpSourceText,\n isDisabled,\n isOpen,\n isReadonly,\n label,\n onClose,\n onCommit,\n messages,\n testId,\n userAssistanceDensity,\n value\n}: Props) => {\n // If the dropdown opens above the component, we don't want to show UA or messages.\n const [isDropdownAbove, setDropdownAbove] = useState(false);\n const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n const handleDropdownPosition = useCallback<\n NonNullable<StickyPositioningDropdownProps['onPosition']>\n >((data: PositionData) => {\n setDropdownAbove(data.placement.startsWith('top'));\n }, []);\n // Reset the flag when the dropdown is closed.\n if (prevIsOpen !== isOpen) {\n setPrevIsOpen(isOpen);\n if (!isOpen) {\n setDropdownAbove(false);\n }\n }\n\n const sizeOptions: SizeOptions = {\n isMaxWidthAdjusted: false,\n isMaxHeightAdjusted: true\n };\n\n // On mobile phones, the dropdown becomes a sheet.\n const shouldShowSheet = isPhone();\n\n const { colorPicker_label } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n const colorPickerAriaLabel = colorPicker_label();\n\n const colorPickerMainContent = (\n <ColorPicker\n height={!shouldShowSheet ? 'auto' : undefined}\n onCommit={onCommit}\n // for sheet, we want the width to grow to the width of the sheet, otherwise it will use the theme default.\n maxWidth={shouldShowSheet ? '100%' : undefined}\n width=\"100%\"\n swatchSize={swatchSize}\n palette={palette}\n testId={testId}\n value={value}\n />\n );\n\n const inlineUserAssistanceFooter =\n isOpen &&\n (!isDropdownAbove || shouldShowSheet) &&\n !isDisabled &&\n !isReadonly &&\n (assistiveText || helpSourceLink || (messages && messages.length > 0)) &&\n (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (\n <FormFieldContext.Provider value={{ isFocused: true }}>\n <div class={userAssistanceStyles}>\n <InlineUserAssistance\n assistiveText={assistiveText}\n fieldLabel={label}\n helpSourceLink={helpSourceLink}\n helpSourceText={helpSourceText}\n messages={messages}\n userAssistanceDensity={userAssistanceDensity}\n />\n </div>\n </FormFieldContext.Provider>\n ) : undefined;\n\n const contentTestId = testId ? testId + (shouldShowSheet ? '_sheet' : '_dropdown') : undefined;\n\n // The same content is displayed either in a dropdown or sheet: color picker and inline UA.\n // Add styling to the dropdown to enforce a fixed width.\n const dropdownContent = (\n <div class={dropdownStyles}>\n <SectionedContent\n paddingBlockEnd=\"3.5x\"\n paddingBlockStart=\"3.5x\"\n paddingInlineEnd=\"3.5x\"\n paddingInlineStart=\"3.5x\"\n aria-label={colorPickerAriaLabel}\n footer={inlineUserAssistanceFooter}\n hasFocusTrap={true}\n main={colorPickerMainContent}\n role=\"dialog\"\n testId={contentTestId}\n />\n </div>\n );\n\n const dropdown = shouldShowSheet ? (\n <Sheet isOpen={isOpen} onClose={onClose}>\n <SectionedContent\n aria-label={colorPickerAriaLabel}\n footer={inlineUserAssistanceFooter}\n hasFocusTrap={true}\n main={colorPickerMainContent}\n role=\"dialog\"\n testId={contentTestId}\n />\n </Sheet>\n ) : (\n <StickyPositioningDropdown\n anchorRef={anchorRef}\n isOpen={isOpen}\n onClose={onClose}\n onPosition={handleDropdownPosition}\n sizeOptions={sizeOptions}>\n {dropdownContent}\n </StickyPositioningDropdown>\n );\n\n return dropdown;\n};\n\nconst isPhone = () => {\n return getClientHints().deviceType === 'phone';\n};\n\nexport { InputColorPickerDropdown, type CloseDetail };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { useReducer } from 'preact/hooks';\nimport { type ColorValue } from '#utils/UNSAFE_color';\n\ntype InputColorState = {\n /**\n * Represents the current color value of the component. The user either selected\n * the color in the picker, or typed it into the color field.\n */\n colorValue?: ColorValue;\n};\n\ntype ColorChangedAction = { type: 'colorChanged'; data?: ColorValue };\ntype ColorResetAction = { type: 'reset'; data?: ColorValue };\ntype ColorSelectedAction = { type: 'colorSelected'; data?: ColorValue };\ntype InputColorReducerAction = ColorChangedAction | ColorResetAction | ColorSelectedAction;\n\n// Use a reducer function to manage InputColorState.\nconst inputColorReducer = (\n state: InputColorState,\n action: InputColorReducerAction\n): InputColorState => {\n switch (action.type) {\n case 'colorChanged': {\n return {\n ...state,\n colorValue: action.data\n };\n }\n case 'colorSelected': {\n return { ...state, colorValue: action.data };\n }\n case 'reset': {\n return {\n colorValue: action.data\n };\n }\n default:\n return state;\n }\n};\n\ntype Props = {\n /**\n * The value of the InputColor, or undefined.\n */\n value?: ColorValue;\n};\n\n/**\n * useInputColorState calls useReducer to determine the initial state. Any changes to that state\n * are managed by dispatching actions to the reducer function.\n */\nconst useInputColorState = ({ value }: Props) => {\n const [state, dispatch] = useReducer(inputColorReducer, {\n colorValue: value\n });\n\n return { state, dispatch };\n};\n\nexport { useInputColorState };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { ElementRef } from 'preact/compat';\nimport { colorsAreDifferent, type ColorValue } from '#utils/UNSAFE_color';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { CloseDetail, InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport { useInputColorState } from './useInputColorState';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { useDownToggle } from '#hooks/UNSAFE_useDownToggle';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype IconButtonProps = ComponentProps<typeof IconButton>;\ntype DropdownProps = ComponentProps<typeof InputColorPickerDropdown>;\n\ntype Props = {\n onCommit: InputColorProps['onCommit'];\n onInput: InputColorProps['onInput'];\n value: InputColorProps['value'];\n};\n\n/**\n * Hook that provides handlers and other functionality for InputColor.\n */\nconst useInputColor = ({ onCommit, onInput, value: currentValue }: Props) => {\n // Whether the dropdown is open.\n const [isOpen, setIsOpen] = useState<boolean>(false);\n\n // Ref to the swatch icon button.\n const iconRef: RefObject<SwatchHandle> = useRef<SwatchHandle>(null);\n\n // Ref to the text input which holds color value\n const colorRef: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);\n\n // Keep track of whether the dropdown was just dismissed from an outside mousedown event.\n const outsideMousedownRef = useRef<boolean>(false);\n const outsideMousedownTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>();\n\n // Keep track of the last color values passed to onInput and onCommit.\n const lastCommittedColorRef = useRef<ColorValue | undefined>(currentValue);\n const lastColorRef = useRef<ColorValue | undefined>(currentValue);\n\n // Keep track of the last controlled value passed from the parent, so we can detect a programmatic change.\n const lastValueFromParentRef = useRef<ColorValue | undefined>(currentValue);\n\n // Keep track of whether a color was selected in the color picker.\n const colorSelectedRef = useRef<boolean>(false);\n\n const { state, dispatch } = useInputColorState({ value: currentValue });\n\n // If a new value is being pushed from the parent, and that value differs from\n // the current value of the reducer, then this is a programmatic update\n // and we need to call 'reset' to update the reducer state. Otherwise, the only\n // time the reducer state is updated from the value is on mount.\n if (colorsAreDifferent(lastValueFromParentRef.current, currentValue)) {\n lastValueFromParentRef.current = currentValue;\n if (colorsAreDifferent(currentValue, state.colorValue)) {\n dispatch({ type: 'reset', data: currentValue });\n lastColorRef.current = currentValue;\n lastCommittedColorRef.current = currentValue;\n }\n }\n\n // Reducer updates are async, so wait until the state updates and then call our callbacks.\n useEffect(() => {\n if (colorsAreDifferent(state.colorValue, lastColorRef.current)) {\n onInput({ previousValue: lastColorRef.current, value: state.colorValue });\n lastColorRef.current = state.colorValue;\n }\n if (\n colorSelectedRef.current &&\n colorsAreDifferent(state.colorValue, lastCommittedColorRef.current)\n ) {\n onCommit?.({ previousValue: lastCommittedColorRef.current, value: state.colorValue });\n lastCommittedColorRef.current = state.colorValue;\n colorSelectedRef.current = false;\n }\n }, [onCommit, onInput, state.colorValue]);\n\n // Handle onInput from InputColor as values are entered in the input field.\n // We wait for the state to update before calling onInput.\n const colorInputHandler = useCallback<InputColorProps['onInput']>(\n (detail: ValueUpdateDetail<ColorValue>) => {\n dispatch({ type: 'colorChanged', data: detail.value });\n },\n [dispatch]\n );\n\n // Handle onCommit from InputColor, which is called when the user presses Enter or the field is blurred.\n const colorCommitHandler = useCallback<NonNullable<InputColorProps['onCommit']>>(() => {\n // If the current color value differs from the last committed value, then call onCommit.\n if (colorsAreDifferent(lastCommittedColorRef.current, state.colorValue)) {\n onCommit?.({ value: state.colorValue, previousValue: lastCommittedColorRef.current });\n lastCommittedColorRef.current = state.colorValue;\n }\n }, [onCommit, state.colorValue]);\n\n // Respond to onAction event from the swatch icon button. Toggles the color picker dropdown.\n const colorIconActionHandler = useCallback<NonNullable<IconButtonProps['onAction']>>(() => {\n // Only toggle the value of isOpen if we didn't just dismiss the dropdown.\n if (!outsideMousedownRef.current) {\n setIsOpen((prevIsOpen) => !prevIsOpen);\n }\n outsideMousedownRef.current = false;\n }, []);\n\n const dropdownCloseHandler = useCallback<NonNullable<DropdownProps['onClose']>>(\n (detail: CloseDetail) => {\n // Keep track of when the dropdown is closed via outside mousedown, including when the swatch icon\n // is clicked. We need this in order to toggle visibility of the picker and dropdown.\n if (detail.reason === 'outsideMousedown') {\n outsideMousedownRef.current = true;\n clearTimeout(outsideMousedownTimerRef.current);\n\n // Clear the flag after a short delay to ensure the dropdown can be opened again.\n outsideMousedownTimerRef.current = setTimeout(() => {\n outsideMousedownRef.current = false;\n }, 200);\n } else if (detail.reason === 'dismissed' || detail.reason === 'keyboardDismissed') {\n // Focus the swatch icon when the dropdown is closed.\n iconRef.current?.focus();\n }\n setIsOpen(false);\n },\n []\n );\n\n // Handle color selection in the picker.\n // - Updates the value in state.\n // - Closes the dropdown.\n // - Sets focus to the color field.\n const colorPickerCommitHandler = useCallback<ColorPickerProps['onCommit']>(\n (detail: ValueUpdateDetail<ColorValue>) => {\n // Set focus to the swatch when a color is selected.\n iconRef.current?.focus();\n\n // Set a ref indicating a color was selected.\n colorSelectedRef.current = true;\n dispatch({ type: 'colorSelected', data: detail.value });\n setIsOpen(false);\n },\n [dispatch]\n );\n\n // The Redwood UX design calls for the dropdown to open when the down arrow is pressed.\n // Handle opening the dropdown when the down arrow is pressed in the text edit field.\n const colorPickerDownHandler = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const { triggerProps: containerDropdownProps } = useDownToggle({\n isOpen,\n onToggle: colorPickerDownHandler\n });\n\n return {\n colorIconActionHandler,\n colorPickerCommitHandler,\n dropdownCloseHandler,\n containerDropdownProps,\n colorValue: state.colorValue,\n iconRef,\n isOpen,\n colorCommitHandler,\n colorInputHandler,\n colorRef\n };\n};\n\nexport { useInputColor };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Ref } from 'preact';\nimport { forwardRef, ElementRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { type BundleType } from '../resources/nls/bundle';\nimport { type ColorValue, isValidColorValue } from '#utils/UNSAFE_color';\nimport { InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { useInputColor } from './useInputColor';\n\nimport { useClearIcon } from '../hooks/UNSAFE_useClearIcon';\nimport { FocusableHandle, useFocusableTextField } from '../hooks/UNSAFE_useFocusableTextField';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useTextField } from '../hooks/UNSAFE_useTextField';\nimport { Label } from '../UNSAFE_Label';\n\nimport {\n ReadonlyTextField,\n ReadonlyTextFieldInput,\n TextField,\n TextFieldInput\n} from '../UNSAFE_TextField';\nimport { CompactUserAssistance, InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { ClearIcon } from '../PRIVATE_ClearIcon/ClearIcon';\nimport { useCurrentValueReducer } from '../hooks/UNSAFE_useCurrentValueReducer';\nimport { SelectableHandle, useSelectableTextField } from '#hooks/UNSAFE_useSelectableTextField';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { InputColorPublicProps as Props } from './InputColor.types';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype FocusSelectHandle = FocusableHandle & SelectableHandle;\n\n/**\n * An Input Color is a form field that allows users to select or input a color value,\n * using a color picker or by enterihg a HEX code.\n */\nexport const InputColor = forwardRef(\n (\n {\n 'aria-describedby': ariaDescribedBy,\n swatchSize,\n palette,\n value,\n isDisabled: propIsDisabled,\n isReadonly: propIsReadonly,\n labelEdge: propLabelEdge,\n labelStartWidth: propLabelStartWidth,\n isRequiredShown = false,\n isRequired = false,\n placeholder,\n hasClearIcon,\n columnSpan,\n textAlign: propTextAlign,\n autoComplete,\n messages,\n assistiveText,\n helpSourceLink,\n helpSourceText,\n label,\n onCommit,\n onInput,\n testId,\n variant,\n userAssistanceDensity: propUserAssistanceDensity\n }: Props,\n ref?: Ref<FocusSelectHandle>\n ) => {\n const {\n colorIconActionHandler,\n colorPickerCommitHandler,\n dropdownCloseHandler,\n colorValue,\n containerDropdownProps,\n iconRef,\n isOpen,\n colorCommitHandler,\n colorInputHandler,\n colorRef: enabledElementRef\n } = useInputColor({\n onCommit,\n onInput,\n value\n });\n\n const mainFieldRef = useRef<HTMLDivElement>(null);\n const { inputColor_selectColor } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n const colorIconAriaLabel = inputColor_selectColor();\n const { onKeyDown, ...inputContainerAriaProps } = containerDropdownProps;\n\n const { currentCommitValue, dispatch } = useCurrentValueReducer({ value: colorValue });\n const onInputAndDispatch = useCallback(\n (detail: ValueUpdateDetail<ColorValue>) => {\n // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n dispatch({ type: 'input', payload: detail.value });\n colorInputHandler?.(detail);\n },\n [colorInputHandler, dispatch]\n );\n const onCommitAndDispatch = useCallback(\n (detail: ValueUpdateDetail<ColorValue>) => {\n // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n dispatch({ type: 'commit', payload: detail.value });\n colorCommitHandler?.(detail);\n },\n [colorCommitHandler, dispatch]\n );\n\n const startContent = () => (\n <ColorSwatch\n size=\"xs\"\n aria-haspopup={palette ? 'grid' : undefined} // with only palette, grid is a better choice than dialog for now.\n aria-label={palette ? colorIconAriaLabel : undefined}\n isDisabled={isDisabled}\n isButton={true}\n isTooltipDisabled={isOpen}\n ref={iconRef as Ref<SwatchHandle>}\n testId={testId ? testId + '_colorIcon' : undefined}\n value={currentCommitValue as ColorValue}\n onToggle={isDisabled || !palette ? undefined : colorIconActionHandler}\n />\n );\n const {\n isDisabled: isFormDisabled,\n isReadonly: isFormReadonly,\n labelEdge: formLabelEdge,\n labelStartWidth: formLabelStartWidth,\n textAlign: formTextAlign,\n userAssistanceDensity: formUserAssistanceDensity\n } = useFormContext();\n // default to FormContext values if component properties are not specified\n const isDisabled = propIsDisabled ?? isFormDisabled;\n const isReadonly = propIsReadonly ?? isFormReadonly;\n const labelEdge = propLabelEdge ?? formLabelEdge;\n const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n const textAlign = propTextAlign ?? formTextAlign;\n const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n const readonlyElementRef = useRef<HTMLDivElement>(null);\n\n const {\n focusProps,\n isFocused,\n methods: focusMethods\n } = useFocusableTextField<HTMLInputElement, HTMLDivElement>({\n isDisabled,\n isReadonly,\n enabledElementRef,\n readonlyElementRef\n });\n\n const { methods: selectMethods } = useSelectableTextField<HTMLInputElement>(enabledElementRef);\n\n useImperativeHandle(ref!, () => mergeProps(focusMethods, selectMethods), [\n focusMethods,\n selectMethods\n ]);\n\n const { hoverProps, isHover } = useHover({ isDisabled: isReadonly || isDisabled || false });\n\n const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } =\n useTextField({\n ariaDescribedBy,\n helpSourceLink,\n helpSourceText,\n isDisabled,\n isFocused: isFocused || isOpen,\n isReadonly,\n isRequiredShown,\n labelEdge,\n messages,\n styleVariant: variant,\n userAssistanceDensity,\n value: colorValue\n });\n\n const onClickClearIcon = useCallback(() => {\n // Clicking the clear icon should put the focus on the input field\n enabledElementRef.current?.focus();\n // Send an event to clear the field's value\n onInputAndDispatch?.({ previousValue: colorValue, value: undefined });\n }, [onInputAndDispatch, colorValue, enabledElementRef]);\n\n const maybeClearIcon = useClearIcon({\n clearIcon: <ClearIcon onClick={onClickClearIcon} testId={`${testId}_clearicon`} />,\n display: hasClearIcon,\n hasValue: formFieldContext.hasValue,\n isFocused,\n isEnabled: !isReadonly && !isDisabled,\n isHover\n });\n\n const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n const labelComp = labelEdge !== 'none' ? <Label {...labelProps}>{label}</Label> : undefined;\n\n const fieldLabelProps = {\n label: labelEdge !== 'none' ? labelComp : undefined,\n labelEdge: labelEdge !== 'none' ? labelEdge : undefined,\n labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined\n };\n\n const ariaLabel = labelEdge === 'none' ? label : undefined;\n const isInlineDensity =\n userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';\n\n const inlineUserAssistance = isInlineDensity ? (\n isDisabled || isReadonly ? (\n // save space for user assistance if density is 'efficient', even though we don't\n // render user assistance for disabled or readonly fields\n userAssistanceDensity !== 'efficient' ? undefined : (\n <InlineUserAssistance\n userAssistanceDensity={userAssistanceDensity}\n {...userAssistanceProps}\n />\n )\n ) : (\n <InlineUserAssistance\n assistiveText={assistiveText}\n fieldLabel={label}\n helpSourceLink={helpSourceLink}\n helpSourceText={helpSourceText}\n messages={messages}\n isRequiredShown={isRequiredShown}\n userAssistanceDensity={userAssistanceDensity}\n {...userAssistanceProps}\n />\n )\n ) : undefined;\n\n const aRef = useRef<HTMLDivElement>(null);\n const anchorRef = mainFieldRef ?? aRef;\n\n const compactUserAssistance =\n userAssistanceDensity === 'compact' ? (\n <CompactUserAssistance\n anchorRef={anchorRef}\n messages={messages}\n assistiveText={assistiveText}\n {...userAssistanceProps}\n />\n ) : undefined;\n\n const mainContent = isReadonly ? (\n <ReadonlyTextFieldInput\n aria-describedby={inputProps['aria-describedby']}\n aria-label={ariaLabel}\n aria-labelledby={labelProps.id}\n as=\"div\"\n elementRef={readonlyElementRef}\n textAlign={textAlign}\n value={colorValue}\n hasEmptyLabel={label === '' && labelEdge === 'none'}\n hasInsideLabel={hasInsideLabel}\n />\n ) : (\n <TextFieldInput\n aria-labelledby={labelProps.id}\n aria-label={ariaLabel}\n autoComplete={autoComplete}\n currentCommitValue={currentCommitValue}\n hasEmptyLabel={label === '' && labelEdge === 'none'}\n hasEndContent={false}\n hasInsideLabel={labelComp !== undefined && labelEdge === 'inside'}\n hasStartContent={true}\n inputRef={enabledElementRef}\n isRequired={isRequired}\n placeholder={placeholder}\n textAlign={textAlign}\n type={isMobile() ? 'text' : undefined}\n value={colorValue}\n onCommit={\n onCommitAndDispatch as (detail: ValueUpdateDetail<string>) => {\n value: string;\n }\n }\n onInput={\n onInputAndDispatch as (detail: ValueUpdateDetail<string>) => {\n value: string;\n }\n }\n onKeyDown={onKeyDown}\n {...inputProps}\n />\n );\n\n return (\n <>\n <FormFieldContext.Provider value={formFieldContext}>\n {isReadonly ? (\n <ReadonlyTextField\n role=\"presentation\"\n columnSpan={columnSpan}\n compactUserAssistance={compactUserAssistance}\n inlineUserAssistance={inlineUserAssistance}\n onBlur={focusProps.onFocusOut}\n onFocus={focusProps.onFocusIn}\n ref={anchorRef}\n mainContent={mainContent}\n testId={testId}\n {...fieldLabelProps}></ReadonlyTextField>\n ) : (\n <TextField\n endContent={maybeClearIcon}\n columnSpan={columnSpan}\n compactUserAssistance={compactUserAssistance}\n inlineUserAssistance={inlineUserAssistance}\n mainContent={mainContent}\n onBlur={focusProps.onFocusOut}\n onFocus={focusProps.onFocusIn}\n startContent={startContent()}\n mainFieldRef={anchorRef}\n hasZeroStartMargin={true}\n testId={testId}\n {...textFieldProps}\n {...fieldLabelProps}\n {...hoverProps}\n {...inputContainerAriaProps}\n />\n )}\n </FormFieldContext.Provider>\n\n {isOpen && !isReadonly && !isDisabled && (\n <InputColorPickerDropdown\n anchorRef={mainFieldRef}\n assistiveText={assistiveText}\n helpSourceLink={helpSourceLink}\n helpSourceText={helpSourceText}\n isDisabled={isDisabled}\n isReadonly={isReadonly}\n isOpen={isOpen}\n label={label}\n onClose={dropdownCloseHandler}\n onCommit={colorPickerCommitHandler}\n messages={messages}\n testId={testId ? testId + '_colorPicker' : undefined}\n userAssistanceDensity={userAssistanceDensity}\n // memoize this for performance\n value={colorValue && isValidColorValue(colorValue) ? colorValue : undefined}\n palette={palette}\n swatchSize={swatchSize}\n />\n )}\n </>\n );\n }\n);\n\n/**\n * Helper function to determine whether the current device is a mobile device\n * @returns true if running on a mobile device, false otherwise\n */\nfunction isMobile() {\n const deviceType = getClientHints().deviceType;\n return deviceType === 'phone' || deviceType === 'tablet';\n}\nInputColor.displayName = 'InputColor';\n"],"names":["InputColorPickerDropdown","anchorRef","assistiveText","swatchSize","palette","helpSourceLink","helpSourceText","isDisabled","isOpen","isReadonly","label","onClose","onCommit","messages","testId","userAssistanceDensity","value","isDropdownAbove","setDropdownAbove","useState","prevIsOpen","setPrevIsOpen","handleDropdownPosition","useCallback","data","placement","startsWith","shouldShowSheet","isPhone","colorPicker_label","useTranslationBundle","colorPickerAriaLabel","colorPickerMainContent","_jsx","ColorPicker","height","undefined","maxWidth","width","inlineUserAssistanceFooter","length","FormFieldContext","Provider","isFocused","children","jsx","class","userAssistanceStyles","InlineUserAssistance","fieldLabel","contentTestId","dropdownContent","dropdownStyles","SectionedContent","paddingBlockEnd","paddingBlockStart","paddingInlineEnd","paddingInlineStart","footer","hasFocusTrap","main","role","Sheet","StickyPositioningDropdown","onPosition","sizeOptions","isMaxWidthAdjusted","isMaxHeightAdjusted","getClientHints","deviceType","inputColorReducer","state","action","type","colorValue","useInputColor","onInput","currentValue","setIsOpen","iconRef","useRef","colorRef","outsideMousedownRef","outsideMousedownTimerRef","lastCommittedColorRef","lastColorRef","lastValueFromParentRef","colorSelectedRef","dispatch","useReducer","useInputColorState","colorsAreDifferent","current","useEffect","previousValue","colorInputHandler","detail","colorCommitHandler","colorIconActionHandler","dropdownCloseHandler","reason","clearTimeout","setTimeout","focus","colorPickerCommitHandler","colorPickerDownHandler","triggerProps","containerDropdownProps","useDownToggle","onToggle","InputColor","forwardRef","ariaDescribedBy","propIsDisabled","propIsReadonly","labelEdge","propLabelEdge","labelStartWidth","propLabelStartWidth","isRequiredShown","isRequired","placeholder","hasClearIcon","columnSpan","textAlign","propTextAlign","autoComplete","variant","propUserAssistanceDensity","ref","enabledElementRef","mainFieldRef","inputColor_selectColor","colorIconAriaLabel","onKeyDown","inputContainerAriaProps","currentCommitValue","useCurrentValueReducer","onInputAndDispatch","payload","onCommitAndDispatch","isFormDisabled","isFormReadonly","formLabelEdge","formLabelStartWidth","formTextAlign","formUserAssistanceDensity","useFormContext","readonlyElementRef","focusProps","methods","focusMethods","useFocusableTextField","selectMethods","useSelectableTextField","useImperativeHandle","mergeProps","hoverProps","isHover","useHover","formFieldContext","inputProps","labelProps","textFieldProps","userAssistanceProps","useTextField","styleVariant","onClickClearIcon","maybeClearIcon","useClearIcon","clearIcon","ClearIcon","onClick","display","hasValue","isEnabled","hasInsideLabel","labelComp","Label","fieldLabelProps","ariaLabel","inlineUserAssistance","aRef","compactUserAssistance","CompactUserAssistance","mainContent","ReadonlyTextFieldInput","id","as","elementRef","hasEmptyLabel","TextFieldInput","hasEndContent","hasStartContent","inputRef","isMobile","_jsxs","ReadonlyTextField","onBlur","onFocusOut","onFocus","onFocusIn","TextField","endContent","startContent","ColorSwatch","size","isButton","isTooltipDisabled","hasZeroStartMargin","isValidColorValue","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputColor-d8c29025.js","sources":["../../src/UNSAFE_InputColor/InputColorPickerDropdown.tsx","../../src/UNSAFE_InputColor/useInputColorState.ts","../../src/UNSAFE_InputColor/useInputColor.ts","../../src/UNSAFE_InputColor/InputColor.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentProps } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport { BundleType } from '../resources/nls/bundle';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { type CloseDetail as DropdownCloseDetail } from '#UNSAFE_Dropdown';\nimport { getClientHints } from '#utils/PRIVATE_clientHints';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { dropdownStyles, userAssistanceStyles } from './themes/InputColorPickerDropdownStyles.css';\nimport { PositionData } from '../UNSAFE_Floating';\nimport { StickyPositioningDropdown } from '#PRIVATE_FormControls';\nimport { SectionedContent } from '#PRIVATE_FormControls';\nimport { type CloseDetail as SheetCloseDetail, Sheet } from '#UNSAFE_Sheet';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { SizeOptions } from '#UNSAFE_Floating/Floating';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype StickyPositioningDropdownProps = ComponentProps<typeof StickyPositioningDropdown>;\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype PickedPropsFromColorPicker = Pick<ColorPickerProps, 'value' | 'onCommit'>;\ntype PickedPropsFromDropdown = Omit<StickyPositioningDropdownProps, 'onClose'>;\ntype CloseDetail = SheetCloseDetail | DropdownCloseDetail;\ntype PickedPropsFromInputColor = Pick<\n InputColorProps,\n | 'swatchSize'\n | 'palette'\n | 'value'\n | 'aria-describedby'\n | 'assistiveText'\n | 'columnSpan'\n | 'helpSourceLink'\n | 'helpSourceText'\n | 'isDisabled'\n | 'isReadonly'\n | 'isRequired'\n | 'isRequiredShown'\n | 'label'\n | 'labelEdge'\n | 'labelStartWidth'\n | 'messages'\n | 'textAlign'\n | 'testId'\n | 'userAssistanceDensity'\n | 'variant'\n>;\n\ntype Props = PickedPropsFromColorPicker &\n PickedPropsFromInputColor &\n PickedPropsFromDropdown &\n TestIdProps & {\n /**\n * Called when the dropdown or sheet is supposed to be closed.\n */\n onClose?: (detail: CloseDetail) => void;\n };\n\n/**\n * Component that renders ColorPicker either inside a dropdown or sheet; in mobile,\n * it renders inside a sheet. Additionally, when a dropdown is being shown beneath\n * the component, we also show any user assistance text or messages below the picker\n * because otherwise that information would be obscured from view. When a sheet is being\n * shown, it will always display UA and messages at the bottom of the sheet.\n */\nconst InputColorPickerDropdown = ({\n anchorRef,\n assistiveText,\n swatchSize,\n palette,\n helpSourceLink,\n helpSourceText,\n isDisabled,\n isOpen,\n isReadonly,\n label,\n onClose,\n onCommit,\n messages,\n testId,\n userAssistanceDensity,\n value\n}: Props) => {\n // If the dropdown opens above the component, we don't want to show UA or messages.\n const [isDropdownAbove, setDropdownAbove] = useState(false);\n const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n const handleDropdownPosition = useCallback<\n NonNullable<StickyPositioningDropdownProps['onPosition']>\n >((data: PositionData) => {\n setDropdownAbove(data.placement.startsWith('top'));\n }, []);\n // Reset the flag when the dropdown is closed.\n if (prevIsOpen !== isOpen) {\n setPrevIsOpen(isOpen);\n if (!isOpen) {\n setDropdownAbove(false);\n }\n }\n\n const sizeOptions: SizeOptions = {\n isMaxWidthAdjusted: false,\n isMaxHeightAdjusted: true\n };\n\n // On mobile phones, the dropdown becomes a sheet.\n const shouldShowSheet = isPhone();\n\n const { colorPicker_label } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n const colorPickerAriaLabel = colorPicker_label();\n\n const colorPickerMainContent = (\n <ColorPicker\n height={!shouldShowSheet ? 'auto' : undefined}\n onCommit={onCommit}\n // for sheet, we want the width to grow to the width of the sheet, otherwise it will use the theme default.\n maxWidth={shouldShowSheet ? '100%' : undefined}\n width=\"100%\"\n swatchSize={swatchSize}\n palette={palette}\n testId={testId}\n value={value}\n />\n );\n\n const inlineUserAssistanceFooter =\n isOpen &&\n (!isDropdownAbove || shouldShowSheet) &&\n !isDisabled &&\n !isReadonly &&\n (assistiveText || helpSourceLink || (messages && messages.length > 0)) &&\n (userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow') ? (\n <FormFieldContext.Provider value={{ isFocused: true }}>\n <div class={userAssistanceStyles}>\n <InlineUserAssistance\n assistiveText={assistiveText}\n fieldLabel={label}\n helpSourceLink={helpSourceLink}\n helpSourceText={helpSourceText}\n messages={messages}\n userAssistanceDensity={userAssistanceDensity}\n />\n </div>\n </FormFieldContext.Provider>\n ) : undefined;\n\n const contentTestId = testId ? testId + (shouldShowSheet ? '_sheet' : '_dropdown') : undefined;\n\n // The same content is displayed either in a dropdown or sheet: color picker and inline UA.\n // Add styling to the dropdown to enforce a fixed width.\n const dropdownContent = (\n <div class={dropdownStyles}>\n <SectionedContent\n paddingBlockEnd=\"3.5x\"\n paddingBlockStart=\"3.5x\"\n paddingInlineEnd=\"3.5x\"\n paddingInlineStart=\"3.5x\"\n aria-label={colorPickerAriaLabel}\n footer={inlineUserAssistanceFooter}\n hasFocusTrap={true}\n main={colorPickerMainContent}\n role=\"dialog\"\n testId={contentTestId}\n />\n </div>\n );\n\n const dropdown = shouldShowSheet ? (\n <Sheet isOpen={isOpen} onClose={onClose}>\n <SectionedContent\n aria-label={colorPickerAriaLabel}\n footer={inlineUserAssistanceFooter}\n hasFocusTrap={true}\n main={colorPickerMainContent}\n role=\"dialog\"\n testId={contentTestId}\n />\n </Sheet>\n ) : (\n <StickyPositioningDropdown\n anchorRef={anchorRef}\n isOpen={isOpen}\n onClose={onClose}\n onPosition={handleDropdownPosition}\n sizeOptions={sizeOptions}>\n {dropdownContent}\n </StickyPositioningDropdown>\n );\n\n return dropdown;\n};\n\nconst isPhone = () => {\n return getClientHints().deviceType === 'phone';\n};\n\nexport { InputColorPickerDropdown, type CloseDetail };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { useReducer } from 'preact/hooks';\nimport { type ColorValue } from '#utils/UNSAFE_color';\n\ntype InputColorState = {\n /**\n * Represents the current color value of the component. The user either selected\n * the color in the picker, or typed it into the color field.\n */\n colorValue?: ColorValue;\n};\n\ntype ColorChangedAction = { type: 'colorChanged'; data?: ColorValue };\ntype ColorResetAction = { type: 'reset'; data?: ColorValue };\ntype ColorSelectedAction = { type: 'colorSelected'; data?: ColorValue };\ntype InputColorReducerAction = ColorChangedAction | ColorResetAction | ColorSelectedAction;\n\n// Use a reducer function to manage InputColorState.\nconst inputColorReducer = (\n state: InputColorState,\n action: InputColorReducerAction\n): InputColorState => {\n switch (action.type) {\n case 'colorChanged': {\n return {\n ...state,\n colorValue: action.data\n };\n }\n case 'colorSelected': {\n return { ...state, colorValue: action.data };\n }\n case 'reset': {\n return {\n colorValue: action.data\n };\n }\n default:\n return state;\n }\n};\n\ntype Props = {\n /**\n * The value of the InputColor, or undefined.\n */\n value?: ColorValue;\n};\n\n/**\n * useInputColorState calls useReducer to determine the initial state. Any changes to that state\n * are managed by dispatching actions to the reducer function.\n */\nconst useInputColorState = ({ value }: Props) => {\n const [state, dispatch] = useReducer(inputColorReducer, {\n colorValue: value\n });\n\n return { state, dispatch };\n};\n\nexport { useInputColorState };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { ElementRef } from 'preact/compat';\nimport { colorsAreDifferent, type ColorValue } from '#utils/UNSAFE_color';\nimport { ColorPicker } from '#UNSAFE_ColorPicker';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { CloseDetail, InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport { useInputColorState } from './useInputColorState';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { useDownToggle } from '#hooks/UNSAFE_useDownToggle';\nimport { InputColorPublicProps as InputColorProps } from './InputColor.types';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype ColorPickerProps = ComponentProps<typeof ColorPicker>;\ntype IconButtonProps = ComponentProps<typeof IconButton>;\ntype DropdownProps = ComponentProps<typeof InputColorPickerDropdown>;\n\ntype Props = {\n onCommit: InputColorProps['onCommit'];\n onInput: InputColorProps['onInput'];\n value: InputColorProps['value'];\n};\n\n/**\n * Hook that provides handlers and other functionality for InputColor.\n */\nconst useInputColor = ({ onCommit, onInput, value: currentValue }: Props) => {\n // Whether the dropdown is open.\n const [isOpen, setIsOpen] = useState<boolean>(false);\n\n // Ref to the swatch icon button.\n const iconRef: RefObject<SwatchHandle> = useRef<SwatchHandle>(null);\n\n // Ref to the text input which holds color value\n const colorRef: RefObject<HTMLInputElement> = useRef<HTMLInputElement>(null);\n\n // Keep track of whether the dropdown was just dismissed from an outside mousedown event.\n const outsideMousedownRef = useRef<boolean>(false);\n const outsideMousedownTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>();\n\n // Keep track of the last color values passed to onInput and onCommit.\n const lastCommittedColorRef = useRef<ColorValue | undefined>(currentValue);\n const lastColorRef = useRef<ColorValue | undefined>(currentValue);\n\n // Keep track of the last controlled value passed from the parent, so we can detect a programmatic change.\n const lastValueFromParentRef = useRef<ColorValue | undefined>(currentValue);\n\n // Keep track of whether a color was selected in the color picker.\n const colorSelectedRef = useRef<boolean>(false);\n\n const { state, dispatch } = useInputColorState({ value: currentValue });\n\n // If a new value is being pushed from the parent, and that value differs from\n // the current value of the reducer, then this is a programmatic update\n // and we need to call 'reset' to update the reducer state. Otherwise, the only\n // time the reducer state is updated from the value is on mount.\n if (colorsAreDifferent(lastValueFromParentRef.current, currentValue)) {\n lastValueFromParentRef.current = currentValue;\n if (colorsAreDifferent(currentValue, state.colorValue)) {\n dispatch({ type: 'reset', data: currentValue });\n lastColorRef.current = currentValue;\n lastCommittedColorRef.current = currentValue;\n }\n }\n\n // Reducer updates are async, so wait until the state updates and then call our callbacks.\n useEffect(() => {\n if (colorsAreDifferent(state.colorValue, lastColorRef.current)) {\n onInput({ previousValue: lastColorRef.current, value: state.colorValue });\n lastColorRef.current = state.colorValue;\n }\n if (\n colorSelectedRef.current &&\n colorsAreDifferent(state.colorValue, lastCommittedColorRef.current)\n ) {\n onCommit?.({ previousValue: lastCommittedColorRef.current, value: state.colorValue });\n lastCommittedColorRef.current = state.colorValue;\n colorSelectedRef.current = false;\n }\n }, [onCommit, onInput, state.colorValue]);\n\n // Handle onInput from InputColor as values are entered in the input field.\n // We wait for the state to update before calling onInput.\n const colorInputHandler = useCallback<InputColorProps['onInput']>(\n (detail: ValueUpdateDetail<ColorValue>) => {\n dispatch({ type: 'colorChanged', data: detail.value });\n },\n [dispatch]\n );\n\n // Handle onCommit from InputColor, which is called when the user presses Enter or the field is blurred.\n const colorCommitHandler = useCallback<NonNullable<InputColorProps['onCommit']>>(() => {\n // If the current color value differs from the last committed value, then call onCommit.\n if (colorsAreDifferent(lastCommittedColorRef.current, state.colorValue)) {\n onCommit?.({ value: state.colorValue, previousValue: lastCommittedColorRef.current });\n lastCommittedColorRef.current = state.colorValue;\n }\n }, [onCommit, state.colorValue]);\n\n // Respond to onAction event from the swatch icon button. Toggles the color picker dropdown.\n const colorIconActionHandler = useCallback<NonNullable<IconButtonProps['onAction']>>(() => {\n // Only toggle the value of isOpen if we didn't just dismiss the dropdown.\n if (!outsideMousedownRef.current) {\n setIsOpen((prevIsOpen) => !prevIsOpen);\n }\n outsideMousedownRef.current = false;\n }, []);\n\n const dropdownCloseHandler = useCallback<NonNullable<DropdownProps['onClose']>>(\n (detail: CloseDetail) => {\n // Keep track of when the dropdown is closed via outside mousedown, including when the swatch icon\n // is clicked. We need this in order to toggle visibility of the picker and dropdown.\n if (detail.reason === 'outsideMousedown') {\n outsideMousedownRef.current = true;\n clearTimeout(outsideMousedownTimerRef.current);\n\n // Clear the flag after a short delay to ensure the dropdown can be opened again.\n outsideMousedownTimerRef.current = setTimeout(() => {\n outsideMousedownRef.current = false;\n }, 200);\n } else if (detail.reason === 'dismissed' || detail.reason === 'keyboardDismissed') {\n // Focus the swatch icon when the dropdown is closed.\n iconRef.current?.focus();\n }\n setIsOpen(false);\n },\n []\n );\n\n // Handle color selection in the picker.\n // - Updates the value in state.\n // - Closes the dropdown.\n // - Sets focus to the color field.\n const colorPickerCommitHandler = useCallback<ColorPickerProps['onCommit']>(\n (detail: ValueUpdateDetail<ColorValue>) => {\n // Set focus to the swatch when a color is selected.\n iconRef.current?.focus();\n\n // Set a ref indicating a color was selected.\n colorSelectedRef.current = true;\n dispatch({ type: 'colorSelected', data: detail.value });\n setIsOpen(false);\n },\n [dispatch]\n );\n\n // The Redwood UX design calls for the dropdown to open when the down arrow is pressed.\n // Handle opening the dropdown when the down arrow is pressed in the text edit field.\n const colorPickerDownHandler = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const { triggerProps: containerDropdownProps } = useDownToggle({\n isOpen,\n onToggle: colorPickerDownHandler\n });\n\n return {\n colorIconActionHandler,\n colorPickerCommitHandler,\n dropdownCloseHandler,\n containerDropdownProps,\n colorValue: state.colorValue,\n iconRef,\n isOpen,\n colorCommitHandler,\n colorInputHandler,\n colorRef\n };\n};\n\nexport { useInputColor };\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Ref } from 'preact';\nimport { forwardRef, ElementRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { type BundleType } from '../resources/nls/bundle';\nimport { type ColorValue, isValidColorValue } from '#utils/UNSAFE_color';\nimport { InputColorPickerDropdown } from './InputColorPickerDropdown';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { useInputColor } from './useInputColor';\n\nimport { useClearIcon } from '../hooks/UNSAFE_useClearIcon';\nimport { FocusableHandle, useFocusableTextField } from '../hooks/UNSAFE_useFocusableTextField';\nimport { useFormContext } from '../hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useTextField } from '../hooks/UNSAFE_useTextField';\nimport { Label } from '../UNSAFE_Label';\n\nimport {\n ReadonlyTextField,\n ReadonlyTextFieldInput,\n TextField,\n TextFieldInput\n} from '../UNSAFE_TextField';\nimport { CompactUserAssistance, InlineUserAssistance } from '../UNSAFE_UserAssistance';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { ClearIcon } from '../PRIVATE_ClearIcon/ClearIcon';\nimport { useCurrentValueReducer } from '../hooks/UNSAFE_useCurrentValueReducer';\nimport { SelectableHandle, useSelectableTextField } from '#hooks/UNSAFE_useSelectableTextField';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\nimport { InputColorPublicProps as Props } from './InputColor.types';\n\ntype SwatchHandle = ElementRef<typeof ColorSwatch>;\n\ntype FocusSelectHandle = FocusableHandle & SelectableHandle;\n\n/**\n * An Input Color is a form field that allows users to select or input a color value,\n * using a color picker or by enterihg a HEX code.\n */\nexport const InputColor = forwardRef(\n (\n {\n 'aria-describedby': ariaDescribedBy,\n swatchSize,\n palette,\n value,\n isDisabled: propIsDisabled,\n isReadonly: propIsReadonly,\n labelEdge: propLabelEdge,\n labelStartWidth: propLabelStartWidth,\n isRequiredShown = false,\n isRequired = false,\n placeholder,\n hasClearIcon,\n columnSpan,\n textAlign: propTextAlign,\n autoComplete,\n messages,\n assistiveText,\n helpSourceLink,\n helpSourceText,\n label,\n onCommit,\n onInput,\n testId,\n variant,\n userAssistanceDensity: propUserAssistanceDensity\n }: Props,\n ref?: Ref<FocusSelectHandle>\n ) => {\n const {\n colorIconActionHandler,\n colorPickerCommitHandler,\n dropdownCloseHandler,\n colorValue,\n containerDropdownProps,\n iconRef,\n isOpen,\n colorCommitHandler,\n colorInputHandler,\n colorRef: enabledElementRef\n } = useInputColor({\n onCommit,\n onInput,\n value\n });\n\n const mainFieldRef = useRef<HTMLDivElement>(null);\n const { inputColor_selectColor } = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n const colorIconAriaLabel = inputColor_selectColor();\n const { onKeyDown, ...inputContainerAriaProps } = containerDropdownProps;\n\n const { currentCommitValue, dispatch } = useCurrentValueReducer({ value: colorValue });\n const onInputAndDispatch = useCallback(\n (detail: ValueUpdateDetail<ColorValue>) => {\n // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n dispatch({ type: 'input', payload: detail.value });\n colorInputHandler?.(detail);\n },\n [colorInputHandler, dispatch]\n );\n const onCommitAndDispatch = useCallback(\n (detail: ValueUpdateDetail<ColorValue>) => {\n // Should dispatch happen first? This will queue up a re-render, ordering should not cause issues (this is async)\n dispatch({ type: 'commit', payload: detail.value });\n colorCommitHandler?.(detail);\n },\n [colorCommitHandler, dispatch]\n );\n\n const startContent = () => (\n <ColorSwatch\n size=\"xs\"\n aria-haspopup={palette ? 'grid' : undefined} // with only palette, grid is a better choice than dialog for now.\n aria-label={palette ? colorIconAriaLabel : undefined}\n isDisabled={isDisabled}\n isButton={true}\n isTooltipDisabled={isOpen}\n ref={iconRef as Ref<SwatchHandle>}\n testId={testId ? testId + '_colorIcon' : undefined}\n value={currentCommitValue as ColorValue}\n onToggle={isDisabled || !palette ? undefined : colorIconActionHandler}\n />\n );\n const {\n isDisabled: isFormDisabled,\n isReadonly: isFormReadonly,\n labelEdge: formLabelEdge,\n labelStartWidth: formLabelStartWidth,\n textAlign: formTextAlign,\n userAssistanceDensity: formUserAssistanceDensity\n } = useFormContext();\n // default to FormContext values if component properties are not specified\n const isDisabled = propIsDisabled ?? isFormDisabled;\n const isReadonly = propIsReadonly ?? isFormReadonly;\n const labelEdge = propLabelEdge ?? formLabelEdge;\n const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n const textAlign = propTextAlign ?? formTextAlign;\n const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n const readonlyElementRef = useRef<HTMLDivElement>(null);\n\n const {\n focusProps,\n isFocused,\n methods: focusMethods\n } = useFocusableTextField<HTMLInputElement, HTMLDivElement>({\n isDisabled,\n isReadonly,\n enabledElementRef,\n readonlyElementRef\n });\n\n const { methods: selectMethods } = useSelectableTextField<HTMLInputElement>(enabledElementRef);\n\n useImperativeHandle(ref!, () => mergeProps(focusMethods, selectMethods), [\n focusMethods,\n selectMethods\n ]);\n\n const { hoverProps, isHover } = useHover({ isDisabled: isReadonly || isDisabled || false });\n\n const { formFieldContext, inputProps, labelProps, textFieldProps, userAssistanceProps } =\n useTextField({\n ariaDescribedBy,\n helpSourceLink,\n helpSourceText,\n isDisabled,\n isFocused: isFocused || isOpen,\n isReadonly,\n isRequiredShown,\n labelEdge,\n messages,\n styleVariant: variant,\n userAssistanceDensity,\n value: colorValue\n });\n\n const onClickClearIcon = useCallback(() => {\n // Clicking the clear icon should put the focus on the input field\n enabledElementRef.current?.focus();\n // Send an event to clear the field's value\n onInputAndDispatch?.({ previousValue: colorValue, value: undefined });\n }, [onInputAndDispatch, colorValue, enabledElementRef]);\n\n const maybeClearIcon = useClearIcon({\n clearIcon: <ClearIcon onClick={onClickClearIcon} testId={`${testId}_clearicon`} />,\n display: hasClearIcon,\n hasValue: formFieldContext.hasValue,\n isFocused,\n isEnabled: !isReadonly && !isDisabled,\n isHover\n });\n\n const hasInsideLabel = label !== undefined && labelEdge === 'inside';\n\n const labelComp = labelEdge !== 'none' ? <Label {...labelProps}>{label}</Label> : undefined;\n\n const fieldLabelProps = {\n label: labelEdge !== 'none' ? labelComp : undefined,\n labelEdge: labelEdge !== 'none' ? labelEdge : undefined,\n labelStartWidth: labelEdge !== 'none' ? labelStartWidth : undefined\n };\n\n const ariaLabel = labelEdge === 'none' ? label : undefined;\n const isInlineDensity =\n userAssistanceDensity === 'efficient' || userAssistanceDensity === 'reflow';\n\n const inlineUserAssistance = isInlineDensity ? (\n isDisabled || isReadonly ? (\n // save space for user assistance if density is 'efficient', even though we don't\n // render user assistance for disabled or readonly fields\n userAssistanceDensity !== 'efficient' ? undefined : (\n <InlineUserAssistance\n userAssistanceDensity={userAssistanceDensity}\n {...userAssistanceProps}\n />\n )\n ) : (\n <InlineUserAssistance\n assistiveText={assistiveText}\n fieldLabel={label}\n helpSourceLink={helpSourceLink}\n helpSourceText={helpSourceText}\n messages={messages}\n isRequiredShown={isRequiredShown}\n userAssistanceDensity={userAssistanceDensity}\n {...userAssistanceProps}\n />\n )\n ) : undefined;\n\n const aRef = useRef<HTMLDivElement>(null);\n const anchorRef = mainFieldRef ?? aRef;\n\n const compactUserAssistance =\n userAssistanceDensity === 'compact' ? (\n <CompactUserAssistance\n anchorRef={anchorRef}\n messages={messages}\n assistiveText={assistiveText}\n {...userAssistanceProps}\n />\n ) : undefined;\n\n const mainContent = isReadonly ? (\n <ReadonlyTextFieldInput\n aria-describedby={inputProps['aria-describedby']}\n aria-label={ariaLabel}\n aria-labelledby={labelProps.id}\n as=\"div\"\n elementRef={readonlyElementRef}\n textAlign={textAlign}\n value={colorValue}\n hasEmptyLabel={label === '' && labelEdge === 'none'}\n hasInsideLabel={hasInsideLabel}\n />\n ) : (\n <TextFieldInput\n aria-labelledby={labelProps.id}\n aria-label={ariaLabel}\n autoComplete={autoComplete}\n currentCommitValue={currentCommitValue}\n hasEmptyLabel={label === '' && labelEdge === 'none'}\n hasEndContent={false}\n hasInsideLabel={labelComp !== undefined && labelEdge === 'inside'}\n hasStartContent={true}\n inputRef={enabledElementRef}\n isRequired={isRequired}\n placeholder={placeholder}\n textAlign={textAlign}\n type={isMobile() ? 'text' : undefined}\n value={colorValue}\n onCommit={\n onCommitAndDispatch as (detail: ValueUpdateDetail<string>) => {\n value: string;\n }\n }\n onInput={\n onInputAndDispatch as (detail: ValueUpdateDetail<string>) => {\n value: string;\n }\n }\n onKeyDown={onKeyDown}\n {...inputProps}\n />\n );\n\n return (\n <>\n <FormFieldContext.Provider value={formFieldContext}>\n {isReadonly ? (\n <ReadonlyTextField\n role=\"presentation\"\n columnSpan={columnSpan}\n compactUserAssistance={compactUserAssistance}\n inlineUserAssistance={inlineUserAssistance}\n onBlur={focusProps.onFocusOut}\n onFocus={focusProps.onFocusIn}\n ref={anchorRef}\n mainContent={mainContent}\n testId={testId}\n {...fieldLabelProps}></ReadonlyTextField>\n ) : (\n <TextField\n endContent={maybeClearIcon}\n columnSpan={columnSpan}\n compactUserAssistance={compactUserAssistance}\n inlineUserAssistance={inlineUserAssistance}\n mainContent={mainContent}\n onBlur={focusProps.onFocusOut}\n onFocus={focusProps.onFocusIn}\n startContent={startContent()}\n mainFieldRef={anchorRef}\n hasZeroStartMargin={true}\n testId={testId}\n {...textFieldProps}\n {...fieldLabelProps}\n {...hoverProps}\n {...inputContainerAriaProps}\n />\n )}\n </FormFieldContext.Provider>\n\n {isOpen && !isReadonly && !isDisabled && (\n <InputColorPickerDropdown\n anchorRef={mainFieldRef}\n assistiveText={assistiveText}\n helpSourceLink={helpSourceLink}\n helpSourceText={helpSourceText}\n isDisabled={isDisabled}\n isReadonly={isReadonly}\n isOpen={isOpen}\n label={label}\n onClose={dropdownCloseHandler}\n onCommit={colorPickerCommitHandler}\n messages={messages}\n testId={testId ? testId + '_colorPicker' : undefined}\n userAssistanceDensity={userAssistanceDensity}\n // memoize this for performance\n value={colorValue && isValidColorValue(colorValue) ? colorValue : undefined}\n palette={palette}\n swatchSize={swatchSize}\n />\n )}\n </>\n );\n }\n);\n\n/**\n * Helper function to determine whether the current device is a mobile device\n * @returns true if running on a mobile device, false otherwise\n */\nfunction isMobile() {\n const deviceType = getClientHints().deviceType;\n return deviceType === 'phone' || deviceType === 'tablet';\n}\nInputColor.displayName = 'InputColor';\n"],"names":["InputColorPickerDropdown","anchorRef","assistiveText","swatchSize","palette","helpSourceLink","helpSourceText","isDisabled","isOpen","isReadonly","label","onClose","onCommit","messages","testId","userAssistanceDensity","value","isDropdownAbove","setDropdownAbove","useState","prevIsOpen","setPrevIsOpen","handleDropdownPosition","useCallback","data","placement","startsWith","shouldShowSheet","isPhone","colorPicker_label","useTranslationBundle","colorPickerAriaLabel","colorPickerMainContent","_jsx","ColorPicker","height","undefined","maxWidth","width","inlineUserAssistanceFooter","length","FormFieldContext","Provider","isFocused","children","jsx","class","userAssistanceStyles","InlineUserAssistance","fieldLabel","contentTestId","dropdownContent","dropdownStyles","SectionedContent","paddingBlockEnd","paddingBlockStart","paddingInlineEnd","paddingInlineStart","footer","hasFocusTrap","main","role","Sheet","StickyPositioningDropdown","onPosition","sizeOptions","isMaxWidthAdjusted","isMaxHeightAdjusted","getClientHints","deviceType","inputColorReducer","state","action","type","colorValue","useInputColor","onInput","currentValue","setIsOpen","iconRef","useRef","colorRef","outsideMousedownRef","outsideMousedownTimerRef","lastCommittedColorRef","lastColorRef","lastValueFromParentRef","colorSelectedRef","dispatch","useReducer","useInputColorState","colorsAreDifferent","current","useEffect","previousValue","colorInputHandler","detail","colorCommitHandler","colorIconActionHandler","dropdownCloseHandler","reason","clearTimeout","setTimeout","focus","colorPickerCommitHandler","colorPickerDownHandler","triggerProps","containerDropdownProps","useDownToggle","onToggle","InputColor","forwardRef","ariaDescribedBy","propIsDisabled","propIsReadonly","labelEdge","propLabelEdge","labelStartWidth","propLabelStartWidth","isRequiredShown","isRequired","placeholder","hasClearIcon","columnSpan","textAlign","propTextAlign","autoComplete","variant","propUserAssistanceDensity","ref","enabledElementRef","mainFieldRef","inputColor_selectColor","colorIconAriaLabel","onKeyDown","inputContainerAriaProps","currentCommitValue","useCurrentValueReducer","onInputAndDispatch","payload","onCommitAndDispatch","isFormDisabled","isFormReadonly","formLabelEdge","formLabelStartWidth","formTextAlign","formUserAssistanceDensity","useFormContext","readonlyElementRef","focusProps","methods","focusMethods","useFocusableTextField","selectMethods","useSelectableTextField","useImperativeHandle","mergeProps","hoverProps","isHover","useHover","formFieldContext","inputProps","labelProps","textFieldProps","userAssistanceProps","useTextField","styleVariant","onClickClearIcon","maybeClearIcon","useClearIcon","clearIcon","ClearIcon","onClick","display","hasValue","isEnabled","hasInsideLabel","labelComp","Label","fieldLabelProps","ariaLabel","inlineUserAssistance","aRef","compactUserAssistance","CompactUserAssistance","mainContent","ReadonlyTextFieldInput","id","as","elementRef","hasEmptyLabel","TextFieldInput","hasEndContent","hasStartContent","inputRef","isMobile","_jsxs","ReadonlyTextField","onBlur","onFocusOut","onFocus","onFocusIn","TextField","endContent","startContent","ColorSwatch","size","isButton","isTooltipDisabled","hasZeroStartMargin","isValidColorValue","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './Calendar-47e39e3e', './InputDateMask-2fdb6f26', './HiddenAccessible-037ef42d', './IconButton-232d63fc', './clientHints-6d361eaa', './FormFieldContext-a024b891', './logger-0f873e29', './TabbableModeContext-a9c97640', './useTranslationBundle-8e42d505', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-e406e352', './Flex-07d2aa5b', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', './LayerHost-daf96749', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-ae57629b', 'css!./IconStyle.styles.css', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './Popup-695781d6', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', 'module', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './UNSAFE_InputDatePicker/themes/InputDatePickerDropdownStyles.css', './Sheet-c7f3fe2d', './DatePicker-0c7ef704', './SectionedContent-054e2fc2', './stringUtils-4ffd9d59', './FormContext-6b0879a0', './useFormContext-b8cbbb21', './useId-c9578d26', './getFormatParse-7ea0c25b', './maskUtils-8e7a7701', './useHiddenTestMethod-90b5bff5', './calendarDateUtils-dd5b75ee', './useTestId-9afc201a'], (function(e,s,t,a,n,o,r,i,l,d,c,u,m,p,h,f,y,b,C,D,v,S,k,x,A,T,g,F,I,V,P,R,w,M,U,_,j,H,B,E,N,L,O,Y,Z,W,z,G,q,J,K,Q,X,$,ee,se,te){"use strict";const ae=({anchorRef:e,assistiveText:t,dayFormatter:n,daysOutsideMonth:o,helpSourceLink:r,helpSourceText:i,isDisabled:l,isOpen:c,isReadonly:u,label:p,onClose:h,onCommit:f,max:b,messages:C,min:D,monthAndYearPicker:v,testId:S,todayButton:k,todayTimeZone:x,userAssistanceDensity:A,value:T,weekDisplay:g})=>{const[F,I]=a.useState(!1),[V,P]=a.useState(c),R=a.useCallback((e=>{I(e.placement.startsWith("top"))}),[]);V!==c&&(P(c),c||I(!1));const w=ne(),{datePicker_label:M}=m.useTranslationBundle("@oracle/oraclejet-preact"),U=M(),_=s.jsx(z.DatePicker,{dayFormatter:n,daysOutsideMonth:o,height:w?void 0:"auto",onCommit:f,max:b,min:D,maxWidth:w?"100%":void 0,width:"100%",monthAndYearPicker:v,testId:S,todayTimeZone:x,todayButton:k,value:T,weekDisplay:g}),j=!c||F&&!w||l||u||!(t||r||C&&C.length>0)||"efficient"!==A&&"reflow"!==A?void 0:s.jsx(d.FormFieldContext.Provider,{value:{isFocused:!0},children:s.jsx("div",{class:Z.userAssistanceStyles,children:s.jsx(y.InlineUserAssistance,{assistiveText:t,fieldLabel:p,helpSourceLink:r,helpSourceText:i,messages:C,userAssistanceDensity:A})})}),H=S?S+(w?"_sheet":"_dropdown"):void 0,B=s.jsx("div",{class:Z.dropdownStyles,children:s.jsx(G.SectionedContent,{"aria-label":U,footer:j,hasFocusTrap:!0,main:_,role:"dialog",testId:H})});return w?s.jsx(W.Sheet,{initialFocus:"firstFocusable",isOpen:c,onClose:h,children:s.jsx(G.SectionedContent,{"aria-label":U,footer:j,hasFocusTrap:!0,main:_,role:"dialog",testId:H})}):s.jsx(G.StickyPositioningDropdown,{anchorRef:e,initialFocus:"firstFocusable",isOpen:c,onClose:h,onPosition:R,sizeOptions:{isMaxWidthAdjusted:!1,isMaxHeightAdjusted:!0},children:B})},ne=()=>"phone"===l.getClientHints().deviceType,oe=e=>e&&se.isCompleteCalendarDate(e)?e:void 0,re=(e,s)=>{switch(s.type){case"dateChanged":return{...e,dateValue:s.data,completeDateValue:oe(s.data)};case"dateSelected":return{...e,dateValue:s.data,completeDateValue:s.data};case"reset":return{completeDateValue:oe(s.data),dateValue:s.data};default:return e}},ie=({isDisabled:e,isReadonly:s,onCommit:t,onInput:n,rootRef:o,value:r})=>{const[i,l]=a.useState(!1),d=a.useRef(null),c=a.useRef(null),u=a.useRef(!1),m=a.useRef(),p=a.useRef(r),h=a.useRef(r),f=a.useRef(r),y=a.useRef(!1),{state:b,dispatch:C}=(({value:e})=>{const[s,t]=a.useReducer(re,{completeDateValue:oe(e),dateValue:e});return{state:s,dispatch:t}})({value:r});$.calendarDatesAreDifferent(f.current,r)&&(f.current=r,$.calendarDatesAreDifferent(r,b.dateValue)&&(C({type:"reset",data:r}),h.current=r,p.current=r)),a.useEffect((()=>{$.calendarDatesAreDifferent(b.dateValue,h.current)&&(n({previousValue:h.current,value:b.dateValue}),h.current=b.dateValue),y.current&&$.calendarDatesAreDifferent(b.dateValue,p.current)&&(t?.({previousValue:p.current,value:b.dateValue}),p.current=b.dateValue,y.current=!1)}),[t,n,b.dateValue]);const D=a.useCallback((e=>{C({type:"dateChanged",data:e.value})}),[C]),v=a.useCallback((e=>{$.calendarDatesAreDifferent(p.current,e.value)&&(t?.({value:e.value,previousValue:p.current}),p.current=e.value)}),[t]),S=a.useCallback((()=>{u.current||l((e=>!e)),u.current=!1}),[]),k=a.useCallback((e=>{"outsideMousedown"===e.reason?(u.current=!0,clearTimeout(m.current),m.current=setTimeout((()=>{u.current=!1}),200)):"dismissed"!==e.reason&&"keyboardDismissed"!==e.reason||d.current?.focus(),l(!1)}),[]),x=a.useCallback((e=>{d.current?.focus(),y.current=!0,C({type:"dateSelected",data:e.value}),l(!1)}),[C]),A=a.useCallback((a=>s||e?Promise.reject("Component is readonly or disabled"):(n({value:a,previousValue:r}),t?.({value:a,previousValue:r}),Promise.resolve())),[r,e,s,t,n]);return ee.useHiddenTestMethod({elementRef:o,method:A,name:"_changeValue"}),{calendarIconActionHandler:S,datePickerCommitHandler:x,dropdownCloseHandler:k,completeDateValue:b.completeDateValue,dateValue:b.dateValue,iconRef:d,isOpen:i,maskCommitHandler:v,maskInputHandler:D,maskRef:c}},le=t.forwardRef((({"aria-describedby":e,assistiveText:t,dayFormatter:l,daysOutsideMonth:d,helpSourceLink:c,helpSourceText:u,isDisabled:p,isReadonly:h,label:f,max:y,messages:b,min:C,monthAndYearPicker:D,todayTimeZone:v,todayButton:S,value:k,onCommit:x,onInput:A,testId:T,userAssistanceDensity:g,weekDisplay:F,...I},V)=>{const P=te.useTestId(T),R=a.useRef(null),{calendarIconActionHandler:w,datePickerCommitHandler:M,completeDateValue:U,dateValue:_,dropdownCloseHandler:j,iconRef:H,isOpen:B,maskCommitHandler:E,maskInputHandler:N,maskRef:L}=ie({isDisabled:p,isReadonly:h,onCommit:x,onInput:A,rootRef:R,value:k}),O=a.useRef(null),{inputDatePicker_selectDate:Y,inputDatePicker_instruction:Z}=m.useTranslationBundle("@oracle/oraclejet-preact"),W=Y(),{userAssistanceDensity:z}=K.useFormContext(),G=g??z;a.useImperativeHandle(V,(()=>({focus:()=>{L.current?.focus()},blur:()=>{L.current?.blur()}})));const J=Q.useId(),X=Z(),$=p||h?void 0:s.jsx(r.HiddenAccessible,{id:J,isHidden:!0,children:X}),ee=p||h?e:q.l([e,J]),se=s.jsx(i.IconButton,{"aria-haspopup":"dialog","aria-label":W,isDisabled:p,ref:H,size:"sm",testId:T?T+"_calendarIcon":void 0,variant:"ghost",onAction:w,children:s.jsx(n.SvgCalendar,{})}),ne=B;return s.jsxs("div",{...P,ref:R,children:[s.jsx(o.InputDateMaskContext.Provider,{value:{isDropdownOpen:B,isInputDatePickerParent:!0},children:s.jsx(o.InputDateMask,{"aria-describedby":ee,assistiveText:t,endContent:se,helpSourceLink:c,helpSourceText:u,isDisabled:p,isReadonly:h,label:f,onCommit:E,onInput:N,mainFieldRef:O,messages:b,testId:T?T+"_mask":void 0,ref:L,userAssistanceDensity:g,value:_,...I})}),$,ne&&s.jsx(ae,{anchorRef:O,assistiveText:t,dayFormatter:l,daysOutsideMonth:d,helpSourceLink:c,helpSourceText:u,isDisabled:p,isReadonly:h,isOpen:B,label:f,onClose:j,onCommit:M,max:y,messages:b,min:C,monthAndYearPicker:D,testId:T?T+"_datePicker":void 0,todayTimeZone:v,todayButton:S,userAssistanceDensity:G,value:U,weekDisplay:F})]})}));e.InputDatePicker=le}));
|
|
2
|
+
//# sourceMappingURL=InputDatePicker-8c8e14ca.js.map
|