@ryuzaki13/react-foundation-ui 3.1.11 → 3.3.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/dist/chunks/table-column-interactions-DzEvVuXe.js.map +1 -1
- package/dist/layout-picker/index.js +91 -60
- package/dist/layout-picker/index.js.map +1 -1
- package/dist/layout-picker/ui/LayoutPicker.d.ts +17 -1
- package/dist/layout-picker/ui/LayoutPicker.d.ts.map +1 -1
- package/dist/layout-picker/ui/LayoutPresetPreview.d.ts +8 -0
- package/dist/layout-picker/ui/LayoutPresetPreview.d.ts.map +1 -0
- package/dist/splitter/Splitter.d.ts +3 -1
- package/dist/splitter/Splitter.d.ts.map +1 -1
- package/dist/splitter/SplitterHeightContainer.d.ts +24 -0
- package/dist/splitter/SplitterHeightContainer.d.ts.map +1 -0
- package/dist/splitter/index.d.ts +1 -0
- package/dist/splitter/index.d.ts.map +1 -1
- package/dist/splitter/index.js +184 -84
- package/dist/splitter/index.js.map +1 -1
- package/dist/splitter/useSplitterContainerHeight.d.ts +24 -0
- package/dist/splitter/useSplitterContainerHeight.d.ts.map +1 -0
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/styles/mixins/_mixin.scss +43 -0
- package/storybook-static/assets/{Badge-DMeJysIv.js → Badge-D_miams1.js} +1 -1
- package/storybook-static/assets/{Badge.stories-DvNQ06lz.js → Badge.stories-C53rR6-m.js} +1 -1
- package/storybook-static/assets/{BadgeList-CO7wmhen.js → BadgeList-CXhMsbHN.js} +1 -1
- package/storybook-static/assets/{BarcodeScannerDialog.stories-CNr1YHnH.js → BarcodeScannerDialog.stories-seqRo6OE.js} +1 -1
- package/storybook-static/assets/{Button-BGDiDObX.js → Button-CnG8UaLy.js} +1 -1
- package/storybook-static/assets/{Button-BnbopVrx.js → Button-HcCf8ewy.js} +1 -1
- package/storybook-static/assets/{Button.stories-B_vh9vWu.js → Button.stories-BHSzUc2w.js} +1 -1
- package/storybook-static/assets/{CalendarView-D-AoscWR.js → CalendarView-XtXqdANe.js} +1 -1
- package/storybook-static/assets/{CheckBox-CNwSS4x-.js → CheckBox-CVtYfxZ9.js} +1 -1
- package/storybook-static/assets/{CheckBox-DFKl6X6O.js → CheckBox-D6vctcKk.js} +1 -1
- package/storybook-static/assets/{CheckBox.stories-CQDmYOCE.js → CheckBox.stories-DHXvTXOu.js} +1 -1
- package/storybook-static/assets/{Color-6AOWCN3U-BHwSg3Ve.js → Color-6AOWCN3U-BbiWLCrL.js} +1 -1
- package/storybook-static/assets/{ContextMenu-B55zGMkr.js → ContextMenu-CveMvmMr.js} +1 -1
- package/storybook-static/assets/{ContextMenu-BQyEArge.js → ContextMenu-nOxBI728.js} +1 -1
- package/storybook-static/assets/{ContextMenu.stories-DoB8T7qq.js → ContextMenu.stories-BX-U2HL5.js} +1 -1
- package/storybook-static/assets/{CustomOptionButton-Bp-x3GjU.js → CustomOptionButton-CeQkVSnm.js} +1 -1
- package/storybook-static/assets/{DateInput-CEzZlA7a.js → DateInput-Cl0jsK8W.js} +1 -1
- package/storybook-static/assets/{DateInput-uKgrV_i2.js → DateInput-DZulw10a.js} +1 -1
- package/storybook-static/assets/{DateInput.stories-BHGr75Za.js → DateInput.stories-BAk7jvdQ.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect-DpTqeahJ.js → DateRangePresetSelect-BbP1EZha.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect-D8loCgDP.js → DateRangePresetSelect-fHheb8Qb.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect.stories-ByB8xYCo.js → DateRangePresetSelect.stories-DAE_gknP.js} +1 -1
- package/storybook-static/assets/{Detail-BVI0ZMCR.js → Detail-COtF87BC.js} +1 -1
- package/storybook-static/assets/{Detail.stories-BESXPBRG.js → Detail.stories-CSfAEQCi.js} +1 -1
- package/storybook-static/assets/{Dialog-DaBWR5lX.js → Dialog-BrBqkDX8.js} +1 -1
- package/storybook-static/assets/{Dialog-7UYw11C-.js → Dialog-C2uB9kIV.js} +1 -1
- package/storybook-static/assets/{Dialog.stories-DJfiBF2X.js → Dialog.stories-Bm3UXA9U.js} +1 -1
- package/storybook-static/assets/{Disclosure-BT3_2wim.js → Disclosure-xhFEOG3w.js} +1 -1
- package/storybook-static/assets/{Disclosure.stories-CW14muXq.js → Disclosure.stories-Vl98lnzh.js} +1 -1
- package/storybook-static/assets/{DisclosureGroup-D4ywFTK1.js → DisclosureGroup-DUChaiu8.js} +1 -1
- package/storybook-static/assets/{DocsRenderer-JROSPFPF-BB7m694z.js → DocsRenderer-JROSPFPF-C_WINtPH.js} +1 -1
- package/storybook-static/assets/{DropZone-DroVMeFW.js → DropZone-1gMBb4LE.js} +1 -1
- package/storybook-static/assets/{DropZone-CkpPf2Ym.js → DropZone-BZvrpfEI.js} +1 -1
- package/storybook-static/assets/{DropZone.stories-H3oHPSgn.js → DropZone.stories-DVD3fCWD.js} +1 -1
- package/storybook-static/assets/{DropdownMenu-CR-0aPFt.js → DropdownMenu-DTeBES3S.js} +1 -1
- package/storybook-static/assets/{ExpandableActionPanel-C8gvedUk.js → ExpandableActionPanel-3gzSQS7e.js} +1 -1
- package/storybook-static/assets/{ExpandableActionPanel.stories-4VZLqIJG.js → ExpandableActionPanel.stories-D19yOaYM.js} +1 -1
- package/storybook-static/assets/{Flex-BVNxZ6Xi.js → Flex-DIZfsMsu.js} +1 -1
- package/storybook-static/assets/{Flex.stories-C0iLqBtf.js → Flex.stories-b6asO6Wg.js} +1 -1
- package/storybook-static/assets/{FloatingPopover-iQfpx33c.js → FloatingPopover-BMKn-ql-.js} +1 -1
- package/storybook-static/assets/{FormattedTableCell-DuOzSOq2.js → FormattedTableCell-BT4z527d.js} +1 -1
- package/storybook-static/assets/FormattedTableCell-CXlMRNU9.css +1 -0
- package/storybook-static/assets/{Grid-DjjVW_Zv.js → Grid-DOOnMH98.js} +1 -1
- package/storybook-static/assets/{Grid.stories-af60sApH.js → Grid.stories-BytLkIod.js} +1 -1
- package/storybook-static/assets/{ImageCropper.stories-CyTRwgsq.js → ImageCropper.stories-mOkJIs2l.js} +1 -1
- package/storybook-static/assets/{ImageRenderer-C1JrhJEh.js → ImageRenderer-CZRbXgZb.js} +1 -1
- package/storybook-static/assets/{ImageRenderer.stories-0N2gZ7pW.js → ImageRenderer.stories-DTw8oVgX.js} +1 -1
- package/storybook-static/assets/{ImageView.stories-BUvVhEQi.js → ImageView.stories-C_y-kuMM.js} +1 -1
- package/storybook-static/assets/{ImageViewer.stories-DQvp-8PA.js → ImageViewer.stories-BMW63e3_.js} +2 -2
- package/storybook-static/assets/{ImageViewerRuntime-C1R7YJjb.js → ImageViewerRuntime-CNlV0hTZ.js} +1 -1
- package/storybook-static/assets/{Input-PCnCDfCc.js → Input-CVU8GJSJ.js} +1 -1
- package/storybook-static/assets/{Input-CCoRpQA-.js → Input-D7ogoGUR.js} +1 -1
- package/storybook-static/assets/{Input.stories-B1BXs_Oi.js → Input.stories-Ck5NAzN5.js} +1 -1
- package/storybook-static/assets/{InputDateTime-Lwlxam28.js → InputDateTime-BtQKShpA.js} +1 -1
- package/storybook-static/assets/{InputDateTime.stories-uen-OcdG.js → InputDateTime.stories-Ck_Vdd0f.js} +1 -1
- package/storybook-static/assets/{InputFile-CLoJGype.js → InputFile-BtrIqfKw.js} +1 -1
- package/storybook-static/assets/{InputFile-CWsd9AT5.js → InputFile-C-wYyGvd.js} +1 -1
- package/storybook-static/assets/{InputFile.stories-CU2hQHzw.js → InputFile.stories-Hz_10-5g.js} +1 -1
- package/storybook-static/assets/{InputFiles-DDvgo5_t.js → InputFiles-fMA23_Bz.js} +1 -1
- package/storybook-static/assets/{InputFiles-UsxU995Q.js → InputFiles-kGadQIOr.js} +1 -1
- package/storybook-static/assets/{InputFiles.stories-Xybfwzym.js → InputFiles.stories-DCGwLGsk.js} +1 -1
- package/storybook-static/assets/{InputFilesList-uAKqNArY.js → InputFilesList-D2d_PfYA.js} +1 -1
- package/storybook-static/assets/{InputImage-CS9ySFBB.js → InputImage-DUthKRXu.js} +1 -1
- package/storybook-static/assets/{InputImage-Qgk9M4kC.js → InputImage-DmHkPJAH.js} +1 -1
- package/storybook-static/assets/{InputImage.stories-C6ruZA9G.js → InputImage.stories-jatpBa1U.js} +1 -1
- package/storybook-static/assets/{InteractiveComponents-DzDaJWyA.js → InteractiveComponents-DoYiFxrU.js} +1 -1
- package/storybook-static/assets/{InteractiveComponents.stories-ElVCyI3k.js → InteractiveComponents.stories-C7MNF767.js} +1 -1
- package/storybook-static/assets/LayoutPicker-BXPyXDP-.js +85 -0
- package/storybook-static/assets/{LayoutPicker-DjolQnoU.js → LayoutPicker-C-QQvpXv.js} +39 -2
- package/storybook-static/assets/LayoutPicker.stories-Dwo08nCV.js +91 -0
- package/storybook-static/assets/{Listbox-CoskUebV.js → Listbox-CVTOtx7h.js} +1 -1
- package/storybook-static/assets/{Listbox-BOmRUACj.js → Listbox-lOsGVKCt.js} +1 -1
- package/storybook-static/assets/{Listbox.stories-C9ZQ-n46.js → Listbox.stories-JF_tgMsM.js} +1 -1
- package/storybook-static/assets/{Modal-B0iwM39D.js → Modal-DNDnh6eL.js} +1 -1
- package/storybook-static/assets/{Modal-BRWAjcim.js → Modal-XipTBtwq.js} +1 -1
- package/storybook-static/assets/{Modal.stories-B2l2giba.js → Modal.stories-C-D2Op2H.js} +1 -1
- package/storybook-static/assets/{ModalManagerProvider-CBSdkzkh.js → ModalManagerProvider-BSgCQPE0.js} +1 -1
- package/storybook-static/assets/{MultiSelect-C22p2qFd.js → MultiSelect-BkjfbN5S.js} +1 -1
- package/storybook-static/assets/{MultiSelect-UuMNjdIM.js → MultiSelect-juwreD-7.js} +1 -1
- package/storybook-static/assets/{MultiSelect.stories-CfY-hEDN.js → MultiSelect.stories-DpH2Lt7S.js} +1 -1
- package/storybook-static/assets/{NoData-DD1-TPJ8.js → NoData-A59EYm0a.js} +1 -1
- package/storybook-static/assets/{NotificationsHost-Cph6Rv-P.js → NotificationsHost-Dmp9bSBy.js} +1 -1
- package/storybook-static/assets/{NotificationsHost.stories-CTwxblPK.js → NotificationsHost.stories-Ds9fPqPw.js} +1 -1
- package/storybook-static/assets/{ODataMultiSelect-BHRi8PM3.js → ODataMultiSelect-ATFN6j03.js} +1 -1
- package/storybook-static/assets/{ODataMultiSelect.stories-DO4MwYqZ.js → ODataMultiSelect.stories-BZHufWhw.js} +1 -1
- package/storybook-static/assets/{ODataSelect-BzowLQRW.js → ODataSelect-wsq-aKaL.js} +1 -1
- package/storybook-static/assets/{ODataSelect.stories-yiyUyvLW.js → ODataSelect.stories-DDJckPji.js} +1 -1
- package/storybook-static/assets/{ODataTreeMultiSelect-DYEDHrJk.js → ODataTreeMultiSelect-DRkVACkc.js} +1 -1
- package/storybook-static/assets/{ODataTreeMultiSelect.stories-BTicwCLX.js → ODataTreeMultiSelect.stories-Cf9f-c1A.js} +1 -1
- package/storybook-static/assets/{ODataTreeSelect-D5k1Iff-.js → ODataTreeSelect-DmpAqcJn.js} +1 -1
- package/storybook-static/assets/{ODataTreeSelect.stories-CCVP7I2I.js → ODataTreeSelect.stories-CmjLCIoB.js} +1 -1
- package/storybook-static/assets/{OneStepScroller-Cz6xH1bE.js → OneStepScroller-EAhOZmWt.js} +1 -1
- package/storybook-static/assets/{Option-BwIc-SxO.js → Option-Bc5-OwJm.js} +1 -1
- package/storybook-static/assets/{OptionButton-1bkL_ARz.js → OptionButton-PxwmoR0s.js} +1 -1
- package/storybook-static/assets/{PeriodSelect-DHDeruQ5.js → PeriodSelect-B-NPWAUQ.js} +1 -1
- package/storybook-static/assets/{PeriodSelect-3cBfMenI.js → PeriodSelect-Dd3tAy-l.js} +1 -1
- package/storybook-static/assets/{PeriodSelect.stories-DClPnVuc.js → PeriodSelect.stories-BCRagfo9.js} +1 -1
- package/storybook-static/assets/{PickerField-BVM71JTp.js → PickerField-BSGmEh4a.js} +1 -1
- package/storybook-static/assets/{PickerTriggerActions-DV6T2DSE.js → PickerTriggerActions-CbcemWC5.js} +1 -1
- package/storybook-static/assets/{Popover-Cd2h2-HN.js → Popover-ChIXyBaB.js} +1 -1
- package/storybook-static/assets/{Popover-Dgdym7C9.js → Popover-DDcNjJVQ.js} +1 -1
- package/storybook-static/assets/{Popover.stories-DZY8b7B4.js → Popover.stories-DFA9Jxpy.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput-BlDKWB8g.js → PresetRangeDateInput-BqXmZpJv.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput-M7g0tNmF.js → PresetRangeDateInput-CbqvxYsV.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput.stories-DUlRx8Hm.js → PresetRangeDateInput.stories-BHQTcW_z.js} +1 -1
- package/storybook-static/assets/{PresetSelect-BX0eCpVd.js → PresetSelect-CtDoIWSg.js} +1 -1
- package/storybook-static/assets/{README-BACv6QvN.js → README-87vCeikt.js} +1 -1
- package/storybook-static/assets/{README-BvYIa23p.js → README-8ieYbwRv.js} +1 -1
- package/storybook-static/assets/{README-_q_WEwWm.js → README-B2UhI-qx.js} +1 -1
- package/storybook-static/assets/{README-BVgy3UNo.js → README-B3SMW4TV.js} +1 -1
- package/storybook-static/assets/{README-Bppk1lMH.js → README-B43WmszX.js} +1 -1
- package/storybook-static/assets/{README-ClIksAGj.js → README-B5rpg-Bo.js} +1 -1
- package/storybook-static/assets/{README-BtA-sh7R.js → README-BAPMV_Cm.js} +1 -1
- package/storybook-static/assets/{README-q48GU6pG.js → README-BEzdp9qB.js} +1 -1
- package/storybook-static/assets/{README-Dntdyfw9.js → README-BHN17dUh.js} +1 -1
- package/storybook-static/assets/{README-CVYFrIk6.js → README-BPBvX2pu.js} +1 -1
- package/storybook-static/assets/{README-BtZJxRh9.js → README-BRozDrPV.js} +1 -1
- package/storybook-static/assets/{README-0gkKItXp.js → README-BS2qCis7.js} +1 -1
- package/storybook-static/assets/{README-Ccs88yDD.js → README-BS9CB7TR.js} +1 -1
- package/storybook-static/assets/{README-D9v4z9v1.js → README-BTI7-oMS.js} +1 -1
- package/storybook-static/assets/{README-BMD3jUe3.js → README-Bf13jEbX.js} +1 -1
- package/storybook-static/assets/{README-BYXXSCUq.js → README-BmX_gdJm.js} +1 -1
- package/storybook-static/assets/{README-KYuSHqmC.js → README-BuUZJLLD.js} +1 -1
- package/storybook-static/assets/{README-Hr6AhE0j.js → README-BviZJCGw.js} +1 -1
- package/storybook-static/assets/{README-BK1Z-v3p.js → README-CD0CH2Wy.js} +1 -1
- package/storybook-static/assets/{README-fIek3dXZ.js → README-CNQJDOEQ.js} +1 -1
- package/storybook-static/assets/{README-zkI8EjI4.js → README-COGC_G42.js} +1 -1
- package/storybook-static/assets/{README-Bqu12v63.js → README-CSYTh4FM.js} +1 -1
- package/storybook-static/assets/{README-Cm3-DZcu.js → README-CVzeBBbC.js} +1 -1
- package/storybook-static/assets/{README-DNC05YJB.js → README-CYkJGsO-.js} +1 -1
- package/storybook-static/assets/{README-hKk-aoSP.js → README-ClbpyGVv.js} +1 -1
- package/storybook-static/assets/{README-UspzlcL6.js → README-CvznQ5DE.js} +1 -1
- package/storybook-static/assets/{README-BpUXnkc_.js → README-D1_Y0Xmw.js} +1 -1
- package/storybook-static/assets/{README-3UAsyZbR.js → README-D2yCfl2o.js} +1 -1
- package/storybook-static/assets/{README-BxqbgiGL.js → README-D9bg9f74.js} +1 -1
- package/storybook-static/assets/{README-CHevIXCB.js → README-DJ1jDUnA.js} +1 -1
- package/storybook-static/assets/{README-Du37Xl3P.js → README-DMbTryDc.js} +1 -1
- package/storybook-static/assets/{README-CbYkIIHQ.js → README-DNjzB9pT.js} +1 -1
- package/storybook-static/assets/{README-DetgVpvA.js → README-DTAFDnFQ.js} +1 -1
- package/storybook-static/assets/{README-el0JuYkD.js → README-DUBJn2Ju.js} +1 -1
- package/storybook-static/assets/{README-BHkzEfPJ.js → README-D_RZ1dEa.js} +1 -1
- package/storybook-static/assets/{README-COom255N.js → README-DaHZmDOI.js} +1 -1
- package/storybook-static/assets/{README-D8nwrTvb.js → README-Daclz_Vq.js} +1 -1
- package/storybook-static/assets/{README-C56Pk295.js → README-Dl_o4aSe.js} +1 -1
- package/storybook-static/assets/{README-DIr-LZmu.js → README-DmaK5qEx.js} +1 -1
- package/storybook-static/assets/{README-C57tdNnd.js → README-DxeEPo-5.js} +1 -1
- package/storybook-static/assets/{README-QnABYk99.js → README-Dxm4jPJX.js} +1 -1
- package/storybook-static/assets/{README-BB4AIZx4.js → README-ErUs-WY2.js} +1 -1
- package/storybook-static/assets/{README-BIEcjQkL.js → README-OfF6wOio.js} +1 -1
- package/storybook-static/assets/{README-CueQgLpu.js → README-QZVvMoOB.js} +1 -1
- package/storybook-static/assets/{README-DYigwbHC.js → README-QjVUi8kc.js} +1 -1
- package/storybook-static/assets/{README-CjQxMGrK.js → README-SZH6KGw3.js} +1 -1
- package/storybook-static/assets/{README-DvWtY7cD.js → README-ZR6Xp0dF.js} +1 -1
- package/storybook-static/assets/{README-BTsdFVZT.js → README-a77qa4ty.js} +1 -1
- package/storybook-static/assets/{README-tqczNkKb.js → README-ex5nxaXZ.js} +1 -1
- package/storybook-static/assets/{README-Cvwidnmb.js → README-g1OFGqQI.js} +1 -1
- package/storybook-static/assets/{README-C1gKZwYI.js → README-gx4Fd1mY.js} +1 -1
- package/storybook-static/assets/{README-BOClmhwG.js → README-q1qdBpXc.js} +1 -1
- package/storybook-static/assets/{README-DWp4mMDT.js → README-vD1-Ulbp.js} +1 -1
- package/storybook-static/assets/{RadioButton-Mehizuhq.js → RadioButton-CF3QPcrf.js} +1 -1
- package/storybook-static/assets/{RadioButton-auLj4-zL.js → RadioButton-hjjU5sk5.js} +1 -1
- package/storybook-static/assets/{RadioButton.stories-DUPHMC7R.js → RadioButton.stories-koM1Ljav.js} +1 -1
- package/storybook-static/assets/{RadioGroup-CCBow4kQ.js → RadioGroup-Br-l88J6.js} +1 -1
- package/storybook-static/assets/{RadioGroup-DQJJ6gPZ.js → RadioGroup-D5eW-uDY.js} +1 -1
- package/storybook-static/assets/{RadioGroup.stories-DAD36GWN.js → RadioGroup.stories-DrwOi4QH.js} +1 -1
- package/storybook-static/assets/{Scrollable-BxISsXHD.js → Scrollable-BrsRmcMz.js} +1 -1
- package/storybook-static/assets/{Select-CW1LEiv_.js → Select-Bf5M5oc0.js} +1 -1
- package/storybook-static/assets/{Select-d-fEnaa8.js → Select-Cmlknxsv.js} +1 -1
- package/storybook-static/assets/{Select.stories-UnxQwrgw.js → Select.stories-BM8U-sIP.js} +1 -1
- package/storybook-static/assets/{SerializableSelect-DD2_hWWj.js → SerializableSelect-DF8HELZf.js} +1 -1
- package/storybook-static/assets/{SerializableSelect.stories-B9tOS_kS.js → SerializableSelect.stories-BfDNuils.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput-DbdBxnNL.js → SingleDateTimeInput-4p_cgs10.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput-BZHoMXPL.js → SingleDateTimeInput-DEOj7KGq.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput.stories-DYrlQQK_.js → SingleDateTimeInput.stories-D2EI6quF.js} +1 -1
- package/storybook-static/assets/Slider-Bz4wP74t.js +1 -0
- package/storybook-static/assets/{Slider-DUu2FS36.js → Slider-XVAOSj2a.js} +1 -1
- package/storybook-static/assets/{Slider.stories-DhgTMJXk.js → Slider.stories-B8_8QSd8.js} +1 -1
- package/storybook-static/assets/{SliderInput-BPDYabBm.js → SliderInput-1U-1F8y3.js} +1 -1
- package/storybook-static/assets/SliderInput-BmIo8trQ.js +2 -0
- package/storybook-static/assets/{SliderInput.stories-B_tKQkjE.js → SliderInput.stories-Da1hcUQg.js} +1 -1
- package/storybook-static/assets/{Sortable-rVZSJ0MP.js → Sortable-DdSm1U01.js} +1 -1
- package/storybook-static/assets/{Sortable.stories-CRJnSkcQ.js → Sortable.stories-B3vBG-Wg.js} +1 -1
- package/storybook-static/assets/Splitter-BdSyx5Lj.css +1 -0
- package/storybook-static/assets/Splitter-SV-d9MZj.js +105 -0
- package/storybook-static/assets/Splitter.stories-jPF9QpQ5.js +52 -0
- package/storybook-static/assets/{StateSelect-C-0IvRHS.js → StateSelect-CLYa34QZ.js} +1 -1
- package/storybook-static/assets/{StateSelect-gOQ0XvSf.js → StateSelect-Dg6j3tmo.js} +1 -1
- package/storybook-static/assets/{StateSelect.stories-CIxhqpNM.js → StateSelect.stories-B-XXt836.js} +1 -1
- package/storybook-static/assets/{StatusIndicator-CBIQrF9V.js → StatusIndicator-SmIOAZiH.js} +1 -1
- package/storybook-static/assets/{StatusIndicator.stories-BBU6jew8.js → StatusIndicator.stories-Dxn-Ph9C.js} +1 -1
- package/storybook-static/assets/{StringToggle.stories-CsRMTm3I.js → StringToggle.stories-Dm_95aFz.js} +1 -1
- package/storybook-static/assets/{Switch-DatgDVdK.js → Switch-DHKEAZQb.js} +1 -1
- package/storybook-static/assets/{Switch-CVYrb-C8.js → Switch-_tgHhBGP.js} +1 -1
- package/storybook-static/assets/{Switch.stories-BPu1LZgU.js → Switch.stories-BHEJkS4S.js} +1 -1
- package/storybook-static/assets/{Table-imlpBfwX.js → Table-DlSI_r_q.js} +1 -1
- package/storybook-static/assets/{Table.stories-Cvh1IQDl.js → Table.stories-B5rgYs9g.js} +1 -1
- package/storybook-static/assets/{TableEditor.stories-LCjtLdiP.js → TableEditor.stories-KVe48GsE.js} +1 -1
- package/storybook-static/assets/{Tabs-CRz6bWov.js → Tabs-DrYsqBrH.js} +1 -1
- package/storybook-static/assets/{Tabs.stories-DPnAgLNJ.js → Tabs.stories-BPct4JgR.js} +1 -1
- package/storybook-static/assets/{TabsBox-Nz7G3xEL.js → TabsBox-AWLl9n9k.js} +1 -1
- package/storybook-static/assets/{TagInput-BpcFBJfZ.js → TagInput-Bhnrf28Y.js} +1 -1
- package/storybook-static/assets/{TagInput.stories-BfSaOSvw.js → TagInput.stories-Bkt4gArB.js} +1 -1
- package/storybook-static/assets/{Text-B3D2vMCW.js → Text-BgFSnObV.js} +1 -1
- package/storybook-static/assets/{Textarea-xdvWOiup.js → Textarea-BNJPblVu.js} +1 -1
- package/storybook-static/assets/{Textarea-3jbBpgul.js → Textarea-ClwEnzFe.js} +1 -1
- package/storybook-static/assets/{Textarea.stories-CF4DNsNe.js → Textarea.stories-DpKH8ULU.js} +1 -1
- package/storybook-static/assets/{TimePanel-Bv2GqewD.js → TimePanel-BZwQNhG_.js} +1 -1
- package/storybook-static/assets/{TimePanel.stories-BxlduVmr.js → TimePanel.stories-4TgrKbYT.js} +1 -1
- package/storybook-static/assets/{Toggle-RzkOO8XU.js → Toggle-CO8Ij90u.js} +1 -1
- package/storybook-static/assets/{Toggle-CZQF9SOX.js → Toggle-DbixMwD6.js} +1 -1
- package/storybook-static/assets/{Toggle.stories-DLk-SFNM.js → Toggle.stories-Dc4VwIpg.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect-Q83iIlgk.js → TreeMultiSelect-C-_TH1CD.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect-DKkT-avt.js → TreeMultiSelect-CriZ1qIe.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect.stories-BZmGApb6.js → TreeMultiSelect.stories-d_SN0Sy2.js} +1 -1
- package/storybook-static/assets/{TreePickerBase-BLj2YWml.js → TreePickerBase-DrIewo4F.js} +1 -1
- package/storybook-static/assets/{TreeSelect-DWyC2NwF.js → TreeSelect-9_6a1BFQ.js} +1 -1
- package/storybook-static/assets/{TreeSelect-aoVPbBgH.js → TreeSelect-Bbt4VmZS.js} +1 -1
- package/storybook-static/assets/{TreeSelect.stories-CKsSdre0.js → TreeSelect.stories-pu8ExKD5.js} +1 -1
- package/storybook-static/assets/{TreeTable-JNPEvZz4.js → TreeTable-DophWkj1.js} +1 -1
- package/storybook-static/assets/{TreeTable.stories-BvNIzTgS.js → TreeTable.stories-Pfm9IHtt.js} +1 -1
- package/storybook-static/assets/{blocks-BQbV8tvi.js → blocks-B8YtS91C.js} +3 -3
- package/storybook-static/assets/{check-D8lsE3m8.js → check-Dpmf3AX3.js} +1 -1
- package/storybook-static/assets/{chevron-down-BUOphp2x.js → chevron-down-DNiHhbIr.js} +1 -1
- package/storybook-static/assets/{chevron-left-BEy7ghdm.js → chevron-left-DOGuNTdf.js} +1 -1
- package/storybook-static/assets/{chevron-right-DooOlrxc.js → chevron-right-Dpww2xSW.js} +1 -1
- package/storybook-static/assets/{chunk-W22LQPXL-IfzPJQYN.js → chunk-W22LQPXL-DMKzrwT-.js} +1 -1
- package/storybook-static/assets/{circle-alert-D81odDTC.js → circle-alert-0JRaOQ6l.js} +1 -1
- package/storybook-static/assets/{circle-check-qf8iTA7G.js → circle-check-cScFaPMW.js} +1 -1
- package/storybook-static/assets/{components-DZ74KJ1z.js → components-CX2-Yz0X.js} +3 -3
- package/storybook-static/assets/{contextMenu-CVqxMXIo.js → contextMenu-9tIzHxoE.js} +1 -1
- package/storybook-static/assets/{download-DHdaBay2.js → download-DgVtY66c.js} +1 -1
- package/storybook-static/assets/{floating-ui.react-BNZYvpUN.js → floating-ui.react-DoTNEH-V.js} +1 -1
- package/storybook-static/assets/{foundationApi-CZ_3jdeC.js → foundationApi-CrfT1bel.js} +1 -1
- package/storybook-static/assets/{foundationLib-DbJQ6xV6.js → foundationLib-C3lg6eHJ.js} +1 -1
- package/storybook-static/assets/{hooks-v5_dpZPQ.js → hooks-DUjApVwU.js} +1 -1
- package/storybook-static/assets/{iframe-Dvo-sM6X.js → iframe-BNEMNAEw.js} +4 -4
- package/storybook-static/assets/iframe-DRW7Blys.js +1 -0
- package/storybook-static/assets/{info-bO3OPRxt.js → info-DLaCn50r.js} +1 -1
- package/storybook-static/assets/number-scale-D2KTkjVQ.js +1 -0
- package/storybook-static/assets/{odata-qSl-tFRM.js → odata-gcOB7kIq.js} +1 -1
- package/storybook-static/assets/{odataStoryFixtures-D1GWvgZm.js → odataStoryFixtures-DYyQ-sVj.js} +1 -1
- package/storybook-static/assets/{react-_Ic2fGi_.js → react-E46PZk5t.js} +1 -1
- package/storybook-static/assets/{refresh-cw-208ktFgy.js → refresh-cw-DOoEo5nW.js} +1 -1
- package/storybook-static/assets/{settings-2-Cvceha-j.js → settings-2-qiHcSfL1.js} +1 -1
- package/storybook-static/assets/{sortable-CwkKLxhm.js → sortable-YPosiOrw.js} +1 -1
- package/storybook-static/assets/{syntaxhighlighter-QEQV7K2Y-BXNKwdIE.js → syntaxhighlighter-QEQV7K2Y-Cb3owL36.js} +1 -1
- package/storybook-static/assets/{trash-2-B0tUyzY_.js → trash-2-m2QWUX7a.js} +1 -1
- package/storybook-static/assets/{triangle-alert-DVsUvFoI.js → triangle-alert-dC_KzK0I.js} +1 -1
- package/storybook-static/assets/{useODataSelectBase-DSETV5ip.js → useODataSelectBase-CZT1sCI4.js} +1 -1
- package/storybook-static/assets/{useODataTreeData-PxgMVfow.js → useODataTreeData-C4C8qk14.js} +1 -1
- package/storybook-static/assets/{usePickerQuery-BujjL0G3.js → usePickerQuery-BVa-C4dI.js} +1 -1
- package/storybook-static/assets/{usePickerTriggerController-D-NPyaVF.js → usePickerTriggerController-DSGNNIhS.js} +1 -1
- package/storybook-static/assets/{x-BpYpjEHH.js → x-B7mf6jeL.js} +1 -1
- package/storybook-static/iframe.html +2 -2
- package/storybook-static/index.json +1 -1
- package/storybook-static/project.json +1 -1
- package/storybook-static/assets/FormattedTableCell-CTIL_ueu.css +0 -1
- package/storybook-static/assets/LayoutPicker-C4AXII_3.js +0 -66
- package/storybook-static/assets/LayoutPicker.stories-dx03fSh0.js +0 -74
- package/storybook-static/assets/Slider-B9n25YEj.js +0 -1
- package/storybook-static/assets/SliderInput-Bv-wqB63.js +0 -2
- package/storybook-static/assets/Splitter-BxWa6cr0.js +0 -83
- package/storybook-static/assets/Splitter-D-LmmQad.css +0 -1
- package/storybook-static/assets/Splitter.stories-BoAHtDqQ.js +0 -39
- package/storybook-static/assets/iframe-0Ohsk5kI.js +0 -1
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BNEMNAEw.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-B8YtS91C.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Splitter.stories-jPF9QpQ5.js";function b(e){let t={code:`code`,h2:`h2`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:g,parameters:{docs:{toc:!0}}}),`
|
|
2
|
+
`,(0,S.jsx)(u,{children:`Splitter`}),`
|
|
3
|
+
`,(0,S.jsx)(o,{children:(0,S.jsx)(t.p,{children:`Компонент для интерактивного разделения рабочей области на две панели с поддержкой вложенности, клавиатуры и ограничений по размеру`})}),`
|
|
4
|
+
`,(0,S.jsxs)(t.p,{children:[(0,S.jsx)(t.code,{children:`Splitter`}),` подходит для интерфейсов, где пользователь должен самостоятельно перераспределять пространство между соседними областями: навигацией и контентом, таблицей и деталями, превью и журналом событий.`]}),`
|
|
5
|
+
`,(0,S.jsxs)(t.p,{children:[`Компонент ожидает ровно два прямых дочерних элемента. Если нужно больше областей, их лучше собирать через вложенные `,(0,S.jsx)(t.code,{children:`Splitter`}),`, чтобы сохранить простую модель поведения и предсказуемый resize.`]}),`
|
|
6
|
+
`,(0,S.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
|
|
7
|
+
`,(0,S.jsx)(f,{}),`
|
|
8
|
+
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@ryuzaki13/react-foundation-ui/splitter";
|
|
9
|
+
|
|
10
|
+
export function Example() {
|
|
11
|
+
return (
|
|
12
|
+
<div style={{ height: 420 }}>
|
|
13
|
+
<Splitter initial={0.45}>
|
|
14
|
+
<div>Левая панель</div>
|
|
15
|
+
<div>Правая панель</div>
|
|
16
|
+
</Splitter>
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
`})}),`
|
|
21
|
+
`,(0,S.jsx)(i,{of:h}),`
|
|
22
|
+
`,(0,S.jsx)(t.h2,{id:`что-важно-про-поведение`,children:`Что важно про поведение`}),`
|
|
23
|
+
`,(0,S.jsxs)(t.ul,{children:[`
|
|
24
|
+
`,(0,S.jsx)(t.li,{children:`Во время перетаскивания компонент обновляет размеры панелей напрямую через DOM, а состояние React фиксирует только после завершения drag. Это уменьшает число лишних перерендеров и делает resize заметно плавнее.`}),`
|
|
25
|
+
`,(0,S.jsxs)(t.li,{children:[(0,S.jsx)(t.code,{children:`onChange`}),` получает итоговую долю первой панели после завершения drag или одного клавиатурного шага. Его можно использовать для сохранения настройки без записи на каждом `,(0,S.jsx)(t.code,{children:`pointermove`}),`.`]}),`
|
|
26
|
+
`,(0,S.jsxs)(t.li,{children:[`Значения `,(0,S.jsx)(t.code,{children:`initial`}),`, `,(0,S.jsx)(t.code,{children:`min`}),` и `,(0,S.jsx)(t.code,{children:`max`}),` автоматически нормализуются в диапазон `,(0,S.jsx)(t.code,{children:`0..1`}),`.`]}),`
|
|
27
|
+
`,(0,S.jsxs)(t.li,{children:[`Если `,(0,S.jsx)(t.code,{children:`min`}),` и `,(0,S.jsx)(t.code,{children:`max`}),` заданы в обратном порядке, компонент сам исправляет диапазон.`]}),`
|
|
28
|
+
`,(0,S.jsxs)(t.li,{children:[`Разделитель управляется клавиатурой: стрелки двигают границу пошагово, `,(0,S.jsx)(t.code,{children:`Home`}),` переводит в минимум, `,(0,S.jsx)(t.code,{children:`End`}),` в максимум.`]}),`
|
|
29
|
+
`]}),`
|
|
30
|
+
`,(0,S.jsx)(t.h2,{id:`изменяемая-высота-всей-области`,children:`Изменяемая высота всей области`}),`
|
|
31
|
+
`,(0,S.jsxs)(t.p,{children:[(0,S.jsx)(t.code,{children:`Splitter`}),` управляет только долей двух соседних панелей. Если нужно увеличивать всю рабочую область, не уменьшая соседнюю строку, оберните дерево splitter-компонентов в `,(0,S.jsx)(t.code,{children:`SplitterHeightContainer`}),`. Горизонтальный separator располагается под viewport: его можно перетаскивать или перемещать клавишами `,(0,S.jsx)(t.code,{children:`ArrowUp`}),`/`,(0,S.jsx)(t.code,{children:`ArrowDown`}),`, а `,(0,S.jsx)(t.code,{children:`Home`}),`/`,(0,S.jsx)(t.code,{children:`End`}),` устанавливают границы. `,(0,S.jsx)(t.code,{children:`onHeightChange`}),` возвращает итоговую высоту в CSS-пикселях после завершения drag или клавиатурного шага — это значение можно сохранять во внешних настройках.`]}),`
|
|
32
|
+
`,(0,S.jsx)(d,{of:y}),`
|
|
33
|
+
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter, SplitterHeightContainer } from "@ryuzaki13/react-foundation-ui/splitter";
|
|
34
|
+
|
|
35
|
+
export function AdjustableWorkspace() {
|
|
36
|
+
return (
|
|
37
|
+
<SplitterHeightContainer
|
|
38
|
+
height={480}
|
|
39
|
+
minHeight={240}
|
|
40
|
+
maxHeight={1200}
|
|
41
|
+
heightStep={20}
|
|
42
|
+
onHeightChange={(height) => saveHeight(height)}>
|
|
43
|
+
<Splitter initial={0.45}>
|
|
44
|
+
<div>Левая панель</div>
|
|
45
|
+
<div>Правая панель</div>
|
|
46
|
+
</Splitter>
|
|
47
|
+
</SplitterHeightContainer>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
`})}),`
|
|
51
|
+
`,(0,S.jsx)(t.h2,{id:`разделение-на-2-части`,children:`Разделение на 2 части`}),`
|
|
52
|
+
`,(0,S.jsx)(t.p,{children:`Это базовый и самый частый сценарий: левая панель под навигацию, правая под основное содержимое.`}),`
|
|
53
|
+
`,(0,S.jsx)(d,{of:h}),`
|
|
54
|
+
`,(0,S.jsx)(t.h2,{id:`горизонтальное-разделение`,children:`Горизонтальное разделение`}),`
|
|
55
|
+
`,(0,S.jsx)(t.p,{children:`Горизонтальный режим полезен для layout вида "контент сверху, журнал или детали снизу".`}),`
|
|
56
|
+
`,(0,S.jsx)(d,{of:m}),`
|
|
57
|
+
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@ryuzaki13/react-foundation-ui/splitter";
|
|
58
|
+
|
|
59
|
+
export function HorizontalLayout() {
|
|
60
|
+
return (
|
|
61
|
+
<div style={{ height: 420 }}>
|
|
62
|
+
<Splitter direction="horizontal" initial={0.55}>
|
|
63
|
+
<div>Верхняя панель</div>
|
|
64
|
+
<div>Нижняя панель</div>
|
|
65
|
+
</Splitter>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
`})}),`
|
|
70
|
+
`,(0,S.jsx)(t.h2,{id:`разделение-на-4-части`,children:`Разделение на 4 части`}),`
|
|
71
|
+
`,(0,S.jsxs)(t.p,{children:[`Чтобы собрать четыре независимые области, используйте `,(0,S.jsx)(t.code,{children:`Splitter`}),` внутри `,(0,S.jsx)(t.code,{children:`Splitter`}),`. Такой подход даёт предсказуемую вложенную структуру и хорошо масштабируется для сложных рабочих экранов.`]}),`
|
|
72
|
+
`,(0,S.jsx)(d,{of:p}),`
|
|
73
|
+
`,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@ryuzaki13/react-foundation-ui/splitter";
|
|
74
|
+
|
|
75
|
+
export function FourPaneLayout() {
|
|
76
|
+
return (
|
|
77
|
+
<div style={{ height: 420 }}>
|
|
78
|
+
<Splitter initial={0.48} min={0.25} max={0.75}>
|
|
79
|
+
<Splitter direction="horizontal" initial={0.58}>
|
|
80
|
+
<div>Левая верхняя панель</div>
|
|
81
|
+
<div>Левая нижняя панель</div>
|
|
82
|
+
</Splitter>
|
|
83
|
+
<Splitter direction="horizontal" initial={0.36}>
|
|
84
|
+
<div>Правая верхняя панель</div>
|
|
85
|
+
<div>Правая нижняя панель</div>
|
|
86
|
+
</Splitter>
|
|
87
|
+
</Splitter>
|
|
88
|
+
</div>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
`})}),`
|
|
92
|
+
`,(0,S.jsx)(t.h2,{id:`ограничения-и-клавиатура`,children:`Ограничения и клавиатура`}),`
|
|
93
|
+
`,(0,S.jsx)(t.p,{children:`В этом сценарии удобно проверять, что пользователь не может схлопнуть область сильнее допустимого минимума, а разделитель стабильно работает не только мышью, но и с клавиатуры.`}),`
|
|
94
|
+
`,(0,S.jsx)(d,{of:_}),`
|
|
95
|
+
`,(0,S.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
|
|
96
|
+
`,(0,S.jsxs)(t.ul,{children:[`
|
|
97
|
+
`,(0,S.jsxs)(t.li,{children:[`Родительский контейнер должен иметь явную высоту. `,(0,S.jsx)(t.code,{children:`SplitterHeightContainer`}),` задаёт её сам и подходит, когда пользователь должен менять высоту всей области.`]}),`
|
|
98
|
+
`,(0,S.jsxs)(t.li,{children:[`Держите в `,(0,S.jsx)(t.code,{children:`Splitter`}),` только два прямых потомка. Для трёх и более областей используйте вложенность.`]}),`
|
|
99
|
+
`,(0,S.jsx)(t.li,{children:`Если в панелях живут тяжёлые таблицы, графики или сложные формы, лучше избегать лишней бизнес-логики, завязанной на каждое движение разделителя.`}),`
|
|
100
|
+
`,(0,S.jsx)(t.li,{children:`Для touch-сценариев разделитель уже блокирует нативный скролл жеста на самом handle, поэтому drag остаётся предсказуемым.`}),`
|
|
101
|
+
`]}),`
|
|
102
|
+
`,(0,S.jsx)(t.h2,{id:`api`,children:`API`}),`
|
|
103
|
+
`,(0,S.jsx)(l,{of:g}),`
|
|
104
|
+
`,(0,S.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
|
|
105
|
+
`,(0,S.jsx)(a,{includePrimary:!1})]})}function x(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;function C(){return(C=e((()=>{S=t(),r(),c(),v()})))()}C();export{x as default};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-BNEMNAEw.js";import{a as i,i as a}from"./utils-tg3ibbzi.js";import{i as o,s,u as c}from"./number-scale-D2KTkjVQ.js";var l,u,d,f,p,m,h;function g(){return(g=e((()=>{l=`wAovST`,u=`QVVMwe`,d=`H43AJ8`,f=`pgo8sW`,p=`_8fCvqA`,m=`t6RFcI`,h={splitter:l,vertical:u,separator:d,horizontal:f,topLeft:p,bottomRight:m}})))()}function _(e,t,n){return Math.min(n,Math.max(t,e))}function v(e,t){return Number.isFinite(e)?_(e,0,1):t}function y(e,t){let n=v(e,k),r=v(t,A);return n<=r?[n,r]:[r,n]}function b(e,t){return e===`vertical`?t.clientX:t.clientY}function x(e,t){return e===`vertical`?t.width:t.height}function S(e,t){if(e===`vertical`){if(t===`ArrowLeft`)return-.02;if(t===`ArrowRight`)return M}if(e===`horizontal`){if(t===`ArrowUp`)return-.02;if(t===`ArrowDown`)return M}return null}function C(e,t){return t===`start`?0:t===`end`?1:e}function w({direction:e,initial:t,min:n,max:r,onChange:i,collapsedPane:a}){let[o,s]=y(n,r),c=(0,D.useRef)(null),l=(0,D.useRef)(null),u=(0,D.useRef)(null),d=(0,D.useRef)(null),f=(0,D.useRef)(null),p=(0,D.useRef)(null),m=(0,D.useRef)(0),h=(0,D.useRef)(_(v(t,j),o,s)),g=(0,D.useRef)(t),[w,T]=(0,D.useState)(()=>_(v(t,j),o,s)),E=(0,D.useRef)(w),O=(0,D.useCallback)(e=>{E.current=e,l.current?.style.setProperty(`flex-basis`,`${C(e,a)*100}%`),u.current?.setAttribute(`aria-valuenow`,`${Math.round(e*100)}`)},[a]),k=()=>{if(p.current!==null&&(cancelAnimationFrame(p.current),p.current=null),f.current===null)return E.current;let e=f.current;return f.current=null,O(e),e},A=e=>{f.current=e,p.current===null&&(p.current=requestAnimationFrame(()=>{p.current=null,f.current!==null&&O(f.current)}))},M=()=>{d.current?.(),d.current=null},N=(e,t=E.current)=>{k();let n=_(e,o,s);T(n),n!==t&&i?.(n)};return(0,D.useLayoutEffect)(()=>{O(w)},[O,w]),(0,D.useEffect)(()=>{T(e=>{let n=g.current!==t;return g.current=t,_(n?v(t,j):e,o,s)})},[t,o,s]),(0,D.useEffect)(()=>()=>{M(),p.current!==null&&cancelAnimationFrame(p.current)},[]),{containerRef:c,topLeftRef:l,separatorRef:u,ratio:w,minRatio:o,maxRatio:s,handleSeparatorPointerDown:t=>{if(t.button!==0)return;t.preventDefault();let n=c.current;if(!n)return;M();try{t.currentTarget.setPointerCapture?.(t.pointerId)}catch{}m.current=b(e,t),h.current=E.current;let r=t=>{let r=x(e,n.getBoundingClientRect());if(r<=0)return;let i=b(e,t)-m.current,a=_(h.current+i/r,o,s);A(a)},i=()=>{M(),N(k(),h.current)};d.current=()=>{document.removeEventListener(`pointermove`,r),document.removeEventListener(`pointerup`,i),document.removeEventListener(`pointercancel`,i)},document.addEventListener(`pointermove`,r),document.addEventListener(`pointerup`,i),document.addEventListener(`pointercancel`,i)},handleSeparatorKeyDown:t=>{let n=S(e,t.key);if(n!==null){t.preventDefault(),N(E.current+n);return}if(t.key===`Home`){t.preventDefault(),N(o);return}t.key===`End`&&(t.preventDefault(),N(s))}}}function T({className:e,direction:t,left:n,right:r,collapsedPane:a,logic:o}){let{containerRef:s,topLeftRef:c,separatorRef:l,ratio:u,minRatio:d,maxRatio:f,handleSeparatorPointerDown:p,handleSeparatorKeyDown:m}=o,g=C(u,a),_=a===`start`,v=a===`end`,y=a===null;return(0,O.jsxs)(`div`,{ref:s,className:i(h.splitter,h[t],e),children:[(0,O.jsx)(`div`,{ref:c,className:h.topLeft,style:{flexBasis:`${g*100}%`},hidden:_,children:n}),(0,O.jsx)(`div`,{ref:l,hidden:!y,role:`separator`,"aria-orientation":t===`vertical`?`vertical`:`horizontal`,"aria-valuemin":Math.round(d*100),"aria-valuemax":Math.round(f*100),"aria-valuenow":Math.round(u*100),tabIndex:y?0:-1,onPointerDown:p,onKeyDown:m,className:h.separator}),(0,O.jsx)(`div`,{className:h.bottomRight,hidden:v,children:r})]})}function E({direction:e=`vertical`,initial:t=j,min:n=k,max:r=A,onChange:i,className:a,collapsedPane:o=null,children:s}){let[c,l]=D.Children.toArray(s),u=w({direction:e,initial:t,min:n,max:r,onChange:i,collapsedPane:o});return l?(0,O.jsx)(T,{className:a,direction:e,left:c,right:l,collapsedPane:o,logic:u}):c}var D,O,k,A,j,M;function N(){return(N=e((()=>{D=n(),a(),g(),O=r(),k=.1,A=.9,j=.7,M=.02,E.__docgenInfo={description:``,methods:[],displayName:`Splitter`,props:{direction:{defaultValue:{value:`"vertical"`,computed:!1},required:!1},initial:{defaultValue:{value:`0.7`,computed:!1},required:!1},min:{defaultValue:{value:`0.1`,computed:!1},required:!1},max:{defaultValue:{value:`0.9`,computed:!1},required:!1},collapsedPane:{defaultValue:{value:`null`,computed:!1},required:!1}}}})))()}var ee,P,te,F;function I(){return(I=e((()=>{ee=`dN78Fa`,P=`q7Yvg9`,te=`yP9UOD`,F={container:ee,viewport:P,separator:te}})))()}function ne({height:e,defaultHeight:t,minHeight:n,maxHeight:r,heightStep:i,onHeightChange:a}){let l=s(n,r),u={...l,step:i},d=e!==void 0,[f,p]=(0,L.useState)(()=>c(t,l.min,l.max)),[m,h]=(0,L.useState)(null),g=c(e??f,l.min,l.max),_=m??g,v=(0,L.useRef)(null),y=(0,L.useRef)(null),b=(0,L.useRef)(null),x=(0,L.useRef)(_),S=(0,L.useRef)(_),C=(0,L.useRef)(0),w=()=>{if(y.current!==null&&(cancelAnimationFrame(y.current),y.current=null),b.current===null)return x.current;let e=b.current;return b.current=null,x.current=e,e},T=e=>{b.current=e,y.current===null&&(y.current=requestAnimationFrame(()=>{if(y.current=null,b.current===null)return;let e=b.current;b.current=null,x.current=e,h(e)}))},E=(e,t=x.current)=>{let n=c(e,l.min,l.max);x.current=n,h(null),n!==t&&(d||p(n),a?.(n))},D=()=>{v.current?.(),v.current=null};return(0,L.useLayoutEffect)(()=>{x.current=_},[_]),(0,L.useEffect)(()=>()=>{D(),y.current!==null&&cancelAnimationFrame(y.current)},[]),{height:_,minHeight:l.min,maxHeight:l.max,handleSeparatorPointerDown:e=>{if(e.button!==0)return;e.preventDefault(),D();try{e.currentTarget.setPointerCapture?.(e.pointerId)}catch{}C.current=e.clientY,S.current=x.current;let t=e=>{let t=e.clientY-C.current,n=c(S.current+t,l.min,l.max);T(n)},n=()=>{D(),E(w(),S.current)};v.current=()=>{document.removeEventListener(`pointermove`,t),document.removeEventListener(`pointerup`,n),document.removeEventListener(`pointercancel`,n)},document.addEventListener(`pointermove`,t),document.addEventListener(`pointerup`,n),document.addEventListener(`pointercancel`,n)},handleSeparatorKeyDown:e=>{let t;e.key===`ArrowUp`&&(t=o(_,-1,u)),e.key===`ArrowDown`&&(t=o(_,1,u)),e.key===`Home`&&(t=l.min),e.key===`End`&&(t=l.max),t!==void 0&&(e.preventDefault(),E(t,_))}}}var L;function R(){return(R=e((()=>{L=n()})))()}function re({height:e,defaultHeight:t=ie,minHeight:n=ae,maxHeight:r=V,heightStep:a=H,onHeightChange:o,className:s,viewportClassName:c,separatorClassName:l,separatorAriaLabel:u=`Изменить высоту рабочей области`,children:d}){let f=`${(0,z.useId)()}-viewport`,p=ne({height:e,defaultHeight:t,minHeight:n,maxHeight:r,heightStep:a,onHeightChange:o});return(0,B.jsxs)(`div`,{className:i(F.container,s),"data-ui":`splitter-height-container`,children:[(0,B.jsx)(`div`,{id:f,className:i(F.viewport,c),style:{height:p.height},"data-ui":`splitter-height-viewport`,children:d}),(0,B.jsx)(`div`,{role:`separator`,"aria-label":u,"aria-orientation":`horizontal`,"aria-controls":f,"aria-valuemin":p.minHeight,"aria-valuemax":p.maxHeight,"aria-valuenow":p.height,"aria-valuetext":`${p.height} px`,tabIndex:0,className:i(F.separator,l),onPointerDown:p.handleSeparatorPointerDown,onKeyDown:p.handleSeparatorKeyDown,"data-ui":`splitter-height-separator`})]})}var z,B,ie,ae,V,H;function U(){return(U=e((()=>{z=n(),a(),I(),R(),B=r(),ie=480,ae=240,V=1200,H=20,re.__docgenInfo={description:`Опциональная внешняя композиция для Splitter: область панелей получает
|
|
2
|
+
независимую высоту, а расположенный снизу separator изменяет весь viewport.
|
|
3
|
+
Внутренние Splitter при этом продолжают управлять только своими пропорциями.`,methods:[],displayName:`SplitterHeightContainer`,props:{defaultHeight:{defaultValue:{value:`480`,computed:!1},required:!1},minHeight:{defaultValue:{value:`240`,computed:!1},required:!1},maxHeight:{defaultValue:{value:`1200`,computed:!1},required:!1},heightStep:{defaultValue:{value:`20`,computed:!1},required:!1},separatorAriaLabel:{defaultValue:{value:`"Изменить высоту рабочей области"`,computed:!1},required:!1}}}})))()}var oe=t({AdjustableHeight:()=>$,Basic:()=>Y,Constrained:()=>Q,Horizontal:()=>X,NestedFourPanels:()=>Z,__namedExportsOrder:()=>ue,default:()=>le});function W({children:e}){return(0,q.jsx)(`div`,{style:{height:490},children:e})}function G({title:e,description:t,items:n=[]}){return(0,q.jsxs)(`div`,{style:{height:`100%`,padding:`var(--space-md)`,borderRadius:`var(--radius-md)`,border:`var(--border)`,display:`grid`,alignContent:`start`,gap:`var(--space-md)`},className:`scrollable`,children:[(0,q.jsxs)(`div`,{children:[(0,q.jsx)(`h2`,{children:e}),(0,q.jsx)(`p`,{children:t})]}),n.length>0&&(0,q.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:n.map(e=>(0,q.jsx)(`div`,{style:{padding:`var(--space-sm) var(--space-md)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-1)`},children:e},e))})]})}function K(e){return(0,q.jsx)(W,{children:(0,q.jsxs)(E,{...e,children:[(0,q.jsx)(G,{title:`Навигация`,description:`Левая панель подходит для фильтров, дерева разделов, списка сущностей или структуры документа.`,items:[`Раздел 1`,`Раздел 2`,`Раздел 3`,`Раздел 4`]}),(0,q.jsx)(G,{title:`Рабочая область`,description:`Правая панель обычно содержит детальный контент: таблицу, карточку объекта, форму или вкладки.`,items:[`Текущий документ`,`История изменений`,`Комментарии`,`Связанные объекты`,`Параметры отображения`]})]})})}function se(e){return(0,q.jsx)(W,{children:(0,q.jsxs)(E,{...e,children:[(0,q.jsxs)(E,{direction:`horizontal`,initial:.58,min:.25,max:.75,children:[(0,q.jsx)(G,{title:`Список`,description:`Верхняя левая панель может держать навигацию или результат поиска.`,items:[`Поиск`,`Фильтр по статусу`,`Группы`,`Быстрые действия`]}),(0,q.jsx)(G,{title:`Подробности`,description:`Нижняя левая панель подходит для связанного контента по выбранному элементу.`,items:[`Свойства`,`Ответственный`,`Теги`,`Контекст`]})]}),(0,q.jsxs)(E,{direction:`horizontal`,initial:.36,min:.2,max:.8,children:[(0,q.jsx)(G,{title:`Превью`,description:`Верхняя правая панель может содержать документ, схему, карту или live-просмотр.`,items:[`Предпросмотр файла`,`Масштаб 100%`,`Слой подсветки`]}),(0,q.jsx)(G,{title:`Журнал`,description:`Нижняя правая панель часто используется для событий, логов или вспомогательных данных.`,items:[`10:31 Импорт завершён`,`10:34 Индексация`,`10:36 Синхронизация`,`10:38 Проверка целостности`]})]})]})})}function ce(e){return(0,q.jsx)(W,{children:(0,q.jsxs)(E,{...e,children:[(0,q.jsx)(G,{title:`Фиксированные ограничения`,description:"У этой панели ужаты границы `min` и `max`, поэтому splitter нельзя увести слишком далеко.",items:[`Нажмите на разделитель`,`Используйте стрелки`,`Home = минимум`,`End = максимум`]}),(0,q.jsx)(G,{title:`Проверка доступности`,description:`Сценарий помогает проверить клавиатурное управление, устойчивость границ и отсутствие рывков при drag.`,items:[`ArrowLeft / ArrowRight`,`ArrowUp / ArrowDown`,`Перетаскивание мышью`,`Перетаскивание на тач-устройстве`]})]})})}var q,J,le,Y,X,Z,Q,$,ue;function de(){return(de=e((()=>{N(),U(),q=r(),{useArgs:J}=__STORYBOOK_MODULE_PREVIEW_API__,le={title:`UI/Splitter`,component:E,parameters:{atomicCanvas:!0,layout:`padded`},args:{direction:`vertical`,initial:.45,min:.15,max:.85},argTypes:{direction:{description:`Направление разделения: вертикальное по ширине или горизонтальное по высоте.`,control:`inline-radio`,options:[`vertical`,`horizontal`]},initial:{description:`Начальная доля первой панели в диапазоне от 0 до 1.`,control:{type:`range`,min:0,max:1,step:.01}},min:{description:`Минимальная доля первой панели. Значение автоматически нормализуется в диапазон 0..1.`,control:{type:`range`,min:0,max:1,step:.01}},max:{description:"Максимальная доля первой панели. Если `min` и `max` перепутаны местами, компонент сам исправит диапазон.",control:{type:`range`,min:0,max:1,step:.01}},onChange:{description:`Получает итоговую долю первой панели после завершения drag или клавиатурного шага.`,control:!1},collapsedPane:{description:`Сворачивает начальную или конечную панель.`,control:`inline-radio`,options:[null,`start`,`end`]},children:{description:`Splitter ожидает ровно два прямых дочерних элемента. Для большего количества областей используйте вложенные Splitter.`,control:!1}}},Y={name:`Две панели`,render:function(){let[e]=J();return(0,q.jsx)(K,{...e})}},X={name:`Горизонтальное разделение`,render:function(){let[e]=J();return(0,q.jsx)(K,{...e})},args:{direction:`horizontal`,initial:.55}},Z={name:`Четыре панели через вложенность`,render:function(){let[e]=J();return(0,q.jsx)(se,{...e})},args:{initial:.48,min:.25,max:.75}},Q={name:`Ограничения и клавиатура`,render:function(){let[e]=J();return(0,q.jsx)(ce,{...e})},args:{initial:.35,min:.25,max:.55}},$={name:`Изменяемая высота контейнера`,render:function(){let[e]=J();return(0,q.jsx)(re,{defaultHeight:360,minHeight:240,maxHeight:720,heightStep:20,children:(0,q.jsxs)(E,{...e,children:[(0,q.jsx)(G,{title:`Основная область`,description:`Separator под Splitter изменяет весь viewport, не меняя доли панелей.`,items:[`Высота хранится отдельно`,`Доли панелей остаются независимыми`]}),(0,q.jsx)(G,{title:`Дополнительная область`,description:`onHeightChange можно связать с внешними настройками пользователя.`,items:[`Минимум 240 px`,`Шаг клавиатуры 20 px`,`Максимум 720 px`]})]})})}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
|
|
4
|
+
name: "Две панели",
|
|
5
|
+
render: function Render() {
|
|
6
|
+
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
7
|
+
return <TwoPaneLayout {...args} />;
|
|
8
|
+
}
|
|
9
|
+
}`,...Y.parameters?.docs?.source}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
|
|
10
|
+
name: "Горизонтальное разделение",
|
|
11
|
+
render: function Render() {
|
|
12
|
+
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
13
|
+
return <TwoPaneLayout {...args} />;
|
|
14
|
+
},
|
|
15
|
+
args: {
|
|
16
|
+
direction: "horizontal",
|
|
17
|
+
initial: 0.55
|
|
18
|
+
}
|
|
19
|
+
}`,...X.parameters?.docs?.source}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
|
|
20
|
+
name: "Четыре панели через вложенность",
|
|
21
|
+
render: function Render() {
|
|
22
|
+
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
23
|
+
return <NestedFourPaneLayout {...args} />;
|
|
24
|
+
},
|
|
25
|
+
args: {
|
|
26
|
+
initial: 0.48,
|
|
27
|
+
min: 0.25,
|
|
28
|
+
max: 0.75
|
|
29
|
+
}
|
|
30
|
+
}`,...Z.parameters?.docs?.source}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
|
|
31
|
+
name: "Ограничения и клавиатура",
|
|
32
|
+
render: function Render() {
|
|
33
|
+
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
34
|
+
return <ConstrainedLayout {...args} />;
|
|
35
|
+
},
|
|
36
|
+
args: {
|
|
37
|
+
initial: 0.35,
|
|
38
|
+
min: 0.25,
|
|
39
|
+
max: 0.55
|
|
40
|
+
}
|
|
41
|
+
}`,...Q.parameters?.docs?.source}}},$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
|
|
42
|
+
name: "Изменяемая высота контейнера",
|
|
43
|
+
render: function Render() {
|
|
44
|
+
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
45
|
+
return <SplitterHeightContainer defaultHeight={360} minHeight={240} maxHeight={720} heightStep={20}>
|
|
46
|
+
<Splitter {...args}>
|
|
47
|
+
<Panel title="Основная область" description="Separator под Splitter изменяет весь viewport, не меняя доли панелей." items={["Высота хранится отдельно", "Доли панелей остаются независимыми"]} />
|
|
48
|
+
<Panel title="Дополнительная область" description="onHeightChange можно связать с внешними настройками пользователя." items={["Минимум 240 px", "Шаг клавиатуры 20 px", "Максимум 720 px"]} />
|
|
49
|
+
</Splitter>
|
|
50
|
+
</SplitterHeightContainer>;
|
|
51
|
+
}
|
|
52
|
+
}`,...$.parameters?.docs?.source}}},ue=[`Basic`,`Horizontal`,`NestedFourPanels`,`Constrained`,`AdjustableHeight`]})))()}export{Z as a,X as i,Y as n,oe as o,Q as r,de as s,$ as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-BNEMNAEw.js";import{a as r,i}from"./utils-tg3ibbzi.js";import{a,h as o,o as s}from"./formatters-DVE1YVNQ-YIdRxgw-.js";import{n as c,t as l}from"./Select-Bf5M5oc0.js";var u,d,f,p,m,h,g,_,v,y,b,x;function S(){return(S=e((()=>{u=`p4nQdZ`,d=`_94tg5v`,f=`HyK7Zs`,p=`Mm4hrB`,m=`clxxBQ`,h=`_5pJ7o-`,g=`VV6hKN`,_=`cuQNP0`,v=`w7nIOT`,y=`ed-Afj`,b=`Lbxloe`,x={button:u,valueContainer:d,swatch:f,optionsPalette:p,optionsDetailed:m,option:h,optionPalette:g,optionDetailed:_,optionMeta:v,optionMetaIcon:y,optionMetaLabel:b}})))()}function C({state:e,className:t}){return(0,A.jsx)(`span`,{className:r(x.swatch,t),"data-empty":e===`none`?``:void 0,style:{"--state-color":s[e]}})}function w(e){return!!(e?.icon||e?.label)}function T(e,t){return typeof t?.label==`string`&&t.label.trim()?t.label:e||`empty`}function E(e){return w(e)?(0,A.jsxs)(`span`,{className:x.optionMeta,children:[e?.icon?(0,A.jsx)(`span`,{className:x.optionMetaIcon,children:e.icon}):null,e?.label?(0,A.jsx)(`span`,{className:x.optionMetaLabel,children:e.label}):null]}):null}function D(e,t){return(0,A.jsxs)(`div`,{className:x.valueContainer,children:[(0,A.jsx)(C,{state:e}),E(t)]})}function O({label:e,description:t,disabled:n,placeholder:i,size:o,value:s,onChange:c,options:u=a,stateMeta:d,className:f,clearable:p}){let m=(0,k.useMemo)(()=>Array.from(new Set(u)),[u]),h=m.some(e=>w(d?.[e])),g={getOptionKey:e=>e||`__empty_state__`,getOptionLabel:e=>d?.[e]?.label??e,getOptionAriaLabel:e=>T(e,d?.[e]),renderValue:e=>D(e,d?.[e]),renderOption:e=>(0,A.jsxs)(A.Fragment,{children:[(0,A.jsx)(C,{state:e}),h?E(d?.[e]):null]}),buttonClassName:x.button,optionsContentClassName:r(h?x.optionsDetailed:x.optionsPalette),getOptionClassName:()=>r(x.option,h?x.optionDetailed:x.optionPalette)};return(0,A.jsx)(l,{label:e,description:t,disabled:n,placeholder:i,size:o,value:s,onChange:c,options:m,className:f,clearable:p,...g})}var k,A;function j(){return(j=e((()=>{k=t(),o(),i(),c(),S(),A=n(),O.__docgenInfo={description:`Специализированный селект для выбора цветового или статусного состояния. Используется там, где значению соответствует визуальный swatch.`,methods:[],displayName:`StateSelect`,props:{placeholder:{required:!1,tsType:{name:`string`},description:``},options:{required:!1,tsType:{name:`unknown`},description:``,defaultValue:{value:`DEFAULT_VALUE_STATES`,computed:!0}},stateMeta:{required:!1,tsType:{name:`Partial`,elements:[{name:`Record`,elements:[{name:`State`},{name:`signature`,type:`object`,raw:`{
|
|
2
2
|
label?: string;
|
|
3
3
|
icon?: ReactNode;
|
|
4
4
|
}`,signature:{properties:[{key:`label`,value:{name:`string`,required:!1}},{key:`icon`,value:{name:`ReactNode`,required:!1}}]}}],raw:`Record<State, StateMeta>`}],raw:`Partial<Record<State, StateMeta>>`},description:``},className:{required:!1,tsType:{name:`string`},description:``},clearable:{required:!1,tsType:{name:`boolean`},description:``}},composes:[`Omit`]}})))()}export{j as n,O as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BNEMNAEw.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-B8YtS91C.js";import{a as p,i as m,n as h,r as g,t as _}from"./StateSelect.stories-B-XXt836.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s,{of:g,parameters:{docs:{toc:!0}}}),`
|
|
2
2
|
`,(0,b.jsx)(u,{children:`StateSelect`}),`
|
|
3
3
|
`,(0,b.jsx)(o,{children:`Специализированный select для выбора визуального статуса или семантического состояния`}),`
|
|
4
4
|
`,(0,b.jsx)(t.p,{children:`StateSelect уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
|
package/storybook-static/assets/{StateSelect.stories-CIxhqpNM.js → StateSelect.stories-B-XXt836.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{n,t as r}from"./circle-check-
|
|
1
|
+
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{n,t as r}from"./circle-check-cScFaPMW.js";import{i,n as a,r as o,t as s}from"./info-DLaCn50r.js";import{n as c,t as l}from"./triangle-alert-dC_KzK0I.js";import{i as u,n as d,r as f}from"./iframe-BNEMNAEw.js";import{n as p,t as m}from"./StateSelect-CLYa34QZ.js";var h,g;function _(){return(_=e((()=>{u(),h=[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M8 12h8`,key:`1wcyev`}]],g=f(`circle-minus`,h)})))()}var v=t({Controlled:()=>C,PaletteOnly:()=>T,WithMeta:()=>w,__namedExportsOrder:()=>E,default:()=>S}),y,b,x,S,C,w,T,E;function D(){return(D=e((()=>{c(),n(),a(),_(),i(),p(),y=d(),{useArgs:b}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:x}=__STORYBOOK_MODULE_TEST__,S={title:`UI/StateSelect`,component:m,args:{label:`Состояние`,description:`Выберите визуальный статус.`,placeholder:`Выберите значение`,value:`information`,onChange:x(),disabled:!1,size:`md`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля выбора состояния.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст, когда значение не выбрано.`,control:`text`},value:{description:`Текущее состояние.`,control:`select`,options:[``,`none`,`information`,`success`,`warning`,`error`]},onChange:{description:`Вызывается при выборе состояния.`,control:!1},options:{description:`Кастомный набор доступных состояний.`,control:!1},stateMeta:{description:`Кастомные иконки и подписи для значений.`,control:!1},disabled:{description:`Блокирует взаимодействие с полем.`,control:`boolean`},clearable:{description:`Показывает действие очистки выбранного состояния.`,control:`boolean`},size:{description:`Размер поля и подписей.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]}}},C={render:function(e){let[,t]=b();return(0,y.jsx)(m,{...e,value:e.value??`information`,onChange:n=>{e.onChange(n),t({value:n})}})}},w={render:function(e){let[,t]=b();return(0,y.jsx)(m,{...e,value:e.value??`warning`,onChange:n=>{e.onChange(n),t({value:n})},stateMeta:{none:{label:`Без статуса`,icon:(0,y.jsx)(g,{})},information:{label:`Инфо`,icon:(0,y.jsx)(s,{})},success:{label:`Успех`,icon:(0,y.jsx)(r,{})},warning:{label:`Предупреждение`,icon:(0,y.jsx)(l,{})},error:{label:`Ошибка`,icon:(0,y.jsx)(o,{})}}})},args:{value:`warning`}},T={render:function(e){let[,t]=b();return(0,y.jsx)(m,{...e,value:e.value??`none`,onChange:n=>{e.onChange(n),t({value:n})},options:[`none`,`success`,`error`]})},args:{options:[`none`,`success`,`error`],value:`none`}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Render(args) {
|
|
3
3
|
const [, updateArgs] = useArgs<StateSelectProps>();
|
|
4
4
|
return <StateSelect {...args} value={args.value ?? "information"} onChange={value => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BNEMNAEw.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-B8YtS91C.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./StatusIndicator.stories-Dxn-Ph9C.js";function y(e){let t={code:`code`,h2:`h2`,p:`p`,pre:`pre`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:m,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
|
|
2
2
|
`,(0,x.jsx)(u,{children:`StatusIndicator`}),`
|
|
3
3
|
`,(0,x.jsx)(o,{children:`Компактный цветовой маркер состояния`}),`
|
|
4
4
|
`,(0,x.jsx)(t.p,{children:`StatusIndicator помогает быстро считать состояние строки, карточки или процесса. Компонент использует семантические status-токены темы и сохраняет цветовую схему во всех host-проектах.`}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{n}from"./iframe-
|
|
1
|
+
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{n}from"./iframe-BNEMNAEw.js";import{a as r,i}from"./utils-tg3ibbzi.js";var a,o,s,c,l,u,d,f,p,m,h,g,_;function v(){return(v=e((()=>{a=`bJvCcD`,o=`UhVDLa`,s=`kNg89H`,c=`bRw83O`,l=`VQh7sh`,u=`zdESHk`,d=`-KLln9`,f=`Ak9M6g`,p=`_43MsRd`,m=`FpGv5-`,h=`y-1aex`,g=`_56N544`,_={statusIndicator:a,neutral:o,accent:s,info:c,success:l,warning:u,error:d,sizeSm:f,sizeMd:p,sizeLg:m,animated:h,statusIndicatorPulse:g}})))()}function y({tone:e=`neutral`,size:t=`md`,animated:n=!1,className:i,...a}){let o=a.role!==void 0||a[`aria-label`]!==void 0||a[`aria-labelledby`]!==void 0,s=a[`aria-hidden`]??(!o||void 0);return(0,b.jsx)(`span`,{...a,className:r(_.statusIndicator,x[e],S[t],n&&_.animated,i),"aria-hidden":s,"data-ui":`status-indicator`})}var b,x,S;function C(){return(C=e((()=>{i(),v(),b=n(),x={accent:_.accent,neutral:_.neutral,info:_.info,success:_.success,warning:_.warning,error:_.error},S={sm:_.sizeSm,md:_.sizeMd,lg:_.sizeLg},y.__docgenInfo={description:`Декоративный цветовой маркер статуса. Передавайте смысл состояния видимым текстом рядом с индикатором.`,methods:[],displayName:`StatusIndicator`,props:{tone:{required:!1,tsType:{name:`Exclude`,elements:[{name:`union`,raw:`"accent" | "neutral" | "brand" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"accent"`},{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"brand"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},{name:`literal`,value:`"brand"`}],raw:`Exclude<UiTone, "brand">`},description:``,defaultValue:{value:`"neutral"`,computed:!1}},size:{required:!1,tsType:{name:`Extract`,elements:[{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},{name:`union`,raw:`"sm" | "md" | "lg"`,elements:[{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`}]}],raw:`Extract<UiSize, "sm" | "md" | "lg">`},description:``,defaultValue:{value:`"md"`,computed:!1}},animated:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}}},composes:[`Omit`]}})))()}var w=t({Animated:()=>P,Basic:()=>j,Sizes:()=>N,Tones:()=>M,__namedExportsOrder:()=>F,default:()=>A}),T,E,D,O,k,A,j,M,N,P,F;function I(){return(I=e((()=>{C(),T=n(),E={display:`flex`,alignItems:`center`,flexWrap:`wrap`,gap:`var(--space-lg)`},D={display:`inline-flex`,alignItems:`center`,gap:`var(--space-sm)`},O=[{tone:`accent`,label:`Текущий`},{tone:`neutral`,label:`Неизвестно`},{tone:`info`,label:`В работе`},{tone:`success`,label:`Готово`},{tone:`warning`,label:`Требует внимания`},{tone:`error`,label:`Ошибка`}],k=[{size:`sm`,label:`Small`},{size:`md`,label:`Medium`},{size:`lg`,label:`Large`}],A={title:`UI/StatusIndicator`,component:y,args:{tone:`info`,size:`md`,animated:!1},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{tone:{description:`Семантический цвет индикатора.`,control:`inline-radio`,options:[`accent`,`neutral`,`info`,`success`,`warning`,`error`]},size:{description:`Размер индикатора.`,control:`inline-radio`,options:[`sm`,`md`,`lg`]},animated:{description:`Включает спокойную пульсацию для изменяющегося или активного состояния.`,control:`boolean`}}},j={render:e=>(0,T.jsxs)(`span`,{style:D,children:[(0,T.jsx)(y,{...e}),(0,T.jsx)(`span`,{children:`В работе`})]})},M={render:()=>(0,T.jsx)(`div`,{style:E,children:O.map(({tone:e,label:t})=>(0,T.jsxs)(`span`,{style:D,children:[(0,T.jsx)(y,{tone:e}),(0,T.jsx)(`span`,{children:t})]},e))})},N={render:()=>(0,T.jsx)(`div`,{style:E,children:k.map(({size:e,label:t})=>(0,T.jsxs)(`span`,{style:D,children:[(0,T.jsx)(y,{size:e,tone:`success`}),(0,T.jsx)(`span`,{children:t})]},e))})},P={render:()=>(0,T.jsxs)(`span`,{style:D,role:`status`,children:[(0,T.jsx)(y,{tone:`info`,animated:!0}),(0,T.jsx)(`span`,{children:`Синхронизация`})]})},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: args => <span style={itemStyle}>
|
|
3
3
|
<StatusIndicator {...args} />
|
|
4
4
|
<span>В работе</span>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BNEMNAEw.js";import{n,t as r}from"./createControlledStoryRender-BouhvX-R.js";import{n as i,t as a}from"./Toggle-DbixMwD6.js";function o(e,t){return typeof e==`string`?e:t}var s,c;function l(){return(l=e((()=>{s=`true`,c=`false`})))()}function u({value:e,onChange:t,checkedValue:n,uncheckedValue:r,defaultChecked:i,...l}){let u=o(n,s),f=o(r,c),p=e===u;return(0,d.jsx)(a,{...l,value:p,onChange:e=>t(e?u:f)})}var d;function f(){return(f=e((()=>{l(),i(),d=t(),u.__docgenInfo={description:`Адаптирует boolean-состояние Toggle к паре настраиваемых строковых значений.`,methods:[],displayName:`StringToggle`,props:{checkedValue:{required:!1,tsType:{name:`string`},description:``},uncheckedValue:{required:!1,tsType:{name:`string`},description:``},value:{required:!0,tsType:{name:`string`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``}}}})))()}var p,m,h,g,_;function v(){return(v=e((()=>{n(),f(),p=t(),m=r((e,t)=>(0,p.jsx)(u,{...e,onChange:n=>{e.onChange(n),t({value:n})}})),h={title:`UI/Toggle/StringToggle`,component:u,args:{value:`ZBP_MANAGER`,onChange:()=>void 0,checkedText:`за клиента`,uncheckedText:`за сделку`,checkedValue:`ZM_MANAGER`,uncheckedValue:`ZBP_MANAGER`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Текст подписи переключателя.`,control:`text`},description:{description:`Описание под переключателем.`,control:`text`},placeholder:{description:"Резервная подпись, если `label` не задан.",control:`text`},value:{description:`Текущее строковое значение.`,control:`text`},onChange:{description:`Возвращает строку выбранного состояния.`,control:!1},checkedValue:{description:`Значение включённого состояния.`,control:`text`},uncheckedValue:{description:`Значение выключенного состояния.`,control:`text`},checkedText:{description:`Текст включённого состояния.`,control:`text`},uncheckedText:{description:`Текст выключенного состояния.`,control:`text`},labelPosition:{description:`Положение подписи относительно переключателя.`,control:`inline-radio`,options:[`before`,`after`]},disabled:{description:`Блокирует взаимодействие.`,control:`boolean`},size:{description:`Размер контрола и подписи.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]}}},g={render:m},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: renderStringToggleStory
|
|
3
3
|
}`,...g.parameters?.docs?.source}}},_=[`ManagerScope`]})))()}v();export{g as ManagerScope,_ as __namedExportsOrder,h as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r,t as i}from"./circle-check-
|
|
1
|
+
import{a as e,n as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r,t as i}from"./circle-check-cScFaPMW.js";import{i as a,n as o,r as s}from"./iframe-BNEMNAEw.js";import{a as c,i as l}from"./utils-tg3ibbzi.js";import{n as u,t as d}from"./ui.module-Ci4WdQwm.js";var f,p;function m(){return(m=t((()=>{a(),f=[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M4.929 4.929 19.07 19.071`,key:`196cmz`}]],p=s(`ban`,f)})))()}var h,g,_,v,y;function b(){return(b=t((()=>{h=`Or5LYA`,g=`w0AMfA`,_=`P1x4lq`,v=`-ZVOZo`,y={switchWrapper:h,switch:`qge3io`,iconWrapper:g,auto:_,checked:v}})))()}function x(e){let{label:t,description:n,disabled:r,checkedIcon:a=(0,C.jsx)(i,{}),uncheckedIcon:o=(0,C.jsx)(p,{}),className:s,type:l,id:d,size:f,placeholder:m,onChange:h,value:g,triState:_,...v}=e,b=(0,S.useId)(),x=d??b,w=n?`${x}-description`:void 0,T=t?`${x}-label`:void 0,E=()=>{if(!e.triState){e.onChange(!e.value);return}if(e.value===void 0){e.onChange(!0);return}if(e.value===!0){e.onChange(!1);return}e.value===!1&&e.onChange(void 0)},D=typeof e.value==`boolean`&&e.value,O=e.triState&&typeof e.value!=`boolean`,k=v[`aria-label`]??(t?void 0:`Переключатель`);return(0,C.jsxs)(`div`,{className:c(u.uiElement,r&&u.disabled),"aria-disabled":r||void 0,children:[t&&(0,C.jsxs)(`div`,{id:T,className:u.uiLabel,children:[t,`:`]}),n&&(0,C.jsx)(`p`,{id:w,className:u.uiDescription,children:n}),(0,C.jsx)(`button`,{...v,id:x,type:l??`button`,role:`switch`,disabled:r,"aria-checked":D,"aria-describedby":w,"aria-labelledby":T,"aria-label":k,"aria-disabled":r,"data-ui":`switch`,"data-action":`toggle-switch`,onClick:E,className:c(u.uiInputControl,y.switchWrapper,s),children:(0,C.jsx)(`div`,{className:y.switch,"data-disabled":r||void 0,children:O?(0,C.jsx)(`div`,{className:c(y.iconWrapper,y.auto,y.checked),children:`Auto`}):(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(`div`,{className:c(y.iconWrapper,!e.value&&y.checked),children:o}),(0,C.jsx)(`div`,{className:c(y.iconWrapper,e.value&&y.checked),children:a})]})})})]})}var S,C;function w(){return(w=t((()=>{S=e(n(),1),l(),m(),r(),d(),b(),C=o(),x.__docgenInfo={description:`Переключатель boolean-состояния в виде слайдера. Подходит для быстрых настроек и включения/отключения опций.`,methods:[],displayName:`Switch`}})))()}export{w as n,x as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BNEMNAEw.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-B8YtS91C.js";import{a as p,i as m,n as h,r as g,t as _}from"./Switch.stories-BHEJkS4S.js";function v(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s,{of:g,parameters:{docs:{toc:!0}}}),`
|
|
2
2
|
`,(0,b.jsx)(u,{children:`Switch`}),`
|
|
3
3
|
`,(0,b.jsx)(o,{children:`Переключатель в виде слайдера для быстрых включений, отключений и tri-state сценариев`}),`
|
|
4
4
|
`,(0,b.jsx)(t.p,{children:`Switch уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{n,t as r}from"./Switch-
|
|
1
|
+
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{n,t as r}from"./Switch-DHKEAZQb.js";import{n as i}from"./iframe-BNEMNAEw.js";import{n as a,t as o}from"./createControlledStoryRender-BouhvX-R.js";var s=t({BiState:()=>f,Disabled:()=>m,TriState:()=>p,__namedExportsOrder:()=>h,default:()=>d}),c,l,u,d,f,p,m,h;function g(){return(g=e((()=>{a(),n(),c=i(),l=o((e,t)=>(0,c.jsx)(r,{...e,triState:!1,value:e.value??!1,onChange:n=>{e.onChange(n),t({value:n})}})),u=o((e,t)=>(0,c.jsxs)(`div`,{style:{display:`grid`,gap:8},children:[(0,c.jsx)(r,{...e,triState:!0,value:e.value,onChange:n=>{e.onChange(n),t({value:n})}}),(0,c.jsxs)(`div`,{children:[`Текущее значение: `,String(e.value)]})]})),d={title:`UI/Switch`,component:r,args:{label:`Режим обработки`,description:`Переключение состояния`,value:!1,onChange:()=>{},triState:!1,disabled:!1},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок переключателя.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},value:{description:"Текущее значение (`boolean` или `undefined` в tri-state).",control:`boolean`},onChange:{description:`Вызывается при изменении состояния.`,control:!1},triState:{description:"Включает трехсостоянный режим (`undefined → true → false`).",control:`boolean`},checkedIcon:{description:"Кастомная иконка для состояния `true`.",control:!1},uncheckedIcon:{description:"Кастомная иконка для состояния `false`.",control:!1},disabled:{description:`Блокирует переключение.`,control:`boolean`}}},f={render:l},p={render:u,args:{triState:!0,value:void 0}},m={render:l,args:{disabled:!0,value:!0}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: renderBiStateSwitchStory
|
|
3
3
|
}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
4
4
|
render: renderTriStateSwitchStory,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BNEMNAEw.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-B8YtS91C.js";import{_ as p,a as m,c as h,d as g,f as _,g as v,h as y,i as b,l as x,m as S,n as C,o as w,p as T,r as E,s as D,t as O,u as k}from"./Table.stories-B5rgYs9g.js";function A(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(s,{of:D,parameters:{docs:{toc:!0}}}),`
|
|
2
2
|
`,(0,M.jsx)(u,{children:`Table`}),`
|
|
3
3
|
`,(0,M.jsxs)(o,{children:[`Плоская таблица как React-альтернатива `,(0,M.jsx)(t.code,{children:`sap.m.Table`})]}),`
|
|
4
4
|
`,(0,M.jsxs)(t.p,{children:[(0,M.jsx)(t.code,{children:`Table`}),` предназначен для плоских данных и по поведению осознанно сближен с `,(0,M.jsx)(t.code,{children:`TreeTable`}),`.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-
|
|
1
|
+
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-BNEMNAEw.js";import{A as i,D as a,O as ee,T as te,_ as ne,a as re,b as o,d as ie,g as ae,i as oe,k as se}from"./odata-gcOB7kIq.js";import{h as ce,u as le}from"./formatters-DVE1YVNQ-YIdRxgw-.js";import{n as ue,t as de}from"./useTable-CK68Q4S4.js";import{_ as fe,a as pe,c as me,d as he,f as ge,g as _e,h as ve,i as ye,l as be,m as xe,n as Se,o as Ce,p as we,r as Te,s as Ee,t as De,u as Oe,v as ke,y as Ae}from"./FormattedTableCell-BT4z527d.js";import{n as je,t as s}from"./createControlledStoryRender-BouhvX-R.js";var c,Me,Ne;function l(){return(l=e((()=>{c=`hKghZt`,Me=`QsLRvS`,Ne={selectedIndicatorCell:c,sentinel:Me}})))()}function Pe(e,t){return String(t)}function u({title:e,isLoading:t,isFetching:n,data:r,columns:i,selectionMode:a=`none`,selectedRowIds:ee,getRowId:te,className:re,minHeight:o,tableClassName:ie,columnVisibility:oe,defaultColumnVisibility:se,columnOrder:ce,defaultColumnOrder:de,columnSizing:pe,defaultColumnSizing:he,columnPinning:_e,defaultColumnPinning:ye,enableColumnResizing:be=!1,enableColumnReordering:xe=!1,columnResizeMinWidth:Se,onColumnVisibilityChange:Ee,onColumnOrderChange:Ae,onColumnSizingChange:je,onColumnPinningChange:s,onRowClick:c,onRowSelectionChange:Me,onReachEnd:l,getRowCanSelect:u,getRowClassName:p,renderHeaderContextMenu:Fe,renderCellContent:m}){let h=(0,d.useMemo)(()=>r??[],[r]),g=(0,d.useMemo)(()=>ve(i),[i]),_=te??Pe,v=(0,d.useMemo)(()=>new Map(h.map((e,t)=>[_(e,t),e])),[_,h]),Ie=(0,d.useMemo)(()=>Array.from(v.keys()),[v]),y=(0,d.useRef)(null),b=(0,d.useRef)(null),{rowSelection:x,activateRowSelection:S}=ae({availableRowIds:Ie,rowById:v,selectionMode:a,selectedRowIds:ee,onRowSelectionChange:Me}),{columnVisibility:C,onColumnVisibilityChange:w}=Ce({columnVisibility:oe,defaultColumnVisibility:se,onColumnVisibilityChange:Ee}),{columnOrder:T,onColumnOrderChange:E}=ge({columnOrder:ce,defaultColumnOrder:de,onColumnOrderChange:Ae}),{columnSizing:D,onColumnSizingChange:O}=me({columnSizing:pe,defaultColumnSizing:he,columnResizeMinWidth:Se,onColumnSizingChange:je}),{columnPinning:k,onColumnPinningChange:Le}=Oe({columnPinning:_e,defaultColumnPinning:ye,onColumnPinningChange:s}),A=(0,d.useMemo)(()=>({columnOrder:T,columnPinning:k,columnSizing:D,columnVisibility:C}),[T,k,D,C]),j=(0,d.useEffectEvent)(()=>{l?.()});(0,d.useEffect)(()=>{if(!l||!y.current||!b.current||t)return;let e=new IntersectionObserver(e=>{e[0]?.isIntersecting&&j()},{root:y.current,threshold:.1});return e.observe(b.current),()=>e.disconnect()},[t,l,h.length]);let M=ue({features:ne,data:h,columns:i,state:{columnOrder:T,columnPinning:k,columnSizing:D,columnVisibility:C,rowSelection:x},onColumnOrderChange:E,onColumnPinningChange:Le,onColumnSizingChange:O,onColumnVisibilityChange:w,getRowId:(e,t)=>_(e,t),enableMultiRowSelection:a===`multi`,enableRowSelection:e=>a===`none`?!1:!u||u(e.original)}),N=ke(M,A),P=M.getRowModel().rows,F=(0,d.useMemo)(()=>we({rows:P,columns:N}),[P,N]),I=N[0]?.id;return(0,f.jsx)(Te,{table:M,columnState:A,title:e,isLoading:t,isFetching:n,className:re,minHeight:o,tableClassName:ie,selectionMode:a,scrollableRef:y,onActivateRow:a!==`none`||c?e=>{S(e.id,e.getCanSelect()),c?.(e.original)}:void 0,isRowInteractive:e=>!!(c||a!==`none`&&e.getCanSelect()),getRowClassName:e=>p?.(e.original),getCellClassName:({row:e,cell:t})=>t.column.id===I&&e.getIsSelected()?Ne.selectedIndicatorCell:void 0,getCellLayout:({cell:e})=>F.get(e.id),renderHeaderContextMenu:Fe,enableColumnResizing:be,enableColumnReordering:xe,columnResizeMinWidth:Se,renderCellContent:e=>{let t=le({field:g.runtimeByColumnId[e.cell.column.id],rawValue:e.cell.getValue(),rowData:e.row.original,rowKind:`plain`}),n=fe({columnId:e.cell.column.id,runtimeByColumnId:g.runtimeByColumnId,customCellColumnIds:g.customCellColumnIds})?(0,f.jsx)(De,{displayValue:t,align:e.columnMeta?.align}):e.defaultContent;return m?m({...e,defaultContent:n,displayValue:t}):n},afterTableContent:l?(0,f.jsx)(`div`,{ref:b,className:Ne.sentinel,"aria-hidden":`true`}):null})}var d,f;function p(){return(p=e((()=>{d=n(),ce(),o(),de(),ye(),xe(),_e(),Se(),Ae(),he(),be(),Ee(),pe(),l(),f=r(),u.__docgenInfo={description:"Плоская таблица на базе TanStack Table как React-альтернатива `sap.m.Table`.",methods:[],displayName:`Table`,props:{title:{required:!1,tsType:{name:`string`},description:`Необязательный заголовок над таблицей.`},isLoading:{required:!1,tsType:{name:`boolean`},description:`Признак первичной загрузки.`},isFetching:{required:!1,tsType:{name:`boolean`},description:`Признак фоновой догрузки или обновления данных.`},data:{required:!0,tsType:{name:`union`,raw:`readonly TData[] | undefined | null`,elements:[{name:`unknown`},{name:`undefined`},{name:`null`}]},description:`Плоский источник строк.`},columns:{required:!0,tsType:{name:`unknown`},description:`Описание колонок таблицы.`},selectionMode:{required:!1,tsType:{name:`TableSelectionMode`},description:`Режим выбора строк.`,defaultValue:{value:`"none"`,computed:!1}},selectedRowIds:{required:!1,tsType:{name:`unknown`},description:`Внешний список выбранных строк.
|
|
2
2
|
|
|
3
3
|
Если передан, таблица синхронизирует визуальное выделение с этим набором id.`},getRowId:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(row: TData, index: number) => string`,signature:{arguments:[{type:{name:`TData`},name:`row`},{type:{name:`number`},name:`index`}],return:{name:`string`}}},description:`Стабильный идентификатор строки.
|
|
4
4
|
|
package/storybook-static/assets/{TableEditor.stories-LCjtLdiP.js → TableEditor.stories-KVe48GsE.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./CheckBox-CNwSS4x-.js";import{n as i}from"./iframe-Dvo-sM6X.js";import{i as a,l as o}from"./array-D-_yMMUK-DnJ_b27D.js";import{n as s,t as c}from"./Button-BGDiDObX.js";import{n as l,t as u}from"./useTable-CK68Q4S4.js";import{a as d,l as f,t as p}from"./Input-PCnCDfCc.js";import{Et as m,Mt as h,Nt as g,Pt as _,Tt as v,n as ee,wt as te}from"./tableFeatures-Dx3U-F9E.js";import{n as ne,t as re}from"./Dialog-DaBWR5lX.js";import{n as ie,t as ae}from"./Textarea-xdvWOiup.js";function y(){if(crypto.randomUUID)return crypto.randomUUID();let e=new Uint8Array(16);crypto.getRandomValues(e),e[6]=e[6]&15|64,e[8]=e[8]&63|128;let t=Array(256);for(let e=0;e<256;e++)t[e]=(e+256).toString(16).slice(1);return t[e[0]]+t[e[1]]+t[e[2]]+t[e[3]]+`-`+t[e[4]]+t[e[5]]+`-`+t[e[6]]+t[e[7]]+`-`+t[e[8]]+t[e[9]]+`-`+t[e[10]]+t[e[11]]+t[e[12]]+t[e[13]]+t[e[14]]+t[e[15]]}function oe(e){let t=e.getRowModel().rows,n=e.atoms.rowPinning?.get();if(!n||!n.top.length&&!n.bottom.length)return{rows:t,sectionStarts:pe};let r=e,i=r.getTopRows?.()??[],a=r.getCenterRows?.()??t,o=r.getBottomRows?.()??[];return{rows:[...i,...a,...o],sectionStarts:[i.length,i.length+a.length]}}function se(e,t){let n=t.getVisibleCells?.()??t.getAllCells(),r=Array(n.length);for(let e=0;e<n.length;e++)r[e]=n[e].column;let i=e.atoms.columnPinning?.get(),a=0,o=r.length;if(i){for(;a<o&&i.start.includes(r[a].id);)a++;for(;o>a&&i.end.includes(r[o-1].id);)o--}return{columns:r,centerStart:a,centerEnd:o}}function b(e){return e.columnDef.enableCellSpanning===!1?!1:e.table.options.enableCellSpanning??!0}function x(e){let{rows:t,sectionStarts:n}=oe(e),r=t.length,i={colSpans:fe,columnIndexes:de,rowSpans:ue,rows:t};if(!r||e.options.enableCellSpanning===!1)return i;let{columns:a,centerStart:o,centerEnd:s}=se(e,t[0]),c=a.length;if(!c)return i;let l=_();for(let e=0;e<c;e++)l[a[e].id]=e;let u=new Uint8Array(r);for(let e=0;e<n.length;e++){let t=n[e];t<r&&(u[t]=1)}for(let e=0;e<r;e++){let n=t[e];n._cellSpanRowIndex=e;let r=e>0?t[e-1]:void 0;(r&&(n.depth!==r.depth||n.parentId!==r.parentId)||n.getIsGrouped?.()===!0)&&(u[e]=1)}let d=[],f=!1;for(let n=0;n<c;n++){let i=a[n],l=i.columnDef.spanColumns;if(l===void 0||!b(i))continue;let u=n<o?o:n<s?s:c;for(let a=0;a<r;a++){let r=d[a];if(r&&r[n]===0)continue;let o=g(l)?l({column:i,row:t[a],table:e}):l;if(!(o>1))continue;let s=Math.min(o,u-n);if(s<2)continue;let p=r??(d[a]=new Int32Array(c).fill(1));p[n]=s;for(let e=n+1;e<n+s;e++)p[e]=0;f=!0}}let p=_();for(let n=0;n<c;n++){let i=a[n],o=i.columnDef.spanRows;if(!o||!b(i)||i.getIsGrouped?.()===!0)continue;let s=i.id,c=g(o)?o:void 0,l=new Int32Array(r).fill(1),m=!1,h=-1,_,v=1;for(let a=0;a<r;a++){let r=t[a],o=f?d[a]:void 0,p=o?o[n]:1;if(p===0){h=-1;continue}let g=r.getValue(s);if(h!==-1&&!u[a]&&p===v&&(c?c({anchorRow:t[h],anchorValue:_,column:i,previousRow:t[a-1],row:r,table:e,value:g}):g!=null&&Object.is(g,_))){l[a]=0,l[h]=l[h]+1,m=!0;continue}h=a,_=g,v=p}m&&(p[s]=l)}return{colSpans:d,columnIndexes:l,rowSpans:p,rows:t}}function S(e,t){let n=t.row._cellSpanRowIndex;return n===void 0||e.rows[n]!==t.row?-1:n}function C(e){let t=e.row.table,n=m(t,`getCellSpanIndex`,x),r=n.rowSpans[e.column.id];if(!r)return 1;let i=S(n,e);return i===-1?1:r[i]}function ce(e){let t=e.row.table,n=m(t,`getCellSpanIndex`,x),r=S(n,e);if(r===-1)return 1;let i=n.colSpans[r];if(!i)return 1;let a=n.columnIndexes[e.column.id];return a===void 0?1:i[a]}function le(e){return C(e)===0||ce(e)===0}var ue,de,fe,pe;function me(){return(me=e((()=>{h(),ue=_(),de=_(),fe=[],pe=[]})))()}var w;function T(){return(T=e((()=>{h(),me(),w={getDefaultTableOptions:()=>({enableCellSpanning:!0}),initRowInstanceData:e=>{e._cellSpanRowIndex=-1},assignCellPrototype:(e,t)=>{te(`cellSpanningFeature`,e,t,{cell_getColSpan:{fn:e=>ce(e)},cell_getIsCovered:{fn:e=>le(e)},cell_getRowSpan:{fn:e=>C(e)}})},constructTableAPIs:e=>{v(`cellSpanningFeature`,e,{table_getCellSpanIndex:{fn:()=>x(e),memoDeps:()=>[e.getRowModel().rows,e.atoms.rowPinning?.get(),e.options.keepPinnedRows,e.atoms.columnVisibility?.get(),e.atoms.columnOrder?.get(),e.atoms.columnPinning?.get(),e.atoms.grouping?.get(),e.options.columns,e.options.groupedColumnMode,e.options.enableCellSpanning]}})}}})))()}function E(e,t){return e.row<t.row+t.rowSpan&&t.row<e.row+e.rowSpan&&e.column<t.column+t.columnSpan&&t.column<e.column+e.columnSpan}function D(e){let t=e.rows.length,n=e.columns.length;if(e.version!==1||!t||!n||t*n>2e4)throw Error(`Недопустимый размер таблицы.`);if(!Number.isInteger(e.headerRowCount)||e.headerRowCount<0||e.headerRowCount>t)throw Error(`Некорректное число строк заголовка.`);let r=new Set,i=e=>{if(!e||r.has(e))throw Error(`Идентификаторы строк, столбцов и ячеек должны быть уникальными.`);r.add(e)};for(let t of e.columns)if(i(t.id),t.width!==null&&(!Number.isFinite(t.width)||t.width<=0))throw Error(`Некорректная ширина столбца.`);for(let t of e.rows){if(i(t.id),t.cells.length!==n)throw Error(`Все строки должны иметь одинаковое число ячеек.`);t.cells.forEach(e=>i(e.id))}let a=new Set;for(let t of e.merges){if(O(e,t),t.rowSpan*t.columnSpan===1)throw Error(`Объединение должно содержать несколько ячеек.`);if(t.row<e.headerRowCount&&t.row+t.rowSpan>e.headerRowCount)throw Error(`Нельзя объединять заголовок с основной частью таблицы.`);for(let e=t.row;e<t.row+t.rowSpan;e++)for(let r=t.column;r<t.column+t.columnSpan;r++){let t=e*n+r;if(a.has(t))throw Error(`Объединённые области пересекаются.`);a.add(t)}}}function O(e,t){if(![t.row,t.column,t.rowSpan,t.columnSpan].every(Number.isInteger)||t.row<0||t.column<0||t.rowSpan<1||t.columnSpan<1||t.row+t.rowSpan>e.rows.length||t.column+t.columnSpan>e.columns.length)throw Error(`Выделение выходит за границы таблицы.`)}function k(e,t){let n={...t,rowSpan:1,columnSpan:1};return O(e,n),e.merges.find(e=>E(e,n))??n}function A(e,t,n){let r={row:Math.min(t.row,n.row),column:Math.min(t.column,n.column),rowSpan:Math.abs(t.row-n.row)+1,columnSpan:Math.abs(t.column-n.column)+1};O(e,r);let i=!0;for(;i;){i=!1;for(let t of e.merges){if(!E(r,t))continue;let e=Math.min(r.row,t.row),n=Math.min(r.column,t.column),a=Math.max(r.row+r.rowSpan,t.row+t.rowSpan)-e,o=Math.max(r.column+r.columnSpan,t.column+t.columnSpan)-n;(e!==r.row||n!==r.column||a!==r.rowSpan||o!==r.columnSpan)&&(r={row:e,column:n,rowSpan:a,columnSpan:o},i=!0)}}return r}function he(e,t,n){D(e);let r=A(e,t,n);if(r.rowSpan*r.columnSpan===1)return e;let i=e.merges.filter(e=>E(e,r));if(i.length===1&&r.row===i[0].row&&r.column===i[0].column&&r.rowSpan===i[0].rowSpan&&r.columnSpan===i[0].columnSpan)return e;let a={...e,merges:[...e.merges.filter(e=>!E(e,r)),r]};return D(a),a}function ge(e,t){D(e);let n=k(e,t);return n.rowSpan*n.columnSpan===1?e:{...e,merges:e.merges.filter(e=>e!==n)}}function j(e,t,n,r,i,a=`body`){D(e);let o=t===`row`?e.rows.length:e.columns.length;if(!Number.isInteger(n)||n<0||n>o)throw Error(`Некорректная позиция вставки.`);if(i.length!==(t===`row`?e.columns.length:e.rows.length))throw Error(`Неверное число новых ячеек.`);if(t===`row`&&(a===`header`?n>e.headerRowCount:n<e.headerRowCount))throw Error(`Строка вставляется вне выбранной части таблицы.`);let s=t===`row`?`rowSpan`:`columnSpan`,c=e.merges.map(e=>n<=e[t]?{...e,[t]:e[t]+1}:n<e[t]+e[s]?{...e,[s]:e[s]+1}:e),l=t===`row`?{...e,merges:c,headerRowCount:e.headerRowCount+ +(a===`header`),rows:[...e.rows.slice(0,n),{id:r,cells:i},...e.rows.slice(n)]}:{...e,merges:c,columns:[...e.columns.slice(0,n),{id:r,width:null},...e.columns.slice(n)],rows:e.rows.map((e,t)=>({...e,cells:[...e.cells.slice(0,n),i[t],...e.cells.slice(n)]}))};return D(l),l}function _e(e,t,n){return O(e,{...t,rowSpan:1,columnSpan:1}),Object.is(e.rows[t.row].cells[t.column].value,n)?e:{...e,rows:e.rows.map((e,r)=>r===t.row?{...e,cells:e.cells.map((e,r)=>r===t.column?{...e,value:n}:e)}:e)}}function M(e,t){D(e);let n=t===`row`?e.rows.length:e.columns.length,r=new Set;for(let n of e.merges){let e=t===`row`?n.rowSpan:n.columnSpan;for(let i=1;i<e;i++)r.add(n[t]+i)}let i=[],a=0;for(let e=1;e<=n;e++)(e===n||!r.has(e))&&(i.push({start:a,count:e-a}),a=e);return i}function ve(e,t,n){let r=M(e,t).find(e=>n>=e.start&&n<e.start+e.count);if(!r)throw Error(`Группа не найдена.`);let i=t===`row`?e.rows.length:e.columns.length;if(r.count===i)throw Error(`В таблице должна остаться хотя бы одна строка и один столбец.`);let a=r.start+r.count,o=e.merges.filter(e=>e[t]<r.start||e[t]>=a).map(e=>e[t]<a?e:{...e,[t]:e[t]-r.count}),s=t===`row`?{...e,merges:o,rows:e.rows.filter((e,t)=>t<r.start||t>=a),headerRowCount:e.headerRowCount-(r.start<e.headerRowCount?r.count:0)}:{...e,merges:o,columns:e.columns.filter((e,t)=>t<r.start||t>=a),rows:e.rows.map(e=>({...e,cells:e.cells.filter((e,t)=>t<r.start||t>=a)}))};return D(s),s}function ye(e,t,n,r){let i=M(e,t),a=i.findIndex(e=>n>=e.start&&n<e.start+e.count);if(a<0)throw Error(`Группа не найдена.`);let s=a+r;if(s<0||s>=i.length||t===`row`&&i[a].start<e.headerRowCount!=i[s].start<e.headerRowCount)return e;let c=o(i,a,r===-1?`up`:`down`).flatMap(e=>Array.from({length:e.count},(t,n)=>e.start+n)),l=new Map(c.map((e,t)=>[e,t])),u=e.merges.map(e=>({...e,[t]:l.get(e[t])??e[t]})),d=t===`row`?{...e,merges:u,rows:c.map(t=>e.rows[t])}:{...e,merges:u,columns:c.map(t=>e.columns[t]),rows:e.rows.map(e=>({...e,cells:c.map(t=>e.cells[t])}))};return D(d),d}function N(){return(N=e((()=>{a()})))()}var P,F,I,L,R,z,B,V,H;function U(){return(U=e((()=>{P=`_6ftNrS`,F=`tji4uW`,I=`nVFFYk`,L=`S7CdzG`,R=`emaqLv`,z=`VLG992`,B=`Hr0ghz`,V=`tuhyZe`,H={editor:P,toolbar:F,help:I,scroll:L,table:R,cellContent:z,inspector:B,structure:V}})))()}function be(e){let t=(0,W.useMemo)(()=>[...e.rows],[e]),n=(0,W.useMemo)(()=>e.columns.map((t,n)=>({id:t.id,accessorFn:(t,r)=>{let i=k(e,{row:r,column:n});return e.rows[i.row].cells[i.column].id},spanRows:!0,spanColumns:({row:t})=>{let r=k(e,{row:t.index,column:n});return r.column===n?r.columnSpan:1}})),[e]);return l({features:xe,data:t,columns:n,getRowId:e=>e.id})}var W,xe;function G(){return(G=e((()=>{W=t(),N(),T(),u(),xe=ee({cellSpanningFeature:w})})))()}function K({editor:e,extendSelection:t,disabled:n,renderCell:r,getCellText:i}){let a=(0,q.useId)(),o=(0,q.useRef)(new Map),s=be(e.document),{document:c,selection:l,focus:u}=e;return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(`p`,{id:a,className:H.help,children:`Стрелки — переход между ячейками. Shift + стрелки или Shift + щелчок — выделение диапазона. Содержимое выбранной ячейки редактируется под таблицей.`}),(0,J.jsx)(`div`,{className:H.scroll,children:(0,J.jsxs)(`table`,{role:`grid`,"aria-label":c.caption||`Редактор таблицы`,"aria-describedby":a,"aria-multiselectable":`true`,"aria-disabled":n||void 0,className:H.table,children:[(0,J.jsx)(`colgroup`,{children:c.columns.map(e=>(0,J.jsx)(`col`,{style:{width:e.width??180}},e.id))}),(0,J.jsx)(`tbody`,{children:s.getRowModel().rows.map(a=>(0,J.jsx)(`tr`,{"aria-rowindex":a.index+1,"data-header":a.index<c.headerRowCount||void 0,children:a.getAllCells().map((s,d)=>{if(s.getIsCovered())return null;let f=a.index>=l.row&&a.index<l.row+l.rowSpan&&d>=l.column&&d<l.column+l.columnSpan,p={row:a.index,column:d},m=a.original.cells[d],h=a.index<c.headerRowCount?`th`:`td`;return(0,J.jsxs)(h,{role:a.index<c.headerRowCount?`columnheader`:`gridcell`,ref:e=>{e?o.current.set(m.id,e):o.current.delete(m.id)},rowSpan:s.getRowSpan(),colSpan:s.getColSpan(),"aria-colindex":d+1,"aria-label":`Строка ${a.index+1}, столбец ${d+1}: ${i(m)||`Пустая ячейка`}`,"aria-selected":f,tabIndex:!n&&u.row===a.index&&u.column===d?0:-1,onClick:r=>{n||e.select(p,t||r.shiftKey)},onPointerEnter:t=>{!n&&t.pointerType===`mouse`&&t.buttons===1&&e.select(p,!0)},onKeyDown:t=>{if(n||t.altKey||t.ctrlKey||t.metaKey)return;let r;switch(t.key){case`ArrowRight`:r={...p,column:d+s.getColSpan()};break;case`ArrowLeft`:r={...p,column:d-1};break;case`ArrowDown`:r={...p,row:a.index+s.getRowSpan()};break;case`ArrowUp`:r={...p,row:a.index-1};break;case`Home`:r={...p,column:0};break;case`End`:r={...p,column:c.columns.length-1};break;case` `:t.preventDefault(),e.select(p,t.shiftKey);return;default:return}if(t.preventDefault(),r.row<0||r.column<0||r.row>=c.rows.length||r.column>=c.columns.length)return;let i=k(c,r);e.select(r,t.shiftKey),o.current.get(c.rows[i.row].cells[i.column].id)?.focus()},children:[a.index<c.headerRowCount?(0,J.jsx)(`span`,{className:`visuallyHidden`,children:i(m)||`Пустой заголовок`}):null,(0,J.jsx)(`div`,{inert:!0,className:H.cellContent,children:r(m)})]},s.id)})},a.id))})]})})]})}var q,J;function Se(){return(Se=e((()=>{q=t(),N(),G(),U(),J=i(),K.__docgenInfo={description:`Доступная сетка: roving tabindex, стрелки/Shift и выбор диапазона без drag-only действий.`,methods:[],displayName:`TableEditorGrid`,props:{editor:{required:!0,tsType:{name:`signature`,type:`object`,raw:`{
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n,t as r}from"./CheckBox-CVtYfxZ9.js";import{n as i}from"./iframe-BNEMNAEw.js";import{i as a,l as o}from"./array-D-_yMMUK-DnJ_b27D.js";import{n as s,t as c}from"./Button-CnG8UaLy.js";import{n as l,t as u}from"./useTable-CK68Q4S4.js";import{a as d,l as f,t as p}from"./Input-CVU8GJSJ.js";import{Et as m,Mt as h,Nt as g,Pt as _,Tt as v,n as ee,wt as te}from"./tableFeatures-Dx3U-F9E.js";import{n as ne,t as re}from"./Dialog-BrBqkDX8.js";import{n as ie,t as ae}from"./Textarea-BNJPblVu.js";function y(){if(crypto.randomUUID)return crypto.randomUUID();let e=new Uint8Array(16);crypto.getRandomValues(e),e[6]=e[6]&15|64,e[8]=e[8]&63|128;let t=Array(256);for(let e=0;e<256;e++)t[e]=(e+256).toString(16).slice(1);return t[e[0]]+t[e[1]]+t[e[2]]+t[e[3]]+`-`+t[e[4]]+t[e[5]]+`-`+t[e[6]]+t[e[7]]+`-`+t[e[8]]+t[e[9]]+`-`+t[e[10]]+t[e[11]]+t[e[12]]+t[e[13]]+t[e[14]]+t[e[15]]}function oe(e){let t=e.getRowModel().rows,n=e.atoms.rowPinning?.get();if(!n||!n.top.length&&!n.bottom.length)return{rows:t,sectionStarts:pe};let r=e,i=r.getTopRows?.()??[],a=r.getCenterRows?.()??t,o=r.getBottomRows?.()??[];return{rows:[...i,...a,...o],sectionStarts:[i.length,i.length+a.length]}}function se(e,t){let n=t.getVisibleCells?.()??t.getAllCells(),r=Array(n.length);for(let e=0;e<n.length;e++)r[e]=n[e].column;let i=e.atoms.columnPinning?.get(),a=0,o=r.length;if(i){for(;a<o&&i.start.includes(r[a].id);)a++;for(;o>a&&i.end.includes(r[o-1].id);)o--}return{columns:r,centerStart:a,centerEnd:o}}function b(e){return e.columnDef.enableCellSpanning===!1?!1:e.table.options.enableCellSpanning??!0}function x(e){let{rows:t,sectionStarts:n}=oe(e),r=t.length,i={colSpans:fe,columnIndexes:de,rowSpans:ue,rows:t};if(!r||e.options.enableCellSpanning===!1)return i;let{columns:a,centerStart:o,centerEnd:s}=se(e,t[0]),c=a.length;if(!c)return i;let l=_();for(let e=0;e<c;e++)l[a[e].id]=e;let u=new Uint8Array(r);for(let e=0;e<n.length;e++){let t=n[e];t<r&&(u[t]=1)}for(let e=0;e<r;e++){let n=t[e];n._cellSpanRowIndex=e;let r=e>0?t[e-1]:void 0;(r&&(n.depth!==r.depth||n.parentId!==r.parentId)||n.getIsGrouped?.()===!0)&&(u[e]=1)}let d=[],f=!1;for(let n=0;n<c;n++){let i=a[n],l=i.columnDef.spanColumns;if(l===void 0||!b(i))continue;let u=n<o?o:n<s?s:c;for(let a=0;a<r;a++){let r=d[a];if(r&&r[n]===0)continue;let o=g(l)?l({column:i,row:t[a],table:e}):l;if(!(o>1))continue;let s=Math.min(o,u-n);if(s<2)continue;let p=r??(d[a]=new Int32Array(c).fill(1));p[n]=s;for(let e=n+1;e<n+s;e++)p[e]=0;f=!0}}let p=_();for(let n=0;n<c;n++){let i=a[n],o=i.columnDef.spanRows;if(!o||!b(i)||i.getIsGrouped?.()===!0)continue;let s=i.id,c=g(o)?o:void 0,l=new Int32Array(r).fill(1),m=!1,h=-1,_,v=1;for(let a=0;a<r;a++){let r=t[a],o=f?d[a]:void 0,p=o?o[n]:1;if(p===0){h=-1;continue}let g=r.getValue(s);if(h!==-1&&!u[a]&&p===v&&(c?c({anchorRow:t[h],anchorValue:_,column:i,previousRow:t[a-1],row:r,table:e,value:g}):g!=null&&Object.is(g,_))){l[a]=0,l[h]=l[h]+1,m=!0;continue}h=a,_=g,v=p}m&&(p[s]=l)}return{colSpans:d,columnIndexes:l,rowSpans:p,rows:t}}function S(e,t){let n=t.row._cellSpanRowIndex;return n===void 0||e.rows[n]!==t.row?-1:n}function C(e){let t=e.row.table,n=m(t,`getCellSpanIndex`,x),r=n.rowSpans[e.column.id];if(!r)return 1;let i=S(n,e);return i===-1?1:r[i]}function ce(e){let t=e.row.table,n=m(t,`getCellSpanIndex`,x),r=S(n,e);if(r===-1)return 1;let i=n.colSpans[r];if(!i)return 1;let a=n.columnIndexes[e.column.id];return a===void 0?1:i[a]}function le(e){return C(e)===0||ce(e)===0}var ue,de,fe,pe;function me(){return(me=e((()=>{h(),ue=_(),de=_(),fe=[],pe=[]})))()}var w;function T(){return(T=e((()=>{h(),me(),w={getDefaultTableOptions:()=>({enableCellSpanning:!0}),initRowInstanceData:e=>{e._cellSpanRowIndex=-1},assignCellPrototype:(e,t)=>{te(`cellSpanningFeature`,e,t,{cell_getColSpan:{fn:e=>ce(e)},cell_getIsCovered:{fn:e=>le(e)},cell_getRowSpan:{fn:e=>C(e)}})},constructTableAPIs:e=>{v(`cellSpanningFeature`,e,{table_getCellSpanIndex:{fn:()=>x(e),memoDeps:()=>[e.getRowModel().rows,e.atoms.rowPinning?.get(),e.options.keepPinnedRows,e.atoms.columnVisibility?.get(),e.atoms.columnOrder?.get(),e.atoms.columnPinning?.get(),e.atoms.grouping?.get(),e.options.columns,e.options.groupedColumnMode,e.options.enableCellSpanning]}})}}})))()}function E(e,t){return e.row<t.row+t.rowSpan&&t.row<e.row+e.rowSpan&&e.column<t.column+t.columnSpan&&t.column<e.column+e.columnSpan}function D(e){let t=e.rows.length,n=e.columns.length;if(e.version!==1||!t||!n||t*n>2e4)throw Error(`Недопустимый размер таблицы.`);if(!Number.isInteger(e.headerRowCount)||e.headerRowCount<0||e.headerRowCount>t)throw Error(`Некорректное число строк заголовка.`);let r=new Set,i=e=>{if(!e||r.has(e))throw Error(`Идентификаторы строк, столбцов и ячеек должны быть уникальными.`);r.add(e)};for(let t of e.columns)if(i(t.id),t.width!==null&&(!Number.isFinite(t.width)||t.width<=0))throw Error(`Некорректная ширина столбца.`);for(let t of e.rows){if(i(t.id),t.cells.length!==n)throw Error(`Все строки должны иметь одинаковое число ячеек.`);t.cells.forEach(e=>i(e.id))}let a=new Set;for(let t of e.merges){if(O(e,t),t.rowSpan*t.columnSpan===1)throw Error(`Объединение должно содержать несколько ячеек.`);if(t.row<e.headerRowCount&&t.row+t.rowSpan>e.headerRowCount)throw Error(`Нельзя объединять заголовок с основной частью таблицы.`);for(let e=t.row;e<t.row+t.rowSpan;e++)for(let r=t.column;r<t.column+t.columnSpan;r++){let t=e*n+r;if(a.has(t))throw Error(`Объединённые области пересекаются.`);a.add(t)}}}function O(e,t){if(![t.row,t.column,t.rowSpan,t.columnSpan].every(Number.isInteger)||t.row<0||t.column<0||t.rowSpan<1||t.columnSpan<1||t.row+t.rowSpan>e.rows.length||t.column+t.columnSpan>e.columns.length)throw Error(`Выделение выходит за границы таблицы.`)}function k(e,t){let n={...t,rowSpan:1,columnSpan:1};return O(e,n),e.merges.find(e=>E(e,n))??n}function A(e,t,n){let r={row:Math.min(t.row,n.row),column:Math.min(t.column,n.column),rowSpan:Math.abs(t.row-n.row)+1,columnSpan:Math.abs(t.column-n.column)+1};O(e,r);let i=!0;for(;i;){i=!1;for(let t of e.merges){if(!E(r,t))continue;let e=Math.min(r.row,t.row),n=Math.min(r.column,t.column),a=Math.max(r.row+r.rowSpan,t.row+t.rowSpan)-e,o=Math.max(r.column+r.columnSpan,t.column+t.columnSpan)-n;(e!==r.row||n!==r.column||a!==r.rowSpan||o!==r.columnSpan)&&(r={row:e,column:n,rowSpan:a,columnSpan:o},i=!0)}}return r}function he(e,t,n){D(e);let r=A(e,t,n);if(r.rowSpan*r.columnSpan===1)return e;let i=e.merges.filter(e=>E(e,r));if(i.length===1&&r.row===i[0].row&&r.column===i[0].column&&r.rowSpan===i[0].rowSpan&&r.columnSpan===i[0].columnSpan)return e;let a={...e,merges:[...e.merges.filter(e=>!E(e,r)),r]};return D(a),a}function ge(e,t){D(e);let n=k(e,t);return n.rowSpan*n.columnSpan===1?e:{...e,merges:e.merges.filter(e=>e!==n)}}function j(e,t,n,r,i,a=`body`){D(e);let o=t===`row`?e.rows.length:e.columns.length;if(!Number.isInteger(n)||n<0||n>o)throw Error(`Некорректная позиция вставки.`);if(i.length!==(t===`row`?e.columns.length:e.rows.length))throw Error(`Неверное число новых ячеек.`);if(t===`row`&&(a===`header`?n>e.headerRowCount:n<e.headerRowCount))throw Error(`Строка вставляется вне выбранной части таблицы.`);let s=t===`row`?`rowSpan`:`columnSpan`,c=e.merges.map(e=>n<=e[t]?{...e,[t]:e[t]+1}:n<e[t]+e[s]?{...e,[s]:e[s]+1}:e),l=t===`row`?{...e,merges:c,headerRowCount:e.headerRowCount+ +(a===`header`),rows:[...e.rows.slice(0,n),{id:r,cells:i},...e.rows.slice(n)]}:{...e,merges:c,columns:[...e.columns.slice(0,n),{id:r,width:null},...e.columns.slice(n)],rows:e.rows.map((e,t)=>({...e,cells:[...e.cells.slice(0,n),i[t],...e.cells.slice(n)]}))};return D(l),l}function _e(e,t,n){return O(e,{...t,rowSpan:1,columnSpan:1}),Object.is(e.rows[t.row].cells[t.column].value,n)?e:{...e,rows:e.rows.map((e,r)=>r===t.row?{...e,cells:e.cells.map((e,r)=>r===t.column?{...e,value:n}:e)}:e)}}function M(e,t){D(e);let n=t===`row`?e.rows.length:e.columns.length,r=new Set;for(let n of e.merges){let e=t===`row`?n.rowSpan:n.columnSpan;for(let i=1;i<e;i++)r.add(n[t]+i)}let i=[],a=0;for(let e=1;e<=n;e++)(e===n||!r.has(e))&&(i.push({start:a,count:e-a}),a=e);return i}function ve(e,t,n){let r=M(e,t).find(e=>n>=e.start&&n<e.start+e.count);if(!r)throw Error(`Группа не найдена.`);let i=t===`row`?e.rows.length:e.columns.length;if(r.count===i)throw Error(`В таблице должна остаться хотя бы одна строка и один столбец.`);let a=r.start+r.count,o=e.merges.filter(e=>e[t]<r.start||e[t]>=a).map(e=>e[t]<a?e:{...e,[t]:e[t]-r.count}),s=t===`row`?{...e,merges:o,rows:e.rows.filter((e,t)=>t<r.start||t>=a),headerRowCount:e.headerRowCount-(r.start<e.headerRowCount?r.count:0)}:{...e,merges:o,columns:e.columns.filter((e,t)=>t<r.start||t>=a),rows:e.rows.map(e=>({...e,cells:e.cells.filter((e,t)=>t<r.start||t>=a)}))};return D(s),s}function ye(e,t,n,r){let i=M(e,t),a=i.findIndex(e=>n>=e.start&&n<e.start+e.count);if(a<0)throw Error(`Группа не найдена.`);let s=a+r;if(s<0||s>=i.length||t===`row`&&i[a].start<e.headerRowCount!=i[s].start<e.headerRowCount)return e;let c=o(i,a,r===-1?`up`:`down`).flatMap(e=>Array.from({length:e.count},(t,n)=>e.start+n)),l=new Map(c.map((e,t)=>[e,t])),u=e.merges.map(e=>({...e,[t]:l.get(e[t])??e[t]})),d=t===`row`?{...e,merges:u,rows:c.map(t=>e.rows[t])}:{...e,merges:u,columns:c.map(t=>e.columns[t]),rows:e.rows.map(e=>({...e,cells:c.map(t=>e.cells[t])}))};return D(d),d}function N(){return(N=e((()=>{a()})))()}var P,F,I,L,R,z,B,V,H;function U(){return(U=e((()=>{P=`_6ftNrS`,F=`tji4uW`,I=`nVFFYk`,L=`S7CdzG`,R=`emaqLv`,z=`VLG992`,B=`Hr0ghz`,V=`tuhyZe`,H={editor:P,toolbar:F,help:I,scroll:L,table:R,cellContent:z,inspector:B,structure:V}})))()}function be(e){let t=(0,W.useMemo)(()=>[...e.rows],[e]),n=(0,W.useMemo)(()=>e.columns.map((t,n)=>({id:t.id,accessorFn:(t,r)=>{let i=k(e,{row:r,column:n});return e.rows[i.row].cells[i.column].id},spanRows:!0,spanColumns:({row:t})=>{let r=k(e,{row:t.index,column:n});return r.column===n?r.columnSpan:1}})),[e]);return l({features:xe,data:t,columns:n,getRowId:e=>e.id})}var W,xe;function G(){return(G=e((()=>{W=t(),N(),T(),u(),xe=ee({cellSpanningFeature:w})})))()}function K({editor:e,extendSelection:t,disabled:n,renderCell:r,getCellText:i}){let a=(0,q.useId)(),o=(0,q.useRef)(new Map),s=be(e.document),{document:c,selection:l,focus:u}=e;return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(`p`,{id:a,className:H.help,children:`Стрелки — переход между ячейками. Shift + стрелки или Shift + щелчок — выделение диапазона. Содержимое выбранной ячейки редактируется под таблицей.`}),(0,J.jsx)(`div`,{className:H.scroll,children:(0,J.jsxs)(`table`,{role:`grid`,"aria-label":c.caption||`Редактор таблицы`,"aria-describedby":a,"aria-multiselectable":`true`,"aria-disabled":n||void 0,className:H.table,children:[(0,J.jsx)(`colgroup`,{children:c.columns.map(e=>(0,J.jsx)(`col`,{style:{width:e.width??180}},e.id))}),(0,J.jsx)(`tbody`,{children:s.getRowModel().rows.map(a=>(0,J.jsx)(`tr`,{"aria-rowindex":a.index+1,"data-header":a.index<c.headerRowCount||void 0,children:a.getAllCells().map((s,d)=>{if(s.getIsCovered())return null;let f=a.index>=l.row&&a.index<l.row+l.rowSpan&&d>=l.column&&d<l.column+l.columnSpan,p={row:a.index,column:d},m=a.original.cells[d],h=a.index<c.headerRowCount?`th`:`td`;return(0,J.jsxs)(h,{role:a.index<c.headerRowCount?`columnheader`:`gridcell`,ref:e=>{e?o.current.set(m.id,e):o.current.delete(m.id)},rowSpan:s.getRowSpan(),colSpan:s.getColSpan(),"aria-colindex":d+1,"aria-label":`Строка ${a.index+1}, столбец ${d+1}: ${i(m)||`Пустая ячейка`}`,"aria-selected":f,tabIndex:!n&&u.row===a.index&&u.column===d?0:-1,onClick:r=>{n||e.select(p,t||r.shiftKey)},onPointerEnter:t=>{!n&&t.pointerType===`mouse`&&t.buttons===1&&e.select(p,!0)},onKeyDown:t=>{if(n||t.altKey||t.ctrlKey||t.metaKey)return;let r;switch(t.key){case`ArrowRight`:r={...p,column:d+s.getColSpan()};break;case`ArrowLeft`:r={...p,column:d-1};break;case`ArrowDown`:r={...p,row:a.index+s.getRowSpan()};break;case`ArrowUp`:r={...p,row:a.index-1};break;case`Home`:r={...p,column:0};break;case`End`:r={...p,column:c.columns.length-1};break;case` `:t.preventDefault(),e.select(p,t.shiftKey);return;default:return}if(t.preventDefault(),r.row<0||r.column<0||r.row>=c.rows.length||r.column>=c.columns.length)return;let i=k(c,r);e.select(r,t.shiftKey),o.current.get(c.rows[i.row].cells[i.column].id)?.focus()},children:[a.index<c.headerRowCount?(0,J.jsx)(`span`,{className:`visuallyHidden`,children:i(m)||`Пустой заголовок`}):null,(0,J.jsx)(`div`,{inert:!0,className:H.cellContent,children:r(m)})]},s.id)})},a.id))})]})})]})}var q,J;function Se(){return(Se=e((()=>{q=t(),N(),G(),U(),J=i(),K.__docgenInfo={description:`Доступная сетка: roving tabindex, стрелки/Shift и выбор диапазона без drag-only действий.`,methods:[],displayName:`TableEditorGrid`,props:{editor:{required:!0,tsType:{name:`signature`,type:`object`,raw:`{
|
|
2
2
|
readonly document: TableDocument<T>;
|
|
3
3
|
readonly selection: TableDocumentRange;
|
|
4
4
|
readonly focus: TableDocumentPosition;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-BNEMNAEw.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d}from"./blocks-B8YtS91C.js";import{a as f,c as p,i as m,l as h,n as g,o as _,r as v,s as y,t as b,u as x}from"./Tabs.stories-BPct4JgR.js";function S(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(s,{of:h,parameters:{docs:{toc:!0}}}),`
|
|
2
2
|
`,(0,w.jsx)(u,{children:`Tabs`}),`
|
|
3
3
|
`,(0,w.jsx)(o,{children:`Набор tabs-компонентов с разделением простого scroll-сценария и составного panel-layout сценария`}),`
|
|
4
4
|
`,(0,w.jsxs)(t.p,{children:[`После рефакторинга `,(0,w.jsx)(t.code,{children:`tabs`}),` разделены на два независимых сценария:`]}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t,r as n}from"./rolldown-runtime-DkW27tQK.js";import{t as r}from"./react-BZJXY1be.js";import{n as i}from"./iframe-
|
|
1
|
+
import{a as e,n as t,r as n}from"./rolldown-runtime-DkW27tQK.js";import{t as r}from"./react-BZJXY1be.js";import{n as i}from"./iframe-BNEMNAEw.js";import{a,i as o}from"./utils-tg3ibbzi.js";import{n as ee,t as s}from"./ui.module-Ci4WdQwm.js";import{i as c,n as te}from"./uiClasses-DROmzfa9.js";import{n as l,t as u}from"./Scrollable-BrsRmcMz.js";import{n as d,t as f}from"./createControlledStoryRender-BouhvX-R.js";import{a as ne,c as p,f as re,i as m,l as h,n as g,o as _,r as ie,s as v,t as y,u as ae}from"./TabsBox-AWLl9n9k.js";function oe(e){let{type:t}=e;if(typeof t==`function`){let e=t;return e.displayName??e.name??null}if(typeof t==`object`&&t&&`displayName`in t){let e=t;return typeof e.displayName==`string`?e.displayName:null}return null}function b(e,t){return(0,T.isValidElement)(e)&&oe(e)===t}function x({children:e}){return(0,E.jsx)(E.Fragment,{children:e})}function S({children:e}){return(0,E.jsx)(E.Fragment,{children:e})}function C({children:e}){return(0,E.jsx)(E.Fragment,{children:e})}function w({children:e}){return(0,E.jsx)(E.Fragment,{children:e})}function se(e,t){let n=null,r=null,i=null;for(let a of T.Children.toArray(e)){if(!(0,T.isValidElement)(a))throw Error(`TabsLayout.Tab "${t}" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`);if(b(a,O)){if(n)throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Toolbar.`);n=a.props;continue}if(b(a,k)){if(r)throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Content.`);r=a.props;continue}if(b(a,A)){if(i)throw Error(`TabsLayout.Tab "${t}" содержит более одного блока TabsLayout.Footer.`);i=a.props;continue}throw Error(`TabsLayout.Tab "${t}" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`)}if(!r)throw Error(`TabsLayout.Tab "${t}" должен содержать блок TabsLayout.Content.`);return{toolbar:n,content:r,footer:i}}function ce(e){return T.Children.toArray(e).map(e=>{if(!b(e,D))throw Error(`TabsLayout принимает только дочерние элементы TabsLayout.Tab.`);return{id:e.props.id,title:e.props.title,disabled:e.props.disabled,...se(e.props.children,e.props.id)}})}var T,E,D,O,k,A,j,M;function N(){return(N=t((()=>{T=e(r(),1),o(),s(),c(),h(),p(),_(),m(),E=i(),D=`TabsLayout.Tab`,O=`TabsLayout.Toolbar`,k=`TabsLayout.Content`,A=`TabsLayout.Footer`,x.displayName=D,S.displayName=O,C.displayName=k,w.displayName=A,j=({children:e,value:t,defaultValue:n,onValueChange:r,className:i,orientation:o=`horizontal`,activationMode:s=`manual`,mountStrategy:c=`lazy`,loop:l=!0,tone:u=`primary`,clean:d=!1,"aria-label":f,"aria-labelledby":p})=>{let m=(0,T.useMemo)(()=>ce(e),[e]),h=ae({items:m,value:t,defaultValue:n,onValueChange:r,orientation:o,activationMode:s,loop:l}),g=a(v.tabsContainer,d?v.clean:ee.uiFilledPanel,v[o],te(u),i),_=a(v.panels,v.layoutPanels);return(0,E.jsxs)(`div`,{className:g,children:[(0,E.jsx)(ie,{items:m,state:h,className:v.tabs,ariaLabel:f,ariaLabelledBy:p}),(0,E.jsx)(`div`,{className:_,children:m.map(e=>{let t=e.id===h.selectedTabId;if(!re({mountStrategy:c,isSelected:t,isVisited:h.isVisited(e.id)}))return null;let n=`${e.toolbar?`auto `:``}minmax(0, 1fr)${e.footer?` auto`:``}`;return(0,E.jsx)(ne,{tabId:e.id,isSelected:t,className:v.panel,getTabElementId:h.getTabElementId,getPanelElementId:h.getPanelElementId,children:(0,E.jsxs)(`div`,{className:v.layoutPanel,style:{gridTemplateRows:n},children:[e.toolbar?(0,E.jsx)(`div`,{className:a(v.layoutSection,e.toolbar.className),children:e.toolbar.children}):null,(0,E.jsx)(`div`,{className:a(v.layoutSection,v.layoutContent,e.content.className),children:e.content.children}),e.footer?(0,E.jsx)(`div`,{className:a(v.layoutSection,e.footer.className),children:e.footer.children}):null]})},e.id)})})]})},j.displayName=`TabsLayout`,M=Object.assign(j,{Tab:x,Toolbar:S,Content:C,Footer:w}),j.__docgenInfo={description:`Compound-оболочка tabs для составных panel-layout сценариев.
|
|
2
2
|
Сам компонент управляет только переключением и каркасом панели.`,methods:[],displayName:`TabsLayout`,props:{value:{required:!1,tsType:{name:`string`},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},onValueChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},orientation:{required:!1,tsType:{name:`union`,raw:`"horizontal" | "vertical"`,elements:[{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"vertical"`}]},description:``,defaultValue:{value:`"horizontal"`,computed:!1}},activationMode:{required:!1,tsType:{name:`union`,raw:`"automatic" | "manual"`,elements:[{name:`literal`,value:`"automatic"`},{name:`literal`,value:`"manual"`}]},description:``,defaultValue:{value:`"manual"`,computed:!1}},mountStrategy:{required:!1,tsType:{name:`union`,raw:`"unmount" | "lazy" | "keep-mounted"`,elements:[{name:`literal`,value:`"unmount"`},{name:`literal`,value:`"lazy"`},{name:`literal`,value:`"keep-mounted"`}]},description:``,defaultValue:{value:`"lazy"`,computed:!1}},loop:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},tone:{required:!1,tsType:{name:`union`,raw:`"primary" | "secondary" | "tertiary"`,elements:[{name:`literal`,value:`"primary"`},{name:`literal`,value:`"secondary"`},{name:`literal`,value:`"tertiary"`}]},description:``,defaultValue:{value:`"primary"`,computed:!1}},clean:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``},"aria-label":{required:!1,tsType:{name:`string`},description:``},"aria-labelledby":{required:!1,tsType:{name:`string`},description:``},children:{required:!0,tsType:{name:`ReactNode`},description:``}}}})))()}var le=n({BoxBasic:()=>K,BoxControlled:()=>q,BoxMountStrategies:()=>Y,BoxVertical:()=>J,DisabledTabs:()=>X,Empty:()=>$,LayoutPanels:()=>Z,Loading:()=>Q,__namedExportsOrder:()=>ue,default:()=>W});function P({label:e}){let[t,n]=(0,I.useState)(0);return(0,L.jsxs)(`div`,{style:z,children:[(0,L.jsxs)(`div`,{children:[`Панель: `,e]}),(0,L.jsxs)(`div`,{children:[`Локальный счётчик: `,t]}),(0,L.jsx)(`button`,{type:`button`,onClick:()=>n(e=>e+1),children:`Увеличить`})]})}function F(e){return f((t,n)=>{let r=t.value??t.defaultValue,i=(0,L.jsx)(y,{...t,value:r,onValueChange:e=>{t.onValueChange?.(e),n({value:e})}});return e===void 0?i:(0,L.jsx)(`div`,{style:{height:e},children:i})})}var I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$,ue;function de(){return(de=t((()=>{I=r(),g(),N(),d(),l(),L=i(),{fn:R}=__STORYBOOK_MODULE_TEST__,z={padding:16,display:`grid`,gap:12},B=[{id:`profile`,title:`Профиль`,content:(0,L.jsx)(`div`,{style:z,children:`Карточка пользователя и основные поля профиля.`})},{id:`settings`,title:`Настройки`,content:(0,L.jsx)(`div`,{style:z,children:`Параметры интерфейса, уведомлений и доступа.`})},{id:`history`,title:`История`,content:(0,L.jsx)(`div`,{style:z,children:`Последние действия, комментарии и изменения.`})}],V=[{id:`first`,title:`Первая`,content:(0,L.jsx)(P,{label:`Первая`})},{id:`second`,title:`Вторая`,content:(0,L.jsx)(P,{label:`Вторая`})},{id:`third`,title:`Третья`,content:(0,L.jsx)(P,{label:`Третья`})}],H=[{id:`overview`,title:`Обзор`,content:(0,L.jsx)(`div`,{style:z,children:`Раздел доступен сразу.`})},{id:`analytics`,title:`Аналитика`,disabled:!0,content:(0,L.jsx)(`div`,{style:z,children:`Пока недоступно.`})},{id:`history`,title:`История`,content:(0,L.jsx)(`div`,{style:z,children:`История изменений и действий.`})}],U=Array.from({length:12},(e,t)=>`Элемент ${t+1}`),W={title:`UI/Tabs`,component:y,args:{items:B,value:`profile`,onValueChange:R(),orientation:`horizontal`,activationMode:`automatic`,mountStrategy:`unmount`,isLoading:!1,loadingText:`Загрузка вкладок...`,clean:!1,loop:!0},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{items:{description:"Набор вкладок для `TabsBox`. Каждая вкладка задаётся через `id`, `title`, `content` и опциональный `disabled`.",control:!1},value:{description:`Активная вкладка в controlled-режиме.`,control:`text`},defaultValue:{description:`Начальная вкладка в uncontrolled-режиме.`,control:`text`},onValueChange:{description:`Вызывается при смене активной вкладки.`,control:!1},orientation:{description:`Направление списка вкладок.`,control:`inline-radio`,options:[`horizontal`,`vertical`]},activationMode:{description:"Режим клавиатурной активации: `automatic` меняет вкладку стрелками, `manual` только переводит фокус.",control:`inline-radio`,options:[`automatic`,`manual`]},mountStrategy:{description:"Политика монтирования панелей: `unmount`, `lazy` или `keep-mounted`.",control:`inline-radio`,options:[`unmount`,`lazy`,`keep-mounted`]},clean:{description:`Убирает базовые padding и surface-оформление panel-области.`,control:`boolean`},loop:{description:`Разрешает циклическую навигацию стрелками и Home/End.`,control:`boolean`},isLoading:{description:"Показывает loading-состояние `TabsBox`.",control:`boolean`},loadingText:{description:`Текст внутри loading-состояния.`,control:`text`},"aria-label":{description:"Собственное доступное имя `tablist`, если рядом нет видимого заголовка.",control:`text`},"aria-labelledby":{description:"Ссылка на внешний заголовок `tablist` вместо текстовой ARIA-метки.",control:`text`}}},G=f((e,t)=>{let n=e.value??e.defaultValue??`details`;return(0,L.jsx)(`div`,{style:{height:360},children:(0,L.jsxs)(M,{value:n,defaultValue:e.defaultValue,onValueChange:n=>{e.onValueChange?.(n),t({value:n})},orientation:e.orientation,activationMode:e.activationMode,mountStrategy:e.mountStrategy,loop:e.loop,clean:e.clean,className:e.className,"aria-label":e[`aria-label`],"aria-labelledby":e[`aria-labelledby`],children:[(0,L.jsxs)(M.Tab,{id:`details`,title:`Детали`,children:[(0,L.jsx)(M.Toolbar,{children:(0,L.jsx)(`div`,{className:`surface0 border radiusSm paddingSm`,children:`Панель инструментов вне scroll-области.`})}),(0,L.jsx)(M.Content,{children:(0,L.jsxs)(`div`,{style:{display:`grid`,gridTemplateColumns:`1fr 1fr`,gap:12,height:`100%`},children:[(0,L.jsx)(u,{className:`surface0 border radiusSm paddingSm h100`,children:U.map(e=>(0,L.jsxs)(`div`,{className:`paddingBlockXs`,children:[`Левая колонка: `,e]},`left-${e}`))}),(0,L.jsx)(u,{className:`surface0 border radiusSm paddingSm h100`,children:U.map(e=>(0,L.jsxs)(`div`,{className:`paddingBlockXs`,children:[`Правая колонка: `,e]},`right-${e}`))})]})}),(0,L.jsx)(M.Footer,{children:(0,L.jsx)(`div`,{className:`surface0 border radiusSm paddingSm`,children:`Футер тоже исключён из scroll-контента.`})})]}),(0,L.jsx)(M.Tab,{id:`history`,title:`История`,children:(0,L.jsx)(M.Content,{children:(0,L.jsx)(u,{className:`surface0 border radiusSm paddingSm h100`,children:U.map(e=>(0,L.jsxs)(`div`,{className:`paddingBlockXs`,children:[`История изменения: `,e]},`history-${e}`))})})})]})})}),K={args:{"aria-label":`Основные разделы профиля`},render:F()},q={args:{value:`settings`,"aria-label":`Управляемые вкладки`},render:F()},J={args:{orientation:`vertical`,"aria-label":`Вертикальные вкладки`},render:F(320)},Y={args:{items:V,mountStrategy:`lazy`,"aria-label":`Демонстрация стратегий монтирования`},render:F()},X={args:{items:H,value:`overview`,"aria-label":`Вкладки с недоступным разделом`},render:F()},Z={args:{value:`details`,onValueChange:R(),orientation:`horizontal`,activationMode:`manual`,mountStrategy:`lazy`,clean:!1,loop:!0,"aria-label":`Составные панели документа`},render:G},Q={args:{isLoading:!0,items:B},render:F()},$={args:{items:[],value:void 0},render:F()},K.parameters={...K.parameters,docs:{...K.parameters?.docs,source:{originalSource:`{
|
|
3
3
|
args: {
|
|
4
4
|
"aria-label": "Основные разделы профиля"
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-BNEMNAEw.js";import{a as r,i,o as a}from"./utils-tg3ibbzi.js";import{n as o,t as s}from"./ui.module-Ci4WdQwm.js";import{i as c,n as l}from"./uiClasses-DROmzfa9.js";import{i as u,n as d,r as f,t as p}from"./NoData-A59EYm0a.js";import{n as m,t as h}from"./OneStepScroller-EAhOZmWt.js";function g(e){return e.find(e=>!e.disabled)?.id??null}function _(e,t){return t?e.find(e=>e.id===t&&!e.disabled)?.id??g(e):g(e)}function v(e){return e.filter(e=>!e.disabled)}function y({mountStrategy:e,isSelected:t,isVisited:n}){return e===`keep-mounted`||t||e===`lazy`&&n}function b(){return(b=e((()=>{})))()}function x({items:e,value:t,defaultValue:n,onValueChange:r,orientation:i=`horizontal`,activationMode:o=`automatic`,loop:s=!0}){let c=t!==void 0,l=(0,S.useMemo)(()=>v(e),[e]),u=l[0]?.id??null,[d,f]=(0,S.useState)(()=>_(e,n)),[p,m]=(0,S.useState)(()=>_(e,t??n)),h=_(e,t??n),[g,y]=(0,S.useState)(()=>h?new Set([h]):new Set),b=(0,S.useId)(),x=(0,S.useRef)({}),C=_(e,c?t:d),w=_(e,p)??C??u,T=(0,S.useMemo)(()=>{if(!C||g.has(C))return g;let e=new Set(g);return e.add(C),e},[C,g]),E=t=>{let n=_(e,t);n&&(y(e=>{if(e.has(n))return e;let t=new Set(e);return t.add(n),t}),c||f(n),r?.(n))},D=e=>{x.current[e]?.focus()},O=e=>{if(l.length<2)return;let t=Math.max(0,l.findIndex(e=>e.id===(w??C??u))),n=a({currentIndex:t,itemCount:l.length,key:e.key,orientation:i,wrap:s});if(n===null)return;e.preventDefault();let r=l[n]?.id;r&&(m(r),D(r),o===`automatic`&&E(r))},k=e=>{let t=e.relatedTarget;t instanceof Node&&e.currentTarget.contains(t)||m(C??u)},A=e=>`${b}-tab-${e}`,j=e=>`${b}-panel-${e}`;return{activationMode:o,orientation:i,selectedTabId:C,tabbableTabId:w,onTabListKeyDown:O,onTabListBlur:k,getTabElementId:A,getPanelElementId:j,getTabButtonProps:e=>{let t=e.id===C,n=e.id===w;return{ref:t=>{x.current[e.id]=t},type:`button`,role:`tab`,id:A(e.id),disabled:e.disabled,"aria-selected":t,"aria-controls":j(e.id),"aria-disabled":e.disabled||void 0,tabIndex:e.disabled?-1:n?0:-1,onFocus:()=>m(e.id),onClick:()=>E(e.id)}},isVisited:e=>T.has(e)}}var S;function C(){return(C=e((()=>{S=t(),i()})))()}var w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z;function B(){return(B=e((()=>{w=`pcMjuj`,T=`NLOw2z`,E=`ZSAoAa`,D=`psYhsZ`,O=`mNDq9-`,k=`_28F3fs`,A=`g156KO`,j=`C2mO1e`,M=`UKZXTZ`,N=`jiTafe`,P=`nhD0k7`,F=`G8FICe`,I=`W50XHh`,L=`vnjXkU`,R=`Nzvfhw`,z={tabsContainer:w,clean:T,tabs:E,panels:D,horizontal:O,tab:k,vertical:A,panelScrollable:j,selected:M,panel:N,panelBody:P,layoutPanels:F,layoutPanel:I,layoutSection:L,layoutContent:R}})))()}function V({containerClassName:e,tabListClassName:t,panelsClassName:n,panelClassName:i,panelBodyClassName:a,loadingText:o}){return(0,H.jsxs)(`div`,{className:e,children:[(0,H.jsx)(`div`,{className:t,"aria-hidden":`true`,children:(0,H.jsx)(`button`,{type:`button`,disabled:!0,"data-disabled":``,className:r(z.tab,`skeletonLine`),children:`Загрузка...`})}),(0,H.jsx)(`div`,{className:n,"aria-busy":`true`,children:(0,H.jsx)(`div`,{className:i,children:(0,H.jsx)(`div`,{className:a,children:(0,H.jsx)(f,{text:o,className:`radiusSm`})})})})]})}var H;function U(){return(U=e((()=>{i(),u(),B(),H=n(),V.__docgenInfo={description:"Служебное loading-состояние для `TabsBox`.",methods:[],displayName:`TabsLoadingState`,props:{containerClassName:{required:!0,tsType:{name:`string`},description:``},tabListClassName:{required:!0,tsType:{name:`string`},description:``},panelsClassName:{required:!0,tsType:{name:`string`},description:``},panelClassName:{required:!0,tsType:{name:`string`},description:``},panelBodyClassName:{required:!0,tsType:{name:`string`},description:``},loadingText:{required:!1,tsType:{name:`string`},description:``}}}})))()}function W({containerClassName:e,panelsClassName:t,panelClassName:n,panelBodyClassName:r}){return(0,G.jsx)(`div`,{className:e,children:(0,G.jsx)(`div`,{className:t,children:(0,G.jsx)(`div`,{className:n,children:(0,G.jsx)(`div`,{className:r,children:(0,G.jsx)(p,{className:`radiusSm`})})})})})}var G;function K(){return(K=e((()=>{d(),G=n(),W.__docgenInfo={description:"Служебное empty-состояние для `TabsBox`.",methods:[],displayName:`TabsNoDataState`,props:{containerClassName:{required:!0,tsType:{name:`string`},description:``},panelsClassName:{required:!0,tsType:{name:`string`},description:``},panelClassName:{required:!0,tsType:{name:`string`},description:``},panelBodyClassName:{required:!0,tsType:{name:`string`},description:``}}}})))()}function q({tabId:e,isSelected:t,className:n,getTabElementId:r,getPanelElementId:i,children:a}){return(0,J.jsx)(`div`,{role:`tabpanel`,id:i(e),"aria-labelledby":r(e),hidden:!t,className:n,children:a})}var J;function Y(){return(Y=e((()=>{t(),J=n(),q.__docgenInfo={description:``,methods:[],displayName:`TabsPanel`,props:{tabId:{required:!0,tsType:{name:`string`},description:``},isSelected:{required:!0,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},getTabElementId:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(tabId: string) => string`,signature:{arguments:[{type:{name:`string`},name:`tabId`}],return:{name:`string`}}},description:``},getPanelElementId:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(tabId: string) => string`,signature:{arguments:[{type:{name:`string`},name:`tabId`}],return:{name:`string`}}},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``}}}})))()}function X({items:e,state:t,className:n,ariaLabel:i,ariaLabelledBy:a}){return(0,Z.jsx)(`div`,{className:n,role:`tablist`,"aria-orientation":t.orientation,"aria-label":i,"aria-labelledby":a,onKeyDown:t.onTabListKeyDown,onBlur:t.onTabListBlur,children:(e=>t.orientation===`horizontal`?(0,Z.jsx)(h,{children:e}):(0,Z.jsx)(Z.Fragment,{children:e}))(e.map(e=>(0,Z.jsx)(`button`,{...t.getTabButtonProps(e),"data-ui":`tabs-tab`,"data-action":`select-tab`,className:r(z.tab,`textWrap`,e.id===t.selectedTabId&&z.selected),children:e.title},e.id)))})}var Z;function Q(){return(Q=e((()=>{i(),m(),B(),Z=n(),X.__docgenInfo={description:``,methods:[],displayName:`TabsTabList`,props:{items:{required:!0,tsType:{name:`Array`,elements:[{name:`TabsDescriptor`}],raw:`TabsDescriptor[]`},description:``},state:{required:!0,tsType:{name:`TabsStateModel`},description:``},className:{required:!1,tsType:{name:`string`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``},ariaLabelledBy:{required:!1,tsType:{name:`string`},description:``}}}})))()}function ee({items:e,value:t,defaultValue:n,onValueChange:i,className:a,isLoading:s,loadingText:c,orientation:u=`horizontal`,activationMode:d=`automatic`,mountStrategy:f=`unmount`,loop:p=!0,tone:m=`primary`,clean:h=!1,"aria-label":g,"aria-labelledby":_}){let v=x({items:e,value:t,defaultValue:n,onValueChange:i,orientation:u,activationMode:d,loop:p}),b=r(z.tabsContainer,h?z.clean:o.uiFilledPanel,z[u],l(m),a),S=z.tabs,C=r(z.panels,z.panelScrollable,`scrollable overscroll`),w=z.panel,T=z.panelBody;return s?(0,$.jsx)(V,{containerClassName:b,tabListClassName:S,panelsClassName:C,panelClassName:w,panelBodyClassName:T,loadingText:c}):e.length?(0,$.jsxs)(`div`,{className:b,children:[(0,$.jsx)(X,{items:e,state:v,className:S,ariaLabel:g,ariaLabelledBy:_}),(0,$.jsx)(`div`,{className:C,children:e.map(e=>{let t=e.id===v.selectedTabId;return y({mountStrategy:f,isSelected:t,isVisited:v.isVisited(e.id)})?(0,$.jsx)(q,{tabId:e.id,isSelected:t,className:w,getTabElementId:v.getTabElementId,getPanelElementId:v.getPanelElementId,children:(0,$.jsx)(`div`,{className:T,children:e.content})},e.id):null})})]}):(0,$.jsx)(W,{containerClassName:b,panelsClassName:C,panelClassName:w,panelBodyClassName:T})}var $;function te(){return(te=e((()=>{i(),s(),c(),C(),B(),U(),K(),Y(),Q(),$=n(),ee.__docgenInfo={description:`Простой items-based tabs-компонент.
|
|
2
2
|
Сам управляет областью панели и её прокруткой.`,methods:[],displayName:`TabsBox`,props:{value:{required:!1,tsType:{name:`string`},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},onValueChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: string) => void`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`void`}}},description:``},orientation:{required:!1,tsType:{name:`union`,raw:`"horizontal" | "vertical"`,elements:[{name:`literal`,value:`"horizontal"`},{name:`literal`,value:`"vertical"`}]},description:``,defaultValue:{value:`"horizontal"`,computed:!1}},activationMode:{required:!1,tsType:{name:`union`,raw:`"automatic" | "manual"`,elements:[{name:`literal`,value:`"automatic"`},{name:`literal`,value:`"manual"`}]},description:``,defaultValue:{value:`"automatic"`,computed:!1}},mountStrategy:{required:!1,tsType:{name:`union`,raw:`"unmount" | "lazy" | "keep-mounted"`,elements:[{name:`literal`,value:`"unmount"`},{name:`literal`,value:`"lazy"`},{name:`literal`,value:`"keep-mounted"`}]},description:``,defaultValue:{value:`"unmount"`,computed:!1}},loop:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`true`,computed:!1}},tone:{required:!1,tsType:{name:`union`,raw:`"primary" | "secondary" | "tertiary"`,elements:[{name:`literal`,value:`"primary"`},{name:`literal`,value:`"secondary"`},{name:`literal`,value:`"tertiary"`}]},description:``,defaultValue:{value:`"primary"`,computed:!1}},clean:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``},"aria-label":{required:!1,tsType:{name:`string`},description:``},"aria-labelledby":{required:!1,tsType:{name:`string`},description:``},items:{required:!0,tsType:{name:`Array`,elements:[{name:`TabsBoxItem`}],raw:`TabsBoxItem[]`},description:``},isLoading:{required:!1,tsType:{name:`boolean`},description:``},loadingText:{required:!1,tsType:{name:`string`},description:``}}}})))()}export{q as a,B as c,b as d,y as f,Q as i,C as l,te as n,Y as o,X as r,z as s,ee as t,x as u};
|