@ryuzaki13/react-foundation-ui 1.4.2 → 1.4.4
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/advanced-search/index.js +12 -11
- package/dist/advanced-search/index.js.map +1 -1
- package/dist/badge/index.js +1 -1
- package/dist/base-table/index.js +2 -2
- package/dist/button/index.js +1 -1
- package/dist/chunks/{CalendarView-KCkhCtK-.js → CalendarView-Z_XWk7aI.js} +8 -8
- package/dist/chunks/{CalendarView-KCkhCtK-.js.map → CalendarView-Z_XWk7aI.js.map} +1 -1
- package/dist/chunks/{ImageViewerRuntime-RN49by8Y.js → ImageViewerRuntime-BMs3BBkV.js} +4 -4
- package/dist/chunks/{ImageViewerRuntime-RN49by8Y.js.map → ImageViewerRuntime-BMs3BBkV.js.map} +1 -1
- package/dist/chunks/{TextEditorLexicalClient-CVTrglWP.js → TextEditorLexicalClient-CK8j3RA4.js} +16 -18
- package/dist/chunks/{TextEditorLexicalClient-CVTrglWP.js.map → TextEditorLexicalClient-CK8j3RA4.js.map} +1 -1
- package/dist/chunks/{badge-Cri0-kVK.js → badge-DwIUjH0a.js} +2 -2
- package/dist/chunks/{badge-Cri0-kVK.js.map → badge-DwIUjH0a.js.map} +1 -1
- package/dist/chunks/{base-table-D5IqsjQD.js → base-table-BFsVwXg3.js} +13 -12
- package/dist/chunks/{base-table-D5IqsjQD.js.map → base-table-BFsVwXg3.js.map} +1 -1
- package/dist/chunks/{button-CC0Jdx1j.js → button-BU2kRzwu.js} +2 -2
- package/dist/chunks/{button-CC0Jdx1j.js.map → button-BU2kRzwu.js.map} +1 -1
- package/dist/chunks/check-box-Dd3YFuxd.js.map +1 -1
- package/dist/chunks/{context-menu-DQeR3y7M.js → context-menu-C6RO7soI.js} +7 -2
- package/dist/chunks/{context-menu-DQeR3y7M.js.map → context-menu-C6RO7soI.js.map} +1 -1
- package/dist/chunks/{date-input-DBJisPRz.js → date-input-BzExUQnc.js} +5 -5
- package/dist/chunks/{date-input-DBJisPRz.js.map → date-input-BzExUQnc.js.map} +1 -1
- package/dist/chunks/{flex-DYZ0IbU6.js → flex-C7njxZ74.js} +10 -7
- package/dist/chunks/{flex-DYZ0IbU6.js.map → flex-C7njxZ74.js.map} +1 -1
- package/dist/chunks/floating-arrow-BE-z4QkE.js.map +1 -1
- package/dist/chunks/{input-BCJfUdK_.js → input-Bp6_Ucgr.js} +15 -15
- package/dist/chunks/{input-BCJfUdK_.js.map → input-Bp6_Ucgr.js.map} +1 -1
- package/dist/chunks/{input-files-Dcc5K-_1.js → input-files-D1JzSw_Y.js} +2 -2
- package/dist/chunks/{input-files-Dcc5K-_1.js.map → input-files-D1JzSw_Y.js.map} +1 -1
- package/dist/chunks/{input-search-B7HmrAM7.js → input-search-Bkhcinru.js} +2 -2
- package/dist/chunks/{input-search-B7HmrAM7.js.map → input-search-Bkhcinru.js.map} +1 -1
- package/dist/chunks/{misc-DIF5h9ba.js → misc-BYxxlJz6.js} +3 -3
- package/dist/chunks/{misc-DIF5h9ba.js.map → misc-BYxxlJz6.js.map} +1 -1
- package/dist/chunks/{modal-DXHX_sA-.js → modal-paexEF0j.js} +4 -5
- package/dist/chunks/{modal-DXHX_sA-.js.map → modal-paexEF0j.js.map} +1 -1
- package/dist/chunks/{multi-select-CWx12rgb.js → multi-select-COEkc8Qc.js} +4 -5
- package/dist/chunks/multi-select-COEkc8Qc.js.map +1 -0
- package/dist/chunks/{picker-BAQ9NeHe.js → picker-e6IsrMUG.js} +3 -3
- package/dist/chunks/{picker-BAQ9NeHe.js.map → picker-e6IsrMUG.js.map} +1 -1
- package/dist/chunks/{popover-xJJqy1v6.js → popover-CGU3MlsH.js} +14 -14
- package/dist/chunks/{popover-xJJqy1v6.js.map → popover-CGU3MlsH.js.map} +1 -1
- package/dist/chunks/radio-group-CM9Lg_nc.js.map +1 -1
- package/dist/chunks/{select-BPb-eL3O.js → select-BON0S9Dr.js} +115 -115
- package/dist/chunks/select-BON0S9Dr.js.map +1 -0
- package/dist/chunks/sortable-DcTIAbjD.js.map +1 -1
- package/dist/chunks/{table-xMAjqtcY.js → table-Dd5BcC0k.js} +3 -3
- package/dist/chunks/{table-xMAjqtcY.js.map → table-Dd5BcC0k.js.map} +1 -1
- package/dist/chunks/{table-column-interactions-BGd5Lwy9.js → table-column-interactions-DzEvVuXe.js} +8 -5
- package/dist/chunks/{table-column-interactions-BGd5Lwy9.js.map → table-column-interactions-DzEvVuXe.js.map} +1 -1
- package/dist/chunks/useODataSelectBase-CKe1AVMI.js.map +1 -1
- package/dist/chunks/wheel-picker-FS58cRsQ.js.map +1 -1
- package/dist/context-menu/index.js +1 -1
- package/dist/date-input/index.js +2 -2
- package/dist/date-time-input/index.js +4 -4
- package/dist/date-time-input/index.js.map +1 -1
- package/dist/detail/index.js.map +1 -1
- package/dist/dialog/index.js.map +1 -1
- package/dist/disclosure/index.js +1 -1
- package/dist/disclosure/index.js.map +1 -1
- package/dist/drop-zone/index.js +1 -1
- package/dist/drop-zone/index.js.map +1 -1
- package/dist/errors/index.js +1 -1
- package/dist/errors/index.js.map +1 -1
- package/dist/expandable-action-panel/index.js +2 -2
- package/dist/expandable-action-panel/index.js.map +1 -1
- package/dist/flex/index.js +1 -1
- package/dist/fullscreen-portal/index.js +3 -3
- package/dist/fullscreen-portal/index.js.map +1 -1
- package/dist/image/index.js +5 -5
- package/dist/image/index.js.map +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input-date-time/index.js +1 -1
- package/dist/input-date-time/index.js.map +1 -1
- package/dist/input-file/index.js +1 -1
- package/dist/input-file/index.js.map +1 -1
- package/dist/input-files/index.js +1 -1
- package/dist/input-image/index.js +1 -1
- package/dist/input-image/index.js.map +1 -1
- package/dist/input-search/index.js +1 -1
- package/dist/layout-picker/index.js +3 -4
- package/dist/layout-picker/index.js.map +1 -1
- package/dist/layout-picker/ui/LayoutPicker.d.ts.map +1 -1
- package/dist/list/index.js +7 -7
- package/dist/list/index.js.map +1 -1
- package/dist/listbox/index.js.map +1 -1
- package/dist/misc/index.js +1 -1
- package/dist/modal/index.js +1 -1
- package/dist/multi-select/index.js +1 -1
- package/dist/multi-select/ui/MultiSelect.d.ts.map +1 -1
- package/dist/notifications/index.js +13 -11
- package/dist/notifications/index.js.map +1 -1
- package/dist/pages/index.js.map +1 -1
- package/dist/panel/index.js.map +1 -1
- package/dist/picker/index.js +1 -1
- package/dist/picker/types.d.ts +1 -1
- package/dist/picker/types.d.ts.map +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/preset-range-date-input/index.js +2 -2
- package/dist/preset-range-date-input/index.js.map +1 -1
- package/dist/preset-select/index.js +1 -1
- package/dist/radio-button/index.js.map +1 -1
- package/dist/select/Select.d.ts.map +1 -1
- package/dist/select/index.js +1 -1
- package/dist/simple-table/index.js +1 -1
- package/dist/slider/index.js +27 -24
- package/dist/slider/index.js.map +1 -1
- package/dist/splitter/index.js.map +1 -1
- package/dist/state-select/index.js +12 -10
- package/dist/state-select/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/table/index.js +1 -1
- package/dist/table-column-interactions/index.js +1 -1
- package/dist/table-sorting/index.js +1 -1
- package/dist/table-sorting/index.js.map +1 -1
- package/dist/tabs/index.js +6 -6
- package/dist/tabs/index.js.map +1 -1
- package/dist/tag-input/index.js +1 -1
- package/dist/tag-input/index.js.map +1 -1
- package/dist/text/index.js +10 -8
- package/dist/text/index.js.map +1 -1
- package/dist/text-editor/index.js +2 -2
- package/dist/textarea/index.js +1 -1
- package/dist/textarea/index.js.map +1 -1
- package/dist/toggle/index.js.map +1 -1
- package/dist/toolbar/index.js +1 -2
- package/dist/toolbar/index.js.map +1 -1
- package/dist/tree/index.js.map +1 -1
- package/dist/tree-select/TreePickerBase.d.ts.map +1 -1
- package/dist/tree-select/index.js +134 -132
- package/dist/tree-select/index.js.map +1 -1
- package/dist/tree-table/index.js +2 -2
- package/dist/tree-table/index.js.map +1 -1
- package/package.json +52 -59
- package/storybook-static/assets/{Badge-SZ48u9qp.js → Badge-Bh73-APE.js} +11 -11
- package/storybook-static/assets/Badge.stories-gNFtCWnR.js +54 -0
- package/storybook-static/assets/{Button-CFCpYiPy.js → Button-O9QPAftp.js} +10 -10
- package/storybook-static/assets/Button-mjF9HSg0.js +12 -0
- package/storybook-static/assets/Button.stories-wkiE0c_a.js +75 -0
- package/storybook-static/assets/CalendarView-CqKlnF8k.js +1 -0
- package/storybook-static/assets/{DateInput-BfFTwd_P.css → CalendarView-DKvrkS40.css} +1 -1
- package/storybook-static/assets/{CheckBox-FoMSruZC.js → CheckBox-CB8fTQF0.js} +11 -11
- package/storybook-static/assets/CheckBox-Clpeg9q7.js +2 -0
- package/storybook-static/assets/CheckBox.module-BBzuj5He.js +1 -0
- package/storybook-static/assets/CheckBox.stories-pfWBxvOy.js +60 -0
- package/storybook-static/assets/Color-6AOWCN3U-CVvkiihj.js +1 -0
- package/storybook-static/assets/ContextMenu-Sv4wfyS3.js +1 -0
- package/storybook-static/assets/{ContextMenu-CU_1kOzV.js → ContextMenu-eGnlhRRu.js} +9 -9
- package/storybook-static/assets/ContextMenu.stories-CVw3hOvY.js +90 -0
- package/storybook-static/assets/DateInput-D8_Oleoy.js +1 -0
- package/storybook-static/assets/{DateInput-BeZ5esVE.js → DateInput-DQDplLib.js} +11 -11
- package/storybook-static/assets/DateInput-pmGiwdvw.css +1 -0
- package/storybook-static/assets/{DateInput.stories-Bkw2r8CD.js → DateInput.stories-BNpS4CND.js} +2 -2
- package/storybook-static/assets/DateRangePresetSelect-Bfx-d5qg.js +3 -0
- package/storybook-static/assets/{DateRangePresetSelect-C_mLvEoK.js → DateRangePresetSelect-DCBEf98i.js} +8 -8
- package/storybook-static/assets/DateRangePresetSelect.stories-PAV2jgQb.js +11 -0
- package/storybook-static/assets/{Detail-WzciiK9S.js → Detail-DvmdQCue.js} +11 -11
- package/storybook-static/assets/Detail.stories-CEm00aSN.js +44 -0
- package/storybook-static/assets/{Dialog-CwLsVxJY.js → Dialog-3I2Y7jD7.js} +9 -9
- package/storybook-static/assets/Dialog.stories-lcadmonM.js +31 -0
- package/storybook-static/assets/{Disclosure-BlRuGrk2.js → Disclosure-DUIQ37oh.js} +10 -10
- package/storybook-static/assets/Disclosure.stories-BeizaZWP.js +41 -0
- package/storybook-static/assets/DocsRenderer-JROSPFPF-DwPk6ai7.js +2 -0
- package/storybook-static/assets/{DropZone-Cr3nfCWA.js → DropZone-BGuCU5dq.js} +10 -10
- package/storybook-static/assets/DropZone.stories-B4J6OZ3T.js +44 -0
- package/storybook-static/assets/ExpandableActionPanel.stories-gCrqbhG6.js +20 -0
- package/storybook-static/assets/{Flex-C10912WS.js → Flex-CBwbh1yu.js} +18 -18
- package/storybook-static/assets/Flex.stories-cdk6vRZq.js +300 -0
- package/storybook-static/assets/FlexContainer-LmZIdhq2.js +1 -0
- package/storybook-static/assets/FlexItem-vkDYa5tA.js +3 -0
- package/storybook-static/assets/FloatingPopover-D4h-c24R.js +1 -0
- package/storybook-static/assets/FloatingPopover-DC84VrV3.css +1 -0
- package/storybook-static/assets/FormattedTableCell-CY3E21k8.css +1 -0
- package/storybook-static/assets/FormattedTableCell-Dh-kHTOC.js +18 -0
- package/storybook-static/assets/Grid-BCzygAqy.js +52 -0
- package/storybook-static/assets/{Grid-G88y3oB_.js → Grid-BkKqSMfk.js} +18 -18
- package/storybook-static/assets/{Grid.stories-BV7zL-6n.js → Grid.stories-828arrPi.js} +2 -2
- package/storybook-static/assets/{Grid-Bb0gH6CX.js → GridContainer-qDguE1HS.js} +2 -53
- package/storybook-static/assets/ImageCropper.stories-CrIWrKKR.js +115 -0
- package/storybook-static/assets/ImageRenderer-F3AaZx-K.js +2 -0
- package/storybook-static/assets/ImageRenderer.stories-l3PnRYxy.js +22 -0
- package/storybook-static/assets/ImageView.stories-C6uhkvCN.js +9 -0
- package/storybook-static/assets/{ImageViewer.stories-PlFXSB5n.js → ImageViewer.stories-BSPiv5lU.js} +5 -5
- package/storybook-static/assets/ImageViewerRuntime-BOpMGgz6.js +51 -0
- package/storybook-static/assets/Input-Co--DMHY.js +3 -0
- package/storybook-static/assets/{Input-pyUNDVtk.js → Input-D-ZrbHVw.js} +11 -11
- package/storybook-static/assets/Input.stories-vqPv6pLx.js +38 -0
- package/storybook-static/assets/{InputDateTime-CWk5KBwD.js → InputDateTime-DHBVbRii.js} +11 -11
- package/storybook-static/assets/InputDateTime.stories-BAvLMBuk.js +35 -0
- package/storybook-static/assets/{InputFile-BLQq7mY9.js → InputFile-B9TVOEZV.js} +10 -10
- package/storybook-static/assets/InputFile.stories-CypBLWFh.js +36 -0
- package/storybook-static/assets/{InputFiles-B6J4XBdP.js → InputFiles-CxZkOZFK.js} +10 -10
- package/storybook-static/assets/InputFiles.stories-BGwCp7OC.js +33 -0
- package/storybook-static/assets/InputFilesList-OEX4zGI3.js +1 -0
- package/storybook-static/assets/{InputImage--2PSB_E_.js → InputImage-31A6fxSf.js} +10 -10
- package/storybook-static/assets/InputImage.stories-CdpOudXI.js +51 -0
- package/storybook-static/assets/{LayoutPicker-RZDisgZ_.js → LayoutPicker-Dc55ovYM.js} +13 -13
- package/storybook-static/assets/LayoutPicker.stories-DXcn-WXQ.js +449 -0
- package/storybook-static/assets/{Listbox-xwfNjBpV.js → Listbox-DF8E6oMR.js} +10 -10
- package/storybook-static/assets/Listbox.stories-C98_9wX3.js +47 -0
- package/storybook-static/assets/{Modal-HJt_Y-a6.js → Modal-CXvDgktT.js} +12 -12
- package/storybook-static/assets/Modal.stories-DAC_QwN7.js +180 -0
- package/storybook-static/assets/MultiSelect-B-wX6JPo.js +2 -0
- package/storybook-static/assets/{MultiSelect-CvNsFdE4.js → MultiSelect-DN4foQlG.js} +11 -11
- package/storybook-static/assets/MultiSelect.stories-CgKNQmma.js +29 -0
- package/storybook-static/assets/MultiSelectToken-DDu5n78h.css +1 -0
- package/storybook-static/assets/MultiSelectToken-fjW8p4YG.js +1 -0
- package/storybook-static/assets/NoData-C7KqaHUh.css +1 -0
- package/storybook-static/assets/NoData-W7wK8oTW.js +1 -0
- package/storybook-static/assets/{NotificationsHost-DXCf3CQX.js → NotificationsHost-D1UoWmF8.js} +9 -9
- package/storybook-static/assets/NotificationsHost.stories-BWUuMmPl.js +25 -0
- package/storybook-static/assets/{ODataMultiSelect-CIJNiwGb.js → ODataMultiSelect-DE1V4el8.js} +15 -15
- package/storybook-static/assets/ODataMultiSelect.stories-Q1DUIL2W.js +73 -0
- package/storybook-static/assets/{ODataSelect-BDga9TUb.js → ODataSelect-CtoT2Wxx.js} +15 -15
- package/storybook-static/assets/ODataSelect.stories-DLi7Rwzk.js +73 -0
- package/storybook-static/assets/ODataTreeMultiSelect-DEZfgyPK.js +19 -0
- package/storybook-static/assets/ODataTreeMultiSelect.stories-H42q78xI.js +30 -0
- package/storybook-static/assets/ODataTreeSelect-BeylEiPN.js +17 -0
- package/storybook-static/assets/ODataTreeSelect.stories-MOILmtfY.js +24 -0
- package/storybook-static/assets/OneStepScroller-BSvYN6QP.js +5 -0
- package/storybook-static/assets/OneStepScroller-NRYd-egY.css +1 -0
- package/storybook-static/assets/{PeriodSelect-BJbjl62O.js → PeriodSelect-KQFGCxq6.js} +13 -13
- package/storybook-static/assets/PeriodSelect.stories-BIYx4_Yy.js +64 -0
- package/storybook-static/assets/PickerSelectionToolbar-Cvv8vTZm.js +2 -0
- package/storybook-static/assets/PickerTriggerActions-BBZmXagt.js +1 -0
- package/storybook-static/assets/{Popover-Dg2T0DoN.js → Popover-7YZIq8Fi.js} +11 -11
- package/storybook-static/assets/Popover-D6gSyjaW.js +2 -0
- package/storybook-static/assets/Popover-DGX7JNNK.css +1 -0
- package/storybook-static/assets/Popover.stories-DM69Ztws.js +69 -0
- package/storybook-static/assets/{PresetRangeDateInput-CNmTMNHF.js → PresetRangeDateInput-Ch6GapcJ.js} +8 -8
- package/storybook-static/assets/PresetRangeDateInput.stories-Cqd4eb0N.js +15 -0
- package/storybook-static/assets/PresetSelect-C8uIYhPJ.js +5 -0
- package/storybook-static/assets/{RadioButton-2rfUPkwC.js → RadioButton-BQjiyASl.js} +10 -10
- package/storybook-static/assets/RadioButton.stories-Cbho4i83.js +36 -0
- package/storybook-static/assets/RadioGroup-DNqu6WaC.js +1 -0
- package/storybook-static/assets/{RadioGroup-BduGGVKj.js → RadioGroup-vw4ObVj-.js} +10 -10
- package/storybook-static/assets/RadioGroup.stories-B-WQzZW_.js +42 -0
- package/storybook-static/assets/Scrollable-DrxMuH2M.js +1 -0
- package/storybook-static/assets/{Select-DnZ83aZs.js → Select-BxigZNtu.js} +13 -13
- package/storybook-static/assets/Select-X_O4M8Hi.js +12 -0
- package/storybook-static/assets/Select.stories-BpTrYJSr.js +46 -0
- package/storybook-static/assets/SelectOptionContent-RAmgWCOm.js +1 -0
- package/storybook-static/assets/{SerializableSelect-BiFhAxAJ.js → SerializableSelect-CA9wjk2m.js} +12 -12
- package/storybook-static/assets/SerializableSelect.stories-DXd4E-3U.js +46 -0
- package/storybook-static/assets/{SingleDateTimeInput-Bc-ifbML.js → SingleDateTimeInput-BeFLYUBF.js} +12 -12
- package/storybook-static/assets/SingleDateTimeInput.stories-B1aZ754N.js +78 -0
- package/storybook-static/assets/Slider-BYrHesOR.js +1 -0
- package/storybook-static/assets/{Slider-DfjBSsR3.js → Slider-BdWBkKp4.js} +15 -15
- package/storybook-static/assets/Slider.stories-CgmOhVBs.js +77 -0
- package/storybook-static/assets/{SliderInput-o9uCcVMP.js → SliderInput-QmF2VQWA.js} +16 -16
- package/storybook-static/assets/SliderInput.stories-MjSmhiOM.js +68 -0
- package/storybook-static/assets/{Sortable-B6Y9Q9Yn.js → Sortable-D5OTpesH.js} +13 -13
- package/storybook-static/assets/Sortable.stories-yz3c5EhY.js +141 -0
- package/storybook-static/assets/{Splitter-CfUVnAs7.js → Splitter-DVq6XBul.js} +11 -11
- package/storybook-static/assets/Splitter.stories-CopPw1_p.js +22 -0
- package/storybook-static/assets/{StateSelect-h0i4M4vO.js → StateSelect-ojwXeKmx.js} +10 -10
- package/storybook-static/assets/StateSelect.stories-D46m5HNn.js +47 -0
- package/storybook-static/assets/StringToggle.stories-ByYMmlXl.js +6 -0
- package/storybook-static/assets/{Switch-CPKaENqL.js → Switch-Dy4Pahkn.js} +10 -10
- package/storybook-static/assets/Switch.stories-EiAb5Z-D.js +26 -0
- package/storybook-static/assets/{Table-xV66crR1.js → Table-BO6Oa4JV.js} +22 -22
- package/storybook-static/assets/Table.stories--TpBKwmP.js +122 -0
- package/storybook-static/assets/{Tabs-v9YZeJoc.js → Tabs-7c93qVyH.js} +15 -15
- package/storybook-static/assets/Tabs.stories-DXZ0r2ix.js +58 -0
- package/storybook-static/assets/TagInput.stories-CoM8rXwa.js +18 -0
- package/storybook-static/assets/Text-BPlJUr3R.js +1 -0
- package/storybook-static/assets/{Textarea-CRThqX0z.js → Textarea-D3S4MkiX.js} +10 -10
- package/storybook-static/assets/Textarea.stories-47k8uHdB.js +27 -0
- package/storybook-static/assets/TimePanel-C2iZ9Qr6.js +1 -0
- package/storybook-static/assets/TimePanel.stories-JTjIv6z1.js +25 -0
- package/storybook-static/assets/{Toggle-CzopviU2.js → Toggle-CHmajZE5.js} +10 -10
- package/storybook-static/assets/Toggle-OlKw8qaK.js +1 -0
- package/storybook-static/assets/Toggle.stories-k4Z8qQVs.js +30 -0
- package/storybook-static/assets/TreeMultiSelect-BC_n1Wb-.js +1 -0
- package/storybook-static/assets/TreeMultiSelect-dOg0l7rk.js +19 -0
- package/storybook-static/assets/TreeMultiSelect.stories-CAzZRxn5.js +35 -0
- package/storybook-static/assets/TreePickerBase-ycYQYQgi.js +22 -0
- package/storybook-static/assets/TreeSelect-BrNyI_Qx.js +16 -0
- package/storybook-static/assets/TreeSelect-CDecTnag.js +1 -0
- package/storybook-static/assets/TreeSelect.stories-BUOw2Rwn.js +18 -0
- package/storybook-static/assets/{TreeTable-DbzoCcR5.js → TreeTable-BXw7lFBk.js} +22 -22
- package/storybook-static/assets/TreeTable.stories-z40pruPV.js +83 -0
- package/storybook-static/assets/WithTooltip-7X4HQR7L-Cakt_JaX.js +9 -0
- package/storybook-static/assets/array-BBSjoTRy-CIRmlF93.js +1 -0
- package/storybook-static/assets/{async-D27PcxoG.js → async-BLDV04P4.js} +3 -3
- package/storybook-static/assets/axe-Bq-2xuso.js +20 -0
- package/storybook-static/assets/blocks-BiaKjftm.js +48 -0
- package/storybook-static/assets/browserAndReact-DX4H5rjQ.js +105 -0
- package/storybook-static/assets/check-fB4gCKB_.js +1 -0
- package/storybook-static/assets/chevron-down-B9GH0QvB.js +1 -0
- package/storybook-static/assets/chevron-left-DjbyJeHO.js +1 -0
- package/storybook-static/assets/chevron-right-D29uf09I.js +1 -0
- package/storybook-static/assets/chunk-242VQQM5-BMWWiybC.js +1 -0
- package/storybook-static/assets/chunk-DRQKCCAG-CqE-Zrl9.js +1 -0
- package/storybook-static/assets/chunk-IMSF75WX-yvVUwIQZ.js +6 -0
- package/storybook-static/assets/chunk-KJHJLCBK-D-yQfkOi.js +1 -0
- package/storybook-static/assets/chunk-QQBDHPVZ-B98qboss.js +1 -0
- package/storybook-static/assets/chunk-W22LQPXL-CGkHFiZ0.js +18 -0
- package/storybook-static/assets/circle-alert-Dmd7-WNp.js +1 -0
- package/storybook-static/assets/circle-check-VtVMsaJJ.js +1 -0
- package/storybook-static/assets/components-CsfQDbHv.js +241 -0
- package/storybook-static/assets/contextMenu-CzdfaUsd.js +2 -0
- package/storybook-static/assets/date-segments-D3HouZ37.js +1 -0
- package/storybook-static/assets/dom-B3G_GtJw.js +1 -0
- package/storybook-static/assets/download-CyVhTbv6.js +1 -0
- package/storybook-static/assets/error-BZrNlEUO.js +1 -0
- package/storybook-static/assets/file-vPGnhPr-.js +1 -0
- package/storybook-static/assets/filesAndExcel-DlUnL-Uu.js +122 -0
- package/storybook-static/assets/floating-ui.react-DZ8IyUV4.js +1 -0
- package/storybook-static/assets/formatter-L2YTDE3Q-x0raBH34.js +1 -0
- package/storybook-static/assets/formatters--mhLir82-v41eaI4a.js +1 -0
- package/storybook-static/assets/formatters-BTz64vfu.js +291 -0
- package/storybook-static/assets/formatters-runtime-DVi3RdYb.js +384 -0
- package/storybook-static/assets/foundationLib-CFj4J-Pc.js +82 -0
- package/storybook-static/assets/hooks-Ch5aYb7R.js +5 -0
- package/storybook-static/assets/iframe-Cr7AcW_R.js +1 -0
- package/storybook-static/assets/iframe-DaN-XFub.js +1151 -0
- package/storybook-static/assets/info-Cirk1RKZ.js +1 -0
- package/storybook-static/assets/{matchers-JIUQ3HVY-BPS-eazD.js → matchers-JIUQ3HVY-DvR2XErZ.js} +3 -3
- package/storybook-static/assets/media-BycWpjAl.js +1 -0
- package/storybook-static/assets/odata-BtfB5Aje.js +1 -0
- package/storybook-static/assets/odata-service-DnPlNGpU-Bpd4Zh9L.js +3 -0
- package/storybook-static/assets/odataAndTables-TEZyQ-TZ.js +126 -0
- package/storybook-static/assets/{odataFetchFn-BVgXXKgx.js → odataFetchFn-DEKVPDzV.js} +3 -3
- package/storybook-static/assets/odataStoryFixtures-CDDaJZKW.js +25 -0
- package/storybook-static/assets/{persisted-D8qUQbts.js → persisted-BzLLmgUK.js} +3 -3
- package/storybook-static/assets/preload-helper-BHmFeTtP.js +1 -0
- package/storybook-static/assets/pureUtilities-Dw249t3R.js +69 -0
- package/storybook-static/assets/react-18-CgkwBzTo.js +9 -0
- package/storybook-static/assets/react-C21x__mS.js +1 -0
- package/storybook-static/assets/react-CvkUhHUq.js +1 -0
- package/storybook-static/assets/react-KzpmXJc9.js +9 -0
- package/storybook-static/assets/react-dom-2o2phaJG.js +1 -0
- package/storybook-static/assets/react-qN2cStNd.js +1 -0
- package/storybook-static/assets/refresh-cw-BN3JCsXv.js +1 -0
- package/storybook-static/assets/rolldown-runtime-C0FnF6B9.js +1 -0
- package/storybook-static/assets/runtimeAndState-CCVgv3ck.js +117 -0
- package/storybook-static/assets/settings-2-jtcbbWm5.js +1 -0
- package/storybook-static/assets/sortable-dNWaObUX.js +1 -0
- package/storybook-static/assets/syntaxhighlighter-T5IQBZDB-hYwVxXYm.js +6 -0
- package/storybook-static/assets/theming-mTWhffkp.js +39 -0
- package/storybook-static/assets/trash-2-DrVfT0z5.js +1 -0
- package/storybook-static/assets/treeStoryFixtures-Ci7STpiz.js +1 -0
- package/storybook-static/assets/triangle-alert-B1Q28Bq9.js +1 -0
- package/storybook-static/assets/ui.module-DoMIk8Oc.js +1 -0
- package/storybook-static/assets/uiClasses-CO3Cdv1E.js +1 -0
- package/storybook-static/assets/useFlexClasses-Gn9spXEB.js +1 -0
- package/storybook-static/assets/useODataSelectBase-DlbeGYUP.js +1 -0
- package/storybook-static/assets/useODataTreeData-CvsoLfiG.js +1 -0
- package/storybook-static/assets/usePickerDefaultFilter-DdxyE_i8.js +1 -0
- package/storybook-static/assets/usePickerQuery-6rDaPaB0.js +1 -0
- package/storybook-static/assets/usePickerTriggerController-BHBjSLtn.js +1 -0
- package/storybook-static/assets/utils-DUM89eIj.js +1 -0
- package/storybook-static/assets/x-Dh43gJN9.js +1 -0
- package/storybook-static/iframe.html +8 -3
- package/storybook-static/index.html +6 -0
- package/storybook-static/index.json +1 -1
- package/storybook-static/project.json +1 -1
- package/storybook-static/sb-addons/a11y-3/manager-bundle.js +3 -3
- package/storybook-static/sb-addons/chromatic-com-storybook-1/manager-bundle.js +17 -17
- package/storybook-static/sb-addons/docs-2/manager-bundle.js +16 -1
- package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +85 -83
- package/storybook-static/sb-addons/vitest-4/manager-bundle.js +1 -1
- package/storybook-static/sb-manager/globals-runtime.js +9939 -7695
- package/storybook-static/sb-manager/runtime.js +16128 -15326
- package/storybook-static/vite-inject-mocker-entry.js +2 -2
- package/dist/chunks/multi-select-CWx12rgb.js.map +0 -1
- package/dist/chunks/select-BPb-eL3O.js.map +0 -1
- package/storybook-static/assets/Badge.stories-CzsgAfG9.js +0 -51
- package/storybook-static/assets/Button-MoWVKehO.js +0 -12
- package/storybook-static/assets/Button.stories-wwep4c2p.js +0 -75
- package/storybook-static/assets/CheckBox-DHvne_6w.js +0 -2
- package/storybook-static/assets/CheckBox.module-ezWPE2pa.js +0 -1
- package/storybook-static/assets/CheckBox.stories-C14Axs5p.js +0 -60
- package/storybook-static/assets/Color-KMSTOMOX-CmMBFN4-.js +0 -1
- package/storybook-static/assets/ContextMenu.stories-Dr-tkpqd.js +0 -90
- package/storybook-static/assets/DateInput-erobPRG_.js +0 -1
- package/storybook-static/assets/DateRangePresetSelect-Cg90Kc_w.js +0 -3
- package/storybook-static/assets/DateRangePresetSelect.stories-BVap0joC.js +0 -11
- package/storybook-static/assets/Detail.stories-CLdtvJ7q.js +0 -44
- package/storybook-static/assets/Dialog.stories-Dx0jZO19.js +0 -31
- package/storybook-static/assets/Disclosure.stories-DhUdeDK6.js +0 -41
- package/storybook-static/assets/DocsRenderer-JROSPFPF-Dd1n83Uq.js +0 -2
- package/storybook-static/assets/DropZone.stories-6yYrwQOe.js +0 -44
- package/storybook-static/assets/DropdownMenu-D_2LfViU.js +0 -1
- package/storybook-static/assets/ExpandableActionPanel.stories-DVOFSOlm.js +0 -20
- package/storybook-static/assets/Flex-V-qg6Ejw.js +0 -3
- package/storybook-static/assets/Flex.stories-BZv94LD8.js +0 -300
- package/storybook-static/assets/ImageCropper.stories-MLFZyJxZ.js +0 -115
- package/storybook-static/assets/ImageRenderer-DHhD7mUz.js +0 -2
- package/storybook-static/assets/ImageRenderer.stories-ChcPymk2.js +0 -22
- package/storybook-static/assets/ImageView.stories-DszVNgC8.js +0 -9
- package/storybook-static/assets/ImageViewerRuntime-D8wFAKx5.js +0 -51
- package/storybook-static/assets/Input-BGdz8TmT.js +0 -3
- package/storybook-static/assets/Input.stories-Ban0Gnck.js +0 -38
- package/storybook-static/assets/InputDateTime.stories-DgKVmf54.js +0 -35
- package/storybook-static/assets/InputFile.stories-VnRv_q2r.js +0 -36
- package/storybook-static/assets/InputFiles-Dn9afnyd.js +0 -1
- package/storybook-static/assets/InputFiles.stories-CLVn5Xfq.js +0 -33
- package/storybook-static/assets/InputImage.stories-D__QcSho.js +0 -51
- package/storybook-static/assets/LayoutPicker.stories-BCnR-zBu.js +0 -449
- package/storybook-static/assets/Listbox.stories-B0HctqVp.js +0 -47
- package/storybook-static/assets/Modal.stories-BE-VpK-a.js +0 -180
- package/storybook-static/assets/MultiSelect-BoIwmje6.css +0 -1
- package/storybook-static/assets/MultiSelect-CaCNRNIe.js +0 -2
- package/storybook-static/assets/MultiSelect.stories-CNkbVGsb.js +0 -29
- package/storybook-static/assets/NotificationsHost.stories-BgqvZzT3.js +0 -25
- package/storybook-static/assets/ODataMultiSelect-CMyI4yYs.js +0 -1
- package/storybook-static/assets/ODataMultiSelect.stories-DTGCC6np.js +0 -73
- package/storybook-static/assets/ODataSelect-CGplYBh_.js +0 -1
- package/storybook-static/assets/ODataSelect.stories-CsxqRAvn.js +0 -73
- package/storybook-static/assets/ODataTreeMultiSelect-4ZiAtFZk.js +0 -19
- package/storybook-static/assets/ODataTreeMultiSelect.stories-B29Od8BL.js +0 -30
- package/storybook-static/assets/ODataTreeSelect-yZy7MBsZ.js +0 -17
- package/storybook-static/assets/ODataTreeSelect.stories-H7eaj1Sz.js +0 -24
- package/storybook-static/assets/PeriodSelect.stories-6CEzS2_H.js +0 -64
- package/storybook-static/assets/Popover.stories-BNgWOHlJ.js +0 -69
- package/storybook-static/assets/PresetRangeDateInput.stories-6UPVDF62.js +0 -15
- package/storybook-static/assets/RadioButton.stories-DbdFfJqO.js +0 -36
- package/storybook-static/assets/RadioGroup-BA21indC.js +0 -1
- package/storybook-static/assets/RadioGroup.stories-Ce6x0WUN.js +0 -42
- package/storybook-static/assets/Select-DyO25wSA.js +0 -12
- package/storybook-static/assets/Select.stories-CQ8f9fY9.js +0 -46
- package/storybook-static/assets/SelectOptionContent-fC4HFG5Q.js +0 -1
- package/storybook-static/assets/SerializableSelect-ki4BThj7.js +0 -4
- package/storybook-static/assets/SerializableSelect.stories-BzXBkWPI.js +0 -43
- package/storybook-static/assets/SingleDateTimeInput.stories-CI2yrD-f.js +0 -78
- package/storybook-static/assets/Slider.stories-D3O3_tqE.js +0 -77
- package/storybook-static/assets/SliderInput.stories-D1puleZB.js +0 -67
- package/storybook-static/assets/Sortable.stories-BoaL4W6r.js +0 -141
- package/storybook-static/assets/Splitter.stories-DJpFzZVJ.js +0 -22
- package/storybook-static/assets/StateSelect.stories-Ch2Gzzmd.js +0 -47
- package/storybook-static/assets/StringToggle.stories-B8qIG0M3.js +0 -6
- package/storybook-static/assets/Switch.stories-BysIhUHa.js +0 -26
- package/storybook-static/assets/Table.stories-CBpgmq7b.js +0 -122
- package/storybook-static/assets/Tabs.stories-BPYZuvzR.js +0 -58
- package/storybook-static/assets/TagInput.stories-BwOEnVpz.js +0 -18
- package/storybook-static/assets/Textarea.stories-BSJGz7JF.js +0 -27
- package/storybook-static/assets/TimePanel-ClMfq_py.js +0 -1
- package/storybook-static/assets/TimePanel.stories-_FqWdmta.js +0 -25
- package/storybook-static/assets/Toggle-BFhzeK2e.js +0 -1
- package/storybook-static/assets/Toggle.stories-Dw5UkD_b.js +0 -30
- package/storybook-static/assets/TreeMultiSelect-CerqHY2K.js +0 -19
- package/storybook-static/assets/TreeMultiSelect-Dw7FI3ic.js +0 -1
- package/storybook-static/assets/TreeMultiSelect.stories-BTQKFbeP.js +0 -35
- package/storybook-static/assets/TreePickerBase-rJISGJBT.js +0 -22
- package/storybook-static/assets/TreeSelect-CQ1vj_c9.js +0 -16
- package/storybook-static/assets/TreeSelect-Cp_lX0-B.js +0 -1
- package/storybook-static/assets/TreeSelect.stories-D6Q02Phx.js +0 -18
- package/storybook-static/assets/TreeTable.stories-YfyhkqH9.js +0 -83
- package/storybook-static/assets/WithTooltip-7X4HQR7L-BSQyvCOM.js +0 -9
- package/storybook-static/assets/axe-GLfyhAYL.js +0 -20
- package/storybook-static/assets/base-table-BNO0lnTL.css +0 -1
- package/storybook-static/assets/base-table-Dy3fEhQe.js +0 -18
- package/storybook-static/assets/blocks-ixiC6_NZ.js +0 -285
- package/storybook-static/assets/button-DZpTIXz2.js +0 -1
- package/storybook-static/assets/check-box-DByHwJGx.js +0 -1
- package/storybook-static/assets/chunk-242VQQM5-Dtm7LRbQ.js +0 -1
- package/storybook-static/assets/chunk-3LY4VQVK-BohfESrT.js +0 -6
- package/storybook-static/assets/chunk-LITCR56V-XaMGADKk.js +0 -18
- package/storybook-static/assets/contextMenu-BbMrBF3b.js +0 -2
- package/storybook-static/assets/date-7kR6zFX5.js +0 -461
- package/storybook-static/assets/date-segments-CzU9k5bl.js +0 -1
- package/storybook-static/assets/error-BRUjWXbJ.js +0 -1
- package/storybook-static/assets/file-CI_sonB1.js +0 -291
- package/storybook-static/assets/file-hArYcyES.js +0 -1
- package/storybook-static/assets/flex-C--89Z3g.js +0 -1
- package/storybook-static/assets/floating-ui.react-DLXcGGFR.js +0 -1
- package/storybook-static/assets/formatter-L2YTDE3Q-DgyzUf7M.js +0 -1
- package/storybook-static/assets/formatters-BtIOYENB.js +0 -3
- package/storybook-static/assets/formulas-DRh9I2eS.js +0 -2
- package/storybook-static/assets/grid-DLxeTZJe.js +0 -1
- package/storybook-static/assets/hooks-DWeJq8G1.js +0 -5
- package/storybook-static/assets/iframe-BJGIOdSH.js +0 -1119
- package/storybook-static/assets/input-DXi75xv1.js +0 -1
- package/storybook-static/assets/mdx-react-shim-CmoAsjhK.js +0 -1
- package/storybook-static/assets/media-DWFaNgLM.js +0 -1
- package/storybook-static/assets/misc-BElIqBdV.css +0 -1
- package/storybook-static/assets/misc-DNZTbWc6.js +0 -5
- package/storybook-static/assets/notifications-DjtgzFqT.js +0 -1
- package/storybook-static/assets/number-Xkw1yPJo.js +0 -2
- package/storybook-static/assets/odata-C4Liwkjx.js +0 -1
- package/storybook-static/assets/odata-service-C2oJ-ZmZ.js +0 -1
- package/storybook-static/assets/odataStoryFixtures-eEGvvtmw.js +0 -25
- package/storybook-static/assets/picker-DsP4xCcJ.js +0 -2
- package/storybook-static/assets/popover-BiQHI7Wi.css +0 -1
- package/storybook-static/assets/popover-CuFTypCp.js +0 -2
- package/storybook-static/assets/preload-helper-B45gAKPr.js +0 -1
- package/storybook-static/assets/preset-select-SPNHA-mp.js +0 -5
- package/storybook-static/assets/pwa-B7uYfAPd.js +0 -640
- package/storybook-static/assets/queryClient-CA0puYc0.js +0 -567
- package/storybook-static/assets/react-18-CaNSmcD-.js +0 -9
- package/storybook-static/assets/react-3qMIUlAf.js +0 -9
- package/storybook-static/assets/react-dom-BC7xZNHy.js +0 -1
- package/storybook-static/assets/select-sUla5-3b.js +0 -1
- package/storybook-static/assets/slider--Yp_sa_W.js +0 -2
- package/storybook-static/assets/sortable-jALaQqYE.js +0 -1
- package/storybook-static/assets/syntaxhighlighter-RTCFPKCB-u_WDwfDn.js +0 -6
- package/storybook-static/assets/text-D5xgciF8.js +0 -4
- package/storybook-static/assets/theming-oB64gsjY.js +0 -39
- package/storybook-static/assets/treeStoryFixtures-Y_nnjz0_.js +0 -1
- package/storybook-static/assets/ui-DWDaBPQx.js +0 -1
- package/storybook-static/assets/ui.module-wFHXkJzp.js +0 -1
- package/storybook-static/assets/uiClasses-CaHp0EWd.js +0 -1
- package/storybook-static/assets/useODataSelectBase-DjlPxmxr.js +0 -1
- package/storybook-static/assets/useODataTreeData-1W6cbuec.js +0 -1
- package/storybook-static/assets/utils-DzbSigQl.js +0 -1
- package/storybook-static/assets/valueState-GnkKWBTr.js +0 -277
- /package/storybook-static/assets/{DropdownMenu-BgzIzwzM.css → ContextMenu-BgzIzwzM.css} +0 -0
- /package/storybook-static/assets/{Grid-K9R_IHaw.css → GridContainer-K9R_IHaw.css} +0 -0
- /package/storybook-static/assets/{InputFiles-ByK52qUe.css → InputFilesList-ByK52qUe.css} +0 -0
- /package/storybook-static/assets/{slider-DMDFRH6B.css → Slider-DMDFRH6B.css} +0 -0
- /package/storybook-static/assets/{Flex-IXK2se1Y.css → useFlexClasses-IXK2se1Y.css} +0 -0
- /package/storybook-static/assets/{picker-DzBkX15M.css → usePickerTriggerController-DzBkX15M.css} +0 -0
package/dist/tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/tabs/lib/tabs.ts","../../src/tabs/model/useTabsState.ts","../../src/tabs/ui/Tabs.module.scss","../../src/tabs/ui/TabsLoadingState.tsx","../../src/tabs/ui/TabsNoDataState.tsx","../../src/tabs/ui/TabsPanel.tsx","../../src/tabs/ui/TabsTabList.tsx","../../src/tabs/ui/TabsBox.tsx","../../src/tabs/ui/Tabs.tsx","../../src/tabs/ui/TabsLayout.tsx"],"sourcesContent":["import type { TabsDescriptor, TabsMountStrategy } from \"../model/types\";\n\n/**\n * Возвращает идентификатор первой доступной вкладки.\n */\nexport function getFirstEnabledTabId(items: TabsDescriptor[]) {\n\treturn items.find((item) => !item.disabled)?.id ?? null;\n}\n\n/**\n * Возвращает безопасный идентификатор вкладки.\n * Если переданный `candidate` недоступен, выбирается первая доступная вкладка.\n */\nexport function getSafeTabId(items: TabsDescriptor[], candidate: string | undefined | null) {\n\tif (!candidate) {\n\t\treturn getFirstEnabledTabId(items);\n\t}\n\n\tconst matchedItem = items.find((item) => item.id === candidate && !item.disabled);\n\treturn matchedItem?.id ?? getFirstEnabledTabId(items);\n}\n\n/**\n * Возвращает только доступные вкладки для roving focus и клавиатурной навигации.\n */\nexport function getEnabledTabs(items: TabsDescriptor[]) {\n\treturn items.filter((item) => !item.disabled);\n}\n\ninterface ShouldMountTabPanelOptions {\n\tmountStrategy: TabsMountStrategy;\n\tisSelected: boolean;\n\tisVisited: boolean;\n}\n\n/**\n * Определяет, должна ли панель оставаться смонтированной с учётом стратегии монтирования.\n */\nexport function shouldMountTabPanel({ mountStrategy, isSelected, isVisited }: ShouldMountTabPanelOptions) {\n\treturn mountStrategy === \"keep-mounted\" || isSelected || (mountStrategy === \"lazy\" && isVisited);\n}\n","import type React from \"react\";\nimport { FocusEvent, KeyboardEvent, useId, useMemo, useRef, useState } from \"react\";\n\nimport { getRovingFocusTargetIndex } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { getEnabledTabs, getSafeTabId } from \"../lib/tabs\";\n\nimport type { TabsActivationMode, TabsDescriptor, TabsOrientation } from \"./types\";\n\ninterface UseTabsStateOptions {\n\titems: TabsDescriptor[];\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\torientation?: TabsOrientation;\n\tactivationMode?: TabsActivationMode;\n\tloop?: boolean;\n}\n\n/**\n * Публичная часть модели, необходимая визуальным подкомпонентам tabs.\n */\nexport interface TabsStateModel {\n\tactivationMode: TabsActivationMode;\n\torientation: TabsOrientation;\n\tselectedTabId: string | null;\n\ttabbableTabId: string | null;\n\tonTabListKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;\n\tonTabListBlur: (event: FocusEvent<HTMLDivElement>) => void;\n\tgetTabElementId: (tabId: string) => string;\n\tgetPanelElementId: (tabId: string) => string;\n\tgetTabButtonProps: (item: TabsDescriptor) => React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\t\tref: (node: HTMLButtonElement | null) => void;\n\t};\n\tisVisited: (tabId: string) => boolean;\n}\n\n/**\n * Инкапсулирует state, a11y-связки и клавиатурную навигацию для всех оболочек tabs.\n */\nexport function useTabsState({\n\titems,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\torientation = \"horizontal\",\n\tactivationMode = \"automatic\",\n\tloop = true\n}: UseTabsStateOptions): TabsStateModel {\n\tconst isControlled = value !== undefined;\n\tconst enabledTabs = useMemo(() => getEnabledTabs(items), [items]);\n\tconst fallbackTabId = enabledTabs[0]?.id ?? null;\n\tconst [internalValue, setInternalValue] = useState(() => getSafeTabId(items, defaultValue));\n\tconst [focusedTabId, setFocusedTabId] = useState<string | null>(() => getSafeTabId(items, value ?? defaultValue));\n\tconst initialVisitedTabId = getSafeTabId(items, value ?? defaultValue);\n\tconst [visitedTabsState, setVisitedTabsState] = useState<Set<string>>(() =>\n\t\tinitialVisitedTabId ? new Set([initialVisitedTabId]) : new Set()\n\t);\n\tconst tabsId = useId();\n\tconst tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n\tconst selectedTabId = getSafeTabId(items, isControlled ? value : internalValue);\n\tconst nextTabbableTabId = getSafeTabId(items, focusedTabId) ?? selectedTabId ?? fallbackTabId;\n\tconst visitedTabs = useMemo(() => {\n\t\tif (!selectedTabId || visitedTabsState.has(selectedTabId)) {\n\t\t\treturn visitedTabsState;\n\t\t}\n\n\t\tconst next = new Set(visitedTabsState);\n\t\tnext.add(selectedTabId);\n\t\treturn next;\n\t}, [selectedTabId, visitedTabsState]);\n\n\tconst activateTab = (nextTabId: string) => {\n\t\tconst safeNextTabId = getSafeTabId(items, nextTabId);\n\t\tif (!safeNextTabId) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetVisitedTabsState((prev) => {\n\t\t\tif (prev.has(safeNextTabId)) {\n\t\t\t\treturn prev;\n\t\t\t}\n\n\t\t\tconst next = new Set(prev);\n\t\t\tnext.add(safeNextTabId);\n\t\t\treturn next;\n\t\t});\n\n\t\tif (!isControlled) {\n\t\t\tsetInternalValue(safeNextTabId);\n\t\t}\n\n\t\tonValueChange?.(safeNextTabId);\n\t};\n\n\tconst focusTab = (nextTabId: string) => {\n\t\ttabRefs.current[nextTabId]?.focus();\n\t};\n\n\tconst onTabListKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n\t\tif (enabledTabs.length < 2) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeFocusIndex = Math.max(\n\t\t\t0,\n\t\t\tenabledTabs.findIndex((item) => item.id === (nextTabbableTabId ?? selectedTabId ?? fallbackTabId))\n\t\t);\n\t\tconst nextEnabledIndex = getRovingFocusTargetIndex({\n\t\t\tcurrentIndex: activeFocusIndex,\n\t\t\titemCount: enabledTabs.length,\n\t\t\tkey: event.key,\n\t\t\torientation,\n\t\t\twrap: loop\n\t\t});\n\n\t\tif (nextEnabledIndex === null) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\n\t\tconst nextTabId = enabledTabs[nextEnabledIndex]?.id;\n\t\tif (!nextTabId) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocusedTabId(nextTabId);\n\t\tfocusTab(nextTabId);\n\n\t\tif (activationMode === \"automatic\") {\n\t\t\tactivateTab(nextTabId);\n\t\t}\n\t};\n\n\tconst onTabListBlur = (event: FocusEvent<HTMLDivElement>) => {\n\t\tconst nextTarget = event.relatedTarget;\n\n\t\tif (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocusedTabId(selectedTabId ?? fallbackTabId);\n\t};\n\n\tconst getTabElementId = (tabId: string) => `${tabsId}-tab-${tabId}`;\n\tconst getPanelElementId = (tabId: string) => `${tabsId}-panel-${tabId}`;\n\n\tconst getTabButtonProps = (item: TabsDescriptor) => {\n\t\tconst isSelected = item.id === selectedTabId;\n\t\tconst isTabbable = item.id === nextTabbableTabId;\n\n\t\treturn {\n\t\t\tref: (node: HTMLButtonElement | null) => {\n\t\t\t\ttabRefs.current[item.id] = node;\n\t\t\t},\n\t\t\ttype: \"button\" as const,\n\t\t\trole: \"tab\" as const,\n\t\t\tid: getTabElementId(item.id),\n\t\t\tdisabled: item.disabled,\n\t\t\t\"aria-selected\": isSelected,\n\t\t\t\"aria-controls\": getPanelElementId(item.id),\n\t\t\t\"aria-disabled\": item.disabled || undefined,\n\t\t\ttabIndex: item.disabled ? -1 : isTabbable ? 0 : -1,\n\t\t\tonFocus: () => setFocusedTabId(item.id),\n\t\t\tonClick: () => activateTab(item.id)\n\t\t};\n\t};\n\n\treturn {\n\t\tactivationMode,\n\t\torientation,\n\t\tselectedTabId,\n\t\ttabbableTabId: nextTabbableTabId,\n\t\tonTabListKeyDown,\n\t\tonTabListBlur,\n\t\tgetTabElementId,\n\t\tgetPanelElementId,\n\t\tgetTabButtonProps,\n\t\tisVisited: (tabId: string) => visitedTabs.has(tabId)\n\t};\n}\n",".tabsContainer {\n\t--tabs-border: none;\n\t--tabs-panel-border: none;\n\t--tabs-panel-padding: var(--space-md);\n\t--tabs-panel-bg: var(--surface-1);\n\n\tdisplay: grid;\n\tgap: var(--space-sm);\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.bordered {\n\t--tabs-border: var(--border);\n\t--tabs-panel-border: var(--border);\n}\n\n.cleanPanel {\n\t--tabs-panel-padding: 0;\n\t--tabs-panel-bg: none;\n\t--tabs-panel-border: none;\n}\n\n.tabs {\n\tdisplay: flex;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n\n\tborder: var(--tabs-border);\n\tbackground-color: var(--surface-1);\n\tpadding: var(--space-xs);\n}\n\n.panels {\n\tmin-width: 0;\n\tmin-height: 0;\n\tborder: var(--tabs-panel-border);\n\tbackground-color: var(--tabs-panel-bg);\n}\n\n.tabs,\n.panels {\n\tborder-radius: var(--radius-sm);\n}\n\n.horizontal {\n\tgrid-template-rows: auto minmax(0, 1fr);\n\n\t// .tabs {\n\t// \tflex-wrap: wrap;\n\t// }\n}\n\n.vertical {\n\tgrid-template-columns: 10em minmax(0, 1fr);\n\tmin-height: 0;\n\n\t.tabs {\n\t\tflex-direction: column;\n\t}\n}\n\n.panelScrollable {\n\toverflow: auto;\n}\n\n.tab {\n\ttext-align: left;\n\n\tposition: relative;\n\tmin-height: var(--control-height);\n\tpadding: var(--space-xs) var(--space-md);\n\tcolor: var(--content-2);\n\tborder-radius: var(--radius-sm);\n\tfont-weight: 700;\n\tfont-variation-settings: \"wght\" 700;\n\n\tflex-shrink: 0;\n\n\t&:hover {\n\t\tcursor: pointer;\n\t\tcolor: var(--content-accent);\n\t\t// background-color: var(--surface-accent);\n\t}\n\n\t&.selected {\n\t\tcolor: var(--status-neutral-on-fill);\n\t\tbackground-color: var(--status-neutral-fill);\n\t\tborder-color: var(--border-0);\n\n\t\tbox-shadow: var(--shadow-xs);\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\tcolor: var(--content-2);\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.panel {\n\tpadding: 0;\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n}\n\n.panelBody {\n\tmin-width: 0;\n\tmin-height: 0;\n\n\theight: 100%;\n\tpadding: var(--tabs-panel-padding);\n}\n\n.layoutPanels {\n\toverflow: hidden;\n}\n\n.layoutPanel {\n\tdisplay: grid;\n\tgap: var(--space-md);\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\tpadding: var(--tabs-panel-padding);\n}\n\n.layoutSection {\n\tmin-width: 0;\n}\n\n.layoutContent {\n\tmin-height: 0;\n}\n","import { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { LoadingMessage } from \"../../misc\";\n\nimport styles from \"./Tabs.module.scss\";\n\ninterface TabsLoadingStateProps {\n\tcontainerClassName: string;\n\ttabListClassName: string;\n\tpanelsClassName: string;\n\tpanelClassName: string;\n\tpanelBodyClassName: string;\n\tloadingText?: string;\n}\n\n/**\n * Служебное loading-состояние для `TabsBox`.\n */\nexport function TabsLoadingState({\n\tcontainerClassName,\n\ttabListClassName,\n\tpanelsClassName,\n\tpanelClassName,\n\tpanelBodyClassName,\n\tloadingText\n}: TabsLoadingStateProps) {\n\treturn (\n\t\t<div className={containerClassName}>\n\t\t\t<div className={tabListClassName} aria-hidden=\"true\">\n\t\t\t\t<button type=\"button\" disabled data-disabled=\"\" className={cn(styles.tab, \"skeletonLine\")}>\n\t\t\t\t\tЗагрузка...\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div className={panelsClassName} aria-busy=\"true\">\n\t\t\t\t<div className={panelClassName}>\n\t\t\t\t\t<div className={panelBodyClassName}>\n\t\t\t\t\t\t<LoadingMessage text={loadingText} className=\"radiusSm\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","import { NoData } from \"../../misc\";\n\ninterface TabsNoDataStateProps {\n\tcontainerClassName: string;\n\tpanelsClassName: string;\n\tpanelClassName: string;\n\tpanelBodyClassName: string;\n}\n\n/**\n * Служебное empty-состояние для `TabsBox`.\n */\nexport function TabsNoDataState({ containerClassName, panelsClassName, panelClassName, panelBodyClassName }: TabsNoDataStateProps) {\n\treturn (\n\t\t<div className={containerClassName}>\n\t\t\t<div className={panelsClassName}>\n\t\t\t\t<div className={panelClassName}>\n\t\t\t\t\t<div className={panelBodyClassName}>\n\t\t\t\t\t\t<NoData className=\"radiusSm\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","import React from \"react\";\n\n/**\n * Унифицированная ARIA-обёртка для содержимого активной панели tabs.\n */\ninterface TabsPanelProps {\n\ttabId: string;\n\tisSelected: boolean;\n\tclassName?: string;\n\tgetTabElementId: (tabId: string) => string;\n\tgetPanelElementId: (tabId: string) => string;\n\tchildren: React.ReactNode;\n}\n\nexport function TabsPanel({ tabId, isSelected, className, getTabElementId, getPanelElementId, children }: TabsPanelProps) {\n\treturn (\n\t\t<div\n\t\t\trole=\"tabpanel\"\n\t\t\tid={getPanelElementId(tabId)}\n\t\t\taria-labelledby={getTabElementId(tabId)}\n\t\t\thidden={!isSelected}\n\t\t\tclassName={className}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n","import { ReactNode } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { OneStepScroller } from \"../../misc\";\n\nimport styles from \"./Tabs.module.scss\";\n\nimport type { TabsDescriptor } from \"../model/types\";\nimport type { TabsStateModel } from \"../model/useTabsState\";\n\n/**\n * Рендерит tablist и кнопки вкладок поверх общей модели tabs.\n */\ninterface TabsTabListProps {\n\titems: TabsDescriptor[];\n\tstate: TabsStateModel;\n\tclassName?: string;\n\tariaLabel?: string;\n\tariaLabelledBy?: string;\n}\n\nexport function TabsTabList({ items, state, className, ariaLabel, ariaLabelledBy }: TabsTabListProps) {\n\tconst wrapItems = (children: ReactNode) => {\n\t\tif (state.orientation === \"horizontal\") {\n\t\t\treturn <OneStepScroller>{children}</OneStepScroller>;\n\t\t}\n\n\t\treturn <>{children}</>;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={className}\n\t\t\trole=\"tablist\"\n\t\t\taria-orientation={state.orientation}\n\t\t\taria-label={ariaLabel}\n\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\tonKeyDown={state.onTabListKeyDown}\n\t\t\tonBlur={state.onTabListBlur}>\n\t\t\t{wrapItems(\n\t\t\t\titems.map((item) => (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t{...state.getTabButtonProps(item)}\n\t\t\t\t\t\tdata-ui=\"tabs-tab\"\n\t\t\t\t\t\tdata-action=\"select-tab\"\n\t\t\t\t\t\tclassName={cn(styles.tab, \"textWrap\", item.id === state.selectedTabId && styles.selected)}>\n\t\t\t\t\t\t{item.title}\n\t\t\t\t\t</button>\n\t\t\t\t))\n\t\t\t)}\n\t\t</div>\n\t);\n}\n","import { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { shouldMountTabPanel } from \"../lib/tabs\";\nimport { TabsBoxProps } from \"../model/types\";\nimport { useTabsState } from \"../model/useTabsState\";\n\nimport styles from \"./Tabs.module.scss\";\nimport { TabsLoadingState } from \"./TabsLoadingState\";\nimport { TabsNoDataState } from \"./TabsNoDataState\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport { TabsTabList } from \"./TabsTabList\";\n\n/**\n * Простой items-based tabs-компонент.\n * Сам управляет областью панели и её прокруткой.\n */\nexport function TabsBox({\n\titems,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tclassName,\n\tisLoading,\n\tloadingText,\n\tcleanPanel,\n\tbordered = false,\n\torientation = \"horizontal\",\n\tactivationMode = \"automatic\",\n\tmountStrategy = \"unmount\",\n\tloop = true,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy\n}: TabsBoxProps) {\n\tconst state = useTabsState({\n\t\titems,\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\torientation,\n\t\tactivationMode,\n\t\tloop\n\t});\n\n\tconst rootClassName = cn(\n\t\tstyles.tabsContainer,\n\t\tstyles[orientation],\n\t\tbordered && styles.bordered,\n\t\tcleanPanel && styles.cleanPanel,\n\t\tclassName\n\t);\n\tconst tabListClassName = styles.tabs;\n\tconst panelsClassName = cn(styles.panels, styles.panelScrollable, \"scrollable overscroll\");\n\tconst panelClassName = styles.panel;\n\tconst panelBodyClassName = styles.panelBody;\n\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<TabsLoadingState\n\t\t\t\tcontainerClassName={rootClassName}\n\t\t\t\ttabListClassName={tabListClassName}\n\t\t\t\tpanelsClassName={panelsClassName}\n\t\t\t\tpanelClassName={panelClassName}\n\t\t\t\tpanelBodyClassName={panelBodyClassName}\n\t\t\t\tloadingText={loadingText}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (!items.length) {\n\t\treturn (\n\t\t\t<TabsNoDataState\n\t\t\t\tcontainerClassName={rootClassName}\n\t\t\t\tpanelsClassName={panelsClassName}\n\t\t\t\tpanelClassName={panelClassName}\n\t\t\t\tpanelBodyClassName={panelBodyClassName}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={rootClassName}>\n\t\t\t<TabsTabList items={items} state={state} className={tabListClassName} ariaLabel={ariaLabel} ariaLabelledBy={ariaLabelledBy} />\n\n\t\t\t<div className={panelsClassName}>\n\t\t\t\t{items.map((item) => {\n\t\t\t\t\tconst isSelected = item.id === state.selectedTabId;\n\t\t\t\t\tconst isMounted = shouldMountTabPanel({\n\t\t\t\t\t\tmountStrategy,\n\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\tisVisited: state.isVisited(item.id)\n\t\t\t\t\t});\n\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TabsPanel\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\ttabId={item.id}\n\t\t\t\t\t\t\tisSelected={isSelected}\n\t\t\t\t\t\t\tclassName={panelClassName}\n\t\t\t\t\t\t\tgetTabElementId={state.getTabElementId}\n\t\t\t\t\t\t\tgetPanelElementId={state.getPanelElementId}>\n\t\t\t\t\t\t\t<div className={panelBodyClassName}>{item.content}</div>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","import { TabsBox } from \"./TabsBox\";\n\nimport type { TabsBoxItem, TabsBoxProps } from \"../model/types\";\n\n/**\n * Элемент вкладки для устаревшего совместимого API `Tabs`.\n */\nexport type TabsItem = TabsBoxItem;\n\n/**\n * @deprecated Используйте `TabsBox` для простого сценария и `TabsLayout` для составных layout-сценариев.\n */\nexport interface TabsProps extends TabsBoxProps {\n\tonChange?: (value: string) => void;\n}\n\n/**\n * @deprecated Используйте `TabsBox` для простого сценария и `TabsLayout` для составных layout-сценариев.\n */\nexport function Tabs({ onChange, onValueChange, ...props }: TabsProps) {\n\treturn (\n\t\t<TabsBox\n\t\t\t{...props}\n\t\t\tonValueChange={(nextValue) => {\n\t\t\t\tonValueChange?.(nextValue);\n\t\t\t\tonChange?.(nextValue);\n\t\t\t}}\n\t\t/>\n\t);\n}\n","/* eslint-disable react-refresh/only-export-components */\nimport React, { Children, isValidElement, useMemo } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { shouldMountTabPanel } from \"../lib/tabs\";\nimport { useTabsState } from \"../model/useTabsState\";\n\nimport styles from \"./Tabs.module.scss\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport { TabsTabList } from \"./TabsTabList\";\n\nimport type { TabsDescriptor, TabsLayoutProps, TabsLayoutSectionProps, TabsLayoutTabProps } from \"../model/types\";\n\ninterface ParsedTabsLayoutTab extends TabsDescriptor {\n\ttoolbar: TabsLayoutSectionProps | null;\n\tcontent: TabsLayoutSectionProps;\n\tfooter: TabsLayoutSectionProps | null;\n}\n\nconst tabsLayoutTabDisplayName = \"TabsLayout.Tab\";\nconst tabsLayoutToolbarDisplayName = \"TabsLayout.Toolbar\";\nconst tabsLayoutContentDisplayName = \"TabsLayout.Content\";\nconst tabsLayoutFooterDisplayName = \"TabsLayout.Footer\";\n\n/**\n * Возвращает стабильный displayName compound-элемента.\n * Это нужно для корректной работы HMR, где ссылочное сравнение `child.type` может ломаться.\n */\nfunction getTabsLayoutElementDisplayName(child: React.ReactElement) {\n\tconst { type } = child;\n\n\tif (typeof type === \"function\") {\n\t\tconst componentType = type as React.JSXElementConstructor<unknown> & {\n\t\t\tdisplayName?: string;\n\t\t\tname?: string;\n\t\t};\n\n\t\treturn componentType.displayName ?? componentType.name ?? null;\n\t}\n\n\tif (typeof type === \"object\" && type !== null && \"displayName\" in type) {\n\t\tconst componentType = type as {\n\t\t\tdisplayName?: string;\n\t\t};\n\n\t\treturn typeof componentType.displayName === \"string\" ? componentType.displayName : null;\n\t}\n\n\treturn null;\n}\n\nfunction isTabsLayoutElement<Props>(child: React.ReactNode, displayName: string): child is React.ReactElement<Props> {\n\treturn isValidElement<Props>(child) && getTabsLayoutElementDisplayName(child) === displayName;\n}\n\n/**\n * Маркер верхнеуровневой вкладки в compound-режиме `TabsLayout`.\n */\nfunction TabsLayoutTab({ children }: TabsLayoutTabProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutTab.displayName = tabsLayoutTabDisplayName;\n\n/**\n * Верхняя секция панели, исключённая из прокручиваемого содержимого.\n */\nfunction TabsLayoutToolbar({ children }: TabsLayoutSectionProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutToolbar.displayName = tabsLayoutToolbarDisplayName;\n\n/**\n * Основное содержимое панели, которое само управляет своим layout и scroll.\n */\nfunction TabsLayoutContent({ children }: TabsLayoutSectionProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutContent.displayName = tabsLayoutContentDisplayName;\n\n/**\n * Нижняя секция панели, исключённая из прокручиваемого содержимого.\n */\nfunction TabsLayoutFooter({ children }: TabsLayoutSectionProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutFooter.displayName = tabsLayoutFooterDisplayName;\n\nfunction parseTabsLayoutSections(children: React.ReactNode, tabId: string) {\n\tlet toolbar: TabsLayoutSectionProps | null = null;\n\tlet content: TabsLayoutSectionProps | null = null;\n\tlet footer: TabsLayoutSectionProps | null = null;\n\n\tfor (const child of Children.toArray(children)) {\n\t\tif (!isValidElement(child)) {\n\t\t\tthrow new Error(\n\t\t\t\t`TabsLayout.Tab \"${tabId}\" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`\n\t\t\t);\n\t\t}\n\n\t\tif (isTabsLayoutElement<TabsLayoutSectionProps>(child, tabsLayoutToolbarDisplayName)) {\n\t\t\tif (toolbar) {\n\t\t\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" содержит более одного блока TabsLayout.Toolbar.`);\n\t\t\t}\n\n\t\t\ttoolbar = child.props;\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (isTabsLayoutElement<TabsLayoutSectionProps>(child, tabsLayoutContentDisplayName)) {\n\t\t\tif (content) {\n\t\t\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" содержит более одного блока TabsLayout.Content.`);\n\t\t\t}\n\n\t\t\tcontent = child.props;\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (isTabsLayoutElement<TabsLayoutSectionProps>(child, tabsLayoutFooterDisplayName)) {\n\t\t\tif (footer) {\n\t\t\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" содержит более одного блока TabsLayout.Footer.`);\n\t\t\t}\n\n\t\t\tfooter = child.props;\n\t\t\tcontinue;\n\t\t}\n\n\t\tthrow new Error(\n\t\t\t`TabsLayout.Tab \"${tabId}\" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`\n\t\t);\n\t}\n\n\tif (!content) {\n\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" должен содержать блок TabsLayout.Content.`);\n\t}\n\n\treturn { toolbar, content, footer };\n}\n\nfunction parseTabsLayoutChildren(children: React.ReactNode): ParsedTabsLayoutTab[] {\n\treturn Children.toArray(children).map((child) => {\n\t\tif (!isTabsLayoutElement<TabsLayoutTabProps>(child, tabsLayoutTabDisplayName)) {\n\t\t\tthrow new Error(\"TabsLayout принимает только дочерние элементы TabsLayout.Tab.\");\n\t\t}\n\n\t\treturn {\n\t\t\tid: child.props.id,\n\t\t\ttitle: child.props.title,\n\t\t\tdisabled: child.props.disabled,\n\t\t\t...parseTabsLayoutSections(child.props.children, child.props.id)\n\t\t};\n\t});\n}\n\ntype TabsLayoutComposition = React.FC<TabsLayoutProps> & {\n\tTab: typeof TabsLayoutTab;\n\tToolbar: typeof TabsLayoutToolbar;\n\tContent: typeof TabsLayoutContent;\n\tFooter: typeof TabsLayoutFooter;\n};\n\n/**\n * Compound-оболочка tabs для составных panel-layout сценариев.\n * Сам компонент управляет только переключением и каркасом панели.\n */\nconst TabsLayoutRoot: React.FC<TabsLayoutProps> = ({\n\tchildren,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tclassName,\n\tbordered,\n\tcleanPanel,\n\torientation = \"horizontal\",\n\tactivationMode = \"manual\",\n\tmountStrategy = \"lazy\",\n\tloop = true,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy\n}) => {\n\tconst tabs = useMemo(() => parseTabsLayoutChildren(children), [children]);\n\tconst state = useTabsState({\n\t\titems: tabs,\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\torientation,\n\t\tactivationMode,\n\t\tloop\n\t});\n\tconst rootClassName = cn(\n\t\tstyles.tabsContainer,\n\t\tstyles[orientation],\n\t\tbordered && styles.bordered,\n\t\tcleanPanel && styles.cleanPanel,\n\t\tclassName\n\t);\n\tconst panelsClassName = cn(styles.panels, styles.layoutPanels);\n\n\treturn (\n\t\t<div className={rootClassName}>\n\t\t\t<TabsTabList items={tabs} state={state} className={styles.tabs} ariaLabel={ariaLabel} ariaLabelledBy={ariaLabelledBy} />\n\n\t\t\t<div className={panelsClassName}>\n\t\t\t\t{tabs.map((tab) => {\n\t\t\t\t\tconst isSelected = tab.id === state.selectedTabId;\n\t\t\t\t\tconst isMounted = shouldMountTabPanel({\n\t\t\t\t\t\tmountStrategy,\n\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\tisVisited: state.isVisited(tab.id)\n\t\t\t\t\t});\n\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst templateRows = `${tab.toolbar ? \"auto \" : \"\"}minmax(0, 1fr)${tab.footer ? \" auto\" : \"\"}`;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TabsPanel\n\t\t\t\t\t\t\tkey={tab.id}\n\t\t\t\t\t\t\ttabId={tab.id}\n\t\t\t\t\t\t\tisSelected={isSelected}\n\t\t\t\t\t\t\tclassName={styles.panel}\n\t\t\t\t\t\t\tgetTabElementId={state.getTabElementId}\n\t\t\t\t\t\t\tgetPanelElementId={state.getPanelElementId}>\n\t\t\t\t\t\t\t<div className={styles.layoutPanel} style={{ gridTemplateRows: templateRows }}>\n\t\t\t\t\t\t\t\t{tab.toolbar ? (\n\t\t\t\t\t\t\t\t\t<div className={cn(styles.layoutSection, tab.toolbar.className)}>{tab.toolbar.children}</div>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t<div className={cn(styles.layoutSection, styles.layoutContent, tab.content.className)}>\n\t\t\t\t\t\t\t\t\t{tab.content.children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{tab.footer ? (\n\t\t\t\t\t\t\t\t\t<div className={cn(styles.layoutSection, tab.footer.className)}>{tab.footer.children}</div>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nTabsLayoutRoot.displayName = \"TabsLayout\";\n\nexport const TabsLayout = Object.assign(TabsLayoutRoot, {\n\tTab: TabsLayoutTab,\n\tToolbar: TabsLayoutToolbar,\n\tContent: TabsLayoutContent,\n\tFooter: TabsLayoutFooter\n}) as TabsLayoutComposition;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/tabs/lib/tabs.ts","../../src/tabs/model/useTabsState.ts","../../src/tabs/ui/Tabs.module.scss","../../src/tabs/ui/TabsLoadingState.tsx","../../src/tabs/ui/TabsNoDataState.tsx","../../src/tabs/ui/TabsPanel.tsx","../../src/tabs/ui/TabsTabList.tsx","../../src/tabs/ui/TabsBox.tsx","../../src/tabs/ui/Tabs.tsx","../../src/tabs/ui/TabsLayout.tsx"],"sourcesContent":["import type { TabsDescriptor, TabsMountStrategy } from \"../model/types\";\n\n/**\n * Возвращает идентификатор первой доступной вкладки.\n */\nexport function getFirstEnabledTabId(items: TabsDescriptor[]) {\n\treturn items.find((item) => !item.disabled)?.id ?? null;\n}\n\n/**\n * Возвращает безопасный идентификатор вкладки.\n * Если переданный `candidate` недоступен, выбирается первая доступная вкладка.\n */\nexport function getSafeTabId(items: TabsDescriptor[], candidate: string | undefined | null) {\n\tif (!candidate) {\n\t\treturn getFirstEnabledTabId(items);\n\t}\n\n\tconst matchedItem = items.find((item) => item.id === candidate && !item.disabled);\n\treturn matchedItem?.id ?? getFirstEnabledTabId(items);\n}\n\n/**\n * Возвращает только доступные вкладки для roving focus и клавиатурной навигации.\n */\nexport function getEnabledTabs(items: TabsDescriptor[]) {\n\treturn items.filter((item) => !item.disabled);\n}\n\ninterface ShouldMountTabPanelOptions {\n\tmountStrategy: TabsMountStrategy;\n\tisSelected: boolean;\n\tisVisited: boolean;\n}\n\n/**\n * Определяет, должна ли панель оставаться смонтированной с учётом стратегии монтирования.\n */\nexport function shouldMountTabPanel({ mountStrategy, isSelected, isVisited }: ShouldMountTabPanelOptions) {\n\treturn mountStrategy === \"keep-mounted\" || isSelected || (mountStrategy === \"lazy\" && isVisited);\n}\n","import type React from \"react\";\nimport { FocusEvent, KeyboardEvent, useId, useMemo, useRef, useState } from \"react\";\n\nimport { getRovingFocusTargetIndex } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { getEnabledTabs, getSafeTabId } from \"../lib/tabs\";\n\nimport type { TabsActivationMode, TabsDescriptor, TabsOrientation } from \"./types\";\n\ninterface UseTabsStateOptions {\n\titems: TabsDescriptor[];\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\torientation?: TabsOrientation;\n\tactivationMode?: TabsActivationMode;\n\tloop?: boolean;\n}\n\n/**\n * Публичная часть модели, необходимая визуальным подкомпонентам tabs.\n */\nexport interface TabsStateModel {\n\tactivationMode: TabsActivationMode;\n\torientation: TabsOrientation;\n\tselectedTabId: string | null;\n\ttabbableTabId: string | null;\n\tonTabListKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;\n\tonTabListBlur: (event: FocusEvent<HTMLDivElement>) => void;\n\tgetTabElementId: (tabId: string) => string;\n\tgetPanelElementId: (tabId: string) => string;\n\tgetTabButtonProps: (item: TabsDescriptor) => React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\t\tref: (node: HTMLButtonElement | null) => void;\n\t};\n\tisVisited: (tabId: string) => boolean;\n}\n\n/**\n * Инкапсулирует state, a11y-связки и клавиатурную навигацию для всех оболочек tabs.\n */\nexport function useTabsState({\n\titems,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\torientation = \"horizontal\",\n\tactivationMode = \"automatic\",\n\tloop = true\n}: UseTabsStateOptions): TabsStateModel {\n\tconst isControlled = value !== undefined;\n\tconst enabledTabs = useMemo(() => getEnabledTabs(items), [items]);\n\tconst fallbackTabId = enabledTabs[0]?.id ?? null;\n\tconst [internalValue, setInternalValue] = useState(() => getSafeTabId(items, defaultValue));\n\tconst [focusedTabId, setFocusedTabId] = useState<string | null>(() => getSafeTabId(items, value ?? defaultValue));\n\tconst initialVisitedTabId = getSafeTabId(items, value ?? defaultValue);\n\tconst [visitedTabsState, setVisitedTabsState] = useState<Set<string>>(() =>\n\t\tinitialVisitedTabId ? new Set([initialVisitedTabId]) : new Set()\n\t);\n\tconst tabsId = useId();\n\tconst tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n\tconst selectedTabId = getSafeTabId(items, isControlled ? value : internalValue);\n\tconst nextTabbableTabId = getSafeTabId(items, focusedTabId) ?? selectedTabId ?? fallbackTabId;\n\tconst visitedTabs = useMemo(() => {\n\t\tif (!selectedTabId || visitedTabsState.has(selectedTabId)) {\n\t\t\treturn visitedTabsState;\n\t\t}\n\n\t\tconst next = new Set(visitedTabsState);\n\t\tnext.add(selectedTabId);\n\t\treturn next;\n\t}, [selectedTabId, visitedTabsState]);\n\n\tconst activateTab = (nextTabId: string) => {\n\t\tconst safeNextTabId = getSafeTabId(items, nextTabId);\n\t\tif (!safeNextTabId) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetVisitedTabsState((prev) => {\n\t\t\tif (prev.has(safeNextTabId)) {\n\t\t\t\treturn prev;\n\t\t\t}\n\n\t\t\tconst next = new Set(prev);\n\t\t\tnext.add(safeNextTabId);\n\t\t\treturn next;\n\t\t});\n\n\t\tif (!isControlled) {\n\t\t\tsetInternalValue(safeNextTabId);\n\t\t}\n\n\t\tonValueChange?.(safeNextTabId);\n\t};\n\n\tconst focusTab = (nextTabId: string) => {\n\t\ttabRefs.current[nextTabId]?.focus();\n\t};\n\n\tconst onTabListKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n\t\tif (enabledTabs.length < 2) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeFocusIndex = Math.max(\n\t\t\t0,\n\t\t\tenabledTabs.findIndex((item) => item.id === (nextTabbableTabId ?? selectedTabId ?? fallbackTabId))\n\t\t);\n\t\tconst nextEnabledIndex = getRovingFocusTargetIndex({\n\t\t\tcurrentIndex: activeFocusIndex,\n\t\t\titemCount: enabledTabs.length,\n\t\t\tkey: event.key,\n\t\t\torientation,\n\t\t\twrap: loop\n\t\t});\n\n\t\tif (nextEnabledIndex === null) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\n\t\tconst nextTabId = enabledTabs[nextEnabledIndex]?.id;\n\t\tif (!nextTabId) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocusedTabId(nextTabId);\n\t\tfocusTab(nextTabId);\n\n\t\tif (activationMode === \"automatic\") {\n\t\t\tactivateTab(nextTabId);\n\t\t}\n\t};\n\n\tconst onTabListBlur = (event: FocusEvent<HTMLDivElement>) => {\n\t\tconst nextTarget = event.relatedTarget;\n\n\t\tif (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocusedTabId(selectedTabId ?? fallbackTabId);\n\t};\n\n\tconst getTabElementId = (tabId: string) => `${tabsId}-tab-${tabId}`;\n\tconst getPanelElementId = (tabId: string) => `${tabsId}-panel-${tabId}`;\n\n\tconst getTabButtonProps = (item: TabsDescriptor) => {\n\t\tconst isSelected = item.id === selectedTabId;\n\t\tconst isTabbable = item.id === nextTabbableTabId;\n\n\t\treturn {\n\t\t\tref: (node: HTMLButtonElement | null) => {\n\t\t\t\ttabRefs.current[item.id] = node;\n\t\t\t},\n\t\t\ttype: \"button\" as const,\n\t\t\trole: \"tab\" as const,\n\t\t\tid: getTabElementId(item.id),\n\t\t\tdisabled: item.disabled,\n\t\t\t\"aria-selected\": isSelected,\n\t\t\t\"aria-controls\": getPanelElementId(item.id),\n\t\t\t\"aria-disabled\": item.disabled || undefined,\n\t\t\ttabIndex: item.disabled ? -1 : isTabbable ? 0 : -1,\n\t\t\tonFocus: () => setFocusedTabId(item.id),\n\t\t\tonClick: () => activateTab(item.id)\n\t\t};\n\t};\n\n\treturn {\n\t\tactivationMode,\n\t\torientation,\n\t\tselectedTabId,\n\t\ttabbableTabId: nextTabbableTabId,\n\t\tonTabListKeyDown,\n\t\tonTabListBlur,\n\t\tgetTabElementId,\n\t\tgetPanelElementId,\n\t\tgetTabButtonProps,\n\t\tisVisited: (tabId: string) => visitedTabs.has(tabId)\n\t};\n}\n",".tabsContainer {\n\t--tabs-border: none;\n\t--tabs-panel-border: none;\n\t--tabs-panel-padding: var(--space-md);\n\t--tabs-panel-bg: var(--surface-1);\n\n\tdisplay: grid;\n\tgap: var(--space-sm);\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.bordered {\n\t--tabs-border: var(--border);\n\t--tabs-panel-border: var(--border);\n}\n\n.cleanPanel {\n\t--tabs-panel-padding: 0;\n\t--tabs-panel-bg: none;\n\t--tabs-panel-border: none;\n}\n\n.tabs {\n\tdisplay: flex;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n\n\tborder: var(--tabs-border);\n\tbackground-color: var(--surface-1);\n\tpadding: var(--space-xs);\n}\n\n.panels {\n\tmin-width: 0;\n\tmin-height: 0;\n\tborder: var(--tabs-panel-border);\n\tbackground-color: var(--tabs-panel-bg);\n}\n\n.tabs,\n.panels {\n\tborder-radius: var(--radius-sm);\n}\n\n.horizontal {\n\tgrid-template-rows: auto minmax(0, 1fr);\n\n\t// .tabs {\n\t// \tflex-wrap: wrap;\n\t// }\n}\n\n.vertical {\n\tgrid-template-columns: 10em minmax(0, 1fr);\n\tmin-height: 0;\n\n\t.tabs {\n\t\tflex-direction: column;\n\t}\n}\n\n.panelScrollable {\n\toverflow: auto;\n}\n\n.tab {\n\ttext-align: left;\n\n\tposition: relative;\n\tmin-height: var(--control-height);\n\tpadding: var(--space-xs) var(--space-md);\n\tcolor: var(--content-2);\n\tborder-radius: var(--radius-sm);\n\tfont-weight: 700;\n\tfont-variation-settings: \"wght\" 700;\n\n\tflex-shrink: 0;\n\n\t&:hover {\n\t\tcursor: pointer;\n\t\tcolor: var(--content-accent);\n\t\t// background-color: var(--surface-accent);\n\t}\n\n\t&.selected {\n\t\tcolor: var(--status-neutral-on-fill);\n\t\tbackground-color: var(--status-neutral-fill);\n\t\tborder-color: var(--border-0);\n\n\t\tbox-shadow: var(--shadow-xs);\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\tcolor: var(--content-2);\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.panel {\n\tpadding: 0;\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n}\n\n.panelBody {\n\tmin-width: 0;\n\tmin-height: 0;\n\n\theight: 100%;\n\tpadding: var(--tabs-panel-padding);\n}\n\n.layoutPanels {\n\toverflow: hidden;\n}\n\n.layoutPanel {\n\tdisplay: grid;\n\tgap: var(--space-md);\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\tpadding: var(--tabs-panel-padding);\n}\n\n.layoutSection {\n\tmin-width: 0;\n}\n\n.layoutContent {\n\tmin-height: 0;\n}\n","import { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { LoadingMessage } from \"../../misc\";\n\nimport styles from \"./Tabs.module.scss\";\n\ninterface TabsLoadingStateProps {\n\tcontainerClassName: string;\n\ttabListClassName: string;\n\tpanelsClassName: string;\n\tpanelClassName: string;\n\tpanelBodyClassName: string;\n\tloadingText?: string;\n}\n\n/**\n * Служебное loading-состояние для `TabsBox`.\n */\nexport function TabsLoadingState({\n\tcontainerClassName,\n\ttabListClassName,\n\tpanelsClassName,\n\tpanelClassName,\n\tpanelBodyClassName,\n\tloadingText\n}: TabsLoadingStateProps) {\n\treturn (\n\t\t<div className={containerClassName}>\n\t\t\t<div className={tabListClassName} aria-hidden=\"true\">\n\t\t\t\t<button type=\"button\" disabled data-disabled=\"\" className={cn(styles.tab, \"skeletonLine\")}>\n\t\t\t\t\tЗагрузка...\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div className={panelsClassName} aria-busy=\"true\">\n\t\t\t\t<div className={panelClassName}>\n\t\t\t\t\t<div className={panelBodyClassName}>\n\t\t\t\t\t\t<LoadingMessage text={loadingText} className=\"radiusSm\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","import { NoData } from \"../../misc\";\n\ninterface TabsNoDataStateProps {\n\tcontainerClassName: string;\n\tpanelsClassName: string;\n\tpanelClassName: string;\n\tpanelBodyClassName: string;\n}\n\n/**\n * Служебное empty-состояние для `TabsBox`.\n */\nexport function TabsNoDataState({ containerClassName, panelsClassName, panelClassName, panelBodyClassName }: TabsNoDataStateProps) {\n\treturn (\n\t\t<div className={containerClassName}>\n\t\t\t<div className={panelsClassName}>\n\t\t\t\t<div className={panelClassName}>\n\t\t\t\t\t<div className={panelBodyClassName}>\n\t\t\t\t\t\t<NoData className=\"radiusSm\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","import React from \"react\";\n\n/**\n * Унифицированная ARIA-обёртка для содержимого активной панели tabs.\n */\ninterface TabsPanelProps {\n\ttabId: string;\n\tisSelected: boolean;\n\tclassName?: string;\n\tgetTabElementId: (tabId: string) => string;\n\tgetPanelElementId: (tabId: string) => string;\n\tchildren: React.ReactNode;\n}\n\nexport function TabsPanel({ tabId, isSelected, className, getTabElementId, getPanelElementId, children }: TabsPanelProps) {\n\treturn (\n\t\t<div\n\t\t\trole=\"tabpanel\"\n\t\t\tid={getPanelElementId(tabId)}\n\t\t\taria-labelledby={getTabElementId(tabId)}\n\t\t\thidden={!isSelected}\n\t\t\tclassName={className}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n","import { ReactNode } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { OneStepScroller } from \"../../misc\";\n\nimport styles from \"./Tabs.module.scss\";\n\nimport type { TabsDescriptor } from \"../model/types\";\nimport type { TabsStateModel } from \"../model/useTabsState\";\n\n/**\n * Рендерит tablist и кнопки вкладок поверх общей модели tabs.\n */\ninterface TabsTabListProps {\n\titems: TabsDescriptor[];\n\tstate: TabsStateModel;\n\tclassName?: string;\n\tariaLabel?: string;\n\tariaLabelledBy?: string;\n}\n\nexport function TabsTabList({ items, state, className, ariaLabel, ariaLabelledBy }: TabsTabListProps) {\n\tconst wrapItems = (children: ReactNode) => {\n\t\tif (state.orientation === \"horizontal\") {\n\t\t\treturn <OneStepScroller>{children}</OneStepScroller>;\n\t\t}\n\n\t\treturn <>{children}</>;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={className}\n\t\t\trole=\"tablist\"\n\t\t\taria-orientation={state.orientation}\n\t\t\taria-label={ariaLabel}\n\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\tonKeyDown={state.onTabListKeyDown}\n\t\t\tonBlur={state.onTabListBlur}>\n\t\t\t{wrapItems(\n\t\t\t\titems.map((item) => (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t{...state.getTabButtonProps(item)}\n\t\t\t\t\t\tdata-ui=\"tabs-tab\"\n\t\t\t\t\t\tdata-action=\"select-tab\"\n\t\t\t\t\t\tclassName={cn(styles.tab, \"textWrap\", item.id === state.selectedTabId && styles.selected)}>\n\t\t\t\t\t\t{item.title}\n\t\t\t\t\t</button>\n\t\t\t\t))\n\t\t\t)}\n\t\t</div>\n\t);\n}\n","import { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { shouldMountTabPanel } from \"../lib/tabs\";\nimport { TabsBoxProps } from \"../model/types\";\nimport { useTabsState } from \"../model/useTabsState\";\n\nimport styles from \"./Tabs.module.scss\";\nimport { TabsLoadingState } from \"./TabsLoadingState\";\nimport { TabsNoDataState } from \"./TabsNoDataState\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport { TabsTabList } from \"./TabsTabList\";\n\n/**\n * Простой items-based tabs-компонент.\n * Сам управляет областью панели и её прокруткой.\n */\nexport function TabsBox({\n\titems,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tclassName,\n\tisLoading,\n\tloadingText,\n\tcleanPanel,\n\tbordered = false,\n\torientation = \"horizontal\",\n\tactivationMode = \"automatic\",\n\tmountStrategy = \"unmount\",\n\tloop = true,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy\n}: TabsBoxProps) {\n\tconst state = useTabsState({\n\t\titems,\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\torientation,\n\t\tactivationMode,\n\t\tloop\n\t});\n\n\tconst rootClassName = cn(\n\t\tstyles.tabsContainer,\n\t\tstyles[orientation],\n\t\tbordered && styles.bordered,\n\t\tcleanPanel && styles.cleanPanel,\n\t\tclassName\n\t);\n\tconst tabListClassName = styles.tabs;\n\tconst panelsClassName = cn(styles.panels, styles.panelScrollable, \"scrollable overscroll\");\n\tconst panelClassName = styles.panel;\n\tconst panelBodyClassName = styles.panelBody;\n\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<TabsLoadingState\n\t\t\t\tcontainerClassName={rootClassName}\n\t\t\t\ttabListClassName={tabListClassName}\n\t\t\t\tpanelsClassName={panelsClassName}\n\t\t\t\tpanelClassName={panelClassName}\n\t\t\t\tpanelBodyClassName={panelBodyClassName}\n\t\t\t\tloadingText={loadingText}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (!items.length) {\n\t\treturn (\n\t\t\t<TabsNoDataState\n\t\t\t\tcontainerClassName={rootClassName}\n\t\t\t\tpanelsClassName={panelsClassName}\n\t\t\t\tpanelClassName={panelClassName}\n\t\t\t\tpanelBodyClassName={panelBodyClassName}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={rootClassName}>\n\t\t\t<TabsTabList items={items} state={state} className={tabListClassName} ariaLabel={ariaLabel} ariaLabelledBy={ariaLabelledBy} />\n\n\t\t\t<div className={panelsClassName}>\n\t\t\t\t{items.map((item) => {\n\t\t\t\t\tconst isSelected = item.id === state.selectedTabId;\n\t\t\t\t\tconst isMounted = shouldMountTabPanel({\n\t\t\t\t\t\tmountStrategy,\n\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\tisVisited: state.isVisited(item.id)\n\t\t\t\t\t});\n\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TabsPanel\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\ttabId={item.id}\n\t\t\t\t\t\t\tisSelected={isSelected}\n\t\t\t\t\t\t\tclassName={panelClassName}\n\t\t\t\t\t\t\tgetTabElementId={state.getTabElementId}\n\t\t\t\t\t\t\tgetPanelElementId={state.getPanelElementId}>\n\t\t\t\t\t\t\t<div className={panelBodyClassName}>{item.content}</div>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n","import { TabsBox } from \"./TabsBox\";\n\nimport type { TabsBoxItem, TabsBoxProps } from \"../model/types\";\n\n/**\n * Элемент вкладки для устаревшего совместимого API `Tabs`.\n */\nexport type TabsItem = TabsBoxItem;\n\n/**\n * @deprecated Используйте `TabsBox` для простого сценария и `TabsLayout` для составных layout-сценариев.\n */\nexport interface TabsProps extends TabsBoxProps {\n\tonChange?: (value: string) => void;\n}\n\n/**\n * @deprecated Используйте `TabsBox` для простого сценария и `TabsLayout` для составных layout-сценариев.\n */\nexport function Tabs({ onChange, onValueChange, ...props }: TabsProps) {\n\treturn (\n\t\t<TabsBox\n\t\t\t{...props}\n\t\t\tonValueChange={(nextValue) => {\n\t\t\t\tonValueChange?.(nextValue);\n\t\t\t\tonChange?.(nextValue);\n\t\t\t}}\n\t\t/>\n\t);\n}\n","/* eslint-disable react-refresh/only-export-components */\nimport React, { Children, isValidElement, useMemo } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { shouldMountTabPanel } from \"../lib/tabs\";\nimport { useTabsState } from \"../model/useTabsState\";\n\nimport styles from \"./Tabs.module.scss\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport { TabsTabList } from \"./TabsTabList\";\n\nimport type { TabsDescriptor, TabsLayoutProps, TabsLayoutSectionProps, TabsLayoutTabProps } from \"../model/types\";\n\ninterface ParsedTabsLayoutTab extends TabsDescriptor {\n\ttoolbar: TabsLayoutSectionProps | null;\n\tcontent: TabsLayoutSectionProps;\n\tfooter: TabsLayoutSectionProps | null;\n}\n\nconst tabsLayoutTabDisplayName = \"TabsLayout.Tab\";\nconst tabsLayoutToolbarDisplayName = \"TabsLayout.Toolbar\";\nconst tabsLayoutContentDisplayName = \"TabsLayout.Content\";\nconst tabsLayoutFooterDisplayName = \"TabsLayout.Footer\";\n\n/**\n * Возвращает стабильный displayName compound-элемента.\n * Это нужно для корректной работы HMR, где ссылочное сравнение `child.type` может ломаться.\n */\nfunction getTabsLayoutElementDisplayName(child: React.ReactElement) {\n\tconst { type } = child;\n\n\tif (typeof type === \"function\") {\n\t\tconst componentType = type as React.JSXElementConstructor<unknown> & {\n\t\t\tdisplayName?: string;\n\t\t\tname?: string;\n\t\t};\n\n\t\treturn componentType.displayName ?? componentType.name ?? null;\n\t}\n\n\tif (typeof type === \"object\" && type !== null && \"displayName\" in type) {\n\t\tconst componentType = type as {\n\t\t\tdisplayName?: string;\n\t\t};\n\n\t\treturn typeof componentType.displayName === \"string\" ? componentType.displayName : null;\n\t}\n\n\treturn null;\n}\n\nfunction isTabsLayoutElement<Props>(child: React.ReactNode, displayName: string): child is React.ReactElement<Props> {\n\treturn isValidElement<Props>(child) && getTabsLayoutElementDisplayName(child) === displayName;\n}\n\n/**\n * Маркер верхнеуровневой вкладки в compound-режиме `TabsLayout`.\n */\nfunction TabsLayoutTab({ children }: TabsLayoutTabProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutTab.displayName = tabsLayoutTabDisplayName;\n\n/**\n * Верхняя секция панели, исключённая из прокручиваемого содержимого.\n */\nfunction TabsLayoutToolbar({ children }: TabsLayoutSectionProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutToolbar.displayName = tabsLayoutToolbarDisplayName;\n\n/**\n * Основное содержимое панели, которое само управляет своим layout и scroll.\n */\nfunction TabsLayoutContent({ children }: TabsLayoutSectionProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutContent.displayName = tabsLayoutContentDisplayName;\n\n/**\n * Нижняя секция панели, исключённая из прокручиваемого содержимого.\n */\nfunction TabsLayoutFooter({ children }: TabsLayoutSectionProps) {\n\treturn <>{children}</>;\n}\n\nTabsLayoutFooter.displayName = tabsLayoutFooterDisplayName;\n\nfunction parseTabsLayoutSections(children: React.ReactNode, tabId: string) {\n\tlet toolbar: TabsLayoutSectionProps | null = null;\n\tlet content: TabsLayoutSectionProps | null = null;\n\tlet footer: TabsLayoutSectionProps | null = null;\n\n\tfor (const child of Children.toArray(children)) {\n\t\tif (!isValidElement(child)) {\n\t\t\tthrow new Error(\n\t\t\t\t`TabsLayout.Tab \"${tabId}\" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`\n\t\t\t);\n\t\t}\n\n\t\tif (isTabsLayoutElement<TabsLayoutSectionProps>(child, tabsLayoutToolbarDisplayName)) {\n\t\t\tif (toolbar) {\n\t\t\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" содержит более одного блока TabsLayout.Toolbar.`);\n\t\t\t}\n\n\t\t\ttoolbar = child.props;\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (isTabsLayoutElement<TabsLayoutSectionProps>(child, tabsLayoutContentDisplayName)) {\n\t\t\tif (content) {\n\t\t\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" содержит более одного блока TabsLayout.Content.`);\n\t\t\t}\n\n\t\t\tcontent = child.props;\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (isTabsLayoutElement<TabsLayoutSectionProps>(child, tabsLayoutFooterDisplayName)) {\n\t\t\tif (footer) {\n\t\t\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" содержит более одного блока TabsLayout.Footer.`);\n\t\t\t}\n\n\t\t\tfooter = child.props;\n\t\t\tcontinue;\n\t\t}\n\n\t\tthrow new Error(\n\t\t\t`TabsLayout.Tab \"${tabId}\" поддерживает только дочерние элементы TabsLayout.Toolbar, TabsLayout.Content и TabsLayout.Footer.`\n\t\t);\n\t}\n\n\tif (!content) {\n\t\tthrow new Error(`TabsLayout.Tab \"${tabId}\" должен содержать блок TabsLayout.Content.`);\n\t}\n\n\treturn { toolbar, content, footer };\n}\n\nfunction parseTabsLayoutChildren(children: React.ReactNode): ParsedTabsLayoutTab[] {\n\treturn Children.toArray(children).map((child) => {\n\t\tif (!isTabsLayoutElement<TabsLayoutTabProps>(child, tabsLayoutTabDisplayName)) {\n\t\t\tthrow new Error(\"TabsLayout принимает только дочерние элементы TabsLayout.Tab.\");\n\t\t}\n\n\t\treturn {\n\t\t\tid: child.props.id,\n\t\t\ttitle: child.props.title,\n\t\t\tdisabled: child.props.disabled,\n\t\t\t...parseTabsLayoutSections(child.props.children, child.props.id)\n\t\t};\n\t});\n}\n\ntype TabsLayoutComposition = React.FC<TabsLayoutProps> & {\n\tTab: typeof TabsLayoutTab;\n\tToolbar: typeof TabsLayoutToolbar;\n\tContent: typeof TabsLayoutContent;\n\tFooter: typeof TabsLayoutFooter;\n};\n\n/**\n * Compound-оболочка tabs для составных panel-layout сценариев.\n * Сам компонент управляет только переключением и каркасом панели.\n */\nconst TabsLayoutRoot: React.FC<TabsLayoutProps> = ({\n\tchildren,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\tclassName,\n\tbordered,\n\tcleanPanel,\n\torientation = \"horizontal\",\n\tactivationMode = \"manual\",\n\tmountStrategy = \"lazy\",\n\tloop = true,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy\n}) => {\n\tconst tabs = useMemo(() => parseTabsLayoutChildren(children), [children]);\n\tconst state = useTabsState({\n\t\titems: tabs,\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\torientation,\n\t\tactivationMode,\n\t\tloop\n\t});\n\tconst rootClassName = cn(\n\t\tstyles.tabsContainer,\n\t\tstyles[orientation],\n\t\tbordered && styles.bordered,\n\t\tcleanPanel && styles.cleanPanel,\n\t\tclassName\n\t);\n\tconst panelsClassName = cn(styles.panels, styles.layoutPanels);\n\n\treturn (\n\t\t<div className={rootClassName}>\n\t\t\t<TabsTabList items={tabs} state={state} className={styles.tabs} ariaLabel={ariaLabel} ariaLabelledBy={ariaLabelledBy} />\n\n\t\t\t<div className={panelsClassName}>\n\t\t\t\t{tabs.map((tab) => {\n\t\t\t\t\tconst isSelected = tab.id === state.selectedTabId;\n\t\t\t\t\tconst isMounted = shouldMountTabPanel({\n\t\t\t\t\t\tmountStrategy,\n\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\tisVisited: state.isVisited(tab.id)\n\t\t\t\t\t});\n\n\t\t\t\t\tif (!isMounted) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst templateRows = `${tab.toolbar ? \"auto \" : \"\"}minmax(0, 1fr)${tab.footer ? \" auto\" : \"\"}`;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TabsPanel\n\t\t\t\t\t\t\tkey={tab.id}\n\t\t\t\t\t\t\ttabId={tab.id}\n\t\t\t\t\t\t\tisSelected={isSelected}\n\t\t\t\t\t\t\tclassName={styles.panel}\n\t\t\t\t\t\t\tgetTabElementId={state.getTabElementId}\n\t\t\t\t\t\t\tgetPanelElementId={state.getPanelElementId}>\n\t\t\t\t\t\t\t<div className={styles.layoutPanel} style={{ gridTemplateRows: templateRows }}>\n\t\t\t\t\t\t\t\t{tab.toolbar ? (\n\t\t\t\t\t\t\t\t\t<div className={cn(styles.layoutSection, tab.toolbar.className)}>{tab.toolbar.children}</div>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t<div className={cn(styles.layoutSection, styles.layoutContent, tab.content.className)}>\n\t\t\t\t\t\t\t\t\t{tab.content.children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{tab.footer ? (\n\t\t\t\t\t\t\t\t\t<div className={cn(styles.layoutSection, tab.footer.className)}>{tab.footer.children}</div>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</TabsPanel>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nTabsLayoutRoot.displayName = \"TabsLayout\";\n\nexport const TabsLayout = Object.assign(TabsLayoutRoot, {\n\tTab: TabsLayoutTab,\n\tToolbar: TabsLayoutToolbar,\n\tContent: TabsLayoutContent,\n\tFooter: TabsLayoutFooter\n}) as TabsLayoutComposition;\n"],"mappings":"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"}
|
package/dist/tag-input/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "../chunks/ui.module-BisoTevy.js";
|
|
2
|
-
import { l as t, s as n } from "../chunks/input-
|
|
2
|
+
import { l as t, s as n } from "../chunks/input-Bp6_Ucgr.js";
|
|
3
3
|
import { useImperativeHandle as r, useRef as i, useState as a } from "react";
|
|
4
4
|
import { cn as o } from "@ryuzaki13/react-foundation-lib/utils";
|
|
5
5
|
import { XIcon as s } from "lucide-react";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/tag-input/lib/joinTagInputAriaIds.ts","../../src/tag-input/lib/tagInputDefaults.ts","../../src/tag-input/TagInput.module.scss","../../src/tag-input/TagInput.tsx"],"sourcesContent":["/** Объединяет сгенерированные и пользовательские ARIA ID, исключая пустые части. */\nexport function joinTagInputAriaIds(...ids: Array<string | undefined>) {\n\treturn ids.filter(Boolean).join(\" \") || undefined;\n}\n","/** Удаляет внешние пробелы перед сохранением созданного тега. */\nexport function defaultNormalizeTag(value: string) {\n\treturn value.trim();\n}\n\n/** Сохраняет регистр и использует точное значение как ключ сравнения по умолчанию. */\nexport function defaultGetTagKey(value: string) {\n\treturn value;\n}\n\n/** Формирует доступное имя действия удаления с конкретным значением тега. */\nexport function defaultGetRemoveButtonAriaLabel(value: string) {\n\treturn `Удалить тег «${value}»`;\n}\n","@use \"@/styles/mixins\" as *;\n\n.control {\n\tmin-height: var(--control-height);\n\tdisplay: flex;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tgap: var(--space-xs);\n\tpadding: calc(var(--space-xs) / 2) var(--space-sm);\n\tcursor: text;\n\n\t--ui-color: var(--content-0);\n\t--ui-color-hover: var(--content-0);\n\t--ui-color-active: var(--content-0);\n\n\t&[data-readonly] {\n\t\tcursor: default;\n\t\tbackground-color: var(--surface-1);\n\t}\n}\n\n.tagList {\n\tmin-width: 0;\n\tmax-width: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tflex: 0 1 auto;\n\tflex-wrap: wrap;\n\tgap: var(--space-xs);\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.tag {\n\t@include ui-static-surface;\n\n\t--ui-color: var(--content-0);\n\t--ui-background: var(--surface-2);\n\t--ui-border-color: var(--border-0);\n\n\tmin-width: 0;\n\tmax-width: 100%;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tpadding: calc(var(--space-xs) / 2) var(--space-xs);\n\tfont-size: var(--font-size-sm);\n}\n\n.tagText {\n\tmin-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.removeButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 1.25em;\n\theight: 1.25em;\n\tpadding: 0;\n\tborder: none;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: inherit;\n\ttransition:\n\t\tcolor var(--transition-fast) ease,\n\t\tbackground-color var(--transition-fast) ease;\n\n\t&:hover {\n\t\tbackground-color: var(--status-error-soft);\n\t\tcolor: var(--status-error-text);\n\t}\n\n\t&:focus-visible {\n\t\t@include focusVisible;\n\t}\n\n\tsvg {\n\t\tdisplay: block;\n\t}\n}\n\n.input {\n\tmin-width: 8ch;\n\tmin-height: calc(var(--control-height) - var(--space-xs) - (var(--border-width) * 2));\n\tflex: 1 1 8rem;\n\tpadding: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tcolor: inherit;\n\tfont: inherit;\n\n\t&::placeholder {\n\t\tcolor: var(--content-2);\n\t}\n\n\t&:read-only {\n\t\tcursor: default;\n\t}\n}\n","import {\n\ttype ClipboardEvent,\n\ttype CompositionEvent,\n\ttype InputHTMLAttributes,\n\ttype KeyboardEvent,\n\ttype Ref,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { XIcon } from \"lucide-react\";\n\nimport { InputUI, useInputFieldIds } from \"../input\";\nimport uiStyles from \"../ui.module.scss\";\n\nimport { joinTagInputAriaIds } from \"./lib/joinTagInputAriaIds\";\nimport { defaultGetRemoveButtonAriaLabel, defaultGetTagKey, defaultNormalizeTag } from \"./lib/tagInputDefaults\";\nimport styles from \"./TagInput.module.scss\";\n\nimport type { UiBaseProps } from \"../types\";\n\nconst TAG_DELIMITER_PATTERN = /[,\\r\\n]/;\nconst TAG_DELIMITER_SPLIT_PATTERN = /[,\\r\\n]+/;\n\nexport interface TagInputProps\n\textends\n\t\tOmit<InputHTMLAttributes<HTMLInputElement>, \"children\" | \"defaultValue\" | \"disabled\" | \"onChange\" | \"readOnly\" | \"size\" | \"value\">,\n\t\tUiBaseProps<string[], readonly string[]> {\n\t/** Ссылка на внутренний нативный `input`, передаваемая напрямую как React 19 prop. */\n\tref?: Ref<HTMLInputElement>;\n\n\t/** Сообщение валидации, связанное с полем через `aria-describedby`. */\n\terror?: string;\n\n\t/** Сбрасывает внешнюю ошибку после изменения черновика или набора тегов. */\n\tonClearError?: () => void;\n\n\t/** Запрещает изменение набора тегов, сохраняя возможность выделять и копировать текст. */\n\treadOnly?: boolean;\n\n\t/** Максимальное количество тегов. Отсутствие значения не ограничивает набор. */\n\tmaxTags?: number;\n\n\t/**\n\t * Нормализует введённое значение перед проверкой дубликата и добавлением.\n\t * По умолчанию удаляет пробелы в начале и конце.\n\t */\n\tnormalizeTag?: (value: string) => string;\n\n\t/**\n\t * Возвращает ключ сравнения тегов. Позволяет, например, запретить дубликаты без учёта регистра.\n\t * По умолчанию используется точное строковое сравнение.\n\t */\n\tgetTagKey?: (value: string) => string;\n\n\t/** Добавляет непустой черновик при уходе фокуса с input. По умолчанию включено. */\n\taddOnBlur?: boolean;\n\n\t/** Формирует доступное имя кнопки удаления конкретного тега. */\n\tgetRemoveButtonAriaLabel?: (value: string, index: number) => string;\n\n\t/** Доступное имя списка уже добавленных тегов. */\n\ttokensAriaLabel?: string;\n\n\t/** CSS-класс непосредственно для внутреннего `input`; `className` применяется к оболочке поля. */\n\tinputClassName?: string;\n}\n\n/**\n * Controlled-поле для создания коротких строковых тегов.\n *\n * Новое значение фиксируется по `Enter`, запятой, вставке списка или потере фокуса. Компонент хранит\n * только незавершённый текст input, а окончательный набор всегда принадлежит потребителю через `value`.\n */\nexport function TagInput({\n\tref,\n\tvalue,\n\tonChange,\n\tlabel,\n\tdescription,\n\tplaceholder,\n\tsize,\n\tdisabled,\n\treadOnly = false,\n\terror,\n\tonClearError,\n\tmaxTags,\n\tnormalizeTag = defaultNormalizeTag,\n\tgetTagKey = defaultGetTagKey,\n\taddOnBlur = true,\n\tgetRemoveButtonAriaLabel = defaultGetRemoveButtonAriaLabel,\n\ttokensAriaLabel = \"Добавленные теги\",\n\tinputClassName,\n\tclassName,\n\tid: externalId,\n\tname,\n\tform,\n\trequired,\n\tmaxLength,\n\tonKeyDown,\n\tonPaste,\n\tonBlur,\n\tonCompositionStart,\n\tonCompositionEnd,\n\t\"aria-describedby\": externalAriaDescribedBy,\n\t\"aria-labelledby\": externalAriaLabelledBy,\n\t...inputProps\n}: TagInputProps) {\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst controlRef = useRef<HTMLDivElement>(null);\n\tconst isComposingRef = useRef(false);\n\tconst [draft, setDraft] = useState(\"\");\n\tconst [announcement, setAnnouncement] = useState(\"\");\n\tconst { controlId, labelId, descriptionId, errorId, describedBy } = useInputFieldIds({\n\t\tid: externalId,\n\t\thasLabel: label !== undefined && label !== null,\n\t\thasDescription: !!description,\n\t\thasError: !!error\n\t});\n\tconst resolvedMaxTags = maxTags === undefined ? Number.POSITIVE_INFINITY : Math.max(0, Math.floor(maxTags));\n\tconst isEditingDisabled = disabled || readOnly;\n\tconst ariaDescribedBy = joinTagInputAriaIds(describedBy, externalAriaDescribedBy);\n\tconst ariaLabelledBy = joinTagInputAriaIds(labelId, externalAriaLabelledBy);\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => {\n\t\t\tconst input = inputRef.current;\n\n\t\t\tif (!input) {\n\t\t\t\tthrow new Error(\"TagInput: внутренний input недоступен при создании imperative handle.\");\n\t\t\t}\n\n\t\t\treturn input;\n\t\t},\n\t\t[]\n\t);\n\n\t/** Добавляет сразу несколько кандидатов одним controlled-обновлением и сообщает результат screen reader. */\n\tconst appendTags = (rawTags: readonly string[]) => {\n\t\tif (isEditingDisabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tonClearError?.();\n\n\t\tconst nextTags = [...value];\n\t\tconst knownKeys = new Set(nextTags.map((tag) => getTagKey(tag)));\n\t\tconst added: string[] = [];\n\t\tlet duplicateCount = 0;\n\t\tlet limitReached = false;\n\n\t\tfor (const rawTag of rawTags) {\n\t\t\tconst tag = normalizeTag(rawTag);\n\n\t\t\tif (!tag) continue;\n\n\t\t\tif (maxLength !== undefined && tag.length > maxLength) {\n\t\t\t\tsetAnnouncement(`Тег «${tag}» длиннее допустимого значения.`);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst key = getTagKey(tag);\n\n\t\t\tif (knownKeys.has(key)) {\n\t\t\t\tduplicateCount += 1;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (nextTags.length >= resolvedMaxTags) {\n\t\t\t\tlimitReached = true;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tknownKeys.add(key);\n\t\t\tnextTags.push(tag);\n\t\t\tadded.push(tag);\n\t\t}\n\n\t\tif (added.length > 0) {\n\t\t\tonChange(nextTags);\n\t\t\tsetAnnouncement(added.length === 1 ? `Добавлен тег «${added[0]}».` : `Добавлено тегов: ${added.length}.`);\n\t\t} else if (limitReached) {\n\t\t\tsetAnnouncement(`Достигнуто максимальное количество тегов: ${resolvedMaxTags}.`);\n\t\t} else if (duplicateCount > 0) {\n\t\t\tsetAnnouncement(\"Такой тег уже добавлен.\");\n\t\t}\n\t};\n\n\tconst commitDraft = () => {\n\t\tif (!draft) return false;\n\n\t\tappendTags(draft.split(TAG_DELIMITER_SPLIT_PATTERN));\n\t\tsetDraft(\"\");\n\t\treturn true;\n\t};\n\n\tconst removeTag = (index: number) => {\n\t\tif (isEditingDisabled) return;\n\n\t\tconst removedTag = value[index];\n\t\tif (removedTag === undefined) return;\n\n\t\tonChange(value.filter((_, currentIndex) => currentIndex !== index));\n\t\tonClearError?.();\n\t\tsetAnnouncement(`Удалён тег «${removedTag}».`);\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n\t\tonKeyDown?.(event);\n\t\tif (event.defaultPrevented || event.nativeEvent.isComposing || isComposingRef.current || isEditingDisabled) return;\n\n\t\tif (event.key === \"Enter\" || event.key === \",\") {\n\t\t\tif (commitDraft() || event.key === \",\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"Backspace\" && draft.length === 0 && value.length > 0) {\n\t\t\tevent.preventDefault();\n\t\t\tremoveTag(value.length - 1);\n\t\t}\n\t};\n\n\tconst handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n\t\tonPaste?.(event);\n\t\tif (event.defaultPrevented || isEditingDisabled) return;\n\n\t\tconst clipboardText = event.clipboardData.getData(\"text\");\n\t\tif (!TAG_DELIMITER_PATTERN.test(clipboardText)) return;\n\n\t\tevent.preventDefault();\n\t\tconst selectionStart = event.currentTarget.selectionStart ?? draft.length;\n\t\tconst selectionEnd = event.currentTarget.selectionEnd ?? selectionStart;\n\t\tconst pastedValue = `${draft.slice(0, selectionStart)}${clipboardText}${draft.slice(selectionEnd)}`;\n\n\t\tappendTags(pastedValue.split(TAG_DELIMITER_SPLIT_PATTERN));\n\t\tsetDraft(\"\");\n\t};\n\n\treturn (\n\t\t<InputUI\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={className}\n\t\t\tsize={size}\n\t\t\terror={error}\n\t\t\tcontrolId={controlId}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}>\n\t\t\t<div\n\t\t\t\tref={controlRef}\n\t\t\t\tclassName={cn(uiStyles.uiControl, error && uiStyles.invalid, styles.control)}\n\t\t\t\tdata-disabled={disabled ? \"\" : undefined}\n\t\t\t\tdata-readonly={readOnly ? \"\" : undefined}\n\t\t\t\tdata-invalid={error ? \"\" : undefined}\n\t\t\t\tonClick={() => inputRef.current?.focus()}>\n\t\t\t\t{value.length > 0 && (\n\t\t\t\t\t<ul className={styles.tagList} aria-label={tokensAriaLabel}>\n\t\t\t\t\t\t{value.map((tag, index) => (\n\t\t\t\t\t\t\t<li className={styles.tag} key={`${getTagKey(tag)}-${index}`}>\n\t\t\t\t\t\t\t\t<span className={styles.tagText}>{tag}</span>\n\t\t\t\t\t\t\t\t{!isEditingDisabled && (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclassName={styles.removeButton}\n\t\t\t\t\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tremoveTag(index);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label={getRemoveButtonAriaLabel(tag, index)}>\n\t\t\t\t\t\t\t\t\t\t<XIcon aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\n\t\t\t\t<input\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={controlId}\n\t\t\t\t\tform={form}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\trequired={required && value.length === 0}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tvalue={draft}\n\t\t\t\t\tplaceholder={value.length === 0 ? placeholder : undefined}\n\t\t\t\t\taria-invalid={!!error || undefined}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\tclassName={cn(styles.input, inputClassName)}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tconst nextDraft = event.target.value;\n\t\t\t\t\t\tconst hasDelimiter = TAG_DELIMITER_PATTERN.test(nextDraft);\n\n\t\t\t\t\t\tif (isComposingRef.current) {\n\t\t\t\t\t\t\tsetDraft(nextDraft);\n\t\t\t\t\t\t} else if (hasDelimiter) {\n\t\t\t\t\t\t\tconst parts = nextDraft.split(TAG_DELIMITER_SPLIT_PATTERN);\n\t\t\t\t\t\t\tconst hasTrailingDelimiter = TAG_DELIMITER_PATTERN.test(nextDraft.at(-1) ?? \"\");\n\t\t\t\t\t\t\tconst uncommittedPart = hasTrailingDelimiter ? \"\" : (parts.pop() ?? \"\");\n\n\t\t\t\t\t\t\tappendTags(parts);\n\t\t\t\t\t\t\tsetDraft(uncommittedPart);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDraft(nextDraft);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (isComposingRef.current || !hasDelimiter) {\n\t\t\t\t\t\t\tonClearError?.();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonPaste={handlePaste}\n\t\t\t\t\tonCompositionStart={(event: CompositionEvent<HTMLInputElement>) => {\n\t\t\t\t\t\tisComposingRef.current = true;\n\t\t\t\t\t\tonCompositionStart?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={(event: CompositionEvent<HTMLInputElement>) => {\n\t\t\t\t\t\tisComposingRef.current = false;\n\t\t\t\t\t\tonCompositionEnd?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\tonBlur?.(event);\n\t\t\t\t\t\tconst nextFocusedNode = event.relatedTarget;\n\t\t\t\t\t\tconst focusRemainsInside = nextFocusedNode instanceof Node && controlRef.current?.contains(nextFocusedNode);\n\n\t\t\t\t\t\tif (!event.defaultPrevented && !focusRemainsInside && addOnBlur && !isEditingDisabled) {\n\t\t\t\t\t\t\tcommitDraft();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t{name &&\n\t\t\t\t\tvalue.map((tag, index) => (\n\t\t\t\t\t\t<input key={`${getTagKey(tag)}-${index}`} type=\"hidden\" name={name} value={tag} form={form} disabled={disabled} />\n\t\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t<span className=\"visuallyHidden\" aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{announcement}\n\t\t\t</span>\n\t\t</InputUI>\n\t);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/tag-input/lib/joinTagInputAriaIds.ts","../../src/tag-input/lib/tagInputDefaults.ts","../../src/tag-input/TagInput.module.scss","../../src/tag-input/TagInput.tsx"],"sourcesContent":["/** Объединяет сгенерированные и пользовательские ARIA ID, исключая пустые части. */\nexport function joinTagInputAriaIds(...ids: Array<string | undefined>) {\n\treturn ids.filter(Boolean).join(\" \") || undefined;\n}\n","/** Удаляет внешние пробелы перед сохранением созданного тега. */\nexport function defaultNormalizeTag(value: string) {\n\treturn value.trim();\n}\n\n/** Сохраняет регистр и использует точное значение как ключ сравнения по умолчанию. */\nexport function defaultGetTagKey(value: string) {\n\treturn value;\n}\n\n/** Формирует доступное имя действия удаления с конкретным значением тега. */\nexport function defaultGetRemoveButtonAriaLabel(value: string) {\n\treturn `Удалить тег «${value}»`;\n}\n","@use \"@/styles/mixins\" as *;\n\n.control {\n\tmin-height: var(--control-height);\n\tdisplay: flex;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tgap: var(--space-xs);\n\tpadding: calc(var(--space-xs) / 2) var(--space-sm);\n\tcursor: text;\n\n\t--ui-color: var(--content-0);\n\t--ui-color-hover: var(--content-0);\n\t--ui-color-active: var(--content-0);\n\n\t&[data-readonly] {\n\t\tcursor: default;\n\t\tbackground-color: var(--surface-1);\n\t}\n}\n\n.tagList {\n\tmin-width: 0;\n\tmax-width: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tflex: 0 1 auto;\n\tflex-wrap: wrap;\n\tgap: var(--space-xs);\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.tag {\n\t@include ui-static-surface;\n\n\t--ui-color: var(--content-0);\n\t--ui-background: var(--surface-2);\n\t--ui-border-color: var(--border-0);\n\n\tmin-width: 0;\n\tmax-width: 100%;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tpadding: calc(var(--space-xs) / 2) var(--space-xs);\n\tfont-size: var(--font-size-sm);\n}\n\n.tagText {\n\tmin-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.removeButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 1.25em;\n\theight: 1.25em;\n\tpadding: 0;\n\tborder: none;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: inherit;\n\ttransition:\n\t\tcolor var(--transition-fast) ease,\n\t\tbackground-color var(--transition-fast) ease;\n\n\t&:hover {\n\t\tbackground-color: var(--status-error-soft);\n\t\tcolor: var(--status-error-text);\n\t}\n\n\t&:focus-visible {\n\t\t@include focusVisible;\n\t}\n\n\tsvg {\n\t\tdisplay: block;\n\t}\n}\n\n.input {\n\tmin-width: 8ch;\n\tmin-height: calc(var(--control-height) - var(--space-xs) - (var(--border-width) * 2));\n\tflex: 1 1 8rem;\n\tpadding: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tcolor: inherit;\n\tfont: inherit;\n\n\t&::placeholder {\n\t\tcolor: var(--content-2);\n\t}\n\n\t&:read-only {\n\t\tcursor: default;\n\t}\n}\n","import {\n\ttype ClipboardEvent,\n\ttype CompositionEvent,\n\ttype InputHTMLAttributes,\n\ttype KeyboardEvent,\n\ttype Ref,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState\n} from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { XIcon } from \"lucide-react\";\n\nimport { InputUI, useInputFieldIds } from \"../input\";\nimport uiStyles from \"../ui.module.scss\";\n\nimport { joinTagInputAriaIds } from \"./lib/joinTagInputAriaIds\";\nimport { defaultGetRemoveButtonAriaLabel, defaultGetTagKey, defaultNormalizeTag } from \"./lib/tagInputDefaults\";\nimport styles from \"./TagInput.module.scss\";\n\nimport type { UiBaseProps } from \"../types\";\n\nconst TAG_DELIMITER_PATTERN = /[,\\r\\n]/;\nconst TAG_DELIMITER_SPLIT_PATTERN = /[,\\r\\n]+/;\n\nexport interface TagInputProps\n\textends\n\t\tOmit<InputHTMLAttributes<HTMLInputElement>, \"children\" | \"defaultValue\" | \"disabled\" | \"onChange\" | \"readOnly\" | \"size\" | \"value\">,\n\t\tUiBaseProps<string[], readonly string[]> {\n\t/** Ссылка на внутренний нативный `input`, передаваемая напрямую как React 19 prop. */\n\tref?: Ref<HTMLInputElement>;\n\n\t/** Сообщение валидации, связанное с полем через `aria-describedby`. */\n\terror?: string;\n\n\t/** Сбрасывает внешнюю ошибку после изменения черновика или набора тегов. */\n\tonClearError?: () => void;\n\n\t/** Запрещает изменение набора тегов, сохраняя возможность выделять и копировать текст. */\n\treadOnly?: boolean;\n\n\t/** Максимальное количество тегов. Отсутствие значения не ограничивает набор. */\n\tmaxTags?: number;\n\n\t/**\n\t * Нормализует введённое значение перед проверкой дубликата и добавлением.\n\t * По умолчанию удаляет пробелы в начале и конце.\n\t */\n\tnormalizeTag?: (value: string) => string;\n\n\t/**\n\t * Возвращает ключ сравнения тегов. Позволяет, например, запретить дубликаты без учёта регистра.\n\t * По умолчанию используется точное строковое сравнение.\n\t */\n\tgetTagKey?: (value: string) => string;\n\n\t/** Добавляет непустой черновик при уходе фокуса с input. По умолчанию включено. */\n\taddOnBlur?: boolean;\n\n\t/** Формирует доступное имя кнопки удаления конкретного тега. */\n\tgetRemoveButtonAriaLabel?: (value: string, index: number) => string;\n\n\t/** Доступное имя списка уже добавленных тегов. */\n\ttokensAriaLabel?: string;\n\n\t/** CSS-класс непосредственно для внутреннего `input`; `className` применяется к оболочке поля. */\n\tinputClassName?: string;\n}\n\n/**\n * Controlled-поле для создания коротких строковых тегов.\n *\n * Новое значение фиксируется по `Enter`, запятой, вставке списка или потере фокуса. Компонент хранит\n * только незавершённый текст input, а окончательный набор всегда принадлежит потребителю через `value`.\n */\nexport function TagInput({\n\tref,\n\tvalue,\n\tonChange,\n\tlabel,\n\tdescription,\n\tplaceholder,\n\tsize,\n\tdisabled,\n\treadOnly = false,\n\terror,\n\tonClearError,\n\tmaxTags,\n\tnormalizeTag = defaultNormalizeTag,\n\tgetTagKey = defaultGetTagKey,\n\taddOnBlur = true,\n\tgetRemoveButtonAriaLabel = defaultGetRemoveButtonAriaLabel,\n\ttokensAriaLabel = \"Добавленные теги\",\n\tinputClassName,\n\tclassName,\n\tid: externalId,\n\tname,\n\tform,\n\trequired,\n\tmaxLength,\n\tonKeyDown,\n\tonPaste,\n\tonBlur,\n\tonCompositionStart,\n\tonCompositionEnd,\n\t\"aria-describedby\": externalAriaDescribedBy,\n\t\"aria-labelledby\": externalAriaLabelledBy,\n\t...inputProps\n}: TagInputProps) {\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst controlRef = useRef<HTMLDivElement>(null);\n\tconst isComposingRef = useRef(false);\n\tconst [draft, setDraft] = useState(\"\");\n\tconst [announcement, setAnnouncement] = useState(\"\");\n\tconst { controlId, labelId, descriptionId, errorId, describedBy } = useInputFieldIds({\n\t\tid: externalId,\n\t\thasLabel: label !== undefined && label !== null,\n\t\thasDescription: !!description,\n\t\thasError: !!error\n\t});\n\tconst resolvedMaxTags = maxTags === undefined ? Number.POSITIVE_INFINITY : Math.max(0, Math.floor(maxTags));\n\tconst isEditingDisabled = disabled || readOnly;\n\tconst ariaDescribedBy = joinTagInputAriaIds(describedBy, externalAriaDescribedBy);\n\tconst ariaLabelledBy = joinTagInputAriaIds(labelId, externalAriaLabelledBy);\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => {\n\t\t\tconst input = inputRef.current;\n\n\t\t\tif (!input) {\n\t\t\t\tthrow new Error(\"TagInput: внутренний input недоступен при создании imperative handle.\");\n\t\t\t}\n\n\t\t\treturn input;\n\t\t},\n\t\t[]\n\t);\n\n\t/** Добавляет сразу несколько кандидатов одним controlled-обновлением и сообщает результат screen reader. */\n\tconst appendTags = (rawTags: readonly string[]) => {\n\t\tif (isEditingDisabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tonClearError?.();\n\n\t\tconst nextTags = [...value];\n\t\tconst knownKeys = new Set(nextTags.map((tag) => getTagKey(tag)));\n\t\tconst added: string[] = [];\n\t\tlet duplicateCount = 0;\n\t\tlet limitReached = false;\n\n\t\tfor (const rawTag of rawTags) {\n\t\t\tconst tag = normalizeTag(rawTag);\n\n\t\t\tif (!tag) continue;\n\n\t\t\tif (maxLength !== undefined && tag.length > maxLength) {\n\t\t\t\tsetAnnouncement(`Тег «${tag}» длиннее допустимого значения.`);\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tconst key = getTagKey(tag);\n\n\t\t\tif (knownKeys.has(key)) {\n\t\t\t\tduplicateCount += 1;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (nextTags.length >= resolvedMaxTags) {\n\t\t\t\tlimitReached = true;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tknownKeys.add(key);\n\t\t\tnextTags.push(tag);\n\t\t\tadded.push(tag);\n\t\t}\n\n\t\tif (added.length > 0) {\n\t\t\tonChange(nextTags);\n\t\t\tsetAnnouncement(added.length === 1 ? `Добавлен тег «${added[0]}».` : `Добавлено тегов: ${added.length}.`);\n\t\t} else if (limitReached) {\n\t\t\tsetAnnouncement(`Достигнуто максимальное количество тегов: ${resolvedMaxTags}.`);\n\t\t} else if (duplicateCount > 0) {\n\t\t\tsetAnnouncement(\"Такой тег уже добавлен.\");\n\t\t}\n\t};\n\n\tconst commitDraft = () => {\n\t\tif (!draft) return false;\n\n\t\tappendTags(draft.split(TAG_DELIMITER_SPLIT_PATTERN));\n\t\tsetDraft(\"\");\n\t\treturn true;\n\t};\n\n\tconst removeTag = (index: number) => {\n\t\tif (isEditingDisabled) return;\n\n\t\tconst removedTag = value[index];\n\t\tif (removedTag === undefined) return;\n\n\t\tonChange(value.filter((_, currentIndex) => currentIndex !== index));\n\t\tonClearError?.();\n\t\tsetAnnouncement(`Удалён тег «${removedTag}».`);\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n\t\tonKeyDown?.(event);\n\t\tif (event.defaultPrevented || event.nativeEvent.isComposing || isComposingRef.current || isEditingDisabled) return;\n\n\t\tif (event.key === \"Enter\" || event.key === \",\") {\n\t\t\tif (commitDraft() || event.key === \",\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === \"Backspace\" && draft.length === 0 && value.length > 0) {\n\t\t\tevent.preventDefault();\n\t\t\tremoveTag(value.length - 1);\n\t\t}\n\t};\n\n\tconst handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n\t\tonPaste?.(event);\n\t\tif (event.defaultPrevented || isEditingDisabled) return;\n\n\t\tconst clipboardText = event.clipboardData.getData(\"text\");\n\t\tif (!TAG_DELIMITER_PATTERN.test(clipboardText)) return;\n\n\t\tevent.preventDefault();\n\t\tconst selectionStart = event.currentTarget.selectionStart ?? draft.length;\n\t\tconst selectionEnd = event.currentTarget.selectionEnd ?? selectionStart;\n\t\tconst pastedValue = `${draft.slice(0, selectionStart)}${clipboardText}${draft.slice(selectionEnd)}`;\n\n\t\tappendTags(pastedValue.split(TAG_DELIMITER_SPLIT_PATTERN));\n\t\tsetDraft(\"\");\n\t};\n\n\treturn (\n\t\t<InputUI\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={className}\n\t\t\tsize={size}\n\t\t\terror={error}\n\t\t\tcontrolId={controlId}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}>\n\t\t\t<div\n\t\t\t\tref={controlRef}\n\t\t\t\tclassName={cn(uiStyles.uiControl, error && uiStyles.invalid, styles.control)}\n\t\t\t\tdata-disabled={disabled ? \"\" : undefined}\n\t\t\t\tdata-readonly={readOnly ? \"\" : undefined}\n\t\t\t\tdata-invalid={error ? \"\" : undefined}\n\t\t\t\tonClick={() => inputRef.current?.focus()}>\n\t\t\t\t{value.length > 0 && (\n\t\t\t\t\t<ul className={styles.tagList} aria-label={tokensAriaLabel}>\n\t\t\t\t\t\t{value.map((tag, index) => (\n\t\t\t\t\t\t\t<li className={styles.tag} key={`${getTagKey(tag)}-${index}`}>\n\t\t\t\t\t\t\t\t<span className={styles.tagText}>{tag}</span>\n\t\t\t\t\t\t\t\t{!isEditingDisabled && (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclassName={styles.removeButton}\n\t\t\t\t\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tremoveTag(index);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label={getRemoveButtonAriaLabel(tag, index)}>\n\t\t\t\t\t\t\t\t\t\t<XIcon aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\n\t\t\t\t<input\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={controlId}\n\t\t\t\t\tform={form}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\trequired={required && value.length === 0}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tvalue={draft}\n\t\t\t\t\tplaceholder={value.length === 0 ? placeholder : undefined}\n\t\t\t\t\taria-invalid={!!error || undefined}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\tclassName={cn(styles.input, inputClassName)}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tconst nextDraft = event.target.value;\n\t\t\t\t\t\tconst hasDelimiter = TAG_DELIMITER_PATTERN.test(nextDraft);\n\n\t\t\t\t\t\tif (isComposingRef.current) {\n\t\t\t\t\t\t\tsetDraft(nextDraft);\n\t\t\t\t\t\t} else if (hasDelimiter) {\n\t\t\t\t\t\t\tconst parts = nextDraft.split(TAG_DELIMITER_SPLIT_PATTERN);\n\t\t\t\t\t\t\tconst hasTrailingDelimiter = TAG_DELIMITER_PATTERN.test(nextDraft.at(-1) ?? \"\");\n\t\t\t\t\t\t\tconst uncommittedPart = hasTrailingDelimiter ? \"\" : (parts.pop() ?? \"\");\n\n\t\t\t\t\t\t\tappendTags(parts);\n\t\t\t\t\t\t\tsetDraft(uncommittedPart);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDraft(nextDraft);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (isComposingRef.current || !hasDelimiter) {\n\t\t\t\t\t\t\tonClearError?.();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonPaste={handlePaste}\n\t\t\t\t\tonCompositionStart={(event: CompositionEvent<HTMLInputElement>) => {\n\t\t\t\t\t\tisComposingRef.current = true;\n\t\t\t\t\t\tonCompositionStart?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={(event: CompositionEvent<HTMLInputElement>) => {\n\t\t\t\t\t\tisComposingRef.current = false;\n\t\t\t\t\t\tonCompositionEnd?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\tonBlur?.(event);\n\t\t\t\t\t\tconst nextFocusedNode = event.relatedTarget;\n\t\t\t\t\t\tconst focusRemainsInside = nextFocusedNode instanceof Node && controlRef.current?.contains(nextFocusedNode);\n\n\t\t\t\t\t\tif (!event.defaultPrevented && !focusRemainsInside && addOnBlur && !isEditingDisabled) {\n\t\t\t\t\t\t\tcommitDraft();\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t{name &&\n\t\t\t\t\tvalue.map((tag, index) => (\n\t\t\t\t\t\t<input key={`${getTagKey(tag)}-${index}`} type=\"hidden\" name={name} value={tag} form={form} disabled={disabled} />\n\t\t\t\t\t))}\n\t\t\t</div>\n\n\t\t\t<span className=\"visuallyHidden\" aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{announcement}\n\t\t\t</span>\n\t\t</InputUI>\n\t);\n}\n"],"mappings":";;;;;;;AACA,SAAgB,EAAoB,GAAG,GAAgC;CACtE,OAAO,EAAI,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;AACzC;;;ACFA,SAAgB,GAAoB,GAAe;CAClD,OAAO,EAAM,KAAK;AACnB;AAGA,SAAgB,GAAiB,GAAe;CAC/C,OAAO;AACR;AAGA,SAAgB,EAAgC,GAAe;CAC9D,OAAO,gBAAgB,EAAM;AAC9B;;;;;;;;GEUM,IAAwB,WACxB,IAA8B;AAoDpC,SAAgB,EAAS,EACxB,QACA,UACA,aACA,UACA,gBACA,iBACA,SACA,aACA,cAAW,IACX,UACA,iBACA,YACA,kBAAe,IACf,eAAY,IACZ,eAAY,IACZ,8BAA2B,GAC3B,sBAAkB,oBAClB,oBACA,eACA,IAAI,IACJ,SACA,SACA,cACA,cACA,eACA,YACA,WACA,uBACA,qBACA,oBAAoB,GACpB,mBAAmB,GACnB,GAAG,KACc;CACjB,IAAM,IAAW,EAAyB,IAAI,GACxC,IAAa,EAAuB,IAAI,GACxC,IAAiB,EAAO,EAAK,GAC7B,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,IAAc,KAAmB,EAAS,EAAE,GAC7C,EAAE,cAAW,YAAS,mBAAe,aAAS,oBAAgB,EAAiB;EACpF,IAAI;EACJ,UAAU,KAAiC;EAC3C,gBAAgB,CAAC,CAAC;EAClB,UAAU,CAAC,CAAC;CACb,CAAC,GACK,IAAkB,MAAY,KAAA,IAAY,WAA2B,KAAK,IAAI,GAAG,KAAK,MAAM,CAAO,CAAC,GACpG,IAAoB,KAAY,GAChC,IAAkB,EAAoB,IAAa,CAAuB,GAC1E,KAAiB,EAAoB,GAAS,CAAsB;CAE1E,EACC,SACM;EACL,IAAM,IAAQ,EAAS;EAEvB,IAAI,CAAC,GACJ,MAAU,MAAM,uEAAuE;EAGxF,OAAO;CACR,GACA,CAAC,CACF;CAGA,IAAM,KAAc,MAA+B;EAClD,IAAI,GACH;EAGD,IAAe;EAEf,IAAM,IAAW,CAAC,GAAG,CAAK,GACpB,IAAY,IAAI,IAAI,EAAS,KAAK,MAAQ,EAAU,CAAG,CAAC,CAAC,GACzD,IAAkB,CAAC,GACrB,IAAiB,GACjB,IAAe;EAEnB,KAAK,IAAM,KAAU,GAAS;GAC7B,IAAM,IAAM,EAAa,CAAM;GAE/B,IAAI,CAAC,GAAK;GAEV,IAAI,MAAc,KAAA,KAAa,EAAI,SAAS,GAAW;IACtD,EAAgB,QAAQ,EAAI,gCAAgC;IAC5D;GACD;GAEA,IAAM,IAAM,EAAU,CAAG;GAEzB,IAAI,EAAU,IAAI,CAAG,GAAG;IACvB,KAAkB;IAClB;GACD;GAEA,IAAI,EAAS,UAAU,GAAiB;IACvC,IAAe;IACf;GACD;GAIA,AAFA,EAAU,IAAI,CAAG,GACjB,EAAS,KAAK,CAAG,GACjB,EAAM,KAAK,CAAG;EACf;EAEA,AAAI,EAAM,SAAS,KAClB,EAAS,CAAQ,GACjB,EAAgB,EAAM,WAAW,IAAI,iBAAiB,EAAM,GAAG,MAAM,oBAAoB,EAAM,OAAO,EAAE,KAC9F,IACV,EAAgB,6CAA6C,EAAgB,EAAE,IACrE,IAAiB,KAC3B,EAAgB,yBAAyB;CAE3C,GAEM,UACA,KAEL,EAAW,EAAM,MAAM,CAA2B,CAAC,GACnD,EAAS,EAAE,GACJ,MAJY,IAOd,KAAa,MAAkB;EACpC,IAAI,GAAmB;EAEvB,IAAM,IAAa,EAAM;EACrB,MAAe,KAAA,MAEnB,EAAS,EAAM,QAAQ,GAAG,MAAiB,MAAiB,CAAK,CAAC,GAClE,IAAe,GACf,EAAgB,eAAe,EAAW,GAAG,GAC7C,EAAS,SAAS,MAAM;CACzB,GAEM,MAAiB,MAA2C;EACjE,SAAY,CAAK,GACb,IAAM,oBAAoB,EAAM,YAAY,eAAe,EAAe,WAAW,IAEzF;OAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,KAAK;IAC/C,CAAI,EAAY,KAAK,EAAM,QAAQ,QAClC,EAAM,eAAe;IAEtB;GACD;GAEA,AAAI,EAAM,QAAQ,eAAe,EAAM,WAAW,KAAK,EAAM,SAAS,MACrE,EAAM,eAAe,GACrB,EAAU,EAAM,SAAS,CAAC;EAJ3B;CAMD,GAEM,MAAe,MAA4C;EAEhE,IADA,IAAU,CAAK,GACX,EAAM,oBAAoB,GAAmB;EAEjD,IAAM,IAAgB,EAAM,cAAc,QAAQ,MAAM;EACxD,IAAI,CAAC,EAAsB,KAAK,CAAa,GAAG;EAEhD,EAAM,eAAe;EACrB,IAAM,IAAiB,EAAM,cAAc,kBAAkB,EAAM,QAC7D,IAAe,EAAM,cAAc,gBAAgB,GACnD,IAAc,GAAG,EAAM,MAAM,GAAG,CAAc,IAAI,IAAgB,EAAM,MAAM,CAAY;EAGhG,AADA,EAAW,EAAY,MAAM,CAA2B,CAAC,GACzD,EAAS,EAAE;CACZ;CAEA,OACC,kBAAC,GAAD;EACQ;EACM;EACH;EACC;EACL;EACC;EACI;EACF;EACM;EACN;EAVV,UAAA,CAWC,kBAAC,OAAD;GACC,KAAK;GACL,WAAW,EAAG,EAAS,WAAW,KAAS,EAAS,SAAS,EAAO,OAAO;GAC3E,iBAAe,IAAW,KAAK,KAAA;GAC/B,iBAAe,IAAW,KAAK,KAAA;GAC/B,gBAAc,IAAQ,KAAK,KAAA;GAC3B,eAAe,EAAS,SAAS,MAAM;GANxC,UAAA;IAOE,EAAM,SAAS,KACf,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAS,cAAY;KACzC,UAAA,EAAM,KAAK,GAAK,MAChB,kBAAC,MAAD;MAAI,WAAW,EAAO;MAAtB,UAAA,CACC,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAU,UAAA;MAAU,CAAA,GAC3C,CAAC,KACD,kBAAC,UAAD;OACC,MAAK;OACL,WAAW,EAAO;OAClB,UAAU,MAAU;QAEnB,AADA,EAAM,gBAAgB,GACtB,EAAU,CAAK;OAChB;OACA,cAAY,EAAyB,GAAK,CAAK;OAC/C,UAAA,kBAAC,GAAD,EAAO,eAAY,OAAQ,CAAA;MACpB,CAAA,CAEN;KAd4B,GAAA,GAAG,EAAU,CAAG,EAAE,GAAG,GAcjD,CACJ;IACE,CAAA;IAGL,kBAAC,SAAD;KACC,GAAI;KACJ,KAAK;KACL,IAAI;KACE;KACI;KACA;KACV,UAAU,MAAY,EAAM,WAAW;KAC5B;KACX,OAAO;KACP,aAAa,EAAM,WAAW,IAAI,KAAc,KAAA;KAChD,gBAAc,CAAC,CAAC,KAAS,KAAA;KACzB,mBAAiB;KACjB,oBAAkB;KAClB,WAAW,EAAG,EAAO,OAAO,EAAc;KAC1C,WAAW,MAAU;MACpB,IAAM,IAAY,EAAM,OAAO,OACzB,IAAe,EAAsB,KAAK,CAAS;MAEzD,IAAI,EAAe,SAClB,EAAS,CAAS;WACZ,IAAI,GAAc;OACxB,IAAM,IAAQ,EAAU,MAAM,CAA2B,GAEnD,IADuB,EAAsB,KAAK,EAAU,GAAG,EAAE,KAAK,EACpD,IAAuB,KAAM,EAAM,IAAI,KAAK;OAGpE,AADA,EAAW,CAAK,GAChB,EAAS,CAAe;MACzB,OACC,EAAS,CAAS;MAGnB,CAAI,EAAe,WAAW,CAAC,MAC9B,IAAe;KAEjB;KACA,WAAW;KACX,SAAS;KACT,qBAAqB,MAA8C;MAElE,AADA,EAAe,UAAU,IACzB,IAAqB,CAAK;KAC3B;KACA,mBAAmB,MAA8C;MAEhE,AADA,EAAe,UAAU,IACzB,IAAmB,CAAK;KACzB;KACA,SAAS,MAAU;MAClB,IAAS,CAAK;MACd,IAAM,IAAkB,EAAM,eACxB,IAAqB,aAA2B,QAAQ,EAAW,SAAS,SAAS,CAAe;MAE1G,AAAI,CAAC,EAAM,oBAAoB,CAAC,KAAsB,KAAa,CAAC,KACnE,EAAY;KAEd;IACA,CAAA;IAEA,KACA,EAAM,KAAK,GAAK,MACf,kBAAC,SAAD;KAA0C,MAAK;KAAe;KAAM,OAAO;KAAW;KAAgB;IAAW,GAArG,GAAG,EAAU,CAAG,EAAE,GAAG,GAAgF,CACjH;GACE;EAEL,CAAA,GAAA,kBAAC,QAAD;GAAM,WAAU;GAAiB,aAAU;GAAS,eAAY;GAC9D,UAAA;EACI,CAAA,CACE;;AAEX"}
|
package/dist/text/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as e } from "../chunks/popover-
|
|
1
|
+
import { n as e } from "../chunks/popover-CGU3MlsH.js";
|
|
2
2
|
import { useMemo as t } from "react";
|
|
3
3
|
import { cn as n } from "@ryuzaki13/react-foundation-lib/utils";
|
|
4
4
|
import { jsx as r } from "react/jsx-runtime";
|
|
@@ -58,6 +58,14 @@ function f({ maxChar: t, placement: n = "left", closeDelay: a = 0, maxWidth: o,
|
|
|
58
58
|
width: t ? `${t - 3}ch` : "auto"
|
|
59
59
|
},
|
|
60
60
|
className: "textOverflow"
|
|
61
|
+
}, h = {
|
|
62
|
+
...d,
|
|
63
|
+
...m,
|
|
64
|
+
style: {
|
|
65
|
+
...d?.style,
|
|
66
|
+
...m.style
|
|
67
|
+
},
|
|
68
|
+
className: [d?.className, m.className].filter(Boolean).join(" ")
|
|
61
69
|
};
|
|
62
70
|
return /* @__PURE__ */ r(e, {
|
|
63
71
|
state: l,
|
|
@@ -67,13 +75,7 @@ function f({ maxChar: t, placement: n = "left", closeDelay: a = 0, maxWidth: o,
|
|
|
67
75
|
closeDelay: a,
|
|
68
76
|
maxWidth: o,
|
|
69
77
|
children: /* @__PURE__ */ r(p, {
|
|
70
|
-
...
|
|
71
|
-
...m,
|
|
72
|
-
style: {
|
|
73
|
-
...d?.style,
|
|
74
|
-
...m.style
|
|
75
|
-
},
|
|
76
|
-
className: [d?.className, m.className].filter(Boolean).join(" "),
|
|
78
|
+
...h,
|
|
77
79
|
children: f
|
|
78
80
|
})
|
|
79
81
|
});
|
package/dist/text/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/text/HighlightText.tsx","../../src/text/Text.tsx","../../src/text/TextOverflow.tsx"],"sourcesContent":["export const HighlightText = ({ text, highlight }: { text: string; highlight?: string }) => {\n\tif (!highlight) return text;\n\treturn text\n\t\t.split(new RegExp(`(${highlight})`, \"gi\"))\n\t\t.map((part, i) => (part.toLowerCase() === highlight.toLowerCase() ? <mark key={i}>{part}</mark> : part));\n};\n","import React, { CSSProperties, useMemo } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type TextColor = \"primary\" | \"secondary\" | \"muted\" | \"error\" | \"warning\" | \"success\" | \"info\";\nexport type TextWeight = \"lighter\" | \"light\" | \"regular\" | \"medium\" | \"bold\" | \"bolder\";\nexport type TextWrap = \"wrap\" | \"noWrap\";\n\nconst textColors: Record<TextColor, string> = {\n\tprimary: \"content0\",\n\tsecondary: \"content1\",\n\tmuted: \"content2\",\n\tinfo: \"statusInfo\",\n\tsuccess: \"statusSuccess\",\n\twarning: \"statusWarning\",\n\terror: \"statusError\"\n};\n\nconst textSizes: Record<TextSize, string> = {\n\txs: \"fontSizeXs\",\n\tsm: \"fontSizeSm\",\n\tmd: \"fontSizeMd\",\n\tlg: \"fontSizeLg\",\n\txl: \"fontSizeXl\"\n};\n\nconst textWeights: Record<TextWeight, string> = {\n\tlighter: \"fontLighter\",\n\tlight: \"fontLight\",\n\tregular: \"fontRegular\",\n\tmedium: \"fontMedium\",\n\tbold: \"fontBold\",\n\tbolder: \"fontBolder\"\n};\n\nconst textWraps: Record<TextWrap, string> = {\n\twrap: \"textWrap\",\n\tnoWrap: \"textNoWrap\"\n};\n\ninterface BaseTextProps {\n\tsize?: TextSize;\n\tcolor?: TextColor;\n\tweight?: TextWeight;\n\titalic?: boolean;\n\tuppercase?: boolean;\n\twrap?: TextWrap;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n}\n\ninterface TextProps extends BaseTextProps {\n\tchildren: React.ReactNode;\n\tas?: \"code\" | \"span\" | \"p\" | \"div\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst useTextStyles = ({ size, color, weight, italic, uppercase, wrap, className }: BaseTextProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: string[] = [];\n\n\t\tif (size) {\n\t\t\tclasses.push(textSizes[size]);\n\t\t}\n\n\t\tif (weight) {\n\t\t\tclasses.push(textWeights[weight]);\n\t\t}\n\n\t\tif (wrap) {\n\t\t\tclasses.push(textWraps[wrap]);\n\t\t}\n\n\t\tif (italic) classes.push(\"fontItalic\");\n\t\tif (uppercase) classes.push(\"textUppercase\");\n\n\t\tif (color) {\n\t\t\tclasses.push(textColors[color]);\n\t\t}\n\n\t\treturn cn(...classes, className);\n\t}, [size, weight, color, italic, uppercase, wrap, className]);\n};\n\nexport const Text: React.FC<TextProps> = ({ children, as, style, ...props }) => {\n\tconst classes = useTextStyles(props);\n\tconst Component = as || \"span\";\n\n\treturn (\n\t\t<Component className={classes} style={style}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n","import { ComponentProps, ComponentType } from \"react\";\n\nimport { Placement } from \"@floating-ui/react\";\nimport { normalizeTextWithFallback } from \"@ryuzaki13/react-foundation-lib/formatters\";\n\nimport { FloatingPopover } from \"../popover\";\n\n// Базовые пропсы которые всегда будут\ninterface BaseTextOverflowProps {\n\tchildren: string;\n\tmaxChar?: number;\n\t/**\n\t * Максимальная ширина тултипа в em.\n\t */\n\tmaxWidth?: number;\n\tplacement?: Placement;\n\tcloseDelay?: number;\n\t/**\n\t * Для работы text-overflow элемент обязан быть блочным или inline-block.\n\t * Если в качестве обёртки передается инлайновый компонент, то он будет\n\t * перезаписан через стили на display: block или inline-block в зависимости\n\t * от установки данного пропса.\n\t */\n\tblock?: true;\n\tstate?: \"information\" | \"error\" | \"warning\" | \"success\" | \"negative\";\n}\n\n// Базовые пропсы которые должен принимать textWrap компонент\ninterface RequiredWrapperProps {\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\tchildren: string;\n}\n\n// Дженерик для пропсов которые зависят от textWrap компонента\ninterface TextOverflowProps<\n\tT extends ComponentType<RequiredWrapperProps> = ComponentType<RequiredWrapperProps>\n> extends BaseTextOverflowProps {\n\ttextWrap?: T;\n\ttextWrapProps?: Omit<ComponentProps<T>, \"children\">;\n}\n\nexport function TextOverflow<T extends ComponentType<RequiredWrapperProps>>({\n\tmaxChar,\n\tplacement = \"left\",\n\tcloseDelay = 0,\n\tmaxWidth,\n\tchildren,\n\tblock,\n\tstate,\n\ttextWrap,\n\ttextWrapProps\n}: TextOverflowProps<T>) {\n\tconst textContent = normalizeTextWithFallback(children);\n\tif (!textContent.length || (maxChar && textContent.length < maxChar)) return <span>{textContent}</span>;\n\n\tconst TextWrapper = textWrap ?? \"div\";\n\n\tconst baseWrapperProps = {\n\t\tstyle: { display: block ? \"block\" : \"inline-block\", width: maxChar ? `${maxChar - 3}ch` : \"auto\" },\n\t\tclassName: \"textOverflow\"\n\t};\n\n\t// Правильный порядок слияния: baseWrapperProps приоритетнее\n\tconst mergedProps = {\n\t\t...textWrapProps,\n\t\t...baseWrapperProps,\n\t\tstyle: {\n\t\t\t...textWrapProps?.style,\n\t\t\t...baseWrapperProps.style // width приоритетнее\n\t\t},\n\t\tclassName: [textWrapProps?.className, baseWrapperProps.className].filter(Boolean).join(\" \")\n\t};\n\n\treturn (\n\t\t<FloatingPopover state={state} placement={placement} openOnHover content={textContent} closeDelay={closeDelay} maxWidth={maxWidth}>\n\t\t\t<TextWrapper {...mergedProps}>{textContent}</TextWrapper>\n\t\t</FloatingPopover>\n\t);\n}\n"],"mappings":";;;;;;AAAA,IAAa,KAAiB,EAAE,SAAM,mBAChC,IACE,EACL,MAAU,OAAO,IAAI,EAAU,IAAI,IAAI,CAAC,CAAC,CACzC,KAAK,GAAM,MAAO,EAAK,YAAY,MAAM,EAAU,YAAY,IAAI,kBAAC,QAAD,EAAA,UAAe,EAAW,GAAf,CAAe,IAAI,CAAK,IAHjF,GCQlB,IAAwC;CAC7C,SAAS;CACT,WAAW;CACX,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACR,GAEM,IAAsC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEM,IAA0C;CAC/C,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CACR,MAAM;CACN,QAAQ;AACT,GAEM,IAAsC;CAC3C,MAAM;CACN,QAAQ;AACT,GAkBM,KAAiB,EAAE,SAAM,UAAO,WAAQ,WAAQ,cAAW,SAAM,mBAC/D,QAAc;CACpB,IAAM,IAAoB,CAAC;CAqB3B,OAnBI,KACH,EAAQ,KAAK,EAAU,EAAK,GAGzB,KACH,EAAQ,KAAK,EAAY,EAAO,GAG7B,KACH,EAAQ,KAAK,EAAU,EAAK,GAGzB,KAAQ,EAAQ,KAAK,YAAY,GACjC,KAAW,EAAQ,KAAK,eAAe,GAEvC,KACH,EAAQ,KAAK,EAAW,EAAM,GAGxB,EAAG,GAAG,GAAS,CAAS;AAChC,GAAG;CAAC;CAAM;CAAQ;CAAO;CAAQ;CAAW;CAAM;AAAS,CAAC,GAGhD,KAA6B,EAAE,aAAU,OAAI,UAAO,GAAG,QAAY;CAC/E,IAAM,IAAU,EAAc,CAAK;CAGnC,OACC,kBAHiB,KAAM,QAGvB;EAAW,WAAW;EAAgB;EACpC;CACS,CAAA;AAEb;;;ACnDA,SAAgB,EAA4D,EAC3E,YACA,eAAY,QACZ,gBAAa,GACb,aACA,aACA,UACA,UACA,aACA,oBACwB;CACxB,IAAM,IAAc,EAA0B,CAAQ;CACtD,IAAI,CAAC,EAAY,UAAW,KAAW,EAAY,SAAS,GAAU,OAAO,kBAAC,QAAD,EAAA,UAAO,EAAkB,CAAA;CAEtG,IAAM,IAAc,KAAY,OAE1B,IAAmB;EACxB,OAAO;GAAE,SAAS,IAAQ,UAAU;GAAgB,OAAO,IAAU,GAAG,IAAU,EAAE,MAAM;EAAO;EACjG,WAAW;CACZ
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/text/HighlightText.tsx","../../src/text/Text.tsx","../../src/text/TextOverflow.tsx"],"sourcesContent":["export const HighlightText = ({ text, highlight }: { text: string; highlight?: string }) => {\n\tif (!highlight) return text;\n\treturn text\n\t\t.split(new RegExp(`(${highlight})`, \"gi\"))\n\t\t.map((part, i) => (part.toLowerCase() === highlight.toLowerCase() ? <mark key={i}>{part}</mark> : part));\n};\n","import React, { CSSProperties, useMemo } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nexport type TextSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type TextColor = \"primary\" | \"secondary\" | \"muted\" | \"error\" | \"warning\" | \"success\" | \"info\";\nexport type TextWeight = \"lighter\" | \"light\" | \"regular\" | \"medium\" | \"bold\" | \"bolder\";\nexport type TextWrap = \"wrap\" | \"noWrap\";\n\nconst textColors: Record<TextColor, string> = {\n\tprimary: \"content0\",\n\tsecondary: \"content1\",\n\tmuted: \"content2\",\n\tinfo: \"statusInfo\",\n\tsuccess: \"statusSuccess\",\n\twarning: \"statusWarning\",\n\terror: \"statusError\"\n};\n\nconst textSizes: Record<TextSize, string> = {\n\txs: \"fontSizeXs\",\n\tsm: \"fontSizeSm\",\n\tmd: \"fontSizeMd\",\n\tlg: \"fontSizeLg\",\n\txl: \"fontSizeXl\"\n};\n\nconst textWeights: Record<TextWeight, string> = {\n\tlighter: \"fontLighter\",\n\tlight: \"fontLight\",\n\tregular: \"fontRegular\",\n\tmedium: \"fontMedium\",\n\tbold: \"fontBold\",\n\tbolder: \"fontBolder\"\n};\n\nconst textWraps: Record<TextWrap, string> = {\n\twrap: \"textWrap\",\n\tnoWrap: \"textNoWrap\"\n};\n\ninterface BaseTextProps {\n\tsize?: TextSize;\n\tcolor?: TextColor;\n\tweight?: TextWeight;\n\titalic?: boolean;\n\tuppercase?: boolean;\n\twrap?: TextWrap;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n}\n\ninterface TextProps extends BaseTextProps {\n\tchildren: React.ReactNode;\n\tas?: \"code\" | \"span\" | \"p\" | \"div\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst useTextStyles = ({ size, color, weight, italic, uppercase, wrap, className }: BaseTextProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: string[] = [];\n\n\t\tif (size) {\n\t\t\tclasses.push(textSizes[size]);\n\t\t}\n\n\t\tif (weight) {\n\t\t\tclasses.push(textWeights[weight]);\n\t\t}\n\n\t\tif (wrap) {\n\t\t\tclasses.push(textWraps[wrap]);\n\t\t}\n\n\t\tif (italic) classes.push(\"fontItalic\");\n\t\tif (uppercase) classes.push(\"textUppercase\");\n\n\t\tif (color) {\n\t\t\tclasses.push(textColors[color]);\n\t\t}\n\n\t\treturn cn(...classes, className);\n\t}, [size, weight, color, italic, uppercase, wrap, className]);\n};\n\nexport const Text: React.FC<TextProps> = ({ children, as, style, ...props }) => {\n\tconst classes = useTextStyles(props);\n\tconst Component = as || \"span\";\n\n\treturn (\n\t\t<Component className={classes} style={style}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n","import { ComponentProps, ComponentType } from \"react\";\n\nimport { Placement } from \"@floating-ui/react\";\nimport { normalizeTextWithFallback } from \"@ryuzaki13/react-foundation-lib/formatters\";\n\nimport { FloatingPopover } from \"../popover\";\n\n// Базовые пропсы которые всегда будут\ninterface BaseTextOverflowProps {\n\tchildren: string;\n\tmaxChar?: number;\n\t/**\n\t * Максимальная ширина тултипа в em.\n\t */\n\tmaxWidth?: number;\n\tplacement?: Placement;\n\tcloseDelay?: number;\n\t/**\n\t * Для работы text-overflow элемент обязан быть блочным или inline-block.\n\t * Если в качестве обёртки передается инлайновый компонент, то он будет\n\t * перезаписан через стили на display: block или inline-block в зависимости\n\t * от установки данного пропса.\n\t */\n\tblock?: true;\n\tstate?: \"information\" | \"error\" | \"warning\" | \"success\" | \"negative\";\n}\n\n// Базовые пропсы которые должен принимать textWrap компонент\ninterface RequiredWrapperProps {\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\tchildren: string;\n}\n\n// Дженерик для пропсов которые зависят от textWrap компонента\ninterface TextOverflowProps<\n\tT extends ComponentType<RequiredWrapperProps> = ComponentType<RequiredWrapperProps>\n> extends BaseTextOverflowProps {\n\ttextWrap?: T;\n\ttextWrapProps?: Omit<ComponentProps<T>, \"children\">;\n}\n\nexport function TextOverflow<T extends ComponentType<RequiredWrapperProps>>({\n\tmaxChar,\n\tplacement = \"left\",\n\tcloseDelay = 0,\n\tmaxWidth,\n\tchildren,\n\tblock,\n\tstate,\n\ttextWrap,\n\ttextWrapProps\n}: TextOverflowProps<T>) {\n\tconst textContent = normalizeTextWithFallback(children);\n\tif (!textContent.length || (maxChar && textContent.length < maxChar)) return <span>{textContent}</span>;\n\n\tconst TextWrapper = textWrap ?? \"div\";\n\n\tconst baseWrapperProps = {\n\t\tstyle: { display: block ? \"block\" : \"inline-block\", width: maxChar ? `${maxChar - 3}ch` : \"auto\" },\n\t\tclassName: \"textOverflow\"\n\t};\n\n\t// Правильный порядок слияния: baseWrapperProps приоритетнее\n\tconst mergedProps = {\n\t\t...textWrapProps,\n\t\t...baseWrapperProps,\n\t\tstyle: {\n\t\t\t...textWrapProps?.style,\n\t\t\t...baseWrapperProps.style // width приоритетнее\n\t\t},\n\t\tclassName: [textWrapProps?.className, baseWrapperProps.className].filter(Boolean).join(\" \")\n\t};\n\n\treturn (\n\t\t<FloatingPopover state={state} placement={placement} openOnHover content={textContent} closeDelay={closeDelay} maxWidth={maxWidth}>\n\t\t\t<TextWrapper {...mergedProps}>{textContent}</TextWrapper>\n\t\t</FloatingPopover>\n\t);\n}\n"],"mappings":";;;;;;AAAA,IAAa,KAAiB,EAAE,SAAM,mBAChC,IACE,EACL,MAAU,OAAO,IAAI,EAAU,IAAI,IAAI,CAAC,CAAC,CACzC,KAAK,GAAM,MAAO,EAAK,YAAY,MAAM,EAAU,YAAY,IAAI,kBAAC,QAAD,EAAA,UAAe,EAAW,GAAf,CAAe,IAAI,CAAK,IAHjF,GCQlB,IAAwC;CAC7C,SAAS;CACT,WAAW;CACX,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACR,GAEM,IAAsC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACL,GAEM,IAA0C;CAC/C,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CACR,MAAM;CACN,QAAQ;AACT,GAEM,IAAsC;CAC3C,MAAM;CACN,QAAQ;AACT,GAkBM,KAAiB,EAAE,SAAM,UAAO,WAAQ,WAAQ,cAAW,SAAM,mBAC/D,QAAc;CACpB,IAAM,IAAoB,CAAC;CAqB3B,OAnBI,KACH,EAAQ,KAAK,EAAU,EAAK,GAGzB,KACH,EAAQ,KAAK,EAAY,EAAO,GAG7B,KACH,EAAQ,KAAK,EAAU,EAAK,GAGzB,KAAQ,EAAQ,KAAK,YAAY,GACjC,KAAW,EAAQ,KAAK,eAAe,GAEvC,KACH,EAAQ,KAAK,EAAW,EAAM,GAGxB,EAAG,GAAG,GAAS,CAAS;AAChC,GAAG;CAAC;CAAM;CAAQ;CAAO;CAAQ;CAAW;CAAM;AAAS,CAAC,GAGhD,KAA6B,EAAE,aAAU,OAAI,UAAO,GAAG,QAAY;CAC/E,IAAM,IAAU,EAAc,CAAK;CAGnC,OACC,kBAHiB,KAAM,QAGvB;EAAW,WAAW;EAAgB;EACpC;CACS,CAAA;AAEb;;;ACnDA,SAAgB,EAA4D,EAC3E,YACA,eAAY,QACZ,gBAAa,GACb,aACA,aACA,UACA,UACA,aACA,oBACwB;CACxB,IAAM,IAAc,EAA0B,CAAQ;CACtD,IAAI,CAAC,EAAY,UAAW,KAAW,EAAY,SAAS,GAAU,OAAO,kBAAC,QAAD,EAAA,UAAO,EAAkB,CAAA;CAEtG,IAAM,IAAc,KAAY,OAE1B,IAAmB;EACxB,OAAO;GAAE,SAAS,IAAQ,UAAU;GAAgB,OAAO,IAAU,GAAG,IAAU,EAAE,MAAM;EAAO;EACjG,WAAW;CACZ,GAGM,IAAc;EACnB,GAAG;EACH,GAAG;EACH,OAAO;GACN,GAAG,GAAe;GAClB,GAAG,EAAiB;EACrB;EACA,WAAW,CAAC,GAAe,WAAW,EAAiB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAC3F;CAEA,OACC,kBAAC,GAAD;EAAwB;EAAkB;EAAW,aAAA;EAAY,SAAS;EAAyB;EAAsB;EACxH,UAAA,kBAAC,GAAD;GAAa,GAAI;GAAc,UAAA;EAAyB,CAAA;CACxC,CAAA;AAEnB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { m as e } from "../chunks/misc-
|
|
1
|
+
import { m as e } from "../chunks/misc-BYxxlJz6.js";
|
|
2
2
|
import { a as t, n, t as r } from "../chunks/types-CxXyru6U.js";
|
|
3
3
|
import { jsx as i } from "react/jsx-runtime";
|
|
4
4
|
//#region src/text-editor/TextEditorLexical.tsx
|
|
5
5
|
function a() {
|
|
6
|
-
return import("../chunks/TextEditorLexicalClient-
|
|
6
|
+
return import("../chunks/TextEditorLexicalClient-CK8j3RA4.js").then((e) => ({ TextEditorLexicalClient: e.TextEditorLexicalClient }));
|
|
7
7
|
}
|
|
8
8
|
function o(t) {
|
|
9
9
|
return /* @__PURE__ */ i(e, {
|
package/dist/textarea/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "../chunks/ui.module-BisoTevy.js";
|
|
2
|
-
import { l as t, s as n } from "../chunks/input-
|
|
2
|
+
import { l as t, s as n } from "../chunks/input-Bp6_Ucgr.js";
|
|
3
3
|
import { cn as r } from "@ryuzaki13/react-foundation-lib/utils";
|
|
4
4
|
import { jsx as i } from "react/jsx-runtime";
|
|
5
5
|
var a = { textarea: "TjY2iu" };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/textarea/Textarea.module.scss","../../src/textarea/Textarea.tsx"],"sourcesContent":[".textarea {\n\twidth: 100%;\n\tmin-height: 6em;\n\tresize: vertical;\n\tpadding: var(--space-sm);\n\tdisplay: block;\n}\n","import { TextareaHTMLAttributes } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { InputUI, useInputFieldIds } from \"../input\";\nimport { UiBaseProps } from \"../types\";\nimport uiStyles from \"../ui.module.scss\";\n\nimport styles from \"./Textarea.module.scss\";\n\nexport interface TextareaProps\n\textends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"children\" | \"onChange\" | \"size\" | \"value\">, UiBaseProps<string> {\n\terror?: string;\n\tonClearError?: () => void;\n}\n\n/**\n * Многострочное текстовое поле для ввода свободного текста. Поддерживает подпись, описание, ошибки и единый визуальный стиль формы.\n */\nexport function Textarea({\n\tlabel,\n\tdescription,\n\tclassName,\n\tdisabled,\n\tsize,\n\tvalue,\n\tonChange,\n\terror,\n\tonClearError,\n\tid: externalId,\n\t...props\n}: TextareaProps) {\n\tconst { controlId, labelId, descriptionId, errorId, describedBy } = useInputFieldIds({\n\t\tid: externalId,\n\t\thasLabel: label !== undefined && label !== null,\n\t\thasDescription: !!description,\n\t\thasError: !!error\n\t});\n\n\treturn (\n\t\t<InputUI\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\tdisabled={disabled}\n\t\t\tsize={size}\n\t\t\terror={error}\n\t\t\tcontrolId={controlId}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}>\n\t\t\t<textarea\n\t\t\t\t{...props}\n\t\t\t\tid={controlId}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tvalue={value}\n\t\t\t\taria-invalid={!!error || undefined}\n\t\t\t\taria-labelledby={labelId}\n\t\t\t\taria-describedby={describedBy}\n\t\t\t\tdata-invalid={error ? \"\" : undefined}\n\t\t\t\tclassName={cn(uiStyles.uiControl, styles.textarea, \"scrollable\", className)}\n\t\t\t\tonChange={(event) => {\n\t\t\t\t\tonChange?.(event.target.value);\n\t\t\t\t\tif (error && onClearError) {\n\t\t\t\t\t\tonClearError();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t/>\n\t\t</InputUI>\n\t);\n}\n"],"mappings":";;;;;;;ACmBA,SAAgB,EAAS,EACxB,UACA,gBACA,cACA,aACA,SACA,UACA,aACA,UACA,iBACA,IAAI,GACJ,GAAG,KACc;CACjB,IAAM,EAAE,cAAW,YAAS,kBAAe,YAAS,mBAAgB,EAAiB;EACpF,IAAI;EACJ,UAAU,KAAiC;EAC3C,gBAAgB,CAAC,CAAC;EAClB,UAAU,CAAC,CAAC;CACb,CAAC;CAED,OACC,kBAAC,GAAD;EACQ;EACM;EACH;EACJ;EACC;EACI;EACF;EACM;EACN;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/textarea/Textarea.module.scss","../../src/textarea/Textarea.tsx"],"sourcesContent":[".textarea {\n\twidth: 100%;\n\tmin-height: 6em;\n\tresize: vertical;\n\tpadding: var(--space-sm);\n\tdisplay: block;\n}\n","import { TextareaHTMLAttributes } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { InputUI, useInputFieldIds } from \"../input\";\nimport { UiBaseProps } from \"../types\";\nimport uiStyles from \"../ui.module.scss\";\n\nimport styles from \"./Textarea.module.scss\";\n\nexport interface TextareaProps\n\textends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"children\" | \"onChange\" | \"size\" | \"value\">, UiBaseProps<string> {\n\terror?: string;\n\tonClearError?: () => void;\n}\n\n/**\n * Многострочное текстовое поле для ввода свободного текста. Поддерживает подпись, описание, ошибки и единый визуальный стиль формы.\n */\nexport function Textarea({\n\tlabel,\n\tdescription,\n\tclassName,\n\tdisabled,\n\tsize,\n\tvalue,\n\tonChange,\n\terror,\n\tonClearError,\n\tid: externalId,\n\t...props\n}: TextareaProps) {\n\tconst { controlId, labelId, descriptionId, errorId, describedBy } = useInputFieldIds({\n\t\tid: externalId,\n\t\thasLabel: label !== undefined && label !== null,\n\t\thasDescription: !!description,\n\t\thasError: !!error\n\t});\n\n\treturn (\n\t\t<InputUI\n\t\t\tlabel={label}\n\t\t\tdescription={description}\n\t\t\tdisabled={disabled}\n\t\t\tsize={size}\n\t\t\terror={error}\n\t\t\tcontrolId={controlId}\n\t\t\tlabelId={labelId}\n\t\t\tdescriptionId={descriptionId}\n\t\t\terrorId={errorId}>\n\t\t\t<textarea\n\t\t\t\t{...props}\n\t\t\t\tid={controlId}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tvalue={value}\n\t\t\t\taria-invalid={!!error || undefined}\n\t\t\t\taria-labelledby={labelId}\n\t\t\t\taria-describedby={describedBy}\n\t\t\t\tdata-invalid={error ? \"\" : undefined}\n\t\t\t\tclassName={cn(uiStyles.uiControl, styles.textarea, \"scrollable\", className)}\n\t\t\t\tonChange={(event) => {\n\t\t\t\t\tonChange?.(event.target.value);\n\t\t\t\t\tif (error && onClearError) {\n\t\t\t\t\t\tonClearError();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t/>\n\t\t</InputUI>\n\t);\n}\n"],"mappings":";;;;;;;ACmBA,SAAgB,EAAS,EACxB,UACA,gBACA,cACA,aACA,SACA,UACA,aACA,UACA,iBACA,IAAI,GACJ,GAAG,KACc;CACjB,IAAM,EAAE,cAAW,YAAS,kBAAe,YAAS,mBAAgB,EAAiB;EACpF,IAAI;EACJ,UAAU,KAAiC;EAC3C,gBAAgB,CAAC,CAAC;EAClB,UAAU,CAAC,CAAC;CACb,CAAC;CAED,OACC,kBAAC,GAAD;EACQ;EACM;EACH;EACJ;EACC;EACI;EACF;EACM;EACN;EACT,UAAA,kBAAC,YAAD;GACC,GAAI;GACJ,IAAI;GACM;GACH;GACP,gBAAc,CAAC,CAAC,KAAS,KAAA;GACzB,mBAAiB;GACjB,oBAAkB;GAClB,gBAAc,IAAQ,KAAK,KAAA;GAC3B,WAAW,EAAG,EAAS,WAAW,EAAO,UAAU,cAAc,CAAS;GAC1E,WAAW,MAAU;IAEpB,AADA,IAAW,EAAM,OAAO,KAAK,GACzB,KAAS,KACZ,EAAa;GAEf;EACA,CAAA;CACO,CAAA;AAEX"}
|
package/dist/toggle/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/toggle/stringToggleState.ts","../../src/toggle/Toggle.module.scss","../../src/toggle/Toggle.tsx","../../src/toggle/StringToggle.tsx"],"sourcesContent":["/**\n * Строковые значения по умолчанию позволяют использовать StringToggle\n * как строковое представление обычного boolean-переключателя.\n */\nexport const DEFAULT_STRING_TOGGLE_CHECKED_VALUE = \"true\";\nexport const DEFAULT_STRING_TOGGLE_UNCHECKED_VALUE = \"false\";\n\n/**\n * Возвращает переданную строку буквально, включая пустую строку и пробелы.\n * Fallback применяется только когда строковое значение отсутствует.\n */\nexport function resolveStringToggleStateValue(value: unknown, fallback: string): string {\n\treturn typeof value === \"string\" ? value : fallback;\n}\n","@use \"@/styles/mixins\" as *;\n\n.row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-sm);\n}\n\n.wrapper {\n\tposition: relative;\n\tdisplay: flex;\n\tflex: 1 0 auto;\n\tmin-width: calc(var(--drp-ui-width-xs, var(--ui-width-xs)) - var(--width-add));\n}\n\n.input {\n\twidth: 100%;\n\tmargin: 0;\n\tpadding: 0;\n\tappearance: none;\n\tcursor: pointer;\n\n\t&:checked + .track {\n\t\t.thumb {\n\t\t\ttransform: translateX(100%);\n\t\t}\n\n\t\t.unchecked {\n\t\t\tcolor: var(--content-2);\n\t\t}\n\n\t\t.checked {\n\t\t\tcolor: var(--status-info-on-fill);\n\t\t}\n\t}\n\n\t&:focus-visible + .track {\n\t\t@include focusVisible;\n\t}\n}\n\n.track {\n\t.unchecked {\n\t\tcolor: var(--status-info-on-fill);\n\t}\n\n\t.checked {\n\t\tcolor: var(--content-2);\n\t}\n\n\tposition: absolute;\n\tinset: calc(var(--border-width) * 2);\n\tpointer-events: none;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\talign-items: center;\n\tmin-width: 6.5em;\n\tpadding: 0;\n\toverflow: hidden;\n\n\t&[data-disabled] {\n\t\t.thumb {\n\t\t\topacity: var(--disabled-opacity);\n\t\t}\n\t}\n}\n\n.option {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0 var(--space-sm);\n\tline-height: 1;\n\twhite-space: nowrap;\n\tuser-select: none;\n\tpointer-events: none;\n\tposition: relative;\n\tz-index: 1;\n\ttransition: color var(--transition-fast) linear;\n}\n\n.thumb {\n\tposition: absolute;\n\ttop: 0; // var(--border-width);\n\tleft: 0; //var(--border-width);\n\twidth: 50%; // calc(50% - var(--border-width));\n\theight: 100%; // calc(100% - var(--border-width) * 2);\n\tborder-radius: var(--radius-xs);\n\tbackground-color: var(--status-info-fill);\n\ttransition:\n\t\ttransform var(--transition-fast) ease-in-out,\n\t\topacity var(--transition-fast) ease-in-out;\n}\n","import React, { useId } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { UiBaseProps } from \"../types\";\nimport uiStyles from \"../ui.module.scss\";\n\nimport styles from \"./Toggle.module.scss\";\n\ntype ToggleLabelPosition = \"before\" | \"after\";\n\nexport interface ToggleProps\n\textends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"checked\" | \"value\" | \"onChange\" | \"type\">, UiBaseProps<boolean> {\n\tcheckedText?: string;\n\tuncheckedText?: string;\n\tlabelPosition?: ToggleLabelPosition;\n}\n\n/**\n * Переключаемая кнопка с сохранением активного состояния. Используется для локального выбора режима, фильтра или форматирования.\n */\nexport function Toggle({\n\tlabel,\n\tdescription,\n\tplaceholder,\n\tdisabled,\n\tsize,\n\tclassName,\n\tonChange,\n\tvalue,\n\tid: externalId,\n\tcheckedText = \"ВКЛ\",\n\tuncheckedText = \"ВЫКЛ\",\n\tlabelPosition = \"before\",\n\t...props\n}: ToggleProps) {\n\tconst autoId = useId();\n\tconst id = externalId ?? autoId;\n\tconst descriptionId = description ? `${id}-description` : undefined;\n\tconst text = label ?? placeholder;\n\tconst isChecked = Boolean(value);\n\tconst fallbackAriaLabel = !text && !props[\"aria-label\"] ? `${uncheckedText} / ${checkedText}` : undefined;\n\n\tconst labelElement = text ? (\n\t\t<label htmlFor={id} className={uiStyles.uiLabel}>\n\t\t\t{text}\n\t\t</label>\n\t) : null;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(uiStyles.uiElement, disabled && uiStyles.disabled, size && uiStyles.uiSizable, size && uiStyles[size], className)}\n\t\t\taria-disabled={disabled || undefined}>\n\t\t\t<div className={styles.row}>\n\t\t\t\t{labelPosition === \"before\" && labelElement}\n\t\t\t\t<div className={styles.wrapper}>\n\t\t\t\t\t<input\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\trole=\"switch\"\n\t\t\t\t\t\tchecked={isChecked}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\taria-checked={isChecked}\n\t\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\t\taria-label={fallbackAriaLabel}\n\t\t\t\t\t\tclassName={cn(uiStyles.uiInputControl, styles.input)}\n\t\t\t\t\t\tonChange={(event) => onChange?.(event.currentTarget.checked)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className={styles.track} data-disabled={disabled || undefined} aria-hidden=\"true\">\n\t\t\t\t\t\t<div className={styles.thumb} />\n\t\t\t\t\t\t<div className={cn(styles.option, styles.unchecked)}>{uncheckedText}</div>\n\t\t\t\t\t\t<div className={cn(styles.option, styles.checked)}>{checkedText}</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{labelPosition === \"after\" && labelElement}\n\t\t\t</div>\n\t\t\t{description && (\n\t\t\t\t<p id={descriptionId} className={uiStyles.uiDescription}>\n\t\t\t\t\t{description}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n","import { type ComponentProps } from \"react\";\n\nimport {\n\tDEFAULT_STRING_TOGGLE_CHECKED_VALUE,\n\tDEFAULT_STRING_TOGGLE_UNCHECKED_VALUE,\n\tresolveStringToggleStateValue\n} from \"./stringToggleState\";\nimport { Toggle } from \"./Toggle\";\n\n/**\n * Публичный контракт Toggle, который принимает и возвращает два настраиваемых\n * строковых значения вместо boolean.\n */\nexport type StringToggleProps = Omit<ComponentProps<typeof Toggle>, \"value\" | \"onChange\"> & {\n\tcheckedValue?: string;\n\tuncheckedValue?: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n};\n\n/**\n * Адаптирует boolean-состояние Toggle к паре настраиваемых строковых значений.\n */\nexport function StringToggle({\n\tvalue,\n\tonChange,\n\tcheckedValue: configuredCheckedValue,\n\tuncheckedValue: configuredUncheckedValue,\n\tdefaultChecked: _defaultChecked,\n\t...props\n}: StringToggleProps) {\n\t/*\n\t * StringToggle является controlled-компонентом: визуальное состояние всегда\n\t * определяется `value`, поэтому native defaultChecked не передаётся в input.\n\t */\n\tvoid _defaultChecked;\n\n\tconst checkedValue = resolveStringToggleStateValue(configuredCheckedValue, DEFAULT_STRING_TOGGLE_CHECKED_VALUE);\n\tconst uncheckedValue = resolveStringToggleStateValue(configuredUncheckedValue, DEFAULT_STRING_TOGGLE_UNCHECKED_VALUE);\n\tconst isChecked = value === checkedValue;\n\n\treturn <Toggle {...props} value={isChecked} onChange={(checked) => onChange(checked ? checkedValue : uncheckedValue)} />;\n}\n"],"mappings":";;;;;AAIA,IAAa,IAAsC,QACtC,IAAwC;AAMrD,SAAgB,EAA8B,GAAgB,GAA0B;CACvF,OAAO,OAAO,KAAU,WAAW,IAAQ;AAC5C;;;;;;;;;;;;;AEQA,SAAgB,EAAO,EACtB,UACA,gBACA,gBACA,aACA,SACA,cACA,aACA,UACA,IAAI,GACJ,iBAAc,OACd,mBAAgB,QAChB,mBAAgB,UAChB,GAAG,KACY;CACf,IAAM,IAAS,EAAM,GACf,IAAK,KAAc,GACnB,IAAgB,IAAc,GAAG,EAAG,gBAAgB,KAAA,GACpD,IAAO,KAAS,GAChB,IAAY,EAAQ,GACpB,IAAoB,CAAC,KAAQ,CAAC,EAAM,gBAAgB,GAAG,EAAc,KAAK,MAAgB,KAAA,GAE1F,IAAe,IACpB,kBAAC,SAAD;EAAO,SAAS;EAAI,WAAW,EAAS;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/toggle/stringToggleState.ts","../../src/toggle/Toggle.module.scss","../../src/toggle/Toggle.tsx","../../src/toggle/StringToggle.tsx"],"sourcesContent":["/**\n * Строковые значения по умолчанию позволяют использовать StringToggle\n * как строковое представление обычного boolean-переключателя.\n */\nexport const DEFAULT_STRING_TOGGLE_CHECKED_VALUE = \"true\";\nexport const DEFAULT_STRING_TOGGLE_UNCHECKED_VALUE = \"false\";\n\n/**\n * Возвращает переданную строку буквально, включая пустую строку и пробелы.\n * Fallback применяется только когда строковое значение отсутствует.\n */\nexport function resolveStringToggleStateValue(value: unknown, fallback: string): string {\n\treturn typeof value === \"string\" ? value : fallback;\n}\n","@use \"@/styles/mixins\" as *;\n\n.row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-sm);\n}\n\n.wrapper {\n\tposition: relative;\n\tdisplay: flex;\n\tflex: 1 0 auto;\n\tmin-width: calc(var(--drp-ui-width-xs, var(--ui-width-xs)) - var(--width-add));\n}\n\n.input {\n\twidth: 100%;\n\tmargin: 0;\n\tpadding: 0;\n\tappearance: none;\n\tcursor: pointer;\n\n\t&:checked + .track {\n\t\t.thumb {\n\t\t\ttransform: translateX(100%);\n\t\t}\n\n\t\t.unchecked {\n\t\t\tcolor: var(--content-2);\n\t\t}\n\n\t\t.checked {\n\t\t\tcolor: var(--status-info-on-fill);\n\t\t}\n\t}\n\n\t&:focus-visible + .track {\n\t\t@include focusVisible;\n\t}\n}\n\n.track {\n\t.unchecked {\n\t\tcolor: var(--status-info-on-fill);\n\t}\n\n\t.checked {\n\t\tcolor: var(--content-2);\n\t}\n\n\tposition: absolute;\n\tinset: calc(var(--border-width) * 2);\n\tpointer-events: none;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\talign-items: center;\n\tmin-width: 6.5em;\n\tpadding: 0;\n\toverflow: hidden;\n\n\t&[data-disabled] {\n\t\t.thumb {\n\t\t\topacity: var(--disabled-opacity);\n\t\t}\n\t}\n}\n\n.option {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0 var(--space-sm);\n\tline-height: 1;\n\twhite-space: nowrap;\n\tuser-select: none;\n\tpointer-events: none;\n\tposition: relative;\n\tz-index: 1;\n\ttransition: color var(--transition-fast) linear;\n}\n\n.thumb {\n\tposition: absolute;\n\ttop: 0; // var(--border-width);\n\tleft: 0; //var(--border-width);\n\twidth: 50%; // calc(50% - var(--border-width));\n\theight: 100%; // calc(100% - var(--border-width) * 2);\n\tborder-radius: var(--radius-xs);\n\tbackground-color: var(--status-info-fill);\n\ttransition:\n\t\ttransform var(--transition-fast) ease-in-out,\n\t\topacity var(--transition-fast) ease-in-out;\n}\n","import React, { useId } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { UiBaseProps } from \"../types\";\nimport uiStyles from \"../ui.module.scss\";\n\nimport styles from \"./Toggle.module.scss\";\n\ntype ToggleLabelPosition = \"before\" | \"after\";\n\nexport interface ToggleProps\n\textends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"checked\" | \"value\" | \"onChange\" | \"type\">, UiBaseProps<boolean> {\n\tcheckedText?: string;\n\tuncheckedText?: string;\n\tlabelPosition?: ToggleLabelPosition;\n}\n\n/**\n * Переключаемая кнопка с сохранением активного состояния. Используется для локального выбора режима, фильтра или форматирования.\n */\nexport function Toggle({\n\tlabel,\n\tdescription,\n\tplaceholder,\n\tdisabled,\n\tsize,\n\tclassName,\n\tonChange,\n\tvalue,\n\tid: externalId,\n\tcheckedText = \"ВКЛ\",\n\tuncheckedText = \"ВЫКЛ\",\n\tlabelPosition = \"before\",\n\t...props\n}: ToggleProps) {\n\tconst autoId = useId();\n\tconst id = externalId ?? autoId;\n\tconst descriptionId = description ? `${id}-description` : undefined;\n\tconst text = label ?? placeholder;\n\tconst isChecked = Boolean(value);\n\tconst fallbackAriaLabel = !text && !props[\"aria-label\"] ? `${uncheckedText} / ${checkedText}` : undefined;\n\n\tconst labelElement = text ? (\n\t\t<label htmlFor={id} className={uiStyles.uiLabel}>\n\t\t\t{text}\n\t\t</label>\n\t) : null;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(uiStyles.uiElement, disabled && uiStyles.disabled, size && uiStyles.uiSizable, size && uiStyles[size], className)}\n\t\t\taria-disabled={disabled || undefined}>\n\t\t\t<div className={styles.row}>\n\t\t\t\t{labelPosition === \"before\" && labelElement}\n\t\t\t\t<div className={styles.wrapper}>\n\t\t\t\t\t<input\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\trole=\"switch\"\n\t\t\t\t\t\tchecked={isChecked}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\taria-checked={isChecked}\n\t\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\t\taria-label={fallbackAriaLabel}\n\t\t\t\t\t\tclassName={cn(uiStyles.uiInputControl, styles.input)}\n\t\t\t\t\t\tonChange={(event) => onChange?.(event.currentTarget.checked)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className={styles.track} data-disabled={disabled || undefined} aria-hidden=\"true\">\n\t\t\t\t\t\t<div className={styles.thumb} />\n\t\t\t\t\t\t<div className={cn(styles.option, styles.unchecked)}>{uncheckedText}</div>\n\t\t\t\t\t\t<div className={cn(styles.option, styles.checked)}>{checkedText}</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{labelPosition === \"after\" && labelElement}\n\t\t\t</div>\n\t\t\t{description && (\n\t\t\t\t<p id={descriptionId} className={uiStyles.uiDescription}>\n\t\t\t\t\t{description}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n","import { type ComponentProps } from \"react\";\n\nimport {\n\tDEFAULT_STRING_TOGGLE_CHECKED_VALUE,\n\tDEFAULT_STRING_TOGGLE_UNCHECKED_VALUE,\n\tresolveStringToggleStateValue\n} from \"./stringToggleState\";\nimport { Toggle } from \"./Toggle\";\n\n/**\n * Публичный контракт Toggle, который принимает и возвращает два настраиваемых\n * строковых значения вместо boolean.\n */\nexport type StringToggleProps = Omit<ComponentProps<typeof Toggle>, \"value\" | \"onChange\"> & {\n\tcheckedValue?: string;\n\tuncheckedValue?: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n};\n\n/**\n * Адаптирует boolean-состояние Toggle к паре настраиваемых строковых значений.\n */\nexport function StringToggle({\n\tvalue,\n\tonChange,\n\tcheckedValue: configuredCheckedValue,\n\tuncheckedValue: configuredUncheckedValue,\n\tdefaultChecked: _defaultChecked,\n\t...props\n}: StringToggleProps) {\n\t/*\n\t * StringToggle является controlled-компонентом: визуальное состояние всегда\n\t * определяется `value`, поэтому native defaultChecked не передаётся в input.\n\t */\n\tvoid _defaultChecked;\n\n\tconst checkedValue = resolveStringToggleStateValue(configuredCheckedValue, DEFAULT_STRING_TOGGLE_CHECKED_VALUE);\n\tconst uncheckedValue = resolveStringToggleStateValue(configuredUncheckedValue, DEFAULT_STRING_TOGGLE_UNCHECKED_VALUE);\n\tconst isChecked = value === checkedValue;\n\n\treturn <Toggle {...props} value={isChecked} onChange={(checked) => onChange(checked ? checkedValue : uncheckedValue)} />;\n}\n"],"mappings":";;;;;AAIA,IAAa,IAAsC,QACtC,IAAwC;AAMrD,SAAgB,EAA8B,GAAgB,GAA0B;CACvF,OAAO,OAAO,KAAU,WAAW,IAAQ;AAC5C;;;;;;;;;;;;;AEQA,SAAgB,EAAO,EACtB,UACA,gBACA,gBACA,aACA,SACA,cACA,aACA,UACA,IAAI,GACJ,iBAAc,OACd,mBAAgB,QAChB,mBAAgB,UAChB,GAAG,KACY;CACf,IAAM,IAAS,EAAM,GACf,IAAK,KAAc,GACnB,IAAgB,IAAc,GAAG,EAAG,gBAAgB,KAAA,GACpD,IAAO,KAAS,GAChB,IAAY,EAAQ,GACpB,IAAoB,CAAC,KAAQ,CAAC,EAAM,gBAAgB,GAAG,EAAc,KAAK,MAAgB,KAAA,GAE1F,IAAe,IACpB,kBAAC,SAAD;EAAO,SAAS;EAAI,WAAW,EAAS;EACtC,UAAA;CACK,CAAA,IACJ;CAEJ,OACC,kBAAC,OAAD;EACC,WAAW,EAAG,EAAS,WAAW,KAAY,EAAS,UAAU,KAAQ,EAAS,WAAW,KAAQ,EAAS,IAAO,CAAS;EAC9H,iBAAe,KAAY,KAAA;EAF5B,UAAA,CAGC,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACE,MAAkB,YAAY;IAC/B,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAvB,UAAA,CACC,kBAAC,SAAD;MACC,GAAI;MACA;MACJ,MAAK;MACL,MAAK;MACL,SAAS;MACC;MACV,gBAAc;MACd,oBAAkB;MAClB,cAAY;MACZ,WAAW,EAAG,EAAS,gBAAgB,EAAO,KAAK;MACnD,WAAW,MAAU,IAAW,EAAM,cAAc,OAAO;KAC3D,CAAA,GACD,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAO,iBAAe,KAAY,KAAA;MAAW,eAAY;MAAhF,UAAA;OACC,kBAAC,OAAD,EAAK,WAAW,EAAO,MAAQ,CAAA;OAC/B,kBAAC,OAAD;QAAK,WAAW,EAAG,EAAO,QAAQ,EAAO,SAAS;QAAI,UAAA;OAAmB,CAAA;OACzE,kBAAC,OAAD;QAAK,WAAW,EAAG,EAAO,QAAQ,EAAO,OAAO;QAAI,UAAA;OAAiB,CAAA;MACjE;KACD,CAAA,CAAA;;IACJ,MAAkB,WAAW;GAC1B;EACJ,CAAA,GAAA,KACA,kBAAC,KAAD;GAAG,IAAI;GAAe,WAAW,EAAS;GACxC,UAAA;EACC,CAAA,CAEA;;AAEP;;;AC7DA,SAAgB,EAAa,EAC5B,UACA,aACA,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,GAAG,KACkB;CAOrB,IAAM,IAAe,EAA8B,GAAwB,CAAmC,GACxG,IAAiB,EAA8B,GAA0B,CAAqC,GAC9G,IAAY,MAAU;CAE5B,OAAO,kBAAC,GAAD;EAAQ,GAAI;EAAO,OAAO;EAAW,WAAW,MAAY,EAAS,IAAU,IAAe,CAAc;CAAI,CAAA;AACxH"}
|
package/dist/toolbar/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as e, t } from "../chunks/flex-
|
|
1
|
+
import { r as e, t } from "../chunks/flex-C7njxZ74.js";
|
|
2
2
|
import { t as n } from "../chunks/grid-dI94AAbi.js";
|
|
3
3
|
import { Children as r } from "react";
|
|
4
4
|
import { childrenCount as i } from "@ryuzaki13/react-foundation-lib/utils";
|
|
@@ -18,7 +18,6 @@ function u({ children: a, className: u }) {
|
|
|
18
18
|
case l.displayName:
|
|
19
19
|
if (f) throw Error("Toolbar: duplicate <ToolbarEnd> found");
|
|
20
20
|
f = e.props.children;
|
|
21
|
-
break;
|
|
22
21
|
}
|
|
23
22
|
return /* @__PURE__ */ s(e.Container, {
|
|
24
23
|
wrap: !0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, ReactNode } from \"react\";\n\nimport { childrenCount } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { Flex, FlexSpacer } from \"../flex\";\nimport { Grid } from \"../grid\";\n\nexport const ToolbarStart: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarStart.displayName = \"Toolbar.Start\";\n\nexport const ToolbarEnd: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarEnd.displayName = \"Toolbar.End\";\n\ntype ToolbarStartElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarStart>;\ntype ToolbarEndElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarEnd>;\n\ntype ToolbarChildren = [ToolbarStartElement, ToolbarEndElement] | ToolbarStartElement | ToolbarEndElement;\n\ninterface ToolbarProps {\n\tchildren: ToolbarChildren;\n\tclassName?: string;\n}\n\nexport function Toolbar({ children, className }: ToolbarProps) {\n\tlet toolbarStart: ReactNode = null;\n\tlet toolbarEnd: ReactNode = null;\n\n\tconst childArray = Children.toArray(children) as (ToolbarStartElement | ToolbarEndElement)[];\n\n\tfor (const child of childArray) {\n\t\tconst typeName = child.type.displayName;\n\n\t\tswitch (typeName) {\n\t\t\tcase ToolbarStart.displayName:\n\t\t\t\tif (toolbarStart) throw new Error(\"Toolbar: duplicate <ToolbarStart> found\");\n\t\t\t\ttoolbarStart = child.props.children;\n\t\t\t\tbreak;\n\t\t\tcase ToolbarEnd.displayName:\n\t\t\t\tif (toolbarEnd) throw new Error(\"Toolbar: duplicate <ToolbarEnd> found\");\n\t\t\t\ttoolbarEnd = child.props.children;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn (\n\t\t<Flex.Container wrap align=\"center\" gap=\"md\" className={className}>\n\t\t\t{toolbarStart && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarStart)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarStart}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\n\t\t\t<FlexSpacer />\n\n\t\t\t{toolbarEnd && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarEnd)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarEnd}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\t\t</Flex.Container>\n\t);\n}\n"],"mappings":";;;;;;AAOA,IAAa,KAA6C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACzF,EAAa,cAAc;AAE3B,IAAa,KAA2C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACvF,EAAW,cAAc;AAYzB,SAAgB,EAAQ,EAAE,aAAU,gBAA2B;CAC9D,IAAI,IAA0B,MAC1B,IAAwB,MAEtB,IAAa,EAAS,QAAQ,CAAQ;CAE5C,KAAK,IAAM,KAAS,GAGnB,QAFiB,EAAM,KAAK,aAE5B;EACC,KAAK,EAAa;GACjB,IAAI,GAAc,MAAU,MAAM,yCAAyC;GAC3E,IAAe,EAAM,MAAM;GAC3B;EACD,KAAK,EAAW;GACf,IAAI,GAAY,MAAU,MAAM,uCAAuC;GACvE,IAAa,EAAM,MAAM;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, ReactNode } from \"react\";\n\nimport { childrenCount } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { Flex, FlexSpacer } from \"../flex\";\nimport { Grid } from \"../grid\";\n\nexport const ToolbarStart: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarStart.displayName = \"Toolbar.Start\";\n\nexport const ToolbarEnd: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarEnd.displayName = \"Toolbar.End\";\n\ntype ToolbarStartElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarStart>;\ntype ToolbarEndElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarEnd>;\n\ntype ToolbarChildren = [ToolbarStartElement, ToolbarEndElement] | ToolbarStartElement | ToolbarEndElement;\n\ninterface ToolbarProps {\n\tchildren: ToolbarChildren;\n\tclassName?: string;\n}\n\nexport function Toolbar({ children, className }: ToolbarProps) {\n\tlet toolbarStart: ReactNode = null;\n\tlet toolbarEnd: ReactNode = null;\n\n\tconst childArray = Children.toArray(children) as (ToolbarStartElement | ToolbarEndElement)[];\n\n\tfor (const child of childArray) {\n\t\tconst typeName = child.type.displayName;\n\n\t\tswitch (typeName) {\n\t\t\tcase ToolbarStart.displayName:\n\t\t\t\tif (toolbarStart) throw new Error(\"Toolbar: duplicate <ToolbarStart> found\");\n\t\t\t\ttoolbarStart = child.props.children;\n\t\t\t\tbreak;\n\t\t\tcase ToolbarEnd.displayName:\n\t\t\t\tif (toolbarEnd) throw new Error(\"Toolbar: duplicate <ToolbarEnd> found\");\n\t\t\t\ttoolbarEnd = child.props.children;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn (\n\t\t<Flex.Container wrap align=\"center\" gap=\"md\" className={className}>\n\t\t\t{toolbarStart && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarStart)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarStart}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\n\t\t\t<FlexSpacer />\n\n\t\t\t{toolbarEnd && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarEnd)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarEnd}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\t\t</Flex.Container>\n\t);\n}\n"],"mappings":";;;;;;AAOA,IAAa,KAA6C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACzF,EAAa,cAAc;AAE3B,IAAa,KAA2C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACvF,EAAW,cAAc;AAYzB,SAAgB,EAAQ,EAAE,aAAU,gBAA2B;CAC9D,IAAI,IAA0B,MAC1B,IAAwB,MAEtB,IAAa,EAAS,QAAQ,CAAQ;CAE5C,KAAK,IAAM,KAAS,GAGnB,QAFiB,EAAM,KAAK,aAE5B;EACC,KAAK,EAAa;GACjB,IAAI,GAAc,MAAU,MAAM,yCAAyC;GAC3E,IAAe,EAAM,MAAM;GAC3B;EACD,KAAK,EAAW;GACf,IAAI,GAAY,MAAU,MAAM,uCAAuC;GACvE,IAAa,EAAM,MAAM;CAE3B;CAGD,OACC,kBAAC,EAAK,WAAN;EAAgB,MAAA;EAAK,OAAM;EAAS,KAAI;EAAgB;EAAxD,UAAA;GACE,KACA,kBAAC,EAAK,MAAN;IAAW,OAAA;IACV,UAAA,kBAAC,EAAK,WAAN;KACC,iBAAiB,UAAU,EAAc,CAAY,EAAE;KACvD,OAAM;KACN,KAAI;KACH,UAAA;IACc,CAAA;GACN,CAAA;GAGZ,kBAAC,GAAD,CAAa,CAAA;GAEZ,KACA,kBAAC,EAAK,MAAN;IAAW,OAAA;IACV,UAAA,kBAAC,EAAK,WAAN;KACC,iBAAiB,UAAU,EAAc,CAAU,EAAE;KACrD,OAAM;KACN,KAAI;KACH,UAAA;IACc,CAAA;GACN,CAAA;EAEG;;AAElB"}
|
package/dist/tree/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/tree/Tree.module.scss","../../src/tree/Tree.tsx"],"sourcesContent":[".nodeItem {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.treeContainer {\n\tpadding: var(--space-md);\n}\n\n.nestedList {\n\tpadding-left: var(--space-md);\n}\n\n.nestedСounter {\n\tcounter-reset: item;\n\tlist-style-type: none;\n\tpadding-left: var(--space-md);\n\n\t.nestedList {\n\t\tmargin-left: var(--space-md);\n\t}\n\n\tol {\n\t\tcounter-reset: item;\n\t}\n\n\tli {\n\t\tcounter-increment: item;\n\t\tposition: relative;\n\n\t\t&::before {\n\t\t\tcontent: counters(item, \".\") \". \";\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttransform: translateX(calc(-100% - 0.25em));\n\t\t}\n\t}\n}\n","// Tree.tsx\nimport React, { createElement, CSSProperties, KeyboardEvent, useMemo } from \"react\";\n\nimport { cn, handleKeyboardActivation } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./Tree.module.scss\";\n\n/**\n * Базовый тип — любое дерево с возможным полем children\n */\nexport interface TreeNodeBase {\n\tchildren?: readonly TreeNodeBase[] | undefined;\n\t[key: string]: unknown;\n}\n\n/**\n * Пропсы, которые получает callback рендера узла\n */\nexport interface TreeNodeRenderProps<T extends TreeNodeBase> {\n\tnode: T;\n\tlevel: number;\n\thasChildren: boolean;\n\tisLeaf: boolean;\n\tpath: (string | number)[];\n}\n\n/**\n * Основные пропсы компонента Tree\n */\nexport interface TreeProps<T extends TreeNodeBase> {\n\tdata: readonly T[];\n\t/**\n\t * Ключ для дочерних нод (по умолчанию \"children\")\n\t */\n\tchildrenKey?: keyof T;\n\t/**\n\t * Альтернатива childrenKey — функция, возвращающая children\n\t */\n\tgetChildren?: (node: T) => readonly T[] | undefined;\n\t/**\n\t * Как брать ключ для каждого узла (по умолчанию node.id || node.key || index)\n\t */\n\tgetKey?: (node: T, index: number, path: (string | number)[]) => React.Key;\n\t/**\n\t * Функция, которая рисует содержимое узла.\n\t * Если не передана — делается \"разумный\" дефолт (node.title || node.text || JSON).\n\t */\n\trenderNode?: (props: TreeNodeRenderProps<T>) => React.ReactNode;\n\t/**\n\t * Если задано — узел считается интерактивным и будет обёрнут в кнопку для клавиатурной доступности.\n\t */\n\tonNodeClick?: (node: T, path: (string | number)[]) => void;\n\n\t/* Стилизация и классы — внешняя настройка */\n\tcontainerElement?: \"ol\" | \"ul\" | \"div\"; // по умолчанию \"ol\"\n\tcontainerClassName?: string;\n\tcontainerStyle?: CSSProperties;\n\tnestedCounter?: boolean;\n\n\titemClassName?: string;\n\titemStyle?: CSSProperties;\n\n\tnestedListClassName?: string;\n\tnestedListStyle?: CSSProperties;\n\n\tlabelClassName?: string;\n\tlabelStyle?: CSSProperties;\n}\n\n/* ---- Вспомогательные реализации ---- */\n\nconst defaultChildrenKey = \"children\";\n\n/** Умный дефолт для получения ключа */\nfunction defaultGetKey<T extends TreeNodeBase>(node: T, index: number) {\n\t// часто встречающиеся поля — id, key\n\tconst maybeId = (node as Record<string, string>).id ?? (node as Record<string, string>).key;\n\treturn (maybeId as React.Key) ?? index;\n}\n\n/** Умолчание для рендера узла (если пользователь не передал renderNode) */\nfunction defaultRenderNode<T extends TreeNodeBase>({ node, level }: TreeNodeRenderProps<T>) {\n\tconst title = (node as Record<string, string>).title ?? (node as Record<string, string>).text ?? (node as Record<string, string>).label;\n\tif (typeof title === \"string\" || typeof title === \"number\") {\n\t\treturn (\n\t\t\t<div aria-level={level + 1} style={{ display: \"inline-block\" }}>\n\t\t\t\t{title}\n\t\t\t</div>\n\t\t);\n\t}\n\t// fallback — краткое представление объекта\n\treturn <div aria-level={level + 1}>{JSON.stringify(title ?? node)}</div>;\n}\n\n/* ---- Компонент ---- */\n\n/**\n * Универсальный компонент Tree\n * Не использует глобальный state и не знает бизнес-логики — всё через renderNode / callbacks.\n */\nexport function Tree<T extends TreeNodeBase>(props: TreeProps<T>) {\n\tconst {\n\t\tdata,\n\t\tchildrenKey = defaultChildrenKey as keyof T,\n\t\tgetChildren,\n\t\tgetKey = defaultGetKey,\n\t\trenderNode,\n\t\tonNodeClick,\n\t\tcontainerElement = \"ol\",\n\t\tcontainerClassName,\n\t\tcontainerStyle,\n\t\tnestedCounter: isContainerNested,\n\t\titemClassName,\n\t\titemStyle,\n\t\tnestedListClassName,\n\t\tnestedListStyle,\n\t\tlabelClassName,\n\t\tlabelStyle\n\t} = props;\n\n\t/**\n\t * Получить children для ноды — сначала getChildren, иначе node[childrenKey]\n\t */\n\tconst resolveChildren = (node: T): readonly T[] | undefined => {\n\t\tif (typeof getChildren === \"function\") return getChildren(node);\n\t\tconst maybe = node[childrenKey];\n\t\treturn Array.isArray(maybe) ? (maybe as readonly T[]) : undefined;\n\t};\n\n\t/**\n\t * Компонент/функция, рендерящая один узел (рекурсивно)\n\t *\n\t * Определяем как вложенную функцию — она использует замыкания resolveChildren, getKey и т.д.\n\t * Это простая рекурсия, и ключи выставляются родителем при map'е.\n\t */\n\tconst renderNodeRecursively = (node: T, index: number, level: number, path: (string | number)[]): React.ReactElement => {\n\t\tconst children = resolveChildren(node);\n\t\tconst hasChildren = Array.isArray(children) && children.length > 0;\n\t\tconst isLeaf = !hasChildren;\n\n\t\t// Контент узла — либо через renderNode проп, либо дефолтный\n\t\tconst nodeContent =\n\t\t\ttypeof renderNode === \"function\"\n\t\t\t\t? renderNode({ node, level, hasChildren, isLeaf, path })\n\t\t\t\t: defaultRenderNode<T>({ node, level, hasChildren, isLeaf, path });\n\n\t\t// NodeItem — оболочка, которая делает узел интерактивным при наличии onNodeClick\n\t\tfunction NodeItem() {\n\t\t\tconst label = (\n\t\t\t\t<div className={labelClassName} style={labelStyle} aria-current={isLeaf ? undefined : false}>\n\t\t\t\t\t{nodeContent}\n\t\t\t\t</div>\n\t\t\t);\n\n\t\t\tif (!onNodeClick) {\n\t\t\t\t// Неинтерактивный вариант — semantic wrapper (div)\n\t\t\t\treturn <div role=\"presentation\">{label}</div>;\n\t\t\t}\n\n\t\t\t// Интерактивный вариант — кнопка, доступная с клавиатуры\n\t\t\tconst handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\t\t// Enter и Space должны срабатывать как клик\n\t\t\t\thandleKeyboardActivation(e, () => onNodeClick(node, path));\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={() => onNodeClick(node, path)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tdata-ui=\"tree-node-button\"\n\t\t\t\t\tdata-action=\"select-tree-node\"\n\t\t\t\t\t// семантика уровня — aria-level при необходимости можно добавить\n\t\t\t\t\taria-expanded={hasChildren ? true : undefined}\n\t\t\t\t\tstyle={{ background: \"transparent\", border: 0, padding: 0, cursor: \"pointer\" }}>\n\t\t\t\t\t{label}\n\t\t\t\t</button>\n\t\t\t);\n\t\t}\n\n\t\t// Собираем <li> с контентом и, при наличии детей, вложенным списком\n\t\tconst Li = (\n\t\t\t<li key={getKey(node, index, path)} className={cn(styles.nodeItem, itemClassName)} style={itemStyle}>\n\t\t\t\t<NodeItem />\n\n\t\t\t\t{hasChildren &&\n\t\t\t\t\t// дочерний список — используем тот же контейнер, что и root (ol|ul|div)\n\t\t\t\t\tcreateElement(\n\t\t\t\t\t\tcontainerElement,\n\t\t\t\t\t\t{ className: nestedListClassName ?? styles.nestedList, style: nestedListStyle },\n\t\t\t\t\t\tchildren!.map((child, ci) => renderNodeRecursively(child as T, ci, level + 1, [...path, ci]))\n\t\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\n\t\treturn Li;\n\t};\n\n\tconst treeContent = useMemo(\n\t\t() =>\n\t\t\tdata.map((node, i) => {\n\t\t\t\tconst paths: (string | number)[] = [i];\n\t\t\t\treturn renderNodeRecursively(node as T, i, 0, paths);\n\t\t\t}),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[\n\t\t\t// кусок deps — включаем те пропсы, которые влияют на результат\n\t\t\tdata,\n\t\t\tchildrenKey,\n\t\t\t// getChildren и getKey — функции, которые могут быть изменены пользователем\n\t\t\tgetChildren,\n\t\t\tgetKey,\n\t\t\trenderNode,\n\t\t\tonNodeClick,\n\t\t\tcontainerElement,\n\t\t\titemClassName,\n\t\t\titemStyle,\n\t\t\tnestedListClassName,\n\t\t\tnestedListStyle,\n\t\t\tlabelClassName,\n\t\t\tlabelStyle\n\t\t]\n\t);\n\n\t// Рендер внешнего контейнера (по умолчанию ol)\n\treturn createElement(\n\t\tcontainerElement,\n\t\t{\n\t\t\tclassName: cn(containerClassName ?? styles.treeContainer, isContainerNested && styles.nestedСounter),\n\t\t\tstyle: containerStyle\n\t\t},\n\t\ttreeContent\n\t);\n}\n"],"mappings":";;;;;;;;GCuEM,IAAqB;AAG3B,SAAS,EAAsC,GAAS,GAAe;CAGtE,OADiB,EAAgC,MAAO,EAAgC,OACvD;AAClC;AAGA,SAAS,EAA0C,EAAE,SAAM,YAAiC;CAC3F,IAAM,IAAS,EAAgC,SAAU,EAAgC,QAAS,EAAgC;CASlI,OARI,OAAO,KAAU,YAAY,OAAO,KAAU,WAEhD,kBAAC,OAAD;EAAK,cAAY,IAAQ;EAAG,OAAO,EAAE,SAAS,eAAe;YAC3D;CACG,CAAA,IAIA,kBAAC,OAAD;EAAK,cAAY,IAAQ;YAAI,KAAK,UAAU,KAAS,CAAI;CAAO,CAAA;AACxE;AAQA,SAAgB,EAA6B,GAAqB;CACjE,IAAM,EACL,SACA,iBAAc,GACd,gBACA,YAAS,GACT,eACA,gBACA,sBAAmB,MACnB,uBACA,mBACA,eAAe,GACf,kBACA,cACA,wBACA,oBACA,mBACA,kBACG,GAKE,KAAmB,MAAsC;EAC9D,IAAI,OAAO,KAAgB,YAAY,OAAO,EAAY,CAAI;EAC9D,IAAM,IAAQ,EAAK;EACnB,OAAO,MAAM,QAAQ,CAAK,IAAK,IAAyB,KAAA;CACzD,GAQM,KAAyB,GAAS,GAAe,GAAe,MAAkD;EACvH,IAAM,IAAW,EAAgB,CAAI,GAC/B,IAAc,MAAM,QAAQ,CAAQ,KAAK,EAAS,SAAS,GAC3D,IAAS,CAAC,GAGV,IACL,OAAO,KAAe,aACnB,EAAW;GAAE;GAAM;GAAO;GAAa;GAAQ;EAAK,CAAC,IACrD,EAAqB;GAAE;GAAM;GAAO;GAAa;GAAQ;EAAK,CAAC;EAGnE,SAAS,IAAW;GACnB,IAAM,IACL,kBAAC,OAAD;IAAK,WAAW;IAAgB,OAAO;IAAY,gBAAc,IAAS,KAAA,IAAY;cACpF;GACG,CAAA;GAcN,OAXK,IAYJ,kBAAC,UAAD;IACC,MAAK;IACL,eAAe,EAAY,GAAM,CAAI;IACrC,YATqB,MAAwC;KAE9D,EAAyB,SAAS,EAAY,GAAM,CAAI,CAAC;IAC1D;IAOE,WAAQ;IACR,eAAY;IAEZ,iBAAe,IAAc,KAAO,KAAA;IACpC,OAAO;KAAE,YAAY;KAAe,QAAQ;KAAG,SAAS;KAAG,QAAQ;IAAU;cAC5E;GACM,CAAA,IApBD,kBAAC,OAAD;IAAK,MAAK;cAAgB;GAAW,CAAA;EAsB9C;EAiBA,OAbC,kBAAC,MAAD;GAAoC,WAAW,EAAG,EAAO,UAAU,CAAa;GAAG,OAAO;aAA1F,CACC,kBAAC,GAAD,CAAW,CAAA,GAEV,KAEA,EACC,GACA;IAAE,WAAW,KAAuB,EAAO;IAAY,OAAO;GAAgB,GAC9E,EAAU,KAAK,GAAO,MAAO,EAAsB,GAAY,GAAI,IAAQ,GAAG,CAAC,GAAG,GAAM,CAAE,CAAC,CAAC,CAC7F,CACE;KAVK,EAAO,GAAM,GAAO,CAAI,CAa3B;CACR,GAEM,IAAc,QAElB,EAAK,KAAK,GAAM,MAER,EAAsB,GAAW,GAAG,GAAG,CADV,CACU,CAAK,CACnD,GAEF;EAEC;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,CACD;CAGA,OAAO,EACN,GACA;EACC,WAAW,EAAG,KAAsB,EAAO,eAAe,KAAqB,EAAO,aAAa;EACnG,OAAO;CACR,GACA,CACD;AACD"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/tree/Tree.module.scss","../../src/tree/Tree.tsx"],"sourcesContent":[".nodeItem {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.treeContainer {\n\tpadding: var(--space-md);\n}\n\n.nestedList {\n\tpadding-left: var(--space-md);\n}\n\n.nestedСounter {\n\tcounter-reset: item;\n\tlist-style-type: none;\n\tpadding-left: var(--space-md);\n\n\t.nestedList {\n\t\tmargin-left: var(--space-md);\n\t}\n\n\tol {\n\t\tcounter-reset: item;\n\t}\n\n\tli {\n\t\tcounter-increment: item;\n\t\tposition: relative;\n\n\t\t&::before {\n\t\t\tcontent: counters(item, \".\") \". \";\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttransform: translateX(calc(-100% - 0.25em));\n\t\t}\n\t}\n}\n","// Tree.tsx\nimport React, { createElement, CSSProperties, KeyboardEvent, useMemo } from \"react\";\n\nimport { cn, handleKeyboardActivation } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport styles from \"./Tree.module.scss\";\n\n/**\n * Базовый тип — любое дерево с возможным полем children\n */\nexport interface TreeNodeBase {\n\tchildren?: readonly TreeNodeBase[] | undefined;\n\t[key: string]: unknown;\n}\n\n/**\n * Пропсы, которые получает callback рендера узла\n */\nexport interface TreeNodeRenderProps<T extends TreeNodeBase> {\n\tnode: T;\n\tlevel: number;\n\thasChildren: boolean;\n\tisLeaf: boolean;\n\tpath: (string | number)[];\n}\n\n/**\n * Основные пропсы компонента Tree\n */\nexport interface TreeProps<T extends TreeNodeBase> {\n\tdata: readonly T[];\n\t/**\n\t * Ключ для дочерних нод (по умолчанию \"children\")\n\t */\n\tchildrenKey?: keyof T;\n\t/**\n\t * Альтернатива childrenKey — функция, возвращающая children\n\t */\n\tgetChildren?: (node: T) => readonly T[] | undefined;\n\t/**\n\t * Как брать ключ для каждого узла (по умолчанию node.id || node.key || index)\n\t */\n\tgetKey?: (node: T, index: number, path: (string | number)[]) => React.Key;\n\t/**\n\t * Функция, которая рисует содержимое узла.\n\t * Если не передана — делается \"разумный\" дефолт (node.title || node.text || JSON).\n\t */\n\trenderNode?: (props: TreeNodeRenderProps<T>) => React.ReactNode;\n\t/**\n\t * Если задано — узел считается интерактивным и будет обёрнут в кнопку для клавиатурной доступности.\n\t */\n\tonNodeClick?: (node: T, path: (string | number)[]) => void;\n\n\t/* Стилизация и классы — внешняя настройка */\n\tcontainerElement?: \"ol\" | \"ul\" | \"div\"; // по умолчанию \"ol\"\n\tcontainerClassName?: string;\n\tcontainerStyle?: CSSProperties;\n\tnestedCounter?: boolean;\n\n\titemClassName?: string;\n\titemStyle?: CSSProperties;\n\n\tnestedListClassName?: string;\n\tnestedListStyle?: CSSProperties;\n\n\tlabelClassName?: string;\n\tlabelStyle?: CSSProperties;\n}\n\n/* ---- Вспомогательные реализации ---- */\n\nconst defaultChildrenKey = \"children\";\n\n/** Умный дефолт для получения ключа */\nfunction defaultGetKey<T extends TreeNodeBase>(node: T, index: number) {\n\t// часто встречающиеся поля — id, key\n\tconst maybeId = (node as Record<string, string>).id ?? (node as Record<string, string>).key;\n\treturn (maybeId as React.Key) ?? index;\n}\n\n/** Умолчание для рендера узла (если пользователь не передал renderNode) */\nfunction defaultRenderNode<T extends TreeNodeBase>({ node, level }: TreeNodeRenderProps<T>) {\n\tconst title = (node as Record<string, string>).title ?? (node as Record<string, string>).text ?? (node as Record<string, string>).label;\n\tif (typeof title === \"string\" || typeof title === \"number\") {\n\t\treturn (\n\t\t\t<div aria-level={level + 1} style={{ display: \"inline-block\" }}>\n\t\t\t\t{title}\n\t\t\t</div>\n\t\t);\n\t}\n\t// fallback — краткое представление объекта\n\treturn <div aria-level={level + 1}>{JSON.stringify(title ?? node)}</div>;\n}\n\n/* ---- Компонент ---- */\n\n/**\n * Универсальный компонент Tree\n * Не использует глобальный state и не знает бизнес-логики — всё через renderNode / callbacks.\n */\nexport function Tree<T extends TreeNodeBase>(props: TreeProps<T>) {\n\tconst {\n\t\tdata,\n\t\tchildrenKey = defaultChildrenKey as keyof T,\n\t\tgetChildren,\n\t\tgetKey = defaultGetKey,\n\t\trenderNode,\n\t\tonNodeClick,\n\t\tcontainerElement = \"ol\",\n\t\tcontainerClassName,\n\t\tcontainerStyle,\n\t\tnestedCounter: isContainerNested,\n\t\titemClassName,\n\t\titemStyle,\n\t\tnestedListClassName,\n\t\tnestedListStyle,\n\t\tlabelClassName,\n\t\tlabelStyle\n\t} = props;\n\n\t/**\n\t * Получить children для ноды — сначала getChildren, иначе node[childrenKey]\n\t */\n\tconst resolveChildren = (node: T): readonly T[] | undefined => {\n\t\tif (typeof getChildren === \"function\") return getChildren(node);\n\t\tconst maybe = node[childrenKey];\n\t\treturn Array.isArray(maybe) ? (maybe as readonly T[]) : undefined;\n\t};\n\n\t/**\n\t * Компонент/функция, рендерящая один узел (рекурсивно)\n\t *\n\t * Определяем как вложенную функцию — она использует замыкания resolveChildren, getKey и т.д.\n\t * Это простая рекурсия, и ключи выставляются родителем при map'е.\n\t */\n\tconst renderNodeRecursively = (node: T, index: number, level: number, path: (string | number)[]): React.ReactElement => {\n\t\tconst children = resolveChildren(node);\n\t\tconst hasChildren = Array.isArray(children) && children.length > 0;\n\t\tconst isLeaf = !hasChildren;\n\n\t\t// Контент узла — либо через renderNode проп, либо дефолтный\n\t\tconst nodeContent =\n\t\t\ttypeof renderNode === \"function\"\n\t\t\t\t? renderNode({ node, level, hasChildren, isLeaf, path })\n\t\t\t\t: defaultRenderNode<T>({ node, level, hasChildren, isLeaf, path });\n\n\t\t// NodeItem — оболочка, которая делает узел интерактивным при наличии onNodeClick\n\t\tfunction NodeItem() {\n\t\t\tconst label = (\n\t\t\t\t<div className={labelClassName} style={labelStyle} aria-current={isLeaf ? undefined : false}>\n\t\t\t\t\t{nodeContent}\n\t\t\t\t</div>\n\t\t\t);\n\n\t\t\tif (!onNodeClick) {\n\t\t\t\t// Неинтерактивный вариант — semantic wrapper (div)\n\t\t\t\treturn <div role=\"presentation\">{label}</div>;\n\t\t\t}\n\n\t\t\t// Интерактивный вариант — кнопка, доступная с клавиатуры\n\t\t\tconst handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\t\t// Enter и Space должны срабатывать как клик\n\t\t\t\thandleKeyboardActivation(e, () => onNodeClick(node, path));\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={() => onNodeClick(node, path)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tdata-ui=\"tree-node-button\"\n\t\t\t\t\tdata-action=\"select-tree-node\"\n\t\t\t\t\t// семантика уровня — aria-level при необходимости можно добавить\n\t\t\t\t\taria-expanded={hasChildren ? true : undefined}\n\t\t\t\t\tstyle={{ background: \"transparent\", border: 0, padding: 0, cursor: \"pointer\" }}>\n\t\t\t\t\t{label}\n\t\t\t\t</button>\n\t\t\t);\n\t\t}\n\n\t\t// Собираем <li> с контентом и, при наличии детей, вложенным списком\n\t\tconst Li = (\n\t\t\t<li key={getKey(node, index, path)} className={cn(styles.nodeItem, itemClassName)} style={itemStyle}>\n\t\t\t\t<NodeItem />\n\n\t\t\t\t{hasChildren &&\n\t\t\t\t\t// дочерний список — используем тот же контейнер, что и root (ol|ul|div)\n\t\t\t\t\tcreateElement(\n\t\t\t\t\t\tcontainerElement,\n\t\t\t\t\t\t{ className: nestedListClassName ?? styles.nestedList, style: nestedListStyle },\n\t\t\t\t\t\tchildren!.map((child, ci) => renderNodeRecursively(child as T, ci, level + 1, [...path, ci]))\n\t\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\n\t\treturn Li;\n\t};\n\n\tconst treeContent = useMemo(\n\t\t() =>\n\t\t\tdata.map((node, i) => {\n\t\t\t\tconst paths: (string | number)[] = [i];\n\t\t\t\treturn renderNodeRecursively(node as T, i, 0, paths);\n\t\t\t}),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[\n\t\t\t// кусок deps — включаем те пропсы, которые влияют на результат\n\t\t\tdata,\n\t\t\tchildrenKey,\n\t\t\t// getChildren и getKey — функции, которые могут быть изменены пользователем\n\t\t\tgetChildren,\n\t\t\tgetKey,\n\t\t\trenderNode,\n\t\t\tonNodeClick,\n\t\t\tcontainerElement,\n\t\t\titemClassName,\n\t\t\titemStyle,\n\t\t\tnestedListClassName,\n\t\t\tnestedListStyle,\n\t\t\tlabelClassName,\n\t\t\tlabelStyle\n\t\t]\n\t);\n\n\t// Рендер внешнего контейнера (по умолчанию ol)\n\treturn createElement(\n\t\tcontainerElement,\n\t\t{\n\t\t\tclassName: cn(containerClassName ?? styles.treeContainer, isContainerNested && styles.nestedСounter),\n\t\t\tstyle: containerStyle\n\t\t},\n\t\ttreeContent\n\t);\n}\n"],"mappings":";;;;;;;;GCuEM,IAAqB;AAG3B,SAAS,EAAsC,GAAS,GAAe;CAGtE,OADiB,EAAgC,MAAO,EAAgC,OACvD;AAClC;AAGA,SAAS,EAA0C,EAAE,SAAM,YAAiC;CAC3F,IAAM,IAAS,EAAgC,SAAU,EAAgC,QAAS,EAAgC;CASlI,OARI,OAAO,KAAU,YAAY,OAAO,KAAU,WAEhD,kBAAC,OAAD;EAAK,cAAY,IAAQ;EAAG,OAAO,EAAE,SAAS,eAAe;EAC3D,UAAA;CACG,CAAA,IAIA,kBAAC,OAAD;EAAK,cAAY,IAAQ;EAAI,UAAA,KAAK,UAAU,KAAS,CAAI;CAAO,CAAA;AACxE;AAQA,SAAgB,EAA6B,GAAqB;CACjE,IAAM,EACL,SACA,iBAAc,GACd,gBACA,YAAS,GACT,eACA,gBACA,sBAAmB,MACnB,uBACA,mBACA,eAAe,GACf,kBACA,cACA,wBACA,oBACA,mBACA,kBACG,GAKE,KAAmB,MAAsC;EAC9D,IAAI,OAAO,KAAgB,YAAY,OAAO,EAAY,CAAI;EAC9D,IAAM,IAAQ,EAAK;EACnB,OAAO,MAAM,QAAQ,CAAK,IAAK,IAAyB,KAAA;CACzD,GAQM,KAAyB,GAAS,GAAe,GAAe,MAAkD;EACvH,IAAM,IAAW,EAAgB,CAAI,GAC/B,IAAc,MAAM,QAAQ,CAAQ,KAAK,EAAS,SAAS,GAC3D,IAAS,CAAC,GAGV,IACL,OAAO,KAAe,aACnB,EAAW;GAAE;GAAM;GAAO;GAAa;GAAQ;EAAK,CAAC,IACrD,EAAqB;GAAE;GAAM;GAAO;GAAa;GAAQ;EAAK,CAAC;EAGnE,SAAS,IAAW;GACnB,IAAM,IACL,kBAAC,OAAD;IAAK,WAAW;IAAgB,OAAO;IAAY,gBAAc,IAAS,KAAA,IAAY;IACpF,UAAA;GACG,CAAA;GAcN,OAXK,IAYJ,kBAAC,UAAD;IACC,MAAK;IACL,eAAe,EAAY,GAAM,CAAI;IACrC,YATqB,MAAwC;KAE9D,EAAyB,SAAS,EAAY,GAAM,CAAI,CAAC;IAC1D;IAOE,WAAQ;IACR,eAAY;IAEZ,iBAAe,IAAc,KAAO,KAAA;IACpC,OAAO;KAAE,YAAY;KAAe,QAAQ;KAAG,SAAS;KAAG,QAAQ;IAAU;IAC5E,UAAA;GACM,CAAA,IApBD,kBAAC,OAAD;IAAK,MAAK;IAAgB,UAAA;GAAW,CAAA;EAsB9C;EAiBA,OAbC,kBAAC,MAAD;GAAoC,WAAW,EAAG,EAAO,UAAU,CAAa;GAAG,OAAO;GAA1F,UAAA,CACC,kBAAC,GAAD,CAAW,CAAA,GAEV,KAEA,EACC,GACA;IAAE,WAAW,KAAuB,EAAO;IAAY,OAAO;GAAgB,GAC9E,EAAU,KAAK,GAAO,MAAO,EAAsB,GAAY,GAAI,IAAQ,GAAG,CAAC,GAAG,GAAM,CAAE,CAAC,CAAC,CAC7F,CACE;EAVK,GAAA,EAAO,GAAM,GAAO,CAAI,CAa3B;CACR,GAEM,IAAc,QAElB,EAAK,KAAK,GAAM,MAER,EAAsB,GAAW,GAAG,GAAG,CADV,CACU,CAAK,CACnD,GAEF;EAEC;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,CACD;CAGA,OAAO,EACN,GACA;EACC,WAAW,EAAG,KAAsB,EAAO,eAAe,KAAqB,EAAO,aAAa;EACnG,OAAO;CACR,GACA,CACD;AACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreePickerBase.d.ts","sourceRoot":"","sources":["../../src/tree-select/TreePickerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAsE,MAAM,OAAO,CAAC;AAkB1H,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAgBvC,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEvE,KAAK,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC3E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACxB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,4BAA4B,CAAC;IAC7C,uBAAuB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACnC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,KAAK,EACL,WAAW,EACX,UAAU,EACV,aAAa,EACb,aAAsB,EACtB,uBAAuB,EACvB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAW,EACX,WAAuB,EACvB,eAAe,EACf,mBAAmB,EACnB,KAAK,EACL,YAAY,EACZ,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,EAAE,mBAAmB,+
|
|
1
|
+
{"version":3,"file":"TreePickerBase.d.ts","sourceRoot":"","sources":["../../src/tree-select/TreePickerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAsE,MAAM,OAAO,CAAC;AAkB1H,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAgBvC,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEvE,KAAK,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC3E,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACxB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,4BAA4B,CAAC;IAC7C,uBAAuB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACnC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,KAAK,EACL,WAAW,EACX,UAAU,EACV,aAAa,EACb,aAAsB,EACtB,uBAAuB,EACvB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,WAAW,EACX,WAAuB,EACvB,eAAe,EACf,mBAAmB,EACnB,KAAK,EACL,YAAY,EACZ,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,EAAE,mBAAmB,+BA2XrB"}
|