@persona/design-system 0.3.1 → 0.4.0
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/CHANGELOG.md +19 -0
- package/README.md +1 -1
- package/dist/{Action-DL3kHI9Z.d.mts → Action-CcAyQpYN.d.mts} +3 -3
- package/dist/Action.d.mts +1 -1
- package/dist/AdvancedFilterRuleRow.d.mts +4 -4
- package/dist/AdvancedFilterRulesPopover.d.mts +3 -3
- package/dist/ArrayValueControl.d.mts +1 -1
- package/dist/Attribute.d.mts +3 -3
- package/dist/BooleanValueControl.d.mts +1 -1
- package/dist/BottomPanel.d.mts +32 -0
- package/dist/{Breadcrumb-Czgdi0xf.d.mts → Breadcrumb-Df06cTnA.d.mts} +1 -1
- package/dist/Breadcrumb.d.mts +1 -1
- package/dist/{Breadcrumbs-zei-cpdU.d.mts → Breadcrumbs-D_Gzd4_J.d.mts} +2 -2
- package/dist/{Breadcrumbs-ed4wRDS7.mjs → Breadcrumbs-Zi5p0HDR.mjs} +3 -3
- package/dist/{Breadcrumbs-ed4wRDS7.mjs.map → Breadcrumbs-Zi5p0HDR.mjs.map} +1 -1
- package/dist/Breadcrumbs.d.mts +1 -1
- package/dist/{Button-CKzNTpPL.d.mts → Button-BrI1s2-r.d.mts} +2 -2
- package/dist/Button.d.mts +1 -1
- package/dist/{Calendar-CcxN7y3e.d.mts → Calendar-DjnoZVcT.d.mts} +1 -1
- package/dist/Calendar.d.mts +1 -1
- package/dist/CalendarBase.d.mts +1 -1
- package/dist/{Card-pr4FQWjn.d.mts → Card-mZDNFaJy.d.mts} +3 -3
- package/dist/Card.d.mts +1 -1
- package/dist/{CardV2-D3m5EKlp.mjs → CardV2-CXxzl1EZ.mjs} +6 -6
- package/dist/{CardV2-D3m5EKlp.mjs.map → CardV2-CXxzl1EZ.mjs.map} +1 -1
- package/dist/{Checkbox-Bmm-r5ei.d.mts → Checkbox-CwPXPLCi.d.mts} +1 -1
- package/dist/{Checkbox-Ccuicmlo.mjs → Checkbox-DxNHp59y.mjs} +1 -1
- package/dist/{Checkbox-Ccuicmlo.mjs.map → Checkbox-DxNHp59y.mjs.map} +1 -1
- package/dist/Checkbox.d.mts +1 -1
- package/dist/CheckboxGroupField.d.mts +1 -1
- package/dist/ChoicesValueControl.d.mts +1 -1
- package/dist/{Combobox-BGRyr_-L.mjs → Combobox-BUtqtzKl.mjs} +5 -5
- package/dist/{Combobox-BGRyr_-L.mjs.map → Combobox-BUtqtzKl.mjs.map} +1 -1
- package/dist/{Combobox-Bf_Xe1BG.d.mts → Combobox-C9QBItsc.d.mts} +3 -3
- package/dist/Combobox.d.mts +2 -2
- package/dist/{ComboboxBase-CWzN8GML.d.mts → ComboboxBase-BkSpdmsT.d.mts} +6 -6
- package/dist/ComboboxBase.d.mts +1 -1
- package/dist/{ComboboxMultiSelect-iSuvyOx2.d.mts → ComboboxMultiSelect-DkVfwSKH.d.mts} +2 -2
- package/dist/ComboboxMultiSelect.d.mts +1 -1
- package/dist/{ComboboxSingleSelect-DVRFKPi1.d.mts → ComboboxSingleSelect-CpumBcDn.d.mts} +4 -4
- package/dist/ComboboxSingleSelect.d.mts +1 -1
- package/dist/{CompactBar-C_61pgp7.d.mts → CompactBar-COxu_FDd.d.mts} +3 -3
- package/dist/CompactBar.d.mts +1 -1
- package/dist/{ConfigFormGroup-DGCTW3by.mjs → ConfigFormGroup-aSdn2r6Z.mjs} +1 -1
- package/dist/{ConfigFormGroup-DGCTW3by.mjs.map → ConfigFormGroup-aSdn2r6Z.mjs.map} +1 -1
- package/dist/{ControlBar-0XwbM4yC.d.mts → ControlBar-DwAhPcb5.d.mts} +12 -2
- package/dist/ControlBar.d.mts +1 -1
- package/dist/DataTable.d.mts +4 -3
- package/dist/{DateField-CKeSIhGy.d.mts → DateField-tOyrGcx1.d.mts} +2 -2
- package/dist/DateField.d.mts +1 -1
- package/dist/{DatePicker-B1iWrqR5.d.mts → DatePicker-Bs9JODNg.d.mts} +2 -2
- package/dist/{DatePicker-BNnZ6L1y.mjs → DatePicker-CLP-ajza.mjs} +71 -16
- package/dist/DatePicker-CLP-ajza.mjs.map +1 -0
- package/dist/DatePicker.d.mts +1 -1
- package/dist/{DateRangePicker-BmF9eH9R.d.mts → DateRangePicker-BT6-j8V7.d.mts} +24 -4
- package/dist/DateRangePicker.d.mts +2 -2
- package/dist/DateRangeValueControl.d.mts +8 -4
- package/dist/DateValueControl.d.mts +1 -1
- package/dist/{DropdownButton-BlVeFbJ0.mjs → DropdownButton-CCAfNZ9h.mjs} +2 -2
- package/dist/{DropdownButton-BlVeFbJ0.mjs.map → DropdownButton-CCAfNZ9h.mjs.map} +1 -1
- package/dist/DropdownButton.d.mts +2 -2
- package/dist/{DropdownMenu-DuTnq9j7.d.mts → DropdownMenu-BoatixlO.d.mts} +2 -2
- package/dist/{DropdownMenu-82xH1AZr.mjs → DropdownMenu-CUnf420M.mjs} +2 -2
- package/dist/{DropdownMenu-82xH1AZr.mjs.map → DropdownMenu-CUnf420M.mjs.map} +1 -1
- package/dist/DropdownMenu.d.mts +1 -1
- package/dist/{ErrorProps-DX50vo-U.d.mts → ErrorProps-C9T857Wk.d.mts} +1 -1
- package/dist/ErrorProps.d.mts +1 -1
- package/dist/{FieldRegistry-D1vghSC_.d.mts → FieldRegistry-D6niLExM.d.mts} +2 -2
- package/dist/FieldRegistry.d.mts +1 -1
- package/dist/{FilterBar-Ck085Dic.d.mts → FilterBar-DfBV7yKM.d.mts} +10 -4
- package/dist/FilterBar.d.mts +1 -1
- package/dist/FilterPickerMenu.d.mts +2 -2
- package/dist/FilterPill.d.mts +1 -1
- package/dist/FilterPopover.d.mts +1 -1
- package/dist/FloatValueControl.d.mts +1 -1
- package/dist/{FormControl-CfpwZGlD.d.mts → FormControl-0H0Jeind.d.mts} +2 -2
- package/dist/{FormControl-D1HIqDKm.mjs → FormControl-1BmoYFCu.mjs} +1 -1
- package/dist/{FormControl-D1HIqDKm.mjs.map → FormControl-1BmoYFCu.mjs.map} +1 -1
- package/dist/FormControl.d.mts +1 -1
- package/dist/FormControlLabel.d.mts +1 -1
- package/dist/{FormField-0p4y0sS5.d.mts → FormField-BcaFdmo5.d.mts} +2 -2
- package/dist/{FormField-CVnbsNvU.mjs → FormField-oBKH25qf.mjs} +11 -11
- package/dist/{FormField-CVnbsNvU.mjs.map → FormField-oBKH25qf.mjs.map} +1 -1
- package/dist/FormField.d.mts +1 -1
- package/dist/Grid.d.mts +38 -0
- package/dist/GridItem.d.mts +17 -0
- package/dist/{Header-gDUTQgWj.d.mts → Header-BjSoTEX_.d.mts} +1 -1
- package/dist/Header.d.mts +1 -1
- package/dist/{HelperTooltip-CqhiRb5g.d.mts → HelperTooltip-S20wVFCS.d.mts} +2 -2
- package/dist/HelperTooltip.d.mts +1 -1
- package/dist/{HoverCopyableField-HWshrU_1.mjs → HoverCopyableField-GMXeF-3J.mjs} +2 -2
- package/dist/{HoverCopyableField-HWshrU_1.mjs.map → HoverCopyableField-GMXeF-3J.mjs.map} +1 -1
- package/dist/{IconButton-CLsHdYm7.d.mts → IconButton-BpyOr8Ev.d.mts} +2 -2
- package/dist/IconButton.d.mts +1 -1
- package/dist/ImageTile.d.mts +1 -1
- package/dist/InlineCombobox.d.mts +1 -1
- package/dist/InlineInput.d.mts +1 -1
- package/dist/{Input-DoB8YswA.mjs → Input-BWlvBYB3.mjs} +1 -1
- package/dist/{Input-DoB8YswA.mjs.map → Input-BWlvBYB3.mjs.map} +1 -1
- package/dist/{Input-BHHWpSKN.d.mts → Input-qlQVD5h0.d.mts} +5 -5
- package/dist/Input.d.mts +1 -1
- package/dist/{InputProps-sHxlDiss.d.mts → InputProps-D_7MnQfE.d.mts} +2 -2
- package/dist/InputProps.d.mts +1 -1
- package/dist/IntegerValueControl.d.mts +1 -1
- package/dist/{ListBox-B9uuMt2R.mjs → ListBox-9jHHEaqW.mjs} +5 -5
- package/dist/{ListBox-B9uuMt2R.mjs.map → ListBox-9jHHEaqW.mjs.map} +1 -1
- package/dist/{ListBox-BrY1bQ5-.d.mts → ListBox-ZE3MYMt6.d.mts} +3 -3
- package/dist/ListBox.d.mts +1 -1
- package/dist/ListBoxField.d.mts +2 -2
- package/dist/{LoadingShimmer-dsBWRdTU.mjs → LoadingShimmer-a2Hv0kAq.mjs} +1 -1
- package/dist/{LoadingShimmer-dsBWRdTU.mjs.map → LoadingShimmer-a2Hv0kAq.mjs.map} +1 -1
- package/dist/LoadingShimmer.d.mts +1 -1
- package/dist/{LogicRow-9a_klV2v.d.mts → LogicRow-CbMmaWXU.d.mts} +3 -3
- package/dist/LogicRow.d.mts +1 -1
- package/dist/MaskedInput.d.mts +2 -2
- package/dist/{Menu-CHbUf9PQ.mjs → Menu-38UCGcte.mjs} +1 -1
- package/dist/{Menu-CHbUf9PQ.mjs.map → Menu-38UCGcte.mjs.map} +1 -1
- package/dist/{Menu-D4Y_J-QI.d.mts → Menu-ZShdhNd7.d.mts} +3 -3
- package/dist/Menu.d.mts +1 -1
- package/dist/Modal.d.mts +1 -1
- package/dist/{PageHeader-XxGsFLHb.mjs → PageHeader-B2-Slzhl.mjs} +2 -2
- package/dist/{PageHeader-XxGsFLHb.mjs.map → PageHeader-B2-Slzhl.mjs.map} +1 -1
- package/dist/PageHeader.d.mts +1 -1
- package/dist/{PageSelector-BDo3ge1E.d.mts → PageSelector-BcZx4nqe.d.mts} +3 -3
- package/dist/PageSelector.d.mts +1 -1
- package/dist/{Pagination-DvVKQLdC.mjs → Pagination-CtUz0gdA.mjs} +3 -3
- package/dist/{Pagination-DvVKQLdC.mjs.map → Pagination-CtUz0gdA.mjs.map} +1 -1
- package/dist/{Pagination-Dcmv7bVe.d.mts → Pagination-j4hF7GOk.d.mts} +2 -2
- package/dist/Pagination.d.mts +1 -1
- package/dist/{Pii-BD48BtZ0.mjs → Pii-RwKn-K84.mjs} +1 -1
- package/dist/{Pii-BD48BtZ0.mjs.map → Pii-RwKn-K84.mjs.map} +1 -1
- package/dist/PillShell.d.mts +1 -1
- package/dist/{Popover-DNH8Jx1-.mjs → Popover-DlXyKYL5.mjs} +1 -1
- package/dist/{Popover-DNH8Jx1-.mjs.map → Popover-DlXyKYL5.mjs.map} +1 -1
- package/dist/ProgressIndicator.d.mts +5 -3
- package/dist/{PseudoClassProps-DgT5G_z5.d.mts → PseudoClassProps-BPdn-ofQ.d.mts} +1 -1
- package/dist/PseudoClassProps.d.mts +1 -1
- package/dist/{Radio-DSMPX5_2.mjs → Radio-cLL9oatf.mjs} +1 -1
- package/dist/{Radio-DSMPX5_2.mjs.map → Radio-cLL9oatf.mjs.map} +1 -1
- package/dist/{RadioGroup-D5IITQLz.mjs → RadioGroup-BGo_kXKh.mjs} +2 -2
- package/dist/{RadioGroup-D5IITQLz.mjs.map → RadioGroup-BGo_kXKh.mjs.map} +1 -1
- package/dist/{RadioGroup-Jl1yAvGu.d.mts → RadioGroup-BqULCH-D.d.mts} +1 -1
- package/dist/RadioGroup.d.mts +1 -1
- package/dist/RangeCalendar.d.mts +5 -0
- package/dist/RangeCalendarPresets.d.mts +12 -2
- package/dist/ResizableVerticalPanel.d.mts +22 -0
- package/dist/ResizeHandle.d.mts +19 -0
- package/dist/RightPanel.d.mts +41 -0
- package/dist/RightPanelLoadingContent.d.mts +7 -0
- package/dist/RightPanelResizeHandle.d.mts +14 -0
- package/dist/RuleEditorFields.d.mts +4 -4
- package/dist/RulesPill.d.mts +1 -1
- package/dist/{SearchInput-CaKHRC_s.d.mts → SearchInput-Dc90GLTF.d.mts} +2 -2
- package/dist/SearchInput.d.mts +1 -1
- package/dist/SectionHeading.d.mts +1 -1
- package/dist/{SegmentedControl-JUgRw_M-.mjs → SegmentedControl-CvWJGhwy.mjs} +1 -1
- package/dist/{SegmentedControl-JUgRw_M-.mjs.map → SegmentedControl-CvWJGhwy.mjs.map} +1 -1
- package/dist/{SegmentedControl-e6xDtoHC.d.mts → SegmentedControl-Db78Pzo_.d.mts} +1 -1
- package/dist/SegmentedControl.d.mts +1 -1
- package/dist/{Select-DX3toj6M.mjs → Select-U_vQhK1A.mjs} +3 -4
- package/dist/Select-U_vQhK1A.mjs.map +1 -0
- package/dist/{Select-CPYztD4m.d.mts → Select-bafAe2wd.d.mts} +3 -3
- package/dist/Select.d.mts +1 -1
- package/dist/{Spinner-D3wXIoXN.mjs → Spinner-BTyc6glU.mjs} +1 -1
- package/dist/{Spinner-D3wXIoXN.mjs.map → Spinner-BTyc6glU.mjs.map} +1 -1
- package/dist/{Stack-DHaK1-dw.d.mts → Stack-_JcvIE31.d.mts} +1 -1
- package/dist/Stack.d.mts +1 -1
- package/dist/{Sticker-DnSemOcW.d.mts → Sticker-OKVOQt_C.d.mts} +4 -4
- package/dist/Sticker.d.mts +1 -1
- package/dist/StringValueControl.d.mts +1 -1
- package/dist/Tab.d.mts +1 -1
- package/dist/{TabBar-sYllYizt.mjs → TabBar-B5NtgtgC.mjs} +1 -1
- package/dist/{TabBar-sYllYizt.mjs.map → TabBar-B5NtgtgC.mjs.map} +1 -1
- package/dist/TabBarIconButton.d.mts +1 -1
- package/dist/{Table-CFbPINKr.d.mts → Table-BcAgCIWq.d.mts} +1 -1
- package/dist/{Table-C2pkP5Xg.mjs → Table-DfUD3I2s.mjs} +2 -2
- package/dist/{Table-C2pkP5Xg.mjs.map → Table-DfUD3I2s.mjs.map} +1 -1
- package/dist/Table.d.mts +1 -1
- package/dist/{TableBody-BQsGc4Lw.d.mts → TableBody-D-RDBun9.d.mts} +1 -1
- package/dist/TableBody.d.mts +1 -1
- package/dist/{TableBox-CaTHcR4F.mjs → TableBox-0GvWjRln.mjs} +18 -12
- package/dist/{TableBox-CaTHcR4F.mjs.map → TableBox-0GvWjRln.mjs.map} +1 -1
- package/dist/TableBox.d.mts +2 -2
- package/dist/{TableBoxCell-52g97gEg.d.mts → TableBoxCell-WXc57DwN.d.mts} +10 -7
- package/dist/TableBoxCell.d.mts +1 -1
- package/dist/TableBoxField.d.mts +3 -3
- package/dist/{TableBoxRow-DnoumHIE.d.mts → TableBoxRow-BQz0a9vr.d.mts} +3 -3
- package/dist/TableBoxRow.d.mts +1 -1
- package/dist/{TableBoxRowActions-CDcREhP4.d.mts → TableBoxRowActions-DfewtLrn.d.mts} +2 -2
- package/dist/TableBoxRowActions.d.mts +1 -1
- package/dist/TableCell.d.mts +1 -1
- package/dist/{TableControls-CrGGlkEG.d.mts → TableControls-C26vGkWZ.d.mts} +4 -3
- package/dist/{TableControls-3bXyd8gS.mjs → TableControls-WUNbzSNq.mjs} +238 -45
- package/dist/TableControls-WUNbzSNq.mjs.map +1 -0
- package/dist/TableControls.d.mts +1 -1
- package/dist/{TableControlsContext-BKZt2Jid.d.mts → TableControlsContext-ChFsFEjR.d.mts} +2 -2
- package/dist/TableControlsContext.d.mts +1 -1
- package/dist/{TableHead-CqVIJfjh.d.mts → TableHead-PPaqXC0K.d.mts} +1 -1
- package/dist/TableHead.d.mts +1 -1
- package/dist/{TableHeaderCell-DK4R8vdK.d.mts → TableHeaderCell-K_avn-rR.d.mts} +1 -1
- package/dist/TableHeaderCell.d.mts +1 -1
- package/dist/{TableLayout-BcIazRB-.d.mts → TableLayout-_Hd-Tvto.d.mts} +1 -1
- package/dist/TableLayout.d.mts +1 -1
- package/dist/{TableRow-DdJcjG2b.d.mts → TableRow-BTWf9xVC.d.mts} +2 -2
- package/dist/TableRow.d.mts +1 -1
- package/dist/TableTH.d.mts +1 -1
- package/dist/{TableViewConfigurationDropdown-CHBOjw7O.d.mts → TableViewConfigurationDropdown-BqB7pOh8.d.mts} +2 -2
- package/dist/TableViewConfigurationDropdown.d.mts +1 -1
- package/dist/{TechnicalSticker-D3eeGMDR.mjs → TechnicalSticker-ClRR_6Ly.mjs} +1 -1
- package/dist/{TechnicalSticker-D3eeGMDR.mjs.map → TechnicalSticker-ClRR_6Ly.mjs.map} +1 -1
- package/dist/{Text-BIgrwIdS.d.mts → Text-CAKHcXSd.d.mts} +3 -3
- package/dist/Text.d.mts +1 -1
- package/dist/{TextArea-CiLttt0s.d.mts → TextArea-NjdArapc.d.mts} +2 -2
- package/dist/{TextArea-DWXuV2aZ.mjs → TextArea-n4IKHJKo.mjs} +1 -1
- package/dist/{TextArea-DWXuV2aZ.mjs.map → TextArea-n4IKHJKo.mjs.map} +1 -1
- package/dist/TextArea.d.mts +1 -1
- package/dist/{TextUnderlineTooltip-_7mIrZ2-.d.mts → TextUnderlineTooltip-Duzxfc_r.d.mts} +2 -2
- package/dist/TextUnderlineTooltip.d.mts +1 -1
- package/dist/Tile.d.mts +1 -1
- package/dist/Toast.d.mts +1 -1
- package/dist/{Toggle-Cav7bMxg.d.mts → Toggle-fh80PA8P.d.mts} +1 -1
- package/dist/Toggle.d.mts +1 -1
- package/dist/{Tooltip-DX-N-szt.d.mts → Tooltip-DabloV0o.d.mts} +2 -2
- package/dist/Tooltip.d.mts +1 -1
- package/dist/{TruncatedText-D2R7uy_y.d.mts → TruncatedText-B1W4BivL.d.mts} +1 -1
- package/dist/codec-B0dZTwlG.d.mts +29 -0
- package/dist/codec.d.mts +2 -0
- package/dist/components/BottomPanel/index.d.mts +2 -0
- package/dist/components/BottomPanel/index.mjs +293 -0
- package/dist/components/BottomPanel/index.mjs.map +1 -0
- package/dist/components/Breadcrumbs/index.d.mts +1 -1
- package/dist/components/Breadcrumbs/index.mjs +1 -1
- package/dist/components/Button/index.d.mts +2 -2
- package/dist/components/Card/index.d.mts +2 -2
- package/dist/components/CardV2/index.d.mts +1 -1
- package/dist/components/CardV2/index.mjs +1 -1
- package/dist/components/Checkbox/index.d.mts +1 -1
- package/dist/components/Checkbox/index.mjs +1 -1
- package/dist/components/Combobox/index.d.mts +2 -2
- package/dist/components/Combobox/index.mjs +1 -1
- package/dist/components/ConfigFormGroup/index.mjs +1 -1
- package/dist/components/DataTable/TableControls/index.d.mts +19 -16
- package/dist/components/DataTable/TableControls/index.mjs +2 -2
- package/dist/components/DataTable/index.mjs +7 -7
- package/dist/components/DataTable/types.d.mts +2 -2
- package/dist/components/DatePicker/index.d.mts +5 -5
- package/dist/components/DatePicker/index.mjs +1 -1
- package/dist/components/DropdownButton/index.mjs +1 -1
- package/dist/components/DropdownMenu/index.d.mts +1 -1
- package/dist/components/DropdownMenu/index.mjs +1 -1
- package/dist/components/FormControl/index.d.mts +2 -2
- package/dist/components/FormControl/index.mjs +1 -1
- package/dist/components/FormField/index.d.mts +1 -1
- package/dist/components/FormField/index.mjs +1 -1
- package/dist/components/Grid/index.d.mts +3 -0
- package/dist/components/Grid/index.mjs +85 -0
- package/dist/components/Grid/index.mjs.map +1 -0
- package/dist/components/HoverCopyableField/index.mjs +1 -1
- package/dist/components/ImageTile/index.mjs +3 -3
- package/dist/components/Input/index.d.mts +1 -1
- package/dist/components/Input/index.mjs +1 -1
- package/dist/components/ListBox/index.d.mts +3 -3
- package/dist/components/ListBox/index.mjs +1 -1
- package/dist/components/LoadingShimmer/index.mjs +1 -1
- package/dist/components/MaskedInput/index.mjs +1 -1
- package/dist/components/Menu/index.d.mts +1 -1
- package/dist/components/Menu/index.mjs +1 -1
- package/dist/components/Modal/index.mjs +1 -1
- package/dist/components/PageHeader/index.mjs +1 -1
- package/dist/components/Pagination/index.d.mts +3 -3
- package/dist/components/Pagination/index.mjs +1 -1
- package/dist/components/Pii/index.mjs +1 -1
- package/dist/components/Popover/index.mjs +1 -1
- package/dist/components/ProgressIndicator/index.mjs +12 -8
- package/dist/components/ProgressIndicator/index.mjs.map +1 -1
- package/dist/components/Radio/index.mjs +1 -1
- package/dist/components/RadioGroup/index.d.mts +1 -1
- package/dist/components/RadioGroup/index.mjs +1 -1
- package/dist/components/RightPanel/index.d.mts +2 -0
- package/dist/components/RightPanel/index.mjs +294 -0
- package/dist/components/RightPanel/index.mjs.map +1 -0
- package/dist/components/SegmentedControl/index.d.mts +1 -1
- package/dist/components/SegmentedControl/index.mjs +1 -1
- package/dist/components/Select/index.d.mts +1 -1
- package/dist/components/Select/index.mjs +1 -1
- package/dist/components/Spinner/index.mjs +1 -1
- package/dist/components/Stack/index.d.mts +1 -1
- package/dist/components/Sticker/index.d.mts +1 -1
- package/dist/components/TabBar/index.mjs +1 -1
- package/dist/components/Table/index.d.mts +7 -7
- package/dist/components/Table/index.mjs +1 -1
- package/dist/components/TableBox/index.d.mts +2 -2
- package/dist/components/TableBox/index.mjs +1 -1
- package/dist/components/TechnicalSticker/index.mjs +1 -1
- package/dist/components/Text/index.d.mts +1 -1
- package/dist/components/TextArea/index.d.mts +1 -1
- package/dist/components/TextArea/index.mjs +1 -1
- package/dist/components/Toggle/index.d.mts +1 -1
- package/dist/components/Tooltip/index.d.mts +3 -3
- package/dist/compound-expression.d.mts +1 -1
- package/dist/{constants-bA9kCzRQ.d.mts → constants-DcJ3tnwY.d.mts} +1 -1
- package/dist/constants.d.mts +1 -1
- package/dist/date-filter-BbWgAXy3.mjs +176 -0
- package/dist/date-filter-BbWgAXy3.mjs.map +1 -0
- package/dist/date-range-rule-value-DBEEWTQp.d.mts +17 -0
- package/dist/date-range-rule-value.d.mts +2 -0
- package/dist/date-rule-intent-BArNGT2E.d.mts +20 -0
- package/dist/date-rule-intent.d.mts +2 -0
- package/dist/display.d.mts +2 -2
- package/dist/fieldPickerOptions.d.mts +2 -2
- package/dist/{filter-size-context-C7injfBh.d.mts → filter-size-context-D1UhTwOG.d.mts} +2 -2
- package/dist/filter-size-context.d.mts +1 -1
- package/dist/helpers.d.mts +1 -1
- package/dist/{index-BPfK-u7y.d.mts → index-DASkW991.d.mts} +2 -2
- package/dist/{index-d_fTFuMM.d.mts → index-Dc_BgmPv.d.mts} +3 -3
- package/dist/{index-BxBsQi2S.d.mts → index-Dpo-RP6S.d.mts} +3 -3
- package/dist/index-e6k85DKM.d.mts +1 -0
- package/dist/index-uY8Qbwfx.d.mts +1 -0
- package/dist/index.d.mts +1 -1
- package/dist/index2.d.mts +1 -1
- package/dist/index3.d.mts +3 -3
- package/dist/index4.d.mts +14 -11
- package/dist/{input-D9FuQmlI.d.mts → input-M7BEIewR.d.mts} +3 -3
- package/dist/inputFields.d.mts +10 -10
- package/dist/{intersperse-CLkblj9A.mjs → intersperse-DQAyfeEw.mjs} +1 -1
- package/dist/{intersperse-CLkblj9A.mjs.map → intersperse-DQAyfeEw.mjs.map} +1 -1
- package/dist/lib/PDSProvider.d.mts +1 -1
- package/dist/lib/TruncatedText.d.mts +1 -1
- package/dist/lib/TruncatedTextWithTooltip.d.mts +1 -1
- package/dist/lib/date-filter/index.d.mts +3 -0
- package/dist/lib/date-filter/index.mjs +2 -0
- package/dist/lib/message.d.mts +1 -1
- package/dist/lib/pseudoClass.d.mts +1 -1
- package/dist/lib/useResizablePanel.d.mts +49 -0
- package/dist/lib/useResizablePanel.mjs +75 -0
- package/dist/lib/useResizablePanel.mjs.map +1 -0
- package/dist/{message-CqKB5mko.d.mts → message-DaiDXonE.d.mts} +1 -1
- package/dist/mixins/focus.d.mts +1 -1
- package/dist/mixins/hoverable.d.mts +2 -2
- package/dist/mixins/input.d.mts +1 -1
- package/dist/mixins/menuItem.d.mts +2 -2
- package/dist/mixins/text.d.mts +1 -1
- package/dist/{operators-CgcsYzfy.d.mts → operators-BsSl7gPE.d.mts} +10 -3
- package/dist/operators.d.mts +2 -2
- package/dist/patterns/LayoutLoadingShimmer/index.mjs +4 -4
- package/dist/relative-date-label.d.mts +15 -0
- package/dist/{text-xwtyWIbE.d.mts → text-DjTGRUM1.d.mts} +1 -1
- package/dist/{theme-Ftogn9Wo.d.mts → theme-Biwx2eJZ.d.mts} +1 -1
- package/dist/theme.d.mts +1 -1
- package/dist/{types-BrNreYUU.d.mts → types-B5VmRRMR.d.mts} +5 -3
- package/dist/types-Bsf1VsW6.d.mts +24 -0
- package/dist/{types-DVsBRqjZ.d.mts → types-Cg3aXHUh2.d.mts} +1 -1
- package/dist/{types-0_9G0kWg.d.mts → types-Df0D37uh.d.mts} +1 -1
- package/dist/{types-D55MZSyx.d.mts → types-V8UJX-rk.d.mts} +14 -2
- package/dist/types.d.mts +1 -1
- package/dist/types2.d.mts +2 -2
- package/dist/types3.d.mts +2 -2
- package/dist/types4.d.mts +2 -2
- package/dist/types5.d.mts +2 -0
- package/dist/url-state-ektb0HnB.d.mts +42 -0
- package/dist/url-state.d.mts +2 -0
- package/dist/useComboboxFooterAction.d.mts +1 -1
- package/dist/{useFilterStateV2-D8Q8QKhS.d.mts → useFilterStateV2-BB14vCC-.d.mts} +3 -3
- package/dist/useFilterStateV2.d.mts +1 -1
- package/dist/{useFormField-BBbq1izo.d.mts → useFormField-CQo08dR4.d.mts} +2 -2
- package/dist/useFormField.d.mts +1 -1
- package/dist/{useTableBoxDragAndDrop-Bye8gJTl.d.mts → useTableBoxDragAndDrop-B-Dev5D6.d.mts} +1 -1
- package/dist/useTableBoxDragAndDrop.d.mts +1 -1
- package/dist/useTruncation.d.mts +1 -1
- package/dist/{utilities-Bmwk_DRn.d.mts → utilities-BHMNnJ8h.d.mts} +1 -1
- package/dist/utilities.d.mts +1 -1
- package/dist/utils.d.mts +1 -1
- package/dist/{validation-CAtTuHO9.d.mts → validation-B22QjCrV.d.mts} +3 -3
- package/dist/validation.d.mts +1 -1
- package/dist/{value-control-resolver-DadI8r9a.d.mts → value-control-resolver-qKTH1ErF.d.mts} +5 -3
- package/dist/value-control-resolver.d.mts +1 -1
- package/llms.txt +3 -3
- package/package.json +11 -1
- package/skills/ui-authoring/COMPONENTS.md +2 -0
- package/skills/ui-authoring/PATTERNS.md +3 -1
- package/skills/ui-authoring/SKILL.md +2 -2
- package/dist/DatePicker-BNnZ6L1y.mjs.map +0 -1
- package/dist/Select-DX3toj6M.mjs.map +0 -1
- package/dist/TableControls-3bXyd8gS.mjs.map +0 -1
- /package/dist/{index-0-W_aPej.d.mts → index-7rWKHdox.d.mts} +0 -0
- /package/dist/{index-7in8TPrM.d.mts → index-8SLBz2NH.d.mts} +0 -0
- /package/dist/{index-BNRXMhlr.d.mts → index-B_BBnMou.d.mts} +0 -0
- /package/dist/{index-BO_854F2.d.mts → index-BcsXXrHq.d.mts} +0 -0
- /package/dist/{index-BSVhZrWN.d.mts → index-Bt4QNofW.d.mts} +0 -0
- /package/dist/{index-BrGZHEgX.d.mts → index-BwFl_eS0.d.mts} +0 -0
- /package/dist/{index-BwAfCVZH2.d.mts → index-CMuRFTR3.d.mts} +0 -0
- /package/dist/{index-CCt0lwyI.d.mts → index-CRo77wc3.d.mts} +0 -0
- /package/dist/{index-CFhUdAHM.d.mts → index-CX869wwk.d.mts} +0 -0
- /package/dist/{index-CREkvfw9.d.mts → index-CliqZ9rj.d.mts} +0 -0
- /package/dist/{index-CROz1VSV.d.mts → index-CuheJfs-.d.mts} +0 -0
- /package/dist/{index-CsuikFeJ.d.mts → index-D4DUvwPf.d.mts} +0 -0
- /package/dist/{index-CzUpNo0e.d.mts → index-DBGd4WeR.d.mts} +0 -0
- /package/dist/{index-DA6_cwf8.d.mts → index-DDdPqD_H.d.mts} +0 -0
- /package/dist/{index-DM6vVDZD.d.mts → index-DMRtRo7y.d.mts} +0 -0
- /package/dist/{index-DeVKzGce.d.mts → index-Dflz2i1X.d.mts} +0 -0
- /package/dist/{index-Jh0C5PIG.d.mts → index-DvmLVvRD.d.mts} +0 -0
- /package/dist/{index-Oio5ygqN.d.mts → index-DztUdPP_.d.mts} +0 -0
- /package/dist/{index-PWQavSPf.d.mts → index-Wc1llEvP.d.mts} +0 -0
- /package/dist/{index-sViox9YW.d.mts → index-dhjtMp5F.d.mts} +0 -0
package/dist/utils.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { t as FieldRegistry } from "./FieldRegistry-
|
|
1
|
+
import { l as FilterRule, p as FilterStateV2 } from "./types-V8UJX-rk.mjs";
|
|
2
|
+
import { t as FieldRegistry } from "./FieldRegistry-D6niLExM.mjs";
|
|
3
3
|
|
|
4
4
|
//#region components/DataTable/TableControls/FiltersV2/validation.d.ts
|
|
5
5
|
/**
|
|
@@ -48,4 +48,4 @@ declare function pruneToRegistry(state: FilterStateV2, registry: FieldRegistry |
|
|
|
48
48
|
declare function hasCompleteValue(rule: FilterRule, registry: FieldRegistry): boolean;
|
|
49
49
|
//#endregion
|
|
50
50
|
export { isFilterStateV2 as n, pruneToRegistry as r, hasCompleteValue as t };
|
|
51
|
-
//# sourceMappingURL=validation-
|
|
51
|
+
//# sourceMappingURL=validation-B22QjCrV.d.mts.map
|
package/dist/validation.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-
|
|
1
|
+
import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-B22QjCrV.mjs";
|
|
2
2
|
export { hasCompleteValue, isFilterStateV2, pruneToRegistry };
|
package/dist/{value-control-resolver-DadI8r9a.d.mts → value-control-resolver-qKTH1ErF.d.mts}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as FilterField, c as FilterOperator, u as FilterRuleValue } from "./types-
|
|
1
|
+
import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, l as FilterRule, u as FilterRuleValue } from "./types-V8UJX-rk.mjs";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.d.ts
|
|
@@ -27,9 +27,11 @@ interface ResolveValueControlOptions {
|
|
|
27
27
|
field: FilterField;
|
|
28
28
|
operator: FilterOperator;
|
|
29
29
|
value: FilterRuleValue;
|
|
30
|
-
|
|
30
|
+
relativeDate?: FilterRule['relativeDate'];
|
|
31
|
+
onChange: FilterRuleValueChange;
|
|
31
32
|
onCommit?: () => void;
|
|
32
33
|
ariaLabel?: string;
|
|
34
|
+
relativeDatesEnabled?: boolean;
|
|
33
35
|
/**
|
|
34
36
|
* Where the control is being rendered. `popover` (default) is the
|
|
35
37
|
* simple-pill `FilterPopover` surface — dedicated to one rule with
|
|
@@ -43,4 +45,4 @@ type ValueControlResolver = (opts: ResolveValueControlOptions) => ReactNode | un
|
|
|
43
45
|
declare function resolveValueControl(opts: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
|
|
44
46
|
//#endregion
|
|
45
47
|
export { ValueControlResolver as n, resolveValueControl as r, ResolveValueControlOptions as t };
|
|
46
|
-
//# sourceMappingURL=value-control-resolver-
|
|
48
|
+
//# sourceMappingURL=value-control-resolver-qKTH1ErF.d.mts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-
|
|
1
|
+
import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-qKTH1ErF.mjs";
|
|
2
2
|
export { ResolveValueControlOptions, ValueControlResolver, resolveValueControl };
|
package/llms.txt
CHANGED
|
@@ -15,7 +15,7 @@ For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`,
|
|
|
15
15
|
|
|
16
16
|
- [ui-authoring](skills/ui-authoring/SKILL.md): design tokens, PDS implementation guidelines, table guidelines (DataTable vs TableBox vs TableLayout), loading states, testing, Storybook
|
|
17
17
|
- [Tokens](skills/ui-authoring/TOKENS.md): Color / Spacing / Typography selection and catalog, radius, charts
|
|
18
|
-
- [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, indicators, feedback, empty states, charts
|
|
18
|
+
- [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, indicators, feedback, empty states, charts, panels
|
|
19
19
|
- [Components](skills/ui-authoring/COMPONENTS.md): which PDS component to use (and its import path); APIs live in that component's `.mdx` when one exists, otherwise in `dist/components/<Name>/index.d.mts`
|
|
20
20
|
|
|
21
21
|
## Imports
|
|
@@ -31,9 +31,9 @@ their own subpaths.
|
|
|
31
31
|
- Layout: `Stack` / `HStack` (components/Stack), `Spacer`
|
|
32
32
|
- Text: `Heading`, `Paragraph`, `Label` (components/Text)
|
|
33
33
|
- Tables: `DataTable` (data views w/ pagination + sorting), `TableBox` (editable form tables), `TableLayout` + `Table`/`TableRow`/`TableCell`/`TableHeaderCell` primitives (components/Table) — `TableLayout` has built-in `isLoading`/`isEmpty`/`nullState`/`showHeader` handling
|
|
34
|
-
- Page chrome: `PageHeader` (title or breadcrumbs variant), `Breadcrumbs`, `TabBar`
|
|
34
|
+
- Page chrome: `PageHeader` (title or breadcrumbs variant), `Breadcrumbs`, `TabBar`, `BottomPanel` (resizable bottom drawer)
|
|
35
35
|
- Feedback: `Spinner`, `Banner`, `Toast`, `LoadingShimmer`, `ProgressBar`
|
|
36
|
-
- Overlays: `Modal`, `Popover`, `Tooltip` / `TextUnderlineTooltip`, `DropdownMenu`, `FloatingPanel`
|
|
36
|
+
- Overlays: `Modal`, `RightPanel`, `Popover`, `Tooltip` / `TextUnderlineTooltip`, `DropdownMenu`, `FloatingPanel`
|
|
37
37
|
- Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`
|
|
38
38
|
- Status: `Sticker` (status badges), `Badge` (counts), `StatusIndicator`
|
|
39
39
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@persona/design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "React components for Persona UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"tanstack-intent"
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"./components/Attribute": "./dist/components/Attribute/index.mjs",
|
|
20
20
|
"./components/Badge": "./dist/components/Badge/index.mjs",
|
|
21
21
|
"./components/Banner": "./dist/components/Banner/index.mjs",
|
|
22
|
+
"./components/BottomPanel": "./dist/components/BottomPanel/index.mjs",
|
|
22
23
|
"./components/Breadcrumbs": "./dist/components/Breadcrumbs/index.mjs",
|
|
23
24
|
"./components/Button": "./dist/components/Button/index.mjs",
|
|
24
25
|
"./components/ButtonGroup": "./dist/components/ButtonGroup/index.mjs",
|
|
@@ -36,6 +37,7 @@
|
|
|
36
37
|
"./components/FloatingPanel": "./dist/components/FloatingPanel/index.mjs",
|
|
37
38
|
"./components/FormControl": "./dist/components/FormControl/index.mjs",
|
|
38
39
|
"./components/FormField": "./dist/components/FormField/index.mjs",
|
|
40
|
+
"./components/Grid": "./dist/components/Grid/index.mjs",
|
|
39
41
|
"./components/HoverCopyableField": "./dist/components/HoverCopyableField/index.mjs",
|
|
40
42
|
"./components/ImageTile": "./dist/components/ImageTile/index.mjs",
|
|
41
43
|
"./components/Input": "./dist/components/Input/index.mjs",
|
|
@@ -54,6 +56,7 @@
|
|
|
54
56
|
"./components/ProgressIndicator": "./dist/components/ProgressIndicator/index.mjs",
|
|
55
57
|
"./components/Radio": "./dist/components/Radio/index.mjs",
|
|
56
58
|
"./components/RadioGroup": "./dist/components/RadioGroup/index.mjs",
|
|
59
|
+
"./components/RightPanel": "./dist/components/RightPanel/index.mjs",
|
|
57
60
|
"./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
|
|
58
61
|
"./components/Select": "./dist/components/Select/index.mjs",
|
|
59
62
|
"./components/Slider": "./dist/components/Slider/index.mjs",
|
|
@@ -76,6 +79,7 @@
|
|
|
76
79
|
"./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
|
|
77
80
|
"./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
|
|
78
81
|
"./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
|
|
82
|
+
"./lib/date-filter": "./dist/lib/date-filter/index.mjs",
|
|
79
83
|
"./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
|
|
80
84
|
"./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
|
|
81
85
|
"./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
|
|
@@ -93,6 +97,7 @@
|
|
|
93
97
|
"./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
|
|
94
98
|
"./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
|
|
95
99
|
"./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
|
|
100
|
+
"./lib/useResizablePanel": "./dist/lib/useResizablePanel.mjs",
|
|
96
101
|
"./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",
|
|
97
102
|
"./lib/zindex": "./dist/lib/zindex.mjs",
|
|
98
103
|
"./mixins/focus": "./dist/mixins/focus.mjs",
|
|
@@ -204,6 +209,7 @@
|
|
|
204
209
|
"./components/Attribute": "./dist/components/Attribute/index.mjs",
|
|
205
210
|
"./components/Badge": "./dist/components/Badge/index.mjs",
|
|
206
211
|
"./components/Banner": "./dist/components/Banner/index.mjs",
|
|
212
|
+
"./components/BottomPanel": "./dist/components/BottomPanel/index.mjs",
|
|
207
213
|
"./components/Breadcrumbs": "./dist/components/Breadcrumbs/index.mjs",
|
|
208
214
|
"./components/Button": "./dist/components/Button/index.mjs",
|
|
209
215
|
"./components/ButtonGroup": "./dist/components/ButtonGroup/index.mjs",
|
|
@@ -221,6 +227,7 @@
|
|
|
221
227
|
"./components/FloatingPanel": "./dist/components/FloatingPanel/index.mjs",
|
|
222
228
|
"./components/FormControl": "./dist/components/FormControl/index.mjs",
|
|
223
229
|
"./components/FormField": "./dist/components/FormField/index.mjs",
|
|
230
|
+
"./components/Grid": "./dist/components/Grid/index.mjs",
|
|
224
231
|
"./components/HoverCopyableField": "./dist/components/HoverCopyableField/index.mjs",
|
|
225
232
|
"./components/ImageTile": "./dist/components/ImageTile/index.mjs",
|
|
226
233
|
"./components/Input": "./dist/components/Input/index.mjs",
|
|
@@ -239,6 +246,7 @@
|
|
|
239
246
|
"./components/ProgressIndicator": "./dist/components/ProgressIndicator/index.mjs",
|
|
240
247
|
"./components/Radio": "./dist/components/Radio/index.mjs",
|
|
241
248
|
"./components/RadioGroup": "./dist/components/RadioGroup/index.mjs",
|
|
249
|
+
"./components/RightPanel": "./dist/components/RightPanel/index.mjs",
|
|
242
250
|
"./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
|
|
243
251
|
"./components/Select": "./dist/components/Select/index.mjs",
|
|
244
252
|
"./components/Slider": "./dist/components/Slider/index.mjs",
|
|
@@ -261,6 +269,7 @@
|
|
|
261
269
|
"./lib/comboboxHelper": "./dist/lib/comboboxHelper.mjs",
|
|
262
270
|
"./lib/ConfigContext": "./dist/lib/ConfigContext.mjs",
|
|
263
271
|
"./lib/copyTextToClipboard": "./dist/lib/copyTextToClipboard.mjs",
|
|
272
|
+
"./lib/date-filter": "./dist/lib/date-filter/index.mjs",
|
|
264
273
|
"./lib/datePickerHelper": "./dist/lib/datePickerHelper.mjs",
|
|
265
274
|
"./lib/embeddedSurfaceProtocol": "./dist/lib/embeddedSurfaceProtocol.mjs",
|
|
266
275
|
"./lib/embeddedSurfaceRegistry": "./dist/lib/embeddedSurfaceRegistry.mjs",
|
|
@@ -278,6 +287,7 @@
|
|
|
278
287
|
"./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
|
|
279
288
|
"./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
|
|
280
289
|
"./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
|
|
290
|
+
"./lib/useResizablePanel": "./dist/lib/useResizablePanel.mjs",
|
|
281
291
|
"./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",
|
|
282
292
|
"./lib/zindex": "./dist/lib/zindex.mjs",
|
|
283
293
|
"./mixins/focus": "./dist/mixins/focus.mjs",
|
|
@@ -11,6 +11,7 @@ exists. If there is no `.mdx`, use the published type declarations
|
|
|
11
11
|
| `Attribute` | Labeling a data value (`<dl>`/`<dt>`/`<dd>`). Use `AttributeGrid` for a grid of them | `@persona/design-system/components/Attribute` |
|
|
12
12
|
| `Badge` | Count badge — a count or notification number | `@persona/design-system/components/Badge` |
|
|
13
13
|
| `Banner` | Alert / notification — important in-context info, success, warning, or danger. Optionally dismissable | `@persona/design-system/components/Banner` |
|
|
14
|
+
| `BottomPanel` | Resizable tabbed drawer anchored to the bottom of the page (e.g. logs, errors). Use `RightPanel` for a side panel | `@persona/design-system/components/BottomPanel` |
|
|
14
15
|
| `Breadcrumbs` | Showing where the user is in a hierarchy and navigating to ancestors | `@persona/design-system/components/Breadcrumbs` |
|
|
15
16
|
| `Button` | Triggering an action. Use `IconButton` when there is no label | `@persona/design-system/components/Button` |
|
|
16
17
|
| `ButtonGroup` | Choosing among related modes in a compact connected button set (often icons, e.g. alignment). Use `Toggle` for a single on/off setting; `RadioGroup` for a visible list of labeled choices | `@persona/design-system/components/ButtonGroup` |
|
|
@@ -45,6 +46,7 @@ exists. If there is no `.mdx`, use the published type declarations
|
|
|
45
46
|
| `ProgressIndicator` | Showing progress through a sequence of steps | `@persona/design-system/components/ProgressIndicator` |
|
|
46
47
|
| `Radio` | Picking one visible option. Prefer `RadioGroup` to manage the set | `@persona/design-system/components/Radio` |
|
|
47
48
|
| `RadioGroup` | Grouping two or more mutually exclusive `Radio`s and owning the selected value | `@persona/design-system/components/RadioGroup` |
|
|
49
|
+
| `RightPanel` | Complementary side panel for contextual updates while the page stays interactive (no overlay). Use `Modal` when the task needs full attention. See [Panels](../../patterns/Panels/Panels.mdx) | `@persona/design-system/components/RightPanel` |
|
|
48
50
|
| `SegmentedControl` | Picking one option from a compact set of mutually exclusive choices | `@persona/design-system/components/SegmentedControl` |
|
|
49
51
|
| `Select` | Dropdown — picking one value from a short, known list with no search. Use `Combobox` when the list needs search | `@persona/design-system/components/Select` |
|
|
50
52
|
| `Slider` | Picking a numeric value or range along a scale | `@persona/design-system/components/Slider` |
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Pre-built compositions of PDS components.
|
|
4
4
|
|
|
5
|
-
Which pattern to use, and for what.
|
|
5
|
+
Which pattern to use, and for what. Patterns with a dedicated doc link to
|
|
6
|
+
`patterns/<Name>/<Name>.mdx`.
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
| Pattern | Use for |
|
|
@@ -15,6 +16,7 @@ Which pattern to use, and for what.
|
|
|
15
16
|
| PageLayout | Page shell |
|
|
16
17
|
| LayoutLoadingSpinner | Centered 120px loading ring that fills its container. Use as the loading state for a page or embedded app when no layout-specific shimmer exists. |
|
|
17
18
|
| LayoutLoadingShimmer | Filling space while content loads |
|
|
19
|
+
| [Panels](../../patterns/Panels/Panels.mdx) | Use `RightPanel` when the page should stay visible. Use `Modal` when the task needs full attention. Never a custom drawer. |
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
## Forms
|
|
@@ -3,7 +3,7 @@ name: ui-authoring
|
|
|
3
3
|
description: Use when implementing UI, styling React components, working with design tokens, or making frontend changes, or when file paths include design-system/components/ or styled-components.
|
|
4
4
|
metadata:
|
|
5
5
|
library: '@persona/design-system'
|
|
6
|
-
library_version: '0.
|
|
6
|
+
library_version: '0.4.0'
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# UI Authoring
|
|
@@ -127,5 +127,5 @@ Add `ComponentName.stories.tsx` for every new component or visual variant.
|
|
|
127
127
|
## Resources
|
|
128
128
|
|
|
129
129
|
- [TOKENS.md](TOKENS.md) — Color / Spacing / Typography selection and catalog, radius, charts
|
|
130
|
-
- [PATTERNS.md](PATTERNS.md) — forms, layout, indicators, feedback, empty states
|
|
130
|
+
- [PATTERNS.md](PATTERNS.md) — forms, layout, panels, indicators, feedback, empty states
|
|
131
131
|
- [COMPONENTS.md](COMPONENTS.md) — which PDS component to use, and its import path; APIs live in each component's `.mdx`
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker-BNnZ6L1y.mjs","names":["useLocale","OpenButton","Popover","Card","RangeCalendarPresets","Popover"],"sources":["../components/DatePicker/Calendar/CalendarBase.tsx","../components/DatePicker/Calendar/CalendarCell.tsx","../components/DatePicker/Calendar/CalendarGrid.tsx","../components/DatePicker/common.ts","../components/DatePicker/Calendar/Calendar.tsx","../components/DatePicker/DateField.tsx","../components/DatePicker/DatePicker.tsx","../components/DatePicker/Calendar/RangeCalendarPresets.tsx","../components/DatePicker/Calendar/RangeCalendar.tsx","../components/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useButton } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport type { IconButtonProps } from 'design-system/components/Button/IconButton';\n\nexport const CalendarContainer = styled.div`\n display: inline-block;\n`;\n\nexport const CalendarHeader = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: ${Spacing[2]};\n`;\n\nexport const CalendarHeading = styled.div`\n ${Typography.TextLargeBold};\n flex: 1;\n text-align: center;\n`;\n\nconst StyledCalendarButton = styled(IconButton)`\n width: 32px;\n height: 32px;\n`;\n\nexport const CalendarButton = (props: IconButtonProps) => {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { buttonProps } = useButton(props, ref);\n\n return (\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <StyledCalendarButton {...buttonProps} className={props.className} ref={ref}>\n {props.children}\n </StyledCalendarButton>\n );\n};\n","import { type CalendarDate, type DateValue, isSameDay, isSameMonth } from '@internationalized/date';\nimport { useRef } from 'react';\nimport { useCalendarCell } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Typography } from '@persona/design-tokens';\n\nconst CalendarCellContainer = styled.td`\n text-align: center;\n width: 38px;\n height: 38px;\n padding: 0px;\n`;\n\ninterface CalendarCellButtonProps {\n isSelected?: boolean;\n isSelectionStart?: boolean;\n isSelectionEnd?: boolean;\n isInvalid?: boolean;\n isDisabled?: boolean;\n}\n\nconst CalendarCellButton = styled.button<CalendarCellButtonProps>`\n ${Typography.TextMedium};\n border-style: none;\n padding: 0;\n background: none;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: relative;\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background: ${Color.CorePurple100};\n `}\n\n ${({ isSelectionStart }) =>\n isSelectionStart &&\n css`\n background: ${Color.BackgroundButtonPrimary};\n color: ${Color.TextInverse};\n border-top-left-radius: ${BorderRadius.Sm};\n border-bottom-left-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isSelectionEnd }) =>\n isSelectionEnd &&\n css`\n background: ${Color.BackgroundButtonPrimary};\n color: ${Color.TextInverse};\n border-top-right-radius: ${BorderRadius.Sm};\n border-bottom-right-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isDisabled }) =>\n isDisabled &&\n css`\n color: ${Color.CoreSlate300};\n `}\n\n ${({ isInvalid }) =>\n isInvalid &&\n css`\n background: ${Color.BackgroundButtonDanger};\n color: ${Color.TextInverse};\n `}\n\n &:focus-visible {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: -2px;\n box-shadow: ${Color.PrimaryWhite} 0px 0px 0px 3px inset;\n z-index: 1;\n }\n`;\n\ninterface CalendarCellProps {\n state: CalendarState | RangeCalendarState;\n date: CalendarDate;\n currentMonth: DateValue;\n}\n\nconst CalendarCell = ({ state, date, currentMonth }: CalendarCellProps) => {\n const ref = useRef();\n const { cellProps, buttonProps, isSelected, isInvalid, isDisabled, formattedDate } =\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n useCalendarCell({ date }, state, ref);\n\n const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n\n const isOutsideMonth = !isSameMonth(currentMonth, date);\n const isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;\n const isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;\n\n return (\n <CalendarCellContainer {...cellProps}>\n <CalendarCellButton\n {...buttonProps}\n hidden={isOutsideMonth}\n isSelected={isSelected}\n isSelectionStart={isSelectionStart}\n isSelectionEnd={isSelectionEnd}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {formattedDate}\n </CalendarCellButton>\n </CalendarCellContainer>\n );\n};\n\nexport default CalendarCell;\n","import { type DateDuration, endOfMonth, getWeeksInMonth } from '@internationalized/date';\nimport { useCalendarGrid, useLocale } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport CalendarCell from './CalendarCell';\n\nconst CalendarGridContainer = styled.table`\n width: 266px;\n border-spacing: 0px;\n border-collapse: collapse;\n\n &:focus-visible {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: 1px;\n }\n`;\n\nconst CalendarGridDayHeader = styled.th`\n ${Typography.TextMedium};\n color: ${Color.TextSecondary};\n`;\n\ninterface CalendarGridProps {\n state: CalendarState | RangeCalendarState;\n offset?: DateDuration;\n skipFromTabOrder?: boolean;\n}\n\nconst CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }: CalendarGridProps) => {\n const { locale } = useLocale();\n const startDate = state.visibleRange.start.add(offset);\n const endDate = endOfMonth(startDate);\n\n const { gridProps, headerProps, weekDays } = useCalendarGrid(\n {\n startDate,\n endDate,\n },\n state,\n );\n\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // Remove second calendar grid from tab order - use arrow keys to navigate between months\n const modifiedGridProps = skipFromTabOrder ? { ...gridProps, tabIndex: -1 } : gridProps;\n\n return (\n <CalendarGridContainer {...modifiedGridProps}>\n <thead {...headerProps}>\n <tr>\n {weekDays.map((day, index) => (\n <CalendarGridDayHeader key={index}>{day}</CalendarGridDayHeader>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => (\n <tr key={weekIndex}>\n {state\n .getDatesInWeek(weekIndex, startDate)\n .map((date, i) =>\n date ? (\n <CalendarCell key={i} state={state} date={date} currentMonth={startDate} />\n ) : (\n <td key={i} />\n ),\n )}\n </tr>\n ))}\n </tbody>\n </CalendarGridContainer>\n );\n};\n\nexport default CalendarGrid;\n","import { GregorianCalendar } from '@internationalized/date';\n\nexport const createCalendar = () => new GregorianCalendar();\n","import type { Ref } from 'react';\nimport { type AriaCalendarProps, type DateValue, useCalendar, useLocale } from 'react-aria';\nimport { useCalendarState } from 'react-stately';\n\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\n\ninterface CalendarProps extends AriaCalendarProps<DateValue> {\n calendarRef?: Ref<HTMLDivElement>;\n}\n\nconst Calendar = (props: CalendarProps) => {\n const { locale } = useLocale();\n const state = useCalendarState({ ...props, locale, createCalendar });\n const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);\n\n return (\n <CalendarContainer {...calendarProps} ref={props.calendarRef}>\n <CalendarHeader>\n <CalendarButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </CalendarButton>\n <CalendarHeading>{title}</CalendarHeading>\n <CalendarButton {...nextButtonProps}>\n <ArrowRightIcon />\n </CalendarButton>\n </CalendarHeader>\n <CalendarGrid state={state} />\n </CalendarContainer>\n );\n};\n\nexport default Calendar;\n","import type { DateValue } from '@internationalized/date';\nimport { type AriaDateFieldProps, useDateField, useDateSegment } from '@react-aria/datepicker';\nimport { useLocale } from '@react-aria/i18n';\nimport { mergeRefs } from '@react-aria/utils';\nimport {\n type DateFieldState,\n type DateSegment as DateSegmentObj,\n type SegmentType,\n useDateFieldState,\n} from '@react-stately/datepicker';\nimport { forwardRef, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\nimport { isFocused, isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusWithinOutline } from 'design-system/mixins/focus';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\n\ntype DateSegmentContainerProps = { $isComma?: boolean; $isTimezone?: boolean } & PseudoClassProps;\nconst DateSegmentContainer = styled.div<DateSegmentContainerProps>`\n font-variant-numeric: tabular-nums;\n box-sizing: content-box;\n text-align: end;\n\n ${isFocused} {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: 1px;\n background-color: ${Color.CorePurple200};\n }\n\n ${({ $isComma, $isTimezone }) =>\n ($isComma || $isTimezone) &&\n css`\n margin-left: 0.25ch;\n margin-right: 0.25ch;\n `}\n\n ${({ $isTimezone }) =>\n $isTimezone &&\n css`\n color: ${Color.TextSecondary};\n pointer-events: none;\n\n &:focus {\n outline: none;\n background-color: transparent;\n }\n `}\n`;\n\ntype DateSegmentPlaceholderProps = { isPlaceholder?: boolean; type: SegmentType };\nconst DateSegmentPlaceholder = styled.span<DateSegmentPlaceholderProps>`\n display: block;\n width: 100%;\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n ${({ isPlaceholder }) =>\n isPlaceholder\n ? css`\n height: 100%;\n color: ${({ theme }) => theme.color.text.tertiary};\n `\n : css`\n visibility: hidden;\n height: 0;\n `}\n ${({ type }) =>\n type === 'literal' &&\n css`\n padding-left: ${Spacing[1]};\n padding-right: ${Spacing[1]};\n `}\n ${({ type, isPlaceholder }) =>\n type === 'month' &&\n isPlaceholder &&\n css`\n width: 3ch;\n `}\n`;\n\ninterface DateSegmentProps {\n segment: DateSegmentObj;\n state: DateFieldState;\n}\n\nfunction DateSegment({ segment, state }: DateSegmentProps) {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { segmentProps } = useDateSegment(segment, state, ref);\n\n let minWidth: string;\n\n switch (segment.type) {\n case 'dayPeriod': {\n minWidth = '2.75ch';\n break;\n }\n default: {\n minWidth = `${segment.maxValue != null && String(segment.maxValue).length + 0.25}ch`;\n break;\n }\n }\n\n const isComma = segment.type === 'literal' && segment.text === ', ';\n const isTimezone = segment.type === 'timeZoneName';\n\n return (\n <DateSegmentContainer\n {...segmentProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n style={{\n ...segmentProps.style,\n minWidth,\n }}\n $isComma={isComma}\n $isTimezone={isTimezone}\n {...(isTimezone && { tabIndex: -1, role: 'presentation' })}\n >\n {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}\n {segment.placeholder && (\n <DateSegmentPlaceholder\n aria-hidden='true'\n isPlaceholder={segment.isPlaceholder}\n type={segment.type}\n >\n {segment.placeholder}\n </DateSegmentPlaceholder>\n )}\n {segment.isPlaceholder ? '' : segment.text}\n </DateSegmentContainer>\n );\n}\n\nconst InputBox = styled.div<InputMixinProps & { $inputPosition: 'start' | 'end' }>`\n ${inputMixin};\n display: flex;\n padding-left: ${Spacing[2]};\n padding-right: ${Spacing[2]};\n line-height: 1;\n position: relative;\n\n &${isFocusedVisible}${isNotDisabled} {\n position: relative;\n z-index: 1;\n }\n\n ${focusWithinOutline}\n\n ${({ $inputPosition }) => {\n switch ($inputPosition) {\n case 'start': {\n return css`\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n `;\n }\n case 'end': {\n return css`\n margin-left: -1px;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n `;\n }\n }\n }}\n`;\n\ninterface DateFieldProps extends AriaDateFieldProps<DateValue> {\n inputPosition?: 'start' | 'end';\n focused?: boolean;\n readOnly?: boolean;\n value?: DateValue;\n disabled?: boolean;\n size?: InputSizes;\n style?: React.CSSProperties;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n hasError?: boolean;\n}\n\nexport const DateField = forwardRef<HTMLDivElement, DateFieldProps>(function DateField(\n props: DateFieldProps,\n forwardedRef,\n) {\n const { locale } = useLocale();\n const state = useDateFieldState({\n ...props,\n locale,\n createCalendar,\n });\n\n const ref = useRef<HTMLDivElement>();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { fieldProps } = useDateField(props, state, ref);\n\n return (\n <InputBox\n {...fieldProps}\n {...(props.dateFieldProps || {})}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={mergeRefs<HTMLDivElement>(ref, forwardedRef)}\n focused={props.focused}\n disabled={props.disabled}\n aria-label={props['aria-label']}\n $size={props.size ?? 'md'}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n $inputPosition={props.inputPosition}\n hasError={props.hasError}\n >\n {state.segments.map((segment, i) => (\n <DateSegment key={i} segment={segment} state={state} />\n ))}\n </InputBox>\n );\n});\n\nexport default DateField;\n","import type { DateValue } from '@internationalized/date';\nimport type { DatePickerProps as DatePickerBase } from '@react-types/datepicker';\nimport { type RefObject, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useDatePicker, useFocusWithin, VisuallyHidden } from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport Calendar from 'design-system/components/DatePicker/Calendar/Calendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport Popover from 'design-system/components/Popover';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nexport interface DatePickerProps extends DatePickerBase<DateValue> {\n id?: string;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n disabled?: boolean;\n size?: InputSizes;\n useModalZIndex?: boolean;\n}\n\nconst OpenButton = ({ calendarRef }: { calendarRef: RefObject<HTMLElement> }) => {\n const openCalBtnRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(\n {\n onPress: () => {\n if (calendarRef.current) {\n (\n calendarRef.current.querySelector('button[aria-label=\"Previous\"]') as HTMLButtonElement\n ).focus();\n }\n },\n },\n openCalBtnRef,\n );\n\n return <button {...buttonProps} ref={openCalBtnRef} aria-label='Open calendar' />;\n};\n\nexport const DatePicker = (props: DatePickerProps) => {\n const state = useDatePickerState(props);\n const ref = useRef<HTMLDivElement>(null);\n const fieldRef = useRef<HTMLDivElement>(null);\n const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);\n const calendarRef = useRef<HTMLDivElement>(null);\n // A ref, not state: the close sequence focuses the field before a state update would commit.\n const isClosingRef = useRef(false);\n\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n if (!state.isOpen && !isClosingRef.current) {\n state.setOpen(true);\n }\n },\n onBlurWithin: (e) => {\n // Close calendar if next target is not within the calendar\n if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) {\n state.setOpen(false);\n }\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date input itself\n if (ref.current?.contains(target)) {\n return;\n }\n if (state.isOpen) {\n state.setOpen(false);\n }\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' && !state.isOpen) {\n event.preventDefault();\n state.setOpen(true);\n }\n },\n [state],\n );\n\n return (\n <div style={{ display: 'flex', flexDirection: 'column' }}>\n <Popover\n open={state.isOpen}\n modal={false}\n contentProps={{\n style: { zIndex: props.useModalZIndex ? Z_INDICES.modalDropdown : Z_INDICES.dropdown },\n align: 'start',\n 'aria-modal': true,\n onInteractOutside: handleOutsideClick,\n onEscapeKeyDown: () => {\n state.setOpen(false);\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration\n e.preventDefault();\n isClosingRef.current = true;\n\n // Manually restore focus to the date field\n if (fieldRef.current) {\n const firstEditableSegment = fieldRef.current.querySelector('[tabindex=\"0\"]');\n if (firstEditableSegment instanceof HTMLElement) {\n firstEditableSegment.focus();\n }\n }\n\n // Reset flag after focus is done\n requestAnimationFrame(() => {\n isClosingRef.current = false;\n });\n },\n noPadding: true,\n }}\n >\n <Popover.Trigger asChild>\n <div\n {...mergeProps(groupProps, focusWithinProps)}\n ref={ref}\n style={{ display: 'flex', position: 'relative' }}\n >\n <DateField\n ref={fieldRef}\n id={props.id}\n dateFieldProps={props.dateFieldProps}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(fieldProps, { onKeyDown: handleKeyDown })}\n value={fieldProps.value ?? undefined}\n />\n <VisuallyHidden>\n <OpenButton calendarRef={calendarRef} />\n </VisuallyHidden>\n </div>\n </Popover.Trigger>\n <Calendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n id='calendar-popover'\n />\n </Popover>\n </div>\n );\n};\n\nexport default DatePicker;\n","import {\n type CalendarDate,\n type DateValue,\n endOfMonth,\n endOfYear,\n startOfMonth,\n startOfYear,\n today,\n} from '@internationalized/date';\nimport type { RangeValue } from '@react-types/shared';\nimport { Settings } from 'luxon';\nimport { memo, useRef } from 'react';\nimport { mergeProps, useButton } from 'react-aria';\nimport type { RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { MenuItem, MenuList } from 'design-system/components/Menu';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\ninterface DateRangePreset {\n label: string;\n range: RangeValue<CalendarDate>;\n}\n\nconst getDefaultPresets = (tz: string) => {\n const now = today(tz);\n return [\n {\n label: 'Last 7 days',\n range: {\n start: now.subtract({ days: 7 }),\n end: now,\n },\n },\n {\n label: 'Last 14 days',\n range: {\n start: now.subtract({ days: 14 }),\n end: now,\n },\n },\n {\n label: 'Last 30 days',\n range: {\n start: now.subtract({ days: 30 }),\n end: now,\n },\n },\n {\n label: 'This month',\n range: {\n start: startOfMonth(now),\n // Effectively, this should always be today, since we can't look forward\n end: now,\n },\n },\n {\n label: 'Last month',\n range: {\n start: startOfMonth(now.subtract({ months: 1 })),\n end: endOfMonth(now.subtract({ months: 1 })),\n },\n },\n {\n label: 'This year',\n range: {\n start: startOfYear(now),\n end: now,\n },\n },\n {\n label: 'Last year',\n range: {\n start: startOfYear(now.subtract({ years: 1 })),\n end: endOfYear(now.subtract({ years: 1 })),\n },\n },\n ];\n};\n\n/**\n * Compare two date values by year/month/day only, ignoring time components.\n */\nconst datesMatchByDay = (a: CalendarDate, b: DateValue): boolean =>\n a.year === b.year && a.month === b.month && a.day === b.day;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ninterface PresetButtonProps {\n state: RangeCalendarState;\n preset: DateRangePreset;\n isSelected: boolean;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n}\n\nconst StyledPresetButton = styled(MenuItem)`\n ${({ selected }) =>\n !selected &&\n css`\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n background-color: transparent;\n }\n `}\n\n &:focus-visible {\n // MenuItems default to outline: none, so we need to override it here.\n outline: 2px solid ${Color.BorderFocus} !important;\n outline-offset: 1px;\n }\n`;\n\ninterface DateRangePickerPresetsProps {\n presetsFn?: (tz: string) => DateRangePreset[];\n state: RangeCalendarState;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n}\n\nconst PresetButton = ({ state, preset, isSelected, setDateMode, ...props }: PresetButtonProps) => {\n const ref = useRef<HTMLDivElement>();\n const { buttonProps } = useButton(\n {\n onPress: () => {\n state.setValue(preset.range);\n setDateMode(null);\n },\n },\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref,\n );\n\n // Strip aria-current from useButton's props so it doesn't override MenuItem's.\n const { 'aria-current': _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);\n\n return (\n <StyledPresetButton\n selected={isSelected}\n {...mergedProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {preset.label}\n </StyledPresetButton>\n );\n};\n\nconst DateRangePickerPresets = ({\n presetsFn = getDefaultPresets,\n state,\n setDateMode,\n ...props\n}: DateRangePickerPresetsProps) => {\n // The reason that we need to do this at render time is because the default timezone for moment is set after\n // the current User's timezone is loaded. Thus we woudln't be getting the right timezone unless if we defer getting\n // the timezone.\n const presets = presetsFn(Settings.defaultZone.name);\n\n // First match wins — prevents multiple presets appearing selected when ranges overlap.\n const { value } = state;\n const selectedPresetIndex = value\n ? presets.findIndex(\n (preset) =>\n datesMatchByDay(preset.range.start, value.start) &&\n datesMatchByDay(preset.range.end, value.end),\n )\n : -1;\n\n return (\n <Container {...props}>\n <MenuList aria-label='Date range presets'>\n {presets.map((preset, i) => (\n <PresetButton\n key={i}\n preset={preset}\n state={state}\n setDateMode={setDateMode}\n isSelected={i === selectedPresetIndex}\n />\n ))}\n </MenuList>\n </Container>\n );\n};\n\n// Memoize to prevent re-renders when irrelevant state properties change\n// Only re-render when the actual selected date range (state.value) changes\nconst arePropsEqual = (\n prevProps: DateRangePickerPresetsProps,\n nextProps: DateRangePickerPresetsProps,\n) => {\n // Only care about the selected date range, not internal calendar state like isInvalid, visibleRange, etc.\n const prevValue = prevProps.state.value;\n const nextValue = nextProps.state.value;\n\n // If both are null/undefined, they're equal\n if (!prevValue && !nextValue) {\n return true;\n }\n // If only one is null/undefined, they're different\n if (!prevValue || !nextValue) {\n return false;\n }\n\n // Compare the actual date values\n return (\n prevValue.start.compare(nextValue.start) === 0 && prevValue.end.compare(nextValue.end) === 0\n );\n};\n\nexport default memo(DateRangePickerPresets, arePropsEqual);\n","import {\n type CalendarDate,\n type CalendarDateTime,\n type DateValue,\n now,\n toCalendarDateTime,\n} from '@internationalized/date';\nimport { range } from 'lodash-es';\nimport { Settings } from 'luxon';\nimport { type Ref, useRef } from 'react';\nimport {\n type DateRange,\n type RangeCalendarProps as RangeCalendarBaseProps,\n useDateFormatter,\n useLocale,\n useRangeCalendar,\n VisuallyHidden,\n} from 'react-aria';\nimport { type RangeCalendarState, useRangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\nimport Card from 'design-system/components/Card';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport RangeCalendarPresets from 'design-system/components/DatePicker/Calendar/RangeCalendarPresets';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\n\nconst RangeCalendarHeader = styled(CalendarHeader)`\n gap: ${Spacing[5]};\n`;\n\nconst CalendarHeaderMonth = styled.div`\n display: grid;\n grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);\n grid-template-areas: 'prev title next';\n width: 266px;\n align-items: center;\n`;\n\nconst CalendarGrids = styled.div`\n display: flex;\n gap: ${Spacing[5]};\n align-items: start;\n`;\n\nconst PrevButton = styled(CalendarButton)`\n grid-area: prev;\n justify-self: start;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst NextButton = styled(CalendarButton)`\n grid-area: next;\n justify-self: end;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst RangeCalendarHeading = styled(CalendarHeading)`\n grid-area: title;\n`;\n\nconst RangeCalendarContainer = styled.div`\n display: flex;\n`;\n\nconst PresetsContainer = styled(Card.Body)`\n border-right: 1px solid ${Color.BorderHairline};\n`;\n\nexport interface RangeCalendarProps extends RangeCalendarBaseProps<DateValue> {\n minDate?: RangeCalendarBaseProps<DateValue>['minValue'];\n maxDate?: RangeCalendarBaseProps<DateValue>['maxValue'];\n calendarRef?: Ref<HTMLDivElement>;\n hidePresets?: boolean;\n visibleMonths?: 1 | 2;\n onSelectDate?: (d: CalendarDate) => void;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n /**\n * From setValue of DateRangePicker\n */\n setValue: (value: DateRange | null) => void;\n granularity: 'day' | 'hour' | 'minute' | 'second';\n}\n\nconst hasTimeComponent = (date: DateValue) => 'hour' in date;\n\nconst earliest = (a: CalendarDateTime, b: CalendarDateTime) => (a.compare(b) <= 0 ? a : b);\n\n/**\n * Reaches the end of the preset's final day, but never past the present — filters\n * reject a future bound and drop the range entirely. The present is floored to the\n * minute, the finest the picker can express, so the bound is a stable value rather\n * than the sub-second noise of whenever the click landed.\n */\nconst presetEnd = (end: CalendarDateTime) =>\n earliest(\n end.set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),\n toCalendarDateTime(now(Settings.defaultZone.name)).set({ second: 0, millisecond: 0 }),\n );\n\nconst RangeCalendar = ({\n calendarRef,\n onSelectDate,\n minDate,\n maxDate,\n hidePresets,\n visibleMonths = 2,\n setDateMode,\n setValue,\n granularity,\n ...props\n}: RangeCalendarProps) => {\n const { locale } = useLocale();\n // Must gather the TZ from the user's settings.\n const timezoneName = Settings.defaultZone.name;\n const rangeCalendarState = useRangeCalendarState({\n ...props,\n minValue: minDate,\n maxValue: maxDate,\n visibleDuration: {\n months: visibleMonths,\n },\n locale,\n createCalendar,\n });\n\n const state: RangeCalendarState = {\n ...rangeCalendarState,\n setValue: (value) => {\n if (!value || granularity === 'day') {\n rangeCalendarState.setValue(value);\n return;\n }\n\n setValue({\n start: toCalendarDateTime(value.start),\n // A date-only end comes from a preset, where the end date is inclusive.\n end: hasTimeComponent(value.end)\n ? toCalendarDateTime(value.end)\n : presetEnd(toCalendarDateTime(value.end)),\n });\n },\n selectDate: (date) => {\n if (onSelectDate) {\n onSelectDate(date);\n rangeCalendarState.setAnchorDate(null);\n } else {\n rangeCalendarState.selectDate(date);\n }\n },\n };\n\n const ref = useRef();\n\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);\n\n const monthDateFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n timeZone: timezoneName,\n });\n\n const monthHeaders = range(0, visibleMonths).map((i) => {\n return (\n <CalendarHeaderMonth key={`calendar-month-${i}`}>\n {i === 0 && (\n <PrevButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </PrevButton>\n )}\n <RangeCalendarHeading aria-hidden>\n {monthDateFormatter.format(\n state.visibleRange.start.add({ months: i }).toDate(timezoneName),\n )}\n </RangeCalendarHeading>\n {i === visibleMonths - 1 && (\n <NextButton {...nextButtonProps}>\n <ArrowRightIcon />\n </NextButton>\n )}\n </CalendarHeaderMonth>\n );\n });\n\n const monthGrids = range(0, visibleMonths).map((i) => {\n return (\n <CalendarGrid\n key={`calendar-grid-${i}`}\n state={state}\n offset={{ months: i }}\n skipFromTabOrder={i > 0}\n />\n );\n });\n\n return (\n <RangeCalendarContainer ref={calendarRef}>\n {!hidePresets && (\n <PresetsContainer padding={Spacing[3]}>\n <RangeCalendarPresets state={state} setDateMode={setDateMode} />\n </PresetsContainer>\n )}\n <Card.Body padding={Spacing[3]}>\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <CalendarContainer {...calendarProps} ref={ref}>\n {/* Calendar header is separate from grid like this to facilitate a11y. */}\n <RangeCalendarHeader>\n <VisuallyHidden isFocusable={false}>{calendarProps['aria-label']}</VisuallyHidden>\n {monthHeaders}\n </RangeCalendarHeader>\n <CalendarGrids>{monthGrids}</CalendarGrids>\n </CalendarContainer>\n </Card.Body>\n </RangeCalendarContainer>\n );\n};\n\nexport default RangeCalendar;\n","import {\n CalendarDate,\n type DateValue,\n parseAbsolute,\n toCalendarDateTime,\n} from '@internationalized/date';\nimport type { DateRangePickerProps as DateRangePickerBase } from '@react-types/datepicker';\nimport type { AriaLabelingProps, RangeValue } from '@react-types/shared';\nimport { DateTime, Settings } from 'luxon';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n mergeProps,\n useButton,\n useDateRangePicker,\n useFocusWithin,\n usePress,\n VisuallyHidden,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport RangeCalendar from 'design-system/components/DatePicker/Calendar/RangeCalendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport { FormLabel } from 'design-system/components/FormControl';\nimport { ClearButton } from 'design-system/components/Input';\nimport Popover from 'design-system/components/Popover';\nimport { isDisabled } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nconst DateRangeContainer = styled.div`\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n`;\n\nconst DateRangeInputs = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst CustomFormLabel = styled(FormLabel)`\n margin-bottom: ${Spacing[2]};\n ${Typography.TextMediumBold};\n`;\n\nexport type DateRange = {\n startDate?: DateTime;\n endDate?: DateTime;\n};\n\nexport interface DateRangePickerProps extends DateRangePickerBase<DateValue>, AriaLabelingProps {\n dateRange: DateRange;\n onChange: (range: RangeValue<DateValue> | null) => void;\n disabled?: boolean;\n size?: InputSizes;\n minDate?: DateValue;\n maxDate?: DateValue;\n label?: string | null;\n dataTest?: string;\n id?: string;\n hidePresets?: boolean;\n visibleMonths?: 1 | 2;\n className?: string;\n /**\n * Whether or not to display clear button\n */\n showClear?: boolean;\n /**\n * Called when the clear button is clicked/pressed\n */\n onClear?: () => void;\n /**\n * z-index of the calendar popover\n */\n calendarZIndex?: number;\n /**\n * Element that should contain the calendar portal.\n */\n portalContainer?: HTMLElement | null;\n}\n\nconst OpenButton = ({ onOpen, disabled }: { onOpen: () => void; disabled?: boolean }) => {\n const openCalBtnRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(\n {\n isDisabled: disabled,\n onPress: onOpen,\n },\n openCalBtnRef,\n );\n\n return (\n <button\n {...buttonProps}\n type='button'\n ref={openCalBtnRef}\n aria-label='Open calendar'\n tabIndex={-1}\n />\n );\n};\n\nconst ClearRangeButton = styled(ClearButton)`\n height: 16px;\n width: 16px;\n margin-left: ${Spacing[2]};\n\n &${isDisabled}, &:disabled {\n background-color: transparent;\n }\n`;\n\nconst DateRangePicker = ({\n granularity = 'day',\n hideTimeZone = true,\n className,\n calendarZIndex,\n portalContainer,\n ...props\n}: DateRangePickerProps) => {\n const state = useDateRangePickerState({ granularity, hideTimeZone, ...props });\n const ref = useRef<HTMLDivElement>(null);\n const startFieldRef = useRef<HTMLDivElement>(null);\n const endFieldRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<HTMLDivElement>(null);\n const [dateMode, setDateMode] = useState<'start' | 'end' | null>(null);\n // A ref, not state: focus can return to a field before a state update would commit.\n const isClosingRef = useRef(false);\n const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } =\n useDateRangePicker({ granularity, hideTimeZone, ...props }, state, ref);\n\n const focusCalendar = useCallback(() => {\n requestAnimationFrame(() => {\n const firstFocusableCalendarElement = calendarRef.current?.querySelector<HTMLElement>(\n '[role=\"menuitem\"], button:not(:disabled), [tabindex=\"0\"]',\n );\n firstFocusableCalendarElement?.focus();\n });\n }, []);\n\n const openCalendar = useCallback(() => {\n if (!props.disabled && !state.isOpen && !isClosingRef.current) {\n state.setOpen(true);\n }\n }, [props.disabled, state]);\n\n const openCalendarWithFocus = useCallback(() => {\n openCalendar();\n focusCalendar();\n }, [focusCalendar, openCalendar]);\n\n // Keyed on instants rather than the `DateTime` identities: a caller that parses\n // its range during render hands us new objects every commit, and syncing on that\n // would call `setValue` -> `onChange` -> re-render without end.\n const startInstant = props.dateRange.startDate?.isValid\n ? props.dateRange.startDate.toMillis()\n : undefined;\n const endInstant = props.dateRange.endDate?.isValid\n ? props.dateRange.endDate.toMillis()\n : undefined;\n\n useEffect(() => {\n // If not set, return early\n if (startInstant == null || endInstant == null) {\n return;\n }\n\n // Find out the real time by adjusting the date to the user's timezone\n const startDate = DateTime.fromMillis(startInstant).setZone(Settings.defaultZone);\n const endDate = DateTime.fromMillis(endInstant).setZone(Settings.defaultZone);\n\n if (!startDate.isValid || !endDate.isValid) {\n return;\n }\n\n // Months are 1-indexed, no translations need to happen to CalendarDates\n const startCalendar = state.hasTime\n ? parseAbsolute(startDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(startDate.year, startDate.month, startDate.day);\n const endCalendar = state.hasTime\n ? parseAbsolute(endDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(endDate.year, endDate.month, endDate.day);\n\n const dateRangeV2: RangeValue<DateValue> = {\n start: startCalendar,\n end: endCalendar,\n };\n\n state.setValue(dateRangeV2);\n }, [startInstant, endInstant, granularity]);\n\n // Auto-close overlay when a complete range is selected (e.g., from presets with time enabled)\n const prevValueRef = useRef<RangeValue<DateValue | null> | null>(state.value);\n useEffect(() => {\n const prevValue = prevValueRef.current;\n const currentValue = state.value;\n\n // Update ref for next comparison\n prevValueRef.current = currentValue;\n\n // Close overlay only if BOTH start and end changed simultaneously to DIFFERENT dates (e.g., preset selection)\n // Do not close during manual date selection where:\n // 1. Only one date changes at a time, OR\n // 2. Both dates are set to the same value (initial selection from empty state)\n // Use value comparison (.compare) instead of object identity to handle controlled component re-renders\n const startChanged =\n prevValue?.start && currentValue?.start\n ? prevValue.start.compare(currentValue.start) !== 0\n : prevValue?.start !== currentValue?.start;\n const endChanged =\n prevValue?.end && currentValue?.end\n ? prevValue.end.compare(currentValue.end) !== 0\n : prevValue?.end !== currentValue?.end;\n const datesAreDifferent =\n currentValue?.start &&\n currentValue?.end &&\n currentValue.start.compare(currentValue.end) !== 0;\n\n if (state.isOpen && startChanged && endChanged && datesAreDifferent) {\n state.setOpen(false);\n }\n }, [state.value, state.isOpen]);\n\n const { focusWithinProps: startFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('start');\n openCalendar();\n },\n });\n\n const { focusWithinProps: endFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('end');\n openCalendar();\n },\n });\n\n const { focusWithinProps: containerFocusProps } = useFocusWithin({\n onBlurWithin: () => {\n requestAnimationFrame(() => {\n // Wait for popover focus transitions to settle before closing.\n const activeElement = document.activeElement;\n const isFocusInDateRangeInput =\n activeElement instanceof Node && ref.current?.contains(activeElement);\n const isFocusInCalendar =\n activeElement instanceof Node && calendarRef.current?.contains(activeElement);\n\n if (isFocusInDateRangeInput || isFocusInCalendar) {\n return;\n }\n\n setDateMode(null);\n if (state.isOpen) {\n state.setOpen(false);\n }\n });\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date inputs themselves\n if (ref.current?.contains(target)) {\n return;\n }\n\n // When there's a click outside of the containers + calendars, reset the highlighted date\n // Only close the calendar if it's open\n // Note: Radix UI's onInteractOutside already ensures the interaction is outside the popover content\n if (state.isOpen) {\n setDateMode(null);\n state.setOpen(false);\n }\n };\n\n const { pressProps: pressClearProps } = usePress({\n onPress: () => {\n state.setValue(null);\n\n if (props.onClear) {\n props.onClear();\n }\n },\n });\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault(); // Prevent form submission\n openCalendarWithFocus();\n }\n },\n [openCalendarWithFocus],\n );\n\n const isValueNull = state.value && state.value.start == null && state.value.end == null;\n\n return (\n <DateRangeContainer data-test={props.dataTest} className={className}>\n {props.label && <CustomFormLabel {...labelProps}>{props.label}</CustomFormLabel>}\n <Popover\n open={state.isOpen}\n modal={false}\n portalProps={portalContainer ? { container: portalContainer } : undefined}\n contentProps={{\n align: 'start',\n 'aria-modal': true,\n 'aria-label': props['aria-label'] ?? undefined,\n onInteractOutside: handleOutsideClick,\n onOpenAutoFocus: (e: Event) => {\n // Field focus opens the calendar for editing, while Enter/Open calendar moves focus inside.\n e.preventDefault();\n },\n onEscapeKeyDown: () => {\n state.setOpen(false);\n // Restore focus to the date field for keyboard users\n if (dateMode) {\n const fieldRef = dateMode === 'start' ? startFieldRef : endFieldRef;\n const seg = fieldRef.current?.querySelector('[tabindex=\"0\"]');\n if (seg instanceof HTMLElement) {\n seg.focus();\n }\n }\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration — Escape handles its own above.\n e.preventDefault();\n isClosingRef.current = true;\n requestAnimationFrame(() => {\n isClosingRef.current = false;\n });\n },\n noPadding: true,\n style: { zIndex: calendarZIndex },\n zIndex: calendarZIndex,\n }}\n >\n <Popover.Trigger asChild>\n <DateRangeInputs {...mergeProps(groupProps, containerFocusProps)} ref={ref}>\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={startFieldRef}\n inputPosition='start'\n focused={dateMode === 'start'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(startFieldProps, startFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={endFieldRef}\n inputPosition='end'\n focused={dateMode === 'end'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(endFieldProps, endFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {props.showClear && (\n <ClearRangeButton\n {...pressClearProps}\n type='button'\n disabled={isValueNull}\n aria-label='Clear date range'\n >\n <CircleXInverseIcon />\n </ClearRangeButton>\n )}\n <VisuallyHidden>\n <OpenButton onOpen={openCalendarWithFocus} disabled={props.disabled} />\n </VisuallyHidden>\n </DateRangeInputs>\n </Popover.Trigger>\n <RangeCalendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n setDateMode={setDateMode}\n setValue={state.setValue}\n granularity={granularity}\n hidePresets={props.hidePresets}\n visibleMonths={props.visibleMonths}\n onSelectDate={(dateVal) => {\n /**\n * Please use caution when editing the logic below.\n * It is specific to react-aria's date picker and can be brittle.\n */\n if (dateVal) {\n const date = state.hasTime ? toCalendarDateTime(dateVal) : dateVal;\n\n if (dateMode === 'start') {\n // Handle a case where we've deleted both dates\n if (state.value.end == null && state.value.start == null) {\n state.setValue({\n start: date,\n end: date,\n });\n }\n // If end becomes the start\n else if (state.value.end && date.compare(state.value.end) > 0) {\n state.setValue({\n start: state.value.end,\n end: state.value.end.set(dateVal), // Preserve time\n });\n } else {\n state.setValue({\n // if start is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n start: state.value.start == null ? date : state.value.start.set(dateVal),\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n\n end: state.value.end,\n });\n }\n setDateMode('end');\n } else {\n // Handle a case where we've deleted both dates\n if (state.value.end == null && state.value.start == null) {\n state.setValue({\n start: date,\n end: date,\n });\n }\n // If start becomes the end\n else if (state.value.start && date.compare(state.value.start) < 0) {\n state.setValue({\n start: state.value.start.set(dateVal),\n end: state.value.start,\n });\n } else {\n state.setValue({\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n start: state.value.start,\n // if end is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n end: state.value.end == null ? date : state.value.end.set(dateVal),\n });\n }\n // Close popover and keep focus on end field\n state.setOpen(false);\n }\n }\n }}\n minDate={props.minDate}\n maxDate={props.maxDate}\n />\n </Popover>\n </DateRangeContainer>\n );\n};\n\nexport default DateRangePicker;\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select-DX3toj6M.mjs","names":["DropdownMenu"],"sources":["../components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from '@radix-ui/react-select';\nimport type { Property } from 'csstype';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, MoreIcon } from '@persona/icons';\nimport { IconButton } from 'design-system/components/Button';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport Menu, {\n MenuHeading,\n MenuItem,\n type MenuItemProps,\n MenuList,\n type MenuProps,\n} from 'design-system/components/Menu';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {\n 'aria-label'?: string;\n placeholder?: string;\n\n /**\n * id will be applied to trigger\n */\n id?: string;\n\n /**\n * Class name will be applied to trigger\n */\n className?: string;\n\n /**\n * Max height of options menu\n */\n maxHeight?: number;\n\n /**\n * Min width of the select\n */\n minWidth?: number;\n\n /**\n * Width of the selected value container\n */\n valueContainerWidth?: 'auto' | '100%';\n\n /**\n * Render dropdown menu in a portal.\n */\n portal?: boolean;\n\n /**\n * Element the portalled menu renders into. Defaults to `document.body`. Pass a container inside\n * the current dialog so the menu escapes clipping ancestors without leaving the dialog's\n * dismiss scope, which would close it on click. Requires `portal`.\n */\n portalContainer?: HTMLElement | null;\n\n /**\n * Props to apply to Radix Select.Trigger within\n */\n triggerProps?: SelectPrimitive.SelectTriggerProps;\n\n /**\n * Props to apply to Radix Select.Content within\n */\n contentProps?: SelectPrimitive.SelectContentProps;\n\n /**\n * Callback meant for use with `react-hook-form`'s `useForm` (or Persona's `useFormSecurely`)\n */\n onChange?: (event: { target: { value: string } }) => void;\n\n size?: InputSizes;\n\n value?: string | null;\n\n width?: string;\n\n header?: ReactNode;\n\n footer?: ReactNode;\n\n /**\n * z-index of content. Please use sparingly.\n */\n zIndex?: Property.ZIndex;\n}\n\ninterface SelectButtonProps extends InputMixinProps {\n isSelectingPlaceholder: boolean;\n $width?: string;\n $minWidth?: number;\n}\n\nconst SelectButton = styled('button')<SelectButtonProps>`\n ${inputMixin};\n display: inline-flex;\n position: relative;\n align-items: center;\n outline: none;\n appearance: none;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding-right: ${Spacing[6]};\n width: ${({ $width }) => $width ?? '100%'};\n min-width: ${({ $minWidth }) => ($minWidth != null ? `${$minWidth}px` : 'auto')};\n pointer-events: auto;\n\n &${isNotDisabled} {\n cursor: pointer;\n }\n\n ${({ theme, isSelectingPlaceholder }) =>\n isSelectingPlaceholder &&\n css`\n color: ${theme.color.text.secondary};\n `}\n`;\n\ninterface SelectValueContainerProps {\n width?: string;\n}\n\nconst SelectValueContainer = styled.span<SelectValueContainerProps>`\n text-overflow: ellipsis;\n min-width: 0px;\n overflow: hidden;\n text-align: start;\n\n ${({ width }) =>\n width &&\n css`\n width: ${width};\n `}\n`;\n\nconst OptionSubtitle = styled.div`\n color: ${({ theme }) => theme.color.text.secondary};\n font-size: ${({ theme }) => theme.text.paragraph.sm.fontSize};\n margin-top: ${Spacing[1]};\n`;\n\ninterface OptionsMenuProps {\n maxHeight?: number;\n size?: InputSizes;\n}\n\nconst OptionsMenu = styled(Menu)<OptionsMenuProps>`\n width: var(--radix-select-trigger-width);\n max-height: ${({ maxHeight }) => maxHeight ?? '225px !important'};\n overflow-y: auto;\n margin-bottom: 0;\n\n ${({ size }) => {\n switch (size) {\n case 'md': {\n return css`\n ${MenuList} {\n padding: ${Spacing[2]};\n }\n\n ${OptionItem} {\n ${paragraphMixins.md};\n padding: ${Spacing[2]};\n }\n\n ${MenuHeading} {\n padding: ${Spacing[2]};\n }\n `;\n }\n case 'sm': {\n return css`\n ${MenuList} {\n padding: ${Spacing[1]};\n }\n\n ${OptionItem} {\n ${paragraphMixins.sm};\n padding: ${Spacing[1]};\n }\n\n ${MenuHeading} {\n padding: ${Spacing[1]};\n }\n `;\n }\n }\n }}\n`;\n\nconst SelectContent = styled(SelectPrimitive.Content)<{ $zIndex?: number | string }>`\n z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.dropdown};\n`;\n\nconst SelectHeaderContainer = styled(HStack)`\n display: flex;\n justify-content: space-between;\n padding: ${Spacing[1]} ${Spacing[1]} 0 ${Spacing[1]};\n margin-bottom: ${Spacing[1]};\n`;\n\nconst SelectFooter = styled.div`\n padding: ${Spacing[1]} 0;\n margin-top: ${Spacing[1]};\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\nconst SelectMenu = forwardRef<HTMLUListElement, MenuProps & OptionsMenuProps>(function SelectMenu(\n props: MenuProps,\n forwardedRef,\n) {\n return <OptionsMenu listRef={forwardedRef} {...props} />;\n});\n\nconst OptionItem = styled(MenuItem)`\n ${paragraphMixins.md};\n padding: ${Spacing[4]};\n`;\n\nconst SelectItem = forwardRef<HTMLDivElement, MenuItemProps>(function SelectItem(\n props: MenuItemProps,\n forwardedRef,\n) {\n return <OptionItem ref={forwardedRef} {...props} />;\n});\n\nconst StyledIconContainer = styled(SelectPrimitive.Icon)<{ disabled?: boolean }>`\n position: absolute;\n right: ${Spacing[2]};\n display: flex;\n justify-content: center;\n\n ${({ disabled }) => css`\n color: ${disabled ? Color.BorderIconDisabled : Color.BorderIconPrimary};\n `}\n`;\n\ninterface SelectHeaderProps {\n title?: ReactNode;\n menuItems?: ReactNode;\n menuTriggerLabel?: string;\n}\n\nexport const SelectHeader = ({ title, menuItems, menuTriggerLabel }: SelectHeaderProps) => {\n const uniqueId = useId();\n\n return (\n <SelectHeaderContainer align='center'>\n {title && (\n <Paragraph color='primary' weight='bold' size='md'>\n {title}\n </Paragraph>\n )}\n {menuItems && (\n <DropdownMenu\n portal={true}\n trigger={\n <IconButton>\n <MoreIcon />\n </IconButton>\n }\n triggerProps={{\n 'aria-label': menuTriggerLabel,\n id: `select-header-menu-trigger-${uniqueId}`,\n }}\n side='right'\n align='start'\n zIndex={Z_INDICES.layeredDropdown}\n contentProps={{\n // Fix for Radix UI 2.1.15 upgrade breaking changes:\n // 1. Portal rendering causes pointer-events issues preventing dropdown interaction\n // 2. Portal timing causes onFocusOutside to fire immediately, closing dropdown\n style: {\n pointerEvents: 'auto', // Ensure dropdown items receive mouse events\n },\n onFocusOutside: (event) => event.preventDefault(), // Prevent immediate portal closing\n }}\n >\n {menuItems}\n </DropdownMenu>\n )}\n </SelectHeaderContainer>\n );\n};\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n { portal = false, portalContainer, size = 'md', ...props }: SelectProps,\n forwardedRef,\n) {\n const {\n 'aria-label': ariaLabel,\n hasError,\n hasWarning,\n focused,\n active,\n hovered,\n disabled,\n placeholder,\n maxHeight,\n children,\n triggerProps,\n contentProps,\n id,\n className,\n onChange,\n onValueChange,\n value,\n width,\n header,\n footer,\n minWidth,\n valueContainerWidth,\n zIndex,\n } = props;\n\n const field = useFormField({ inputId: props.id, disabled, hasWarning, hasError });\n\n const content = (\n <SelectContent\n position='popper'\n side='bottom'\n sideOffset={8}\n $zIndex={zIndex}\n {...contentProps}\n >\n <SelectMenu maxHeight={maxHeight} size={size}>\n {header}\n <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n {footer && (\n <>\n <SelectFooter>{footer}</SelectFooter>\n </>\n )}\n </SelectMenu>\n </SelectContent>\n );\n\n return (\n <SelectPrimitive.Root\n {...props}\n onValueChange={(value) => {\n onChange?.({ target: { value } });\n onValueChange?.(value);\n }}\n // Custom behavior to consider null as empty value\n value={value === null ? '' : value} // eslint-disable-line @persona-id/eqeq-null-undefined\n >\n <SelectPrimitive.Trigger\n ref={forwardedRef}\n asChild\n id={id}\n className={className}\n disabled={field.disabled}\n aria-describedby={field.helperTextId}\n aria-errormessage={field.hasError ? field.helperTextId : undefined}\n aria-invalid={field.hasError}\n aria-label={ariaLabel}\n {...triggerProps}\n >\n <SelectButton\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n hovered={hovered}\n focused={focused}\n active={active}\n disabled={field.disabled}\n placeholder={placeholder}\n isSelectingPlaceholder={props.value === '' || props.value == null}\n $minWidth={minWidth}\n $size={size}\n $width={width}\n >\n <SelectValueContainer width={valueContainerWidth}>\n <SelectPrimitive.Value placeholder={placeholder} />\n </SelectValueContainer>\n <StyledIconContainer disabled={disabled}>\n <CaretDownIcon />\n </StyledIconContainer>\n </SelectButton>\n </SelectPrimitive.Trigger>\n {portal ? (\n <SelectPrimitive.Portal container={portalContainer}>{content}</SelectPrimitive.Portal>\n ) : (\n content\n )}\n </SelectPrimitive.Root>\n );\n});\n\nexport default Select;\n\nexport const Option = forwardRef<HTMLDivElement, SelectPrimitive.SelectItemProps & MenuItemProps>(\n function Option({ children, subtitle, ...props }, forwardedRef) {\n return (\n <SelectPrimitive.Item {...props} ref={forwardedRef} asChild>\n <SelectItem {...props}>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n {subtitle && <OptionSubtitle>{subtitle}</OptionSubtitle>}\n </SelectItem>\n </SelectPrimitive.Item>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuGA,MAAM,eAAe,OAAO,SAAS;IACjC,WAAW;;;;;;;;;mBASI,QAAQ,GAAG;YAClB,EAAE,aAAa,UAAU,OAAO;gBAC5B,EAAE,gBAAiB,aAAa,OAAO,GAAG,UAAU,MAAM,OAAQ;;;KAG7E,cAAc;;;;KAId,EAAE,OAAO,6BACV,0BACA,GAAG;eACQ,MAAM,MAAM,KAAK,UAAU;MACpC;;AAON,MAAM,uBAAuB,OAAO,IAA+B;;;;;;KAM9D,EAAE,YACH,SACA,GAAG;eACQ,MAAM;MACf;;AAGN,MAAM,iBAAiB,OAAO,GAAG;YACrB,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;gBACrC,EAAE,YAAY,MAAM,KAAK,UAAU,GAAG,SAAS;gBAC/C,QAAQ,GAAG;;AAQ3B,MAAM,cAAc,OAAO,KAAK;;iBAEf,EAAE,gBAAgB,aAAa,mBAAmB;;;;KAI9D,EAAE,WAAW;AACd,SAAQ,MAAR;EACE,KAAK,KACH,QAAO,GAAG;YACN,SAAS;uBACE,QAAQ,GAAG;;;YAGtB,WAAW;cACT,gBAAgB,GAAG;uBACV,QAAQ,GAAG;;;YAGtB,YAAY;uBACD,QAAQ,GAAG;;;EAI5B,KAAK,KACH,QAAO,GAAG;YACN,SAAS;uBACE,QAAQ,GAAG;;;YAGtB,WAAW;cACT,gBAAgB,GAAG;uBACV,QAAQ,GAAG;;;YAGtB,YAAY;uBACD,QAAQ,GAAG;;;;EAK9B;;AAGJ,MAAM,gBAAgB,OAAO,gBAAgB,QAAQ;cACvC,EAAE,cAAc,WAAW,UAAU,SAAS;;AAG5D,MAAM,wBAAwB,OAAO,OAAO;;;aAG/B,QAAQ,GAAG,GAAG,QAAQ,GAAG,KAAK,QAAQ,GAAG;mBACnC,QAAQ,GAAG;;AAG9B,MAAM,eAAe,OAAO,GAAG;aAClB,QAAQ,GAAG;gBACR,QAAQ,GAAG;0BACD,MAAM,cAAc;;AAG9C,MAAM,aAAa,WAA2D,SAAS,WACrF,OACA,cACA;AACA,QAAO,oBAAC,aAAD;EAAa,SAAS;EAAc,GAAI;EAAS,CAAA;EACxD;AAEF,MAAM,aAAa,OAAO,SAAS;IAC/B,gBAAgB,GAAG;aACV,QAAQ,GAAG;;AAGxB,MAAM,aAAa,WAA0C,SAAS,WACpE,OACA,cACA;AACA,QAAO,oBAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EACnD;AAEF,MAAM,sBAAsB,OAAO,gBAAgB,KAAK;;WAE7C,QAAQ,GAAG;;;;KAIjB,EAAE,eAAe,GAAG;aACZ,WAAW,MAAM,qBAAqB,MAAM,kBAAkB;IACvE;;AASJ,MAAa,gBAAgB,EAAE,OAAO,WAAW,uBAA0C;CACzF,MAAM,WAAW,OAAO;AAExB,QACE,qBAAC,uBAAD;EAAuB,OAAM;YAA7B,CACG,SACC,oBAAC,WAAD;GAAW,OAAM;GAAU,QAAO;GAAO,MAAK;aAC3C;GACS,CAAA,EAEb,aACC,oBAACA,sBAAD;GACE,QAAQ;GACR,SACE,oBAAC,YAAD,EAAA,UACE,oBAAC,UAAD,EAAY,CAAA,EACD,CAAA;GAEf,cAAc;IACZ,cAAc;IACd,IAAI,8BAA8B;IACnC;GACD,MAAK;GACL,OAAM;GACN,QAAQ,UAAU;GAClB,cAAc;IAIZ,OAAO,EACL,eAAe,QAChB;IACD,iBAAiB,UAAU,MAAM,gBAAgB;IAClD;aAEA;GACY,CAAA,CAEK;;;AAI5B,MAAa,SAAS,WAA2C,SAAS,OACxE,EAAE,SAAS,OAAO,iBAAiB,OAAO,MAAM,GAAG,SACnD,cACA;CACA,MAAM,EACJ,cAAc,WACd,UACA,YACA,SACA,QACA,SACA,UACA,aACA,WACA,UACA,cACA,cACA,IACA,WACA,UACA,eACA,OACA,OACA,QACA,QACA,UACA,qBACA,WACE;CAEJ,MAAM,QAAQ,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU;EAAY;EAAU,CAAC;CAEjF,MAAM,UACJ,oBAAC,eAAD;EACE,UAAS;EACT,MAAK;EACL,YAAY;EACZ,SAAS;EACT,GAAI;YAEJ,qBAAC,YAAD;GAAuB;GAAiB;aAAxC;IACG;IACD,oBAAC,gBAAgB,UAAjB,EAA2B,UAAoC,CAAA;IAC9D,UACC,oBAAA,YAAA,EAAA,UACE,oBAAC,cAAD,EAAA,UAAe,QAAsB,CAAA,EACpC,CAAA;IAEM;;EACC,CAAA;AAGlB,QACE,qBAAC,gBAAgB,MAAjB;EACE,GAAI;EACJ,gBAAgB,UAAU;AACxB,cAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AACjC,mBAAgB,MAAM;;EAGxB,OAAO,UAAU,OAAO,KAAK;YAP/B,CASE,oBAAC,gBAAgB,SAAjB;GACE,KAAK;GACL,SAAA;GACI;GACO;GACX,UAAU,MAAM;GAChB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,cAAY;GACZ,GAAI;aAEJ,qBAAC,cAAD;IACE,YAAY,MAAM;IAClB,UAAU,MAAM;IACP;IACA;IACD;IACR,UAAU,MAAM;IACH;IACb,wBAAwB,MAAM,UAAU,MAAM,MAAM,SAAS;IAC7D,WAAW;IACX,OAAO;IACP,QAAQ;cAXV,CAaE,oBAAC,sBAAD;KAAsB,OAAO;eAC3B,oBAAC,gBAAgB,OAAjB,EAAoC,aAAe,CAAA;KAC9B,CAAA,EACvB,oBAAC,qBAAD;KAA+B;eAC7B,oBAAC,eAAD,EAAiB,CAAA;KACG,CAAA,CACT;;GACS,CAAA,EACzB,SACC,oBAAC,gBAAgB,QAAjB;GAAwB,WAAW;aAAkB;GAAiC,CAAA,GAEtF,QAEmB;;EAEzB;AAIF,MAAa,SAAS,WACpB,SAAS,OAAO,EAAE,UAAU,UAAU,GAAG,SAAS,cAAc;AAC9D,QACE,oBAAC,gBAAgB,MAAjB;EAAsB,GAAI;EAAO,KAAK;EAAc,SAAA;YAClD,qBAAC,YAAD;GAAY,GAAI;aAAhB,CACE,oBAAC,gBAAgB,UAAjB,EAA2B,UAAoC,CAAA,EAC9D,YAAY,oBAAC,gBAAD,EAAA,UAAiB,UAA0B,CAAA,CAC7C;;EACQ,CAAA;EAG5B"}
|