@ryuzaki13/react-foundation-ui 1.6.15 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -0
- package/dist/advanced-search/index.js +2 -2
- package/dist/base-table/index.js +2 -2
- package/dist/base-table/lib/columnPinning.d.ts +15 -17
- package/dist/base-table/lib/columnPinning.d.ts.map +1 -1
- package/dist/base-table/lib/mergeDuplicates.d.ts +4 -4
- package/dist/base-table/lib/mergeDuplicates.d.ts.map +1 -1
- package/dist/base-table/model/useTableColumnPinning.d.ts +2 -2
- package/dist/base-table/model/useTableColumnVisibility.d.ts +7 -6
- package/dist/base-table/model/useTableColumnVisibility.d.ts.map +1 -1
- package/dist/base-table/ui/BaseTable.d.ts +8 -9
- package/dist/base-table/ui/BaseTable.d.ts.map +1 -1
- package/dist/base-table/ui/BaseTableHeaderCell.d.ts +6 -6
- package/dist/base-table/ui/BaseTableHeaderCell.d.ts.map +1 -1
- package/dist/chunks/{base-table-CTafaxo2.js → base-table-DNSYOO9t.js} +29 -29
- package/dist/chunks/base-table-DNSYOO9t.js.map +1 -0
- package/dist/chunks/{multi-select-Bs1GU5MD.js → multi-select-Clsst6DE.js} +129 -118
- package/dist/chunks/{multi-select-Bs1GU5MD.js.map → multi-select-Clsst6DE.js.map} +1 -1
- package/dist/chunks/odata-dependent-C_DCbKY2.js +45 -0
- package/dist/chunks/odata-dependent-C_DCbKY2.js.map +1 -0
- package/dist/chunks/select-B0xc6g81.js +355 -0
- package/dist/chunks/select-B0xc6g81.js.map +1 -0
- package/dist/chunks/{table-DOwANXnt.js → table-RO4dfMAj.js} +9 -9
- package/dist/chunks/table-RO4dfMAj.js.map +1 -0
- package/dist/multi-select/index.js +1 -1
- package/dist/multi-select/ui/ODataDependentMultiSelect.d.ts +5 -13
- package/dist/multi-select/ui/ODataDependentMultiSelect.d.ts.map +1 -1
- package/dist/multi-select/ui/ODataDependentSegmentMultiSelect.d.ts +3 -20
- package/dist/multi-select/ui/ODataDependentSegmentMultiSelect.d.ts.map +1 -1
- package/dist/odata-dependent/ODataDependentSegmentControlProps.d.ts +29 -0
- package/dist/odata-dependent/ODataDependentSegmentControlProps.d.ts.map +1 -0
- package/dist/odata-dependent/index.d.ts +3 -0
- package/dist/odata-dependent/index.d.ts.map +1 -0
- package/dist/odata-dependent/index.js +2 -0
- package/dist/odata-dependent/model/useODataDependentSelection.d.ts +50 -0
- package/dist/odata-dependent/model/useODataDependentSelection.d.ts.map +1 -0
- package/dist/preset-select/index.js +1 -1
- package/dist/select/ODataDependentSegmentSelect.d.ts +12 -0
- package/dist/select/ODataDependentSegmentSelect.d.ts.map +1 -0
- package/dist/select/index.d.ts +1 -0
- package/dist/select/index.d.ts.map +1 -1
- package/dist/select/index.js +2 -2
- package/dist/simple-table/SimpleTable.d.ts +2 -2
- package/dist/simple-table/SimpleTable.d.ts.map +1 -1
- package/dist/simple-table/index.js +7 -10
- package/dist/simple-table/index.js.map +1 -1
- package/dist/state-select/index.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/table/Table.d.ts +7 -8
- package/dist/table/Table.d.ts.map +1 -1
- package/dist/table/index.js +1 -1
- package/dist/tree-select/index.js +1 -1
- package/dist/tree-table/TreeTable.d.ts +7 -8
- package/dist/tree-table/TreeTable.d.ts.map +1 -1
- package/dist/tree-table/index.js +104 -105
- package/dist/tree-table/index.js.map +1 -1
- package/package.json +13 -9
- package/storybook-static/assets/{Badge-y59HS6Mh.js → Badge-Dis0WdSI.js} +1 -1
- package/storybook-static/assets/{Badge.stories-CmAFVzHL.js → Badge.stories-DKUJOyg3.js} +1 -1
- package/storybook-static/assets/{BadgeList-B-LJdCLU.js → BadgeList-C_ImRsat.js} +1 -1
- package/storybook-static/assets/{Button-CbGK6ujA.js → Button-BSsRzaxX.js} +1 -1
- package/storybook-static/assets/{Button-CVhc13mG.js → Button-DxGg9rB3.js} +1 -1
- package/storybook-static/assets/{Button.stories-BxBE5epv.js → Button.stories-fHvDvt2w.js} +1 -1
- package/storybook-static/assets/{CalendarView-DC1MoZHd.js → CalendarView-BFcwl9Vq.js} +1 -1
- package/storybook-static/assets/{CheckBox-CJuQmvgS.js → CheckBox-CSbi2BEU.js} +1 -1
- package/storybook-static/assets/{CheckBox-CTF0MTwi.js → CheckBox-SuVeN-FY.js} +1 -1
- package/storybook-static/assets/{CheckBox.stories-Cgcw4ZWi.js → CheckBox.stories-C6PF0zG1.js} +1 -1
- package/storybook-static/assets/{Color-6AOWCN3U-BQ0wHxzY.js → Color-6AOWCN3U-DX3p6XEG.js} +1 -1
- package/storybook-static/assets/{ContextMenu-DKFfj-4J.js → ContextMenu-BhGu3QoC.js} +1 -1
- package/storybook-static/assets/{ContextMenu-CHa5JD2q.js → ContextMenu-f0QZPgBQ.js} +1 -1
- package/storybook-static/assets/{ContextMenu.stories-BrFpb6Zf.js → ContextMenu.stories-V9d5mjak.js} +1 -1
- package/storybook-static/assets/{DateInput-C4NbLkP1.js → DateInput-BmL4c3wO.js} +1 -1
- package/storybook-static/assets/{DateInput-DMar_jSh.js → DateInput-C0K0JvWe.js} +1 -1
- package/storybook-static/assets/{DateInput.stories-9NUN5Y-h.js → DateInput.stories-65WMYAML.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect-C2YQ1Ta2.js → DateRangePresetSelect-DVAqXJt1.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect-BNM2Z8v-.js → DateRangePresetSelect-DdpNa-Yj.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect.stories-CU57n31Y.js → DateRangePresetSelect.stories-BGgd7TOu.js} +1 -1
- package/storybook-static/assets/{Detail-ClrynTH8.js → Detail-1rmVP04K.js} +1 -1
- package/storybook-static/assets/{Detail.stories-D8uN6AEx.js → Detail.stories-CW2YXAPy.js} +1 -1
- package/storybook-static/assets/{Dialog-F6geiNP6.js → Dialog-CszRheXL.js} +1 -1
- package/storybook-static/assets/{Dialog-B3yVDNey.js → Dialog-DcdGv_Bv.js} +1 -1
- package/storybook-static/assets/{Dialog.stories-BUISgmFq.js → Dialog.stories-CN9vtGuI.js} +1 -1
- package/storybook-static/assets/{Disclosure-D8eee9jT.js → Disclosure-DWeZZ2i8.js} +1 -1
- package/storybook-static/assets/{Disclosure.stories-C81bKGvm.js → Disclosure.stories-pZXR5BOM.js} +1 -1
- package/storybook-static/assets/{DisclosureGroup-Dql74J3c.js → DisclosureGroup-BWba17wI.js} +1 -1
- package/storybook-static/assets/{DocsRenderer-JROSPFPF-B_i8iiBi.js → DocsRenderer-JROSPFPF-BYN3Mg4U.js} +1 -1
- package/storybook-static/assets/{DropZone-CjYwzdtm.js → DropZone-BCe20YiO.js} +1 -1
- package/storybook-static/assets/{DropZone-CWU49UGV.js → DropZone-ByDIyQgI.js} +1 -1
- package/storybook-static/assets/{DropZone.stories-Bu9astzV.js → DropZone.stories-CLXe7D8H.js} +1 -1
- package/storybook-static/assets/{DropdownMenu-CIQZ1s_d.js → DropdownMenu-BD-pc32j.js} +1 -1
- package/storybook-static/assets/{ExpandableActionPanel-a-wSXVqz.js → ExpandableActionPanel-v-DZaEKX.js} +1 -1
- package/storybook-static/assets/{ExpandableActionPanel.stories-B5kDNMOA.js → ExpandableActionPanel.stories-BhHYM4mJ.js} +1 -1
- package/storybook-static/assets/{Flex-C-LVVZu8.js → Flex-DukB58MF.js} +1 -1
- package/storybook-static/assets/{Flex.stories-C3UyARP_.js → Flex.stories-DQmoW5jb.js} +1 -1
- package/storybook-static/assets/{FloatingPopover-C3jr4qCd.js → FloatingPopover-fnwAyZil.js} +1 -1
- package/storybook-static/assets/{FormattedTableCell-CY3E21k8.css → FormattedTableCell-AZc2IHfK.css} +1 -1
- package/storybook-static/assets/FormattedTableCell-CK1yXePp.js +15 -0
- package/storybook-static/assets/{Grid-T44eQhRH.js → Grid-BoLaxbR_.js} +1 -1
- package/storybook-static/assets/{Grid.stories-CCyTn5oG.js → Grid.stories-CSuOTbao.js} +1 -1
- package/storybook-static/assets/{ImageCropper.stories-Ctj0tTWD.js → ImageCropper.stories-BRi_qlO4.js} +1 -1
- package/storybook-static/assets/{ImageRenderer-BmzXaLnX.js → ImageRenderer-BiV2g53B.js} +1 -1
- package/storybook-static/assets/{ImageRenderer.stories-BchLDd9U.js → ImageRenderer.stories-Da7QE7_Q.js} +1 -1
- package/storybook-static/assets/{ImageView.stories-wZChQ7t6.js → ImageView.stories-DSFBxOa6.js} +1 -1
- package/storybook-static/assets/{ImageViewer.stories-CjwPt6ux.js → ImageViewer.stories-D2rcovap.js} +2 -2
- package/storybook-static/assets/{ImageViewerRuntime-CwHTx5CR.js → ImageViewerRuntime-B2CS1UFL.js} +1 -1
- package/storybook-static/assets/{Input-B9nkOQ6L.js → Input-BIy4zhlA.js} +1 -1
- package/storybook-static/assets/{Input-ByxjsYlG.js → Input-CVs7SVMJ.js} +1 -1
- package/storybook-static/assets/{Input.stories-Bcyy4kLt.js → Input.stories-BBXrateo.js} +1 -1
- package/storybook-static/assets/{InputDateTime-DfpHtYTi.js → InputDateTime-VUiW2Znv.js} +1 -1
- package/storybook-static/assets/{InputDateTime.stories-WDuCOx_6.js → InputDateTime.stories-lqECZY7T.js} +1 -1
- package/storybook-static/assets/{InputFile-DAko5xMV.js → InputFile-D0aHVW1q.js} +1 -1
- package/storybook-static/assets/{InputFile-DQUxyiai.js → InputFile-DEeRFq2f.js} +1 -1
- package/storybook-static/assets/{InputFile.stories-X6set_bl.js → InputFile.stories-9fBhIus4.js} +1 -1
- package/storybook-static/assets/{InputFiles-CYo3-wOK.js → InputFiles-C_KIqiN9.js} +1 -1
- package/storybook-static/assets/{InputFiles-B0Gs4B9M.js → InputFiles-DTy038xW.js} +1 -1
- package/storybook-static/assets/{InputFiles.stories-D04gwM6v.js → InputFiles.stories-CspkI6-Y.js} +1 -1
- package/storybook-static/assets/{InputFilesList-V2ras_Is.js → InputFilesList-BQdSFOI1.js} +1 -1
- package/storybook-static/assets/{InputImage-CuuPUX-y.js → InputImage-C0kyUtT0.js} +1 -1
- package/storybook-static/assets/{InputImage-CsAsZufs.js → InputImage-VJaqApEh.js} +1 -1
- package/storybook-static/assets/{InputImage.stories-ClhlRcMN.js → InputImage.stories-DKXeva5i.js} +1 -1
- package/storybook-static/assets/{InteractiveComponents-BjG6Uxcq.js → InteractiveComponents-B8zzCcZ_.js} +1 -1
- package/storybook-static/assets/{InteractiveComponents.stories-ljjqMc9s.js → InteractiveComponents.stories-DP0Jma43.js} +1 -1
- package/storybook-static/assets/{LayoutPicker-C3i1T7zB.js → LayoutPicker-BpcPcCDz.js} +1 -1
- package/storybook-static/assets/{LayoutPicker-C1APKtbC.js → LayoutPicker-DjUZ5y7M.js} +1 -1
- package/storybook-static/assets/{LayoutPicker.stories-Cn66HQfj.js → LayoutPicker.stories-POpVHww7.js} +1 -1
- package/storybook-static/assets/{Listbox-BhzabNF9.js → Listbox-Cg1OczYK.js} +1 -1
- package/storybook-static/assets/{Listbox-BQZFMdE4.js → Listbox-gHitzePa.js} +1 -1
- package/storybook-static/assets/{Listbox.stories-BmKd1TN6.js → Listbox.stories-Dw3IdYZA.js} +1 -1
- package/storybook-static/assets/{Modal-CrDusmmr.js → Modal-CY7qfD1u.js} +1 -1
- package/storybook-static/assets/{Modal.stories-CK7BwByp.js → Modal.stories-Boa7oW-a.js} +1 -1
- package/storybook-static/assets/{ModalManagerProvider-CP_LR9Sf.js → ModalManagerProvider-GYXaQe-7.js} +1 -1
- package/storybook-static/assets/{MultiSelect-DY9PZi68.js → MultiSelect-D8qN-i5f.js} +1 -1
- package/storybook-static/assets/{MultiSelect-DnqTZr96.js → MultiSelect-DToMWi-I.js} +1 -1
- package/storybook-static/assets/{MultiSelect.stories-CVX122Ie.js → MultiSelect.stories-DLuXOl9Q.js} +1 -1
- package/storybook-static/assets/{NoData-DtfUdNbp.js → NoData-Bzj7vNCz.js} +1 -1
- package/storybook-static/assets/{NotificationsHost-7zqHt4bx.js → NotificationsHost-Bs93X8Nv.js} +1 -1
- package/storybook-static/assets/{NotificationsHost.stories-Idv-3hmN.js → NotificationsHost.stories-DxVOVOf8.js} +1 -1
- package/storybook-static/assets/{ODataMultiSelect-CvzIsU5t.js → ODataMultiSelect-Dh33YJP6.js} +3 -2
- package/storybook-static/assets/ODataMultiSelect.stories-DUmFRMTU.js +139 -0
- package/storybook-static/assets/{ODataSelect-Cg4PjB9T.js → ODataSelect-lpN9sKth.js} +3 -1
- package/storybook-static/assets/ODataSelect.stories-BkFs5uIY.js +161 -0
- package/storybook-static/assets/{ODataTreeMultiSelect-DovHjUl1.js → ODataTreeMultiSelect-DFY2FJBX.js} +1 -1
- package/storybook-static/assets/{ODataTreeMultiSelect.stories-DgzqY4r0.js → ODataTreeMultiSelect.stories-B_Izm4eH.js} +1 -1
- package/storybook-static/assets/{ODataTreeSelect-JJ2vuX2u.js → ODataTreeSelect-DdniMRRE.js} +1 -1
- package/storybook-static/assets/{ODataTreeSelect.stories-C1htwHhJ.js → ODataTreeSelect.stories-DxNhuLVU.js} +1 -1
- package/storybook-static/assets/{OneStepScroller-Cj_Sots6.js → OneStepScroller-CHvIHlYx.js} +1 -1
- package/storybook-static/assets/{PeriodSelect-BCmsFuv0.js → PeriodSelect-BgAak8GG.js} +1 -1
- package/storybook-static/assets/{PeriodSelect-umbZa6Vz.js → PeriodSelect-T1qaj11S.js} +1 -1
- package/storybook-static/assets/{PeriodSelect.stories-iZew0d5P.js → PeriodSelect.stories-DYEtD47p.js} +1 -1
- package/storybook-static/assets/{PickerSelectionToolbar-BpRSRbT3.js → PickerSelectionToolbar-DWtGYc4E.js} +1 -1
- package/storybook-static/assets/{PickerTriggerActions-BBpUiawn.js → PickerTriggerActions-BIH8_o_b.js} +1 -1
- package/storybook-static/assets/{Popover-DlwBQ91i.js → Popover-BVP-wMdK.js} +1 -1
- package/storybook-static/assets/{Popover-COZU5MVS.js → Popover-DQKHL6wc.js} +1 -1
- package/storybook-static/assets/{Popover.stories-BsjqePTd.js → Popover.stories-Pt4-7Aof.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput-Dk5jJC5w.js → PresetRangeDateInput-C4_NegG_.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput-QfbYKw0Z.js → PresetRangeDateInput-DQ3rlCp5.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput.stories-BuykZTZe.js → PresetRangeDateInput.stories-3AzmySZv.js} +1 -1
- package/storybook-static/assets/{PresetSelect-CZ7mJxKl.js → PresetSelect-BTh53LoO.js} +1 -1
- package/storybook-static/assets/{RadioButton-_kpqtWIo.js → RadioButton-BfBSX73Y.js} +1 -1
- package/storybook-static/assets/{RadioButton-ism7L8zl.js → RadioButton-Ci25eUL_.js} +1 -1
- package/storybook-static/assets/{RadioButton.stories-DfjhjPnV.js → RadioButton.stories-JVGXFlz8.js} +1 -1
- package/storybook-static/assets/{RadioGroup-DxYjpIR1.js → RadioGroup-CL7EHd6O.js} +1 -1
- package/storybook-static/assets/{RadioGroup-B7so-JDF.js → RadioGroup-CW39hD_-.js} +1 -1
- package/storybook-static/assets/{RadioGroup.stories-DpVtRTBk.js → RadioGroup.stories-MS9Jl6AT.js} +1 -1
- package/storybook-static/assets/{Scrollable-D6rD81Kz.js → Scrollable-Bo4197LC.js} +1 -1
- package/storybook-static/assets/{Select-DffwCANA.js → Select-CxQqH8H5.js} +1 -1
- package/storybook-static/assets/{Select-Ci-axJ2e.js → Select-DBsWg0wv.js} +1 -1
- package/storybook-static/assets/{Select.stories-C9LrrykH.js → Select.stories-DfjNWXba.js} +1 -1
- package/storybook-static/assets/{SelectOptionContent-DFbLFeJp.js → SelectOptionContent-Bie2pzia.js} +1 -1
- package/storybook-static/assets/{SerializableSelect-CE_lhNql.js → SerializableSelect-BktENdyg.js} +1 -1
- package/storybook-static/assets/{SerializableSelect.stories-DV6F91Gh.js → SerializableSelect.stories-B8zxcu66.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput-DaL7cpjM.js → SingleDateTimeInput-DZBRm3dM.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput-CGEUodYr.js → SingleDateTimeInput-DvpU1DkI.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput.stories-C7qfFiPV.js → SingleDateTimeInput.stories-Bku5Zc05.js} +1 -1
- package/storybook-static/assets/{Slider-BrukeE6j.js → Slider-BJkB6IoW.js} +1 -1
- package/storybook-static/assets/{Slider-m5BO0wFz.js → Slider-BN2xXBOi.js} +1 -1
- package/storybook-static/assets/{Slider.stories-CNqzSJqp.js → Slider.stories-CM3yNojO.js} +1 -1
- package/storybook-static/assets/{SliderInput-D0UlZx-t.js → SliderInput-2ZiuvbpQ.js} +1 -1
- package/storybook-static/assets/{SliderInput-CS9d2VpF.js → SliderInput-CPX2bJK3.js} +1 -1
- package/storybook-static/assets/{SliderInput.stories-B5-aln-T.js → SliderInput.stories-dJX-tRtA.js} +1 -1
- package/storybook-static/assets/{Sortable-CSt-VcmM.js → Sortable-Bkr-xnO4.js} +1 -1
- package/storybook-static/assets/{Sortable.stories-CVUdrXGv.js → Sortable.stories-BPEg99e5.js} +1 -1
- package/storybook-static/assets/{Splitter-DcsxH_9j.js → Splitter-D4en_f5n.js} +1 -1
- package/storybook-static/assets/{Splitter.stories-BBfUYDeq.js → Splitter.stories-Cynn_kHV.js} +1 -1
- package/storybook-static/assets/{StateSelect-BDJRQxjc.js → StateSelect-BgbwMGGc.js} +1 -1
- package/storybook-static/assets/{StateSelect-CCQIdUHC.js → StateSelect-PcH0VuO_.js} +1 -1
- package/storybook-static/assets/{StateSelect.stories-7wPKSG6b.js → StateSelect.stories-CShqVH9Y.js} +1 -1
- package/storybook-static/assets/{StringToggle.stories-DRiRwW1z.js → StringToggle.stories-CypR3oB_.js} +1 -1
- package/storybook-static/assets/{Switch-Cw3jDgSx.js → Switch-BVN6TcVZ.js} +1 -1
- package/storybook-static/assets/{Switch-BtZXCfQa.js → Switch-D-cSDh8j.js} +1 -1
- package/storybook-static/assets/{Switch.stories-DprDLnyc.js → Switch.stories-C0s7gvBf.js} +1 -1
- package/storybook-static/assets/{Table-C0C6gEXh.js → Table-CwXJDDe6.js} +1 -1
- package/storybook-static/assets/Table.stories-vqttnROX.js +207 -0
- package/storybook-static/assets/{Tabs-Cmm9Be8c.js → Tabs-BRSEvQpk.js} +1 -1
- package/storybook-static/assets/{Tabs.stories-TZO3cqOu.js → Tabs.stories-R_7jiTQc.js} +1 -1
- package/storybook-static/assets/{TabsBox-CMleIsIx.js → TabsBox-CqSxAUdJ.js} +1 -1
- package/storybook-static/assets/{TagInput-C1w6bPXM.js → TagInput-C3ahaF-B.js} +1 -1
- package/storybook-static/assets/{TagInput.stories-DjZGRNf8.js → TagInput.stories-C3O2gBUY.js} +1 -1
- package/storybook-static/assets/{Text-B7BlP612.js → Text-b8fMr5Hd.js} +1 -1
- package/storybook-static/assets/{Textarea-QCTMJrzh.js → Textarea-BDL_MwcM.js} +1 -1
- package/storybook-static/assets/{Textarea-CR1BsDCZ.js → Textarea-CCgxNL6F.js} +1 -1
- package/storybook-static/assets/{Textarea.stories-BXVDnedp.js → Textarea.stories-kc_LXBix.js} +1 -1
- package/storybook-static/assets/{TimePanel-sVNwfNVp.js → TimePanel-BCotjEKQ.js} +1 -1
- package/storybook-static/assets/{TimePanel.stories-CgWwUSUo.js → TimePanel.stories-B8paqA-_.js} +1 -1
- package/storybook-static/assets/{Toggle-yuE_iKax.js → Toggle-CT4IyZPI.js} +1 -1
- package/storybook-static/assets/{Toggle-CsN8aXvZ.js → Toggle-CbsKNs_c.js} +1 -1
- package/storybook-static/assets/{Toggle.stories-cYH_nCrO.js → Toggle.stories-YsQZk4DA.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect-BUZ-QzJc.js → TreeMultiSelect-CmAa_Gin.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect-Bb8lGllH.js → TreeMultiSelect-DRLoUCXF.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect.stories-x-F-Y4_h.js → TreeMultiSelect.stories-CV65ZVUo.js} +1 -1
- package/storybook-static/assets/{TreePickerBase-DOT734vD.js → TreePickerBase-rB-Q9Uwf.js} +1 -1
- package/storybook-static/assets/{TreeSelect-DDgqDh2L.js → TreeSelect-CsYGUC6s.js} +1 -1
- package/storybook-static/assets/{TreeSelect-dx0121sD.js → TreeSelect-FhEH7bMx.js} +1 -1
- package/storybook-static/assets/{TreeSelect.stories-Ef4wBpPe.js → TreeSelect.stories-Cw4IkrNG.js} +1 -1
- package/storybook-static/assets/{TreeTable-DSBZR5Ak.js → TreeTable-Bajr80HM.js} +1 -1
- package/storybook-static/assets/{TreeTable.stories-ypxZKEv5.js → TreeTable.stories-DDCGoB2u.js} +4 -4
- package/storybook-static/assets/{async-B9dg7eWG.js → async-CWrFMaux.js} +1 -1
- package/storybook-static/assets/{blocks-Cta1XrWW.js → blocks-CrYcG0WD.js} +3 -3
- package/storybook-static/assets/{browserAndReact-BQ_KR_3d.js → browserAndReact-DSxaVMjM.js} +1 -1
- package/storybook-static/assets/{check-R_o7C6xx.js → check-Cnuffb78.js} +1 -1
- package/storybook-static/assets/{chevron-down-cKT7IMMQ.js → chevron-down-ChPfAmdy.js} +1 -1
- package/storybook-static/assets/{chevron-left-CiDPsfyq.js → chevron-left-CEB5eAVk.js} +1 -1
- package/storybook-static/assets/{chevron-right-C19a7OR-.js → chevron-right-DHw2yjh1.js} +1 -1
- package/storybook-static/assets/{chunk-W22LQPXL-DxKkuEyo.js → chunk-W22LQPXL-i9Cm4c-p.js} +1 -1
- package/storybook-static/assets/{circle-alert-DBOiovw1.js → circle-alert-B0REyiCt.js} +1 -1
- package/storybook-static/assets/{circle-check-7XeWOdm4.js → circle-check-D6WZ24rj.js} +1 -1
- package/storybook-static/assets/components-BCe0UvQp.js +241 -0
- package/storybook-static/assets/{contextMenu-CJYmqLQb.js → contextMenu-De66k1si.js} +1 -1
- package/storybook-static/assets/{defaultRenderers-CbaqmJz1.js → defaultRenderers-D0Z-7t0H.js} +1 -1
- package/storybook-static/assets/{download-7lMMZoAs.js → download-C1DiezfA.js} +1 -1
- package/storybook-static/assets/{filesAndExcel-ecqcdsWK.js → filesAndExcel-BVMGH9OS.js} +1 -1
- package/storybook-static/assets/{floating-ui.react-BZQpsoBF.js → floating-ui.react-BswSORmJ.js} +1 -1
- package/storybook-static/assets/{formatters-CVj-3Vn0-BFaHJqZL.js → formatters-CBgrBeSA-DY6OIAc8.js} +1 -1
- package/storybook-static/assets/{formatters-Do_IyKhx.js → formatters-D27XMzPd.js} +1 -1
- package/storybook-static/assets/{formatters-runtime-BzeLCcNv.js → formatters-runtime-B_C8yQOS.js} +1 -1
- package/storybook-static/assets/{foundationLib-llmpMqxO.js → foundationLib-BmwSyi1e.js} +1 -1
- package/storybook-static/assets/{hooks-C3kva5fu.js → hooks-CXlVTo5i.js} +1 -1
- package/storybook-static/assets/{iframe-dENsI_HJ.js → iframe-Bbj4T0X2.js} +4 -4
- package/storybook-static/assets/iframe-DLZ4F2nx.js +1 -0
- package/storybook-static/assets/{info-DNxF2xdK.js → info-D_YlGthq.js} +1 -1
- package/storybook-static/assets/odata-CDuIqs1a.js +1 -0
- package/storybook-static/assets/{odataAndTables-D36xYvsu.js → odataAndTables-D4R4KHZc.js} +3 -3
- package/storybook-static/assets/{odataFetchFn-38rx5VG-.js → odataFetchFn-Sw0FicJe.js} +1 -1
- package/storybook-static/assets/{odataStoryFixtures-CorPZlzg.js → odataStoryFixtures-z1HaQHNb.js} +2 -2
- package/storybook-static/assets/{persisted-8ua2a009.js → persisted-TRx901TV.js} +1 -1
- package/storybook-static/assets/{pureUtilities-ikdtRVqv.js → pureUtilities-B8KVYaZx.js} +1 -1
- package/storybook-static/assets/{react-B3i_po7W.js → react-CTGFMmtV.js} +1 -1
- package/storybook-static/assets/{refresh-cw-BauD2hhl.js → refresh-cw-BuhtDwqw.js} +1 -1
- package/storybook-static/assets/{runtimeAndState-BpTnjVHY.js → runtimeAndState-DDPlVhTs.js} +1 -1
- package/storybook-static/assets/{settings-2-BniDrt2R.js → settings-2-DESCgIcH.js} +1 -1
- package/storybook-static/assets/shim-BUMlC1GG.js +1 -0
- package/storybook-static/assets/{sortable-BVQGL4Rj.js → sortable-BxGw7kip.js} +1 -1
- package/storybook-static/assets/{syntaxhighlighter-T5IQBZDB-DX_O-alN.js → syntaxhighlighter-T5IQBZDB-B0d7LXTh.js} +1 -1
- package/storybook-static/assets/{trash-2-BN_08GUs.js → trash-2-D0Ed43_3.js} +1 -1
- package/storybook-static/assets/{triangle-alert-CA9F5VpH.js → triangle-alert-CpgcfVSf.js} +1 -1
- package/storybook-static/assets/useODataSelectBase-CFR7eJND.js +1 -0
- package/storybook-static/assets/{useODataTreeData-BIIUO50-.js → useODataTreeData-DgEKknmd.js} +1 -1
- package/storybook-static/assets/{usePickerQuery-Di5pbi3P.js → usePickerQuery-Be3WSeUa.js} +1 -1
- package/storybook-static/assets/{usePickerTriggerController-Bk7ww9go.js → usePickerTriggerController-BZZv-jDV.js} +1 -1
- package/storybook-static/assets/{x-BF_8tdj4.js → x-_GQ6nyHW.js} +1 -1
- package/storybook-static/iframe.html +2 -2
- package/storybook-static/project.json +1 -1
- package/dist/chunks/base-table-CTafaxo2.js.map +0 -1
- package/dist/chunks/select-DeeGYtVc.js +0 -328
- package/dist/chunks/select-DeeGYtVc.js.map +0 -1
- package/dist/chunks/table-DOwANXnt.js.map +0 -1
- package/storybook-static/assets/FormattedTableCell-D4NXq8Pu.js +0 -18
- package/storybook-static/assets/ODataMultiSelect.stories-DATnsk6a.js +0 -137
- package/storybook-static/assets/ODataSelect.stories-DgJvyuln.js +0 -207
- package/storybook-static/assets/Table.stories-BgxeP7Dj.js +0 -207
- package/storybook-static/assets/components-CR7XtYhK.js +0 -241
- package/storybook-static/assets/iframe-BsjDYyde.js +0 -1
- package/storybook-static/assets/odata-KQkU-pBI.js +0 -1
- package/storybook-static/assets/useODataSelectBase-goRS7Fgm.js +0 -1
- /package/storybook-static/assets/{odata-service-B5w4YBao-BW9QLSrS.js → odata-service-B6TxBSLm-BW9QLSrS.js} +0 -0
package/dist/tree-table/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { a as e, c as t, d as n, i as r,
|
|
1
|
+
import { a as e, c as t, d as n, i as r, n as i, o as ee, p as te, r as ne, s as re, t as ie } from "../chunks/base-table-DNSYOO9t.js";
|
|
2
2
|
import { useEffect as a, useEffectEvent as o, useMemo as s, useRef as c, useState as ae } from "react";
|
|
3
3
|
import { cn as oe } from "@ryuzaki13/react-foundation-lib/utils";
|
|
4
4
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
5
5
|
import { ChevronDownIcon as d, ChevronRightIcon as f } from "lucide-react";
|
|
6
6
|
import { formatPipelineDisplayValue as se } from "@ryuzaki13/react-foundation-lib/formatters";
|
|
7
|
-
import { resolveTableLength as p, useTableRowSelection as
|
|
8
|
-
import {
|
|
7
|
+
import { foundationTableFeatures as ce, resolveTableLength as p, useTableRowSelection as le } from "@ryuzaki13/react-foundation-lib/table";
|
|
8
|
+
import { useTable as ue } from "@tanstack/react-table";
|
|
9
9
|
import { buildTreeTableRows as de } from "@ryuzaki13/react-foundation-lib/tree-table";
|
|
10
|
-
var
|
|
10
|
+
var m = {
|
|
11
11
|
treeColumnCell: "jOS9rT",
|
|
12
12
|
selectedIndicatorCell: "zHOAf7",
|
|
13
13
|
treeCell: "j48cXg",
|
|
@@ -18,22 +18,22 @@ var h = {
|
|
|
18
18
|
};
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/tree-table/TreeTable.tsx
|
|
21
|
-
function
|
|
21
|
+
function h(e) {
|
|
22
22
|
return Object.fromEntries(e.map((e) => [e, !0]));
|
|
23
23
|
}
|
|
24
|
-
function
|
|
24
|
+
function g(e) {
|
|
25
25
|
return typeof e == "boolean" ? [] : Object.keys(e).filter((t) => e[t]);
|
|
26
26
|
}
|
|
27
|
-
function
|
|
27
|
+
function _(e, t) {
|
|
28
28
|
return t.get(e.id) ?? e.original;
|
|
29
29
|
}
|
|
30
30
|
function fe(e, t, n, r) {
|
|
31
31
|
return e.cell.column.id === n ? /* @__PURE__ */ u("div", {
|
|
32
|
-
className:
|
|
32
|
+
className: m.treeCell,
|
|
33
33
|
style: { paddingInlineStart: `calc(${e.row.depth} * ${p(r) ?? "0em"})` },
|
|
34
34
|
children: [e.row.getCanExpand() ? /* @__PURE__ */ l("button", {
|
|
35
35
|
type: "button",
|
|
36
|
-
className:
|
|
36
|
+
className: m.expanderButton,
|
|
37
37
|
"aria-label": e.row.getIsExpanded() ? "Свернуть строку" : "Развернуть строку",
|
|
38
38
|
"data-tree-table-interactive": "true",
|
|
39
39
|
"data-ui": "tree-table-expander",
|
|
@@ -43,115 +43,114 @@ function fe(e, t, n, r) {
|
|
|
43
43
|
},
|
|
44
44
|
children: e.row.getIsExpanded() ? /* @__PURE__ */ l(d, { size: 16 }) : /* @__PURE__ */ l(f, { size: 16 })
|
|
45
45
|
}) : /* @__PURE__ */ l("span", {
|
|
46
|
-
className:
|
|
46
|
+
className: m.expanderSpacer,
|
|
47
47
|
"aria-hidden": "true"
|
|
48
48
|
}), /* @__PURE__ */ l("div", {
|
|
49
|
-
className:
|
|
49
|
+
className: m.treeCellContent,
|
|
50
50
|
children: t
|
|
51
51
|
})]
|
|
52
52
|
}) : t;
|
|
53
53
|
}
|
|
54
|
-
function
|
|
55
|
-
let
|
|
56
|
-
let e = new Set(
|
|
57
|
-
if (
|
|
54
|
+
function v({ title: u, isLoading: d, isFetching: f, data: p, columns: v, hierarchy: y, selectionMode: b = "none", expandFirstLevel: x = !1, defaultExpandedRowIds: S, treeColumnId: C, indentSize: pe = 1, className: me, tableClassName: he, columnVisibility: ge, defaultColumnVisibility: w, columnOrder: _e, defaultColumnOrder: ve, columnSizing: ye, defaultColumnSizing: be, columnPinning: xe, defaultColumnPinning: T, enableColumnResizing: E = !1, enableColumnReordering: D = !1, columnResizeMinWidth: O, onColumnVisibilityChange: k, onColumnOrderChange: A, onColumnSizingChange: j, onColumnPinningChange: M, onRowClick: N, onRowSelectionChange: Se, onExpandedRowIdsChange: Ce, onReachEnd: P, getRowCanSelect: F, getRowClassName: we, renderHeaderContextMenu: Te, renderCellContent: I }) {
|
|
55
|
+
let L = s(() => de(p ?? [], y), [p, y]), R = s(() => t(v), [v]), z = s(() => {
|
|
56
|
+
let e = new Set(S ?? []);
|
|
57
|
+
if (x) for (let t of L.rootRowIds) e.add(t);
|
|
58
58
|
return Array.from(e);
|
|
59
59
|
}, [
|
|
60
|
-
C,
|
|
61
60
|
S,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
x,
|
|
62
|
+
L.rootRowIds
|
|
63
|
+
]), [B, V] = ae({}), H = c(!1), U = c(null), W = c(null), { rowSelection: Ee, activateRowSelection: De } = le({
|
|
64
|
+
availableRowIds: L.allRowIds,
|
|
65
|
+
rowById: L.rowById,
|
|
66
|
+
selectionMode: b,
|
|
67
|
+
onRowSelectionChange: Se
|
|
68
|
+
}), { columnVisibility: G, onColumnVisibilityChange: Oe } = ne({
|
|
69
|
+
columnVisibility: ge,
|
|
70
|
+
defaultColumnVisibility: w,
|
|
71
71
|
onColumnVisibilityChange: k
|
|
72
|
-
}), { columnOrder:
|
|
73
|
-
columnOrder:
|
|
74
|
-
defaultColumnOrder:
|
|
72
|
+
}), { columnOrder: K, onColumnOrderChange: ke } = ee({
|
|
73
|
+
columnOrder: _e,
|
|
74
|
+
defaultColumnOrder: ve,
|
|
75
75
|
onColumnOrderChange: A
|
|
76
|
-
}), { columnSizing:
|
|
77
|
-
columnSizing:
|
|
78
|
-
defaultColumnSizing:
|
|
76
|
+
}), { columnSizing: q, onColumnSizingChange: Ae } = r({
|
|
77
|
+
columnSizing: ye,
|
|
78
|
+
defaultColumnSizing: be,
|
|
79
79
|
columnResizeMinWidth: O,
|
|
80
80
|
onColumnSizingChange: j
|
|
81
|
-
}), { columnPinning:
|
|
82
|
-
columnPinning:
|
|
81
|
+
}), { columnPinning: J, onColumnPinningChange: je } = e({
|
|
82
|
+
columnPinning: xe,
|
|
83
83
|
defaultColumnPinning: T,
|
|
84
|
-
onColumnPinningChange:
|
|
84
|
+
onColumnPinningChange: M
|
|
85
85
|
}), Y = s(() => ({
|
|
86
|
-
columnOrder:
|
|
87
|
-
columnPinning:
|
|
88
|
-
columnSizing:
|
|
89
|
-
columnVisibility:
|
|
86
|
+
columnOrder: K,
|
|
87
|
+
columnPinning: J,
|
|
88
|
+
columnSizing: q,
|
|
89
|
+
columnVisibility: G
|
|
90
90
|
}), [
|
|
91
|
-
G,
|
|
92
|
-
q,
|
|
93
91
|
K,
|
|
94
|
-
|
|
95
|
-
|
|
92
|
+
J,
|
|
93
|
+
q,
|
|
94
|
+
G
|
|
95
|
+
]), Me = o((e, t) => {
|
|
96
96
|
if (e.length === 0) {
|
|
97
|
-
|
|
97
|
+
H.current = !1, V({});
|
|
98
98
|
return;
|
|
99
99
|
}
|
|
100
100
|
let n = new Set(e);
|
|
101
|
-
|
|
102
|
-
let r =
|
|
103
|
-
return
|
|
101
|
+
V((e) => {
|
|
102
|
+
let r = g(e).filter((e) => n.has(e));
|
|
103
|
+
return H.current ? h(r) : (H.current = !0, h(Array.from(/* @__PURE__ */ new Set([...r, ...t.filter((e) => n.has(e))]))));
|
|
104
104
|
});
|
|
105
|
-
}),
|
|
106
|
-
|
|
107
|
-
}),
|
|
108
|
-
|
|
105
|
+
}), Ne = o((e) => {
|
|
106
|
+
Ce?.(g(e));
|
|
107
|
+
}), Pe = o(() => {
|
|
108
|
+
P?.();
|
|
109
109
|
});
|
|
110
110
|
a(() => {
|
|
111
|
-
|
|
112
|
-
}, [
|
|
113
|
-
|
|
114
|
-
}, [
|
|
115
|
-
if (!
|
|
111
|
+
Me(L.allRowIds, z);
|
|
112
|
+
}, [z, L.allRowIds]), a(() => {
|
|
113
|
+
Ne(B);
|
|
114
|
+
}, [B]), a(() => {
|
|
115
|
+
if (!P || !U.current || !W.current || d) return;
|
|
116
116
|
let e = new IntersectionObserver((e) => {
|
|
117
|
-
e[0]?.isIntersecting &&
|
|
117
|
+
e[0]?.isIntersecting && Pe();
|
|
118
118
|
}, {
|
|
119
|
-
root:
|
|
119
|
+
root: U.current,
|
|
120
120
|
threshold: .1
|
|
121
121
|
});
|
|
122
|
-
return e.observe(
|
|
122
|
+
return e.observe(W.current), () => e.disconnect();
|
|
123
123
|
}, [
|
|
124
124
|
d,
|
|
125
|
-
|
|
126
|
-
|
|
125
|
+
P,
|
|
126
|
+
L.rows.length
|
|
127
127
|
]);
|
|
128
128
|
let X = ue({
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
features: ce,
|
|
130
|
+
data: L.rows,
|
|
131
|
+
columns: v,
|
|
131
132
|
state: {
|
|
132
|
-
columnOrder:
|
|
133
|
-
columnPinning:
|
|
134
|
-
columnSizing:
|
|
135
|
-
columnVisibility:
|
|
136
|
-
expanded:
|
|
137
|
-
rowSelection:
|
|
133
|
+
columnOrder: K,
|
|
134
|
+
columnPinning: J,
|
|
135
|
+
columnSizing: q,
|
|
136
|
+
columnVisibility: G,
|
|
137
|
+
expanded: B,
|
|
138
|
+
rowSelection: Ee
|
|
138
139
|
},
|
|
139
|
-
getRowId: (e) =>
|
|
140
|
+
getRowId: (e) => y.getRowId(e),
|
|
140
141
|
getSubRows: (e) => e.children,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
onExpandedChange: B,
|
|
148
|
-
enableMultiRowSelection: x === "multi",
|
|
142
|
+
onColumnOrderChange: ke,
|
|
143
|
+
onColumnPinningChange: je,
|
|
144
|
+
onColumnSizingChange: Ae,
|
|
145
|
+
onColumnVisibilityChange: Oe,
|
|
146
|
+
onExpandedChange: V,
|
|
147
|
+
enableMultiRowSelection: b === "multi",
|
|
149
148
|
enableRowSelection: (e) => {
|
|
150
|
-
if (
|
|
151
|
-
let t =
|
|
152
|
-
return !
|
|
149
|
+
if (b === "none") return !1;
|
|
150
|
+
let t = _(e, L.rowById);
|
|
151
|
+
return !F || F(t);
|
|
153
152
|
}
|
|
154
|
-
}), Z =
|
|
153
|
+
}), Z = te(X, Y), Q = C ?? Z[0]?.id, $ = X.getRowModel().rows, Fe = s(() => re({
|
|
155
154
|
rows: $,
|
|
156
155
|
columns: Z,
|
|
157
156
|
resolveRowBoundaryKey: (e) => e.depth,
|
|
@@ -161,60 +160,60 @@ function y({ title: u, isLoading: d, isFetching: f, data: p, columns: y, hierarc
|
|
|
161
160
|
Z,
|
|
162
161
|
Q
|
|
163
162
|
]);
|
|
164
|
-
return /* @__PURE__ */ l(
|
|
163
|
+
return /* @__PURE__ */ l(i, {
|
|
165
164
|
table: X,
|
|
166
165
|
columnState: Y,
|
|
167
166
|
title: u,
|
|
168
167
|
isLoading: d,
|
|
169
168
|
isFetching: f,
|
|
170
|
-
className:
|
|
171
|
-
tableClassName:
|
|
172
|
-
selectionMode:
|
|
173
|
-
scrollableRef:
|
|
169
|
+
className: me,
|
|
170
|
+
tableClassName: he,
|
|
171
|
+
selectionMode: b,
|
|
172
|
+
scrollableRef: U,
|
|
174
173
|
interactiveElementSelector: "[data-tree-table-interactive=\"true\"]",
|
|
175
|
-
onActivateRow:
|
|
176
|
-
let t =
|
|
177
|
-
|
|
174
|
+
onActivateRow: b !== "none" || N ? (e) => {
|
|
175
|
+
let t = _(e, L.rowById);
|
|
176
|
+
De(e.id, e.getCanSelect()), N?.(t);
|
|
178
177
|
} : void 0,
|
|
179
|
-
isRowInteractive: (e) => !!(
|
|
178
|
+
isRowInteractive: (e) => !!(N || b !== "none" && e.getCanSelect()),
|
|
180
179
|
getRowClassName: (e) => {
|
|
181
|
-
let t =
|
|
182
|
-
return
|
|
180
|
+
let t = _(e, L.rowById);
|
|
181
|
+
return we?.(t);
|
|
183
182
|
},
|
|
184
|
-
getCellClassName: ({ row: e, cell: t }) => oe(t.column.id === Q &&
|
|
185
|
-
getCellLayout: ({ cell: e }) =>
|
|
186
|
-
renderHeaderContextMenu:
|
|
183
|
+
getCellClassName: ({ row: e, cell: t }) => oe(t.column.id === Q && m.treeColumnCell, t.column.id === Q && e.getIsSelected() && m.selectedIndicatorCell),
|
|
184
|
+
getCellLayout: ({ cell: e }) => Fe.get(e.id),
|
|
185
|
+
renderHeaderContextMenu: Te,
|
|
187
186
|
enableColumnResizing: E,
|
|
188
187
|
enableColumnReordering: D,
|
|
189
188
|
columnResizeMinWidth: O,
|
|
190
189
|
renderCellContent: (e) => {
|
|
191
|
-
let t =
|
|
192
|
-
field:
|
|
190
|
+
let t = _(e.row, L.rowById), r = se({
|
|
191
|
+
field: R.runtimeByColumnId[e.cell.column.id],
|
|
193
192
|
rawValue: e.cell.getValue(),
|
|
194
193
|
rowData: t,
|
|
195
194
|
rowKind: "tree"
|
|
196
195
|
}), i = n({
|
|
197
196
|
columnId: e.cell.column.id,
|
|
198
|
-
runtimeByColumnId:
|
|
199
|
-
customCellColumnIds:
|
|
197
|
+
runtimeByColumnId: R.runtimeByColumnId,
|
|
198
|
+
customCellColumnIds: R.customCellColumnIds
|
|
200
199
|
}) ? /* @__PURE__ */ l(ie, {
|
|
201
200
|
displayValue: r,
|
|
202
201
|
align: e.columnMeta?.align
|
|
203
202
|
}) : e.defaultContent;
|
|
204
|
-
return fe(e,
|
|
203
|
+
return fe(e, I ? I({
|
|
205
204
|
...e,
|
|
206
205
|
defaultContent: i,
|
|
207
206
|
displayValue: r
|
|
208
|
-
}) : i, Q,
|
|
207
|
+
}) : i, Q, pe);
|
|
209
208
|
},
|
|
210
|
-
afterTableContent:
|
|
211
|
-
ref:
|
|
212
|
-
className:
|
|
209
|
+
afterTableContent: P ? /* @__PURE__ */ l("div", {
|
|
210
|
+
ref: W,
|
|
211
|
+
className: m.sentinel,
|
|
213
212
|
"aria-hidden": "true"
|
|
214
213
|
}) : null
|
|
215
214
|
});
|
|
216
215
|
}
|
|
217
216
|
//#endregion
|
|
218
|
-
export {
|
|
217
|
+
export { v as TreeTable };
|
|
219
218
|
|
|
220
219
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/tree-table/TreeTable.module.scss","../../src/tree-table/TreeTable.tsx"],"sourcesContent":[".treeColumnCell {\n\tpadding-inline-start: var(--space-sm);\n}\n\n.selectedIndicatorCell {\n\tbox-shadow: inset 0.1875rem 0 0 var(--content-accent);\n}\n\n.treeCell {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n}\n\n.treeCellContent {\n\tmin-width: 0;\n\tflex: 1 1 auto;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.expanderButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: var(--content-0);\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus-visible {\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.expanderSpacer {\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n}\n\n.sentinel {\n\theight: 1px;\n}\n","/* eslint-disable react-hooks/incompatible-library */\nimport { useEffect, useEffectEvent, useMemo, useRef, useState, type ReactNode } from \"react\";\n\nimport { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport {\n\tresolveTableLength,\n\tTableColumnDef,\n\ttype TableColumnOrderState,\n\ttype TableColumnSizingState,\n\tTableSelectionMode,\n\tuseTableRowSelection\n} from \"@ryuzaki13/react-foundation-lib/table\";\nimport { buildTreeTableRows, type TreeTableFlatHierarchy, type TreeTableRowNode } from \"@ryuzaki13/react-foundation-lib/tree-table\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport {\n\tgetCoreRowModel,\n\tgetExpandedRowModel,\n\tuseReactTable,\n\ttype ExpandedState,\n\ttype Row,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport {\n\tBaseTable,\n\tbuildBaseTableMergedCellsLayout,\n\tbuildTableFormattingSnapshot,\n\tFormattedTableCell,\n\tgetOrderedVisibleLeafColumns,\n\tshouldUseTableFormatting,\n\tuseTableColumnOrder,\n\tuseTableColumnPinning,\n\tuseTableColumnSizing,\n\tuseTableColumnVisibility,\n\ttype BaseTableCellRenderArgs,\n\ttype BaseTableColumnState,\n\ttype BaseTableProps,\n\ttype TableColumnPinningState\n} from \"../base-table\";\n\nimport styles from \"./TreeTable.module.scss\";\n\nimport type { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\n\n/**\n * Внутренний тип строки TreeTable после преобразования в иерархию.\n */\ntype TreeTableRuntimeRow<TData extends object> = TreeTableRowNode<TData>;\n\n/**\n * Пропсы компонента TreeTable.\n *\n * Компонент принимает плоский OData-список и сам строит иерархию,\n * оставляя управление раскрытием и выбором во внутреннем состоянии.\n */\nexport interface TreeTableProps<TData extends object> {\n\t/**\n\t * Необязательный заголовок над таблицей.\n\t */\n\ttitle?: string;\n\t/**\n\t * Признак первичной загрузки.\n\t */\n\tisLoading?: boolean;\n\t/**\n\t * Признак фоновой догрузки или обновления данных.\n\t */\n\tisFetching?: boolean;\n\t/**\n\t * Плоский источник строк.\n\t */\n\tdata: readonly TData[] | undefined | null;\n\t/**\n\t * Описание колонок через исходный тип строки.\n\t */\n\tcolumns: readonly TableColumnDef<TData>[];\n\t/**\n\t * Правила восстановления дерева из плоского списка.\n\t */\n\thierarchy: TreeTableFlatHierarchy<TData>;\n\t/**\n\t * Режим выбора строк.\n\t */\n\tselectionMode?: TableSelectionMode;\n\t/**\n\t * Если `true`, при первом появлении данных раскрывает корневой уровень.\n\t */\n\texpandFirstLevel?: boolean;\n\t/**\n\t * Дополнительные строки, которые должны быть раскрыты при первой инициализации.\n\t */\n\tdefaultExpandedRowIds?: readonly string[];\n\t/**\n\t * Идентификатор колонки, в которой нужно рисовать tree-toggle и отступы.\n\t *\n\t * Если не указан, используется первая видимая колонка.\n\t */\n\ttreeColumnId?: string;\n\t/**\n\t * Отступ на один уровень вложенности.\n\t *\n\t * Числовое значение трактуется как `em`.\n\t */\n\tindentSize?: string | number;\n\t/**\n\t * Дополнительный CSS-класс корневого контейнера.\n\t */\n\tclassName?: string;\n\t/**\n\t * Дополнительный CSS-класс тега `table`.\n\t */\n\ttableClassName?: string;\n\t/**\n\t * Внешнее controlled-состояние видимости колонок.\n\t */\n\tcolumnVisibility?: VisibilityState;\n\t/**\n\t * Стартовое uncontrolled-состояние видимости колонок.\n\t */\n\tdefaultColumnVisibility?: VisibilityState;\n\t/**\n\t * Внешнее controlled-состояние порядка колонок.\n\t */\n\tcolumnOrder?: readonly string[];\n\t/**\n\t * Стартовое uncontrolled-состояние порядка колонок.\n\t */\n\tdefaultColumnOrder?: readonly string[];\n\t/**\n\t * Внешнее controlled-состояние ширин колонок в px.\n\t */\n\tcolumnSizing?: TableColumnSizingState;\n\t/**\n\t * Стартовое uncontrolled-состояние ширин колонок в px.\n\t */\n\tdefaultColumnSizing?: TableColumnSizingState;\n\t/**\n\t * Внешнее controlled-состояние left-pinning для колонок.\n\t */\n\tcolumnPinning?: TableColumnPinningState;\n\t/**\n\t * Стартовое uncontrolled-состояние left-pinning для колонок.\n\t */\n\tdefaultColumnPinning?: TableColumnPinningState;\n\t/**\n\t * Включает изменение ширины колонок через header-handle.\n\t */\n\tenableColumnResizing?: boolean;\n\t/**\n\t * Включает изменение порядка колонок через drag&drop заголовков.\n\t */\n\tenableColumnReordering?: boolean;\n\t/**\n\t * Минимальная ширина колонки при resize в px.\n\t */\n\tcolumnResizeMinWidth?: number;\n\t/**\n\t * Вызывается после изменения видимости колонок.\n\t */\n\tonColumnVisibilityChange?: (state: VisibilityState) => void;\n\t/**\n\t * Вызывается после изменения порядка колонок.\n\t */\n\tonColumnOrderChange?: (state: TableColumnOrderState) => void;\n\t/**\n\t * Вызывается после изменения ширины колонок.\n\t */\n\tonColumnSizingChange?: (state: TableColumnSizingState) => void;\n\t/**\n\t * Вызывается после изменения left-pinning state.\n\t */\n\tonColumnPinningChange?: (state: TableColumnPinningState) => void;\n\t/**\n\t * Вызывается при активации строки кликом или клавиатурой.\n\t */\n\tonRowClick?: (row: TData) => void;\n\t/**\n\t * Вызывается после изменения выбранных строк.\n\t */\n\tonRowSelectionChange?: (rows: TData[]) => void;\n\t/**\n\t * Вызывается после изменения раскрытых узлов.\n\t */\n\tonExpandedRowIdsChange?: (rowIds: string[]) => void;\n\t/**\n\t * Вызывается при достижении конца таблицы внутри scroll-контейнера.\n\t */\n\tonReachEnd?: () => void;\n\t/**\n\t * Позволяет запретить выбор отдельных строк.\n\t */\n\tgetRowCanSelect?: (row: TData) => boolean;\n\t/**\n\t * Позволяет добавить CSS-класс для конкретной строки.\n\t */\n\tgetRowClassName?: (row: TData) => string | undefined;\n\t/**\n\t * Контекстное меню заголовка колонки. Получает runtime-строки дерева,\n\t * потому что BaseTable работает уже после сборки flat hierarchy.\n\t */\n\trenderHeaderContextMenu?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderHeaderContextMenu\"];\n\t/**\n\t * Точка расширения содержимого ячейки после общего форматирования.\n\t *\n\t * Для tree-column в `defaultContent` передается только содержимое ячейки:\n\t * TreeTable сам добавит expander и отступ после выполнения слота.\n\t */\n\trenderCellContent?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderCellContent\"];\n}\n\n/**\n * Преобразует массив идентификаторов в формат состояния раскрытия TanStack.\n */\nfunction toExpandedState(rowIds: readonly string[]): ExpandedState {\n\treturn Object.fromEntries(rowIds.map((rowId) => [rowId, true]));\n}\n\n/**\n * Извлекает из состояния раскрытия только активные идентификаторы.\n */\nfunction extractExpandedRowIds(expanded: ExpandedState): string[] {\n\tif (typeof expanded === \"boolean\") {\n\t\treturn [];\n\t}\n\n\treturn Object.keys(expanded).filter((rowId) => expanded[rowId]);\n}\n\n/**\n * Нормализует исходную строку, убирая зависимость от внутреннего поля `children`.\n */\nfunction resolveOriginalRow<TData extends object>(row: Row<TreeTableRuntimeRow<TData>>, rowById: Map<string, TData>): TData {\n\treturn rowById.get(row.id) ?? (row.original as TData);\n}\n\n/**\n * Рендерит содержимое древовидной ячейки.\n */\nfunction renderTreeCellContent<TData extends object>(\n\targs: BaseTableCellRenderArgs<TreeTableRuntimeRow<TData>>,\n\tcontent: ReactNode,\n\ttreeColumnId: string | undefined,\n\tindentSize: string | number\n): ReactNode {\n\tif (args.cell.column.id !== treeColumnId) {\n\t\treturn content;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={styles.treeCell}\n\t\t\tstyle={{\n\t\t\t\tpaddingInlineStart: `calc(${args.row.depth} * ${resolveTableLength(indentSize) ?? \"0em\"})`\n\t\t\t}}>\n\t\t\t{args.row.getCanExpand() ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.expanderButton}\n\t\t\t\t\taria-label={args.row.getIsExpanded() ? \"Свернуть строку\" : \"Развернуть строку\"}\n\t\t\t\t\tdata-tree-table-interactive=\"true\"\n\t\t\t\t\tdata-ui=\"tree-table-expander\"\n\t\t\t\t\tdata-action={args.row.getIsExpanded() ? \"collapse-tree-table-row\" : \"expand-tree-table-row\"}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\targs.row.toggleExpanded();\n\t\t\t\t\t}}>\n\t\t\t\t\t{args.row.getIsExpanded() ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className={styles.expanderSpacer} aria-hidden=\"true\" />\n\t\t\t)}\n\n\t\t\t<div className={styles.treeCellContent}>{content}</div>\n\t\t</div>\n\t);\n}\n\n/**\n * Древовидная таблица на базе TanStack Table для плоских OData-данных.\n */\nexport function TreeTable<TData extends object>({\n\ttitle,\n\tisLoading,\n\tisFetching,\n\tdata,\n\tcolumns,\n\thierarchy,\n\tselectionMode = \"none\",\n\texpandFirstLevel = false,\n\tdefaultExpandedRowIds,\n\ttreeColumnId,\n\tindentSize = 1,\n\tclassName,\n\ttableClassName,\n\tcolumnVisibility,\n\tdefaultColumnVisibility,\n\tcolumnOrder,\n\tdefaultColumnOrder,\n\tcolumnSizing,\n\tdefaultColumnSizing,\n\tcolumnPinning,\n\tdefaultColumnPinning,\n\tenableColumnResizing = false,\n\tenableColumnReordering = false,\n\tcolumnResizeMinWidth,\n\tonColumnVisibilityChange,\n\tonColumnOrderChange,\n\tonColumnSizingChange,\n\tonColumnPinningChange,\n\tonRowClick,\n\tonRowSelectionChange,\n\tonExpandedRowIdsChange,\n\tonReachEnd,\n\tgetRowCanSelect,\n\tgetRowClassName,\n\trenderHeaderContextMenu,\n\trenderCellContent\n}: TreeTableProps<TData>) {\n\tconst treeData = useMemo(() => buildTreeTableRows(data ?? [], hierarchy), [data, hierarchy]);\n\tconst formattingSnapshot = useMemo(() => buildTableFormattingSnapshot(columns), [columns]);\n\tconst initialExpandedRowIds = useMemo(() => {\n\t\tconst nextExpandedRowIds = new Set(defaultExpandedRowIds ?? []);\n\n\t\tif (expandFirstLevel) {\n\t\t\tfor (const rootRowId of treeData.rootRowIds) {\n\t\t\t\tnextExpandedRowIds.add(rootRowId);\n\t\t\t}\n\t\t}\n\n\t\treturn Array.from(nextExpandedRowIds);\n\t}, [defaultExpandedRowIds, expandFirstLevel, treeData.rootRowIds]);\n\n\tconst [expanded, setExpanded] = useState<ExpandedState>({});\n\tconst hasInitializedExpansionRef = useRef(false);\n\tconst scrollableRef = useRef<HTMLDivElement | null>(null);\n\tconst sentinelRef = useRef<HTMLDivElement | null>(null);\n\n\tconst { rowSelection, activateRowSelection } = useTableRowSelection({\n\t\tavailableRowIds: treeData.allRowIds,\n\t\trowById: treeData.rowById,\n\t\tselectionMode,\n\t\tonRowSelectionChange\n\t});\n\tconst { columnVisibility: resolvedColumnVisibility, onColumnVisibilityChange: handleColumnVisibilityChange } = useTableColumnVisibility(\n\t\t{\n\t\t\tcolumnVisibility,\n\t\t\tdefaultColumnVisibility,\n\t\t\tonColumnVisibilityChange\n\t\t}\n\t);\n\tconst { columnOrder: resolvedColumnOrder, onColumnOrderChange: handleColumnOrderChange } = useTableColumnOrder({\n\t\tcolumnOrder,\n\t\tdefaultColumnOrder,\n\t\tonColumnOrderChange\n\t});\n\tconst { columnSizing: resolvedColumnSizing, onColumnSizingChange: handleColumnSizingChange } = useTableColumnSizing({\n\t\tcolumnSizing,\n\t\tdefaultColumnSizing,\n\t\tcolumnResizeMinWidth,\n\t\tonColumnSizingChange\n\t});\n\tconst { columnPinning: resolvedColumnPinning, onColumnPinningChange: handleColumnPinningChange } = useTableColumnPinning({\n\t\tcolumnPinning,\n\t\tdefaultColumnPinning,\n\t\tonColumnPinningChange\n\t});\n\n\tconst baseTableColumnState = useMemo<BaseTableColumnState>(\n\t\t() => ({\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility\n\t\t}),\n\t\t[resolvedColumnOrder, resolvedColumnPinning, resolvedColumnSizing, resolvedColumnVisibility]\n\t);\n\n\tconst syncExpandedState = useEffectEvent((availableRowIds: readonly string[], nextInitialExpandedRowIds: readonly string[]) => {\n\t\tif (availableRowIds.length === 0) {\n\t\t\thasInitializedExpansionRef.current = false;\n\t\t\tsetExpanded({});\n\t\t\treturn;\n\t\t}\n\n\t\tconst availableRowIdSet = new Set(availableRowIds);\n\n\t\tsetExpanded((currentExpanded) => {\n\t\t\tconst persistedRowIds = extractExpandedRowIds(currentExpanded).filter((rowId) => availableRowIdSet.has(rowId));\n\n\t\t\tif (!hasInitializedExpansionRef.current) {\n\t\t\t\thasInitializedExpansionRef.current = true;\n\n\t\t\t\tconst seededRowIds = Array.from(\n\t\t\t\t\tnew Set([...persistedRowIds, ...nextInitialExpandedRowIds.filter((rowId) => availableRowIdSet.has(rowId))])\n\t\t\t\t);\n\n\t\t\t\treturn toExpandedState(seededRowIds);\n\t\t\t}\n\n\t\t\treturn toExpandedState(persistedRowIds);\n\t\t});\n\t});\n\n\tconst emitExpandedRowIdsChange = useEffectEvent((currentExpanded: ExpandedState) => {\n\t\tonExpandedRowIdsChange?.(extractExpandedRowIds(currentExpanded));\n\t});\n\n\tconst emitReachEnd = useEffectEvent(() => {\n\t\tonReachEnd?.();\n\t});\n\n\tuseEffect(() => {\n\t\tsyncExpandedState(treeData.allRowIds, initialExpandedRowIds);\n\t}, [initialExpandedRowIds, treeData.allRowIds]);\n\n\tuseEffect(() => {\n\t\temitExpandedRowIdsChange(expanded);\n\t}, [expanded]);\n\n\tuseEffect(() => {\n\t\tif (!onReachEnd || !scrollableRef.current || !sentinelRef.current || isLoading) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst entry = entries[0];\n\n\t\t\t\tif (entry?.isIntersecting) {\n\t\t\t\t\temitReachEnd();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\troot: scrollableRef.current,\n\t\t\t\tthreshold: 0.1\n\t\t\t}\n\t\t);\n\n\t\tobserver.observe(sentinelRef.current);\n\n\t\treturn () => observer.disconnect();\n\t}, [isLoading, onReachEnd, treeData.rows.length]);\n\n\tconst table = useReactTable<TreeTableRuntimeRow<TData>>({\n\t\tdata: treeData.rows as TreeTableRuntimeRow<TData>[],\n\t\tcolumns: columns as TableColumnDef<TreeTableRuntimeRow<TData>>[],\n\t\tstate: {\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility,\n\t\t\texpanded,\n\t\t\trowSelection\n\t\t},\n\t\tgetRowId: (row) => hierarchy.getRowId(row as TData),\n\t\tgetSubRows: (row) => row.children,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tgetExpandedRowModel: getExpandedRowModel(),\n\t\tonColumnOrderChange: handleColumnOrderChange,\n\t\tonColumnPinningChange: handleColumnPinningChange,\n\t\tonColumnSizingChange: handleColumnSizingChange,\n\t\tonColumnVisibilityChange: handleColumnVisibilityChange,\n\t\tonExpandedChange: setExpanded,\n\t\tenableMultiRowSelection: selectionMode === \"multi\",\n\t\tenableRowSelection: (row) => {\n\t\t\tif (selectionMode === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\treturn getRowCanSelect ? getRowCanSelect(originalRow) : true;\n\t\t}\n\t});\n\n\tconst visibleLeafColumns = getOrderedVisibleLeafColumns(table, baseTableColumnState);\n\tconst resolvedTreeColumnId = treeColumnId ?? visibleLeafColumns[0]?.id;\n\tconst rowModelRows = table.getRowModel().rows;\n\tconst mergedCellLayout = useMemo(\n\t\t() =>\n\t\t\tbuildBaseTableMergedCellsLayout({\n\t\t\t\trows: rowModelRows,\n\t\t\t\tcolumns: visibleLeafColumns,\n\t\t\t\tresolveRowBoundaryKey: (row) => row.depth,\n\t\t\t\texcludeColumnIds: resolvedTreeColumnId ? new Set([resolvedTreeColumnId]) : undefined\n\t\t\t}),\n\t\t[rowModelRows, visibleLeafColumns, resolvedTreeColumnId]\n\t);\n\n\t/**\n\t * Активирует строку: обновляет выбор в соответствии с режимом и вызывает внешний callback.\n\t */\n\tconst activateRow = (row: Row<TreeTableRuntimeRow<TData>>) => {\n\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\tactivateRowSelection(row.id, row.getCanSelect());\n\t\tonRowClick?.(originalRow);\n\t};\n\n\treturn (\n\t\t<BaseTable\n\t\t\ttable={table}\n\t\t\tcolumnState={baseTableColumnState}\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tisFetching={isFetching}\n\t\t\tclassName={className}\n\t\t\ttableClassName={tableClassName}\n\t\t\tselectionMode={selectionMode}\n\t\t\tscrollableRef={scrollableRef}\n\t\t\tinteractiveElementSelector='[data-tree-table-interactive=\"true\"]'\n\t\t\tonActivateRow={selectionMode !== \"none\" || onRowClick ? activateRow : undefined}\n\t\t\tisRowInteractive={(row) => Boolean(onRowClick || (selectionMode !== \"none\" && row.getCanSelect()))}\n\t\t\tgetRowClassName={(row) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\t\treturn getRowClassName?.(originalRow);\n\t\t\t}}\n\t\t\tgetCellClassName={({ row, cell }) =>\n\t\t\t\tcn(\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && styles.treeColumnCell,\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && row.getIsSelected() && styles.selectedIndicatorCell\n\t\t\t\t)\n\t\t\t}\n\t\t\tgetCellLayout={({ cell }) => mergedCellLayout.get(cell.id)}\n\t\t\trenderHeaderContextMenu={renderHeaderContextMenu}\n\t\t\tenableColumnResizing={enableColumnResizing}\n\t\t\tenableColumnReordering={enableColumnReordering}\n\t\t\tcolumnResizeMinWidth={columnResizeMinWidth}\n\t\t\trenderCellContent={(args) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(args.row, treeData.rowById);\n\t\t\t\tconst displayValue = formatPipelineDisplayValue({\n\t\t\t\t\tfield: formattingSnapshot.runtimeByColumnId[args.cell.column.id],\n\t\t\t\t\trawValue: args.cell.getValue(),\n\t\t\t\t\trowData: originalRow as TableFormulaRowData,\n\t\t\t\t\trowKind: \"tree\"\n\t\t\t\t});\n\t\t\t\tconst defaultContent = shouldUseTableFormatting({\n\t\t\t\t\tcolumnId: args.cell.column.id,\n\t\t\t\t\truntimeByColumnId: formattingSnapshot.runtimeByColumnId,\n\t\t\t\t\tcustomCellColumnIds: formattingSnapshot.customCellColumnIds\n\t\t\t\t}) ? (\n\t\t\t\t\t<FormattedTableCell displayValue={displayValue} align={args.columnMeta?.align} />\n\t\t\t\t) : (\n\t\t\t\t\targs.defaultContent\n\t\t\t\t);\n\t\t\t\tconst content = renderCellContent\n\t\t\t\t\t? renderCellContent({\n\t\t\t\t\t\t\t...args,\n\t\t\t\t\t\t\tdefaultContent,\n\t\t\t\t\t\t\tdisplayValue\n\t\t\t\t\t\t})\n\t\t\t\t\t: defaultContent;\n\n\t\t\t\treturn renderTreeCellContent(args, content, resolvedTreeColumnId, indentSize);\n\t\t\t}}\n\t\t\tafterTableContent={onReachEnd ? <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" /> : null}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/tree-table/TreeTable.module.scss","../../src/tree-table/TreeTable.tsx"],"sourcesContent":[".treeColumnCell {\n\tpadding-inline-start: var(--space-sm);\n}\n\n.selectedIndicatorCell {\n\tbox-shadow: inset 0.1875rem 0 0 var(--content-accent);\n}\n\n.treeCell {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n}\n\n.treeCellContent {\n\tmin-width: 0;\n\tflex: 1 1 auto;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.expanderButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: var(--content-0);\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus-visible {\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.expanderSpacer {\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n}\n\n.sentinel {\n\theight: 1px;\n}\n","import { useEffect, useEffectEvent, useMemo, useRef, useState, type ReactNode } from \"react\";\n\nimport { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport {\n\ttype FoundationTableRow,\n\tfoundationTableFeatures,\n\tresolveTableLength,\n\tTableColumnDef,\n\ttype TableColumnOrderState,\n\ttype TableColumnSizingState,\n\ttype TableColumnVisibilityState,\n\tTableSelectionMode,\n\tuseTableRowSelection\n} from \"@ryuzaki13/react-foundation-lib/table\";\nimport { buildTreeTableRows, type TreeTableFlatHierarchy, type TreeTableRowNode } from \"@ryuzaki13/react-foundation-lib/tree-table\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { useTable, type ExpandedState } from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport {\n\tBaseTable,\n\tbuildBaseTableMergedCellsLayout,\n\tbuildTableFormattingSnapshot,\n\tFormattedTableCell,\n\tgetOrderedVisibleLeafColumns,\n\tshouldUseTableFormatting,\n\tuseTableColumnOrder,\n\tuseTableColumnPinning,\n\tuseTableColumnSizing,\n\tuseTableColumnVisibility,\n\ttype BaseTableCellRenderArgs,\n\ttype BaseTableColumnState,\n\ttype BaseTableProps,\n\ttype TableColumnPinningState\n} from \"../base-table\";\n\nimport styles from \"./TreeTable.module.scss\";\n\nimport type { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\n\n/**\n * Внутренний тип строки TreeTable после преобразования в иерархию.\n */\ntype TreeTableRuntimeRow<TData extends object> = TreeTableRowNode<TData>;\n\n/**\n * Пропсы компонента TreeTable.\n *\n * Компонент принимает плоский OData-список и сам строит иерархию,\n * оставляя управление раскрытием и выбором во внутреннем состоянии.\n */\nexport interface TreeTableProps<TData extends object> {\n\t/**\n\t * Необязательный заголовок над таблицей.\n\t */\n\ttitle?: string;\n\t/**\n\t * Признак первичной загрузки.\n\t */\n\tisLoading?: boolean;\n\t/**\n\t * Признак фоновой догрузки или обновления данных.\n\t */\n\tisFetching?: boolean;\n\t/**\n\t * Плоский источник строк.\n\t */\n\tdata: readonly TData[] | undefined | null;\n\t/**\n\t * Описание колонок через исходный тип строки.\n\t */\n\tcolumns: readonly TableColumnDef<TData>[];\n\t/**\n\t * Правила восстановления дерева из плоского списка.\n\t */\n\thierarchy: TreeTableFlatHierarchy<TData>;\n\t/**\n\t * Режим выбора строк.\n\t */\n\tselectionMode?: TableSelectionMode;\n\t/**\n\t * Если `true`, при первом появлении данных раскрывает корневой уровень.\n\t */\n\texpandFirstLevel?: boolean;\n\t/**\n\t * Дополнительные строки, которые должны быть раскрыты при первой инициализации.\n\t */\n\tdefaultExpandedRowIds?: readonly string[];\n\t/**\n\t * Идентификатор колонки, в которой нужно рисовать tree-toggle и отступы.\n\t *\n\t * Если не указан, используется первая видимая колонка.\n\t */\n\ttreeColumnId?: string;\n\t/**\n\t * Отступ на один уровень вложенности.\n\t *\n\t * Числовое значение трактуется как `em`.\n\t */\n\tindentSize?: string | number;\n\t/**\n\t * Дополнительный CSS-класс корневого контейнера.\n\t */\n\tclassName?: string;\n\t/**\n\t * Дополнительный CSS-класс тега `table`.\n\t */\n\ttableClassName?: string;\n\t/**\n\t * Внешнее controlled-состояние видимости колонок.\n\t */\n\tcolumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Стартовое uncontrolled-состояние видимости колонок.\n\t */\n\tdefaultColumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Внешнее controlled-состояние порядка колонок.\n\t */\n\tcolumnOrder?: readonly string[];\n\t/**\n\t * Стартовое uncontrolled-состояние порядка колонок.\n\t */\n\tdefaultColumnOrder?: readonly string[];\n\t/**\n\t * Внешнее controlled-состояние ширин колонок в px.\n\t */\n\tcolumnSizing?: TableColumnSizingState;\n\t/**\n\t * Стартовое uncontrolled-состояние ширин колонок в px.\n\t */\n\tdefaultColumnSizing?: TableColumnSizingState;\n\t/**\n\t * Внешнее controlled-состояние start-pinning для колонок.\n\t */\n\tcolumnPinning?: TableColumnPinningState;\n\t/**\n\t * Стартовое uncontrolled-состояние start-pinning для колонок.\n\t */\n\tdefaultColumnPinning?: TableColumnPinningState;\n\t/**\n\t * Включает изменение ширины колонок через header-handle.\n\t */\n\tenableColumnResizing?: boolean;\n\t/**\n\t * Включает изменение порядка колонок через drag&drop заголовков.\n\t */\n\tenableColumnReordering?: boolean;\n\t/**\n\t * Минимальная ширина колонки при resize в px.\n\t */\n\tcolumnResizeMinWidth?: number;\n\t/**\n\t * Вызывается после изменения видимости колонок.\n\t */\n\tonColumnVisibilityChange?: (state: TableColumnVisibilityState) => void;\n\t/**\n\t * Вызывается после изменения порядка колонок.\n\t */\n\tonColumnOrderChange?: (state: TableColumnOrderState) => void;\n\t/**\n\t * Вызывается после изменения ширины колонок.\n\t */\n\tonColumnSizingChange?: (state: TableColumnSizingState) => void;\n\t/**\n\t * Вызывается после изменения start-pinning state.\n\t */\n\tonColumnPinningChange?: (state: TableColumnPinningState) => void;\n\t/**\n\t * Вызывается при активации строки кликом или клавиатурой.\n\t */\n\tonRowClick?: (row: TData) => void;\n\t/**\n\t * Вызывается после изменения выбранных строк.\n\t */\n\tonRowSelectionChange?: (rows: TData[]) => void;\n\t/**\n\t * Вызывается после изменения раскрытых узлов.\n\t */\n\tonExpandedRowIdsChange?: (rowIds: string[]) => void;\n\t/**\n\t * Вызывается при достижении конца таблицы внутри scroll-контейнера.\n\t */\n\tonReachEnd?: () => void;\n\t/**\n\t * Позволяет запретить выбор отдельных строк.\n\t */\n\tgetRowCanSelect?: (row: TData) => boolean;\n\t/**\n\t * Позволяет добавить CSS-класс для конкретной строки.\n\t */\n\tgetRowClassName?: (row: TData) => string | undefined;\n\t/**\n\t * Контекстное меню заголовка колонки. Получает runtime-строки дерева,\n\t * потому что BaseTable работает уже после сборки flat hierarchy.\n\t */\n\trenderHeaderContextMenu?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderHeaderContextMenu\"];\n\t/**\n\t * Точка расширения содержимого ячейки после общего форматирования.\n\t *\n\t * Для tree-column в `defaultContent` передается только содержимое ячейки:\n\t * TreeTable сам добавит expander и отступ после выполнения слота.\n\t */\n\trenderCellContent?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderCellContent\"];\n}\n\n/**\n * Преобразует массив идентификаторов в формат состояния раскрытия TanStack.\n */\nfunction toExpandedState(rowIds: readonly string[]): ExpandedState {\n\treturn Object.fromEntries(rowIds.map((rowId) => [rowId, true]));\n}\n\n/**\n * Извлекает из состояния раскрытия только активные идентификаторы.\n */\nfunction extractExpandedRowIds(expanded: ExpandedState): string[] {\n\tif (typeof expanded === \"boolean\") {\n\t\treturn [];\n\t}\n\n\treturn Object.keys(expanded).filter((rowId) => expanded[rowId]);\n}\n\n/**\n * Нормализует исходную строку, убирая зависимость от внутреннего поля `children`.\n */\nfunction resolveOriginalRow<TData extends object>(row: FoundationTableRow<TreeTableRuntimeRow<TData>>, rowById: Map<string, TData>): TData {\n\treturn rowById.get(row.id) ?? (row.original as TData);\n}\n\n/**\n * Рендерит содержимое древовидной ячейки.\n */\nfunction renderTreeCellContent<TData extends object>(\n\targs: BaseTableCellRenderArgs<TreeTableRuntimeRow<TData>>,\n\tcontent: ReactNode,\n\ttreeColumnId: string | undefined,\n\tindentSize: string | number\n): ReactNode {\n\tif (args.cell.column.id !== treeColumnId) {\n\t\treturn content;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={styles.treeCell}\n\t\t\tstyle={{\n\t\t\t\tpaddingInlineStart: `calc(${args.row.depth} * ${resolveTableLength(indentSize) ?? \"0em\"})`\n\t\t\t}}>\n\t\t\t{args.row.getCanExpand() ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.expanderButton}\n\t\t\t\t\taria-label={args.row.getIsExpanded() ? \"Свернуть строку\" : \"Развернуть строку\"}\n\t\t\t\t\tdata-tree-table-interactive=\"true\"\n\t\t\t\t\tdata-ui=\"tree-table-expander\"\n\t\t\t\t\tdata-action={args.row.getIsExpanded() ? \"collapse-tree-table-row\" : \"expand-tree-table-row\"}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\targs.row.toggleExpanded();\n\t\t\t\t\t}}>\n\t\t\t\t\t{args.row.getIsExpanded() ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className={styles.expanderSpacer} aria-hidden=\"true\" />\n\t\t\t)}\n\n\t\t\t<div className={styles.treeCellContent}>{content}</div>\n\t\t</div>\n\t);\n}\n\n/**\n * Древовидная таблица на базе TanStack Table для плоских OData-данных.\n */\nexport function TreeTable<TData extends object>({\n\ttitle,\n\tisLoading,\n\tisFetching,\n\tdata,\n\tcolumns,\n\thierarchy,\n\tselectionMode = \"none\",\n\texpandFirstLevel = false,\n\tdefaultExpandedRowIds,\n\ttreeColumnId,\n\tindentSize = 1,\n\tclassName,\n\ttableClassName,\n\tcolumnVisibility,\n\tdefaultColumnVisibility,\n\tcolumnOrder,\n\tdefaultColumnOrder,\n\tcolumnSizing,\n\tdefaultColumnSizing,\n\tcolumnPinning,\n\tdefaultColumnPinning,\n\tenableColumnResizing = false,\n\tenableColumnReordering = false,\n\tcolumnResizeMinWidth,\n\tonColumnVisibilityChange,\n\tonColumnOrderChange,\n\tonColumnSizingChange,\n\tonColumnPinningChange,\n\tonRowClick,\n\tonRowSelectionChange,\n\tonExpandedRowIdsChange,\n\tonReachEnd,\n\tgetRowCanSelect,\n\tgetRowClassName,\n\trenderHeaderContextMenu,\n\trenderCellContent\n}: TreeTableProps<TData>) {\n\tconst treeData = useMemo(() => buildTreeTableRows(data ?? [], hierarchy), [data, hierarchy]);\n\tconst formattingSnapshot = useMemo(() => buildTableFormattingSnapshot(columns), [columns]);\n\tconst initialExpandedRowIds = useMemo(() => {\n\t\tconst nextExpandedRowIds = new Set(defaultExpandedRowIds ?? []);\n\n\t\tif (expandFirstLevel) {\n\t\t\tfor (const rootRowId of treeData.rootRowIds) {\n\t\t\t\tnextExpandedRowIds.add(rootRowId);\n\t\t\t}\n\t\t}\n\n\t\treturn Array.from(nextExpandedRowIds);\n\t}, [defaultExpandedRowIds, expandFirstLevel, treeData.rootRowIds]);\n\n\tconst [expanded, setExpanded] = useState<ExpandedState>({});\n\tconst hasInitializedExpansionRef = useRef(false);\n\tconst scrollableRef = useRef<HTMLDivElement | null>(null);\n\tconst sentinelRef = useRef<HTMLDivElement | null>(null);\n\n\tconst { rowSelection, activateRowSelection } = useTableRowSelection({\n\t\tavailableRowIds: treeData.allRowIds,\n\t\trowById: treeData.rowById,\n\t\tselectionMode,\n\t\tonRowSelectionChange\n\t});\n\tconst { columnVisibility: resolvedColumnVisibility, onColumnVisibilityChange: handleColumnVisibilityChange } = useTableColumnVisibility(\n\t\t{\n\t\t\tcolumnVisibility,\n\t\t\tdefaultColumnVisibility,\n\t\t\tonColumnVisibilityChange\n\t\t}\n\t);\n\tconst { columnOrder: resolvedColumnOrder, onColumnOrderChange: handleColumnOrderChange } = useTableColumnOrder({\n\t\tcolumnOrder,\n\t\tdefaultColumnOrder,\n\t\tonColumnOrderChange\n\t});\n\tconst { columnSizing: resolvedColumnSizing, onColumnSizingChange: handleColumnSizingChange } = useTableColumnSizing({\n\t\tcolumnSizing,\n\t\tdefaultColumnSizing,\n\t\tcolumnResizeMinWidth,\n\t\tonColumnSizingChange\n\t});\n\tconst { columnPinning: resolvedColumnPinning, onColumnPinningChange: handleColumnPinningChange } = useTableColumnPinning({\n\t\tcolumnPinning,\n\t\tdefaultColumnPinning,\n\t\tonColumnPinningChange\n\t});\n\n\tconst baseTableColumnState = useMemo<BaseTableColumnState>(\n\t\t() => ({\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility\n\t\t}),\n\t\t[resolvedColumnOrder, resolvedColumnPinning, resolvedColumnSizing, resolvedColumnVisibility]\n\t);\n\n\tconst syncExpandedState = useEffectEvent((availableRowIds: readonly string[], nextInitialExpandedRowIds: readonly string[]) => {\n\t\tif (availableRowIds.length === 0) {\n\t\t\thasInitializedExpansionRef.current = false;\n\t\t\tsetExpanded({});\n\t\t\treturn;\n\t\t}\n\n\t\tconst availableRowIdSet = new Set(availableRowIds);\n\n\t\tsetExpanded((currentExpanded) => {\n\t\t\tconst persistedRowIds = extractExpandedRowIds(currentExpanded).filter((rowId) => availableRowIdSet.has(rowId));\n\n\t\t\tif (!hasInitializedExpansionRef.current) {\n\t\t\t\thasInitializedExpansionRef.current = true;\n\n\t\t\t\tconst seededRowIds = Array.from(\n\t\t\t\t\tnew Set([...persistedRowIds, ...nextInitialExpandedRowIds.filter((rowId) => availableRowIdSet.has(rowId))])\n\t\t\t\t);\n\n\t\t\t\treturn toExpandedState(seededRowIds);\n\t\t\t}\n\n\t\t\treturn toExpandedState(persistedRowIds);\n\t\t});\n\t});\n\n\tconst emitExpandedRowIdsChange = useEffectEvent((currentExpanded: ExpandedState) => {\n\t\tonExpandedRowIdsChange?.(extractExpandedRowIds(currentExpanded));\n\t});\n\n\tconst emitReachEnd = useEffectEvent(() => {\n\t\tonReachEnd?.();\n\t});\n\n\tuseEffect(() => {\n\t\tsyncExpandedState(treeData.allRowIds, initialExpandedRowIds);\n\t}, [initialExpandedRowIds, treeData.allRowIds]);\n\n\tuseEffect(() => {\n\t\temitExpandedRowIdsChange(expanded);\n\t}, [expanded]);\n\n\tuseEffect(() => {\n\t\tif (!onReachEnd || !scrollableRef.current || !sentinelRef.current || isLoading) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst entry = entries[0];\n\n\t\t\t\tif (entry?.isIntersecting) {\n\t\t\t\t\temitReachEnd();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\troot: scrollableRef.current,\n\t\t\t\tthreshold: 0.1\n\t\t\t}\n\t\t);\n\n\t\tobserver.observe(sentinelRef.current);\n\n\t\treturn () => observer.disconnect();\n\t}, [isLoading, onReachEnd, treeData.rows.length]);\n\n\tconst table = useTable({\n\t\tfeatures: foundationTableFeatures,\n\t\tdata: treeData.rows as TreeTableRuntimeRow<TData>[],\n\t\tcolumns: columns as TableColumnDef<TreeTableRuntimeRow<TData>>[],\n\t\tstate: {\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility,\n\t\t\texpanded,\n\t\t\trowSelection\n\t\t},\n\t\tgetRowId: (row) => hierarchy.getRowId(row as TData),\n\t\tgetSubRows: (row) => row.children,\n\t\tonColumnOrderChange: handleColumnOrderChange,\n\t\tonColumnPinningChange: handleColumnPinningChange,\n\t\tonColumnSizingChange: handleColumnSizingChange,\n\t\tonColumnVisibilityChange: handleColumnVisibilityChange,\n\t\tonExpandedChange: setExpanded,\n\t\tenableMultiRowSelection: selectionMode === \"multi\",\n\t\tenableRowSelection: (row) => {\n\t\t\tif (selectionMode === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\treturn getRowCanSelect ? getRowCanSelect(originalRow) : true;\n\t\t}\n\t});\n\n\tconst visibleLeafColumns = getOrderedVisibleLeafColumns(table, baseTableColumnState);\n\tconst resolvedTreeColumnId = treeColumnId ?? visibleLeafColumns[0]?.id;\n\tconst rowModelRows = table.getRowModel().rows;\n\tconst mergedCellLayout = useMemo(\n\t\t() =>\n\t\t\tbuildBaseTableMergedCellsLayout({\n\t\t\t\trows: rowModelRows,\n\t\t\t\tcolumns: visibleLeafColumns,\n\t\t\t\tresolveRowBoundaryKey: (row) => row.depth,\n\t\t\t\texcludeColumnIds: resolvedTreeColumnId ? new Set([resolvedTreeColumnId]) : undefined\n\t\t\t}),\n\t\t[rowModelRows, visibleLeafColumns, resolvedTreeColumnId]\n\t);\n\n\t/**\n\t * Активирует строку: обновляет выбор в соответствии с режимом и вызывает внешний callback.\n\t */\n\tconst activateRow = (row: FoundationTableRow<TreeTableRuntimeRow<TData>>) => {\n\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\tactivateRowSelection(row.id, row.getCanSelect());\n\t\tonRowClick?.(originalRow);\n\t};\n\n\treturn (\n\t\t<BaseTable\n\t\t\ttable={table}\n\t\t\tcolumnState={baseTableColumnState}\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tisFetching={isFetching}\n\t\t\tclassName={className}\n\t\t\ttableClassName={tableClassName}\n\t\t\tselectionMode={selectionMode}\n\t\t\tscrollableRef={scrollableRef}\n\t\t\tinteractiveElementSelector='[data-tree-table-interactive=\"true\"]'\n\t\t\tonActivateRow={selectionMode !== \"none\" || onRowClick ? activateRow : undefined}\n\t\t\tisRowInteractive={(row) => Boolean(onRowClick || (selectionMode !== \"none\" && row.getCanSelect()))}\n\t\t\tgetRowClassName={(row) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\t\treturn getRowClassName?.(originalRow);\n\t\t\t}}\n\t\t\tgetCellClassName={({ row, cell }) =>\n\t\t\t\tcn(\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && styles.treeColumnCell,\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && row.getIsSelected() && styles.selectedIndicatorCell\n\t\t\t\t)\n\t\t\t}\n\t\t\tgetCellLayout={({ cell }) => mergedCellLayout.get(cell.id)}\n\t\t\trenderHeaderContextMenu={renderHeaderContextMenu}\n\t\t\tenableColumnResizing={enableColumnResizing}\n\t\t\tenableColumnReordering={enableColumnReordering}\n\t\t\tcolumnResizeMinWidth={columnResizeMinWidth}\n\t\t\trenderCellContent={(args) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(args.row, treeData.rowById);\n\t\t\t\tconst displayValue = formatPipelineDisplayValue({\n\t\t\t\t\tfield: formattingSnapshot.runtimeByColumnId[args.cell.column.id],\n\t\t\t\t\trawValue: args.cell.getValue(),\n\t\t\t\t\trowData: originalRow as TableFormulaRowData,\n\t\t\t\t\trowKind: \"tree\"\n\t\t\t\t});\n\t\t\t\tconst defaultContent = shouldUseTableFormatting({\n\t\t\t\t\tcolumnId: args.cell.column.id,\n\t\t\t\t\truntimeByColumnId: formattingSnapshot.runtimeByColumnId,\n\t\t\t\t\tcustomCellColumnIds: formattingSnapshot.customCellColumnIds\n\t\t\t\t}) ? (\n\t\t\t\t\t<FormattedTableCell displayValue={displayValue} align={args.columnMeta?.align} />\n\t\t\t\t) : (\n\t\t\t\t\targs.defaultContent\n\t\t\t\t);\n\t\t\t\tconst content = renderCellContent\n\t\t\t\t\t? renderCellContent({\n\t\t\t\t\t\t\t...args,\n\t\t\t\t\t\t\tdefaultContent,\n\t\t\t\t\t\t\tdisplayValue\n\t\t\t\t\t\t})\n\t\t\t\t\t: defaultContent;\n\n\t\t\t\treturn renderTreeCellContent(args, content, resolvedTreeColumnId, indentSize);\n\t\t\t}}\n\t\t\tafterTableContent={onReachEnd ? <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" /> : null}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ryuzaki13/react-foundation-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "Reusable React foundation UI primitives and Storybook stories.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Ryuzaki13",
|
|
@@ -194,6 +194,10 @@
|
|
|
194
194
|
"types": "./dist/notifications/index.d.ts",
|
|
195
195
|
"import": "./dist/notifications/index.js"
|
|
196
196
|
},
|
|
197
|
+
"./odata-dependent": {
|
|
198
|
+
"types": "./dist/odata-dependent/index.d.ts",
|
|
199
|
+
"import": "./dist/odata-dependent/index.js"
|
|
200
|
+
},
|
|
197
201
|
"./pages": {
|
|
198
202
|
"types": "./dist/pages/index.d.ts",
|
|
199
203
|
"import": "./dist/pages/index.js"
|
|
@@ -369,10 +373,10 @@
|
|
|
369
373
|
"@lexical/utils": ">=0.46.0 <1.0.0",
|
|
370
374
|
"@ryuzaki13/react-foundation-api": ">=0.1.0 <2.0.0",
|
|
371
375
|
"@ryuzaki13/react-foundation-lib": ">=0.1.0 <2.0.0",
|
|
372
|
-
"@tanstack/react-query": ">=5.101.
|
|
373
|
-
"@tanstack/react-router": ">=1.170.
|
|
374
|
-
"@tanstack/react-table": ">=
|
|
375
|
-
"@tanstack/react-virtual": ">=3.14.
|
|
376
|
+
"@tanstack/react-query": ">=5.101.4 <6.0.0",
|
|
377
|
+
"@tanstack/react-router": ">=1.170.23 <2.0.0",
|
|
378
|
+
"@tanstack/react-table": ">=9.1.0 <10.0.0",
|
|
379
|
+
"@tanstack/react-virtual": ">=3.14.9 <4.0.0",
|
|
376
380
|
"lexical": ">=0.46.0 <1.0.0",
|
|
377
381
|
"lucide-react": ">=1.21.0 <2.0.0",
|
|
378
382
|
"motion": ">=12.42.0 <13.0.0",
|
|
@@ -464,8 +468,8 @@
|
|
|
464
468
|
"@lexical/rich-text": "^0.49.0",
|
|
465
469
|
"@lexical/selection": "^0.49.0",
|
|
466
470
|
"@lexical/utils": "^0.49.0",
|
|
467
|
-
"@ryuzaki13/react-foundation-api": "^1.1.
|
|
468
|
-
"@ryuzaki13/react-foundation-lib": "^1.
|
|
471
|
+
"@ryuzaki13/react-foundation-api": "^1.1.16",
|
|
472
|
+
"@ryuzaki13/react-foundation-lib": "^1.4.0",
|
|
469
473
|
"@storybook/addon-a11y": "^10.5.5",
|
|
470
474
|
"@storybook/addon-docs": "^10.5.5",
|
|
471
475
|
"@storybook/addon-vitest": "^10.5.5",
|
|
@@ -473,8 +477,8 @@
|
|
|
473
477
|
"@tanstack/query-broadcast-client-experimental": "^5.101.4",
|
|
474
478
|
"@tanstack/query-persist-client-core": "^5.101.4",
|
|
475
479
|
"@tanstack/react-query": "^5.101.4",
|
|
476
|
-
"@tanstack/react-router": "^1.170.
|
|
477
|
-
"@tanstack/react-table": "^
|
|
480
|
+
"@tanstack/react-router": "^1.170.23",
|
|
481
|
+
"@tanstack/react-table": "^9.1.0",
|
|
478
482
|
"@tanstack/react-virtual": "^3.14.9",
|
|
479
483
|
"@testing-library/dom": "^10.4.1",
|
|
480
484
|
"@testing-library/react": "^16.3.2",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-Bbj4T0X2.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-CrYcG0WD.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Badge.stories-DKUJOyg3.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
|
|
2
2
|
`,(0,S.jsx)(u,{children:`Badge`}),`
|
|
3
3
|
`,(0,S.jsx)(o,{children:`Компактная текстовая метка для статусов, категорий, фильтров и коротких служебных пометок`}),`
|
|
4
4
|
`,(0,S.jsx)(t.p,{children:`Badge подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-
|
|
1
|
+
import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-Bbj4T0X2.js";import{i,n as a,r as o,t as s}from"./BadgeList-C_ImRsat.js";var c=t({Appearances:()=>h,Basic:()=>p,RemovableList:()=>_,Sizes:()=>g,Tones:()=>m,__namedExportsOrder:()=>v,default:()=>f}),l,u,d,f,p,m,h,g,_,v;function y(){return(y=e((()=>{l=n(),i(),a(),u=r(),{useArgs:d}=__STORYBOOK_MODULE_PREVIEW_API__,f={title:`Shared/UI/Badge`,component:o,args:{children:`Новый`,size:`md`,tone:`info`,appearance:`solid`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текст внутри бейджа.`,control:`text`},size:{description:`Размер бейджа.`,control:`inline-radio`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},tone:{description:`Цветовой тон бейджа.`,control:`inline-radio`,options:[`neutral`,`brand`,`success`,`warning`,`error`,`info`]},appearance:{description:`Форма бейджа.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},onRemove:{description:`Показывает кнопку удаления и вызывает обработчик по клику.`,control:!1}}},p={render:function(){let[e]=d();return(0,u.jsx)(o,{...e})}},m={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,u.jsx)(o,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,u.jsx)(o,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,u.jsx)(o,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,u.jsx)(o,{tone:`info`,appearance:`solid`,children:`Информация`})]})},h={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{tone:`neutral`,appearance:`solid`,children:`Solid`}),(0,u.jsx)(o,{tone:`neutral`,appearance:`outline`,children:`Outline`}),(0,u.jsx)(o,{tone:`info`,appearance:`ghost`,children:`Ghost`}),(0,u.jsx)(o,{tone:`warning`,appearance:`transparent`,children:`Transparent`})]})},g={render:()=>(0,u.jsxs)(s,{children:[(0,u.jsx)(o,{size:`xs`,children:`Extra Small`}),(0,u.jsx)(o,{size:`sm`,children:`Small`}),(0,u.jsx)(o,{size:`md`,children:`Medium`}),(0,u.jsx)(o,{size:`lg`,children:`Large`}),(0,u.jsx)(o,{size:`xl`,children:`Extra Large`})]})},_={render:()=>{let[e,t]=(0,l.useState)([`Фильтр A`,`Фильтр B`,`Фильтр C`]);return(0,u.jsx)(s,{children:e.map(e=>(0,u.jsx)(o,{tone:`info`,appearance:`outline`,onRemove:()=>t(t=>t.filter(t=>t!==e)),children:e},e))})}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Render() {
|
|
3
3
|
const [args] = useArgs<BadgeStoryArgs>();
|
|
4
4
|
return <Badge {...args} />;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n,t as r}from"./x-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{t}from"./react-C21x__mS.js";import{n,t as r}from"./x-_GQ6nyHW.js";import{n as i}from"./iframe-Bbj4T0X2.js";import{a,i as o}from"./utils-DUM89eIj.js";import{a as s,l as c}from"./array-D-_yMMUK-CIRmlF93.js";import{n as l,t as u}from"./FloatingPopover-fnwAyZil.js";import{a as d,i as f,r as p,t as m}from"./uiClasses-DiXn3Hc-.js";import{n as h,t as g}from"./FlexContainer-LmZIdhq2.js";function _({maxChar:e,placement:t=`left`,closeDelay:n=0,maxWidth:r,children:i,block:a,state:o,textWrap:s,textWrapProps:l}){let d=c(i);if(!d.length||e&&d.length<e)return(0,v.jsx)(`span`,{children:d});let f=s??`div`,p={style:{display:a?`block`:`inline-block`,width:e?`${e-3}ch`:`auto`},className:`textOverflow`},m={...l,...p,style:{...l?.style,...p.style},className:[l?.className,p.className].filter(Boolean).join(` `)};return(0,v.jsx)(u,{state:o,placement:t,openOnHover:!0,content:d,closeDelay:n,maxWidth:r,children:(0,v.jsx)(f,{...m,children:d})})}var v;function y(){return(y=e((()=>{s(),l(),v=i(),_.__docgenInfo={description:``,methods:[],displayName:`TextOverflow`,props:{children:{required:!0,tsType:{name:`string`},description:``},maxChar:{required:!1,tsType:{name:`number`},description:``},maxWidth:{required:!1,tsType:{name:`number`},description:`Максимальная ширина тултипа в em.`},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"left"`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0`,computed:!1}},block:{required:!1,tsType:{name:`literal`,value:`true`},description:`Для работы text-overflow элемент обязан быть блочным или inline-block.
|
|
2
2
|
Если в качестве обёртки передается инлайновый компонент, то он будет
|
|
3
3
|
перезаписан через стили на display: block или inline-block в зависимости
|
|
4
4
|
от установки данного пропса.`},state:{required:!1,tsType:{name:`union`,raw:`"information" | "error" | "warning" | "success" | "negative"`,elements:[{name:`literal`,value:`"information"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"negative"`}]},description:``},textWrap:{required:!1,tsType:{name:`T`},description:``},textWrapProps:{required:!1,tsType:{name:`Omit`,elements:[{name:`ComponentProps`,elements:[{name:`T`}],raw:`ComponentProps<T>`},{name:`literal`,value:`"children"`}],raw:`Omit<ComponentProps<T>, "children">`},description:``}}}})))()}var b,x,S,C,w,T,E,D,O,k;function A(){return(A=e((()=>{b=`qBtmnH`,x=`p-HsHY`,S=`u9tQAE`,C=`FRScRz`,w=`W13uQO`,T=`_3IRcM9`,E=`R3ybI7`,D=`DdWAaC`,O=`_5cXBQF`,k={badge:b,passive:x,sizeXs:S,sizeSm:C,sizeMd:w,sizeLg:T,sizeXl:E,content:D,removeButton:O}})))()}function j({children:e,size:t=`sm`,tone:n,appearance:i,className:o,onRemove:s}){let c=n??`neutral`,l=d({tone:n,appearance:i,fallbackTone:c,fallbackAppearance:c===`neutral`?`outline`:`solid`});return(0,M.jsxs)(`div`,{className:a(k.badge,N[t],p(l.tone),m(l.appearance),!s&&k.passive,o),children:[(0,M.jsx)(_,{maxChar:25,placement:`top`,block:!0,textWrapProps:{className:k.content},children:String(e)}),s&&(0,M.jsx)(`button`,{type:`button`,onClick:s,className:k.removeButton,"aria-label":`Удалить бейдж`,"data-ui":`badge-remove-button`,"data-action":`remove-badge`,children:(0,M.jsx)(r,{})})]})}var M,N;function P(){return(P=e((()=>{o(),n(),y(),f(),A(),M=i(),N={xs:k.sizeXs,sm:k.sizeSm,md:k.sizeMd,lg:k.sizeLg,xl:k.sizeXl},j.__docgenInfo={description:`Компактный индикатор для статусов, категорий и коротких служебных меток.`,methods:[],displayName:`Badge`,props:{children:{required:!0,tsType:{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``,defaultValue:{value:`"sm"`,computed:!1}},tone:{required:!1,tsType:{name:`union`,raw:`"neutral" | "brand" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"brand"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``},appearance:{required:!1,tsType:{name:`union`,raw:`"solid" | "outline" | "ghost" | "transparent"`,elements:[{name:`literal`,value:`"solid"`},{name:`literal`,value:`"outline"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"transparent"`}]},description:``},className:{required:!1,tsType:{name:`string`},description:``},onRemove:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``}}}})))()}function F({children:e}){return(0,L.jsx)(g,{inline:!0,wrap:!0,gap:`sm`,align:`baseline`,children:I.Children.map(e,(e,t)=>(0,L.jsx)(I.Fragment,{children:e},t))})}var I,L;function R(){return(R=e((()=>{I=t(),h(),L=i(),F.__docgenInfo={description:"Контейнер для группы `Badge`, который выстраивает элементы в единый список с предсказуемыми отступами. Используется для компактного вывода набора меток или фильтров.",methods:[],displayName:`BadgeList`,props:{children:{required:!0,tsType:{name:`Array`,elements:[{name:`ReactElement`,elements:[{name:`union`,raw:`typeof Badge | null | undefined | false`,elements:[{name:`Badge`},{name:`null`},{name:`undefined`},{name:`literal`,value:`false`}]}],raw:`ReactElement<typeof Badge | null | undefined | false>`}],raw:`ReactElement<typeof Badge | null | undefined | false>[]`},description:``}}}})))()}export{P as i,R as n,j as r,F as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-
|
|
1
|
+
import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-Bbj4T0X2.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-CrYcG0WD.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Button.stories-fHvDvt2w.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
|
|
2
2
|
`,(0,x.jsx)(u,{children:`Button`}),`
|
|
3
3
|
`,(0,x.jsx)(o,{children:`Базовая action-кнопка дизайн-системы для пользовательских действий, подтверждений и быстрых операций`}),`
|
|
4
4
|
`,(0,x.jsxs)(t.p,{children:[(0,x.jsx)(t.code,{children:`Button`}),` используется как универсальная кнопка интерфейса: в формах, тулбарах, модальных окнах, карточках, таблицах и компактных icon-only сценариях.`]}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e,o as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-
|
|
1
|
+
import{n as e,o as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-Bbj4T0X2.js";import{a as i,i as a}from"./utils-DUM89eIj.js";import{n as o,t as s}from"./FloatingPopover-fnwAyZil.js";import{n as c,t as l}from"./ui.module-CiLQZm_L.js";import{a as u,i as d,r as f,t as p}from"./uiClasses-DiXn3Hc-.js";var m,h,g,_,v;function y(){return(y=e((()=>{m=`wLOHwj`,h=`lFsM-Y`,g=`LPob63`,_=`tsaGtv`,v={button:m,iconOnly:h,buttonInner:g,buttonIcon:_}})))()}var b,x,S;function C(){return(C=e((()=>{b=t(n(),1),a(),o(),l(),d(),y(),x=r(),S=(0,b.forwardRef)(function({children:e,disabled:t,className:n,icon:r,iconEnd:a,title:o,variant:l,tone:d,appearance:m,type:h=`button`,"aria-label":g,..._},y){let S=b.Children.count(e)>0,C=!!r&&!S,w=u({variant:l,tone:d,appearance:m,fallbackAppearance:d&&d!==`neutral`?`solid`:`outline`}),T=C?g??o:g,E=(0,x.jsx)(`button`,{..._,ref:y,type:h,disabled:t,"aria-label":T,className:i(c.uiElement,c.uiInputControl,v.button,f(w.tone),p(w.appearance),C?v.iconOnly:``,`textNoWrap`,n??``),children:(0,x.jsxs)(`span`,{className:v.buttonInner,children:[r&&!a&&(0,x.jsx)(`span`,{"aria-hidden":`true`,className:v.buttonIcon,children:r}),S&&(0,x.jsx)(`span`,{className:`flexEllipsis`,children:e}),r&&a&&(0,x.jsx)(`span`,{"aria-hidden":`true`,className:v.buttonIcon,children:r})]})});return o?(0,x.jsx)(s,{placement:`bottom`,tooltip:!0,content:(0,x.jsx)(x.Fragment,{children:o}),children:E}):E}),S.__docgenInfo={description:'Базовая кнопка дизайн-системы для пользовательских действий.\nПоддерживает состояния, tone + appearance, иконки и безопасный `type="button"` по умолчанию.',methods:[],displayName:`Button`,props:{variant:{required:!1,tsType:{name:`union`,raw:`| "transparent"
|
|
2
2
|
| "ghost"
|
|
3
3
|
| "neutral"
|
|
4
4
|
| "brand"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{n,t as r}from"./check-
|
|
1
|
+
import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{n,t as r}from"./check-Cnuffb78.js";import{n as i,t as a}from"./download-C1DiezfA.js";import{i as o,n as s,r as c}from"./iframe-Bbj4T0X2.js";import{n as l,t as u}from"./Button-DxGg9rB3.js";var d,f;function p(){return(p=e((()=>{o(),d=[[`path`,{d:`M10.268 21a2 2 0 0 0 3.464 0`,key:`vwvbt9`}],[`path`,{d:`M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326`,key:`11g9vi`}]],f=c(`bell`,d)})))()}var m,h;function g(){return(g=e((()=>{o(),m=[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`M12 5v14`,key:`s699le`}]],h=c(`plus`,m)})))()}var _=t({Basic:()=>x,ComposableScheme:()=>C,Variants:()=>S,WithIcons:()=>w,__namedExportsOrder:()=>T,default:()=>b}),v,y,b,x,S,C,w,T;function E(){return(E=e((()=>{p(),n(),i(),g(),l(),v=s(),{useArgs:y}=__STORYBOOK_MODULE_PREVIEW_API__,b={title:`Shared/UI/Button`,component:u,args:{children:`Действие`,variant:`neutralOutline`,disabled:!1,iconEnd:!1},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текстовое содержимое кнопки.`,control:`text`},variant:{description:"Готовая схема для обратной совместимости. Если заданы `tone` или `appearance`, они имеют приоритет.",control:`select`,options:[`neutral`,`neutralOutline`,`ghost`,`brand`,`error`,`warning`,`success`,`info`,`brandOutline`,`errorOutline`,`warningOutline`,`successOutline`,`infoOutline`,`transparent`]},tone:{description:`Цветовой тон кнопки.`,control:`inline-radio`,options:[`neutral`,`brand`,`error`,`warning`,`success`,`info`]},appearance:{description:`Визуальная форма кнопки.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},icon:{description:`Иконка слева или справа от текста.`,control:!1},iconEnd:{description:`Перемещает иконку в конец кнопки.`,control:`boolean`},type:{description:"Тип нативной кнопки; по умолчанию безопасный `button`.",control:`select`,options:[`button`,`submit`,`reset`]},disabled:{description:`Блокирует нажатие.`,control:`boolean`}}},x={render:function(){let[e]=y();return(0,v.jsx)(u,{...e})}},S={render:()=>(0,v.jsxs)(`div`,{style:{display:`grid`,gap:12,gridTemplateColumns:`repeat(auto-fit, minmax(180px, 1fr))`},children:[(0,v.jsx)(u,{variant:`neutral`,children:`Neutral Solid`}),(0,v.jsx)(u,{variant:`neutralOutline`,children:`Neutral Outline`}),(0,v.jsx)(u,{variant:`ghost`,children:`Ghost`}),(0,v.jsx)(u,{variant:`brand`,children:`Brand Solid`}),(0,v.jsx)(u,{variant:`brandOutline`,children:`Brand Outline`}),(0,v.jsx)(u,{variant:`info`,children:`Info Solid`}),(0,v.jsx)(u,{variant:`success`,children:`Success Solid`}),(0,v.jsx)(u,{variant:`warning`,children:`Warning Solid`}),(0,v.jsx)(u,{variant:`error`,children:`Error Solid`}),(0,v.jsx)(u,{variant:`infoOutline`,children:`Info Outline`}),(0,v.jsx)(u,{variant:`successOutline`,children:`Success Outline`}),(0,v.jsx)(u,{variant:`warningOutline`,children:`Warning Outline`}),(0,v.jsx)(u,{variant:`errorOutline`,children:`Error Outline`}),(0,v.jsx)(u,{variant:`transparent`,children:`Transparent`})]}),args:{children:`Действие`}},C={render:()=>(0,v.jsxs)(`div`,{style:{display:`grid`,gap:12,gridTemplateColumns:`repeat(auto-fit, minmax(180px, 1fr))`},children:[(0,v.jsx)(u,{tone:`neutral`,appearance:`solid`,children:`Neutral Solid`}),(0,v.jsx)(u,{tone:`neutral`,appearance:`outline`,children:`Neutral Outline`}),(0,v.jsx)(u,{tone:`neutral`,appearance:`ghost`,children:`Neutral Ghost`}),(0,v.jsx)(u,{tone:`brand`,appearance:`solid`,children:`Brand Solid`}),(0,v.jsx)(u,{tone:`brand`,appearance:`outline`,children:`Brand Outline`}),(0,v.jsx)(u,{tone:`brand`,appearance:`ghost`,children:`Brand Ghost`}),(0,v.jsx)(u,{tone:`brand`,appearance:`transparent`,children:`Brand Transparent`}),(0,v.jsx)(u,{tone:`info`,appearance:`outline`,children:`Info Outline`}),(0,v.jsx)(u,{tone:`success`,appearance:`solid`,children:`Success Solid`}),(0,v.jsx)(u,{tone:`error`,appearance:`transparent`,children:`Error Transparent`})]})},w={render:()=>(0,v.jsxs)(`div`,{style:{display:`flex`,gap:12,flexWrap:`wrap`},children:[(0,v.jsx)(u,{icon:(0,v.jsx)(a,{}),children:`Скачать`}),(0,v.jsx)(u,{icon:(0,v.jsx)(h,{}),tone:`info`,appearance:`solid`,children:`Создать`}),(0,v.jsx)(u,{icon:(0,v.jsx)(r,{}),iconEnd:!0,tone:`success`,appearance:`solid`,children:`Подтвердить`}),(0,v.jsx)(u,{icon:(0,v.jsx)(f,{}),title:`Уведомления`})]}),args:{children:`Действие`}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Render() {
|
|
3
3
|
const [args] = useArgs<ButtonProps>();
|
|
4
4
|
return <Button {...args} />;
|