@ryuzaki13/react-foundation-ui 1.2.7 → 1.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -1
- package/storybook-static/addon-visual-tests-assets/visual-test-illustration.mp4 +0 -0
- package/storybook-static/assets/Badge-BqGrcxAM.js +139 -0
- package/storybook-static/assets/Badge.stories-D-4FPPMr.js +51 -0
- package/storybook-static/assets/Button-Dk2YMZua.js +12 -0
- package/storybook-static/assets/{Button-R2ebF86Y.js → Button-iCkwBEDP.js} +47 -47
- package/storybook-static/assets/Button.stories-BkV_xVnD.js +75 -0
- package/storybook-static/assets/{CheckBox-CaI3XPfw.js → CheckBox-BQhsynyB.js} +1 -1
- package/storybook-static/assets/{CheckBox-jIOKCtKS.js → CheckBox-C-f5AsCI.js} +31 -31
- package/storybook-static/assets/CheckBox.stories-7V9WkaKi.js +60 -0
- package/storybook-static/assets/Color-KMSTOMOX-CYcFidZH.js +1 -0
- package/storybook-static/assets/ContextMenu-DinzhWx_.js +40 -0
- package/storybook-static/assets/{ContextMenu.stories-DuHhaMZG.js → ContextMenu.stories-B9O_FkLB.js} +1 -1
- package/storybook-static/assets/DateInput-BT_5pRV0.js +40 -0
- package/storybook-static/assets/DateInput-CvJvdtwa.js +1 -0
- package/storybook-static/assets/{DateInput.stories-DA4m_bt-.js → DateInput.stories-BDKMX9K3.js} +1 -1
- package/storybook-static/assets/DateRangePresetSelect-Bck3ITZr.js +30 -0
- package/storybook-static/assets/DateRangePresetSelect-CPZ6FKGz.js +3 -0
- package/storybook-static/assets/DateRangePresetSelect.stories-D5fRZmWy.js +11 -0
- package/storybook-static/assets/Detail-DBH4WUCF.js +40 -0
- package/storybook-static/assets/Detail.stories-Kvnqo8Un.js +44 -0
- package/storybook-static/assets/{Dialog-DRwO9iJS.js → Dialog-Cv_od09Q.js} +22 -22
- package/storybook-static/assets/Dialog.stories-CY8mr-2o.js +31 -0
- package/storybook-static/assets/Disclosure-BVz61VJq.js +32 -0
- package/storybook-static/assets/{Disclosure.stories-Bu_i_1U_.js → Disclosure.stories-CufTvUiK.js} +2 -2
- package/storybook-static/assets/DocsRenderer-JROSPFPF-BJw82UhU.js +2 -0
- package/storybook-static/assets/DropZone-DOvkWmBD.js +36 -0
- package/storybook-static/assets/{DropZone.stories-DlaN01G9.js → DropZone.stories-K1bqdB2U.js} +2 -2
- package/storybook-static/assets/DropdownMenu-Cx08nIaY.js +1 -0
- package/storybook-static/assets/{ExpandableActionPanel.stories-DzfL1phg.js → ExpandableActionPanel.stories-BZ3P24ES.js} +2 -2
- package/storybook-static/assets/Flex-Brzvr0YX.js +3 -0
- package/storybook-static/assets/Flex-CVjyrD9i.js +61 -0
- package/storybook-static/assets/{Flex.stories-BYls_CQf.js → Flex.stories-B9dkwuh5.js} +1 -1
- package/storybook-static/assets/{Grid-C-xko03k.js → Grid-DhASlspp.js} +1 -1
- package/storybook-static/assets/Grid-blnYLgOs.js +61 -0
- package/storybook-static/assets/{Grid.stories-D_D0IapG.js → Grid.stories-DafgjrQm.js} +1 -1
- package/storybook-static/assets/{ImageCropper.stories-CswLqd0C.js → ImageCropper.stories-638pLg4D.js} +1 -1
- package/storybook-static/assets/ImageRenderer-C6DwGwQl.js +2 -0
- package/storybook-static/assets/{ImageRenderer.stories-Bw_FhRQS.js → ImageRenderer.stories-DJJiqQFU.js} +1 -1
- package/storybook-static/assets/{ImageView.stories-W43xyxSy.js → ImageView.stories-DVeX-CzY.js} +1 -1
- package/storybook-static/assets/{ImageViewer.stories-p81pm72u.js → ImageViewer.stories-NqiR5Eyj.js} +2 -2
- package/storybook-static/assets/{ImageViewerRuntime-DkG2C2vh.js → ImageViewerRuntime-C0uGYGQl.js} +2 -2
- package/storybook-static/assets/Input-4QsBT-dh.js +39 -0
- package/storybook-static/assets/Input-CjJUuLEX.js +3 -0
- package/storybook-static/assets/Input.stories-DX8FX7AI.js +38 -0
- package/storybook-static/assets/InputDateTime-C6cR1WP9.js +39 -0
- package/storybook-static/assets/InputDateTime.stories-DPK8Y5p2.js +35 -0
- package/storybook-static/assets/{InputFile-ZiotxlMe.js → InputFile-BwI_udQQ.js} +26 -26
- package/storybook-static/assets/InputFile.stories-BdWP2iBM.js +36 -0
- package/storybook-static/assets/InputFiles-CPY6AJQJ.js +1 -0
- package/storybook-static/assets/{InputFiles-DWUxFStB.js → InputFiles-CfmNIDk_.js} +26 -26
- package/storybook-static/assets/InputFiles.stories-DnXD0hgD.js +33 -0
- package/storybook-static/assets/{InputImage-DmGIfR7v.js → InputImage-CgjrjJiq.js} +26 -26
- package/storybook-static/assets/{InputImage.stories-BD6OuYSL.js → InputImage.stories-CFHzEXGv.js} +1 -1
- package/storybook-static/assets/LayoutPicker-BfwRb9HQ.js +66 -0
- package/storybook-static/assets/{LayoutPicker.stories-CHQeF27J.js → LayoutPicker.stories-C9sMcU1k.js} +3 -3
- package/storybook-static/assets/Listbox-B2FoYInE.js +38 -0
- package/storybook-static/assets/Listbox.stories-BnGRDEMg.js +47 -0
- package/storybook-static/assets/{Modal-Cu6UplI8.js → Modal-Bd8v3vU8.js} +32 -32
- package/storybook-static/assets/Modal.stories-CmYJeAAz.js +180 -0
- package/storybook-static/assets/MultiSelect-BeRfLM-g.js +2 -0
- package/storybook-static/assets/MultiSelect-Bswj23vq.js +56 -0
- package/storybook-static/assets/MultiSelect.stories-iKlesibJ.js +29 -0
- package/storybook-static/assets/{NotificationsHost-CzBey-gZ.js → NotificationsHost-Cf0puFJk.js} +22 -22
- package/storybook-static/assets/NotificationsHost.stories-DX1niytc.js +25 -0
- package/storybook-static/assets/ODataMultiSelect-BvFXZlGZ.js +53 -0
- package/storybook-static/assets/ODataMultiSelect-CiZ3aEy3.js +1 -0
- package/storybook-static/assets/ODataMultiSelect.stories-BcRrzHnf.js +73 -0
- package/storybook-static/assets/ODataSelect-Bo0yPtod.js +1 -0
- package/storybook-static/assets/{ODataSelect-BTue1iaA.js → ODataSelect-DgH5G-C_.js} +32 -32
- package/storybook-static/assets/ODataSelect.stories-DEOly20_.js +73 -0
- package/storybook-static/assets/ODataTreeMultiSelect-IKfvxL7p.js +17 -0
- package/storybook-static/assets/ODataTreeMultiSelect.stories-uPDVAyMu.js +28 -0
- package/storybook-static/assets/ODataTreeSelect-BujgjSkl.js +16 -0
- package/storybook-static/assets/ODataTreeSelect.stories-BzlUExoW.js +21 -0
- package/storybook-static/assets/{PeriodSelect-BMZas-k8.js → PeriodSelect-BJIPDLq1.js} +31 -31
- package/storybook-static/assets/{PeriodSelect.stories-3w66x0Wx.js → PeriodSelect.stories-D12q6-YO.js} +1 -1
- package/storybook-static/assets/{Popover-Cp69zYWt.js → Popover-D25DhaiJ.js} +29 -29
- package/storybook-static/assets/{Popover.stories-Dm2olc8x.js → Popover.stories-CF3zUe0j.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput-7DV2qzpJ.js → PresetRangeDateInput-CDw6HtWA.js} +19 -19
- package/storybook-static/assets/PresetRangeDateInput.stories-BQZI6HOn.js +15 -0
- package/storybook-static/assets/{RadioButton-CZgaZarn.js → RadioButton-BgEBxZJi.js} +27 -27
- package/storybook-static/assets/{RadioButton.stories-DRGhwy-6.js → RadioButton.stories-BkFGEJXb.js} +2 -2
- package/storybook-static/assets/{RadioGroup-B9pw-kxR.js → RadioGroup-C-K84fCC.js} +26 -26
- package/storybook-static/assets/RadioGroup-Jq-lWcgE.js +1 -0
- package/storybook-static/assets/RadioGroup.stories-DyuW8DaF.js +42 -0
- package/storybook-static/assets/Select-BrRZA3Up.js +12 -0
- package/storybook-static/assets/{Select-DcRA8coi.js → Select-ChYAdfkx.js} +35 -35
- package/storybook-static/assets/Select.stories-D-onxXmT.js +46 -0
- package/storybook-static/assets/SelectOptionContent-Cwd0p14r.js +1 -0
- package/storybook-static/assets/SerializableSelect-CcBh49iS.js +4 -0
- package/storybook-static/assets/{SerializableSelect-BFMP4RoU.js → SerializableSelect-D9BlCZ4x.js} +32 -32
- package/storybook-static/assets/SerializableSelect.stories-BXMFTNDx.js +43 -0
- package/storybook-static/assets/SingleDateTimeInput-cHIGelrz.js +53 -0
- package/storybook-static/assets/SingleDateTimeInput.stories-BdPyEPUr.js +78 -0
- package/storybook-static/assets/Slider-Cb_nb9P2.js +63 -0
- package/storybook-static/assets/Slider.stories-CoKGxwRT.js +77 -0
- package/storybook-static/assets/SliderInput-DyxDl1Mo.js +58 -0
- package/storybook-static/assets/{SliderInput.stories-CDS4YS_3.js → SliderInput.stories-DgbBm38V.js} +1 -1
- package/storybook-static/assets/Sortable-DC3bPcbn.js +72 -0
- package/storybook-static/assets/{Sortable.stories--yPzhn7U.js → Sortable.stories-B_IhqW5F.js} +1 -1
- package/storybook-static/assets/{Splitter-6_oQu3c4.js → Splitter-CGw6p5-z.js} +39 -39
- package/storybook-static/assets/Splitter.stories-DNlOAJY9.js +22 -0
- package/storybook-static/assets/{StateSelect-ClrBKHfD.js → StateSelect-cU_bLcpU.js} +25 -25
- package/storybook-static/assets/{StateSelect.stories-DtpIwsdv.js → StateSelect.stories-D0Z05ltu.js} +2 -2
- package/storybook-static/assets/Switch-C-3mRPBf.js +36 -0
- package/storybook-static/assets/Switch.stories-Csqx8bKj.js +26 -0
- package/storybook-static/assets/Table-4x8XIQpa.js +197 -0
- package/storybook-static/assets/{Table.stories-BZOmuXFd.js → Table.stories-DLsx7_5W.js} +1 -1
- package/storybook-static/assets/Tabs-BYxa2MdO.js +72 -0
- package/storybook-static/assets/{Tabs.stories-p59QJ2Tc.js → Tabs.stories-Bs2uE5X2.js} +1 -1
- package/storybook-static/assets/TagInput.stories-8_Uk7z4a.js +18 -0
- package/storybook-static/assets/{Textarea-DtmMCSxT.js → Textarea-C9do4TkE.js} +26 -26
- package/storybook-static/assets/Textarea.stories-khYPBnjL.js +27 -0
- package/storybook-static/assets/TimePanel-DAQw6BvJ.js +1 -0
- package/storybook-static/assets/{TimePanel.stories-D2scop0x.js → TimePanel.stories-D8uZoVpL.js} +1 -1
- package/storybook-static/assets/{Toggle-C9Yg9JE_.js → Toggle-C4pQIuyy.js} +26 -26
- package/storybook-static/assets/Toggle.stories-DhF17j-W.js +30 -0
- package/storybook-static/assets/TreeMultiSelect-B6_6vRxE.js +15 -0
- package/storybook-static/assets/TreeMultiSelect-Drs35VVA.js +1 -0
- package/storybook-static/assets/TreeMultiSelect.stories-D6YSwiei.js +31 -0
- package/storybook-static/assets/{TreePickerBase-p_zyJtun.js → TreePickerBase-DCognf3p.js} +2 -2
- package/storybook-static/assets/TreeSelect-CAAu7_OB.js +15 -0
- package/storybook-static/assets/TreeSelect-DxdqUuJ6.js +1 -0
- package/storybook-static/assets/TreeSelect.stories-BqF-qAB9.js +16 -0
- package/storybook-static/assets/TreeTable-TKNA-uIN.js +175 -0
- package/storybook-static/assets/{TreeTable.stories-BZLmxdzp.js → TreeTable.stories-yeAD18Zw.js} +2 -2
- package/storybook-static/assets/WithTooltip-7X4HQR7L-CxfB6hD8.js +9 -0
- package/storybook-static/assets/{base-table-C7bVdENP.js → base-table-ByITBr1J.js} +1 -1
- package/storybook-static/assets/blocks-0RiOsxIK.js +285 -0
- package/storybook-static/assets/button-B1ZGqKIL.js +1 -0
- package/storybook-static/assets/{check-box-B71d1lgw.js → check-box-NnScD6BH.js} +1 -1
- package/storybook-static/assets/chunk-3LY4VQVK-DprWWQ6L.js +6 -0
- package/storybook-static/assets/{chunk-LITCR56V-kr_6KJh-.js → chunk-LITCR56V-CsoWERay.js} +2 -2
- package/storybook-static/assets/contextMenu-B7OY9AUe.js +2 -0
- package/storybook-static/assets/error-B-BZQLMk.js +1 -0
- package/storybook-static/assets/flex-DjZzX5cW.js +1 -0
- package/storybook-static/assets/floating-ui.react-6aWiJn-w.js +1 -0
- package/storybook-static/assets/formatter-L2YTDE3Q-Bhbxmhyr.js +1 -0
- package/storybook-static/assets/{formatters-Br290Dmy.js → formatters-3Nbt_zpw.js} +1 -1
- package/storybook-static/assets/grid-CXx-3eN4.js +1 -0
- package/storybook-static/assets/{hooks-DzbwAWAd.js → hooks-cOC2wx_S.js} +1 -1
- package/storybook-static/assets/{iframe-B1Ua6ocI.js → iframe-GmIo3IOR.js} +199 -197
- package/storybook-static/assets/input-BZoBzauA.js +1 -0
- package/storybook-static/assets/{mdx-react-shim-DHWnLJR9.js → mdx-react-shim-DQ40dZsI.js} +1 -1
- package/storybook-static/assets/media-CaNRzUMK.js +1 -0
- package/storybook-static/assets/misc-DSZ85X5k.js +5 -0
- package/storybook-static/assets/notifications-dwTsOfAG.js +1 -0
- package/storybook-static/assets/odata-BXYPW5TY.js +1 -0
- package/storybook-static/assets/odata-service-CdmjwNQZ.js +1 -0
- package/storybook-static/assets/{odataStoryFixtures-DS1zYaZm.js → odataStoryFixtures-qHROzCso.js} +1 -1
- package/storybook-static/assets/picker-Ly9fNo5I.js +2 -0
- package/storybook-static/assets/popover-hHS3Q1Eb.js +2 -0
- package/storybook-static/assets/preset-select-DSUOhzZJ.js +5 -0
- package/storybook-static/assets/{react-18-D4G2zUNp.js → react-18-C8dLShAR.js} +1 -1
- package/storybook-static/assets/react-CufbfMTd.js +9 -0
- package/storybook-static/assets/react-dom-B1EOrd4K.js +1 -0
- package/storybook-static/assets/select-CjW1dQXg.js +1 -0
- package/storybook-static/assets/slider-CKtA1jkD.js +2 -0
- package/storybook-static/assets/sortable-C7z1FJM0.js +1 -0
- package/storybook-static/assets/{syntaxhighlighter-RTCFPKCB-D-6cX_EQ.js → syntaxhighlighter-RTCFPKCB-DUS1jW_J.js} +2 -2
- package/storybook-static/assets/text-Cw7Vu082.js +4 -0
- package/storybook-static/assets/theming-Ce0TAFtT.js +39 -0
- package/storybook-static/assets/ui-Dlg5NgOB.js +1 -0
- package/storybook-static/assets/useODataSelectBase-BE8nJXZo.js +1 -0
- package/storybook-static/assets/useODataTreeData-Dli9NQVP.js +1 -0
- package/storybook-static/assets/utils-B73_kE2n.js +1 -0
- package/storybook-static/iframe.html +2 -2
- package/storybook-static/index.html +16 -6
- package/storybook-static/index.json +1 -1
- package/storybook-static/project.json +1 -1
- package/storybook-static/sb-addons/chromatic-com-storybook-1/manager-bundle.js +352 -0
- package/storybook-static/sb-addons/chromatic-com-storybook-1/manager-bundle.js.LEGAL.txt +31 -0
- package/storybook-static/sb-addons/vitest-4/manager-bundle.js +3 -0
- package/storybook-static/assets/Badge-BNG4jaAG.js +0 -139
- package/storybook-static/assets/Badge.stories-DBR_TCrU.js +0 -51
- package/storybook-static/assets/Button-CV6qRYrS.js +0 -12
- package/storybook-static/assets/Button.stories-BxQyR9Jj.js +0 -75
- package/storybook-static/assets/CheckBox.stories-B53ABl5i.js +0 -60
- package/storybook-static/assets/Color-KMSTOMOX-Cyl8cJgb.js +0 -1
- package/storybook-static/assets/ContextMenu-BwtAOupO.js +0 -40
- package/storybook-static/assets/DateInput-BdC-rKjp.js +0 -40
- package/storybook-static/assets/DateInput-Bn8ERC92.js +0 -1
- package/storybook-static/assets/DateRangePresetSelect-9x2PXji2.js +0 -3
- package/storybook-static/assets/DateRangePresetSelect-BAxLf-sI.js +0 -30
- package/storybook-static/assets/DateRangePresetSelect.stories-Cpm9i1Gs.js +0 -11
- package/storybook-static/assets/Detail-jSNmxeK-.js +0 -40
- package/storybook-static/assets/Detail.stories-CnI5n5T5.js +0 -44
- package/storybook-static/assets/Dialog.stories-BzFqMgrU.js +0 -31
- package/storybook-static/assets/Disclosure-BbjuwgPN.js +0 -32
- package/storybook-static/assets/DocsRenderer-JROSPFPF-BijI6psg.js +0 -2
- package/storybook-static/assets/DropZone-8RM16_68.js +0 -36
- package/storybook-static/assets/DropdownMenu-COmcfMmT.js +0 -1
- package/storybook-static/assets/Flex-BQBzh4Tr.js +0 -3
- package/storybook-static/assets/Flex-CHaV6K7m.js +0 -61
- package/storybook-static/assets/Grid-DloPlrCB.js +0 -61
- package/storybook-static/assets/ImageRenderer-DbFiaYXn.js +0 -2
- package/storybook-static/assets/Input--cNyU-Ag.js +0 -3
- package/storybook-static/assets/Input-ZH34LSnz.js +0 -39
- package/storybook-static/assets/Input.stories-DM-fUL_7.js +0 -38
- package/storybook-static/assets/InputDateTime-BZGJSifI.js +0 -39
- package/storybook-static/assets/InputDateTime.stories-BVdDIO_9.js +0 -35
- package/storybook-static/assets/InputFile.stories-CU0wd7SJ.js +0 -36
- package/storybook-static/assets/InputFiles-B3vHz3jd.js +0 -1
- package/storybook-static/assets/InputFiles.stories-DfzkzBu8.js +0 -33
- package/storybook-static/assets/LayoutPicker-DO0Hq5wg.js +0 -66
- package/storybook-static/assets/Listbox-BoBf1VYa.js +0 -38
- package/storybook-static/assets/Listbox.stories-Cs6ABkXs.js +0 -47
- package/storybook-static/assets/Modal.stories-DDHOCfX1.js +0 -180
- package/storybook-static/assets/MultiSelect-BVATOh-_.js +0 -2
- package/storybook-static/assets/MultiSelect-Dkv3SI5J.js +0 -56
- package/storybook-static/assets/MultiSelect.stories-CPNipIbC.js +0 -29
- package/storybook-static/assets/NotificationsHost.stories-CeRXDmBa.js +0 -25
- package/storybook-static/assets/ODataMultiSelect-BIDgmui6.js +0 -53
- package/storybook-static/assets/ODataMultiSelect-U8WlXc3y.js +0 -1
- package/storybook-static/assets/ODataMultiSelect.stories-DmeX7-ss.js +0 -73
- package/storybook-static/assets/ODataSelect-BO4av_hn.js +0 -1
- package/storybook-static/assets/ODataSelect.stories-DpQp77ZX.js +0 -73
- package/storybook-static/assets/ODataTreeMultiSelect-tcWnebHq.js +0 -17
- package/storybook-static/assets/ODataTreeMultiSelect.stories-C6of8u9F.js +0 -28
- package/storybook-static/assets/ODataTreeSelect-B88XSjq4.js +0 -16
- package/storybook-static/assets/ODataTreeSelect.stories-CXN2zOja.js +0 -21
- package/storybook-static/assets/PresetRangeDateInput.stories-CWwkINdd.js +0 -15
- package/storybook-static/assets/RadioGroup-DPNg9UXg.js +0 -1
- package/storybook-static/assets/RadioGroup.stories-D_nQ2UMX.js +0 -42
- package/storybook-static/assets/Select-C5DH0hMi.js +0 -12
- package/storybook-static/assets/Select.stories-BxlItwVq.js +0 -46
- package/storybook-static/assets/SelectOptionContent-RFIk8-W0.js +0 -1
- package/storybook-static/assets/SerializableSelect-CJtC_MVh.js +0 -4
- package/storybook-static/assets/SerializableSelect.stories-Cwk9kf8V.js +0 -43
- package/storybook-static/assets/SingleDateTimeInput-BM_emntS.js +0 -53
- package/storybook-static/assets/SingleDateTimeInput.stories-DK0JJ19r.js +0 -78
- package/storybook-static/assets/Slider-BjAGWnmv.js +0 -63
- package/storybook-static/assets/Slider.stories-AFZ3sK6N.js +0 -77
- package/storybook-static/assets/SliderInput-CEmHsnm3.js +0 -58
- package/storybook-static/assets/Sortable-BwTtVBVt.js +0 -72
- package/storybook-static/assets/Splitter.stories-BLDqjnbb.js +0 -22
- package/storybook-static/assets/Switch-cwvSIlOe.js +0 -36
- package/storybook-static/assets/Switch.stories-BNMmFr3z.js +0 -26
- package/storybook-static/assets/Table-BScnaCwl.js +0 -197
- package/storybook-static/assets/Tabs-WCUd456k.js +0 -72
- package/storybook-static/assets/TagInput.stories-UojVk_Jy.js +0 -18
- package/storybook-static/assets/Textarea.stories-Db3Pigr7.js +0 -27
- package/storybook-static/assets/TimePanel-Bjn51Vi_.js +0 -1
- package/storybook-static/assets/Toggle.stories-Ok2NhICE.js +0 -30
- package/storybook-static/assets/TreeMultiSelect-DJzqY2Hd.js +0 -1
- package/storybook-static/assets/TreeMultiSelect-DxFQkzpN.js +0 -15
- package/storybook-static/assets/TreeMultiSelect.stories-BOgyH5ny.js +0 -31
- package/storybook-static/assets/TreeSelect-C2_2A0_N.js +0 -15
- package/storybook-static/assets/TreeSelect-CejsBEz8.js +0 -1
- package/storybook-static/assets/TreeSelect.stories-DerIIWQL.js +0 -16
- package/storybook-static/assets/TreeTable-3l5conv1.js +0 -175
- package/storybook-static/assets/WithTooltip-7X4HQR7L-C39XELKG.js +0 -9
- package/storybook-static/assets/blocks-DBWaa853.js +0 -285
- package/storybook-static/assets/button-DhCvGY9d.js +0 -1
- package/storybook-static/assets/chunk-3LY4VQVK-Cy15UFby.js +0 -6
- package/storybook-static/assets/contextMenu-P53ulGd4.js +0 -2
- package/storybook-static/assets/error-BF58nufO.js +0 -1
- package/storybook-static/assets/flex-OzI2qdBD.js +0 -1
- package/storybook-static/assets/floating-ui.react-BCZnZKor.js +0 -1
- package/storybook-static/assets/formatter-L2YTDE3Q-Bu16EJYG.js +0 -1
- package/storybook-static/assets/grid-BRIKMdnO.js +0 -1
- package/storybook-static/assets/input-CKW6wgYr.js +0 -1
- package/storybook-static/assets/jsx-runtime-BBQGix-2.js +0 -1
- package/storybook-static/assets/lucide-react-DiTL2FZl.js +0 -1
- package/storybook-static/assets/media-CP09Ak2C.js +0 -1
- package/storybook-static/assets/misc-CI386biM.js +0 -5
- package/storybook-static/assets/notifications-El-91bgG.js +0 -1
- package/storybook-static/assets/odata-jXHOPHLv.js +0 -1
- package/storybook-static/assets/odata-service-DMzLjWr8.js +0 -1
- package/storybook-static/assets/picker-DhufeWWq.js +0 -2
- package/storybook-static/assets/popover-DCygDZB4.js +0 -2
- package/storybook-static/assets/preset-select-C0o8oMRZ.js +0 -5
- package/storybook-static/assets/react-DXmRDR8e.js +0 -9
- package/storybook-static/assets/react-dom-DaUZFAdI.js +0 -1
- package/storybook-static/assets/select-Dcb4X2qB.js +0 -1
- package/storybook-static/assets/slider-D7YUv9lW.js +0 -2
- package/storybook-static/assets/sortable-_Ry8I9Yk.js +0 -1
- package/storybook-static/assets/text-DpidzPjQ.js +0 -4
- package/storybook-static/assets/theming-BWpdH-US.js +0 -39
- package/storybook-static/assets/ui-wilQ6cnk.js +0 -1
- package/storybook-static/assets/useODataSelectBase-8RpFkVBi.js +0 -1
- package/storybook-static/assets/useODataTreeData-Bc19nm97.js +0 -1
- package/storybook-static/assets/utils-DKOsD-4R.js +0 -1
- /package/storybook-static/sb-addons/{a11y-2 → a11y-3}/manager-bundle.js +0 -0
- /package/storybook-static/sb-addons/{docs-1 → docs-2}/manager-bundle.js +0 -0
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-B1Ua6ocI.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";function i({width:e=`100%`,height:t=`100%`,aspectRatio:n=`16 / 9`,className:r}){return(0,a.jsx)(`div`,{style:{width:e,height:t,aspectRatio:n},className:r,children:(0,a.jsx)(`svg`,{width:e,height:t,viewBox:`0 0 200 200`,xmlns:`http://www.w3.org/2000/svg`,role:`img`,fill:`none`,rx:`10`,ry:`10`,style:{display:`block`},"aria-label":`Изображение недоступно`,children:(0,a.jsxs)(`g`,{fill:`var(--surface-0)`,children:[(0,a.jsx)(`rect`,{x:`40`,y:`50`,width:`120`,height:`100`,rx:`10`}),(0,a.jsx)(`circle`,{cx:`60`,cy:`70`,r:`8`,fill:`var(--surface-2)`}),(0,a.jsx)(`path`,{d:`M50 130 L75 100 L100 130 Z`,fill:`var(--surface-2)`}),(0,a.jsx)(`path`,{d:`M90 130 L120 90 L150 130 Z`,fill:`var(--surface-2)`}),(0,a.jsx)(`line`,{x1:`160`,y1:`40`,x2:`40`,y2:`160`,stroke:`var(--surface-0)`,strokeWidth:`15`,strokeLinecap:`round`}),(0,a.jsx)(`line`,{x1:`160`,y1:`40`,x2:`40`,y2:`160`,stroke:`var(--surface-2)`,strokeWidth:`5`,strokeLinecap:`round`})]})})})}var a,o=t((()=>{a=r(),i.__docgenInfo={description:``,methods:[],displayName:`ImagePlaceholder`,props:{width:{required:!1,tsType:{name:`union`,raw:`number | string`,elements:[{name:`number`},{name:`string`}]},description:``,defaultValue:{value:`"100%"`,computed:!1}},height:{required:!1,tsType:{name:`union`,raw:`number | string`,elements:[{name:`number`},{name:`string`}]},description:``,defaultValue:{value:`"100%"`,computed:!1}},aspectRatio:{required:!1,tsType:{name:`union`,raw:`string | "unset"`,elements:[{name:`string`},{name:`literal`,value:`"unset"`}]},description:``,defaultValue:{value:`"16 / 9"`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``}}}}));function s({src:e,sources:t,alt:n,role:r,ariaLabel:a,caption:o,fallback:s,useFigure:u=!1,layout:d=`cover`,width:f=`100%`,height:p=`100%`,aspectRatio:m,intrinsicWidth:h,intrinsicHeight:g,onLoad:_,onError:v,style:y,wrapperStyle:b,...x}){let S=(0,c.useRef)(null),[C,w]=(0,c.useState)(0),[T,E]=(0,c.useState)(!1),[D,O]=(0,c.useState)(!1),[k,A]=(0,c.useState)(!1);(0,c.useEffect)(()=>{if(typeof IntersectionObserver>`u`){let e=window.setTimeout(()=>E(!0),0);return()=>window.clearTimeout(e)}let e=new IntersectionObserver(([t])=>{if(t.isIntersecting){let n=Math.round(t.boundingClientRect.width);w(n),E(!0),e.disconnect()}},{rootMargin:`100px`,threshold:.01});return S.current&&e.observe(S.current),()=>e.disconnect()},[]);let j=d===`intrinsic`,M=j?`auto`:p,N=h&&g?`${h} / ${g}`:void 0,P=j?N??m??`auto`:m??`16 / 9`,F=j&&P!==`auto`&&P!==`unset`?`100%`:M,I=C?`${C}px`:`100vw`,L=(0,l.jsx)(i,{width:f,height:F,aspectRatio:P}),R=j?{...y,display:`block`,width:`100%`,height:`auto`,objectFit:void 0}:{display:`block`,width:`100%`,height:`100%`,objectFit:d,...y},z=(0,l.jsxs)(l.Fragment,{children:[!D&&!k&&(s||L),T&&!k&&(0,l.jsxs)(`picture`,{children:[t?.map(e=>(0,l.jsx)(`source`,{srcSet:e.srcSet,type:e.type,sizes:e.sizes??I},`${e.type??`source`}-${e.srcSet}`)),(0,l.jsx)(`img`,{src:e,alt:n,role:r,"aria-label":a,onLoad:e=>{O(!0),_?.(e)},onError:e=>{A(!0),v?.(e)},style:D?R:{display:`none`},"aria-busy":!D,width:h,height:g,...x})]}),k&&L]}),B=(0,l.jsx)(`div`,{ref:S,style:{width:f,height:M,aspectRatio:P,...b},children:z});return u?(0,l.jsxs)(`figure`,{className:`relative`,children:[B,o&&(0,l.jsx)(`figcaption`,{style:{bottom:2,right:2,maxWidth:`calc(100% - 4px)`},className:`absolute paddingInlineMd textRight radiusSm fontSizeSm`,children:o})]}):B}var c,l,u=t((()=>{c=e(n(),1),o(),l=r(),s.__docgenInfo={description:`Базовый рендер изображения: lazy-появление, placeholder, обработка ошибки и figure/caption.
|
|
2
|
-
Компонент не знает, как устроено хранилище и какие форматы/размеры доступны.`,methods:[],displayName:`ImageRenderer`,props:{src:{required:!0,tsType:{name:`string`},description:``},sources:{required:!1,tsType:{name:`unknown`},description:``},layout:{required:!1,tsType:{name:`union`,raw:`"cover" | "contain" | "intrinsic"`,elements:[{name:`literal`,value:`"cover"`},{name:`literal`,value:`"contain"`},{name:`literal`,value:`"intrinsic"`}]},description:``,defaultValue:{value:`"cover"`,computed:!1}},alt:{required:!1,tsType:{name:`string`},description:``},role:{required:!1,tsType:{name:`string`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``},caption:{required:!1,tsType:{name:`string`},description:``},fallback:{required:!1,tsType:{name:`ReactNode`},description:``},useFigure:{required:!1,tsType:{name:`boolean`},description:``,defaultValue:{value:`false`,computed:!1}},aspectRatio:{required:!1,tsType:{name:`union`,raw:`string | "unset"`,elements:[{name:`string`},{name:`literal`,value:`"unset"`}]},description:``},width:{required:!1,tsType:{name:`CSSProperties["width"]`,raw:`CSSProperties["width"]`},description:``,defaultValue:{value:`"100%"`,computed:!1}},height:{required:!1,tsType:{name:`CSSProperties["height"]`,raw:`CSSProperties["height"]`},description:``,defaultValue:{value:`"100%"`,computed:!1}},intrinsicWidth:{required:!1,tsType:{name:`number`},description:``},intrinsicHeight:{required:!1,tsType:{name:`number`},description:``},wrapperStyle:{required:!1,tsType:{name:`CSSProperties`},description:``}},composes:[`Omit`]}}));export{u as n,s as t};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-B1Ua6ocI.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{a as i,i as a}from"./utils-DKOsD-4R.js";import{o,t as s}from"./lucide-react-DiTL2FZl.js";import{M as c,t as l}from"./formatters-Br290Dmy.js";import{n as u,t as d}from"./ui.module-wFHXkJzp.js";var f,p,m,h,g,_,v,y,b,x=t((()=>{f=`lRn5ye`,p=`ce5HAY`,m=`_8TObqB`,h=`Gx3Wbd`,g=`cpwaYo`,_=`itlmix`,v=`aITEGl`,y=`ekyJIt`,b={controlLayout:f,input:p,inputNumber:m,controlWithEndAdornment:h,controlEndAdornment:g,endAdornmentGroup:_,clearButton:v,error:y}}));function S({id:e,hasLabel:t,hasDescription:n,hasError:r}){let i=(0,C.useId)(),a=e??i,o=t?`${a}-label`:void 0,s=n?`${a}-description`:void 0,c=r?`${a}-error`:void 0;return{controlId:a,labelId:o,descriptionId:s,errorId:c,describedBy:[s,c].filter(Boolean).join(` `)||void 0}}var C,w=t((()=>{C=e(n(),1)}));function T({label:e,controlId:t,labelId:n}){return(0,F.jsx)(`label`,{id:n,htmlFor:t,className:u.uiLabel,children:e})}function E({label:e,description:t,size:n,disabled:r,className:a}){let{controlId:o,labelId:s,descriptionId:c}=S({hasLabel:e!=null,hasDescription:!!t});return(0,F.jsxs)(`div`,{className:i(u.uiElement,u.uiSizable,n&&u[n],u.disabled,a),"aria-disabled":r||void 0,children:[e&&(0,F.jsx)(T,{label:e,controlId:o,labelId:s}),t&&(0,F.jsx)(`p`,{id:c,className:u.uiDescription,children:t}),(0,F.jsx)(`div`,{className:i(u.uiInputControlFake,`skeletonLine`)})]})}function D({label:e,description:t,disabled:n,className:r,error:a,size:o,controlId:s,labelId:c,descriptionId:l,errorId:d,children:f}){return(0,F.jsxs)(`div`,{className:i(u.uiElement,u.uiSizable,o&&u[o],n&&u.disabled,r),"aria-disabled":n||void 0,children:[e&&(0,F.jsx)(T,{label:e,controlId:s,labelId:c}),t&&(0,F.jsx)(`p`,{id:l,className:u.uiDescription,children:t}),(0,F.jsxs)(`div`,{className:b.controlLayout,children:[f,a&&(0,F.jsx)(`p`,{id:d,className:b.error,role:`alert`,children:a})]})]})}function O({className:e,endAdornment:t,endAdornmentClassName:n,endAdornmentWidth:r,children:a}){let o=t!=null,s=o&&r?{"--input-end-adornment-width":r}:void 0;return(0,F.jsxs)(`div`,{className:i(b.controlLayout,e),style:s,children:[a({controlClassName:o?b.controlWithEndAdornment:void 0}),o&&(0,F.jsx)(`div`,{className:i(b.controlEndAdornment,n),children:t})]})}function k({onClick:e,disabled:t,className:n,ariaLabel:r=`Очистить значение`}){return(0,F.jsx)(`button`,{type:`button`,disabled:t||!e,className:i(b.clearButton,`flexCenter radiusSm`,n),onClick:e,"aria-label":r,children:(0,F.jsx)(o,{})})}function A(e,t,n){if(n)return n;if(e&&t)return`calc((var(--control-height) * 2) + var(--space-xs))`;if(e||t)return`var(--control-height)`}function j({endAdornment:e,onClear:t,disabled:n}){if(!(e==null&&!t))return(0,F.jsxs)(`div`,{className:b.endAdornmentGroup,children:[e,t&&(0,F.jsx)(k,{onClick:t,disabled:n})]})}function M({label:e,description:t,disabled:n,className:r,onClear:a,error:o,onClearError:s,onChange:c,value:l,size:d,allowedPattern:f,endAdornment:p,endAdornmentClassName:m,endAdornmentWidth:h,type:g=`text`,..._}){let[v,y]=(0,P.useState)(!1),x=e=>{let t=e.target.value;f!==void 0&&y(t!==``&&!f.test(t)),c(t),o&&s&&s()},C=!!(l&&l.length>0),w=C?o:void 0,{controlId:T,labelId:E,descriptionId:k,errorId:M,describedBy:N}=S({id:_.id,hasLabel:e!=null,hasDescription:!!t,hasError:!!w}),I=C&&(!!o||v);return(0,F.jsx)(D,{label:e,description:t,disabled:n,className:r,size:d,error:w,controlId:T,labelId:E,descriptionId:k,errorId:M,children:(0,F.jsx)(O,{endAdornment:j({endAdornment:p,onClear:a,disabled:n}),endAdornmentClassName:m,endAdornmentWidth:A(p!=null,!!a,h),children:({controlClassName:e})=>(0,F.jsx)(`input`,{..._,id:T,type:g,disabled:n,value:l,"aria-invalid":I||void 0,"aria-labelledby":E,"aria-describedby":N,"data-invalid":I?``:void 0,className:i(u.uiInputControl,b.input,e),onChange:x})})})}function N({label:e,description:t,disabled:n,className:r,onClear:a,error:o,onClearError:s,onChange:l,value:d,size:f,endAdornment:p,endAdornmentClassName:m,endAdornmentWidth:h,...g}){let _=g,{controlId:v,labelId:y,descriptionId:x,errorId:C,describedBy:w}=S({id:g.id,hasLabel:e!=null,hasDescription:!!t,hasError:!!o}),[T,E]=(0,P.useState)(()=>String(d)),k=(0,P.useEffectEvent)(e=>{E(e)});(0,P.useEffect)(()=>{k(d!==void 0&&typeof d==`number`&&!isNaN(d)?String(d):``)},[d]);let M=a?()=>{E(``),a()}:void 0,N=e=>{let t=e.target.value;E(t),l(c(t)),o&&s&&s()};return(0,F.jsx)(D,{label:e,description:t,disabled:n,className:r,size:f,error:o,controlId:v,labelId:y,descriptionId:x,errorId:C,children:(0,F.jsx)(O,{endAdornment:j({endAdornment:p,onClear:M,disabled:n}),endAdornmentClassName:m,endAdornmentWidth:A(p!=null,!!M,h),children:({controlClassName:e})=>(0,F.jsx)(`input`,{..._,id:v,type:`number`,inputMode:`decimal`,disabled:n,value:T,"aria-labelledby":y,"aria-describedby":w,className:i(u.uiInputControl,b.input,b.inputNumber,e),onChange:N})})})}var P,F,I,L=t((()=>{P=e(n(),1),l(),a(),s(),d(),x(),w(),F=r(),I=M,E.__docgenInfo={description:``,methods:[],displayName:`InputUILoading`},D.__docgenInfo={description:`Низкоуровневая оболочка поля ввода с общими элементами оформления.`,methods:[],displayName:`InputUI`,props:{className:{required:!1,tsType:{name:`string`},description:``},error:{required:!1,tsType:{name:`string`},description:``},controlId:{required:!1,tsType:{name:`string`},description:``},labelId:{required:!1,tsType:{name:`string`},description:``},descriptionId:{required:!1,tsType:{name:`string`},description:``},errorId:{required:!1,tsType:{name:`string`},description:``},children:{required:!0,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``}},composes:[`Omit`]},O.__docgenInfo={description:``,methods:[],displayName:`InputControl`,props:{className:{required:!1,tsType:{name:`string`},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},endAdornmentClassName:{required:!1,tsType:{name:`string`},description:``},endAdornmentWidth:{required:!1,tsType:{name:`string`},description:``},children:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(props: InputControlRenderProps) => ReactNode`,signature:{arguments:[{type:{name:`InputControlRenderProps`},name:`props`}],return:{name:`ReactNode`}}},description:``}}},k.__docgenInfo={description:``,methods:[],displayName:`InputClearButton`,props:{onClick:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},className:{required:!1,tsType:{name:`string`},description:``},ariaLabel:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"Очистить значение"`,computed:!1}}}},M.__docgenInfo={description:`Базовое текстовое поле ввода для строковых значений.`,methods:[],displayName:`InputText`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},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:``},value:{required:!0,tsType:{name:`T`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},onClear:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},error:{required:!1,tsType:{name:`string`},description:``},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},defaultValue:{required:!1,tsType:{name:`string`},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},endAdornmentClassName:{required:!1,tsType:{name:`string`},description:``},endAdornmentWidth:{required:!1,tsType:{name:`string`},description:``},type:{required:!1,tsType:{name:`union`,raw:`"email" | "password" | "search" | "tel" | "text" | "url"`,elements:[{name:`literal`,value:`"email"`},{name:`literal`,value:`"password"`},{name:`literal`,value:`"search"`},{name:`literal`,value:`"tel"`},{name:`literal`,value:`"text"`},{name:`literal`,value:`"url"`}]},description:``,defaultValue:{value:`"text"`,computed:!1}},allowedPattern:{required:!1,tsType:{name:`RegExp`},description:`Регулярное выражение для валидации всего введённого значения.
|
|
2
|
-
При несоответствии поле подсвечивается как невалидное, но текст не удаляется.
|
|
3
|
-
Пример: \`/^\\d*$/\``}},composes:[`Omit`]},N.__docgenInfo={description:`Числовое поле ввода с нормализацией значения и защитой от промежуточного невалидного ввода.`,methods:[],displayName:`InputNumber`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},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:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},onClear:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},error:{required:!1,tsType:{name:`string`},description:``},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``},defaultValue:{required:!1,tsType:{name:`T`},description:``},endAdornment:{required:!1,tsType:{name:`ReactNode`},description:``},endAdornmentClassName:{required:!1,tsType:{name:`string`},description:``},endAdornmentWidth:{required:!1,tsType:{name:`string`},description:``}},composes:[`Omit`]}}));export{M as a,L as c,N as i,w as l,k as n,D as o,O as r,E as s,I as t,S as u};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{NumberControlled as p,PatternValidation as m,TextControlled as h,WithError as g,n as _,t as v}from"./Input.stories-DM-fUL_7.js";function y(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(a,{of:v,parameters:{docs:{toc:!0}}}),`
|
|
2
|
-
`,(0,x.jsx)(c,{children:`Input`}),`
|
|
3
|
-
`,(0,x.jsx)(i,{children:`Базовое текстовое и числовое поле для форм, фильтров и служебных панелей`}),`
|
|
4
|
-
`,(0,x.jsx)(o.p,{children:`Input уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
|
|
5
|
-
Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
|
|
6
|
-
`,(0,x.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
|
|
7
|
-
`,(0,x.jsx)(u,{}),`
|
|
8
|
-
`,(0,x.jsx)(n,{of:h}),`
|
|
9
|
-
`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
|
|
10
|
-
|
|
11
|
-
import { Input } from "@/shared/ui";
|
|
12
|
-
|
|
13
|
-
export function Example() {
|
|
14
|
-
const [value, setValue] = useState("");
|
|
15
|
-
|
|
16
|
-
return <Input label="Название" value={value} onChange={setValue} placeholder="Введите значение" />;
|
|
17
|
-
}
|
|
18
|
-
`})}),`
|
|
19
|
-
`,(0,x.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
|
|
20
|
-
`,(0,x.jsxs)(o.ul,{children:[`
|
|
21
|
-
`,(0,x.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
|
|
22
|
-
`]}),`
|
|
23
|
-
`,(0,x.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
|
|
24
|
-
`,(0,x.jsx)(o.h3,{id:`контролируемое-текстовое-поле`,children:`Контролируемое текстовое поле`}),`
|
|
25
|
-
`,(0,x.jsx)(o.p,{children:`Контролируемое текстовое поле.`}),`
|
|
26
|
-
`,(0,x.jsx)(l,{of:h}),`
|
|
27
|
-
`,(0,x.jsx)(o.h3,{id:`контролируемое-числовое-поле`,children:`Контролируемое числовое поле`}),`
|
|
28
|
-
`,(0,x.jsx)(o.p,{children:`Контролируемое числовое поле.`}),`
|
|
29
|
-
`,(0,x.jsx)(l,{of:p}),`
|
|
30
|
-
`,(0,x.jsx)(o.h3,{id:`сценарий-с-валидацией-формата`,children:`Сценарий с валидацией формата`}),`
|
|
31
|
-
`,(0,x.jsx)(o.p,{children:`Сценарий с валидацией формата.`}),`
|
|
32
|
-
`,(0,x.jsx)(l,{of:m}),`
|
|
33
|
-
`,(0,x.jsx)(o.h3,{id:`состояние-с-ошибкой`,children:`Состояние с ошибкой`}),`
|
|
34
|
-
`,(0,x.jsx)(o.p,{children:`Состояние с ошибкой.`}),`
|
|
35
|
-
`,(0,x.jsx)(l,{of:g}),`
|
|
36
|
-
`,(0,x.jsx)(o.h2,{id:`api`,children:`API`}),`
|
|
37
|
-
`,(0,x.jsx)(s,{of:v}),`
|
|
38
|
-
`,(0,x.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
|
|
39
|
-
`,(0,x.jsx)(r,{includePrimary:!1})]})}function b(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,x.jsx)(n,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=d(),f(),o(),_()}))();export{b as default};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,c as o,i as s}from"./Input--cNyU-Ag.js";var c=e({NumberControlled:()=>p,PatternValidation:()=>m,TextControlled:()=>f,WithError:()=>h,__namedExportsOrder:()=>g,default:()=>d}),l,u,d,f,p,m,h,g,_=n((()=>{l=t(r(),1),o(),u=i(),d={title:`Shared/UI/Input`,component:a,args:{value:``,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Плейсхолдер нативного поля ввода.`,control:`text`},value:{description:`Текущее значение поля.`,control:`text`},onChange:{description:`Вызывается при изменении значения.`,control:!1},onClear:{description:`Callback кнопки очистки справа.`,control:!1},error:{description:`Текст ошибки под полем.`,control:`text`},onClearError:{description:`Вызывается при вводе для сброса внешней ошибки.`,control:!1},disabled:{description:`Блокирует редактирование.`,control:`boolean`},size:{description:`Размер поля и подписи.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},allowedPattern:{description:`Регулярное выражение для валидации введенной строки.`,control:!1}}},f={render:e=>{let[t,n]=(0,l.useState)(e.value??``);return(0,u.jsx)(a,{...e,value:t,onChange:n,onClear:()=>n(``)})},args:{label:`Наименование`,description:`Пример обычного текстового поля.`,placeholder:`Введите значение`,value:``,size:`md`}},p={render:()=>{let[e,t]=(0,l.useState)(25);return(0,u.jsx)(s,{label:`Количество`,description:`Числовой ввод с min/max.`,placeholder:`0`,value:e,min:0,max:100,onChange:t,onClear:()=>t(0)})},args:{value:void 0}},m={render:()=>{let[e,t]=(0,l.useState)(``);return(0,u.jsx)(a,{label:`Только цифры`,description:"`allowedPattern` подсвечивает невалидный ввод.",placeholder:`12345`,value:e,onChange:t,allowedPattern:/^\d*$/})},args:{value:void 0}},h={render:()=>{let[e,t]=(0,l.useState)(`admin`),[n,r]=(0,l.useState)(`Логин уже занят`);return(0,u.jsx)(a,{label:`Логин`,value:e,error:n,onChange:t,onClear:()=>t(``),onClearError:()=>r(``)})},args:{value:void 0}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
render: args => {
|
|
3
|
-
const [value, setValue] = useState(args.value ?? "");
|
|
4
|
-
return <InputText {...args} value={value} onChange={setValue} onClear={() => setValue("")} />;
|
|
5
|
-
},
|
|
6
|
-
args: {
|
|
7
|
-
label: "Наименование",
|
|
8
|
-
description: "Пример обычного текстового поля.",
|
|
9
|
-
placeholder: "Введите значение",
|
|
10
|
-
value: "",
|
|
11
|
-
size: "md"
|
|
12
|
-
}
|
|
13
|
-
}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
14
|
-
render: () => {
|
|
15
|
-
const [value, setValue] = useState<number | undefined>(25);
|
|
16
|
-
return <InputNumber label="Количество" description="Числовой ввод с min/max." placeholder="0" value={value} min={0} max={100} onChange={setValue} onClear={() => setValue(0)} />;
|
|
17
|
-
},
|
|
18
|
-
args: {
|
|
19
|
-
value: undefined
|
|
20
|
-
}
|
|
21
|
-
}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
22
|
-
render: () => {
|
|
23
|
-
const [value, setValue] = useState("");
|
|
24
|
-
return <InputText label="Только цифры" description="\`allowedPattern\` подсвечивает невалидный ввод." placeholder="12345" value={value} onChange={setValue} allowedPattern={/^\\d*$/} />;
|
|
25
|
-
},
|
|
26
|
-
args: {
|
|
27
|
-
value: undefined
|
|
28
|
-
}
|
|
29
|
-
}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
|
|
30
|
-
render: () => {
|
|
31
|
-
const [value, setValue] = useState("admin");
|
|
32
|
-
const [error, setError] = useState("Логин уже занят");
|
|
33
|
-
return <InputText label="Логин" value={value} error={error} onChange={setValue} onClear={() => setValue("")} onClearError={() => setError("")} />;
|
|
34
|
-
},
|
|
35
|
-
args: {
|
|
36
|
-
value: undefined
|
|
37
|
-
}
|
|
38
|
-
}`,...h.parameters?.docs?.source}}},g=[`TextControlled`,`NumberControlled`,`PatternValidation`,`WithError`]}));_();export{p as NumberControlled,m as PatternValidation,f as TextControlled,h as WithError,g as __namedExportsOrder,d as default,_ as n,c as t};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{CustomMask as p,DateAndTime as m,DateOnly as h,TimeOnly as g,n as _,t as v}from"./InputDateTime.stories-BVdDIO_9.js";function y(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(a,{of:v,parameters:{docs:{toc:!0}}}),`
|
|
2
|
-
`,(0,x.jsx)(c,{children:`InputDateTime`}),`
|
|
3
|
-
`,(0,x.jsx)(i,{children:`Маскированный ввод даты, времени и объединенного значения дата-время`}),`
|
|
4
|
-
`,(0,x.jsx)(o.p,{children:`InputDateTime уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
|
|
5
|
-
Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
|
|
6
|
-
`,(0,x.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
|
|
7
|
-
`,(0,x.jsx)(u,{}),`
|
|
8
|
-
`,(0,x.jsx)(n,{of:h}),`
|
|
9
|
-
`,(0,x.jsx)(o.pre,{children:(0,x.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
|
|
10
|
-
|
|
11
|
-
import { InputDateTime } from "@/shared/ui";
|
|
12
|
-
|
|
13
|
-
export function Example() {
|
|
14
|
-
const [value, setValue] = useState("");
|
|
15
|
-
|
|
16
|
-
return <InputDateTime label="Дата и время" value={value} onChange={setValue} />;
|
|
17
|
-
}
|
|
18
|
-
`})}),`
|
|
19
|
-
`,(0,x.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
|
|
20
|
-
`,(0,x.jsxs)(o.ul,{children:[`
|
|
21
|
-
`,(0,x.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
|
|
22
|
-
`]}),`
|
|
23
|
-
`,(0,x.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
|
|
24
|
-
`,(0,x.jsx)(o.h3,{id:`ввод-только-даты`,children:`Ввод только даты`}),`
|
|
25
|
-
`,(0,x.jsx)(o.p,{children:`Ввод только даты.`}),`
|
|
26
|
-
`,(0,x.jsx)(l,{of:h}),`
|
|
27
|
-
`,(0,x.jsx)(o.h3,{id:`ввод-только-времени`,children:`Ввод только времени`}),`
|
|
28
|
-
`,(0,x.jsx)(o.p,{children:`Ввод только времени.`}),`
|
|
29
|
-
`,(0,x.jsx)(l,{of:g}),`
|
|
30
|
-
`,(0,x.jsx)(o.h3,{id:`совмещенный-ввод-даты-и-времени`,children:`Совмещенный ввод даты и времени`}),`
|
|
31
|
-
`,(0,x.jsx)(o.p,{children:`Совмещенный ввод даты и времени.`}),`
|
|
32
|
-
`,(0,x.jsx)(l,{of:m}),`
|
|
33
|
-
`,(0,x.jsx)(o.h3,{id:`использование-собственной-маски-ввода`,children:`Использование собственной маски ввода`}),`
|
|
34
|
-
`,(0,x.jsx)(o.p,{children:`Использование собственной маски ввода.`}),`
|
|
35
|
-
`,(0,x.jsx)(l,{of:p}),`
|
|
36
|
-
`,(0,x.jsx)(o.h2,{id:`api`,children:`API`}),`
|
|
37
|
-
`,(0,x.jsx)(s,{of:v}),`
|
|
38
|
-
`,(0,x.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
|
|
39
|
-
`,(0,x.jsx)(r,{includePrimary:!1})]})}function b(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,x.jsx)(n,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=d(),f(),o(),_()}))();export{b as default};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o}from"./utils-DKOsD-4R.js";import{n as s,t as c}from"./ui.module-wFHXkJzp.js";import{n as l,o as u,r as d,u as f}from"./Input--cNyU-Ag.js";import{t as p}from"./input-CKW6wgYr.js";import{a as m,i as h,n as g,r as _}from"./date-segments-CzU9k5bl.js";var v,y,b,x=n((()=>{v=`t1iysX`,y=`_-4oX-p`,b={segmentInput:v,separator:y}}));function S(e){return h(e).map(e=>e.kind===`editable`?{...e,type:e.id}:e)}function C(e,t){let n=g(e,t),r=new Map;return t.forEach((e,t)=>{e.kind===`editable`&&r.set(e.type,n.get(t)??``)}),r}function w(e,t){let n=new Map;return e.forEach((e,r)=>{e.kind===`editable`&&n.set(r,t.get(e.type)??``)}),m(e,n)}var T=n((()=>{_()}));function E(e,t){let n=C(e,t),r=new Map;return t.forEach((e,t)=>{e.kind===`editable`&&r.set(t,n.get(e.type)??``)}),r}function D(e){let t=[];return e.forEach((e,n)=>{e.kind===`editable`&&t.push(n)}),t}function O({mask:e,value:t,onChange:n,onClearError:r,disabled:i}){let a=(0,k.useMemo)(()=>S(e),[e]),o=(0,k.useMemo)(()=>D(a),[a]),s=(0,k.useMemo)(()=>E(t,a),[t,a]),[c,l]=(0,k.useState)(null),[u,d]=(0,k.useState)(()=>t?.getTime()),f=t?.getTime();f!==u&&(d(f),l(null));let p=c??s,m=(0,k.useRef)(new Map),h=(0,k.useRef)(0),[g,_]=(0,k.useState)(!1),v=(0,k.useCallback)(e=>{let t=new Map;a.forEach((n,r)=>{n.kind===`editable`&&t.set(n.type,e.get(r)??``)});let r=w(a,t);r!==null&&n(r)},[a,n]),y=(0,k.useCallback)((e,t=!0)=>{let n=m.current.get(e);n&&(n.focus(),t&&requestAnimationFrame(()=>n.select()))},[]),b=(0,k.useCallback)(e=>{let t=o.indexOf(e);return t<o.length-1?o[t+1]:null},[o]),x=(0,k.useCallback)(e=>{let t=o.indexOf(e);return t>0?o[t-1]:null},[o]),C=(0,k.useCallback)((e,t)=>e.padStart(t.length,`0`),[]);return{segments:a,segmentValues:p,isFocused:g,registerRef:(0,k.useCallback)(e=>t=>{t?m.current.set(e,t):m.current.delete(e)},[]),handleInput:(0,k.useCallback)(e=>t=>{if(i)return;let n=a[e],o=t.target.value.replace(/\D/g,``).slice(0,n.length),s=new Map(p);if(s.set(e,o),l(s),r?.(),o.length===n.length){let t=b(e);t!==null&&requestAnimationFrame(()=>y(t))}v(s)},[i,a,p,r,b,y,v]),handleKeyDown:(0,k.useCallback)(e=>t=>{if(i)return;let n=a[e],r=p.get(e)??``,o=t.currentTarget;switch(t.key){case`ArrowRight`:if(o.selectionStart===r.length||r===``){t.preventDefault();let n=b(e);n!==null&&y(n)}break;case`ArrowLeft`:if(o.selectionStart===0||r===``){t.preventDefault();let n=x(e);n!==null&&y(n)}break;case`ArrowUp`:{t.preventDefault();let i=r===``?n.min:parseInt(r,10)+1;i>n.max&&(i=n.min);let a=C(i.toString(),n),s=new Map(p);s.set(e,a),l(s),v(s),requestAnimationFrame(()=>o.select());break}case`ArrowDown`:{t.preventDefault();let i=r===``?n.max:parseInt(r,10)-1;i<n.min&&(i=n.max);let a=C(i.toString(),n),s=new Map(p);s.set(e,a),l(s),v(s),requestAnimationFrame(()=>o.select());break}case`Backspace`:if(r===``){t.preventDefault();let n=x(e);n!==null&&y(n)}break;case`Delete`:{t.preventDefault();let n=new Map(p);n.set(e,``),l(n),v(n);break}}},[i,a,p,b,x,y,C,v]),handleFocus:(0,k.useCallback)(()=>e=>{e.target.select()},[]),handleContainerFocus:(0,k.useCallback)(()=>{clearTimeout(h.current),_(!0)},[]),handleContainerBlur:(0,k.useCallback)(()=>{h.current=window.setTimeout(()=>{_(!1),l(null)},0)},[]),focusFirstEmpty:(0,k.useCallback)(()=>{let e=o.find(e=>!(p.get(e)??``))??o[o.length-1];e!==void 0&&y(e)},[o,p,y])}}var k,A=n((()=>{k=t(r(),1),T()}));function j({mask:e,value:t,onChange:n,label:r,description:i,disabled:o,size:c,className:p,error:m,onClearError:h,onClear:g,"aria-label":_}){let{segments:v,segmentValues:y,registerRef:x,handleInput:S,handleKeyDown:C,handleFocus:w,handleContainerFocus:T,handleContainerBlur:E,focusFirstEmpty:D}=O({mask:e,value:t,onChange:n,onClearError:h,disabled:o}),{controlId:k,labelId:A,descriptionId:j,errorId:M,describedBy:N}=f({hasLabel:r!=null,hasDescription:!!i,hasError:!!m});return(0,F.jsx)(u,{label:r,description:i,disabled:o,className:p,size:c,error:m,labelId:A,descriptionId:j,errorId:M,children:(0,F.jsx)(d,{endAdornment:g?(0,F.jsx)(l,{onClick:g,disabled:o}):void 0,endAdornmentWidth:g?`var(--control-height)`:void 0,children:({controlClassName:e})=>(0,F.jsx)(`div`,{id:k,className:a(s.uiInputControlFake,e),"data-invalid":m?``:void 0,"data-disabled":o||void 0,role:`group`,"aria-invalid":!!m||void 0,"aria-label":_||(typeof r==`string`?r:void 0),"aria-labelledby":_?void 0:A,"aria-describedby":N,onFocus:T,onBlur:E,onClick:e=>{e.target===e.currentTarget&&D()},children:v.map((e,t)=>e.kind===`literal`?(0,F.jsx)(`span`,{className:b.separator,"data-disabled":o||void 0,children:e.text},t):(0,F.jsx)(`input`,{ref:x(t),type:`text`,inputMode:`numeric`,className:b.segmentInput,style:{width:`${e.length+.5}ch`},value:y.get(t)??``,placeholder:e.placeholder,maxLength:e.length,disabled:o,"aria-label":e.type,autoComplete:`off`,onChange:S(t),onKeyDown:C(t),onFocus:w()},t))})})})}function M({mask:e=`YYYY.MM.DD`,...t}){return(0,F.jsx)(j,{mask:e,...t})}function N({mask:e=`hh:mm`,...t}){return(0,F.jsx)(j,{mask:e,...t})}function P({mask:e=`YYYY.MM.DD hh:mm`,...t}){return(0,F.jsx)(j,{mask:e,...t})}var F,I=n((()=>{o(),p(),c(),x(),A(),F=i(),M.__docgenInfo={description:``,methods:[],displayName:`InputDate`,props:{mask:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"YYYY.MM.DD"`,computed:!1}}}},N.__docgenInfo={description:``,methods:[],displayName:`InputTime`,props:{mask:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"hh:mm"`,computed:!1}}}},P.__docgenInfo={description:``,methods:[],displayName:`InputDateTime`,props:{mask:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`"YYYY.MM.DD hh:mm"`,computed:!1}}}}})),L=e({CustomMask:()=>W,DateAndTime:()=>U,DateOnly:()=>V,TimeOnly:()=>H,__namedExportsOrder:()=>G,default:()=>B}),R,z,B,V,H,U,W,G,K=n((()=>{R=t(r(),1),I(),z=i(),B={title:`Shared/UI/InputDateTime`,component:M,args:{value:void 0,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},value:{description:"Текущее значение в виде `Date`.",control:!1},onChange:{description:`Вызывается при формировании валидной даты/времени.`,control:!1},mask:{description:"Маска сегментов (`YYYY`, `MM`, `DD`, `hh`, `mm`, `ss`).",control:`text`},error:{description:`Текст ошибки под полем.`,control:`text`},onClearError:{description:`Сброс внешней ошибки при вводе.`,control:!1},onClear:{description:`Очищает значение и активирует кнопку очистки.`,control:!1},disabled:{description:`Блокирует редактирование сегментов.`,control:`boolean`},size:{description:`Размер поля и подписи.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},"aria-label":{description:`ARIA-метка для контейнера сегментного ввода.`,control:`text`}}},V={render:e=>{let[t,n]=(0,R.useState)(e.value);return(0,z.jsx)(M,{...e,value:t,onChange:n,onClear:()=>n(void 0)})},args:{label:`Дата`,description:`Формат по умолчанию: YYYY.MM.DD`,value:new Date(2026,2,5)}},H={render:()=>{let[e,t]=(0,R.useState)(new Date(2026,2,5,14,30,0));return(0,z.jsx)(N,{label:`Время`,description:`Формат по умолчанию: hh:mm`,value:e,onChange:t,onClear:()=>t(void 0)})},args:{value:void 0}},U={render:()=>{let[e,t]=(0,R.useState)(new Date(2026,2,5,9,15,0));return(0,z.jsx)(P,{label:`Дата и время`,description:`Комбинированный ввод даты и времени.`,value:e,onChange:t,onClear:()=>t(void 0)})},args:{value:void 0}},W={render:()=>{let[e,t]=(0,R.useState)(new Date(2026,2,5,9,15,42));return(0,z.jsx)(P,{label:`Кастомная маска`,description:`Добавлены секунды: YYYY.MM.DD hh:mm:ss`,mask:`YYYY.MM.DD hh:mm:ss`,value:e,onChange:t})},args:{value:void 0}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
render: args => {
|
|
3
|
-
const [value, setValue] = useState<Date | undefined>(args.value);
|
|
4
|
-
return <InputDate {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />;
|
|
5
|
-
},
|
|
6
|
-
args: {
|
|
7
|
-
label: "Дата",
|
|
8
|
-
description: "Формат по умолчанию: YYYY.MM.DD",
|
|
9
|
-
value: new Date(2026, 2, 5)
|
|
10
|
-
}
|
|
11
|
-
}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
|
|
12
|
-
render: () => {
|
|
13
|
-
const [value, setValue] = useState<Date | undefined>(new Date(2026, 2, 5, 14, 30, 0));
|
|
14
|
-
return <InputTime label="Время" description="Формат по умолчанию: hh:mm" value={value} onChange={setValue} onClear={() => setValue(undefined)} />;
|
|
15
|
-
},
|
|
16
|
-
args: {
|
|
17
|
-
value: undefined
|
|
18
|
-
}
|
|
19
|
-
}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
|
|
20
|
-
render: () => {
|
|
21
|
-
const [value, setValue] = useState<Date | undefined>(new Date(2026, 2, 5, 9, 15, 0));
|
|
22
|
-
return <InputDateTime label="Дата и время" description="Комбинированный ввод даты и времени." value={value} onChange={setValue} onClear={() => setValue(undefined)} />;
|
|
23
|
-
},
|
|
24
|
-
args: {
|
|
25
|
-
value: undefined
|
|
26
|
-
}
|
|
27
|
-
}`,...U.parameters?.docs?.source}}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
|
|
28
|
-
render: () => {
|
|
29
|
-
const [value, setValue] = useState<Date | undefined>(new Date(2026, 2, 5, 9, 15, 42));
|
|
30
|
-
return <InputDateTime label="Кастомная маска" description="Добавлены секунды: YYYY.MM.DD hh:mm:ss" mask="YYYY.MM.DD hh:mm:ss" value={value} onChange={setValue} />;
|
|
31
|
-
},
|
|
32
|
-
args: {
|
|
33
|
-
value: undefined
|
|
34
|
-
}
|
|
35
|
-
}`,...W.parameters?.docs?.source}}},G=[`DateOnly`,`TimeOnly`,`DateAndTime`,`CustomMask`]}));K();export{W as CustomMask,U as DateAndTime,V as DateOnly,H as TimeOnly,G as __namedExportsOrder,B as default,K as n,L as t};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o,n as s}from"./utils-DKOsD-4R.js";import{n as c,t as l}from"./ui.module-wFHXkJzp.js";import{n as u,o as d,r as f,u as p}from"./Input--cNyU-Ag.js";import{t as m}from"./input-CKW6wgYr.js";import{a as h,i as g,o as _,r as v,s as y}from"./file-hArYcyES.js";var b,x,S,C,w=n((()=>{b=`Ggxyuj`,x=`fthcmO`,S=`wyY60X`,C={control:b,fileName:x,hiddenInput:S}}));function T(e){let{value:t,onClear:n,onReadError:r,accept:i,allowedMime:o,maxBytes:l,label:m,description:g,placeholder:b=`Выберите файл`,disabled:x,size:S,error:w,onClearError:T,className:O}=e;h(o),_(i);let k=(0,E.useRef)(null),{controlId:A,labelId:j,descriptionId:M,errorId:N,describedBy:P}=p({hasLabel:m!=null,hasDescription:!!g,hasError:!!w}),F=(0,E.useCallback)(async t=>{let n=t.target.files?.[0];if(n){t.target.value=``,w&&T&&T();try{if(e.readMode===`array-buffer`){let t=await y(n,{allowedMime:o,maxBytes:l,mode:`array-buffer`});e.onChange(t);return}let t=await y(n,{allowedMime:o,maxBytes:l});e.onChange(t)}catch(e){e instanceof v&&r&&r(e)}}},[e,o,l,r,w,T]),I=(0,E.useCallback)(()=>{k.current?.click()},[]);return(0,D.jsxs)(d,{label:m,description:g,disabled:x,className:O,size:S,error:w,controlId:A,labelId:j,descriptionId:M,errorId:N,children:[(0,D.jsx)(`input`,{ref:k,id:A,type:`file`,accept:(i??o)?.join(`,`),disabled:x,className:C.hiddenInput,onChange:F,tabIndex:-1}),(0,D.jsx)(f,{endAdornment:n?(0,D.jsx)(u,{onClick:n,disabled:x}):void 0,endAdornmentWidth:n?`var(--control-height)`:void 0,children:({controlClassName:e})=>(0,D.jsx)(`div`,{role:`button`,tabIndex:x?-1:0,onClick:I,onKeyDown:e=>s(e,I,{disabled:x}),className:a(c.uiInputControl,C.control,e,!!w&&c.invalid),"data-disabled":x||void 0,"aria-invalid":!!w||void 0,"aria-disabled":x,"aria-labelledby":j,"aria-describedby":P,children:t?(0,D.jsx)(`span`,{className:C.fileName,children:t.meta.name}):(0,D.jsx)(`span`,{className:c.uiPlaceholder,children:b})})})]})}var E,D,O=n((()=>{E=t(r(),1),g(),o(),m(),l(),w(),D=i(),T.__docgenInfo={description:'InputFile — компонент выбора одного файла.\n\nВизуально идентичен InputText: поле с label, description, placeholder,\nкнопкой очистки (крестик) и блоком ошибки.\n\nПри клике открывается нативный диалог выбора файла.\nПосле выбора файл читается через readFile, результат передаётся в onChange.\n\nInputFile позволяет выбрать один файл и передаёт наружу типизированный результат чтения.\nЕсли `readMode` не задан или равен `"data-url"`, в `onChange` приходит объект с `dataUrl`.\nЕсли `readMode` равен `"array-buffer"`, в `onChange` приходит объект с `buffer`.',methods:[],displayName:`InputFile`}})),k=e({ArrayBufferMode:()=>I,Controlled:()=>P,WithInitialValue:()=>F,__namedExportsOrder:()=>L,default:()=>N}),A,j,M,N,P,F,I,L,R=n((()=>{A=t(r(),1),O(),j=i(),M=(e,t=`application/pdf`)=>{let n=new File([`demo-file`],e,{type:t,lastModified:17040672e5});return{mode:`data-url`,meta:{name:n.name,mime:n.type,size:n.size,lastModified:n.lastModified},dataUrl:`data:${t};base64,ZGVtby1maWxl`,file:n}},N={title:`Shared/UI/InputFile`,component:T,args:{value:void 0,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля загрузки.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст в поле, пока файл не выбран.`,control:`text`},value:{description:`Текущий результат чтения выбранного файла.`,control:!1},onChange:{description:`Вызывается после успешного чтения файла.`,control:!1},onReadError:{description:`Вызывается при ошибке чтения или валидации файла.`,control:!1},onClear:{description:`Очищает выбранный файл и показывает кнопку очистки.`,control:!1},accept:{description:"HTML `accept` для нативного диалога выбора файла.",control:`text`},allowedMime:{description:`Белый список MIME-типов для readFile-валидации.`,control:!1},maxBytes:{description:`Максимальный размер файла в байтах.`,control:`number`},readMode:{description:`Режим чтения файла: data-url или array-buffer.`,control:`inline-radio`,options:[`data-url`,`array-buffer`]},error:{description:`Текст ошибки под полем.`,control:`text`},onClearError:{description:`Callback сброса ошибки при повторном выборе файла.`,control:!1},disabled:{description:`Блокирует выбор файла.`,control:`boolean`},size:{description:`Размер визуального контрола.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]}}},P={render:e=>{let[t,n]=(0,A.useState)(e.value),[r,i]=(0,A.useState)(e.error??``);return(0,j.jsx)(T,{...e,value:t,error:r||void 0,onChange:n,onClear:()=>n(void 0),onClearError:()=>i(``)})},args:{label:`Документ`,description:`Загрузите один файл.`,placeholder:`Выберите файл`,accept:[`.pdf`,`.docx`],readMode:`data-url`,value:void 0}},F={render:e=>{let[t,n]=(0,A.useState)(M(`report.pdf`));return(0,j.jsx)(T,{...e,value:t,onChange:n,onClear:()=>n(void 0)})},args:{label:`Файл с предзаполнением`,description:`Демонстрация состояния после успешной загрузки.`}},I={render:e=>{let[t,n]=(0,A.useState)(void 0);return(0,j.jsx)(T,{...e,value:t,onChange:n,onClear:()=>n(void 0)})},args:{label:`Двоичное чтение`,description:"Режим `array-buffer` для дальнейшей бинарной обработки.",readMode:`array-buffer`,accept:[`.zip`,`.pdf`],value:void 0}},P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
render: args => {
|
|
3
|
-
const [value, setValue] = useState<ReadFileResult | undefined>(args.value);
|
|
4
|
-
const [error, setError] = useState(args.error ?? "");
|
|
5
|
-
return <InputFile {...args} value={value} error={error || undefined} onChange={setValue} onClear={() => setValue(undefined)} onClearError={() => setError("")} />;
|
|
6
|
-
},
|
|
7
|
-
args: {
|
|
8
|
-
label: "Документ",
|
|
9
|
-
description: "Загрузите один файл.",
|
|
10
|
-
placeholder: "Выберите файл",
|
|
11
|
-
accept: [".pdf", ".docx"],
|
|
12
|
-
readMode: "data-url",
|
|
13
|
-
value: undefined
|
|
14
|
-
}
|
|
15
|
-
}`,...P.parameters?.docs?.source}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
|
|
16
|
-
render: args => {
|
|
17
|
-
const [value, setValue] = useState<ReadFileResult | undefined>(createMockReadFileResult("report.pdf"));
|
|
18
|
-
return <InputFile {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />;
|
|
19
|
-
},
|
|
20
|
-
args: {
|
|
21
|
-
label: "Файл с предзаполнением",
|
|
22
|
-
description: "Демонстрация состояния после успешной загрузки."
|
|
23
|
-
}
|
|
24
|
-
}`,...F.parameters?.docs?.source}}},I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
|
|
25
|
-
render: args => {
|
|
26
|
-
const [value, setValue] = useState<ReadFileResult | undefined>(undefined);
|
|
27
|
-
return <InputFile {...args} value={value} onChange={setValue} onClear={() => setValue(undefined)} />;
|
|
28
|
-
},
|
|
29
|
-
args: {
|
|
30
|
-
label: "Двоичное чтение",
|
|
31
|
-
description: "Режим \`array-buffer\` для дальнейшей бинарной обработки.",
|
|
32
|
-
readMode: "array-buffer",
|
|
33
|
-
accept: [".zip", ".pdf"],
|
|
34
|
-
value: undefined
|
|
35
|
-
}
|
|
36
|
-
}`,...I.parameters?.docs?.source}}},L=[`Controlled`,`WithInitialValue`,`ArrayBufferMode`]}));R();export{I as ArrayBufferMode,P as Controlled,F as WithInitialValue,L as __namedExportsOrder,N as default,R as n,k as t};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{c as e,i as t}from"./preload-helper-B45gAKPr.js";import{C as n}from"./iframe-B1Ua6ocI.js";import{t as r}from"./jsx-runtime-BBQGix-2.js";import{a as i,i as a,n as o}from"./utils-DKOsD-4R.js";import{o as s,t as c}from"./lucide-react-DiTL2FZl.js";import{n as l,t as u}from"./ui.module-wFHXkJzp.js";import{o as d,r as f,u as p}from"./Input--cNyU-Ag.js";import{t as m}from"./input-CKW6wgYr.js";import{a as h,i as g,o as _,r as v,s as y}from"./file-hArYcyES.js";var b,x,S,C,w,T,E,D=t((()=>{b=`h9SMea`,x=`rUyh0y`,S=`Q0CY1r`,C=`AJuYXd`,w=`CKKkOD`,T=`UgxhS1`,E={control:b,hiddenInput:x,fileList:S,fileItem:C,fileItemName:w,removeButton:T}}));function O({files:e,onChange:t}){let n=(0,k.useCallback)(n=>{t(e.filter((e,t)=>t!==n))},[e,t]);return!e||!e.length?null:(0,A.jsx)(`ul`,{className:E.fileList,children:e.map((e,t)=>(0,A.jsxs)(`li`,{className:E.fileItem,children:[(0,A.jsx)(`span`,{className:E.fileItemName,children:e.meta.name}),(0,A.jsx)(`button`,{type:`button`,className:i(E.removeButton,`flexCenter`),onClick:()=>n(t),"aria-label":`Удалить ${e.meta.name}`,children:(0,A.jsx)(s,{})})]},`${e.meta.name}-${e.meta.lastModified}`))})}var k,A,j=t((()=>{k=e(n(),1),a(),c(),D(),A=r(),O.__docgenInfo={description:``,methods:[],displayName:`InputFilesList`,props:{files:{required:!0,tsType:{name:`Array`,elements:[{name:`TFile`}],raw:`TFile[]`},description:``},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(files: TFile[]) => void`,signature:{arguments:[{type:{name:`Array`,elements:[{name:`TFile`}],raw:`TFile[]`},name:`files`}],return:{name:`void`}}},description:``}}}}));function M(e){let{value:t,onReadError:n,accept:r,allowedMime:a,maxBytes:s,maxFiles:c,label:u,description:m,placeholder:g=`Выберите файлы`,disabled:b,size:x,error:S,onClearError:C,className:w}=e;h(a),_(r);let T=(0,N.useRef)(null),{controlId:D,labelId:k,descriptionId:A,errorId:j,describedBy:M}=p({hasLabel:u!=null,hasDescription:!!m,hasError:!!S}),F=typeof c==`number`&&t.length>=c,I=(0,N.useCallback)(async r=>{let i=r.target.files;if(!i||i.length===0)return;let o=Array.from(i);r.target.value=``,S&&C&&C();let l=typeof c==`number`?c-t.length:o.length,u=o.slice(0,l);if(e.readMode===`array-buffer`){let t=[];for(let e of u)try{let n=await y(e,{allowedMime:a,maxBytes:s,mode:`array-buffer`});t.push(n)}catch(e){e instanceof v&&n&&n(e)}t.length>0&&e.onChange([...e.value,...t]);return}let d=[];for(let e of u)try{let t=await y(e,{allowedMime:a,maxBytes:s});d.push(t)}catch(e){e instanceof v&&n&&n(e)}d.length>0&&e.onChange([...e.value,...d])},[e,c,t.length,a,s,n,S,C]),L=(0,N.useCallback)(()=>{T.current?.click()},[]),R=(e.readMode,(0,P.jsx)(O,{files:e.value,onChange:e.onChange}));return(0,P.jsxs)(d,{label:u,description:m,disabled:b,className:w,size:x,error:S,controlId:D,labelId:k,descriptionId:A,errorId:j,children:[(0,P.jsx)(`input`,{ref:T,id:D,type:`file`,accept:(r??a)?.join(`,`),multiple:!0,disabled:b||F,className:E.hiddenInput,onChange:I,tabIndex:-1}),(0,P.jsx)(f,{children:()=>(0,P.jsx)(`div`,{role:`button`,tabIndex:b||F?-1:0,onClick:L,onKeyDown:e=>o(e,L,{disabled:b||F}),className:i(l.uiInputControl,E.control,!!S&&`invalid`),"data-disabled":b||void 0,"aria-invalid":!!S||void 0,"aria-disabled":b||F,"aria-labelledby":k,"aria-describedby":M,children:(0,P.jsx)(`span`,{className:l.uiPlaceholder,children:F?`Максимум ${c} файлов`:g})})}),R]})}var N,P,F=t((()=>{N=e(n(),1),g(),a(),m(),u(),D(),j(),P=r(),M.__docgenInfo={description:'InputFiles — компонент выбора нескольких файлов.\n\nПоле стилизовано как InputText. При клике открывается нативный\nдиалог с multiple. Каждый выбранный файл читается через readFile\nи добавляется в массив value.\n\nСписок выбранных файлов отображается под полем.\nКаждый файл можно удалить кнопкой «крестик».\n\nInputFiles типизирует массив по `readMode`.\nЕсли `readMode` не задан или равен `"data-url"`, в `value` и `onChange`\nиспользуется массив объектов с `dataUrl`. Если `readMode` равен\n`"array-buffer"`, используется массив объектов с `buffer`.',methods:[],displayName:`InputFiles`}}));export{j as i,F as n,O as r,M as t};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{n as a,t as o}from"./InputFiles-B3vHz3jd.js";var s=e({Controlled:()=>f,LimitReached:()=>m,WithInitialFiles:()=>p,__namedExportsOrder:()=>h,default:()=>d}),c,l,u,d,f,p,m,h,g=n((()=>{c=t(r(),1),a(),l=i(),u=(e,t=`application/pdf`)=>{let n=new File([`demo-file`],e,{type:t,lastModified:17040672e5});return{mode:`data-url`,meta:{name:n.name,mime:n.type,size:n.size,lastModified:n.lastModified},dataUrl:`data:${t};base64,ZGVtby1maWxl`,file:n}},d={title:`Shared/UI/InputFiles`,component:o,args:{value:[],onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{label:{description:`Заголовок поля множественной загрузки.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},placeholder:{description:`Текст в поле, пока список файлов пуст.`,control:`text`},value:{description:`Массив результатов чтения выбранных файлов.`,control:!1},onChange:{description:`Вызывается с новым массивом файлов после добавления/удаления.`,control:!1},onReadError:{description:`Вызывается при ошибке чтения отдельного файла.`,control:!1},accept:{description:"HTML `accept` для диалога выбора файлов.",control:`text`},allowedMime:{description:`Список допустимых MIME-типов при валидации.`,control:!1},maxBytes:{description:`Максимальный размер одного файла в байтах.`,control:`number`},readMode:{description:`Режим чтения: data-url или array-buffer.`,control:`inline-radio`,options:[`data-url`,`array-buffer`]},maxFiles:{description:`Лимит количества файлов в списке.`,control:`number`},error:{description:`Текст ошибки под полем.`,control:`text`},onClearError:{description:`Вызывается при выборе новых файлов для сброса ошибки.`,control:!1},disabled:{description:`Полностью блокирует выбор файлов.`,control:`boolean`},size:{description:`Размер визуального контрола.`,control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]}}},f={render:e=>{let[t,n]=(0,c.useState)([]);return(0,l.jsx)(o,{...e,readMode:`data-url`,value:t,onChange:n})},args:{label:`Вложения`,description:`Можно выбрать несколько файлов.`,placeholder:`Выберите файлы`,accept:[`.pdf`,`.png`,`.jpg`],maxFiles:5,value:[]}},p={render:e=>{let[t,n]=(0,c.useState)([u(`contract.pdf`),u(`diagram.png`,`image/png`)]);return(0,l.jsx)(o,{...e,readMode:`data-url`,value:t,onChange:n})},args:{label:`Предзаполненный список`,description:`Иллюстрация удаления файлов из уже заполненного значения.`}},m={render:e=>{let[t,n]=(0,c.useState)([u(`first.pdf`),u(`second.pdf`)]);return(0,l.jsx)(o,{...e,readMode:`data-url`,value:t,onChange:n})},args:{label:`Лимит файлов`,description:`После достижения лимита поле выбора блокируется.`,maxFiles:2}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
render: args => {
|
|
3
|
-
const [value, setValue] = useState<ReadFileAsDataUrlResult[]>([]);
|
|
4
|
-
return <InputFiles {...args} readMode="data-url" value={value} onChange={setValue} />;
|
|
5
|
-
},
|
|
6
|
-
args: {
|
|
7
|
-
label: "Вложения",
|
|
8
|
-
description: "Можно выбрать несколько файлов.",
|
|
9
|
-
placeholder: "Выберите файлы",
|
|
10
|
-
accept: [".pdf", ".png", ".jpg"],
|
|
11
|
-
maxFiles: 5,
|
|
12
|
-
value: []
|
|
13
|
-
}
|
|
14
|
-
}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
15
|
-
render: args => {
|
|
16
|
-
const [value, setValue] = useState<ReadFileAsDataUrlResult[]>([createMockReadFileResult("contract.pdf"), createMockReadFileResult("diagram.png", "image/png")]);
|
|
17
|
-
return <InputFiles {...args} readMode="data-url" value={value} onChange={setValue} />;
|
|
18
|
-
},
|
|
19
|
-
args: {
|
|
20
|
-
label: "Предзаполненный список",
|
|
21
|
-
description: "Иллюстрация удаления файлов из уже заполненного значения."
|
|
22
|
-
}
|
|
23
|
-
}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
24
|
-
render: args => {
|
|
25
|
-
const [value, setValue] = useState<ReadFileAsDataUrlResult[]>([createMockReadFileResult("first.pdf"), createMockReadFileResult("second.pdf")]);
|
|
26
|
-
return <InputFiles {...args} readMode="data-url" value={value} onChange={setValue} />;
|
|
27
|
-
},
|
|
28
|
-
args: {
|
|
29
|
-
label: "Лимит файлов",
|
|
30
|
-
description: "После достижения лимита поле выбора блокируется.",
|
|
31
|
-
maxFiles: 2
|
|
32
|
-
}
|
|
33
|
-
}`,...m.parameters?.docs?.source}}},h=[`Controlled`,`WithInitialFiles`,`LimitReached`]}));g();export{f as Controlled,m as LimitReached,p as WithInitialFiles,h as __namedExportsOrder,d as default,g as n,s as t};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{Controlled as p,CustomPresets as m,Disabled as h,DisabledPresets as g,InToolbar as _,Placeholder as v,n as y,t as b}from"./LayoutPicker.stories-CHQeF27J.js";function x(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(a,{of:b,parameters:{docs:{toc:!0}}}),`
|
|
2
|
-
`,(0,C.jsx)(c,{children:`LayoutPicker`}),`
|
|
3
|
-
`,(0,C.jsx)(i,{children:`Контролируемый выбор layout-пресета со схематичным превью`}),`
|
|
4
|
-
`,(0,C.jsxs)(o.p,{children:[(0,C.jsx)(o.code,{children:`LayoutPicker`}),` нужен для выбора схемы размещения независимых областей: графиков, панелей, секций дашборда или другого UI, где сама раскладка хранится во внешней модели.
|
|
5
|
-
Компонент не знает, что будет внутри ячеек: он показывает только превью, принимает текущий `,(0,C.jsx)(o.code,{children:`value`}),` как ID пресета и возвращает выбранный ID через `,(0,C.jsx)(o.code,{children:`onChange`}),`.
|
|
6
|
-
По умолчанию trigger отображает только иконку текущей раскладки. Чтобы добавить рядом поясняющий текст, передайте `,(0,C.jsx)(o.code,{children:`showPlaceholder`}),`: компонент покажет именно строку из `,(0,C.jsx)(o.code,{children:`placeholder`}),`, не заменяя её названием выбранного пресета.`]}),`
|
|
7
|
-
`,(0,C.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
|
|
8
|
-
`,(0,C.jsx)(u,{}),`
|
|
9
|
-
`,(0,C.jsx)(n,{of:p}),`
|
|
10
|
-
`,(0,C.jsx)(o.pre,{children:(0,C.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
|
|
11
|
-
|
|
12
|
-
import { LayoutPicker } from "@/shared/ui";
|
|
13
|
-
|
|
14
|
-
export function Example() {
|
|
15
|
-
const [layoutId, setLayoutId] = useState("two-columns");
|
|
16
|
-
|
|
17
|
-
return <LayoutPicker label="Layout панели" value={layoutId} onChange={setLayoutId} />;
|
|
18
|
-
}
|
|
19
|
-
`})}),`
|
|
20
|
-
`,(0,C.jsx)(o.h2,{id:`контракт-пресета`,children:`Контракт пресета`}),`
|
|
21
|
-
`,(0,C.jsxs)(o.p,{children:[`Пресет описывает размер сетки и расположение ячеек внутри CSS Grid. `,(0,C.jsx)(o.code,{children:`LayoutPicker`}),` использует эти данные только для превью и не применяет раскладку к пользовательскому контенту. Публичный `,(0,C.jsx)(o.code,{children:`onChange`}),` остаётся совместимым с `,(0,C.jsx)(o.code,{children:`UiBaseProps<string>`}),` и отдаёт только `,(0,C.jsx)(o.code,{children:`preset.id`}),`.`]}),`
|
|
22
|
-
`,(0,C.jsx)(o.pre,{children:(0,C.jsx)(o.code,{className:`language-tsx`,children:`import { type LayoutPickerPreset } from "@/shared/ui";
|
|
23
|
-
|
|
24
|
-
const dashboardPreset: LayoutPickerPreset = {
|
|
25
|
-
id: "dashboard-main-aside",
|
|
26
|
-
label: "Основной блок + сайдбар",
|
|
27
|
-
description: "Большая рабочая область слева и вертикальная колонка справа.",
|
|
28
|
-
columns: 3,
|
|
29
|
-
rows: 2,
|
|
30
|
-
cells: [
|
|
31
|
-
{ id: "main", column: 1, columnSpan: 2, row: 1, rowSpan: 2 },
|
|
32
|
-
{ id: "aside-top", column: 3, columnSpan: 1, row: 1, rowSpan: 1 },
|
|
33
|
-
{ id: "aside-bottom", column: 3, columnSpan: 1, row: 2, rowSpan: 1 }
|
|
34
|
-
]
|
|
35
|
-
};
|
|
36
|
-
`})}),`
|
|
37
|
-
`,(0,C.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
|
|
38
|
-
`,(0,C.jsxs)(o.ul,{children:[`
|
|
39
|
-
`,(0,C.jsxs)(o.li,{children:[`Храните во внешней модели только `,(0,C.jsx)(o.code,{children:`preset.id`}),`, а полный пресет берите из стабильного списка `,(0,C.jsx)(o.code,{children:`presets`}),`.`]}),`
|
|
40
|
-
`,(0,C.jsxs)(o.li,{children:[`Передавайте `,(0,C.jsx)(o.code,{children:`ariaLabel`}),`, когда рядом нет видимой подписи поля.`]}),`
|
|
41
|
-
`,(0,C.jsxs)(o.li,{children:[`Используйте `,(0,C.jsx)(o.code,{children:`getPresetDisabled`}),`, если отдельные схемы временно недоступны из-за лимитов, прав или текущего режима.`]}),`
|
|
42
|
-
`,(0,C.jsxs)(o.li,{children:[`Не помещайте бизнес-данные ячеек в `,(0,C.jsx)(o.code,{children:`shared/ui`}),`: назначение содержимого должно оставаться в вызывающем слое.`]}),`
|
|
43
|
-
`]}),`
|
|
44
|
-
`,(0,C.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
|
|
45
|
-
`,(0,C.jsxs)(o.h3,{id:`контролируемый-выбор-синхронизирует-value-с-storybook-args`,children:[`Контролируемый выбор синхронизирует `,(0,C.jsx)(o.code,{children:`value`}),` с Storybook args`]}),`
|
|
46
|
-
`,(0,C.jsxs)(o.p,{children:[`Главный story обновляет `,(0,C.jsx)(o.code,{children:`value`}),` через `,(0,C.jsx)(o.code,{children:`useArgs`}),`, поэтому Controls отражают выбранный layout.`]}),`
|
|
47
|
-
`,(0,C.jsx)(l,{of:p}),`
|
|
48
|
-
`,(0,C.jsx)(o.h3,{id:`состояние-без-выбранного-значения`,children:`Состояние без выбранного значения`}),`
|
|
49
|
-
`,(0,C.jsxs)(o.p,{children:[`Story явно включает `,(0,C.jsx)(o.code,{children:`showPlaceholder`}),`, поэтому trigger показывает переданный текст `,(0,C.jsx)(o.code,{children:`placeholder`}),` рядом с иконкой. Без этого пропса trigger остаётся icon-only независимо от наличия выбранного пресета.`]}),`
|
|
50
|
-
`,(0,C.jsx)(l,{of:v}),`
|
|
51
|
-
`,(0,C.jsx)(o.h3,{id:`кастомный-набор-пресетов`,children:`Кастомный набор пресетов`}),`
|
|
52
|
-
`,(0,C.jsxs)(o.p,{children:[`Компонент принимает произвольный список `,(0,C.jsx)(o.code,{children:`LayoutPickerPreset`}),`, пока каждая ячейка описана координатами grid.`]}),`
|
|
53
|
-
`,(0,C.jsx)(l,{of:m}),`
|
|
54
|
-
`,(0,C.jsx)(o.h3,{id:`заблокированные-пресеты`,children:`Заблокированные пресеты`}),`
|
|
55
|
-
`,(0,C.jsxs)(o.p,{children:[(0,C.jsx)(o.code,{children:`getPresetDisabled`}),` блокирует отдельные варианты, не отключая весь контрол.`]}),`
|
|
56
|
-
`,(0,C.jsx)(l,{of:g}),`
|
|
57
|
-
`,(0,C.jsx)(o.h3,{id:`пример-в-панели-настройки`,children:`Пример в панели настройки`}),`
|
|
58
|
-
`,(0,C.jsx)(o.p,{children:`Сценарий показывает типичную связку: выбор layout, сводку текущего пресета и превью областей, которые уже рендерит вызывающий слой.`}),`
|
|
59
|
-
`,(0,C.jsx)(l,{of:_}),`
|
|
60
|
-
`,(0,C.jsx)(o.h3,{id:`заблокированный-контрол`,children:`Заблокированный контрол`}),`
|
|
61
|
-
`,(0,C.jsxs)(o.p,{children:[`Полное `,(0,C.jsx)(o.code,{children:`disabled`}),`-состояние блокирует trigger и открытие popup.`]}),`
|
|
62
|
-
`,(0,C.jsx)(l,{of:h}),`
|
|
63
|
-
`,(0,C.jsx)(o.h2,{id:`api`,children:`API`}),`
|
|
64
|
-
`,(0,C.jsx)(s,{of:b}),`
|
|
65
|
-
`,(0,C.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
|
|
66
|
-
`,(0,C.jsx)(r,{includePrimary:!1})]})}function S(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,C.jsx)(n,{...e,children:(0,C.jsx)(x,{...e})}):x(e)}var C;e((()=>{C=d(),f(),o(),y()}))();export{S as default};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import{i as e}from"./preload-helper-B45gAKPr.js";import{E as t,a as n,d as r,f as i,l as a,m as o,n as s,p as c,r as l,u}from"./blocks-DBWaa853.js";import{t as d}from"./jsx-runtime-BBQGix-2.js";import{t as f}from"./mdx-react-shim-DHWnLJR9.js";import{CustomRender as p,MultiSelect as m,SingleSelect as h,n as g,t as _}from"./Listbox.stories-Cs6ABkXs.js";function v(e){let o={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...t(),...e.components};return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(a,{of:_,parameters:{docs:{toc:!0}}}),`
|
|
2
|
-
`,(0,b.jsx)(c,{children:`Listbox`}),`
|
|
3
|
-
`,(0,b.jsx)(i,{children:`Список выбора для single- и multi-select сценариев с кастомным рендером элементов`}),`
|
|
4
|
-
`,(0,b.jsx)(o.p,{children:`Listbox уже имеет живые stories, а эта страница собирает их в структурированную документацию с краткими рекомендациями, примерами подключения и API.
|
|
5
|
-
Ниже можно быстро проверить базовый сценарий, а затем перейти к отдельным режимам использования и состояниям компонента.`}),`
|
|
6
|
-
`,(0,b.jsx)(o.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
|
|
7
|
-
`,(0,b.jsx)(u,{}),`
|
|
8
|
-
`,(0,b.jsx)(n,{of:h}),`
|
|
9
|
-
`,(0,b.jsx)(o.pre,{children:(0,b.jsx)(o.code,{className:`language-tsx`,children:`import { useState } from "react";
|
|
10
|
-
|
|
11
|
-
import { Listbox } from "@/shared/ui";
|
|
12
|
-
|
|
13
|
-
const items = ["Черновик", "В работе", "Завершен"];
|
|
14
|
-
|
|
15
|
-
export function Example() {
|
|
16
|
-
const [value, setValue] = useState(undefined);
|
|
17
|
-
|
|
18
|
-
return <Listbox items={items} value={value} onChange={setValue} />;
|
|
19
|
-
}
|
|
20
|
-
`})}),`
|
|
21
|
-
`,(0,b.jsx)(o.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
|
|
22
|
-
`,(0,b.jsxs)(o.ul,{children:[`
|
|
23
|
-
`,(0,b.jsx)(o.li,{children:`Начните с базового сценария ниже, а затем проверьте в stories те состояния, которые реально используются в вашем экране.`}),`
|
|
24
|
-
`]}),`
|
|
25
|
-
`,(0,b.jsx)(o.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
|
|
26
|
-
`,(0,b.jsx)(o.h3,{id:`выбор-одного-значения`,children:`Выбор одного значения`}),`
|
|
27
|
-
`,(0,b.jsx)(o.p,{children:`Выбор одного значения.`}),`
|
|
28
|
-
`,(0,b.jsx)(l,{of:h}),`
|
|
29
|
-
`,(0,b.jsx)(o.h3,{id:`выбор-нескольких-значений`,children:`Выбор нескольких значений`}),`
|
|
30
|
-
`,(0,b.jsx)(o.p,{children:`Выбор нескольких значений.`}),`
|
|
31
|
-
`,(0,b.jsx)(l,{of:m}),`
|
|
32
|
-
`,(0,b.jsx)(o.h3,{id:`кастомный-рендер-элементов-списка`,children:`Кастомный рендер элементов списка`}),`
|
|
33
|
-
`,(0,b.jsx)(o.p,{children:`Кастомный рендер элементов списка.`}),`
|
|
34
|
-
`,(0,b.jsx)(l,{of:p}),`
|
|
35
|
-
`,(0,b.jsx)(o.h2,{id:`api`,children:`API`}),`
|
|
36
|
-
`,(0,b.jsx)(s,{of:_}),`
|
|
37
|
-
`,(0,b.jsx)(o.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
|
|
38
|
-
`,(0,b.jsx)(r,{includePrimary:!1})]})}function y(e={}){let{wrapper:n}={...t(),...e.components};return n?(0,b.jsx)(n,{...e,children:(0,b.jsx)(v,{...e})}):v(e)}var b;e((()=>{b=d(),f(),o(),g()}))();export{y as default};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import{a as e,c as t,i as n}from"./preload-helper-B45gAKPr.js";import{C as r}from"./iframe-B1Ua6ocI.js";import{t as i}from"./jsx-runtime-BBQGix-2.js";import{a,i as o,n as s,r as c,s as l,t as u}from"./utils-DKOsD-4R.js";import{t as d,wt as f}from"./lucide-react-DiTL2FZl.js";import{n as p,t as m}from"./ui.module-wFHXkJzp.js";function h(e,t,n){if(n){if(Array.isArray(t)&&t.length>0){let n=e.findIndex(e=>t.includes(e.value)&&!e.disabled);if(n>=0)return n}return c(e,y)}if(t!==void 0){let n=e.findIndex(e=>e.value===t&&!e.disabled);if(n>=0)return n}return c(e,y)}function g(e){let{value:t,defaultValue:n,multiple:r,focusOnMount:i,renderItem:o,getKey:d,options:m,onChange:g,id:b,...x}=e,S=t!==void 0,C=(0,_.useId)(),w=b??`${C}-listbox`,[T,E]=(0,_.useState)(n),D=(0,_.useRef)(null),[O,k]=(0,_.useState)(()=>h(m,t??n,r)),A=(0,_.useMemo)(()=>(S?t:T)??(r?[]:null),[T,S,r,t]),j=O,M=t=>{if(t.disabled)return;let n;if(e.multiple){let r=Array.isArray(A)?A:[];n=r.includes(t.value)?r.filter(e=>e!==t.value):[...r,t.value],e.onChange?.(n,t)}else n=t.value,e.onChange?.(n,t);S||E(n)};return(0,_.useEffect)(()=>{let e=D.current?.querySelectorAll(`[role="option"]`)[j];e&&e.scrollIntoView({block:`nearest`})},[j]),(0,_.useLayoutEffect)(()=>{i&&D.current?.focus()},[i]),(0,v.jsx)(`ul`,{ref:D,id:w,role:`listbox`,"aria-multiselectable":r||void 0,"aria-activedescendant":j>=0?`${w}-option-${j}`:void 0,tabIndex:0,onKeyDown:e=>{if(e.key===`ArrowDown`)e.preventDefault(),k(e=>u(m,e,1,y));else if(e.key===`ArrowUp`)e.preventDefault(),k(e=>u(m,e,-1,y));else if(e.key===`Home`)e.preventDefault(),k(c(m,y));else if(e.key===`End`)e.preventDefault(),k(l(m,y));else if(s(e,()=>{let e=m[j];e&&M(e)}))return},...x,className:a(p.uiPanel,`scrollable`),children:m.map((e,t)=>{let n=r?Array.isArray(A)&&A.includes(e.value):A===e.value,i=t===j;return(0,v.jsxs)(`li`,{id:`${w}-option-${t}`,role:`option`,"aria-selected":n,"aria-disabled":e.disabled||void 0,onMouseDown:n=>{n.preventDefault(),!e.disabled&&(k(t),M(e))},tabIndex:-1,className:a(p.uiPopupOption,e.disabled&&p.disabled,i&&p.uiPopupOptionActive,n&&p.selected),children:[n?(0,v.jsx)(f,{className:p.uiPopupOptionIcon}):(0,v.jsx)(`span`,{className:p.uiPopupOptionIcon}),(0,v.jsx)(`div`,{children:o?o(e,n,i):e.label??String(e.value)})]},d?d(e,t):t)})})}var _,v,y,b=n((()=>{_=t(r(),1),o(),d(),m(),v=i(),y=e=>e.disabled===!0,g.__docgenInfo={description:``,methods:[],displayName:`Listbox`}})),x=e({CustomRender:()=>O,MultiSelect:()=>D,SingleSelect:()=>E,__namedExportsOrder:()=>k,default:()=>T});function S(e){return e.multiple?(0,w.jsx)(g,{...e,multiple:!0}):(0,w.jsx)(g,{...e})}var C,w,T,E,D,O,k,A=n((()=>{C=t(r(),1),b(),w=i(),T={title:`Shared/UI/Listbox`,component:S,args:{options:[{id:`low`,label:`Низкий`},{id:`medium`,label:`Средний`},{id:`high`,label:`Высокий`},{id:`critical`,label:`Критический`,disabled:!0}],multiple:!1,value:`medium`,onChange:()=>{}},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{options:{description:`Массив доступных опций списка.`,control:!1},multiple:{description:`Режим множественного выбора.`,control:`boolean`},value:{description:`Текущее выбранное значение (или массив значений).`,control:!1},defaultValue:{description:`Начальное значение для uncontrolled-режима.`,control:!1},onChange:{description:`Вызывается при выборе опции.`,control:!1},focusOnMount:{description:`Автофокус списка при монтировании.`,control:`boolean`},renderItem:{description:`Кастомный рендер строки списка.`,control:!1},getKey:{description:`Функция генерации ключа для опции.`,control:!1},className:{description:`Дополнительный CSS-класс.`,control:`text`}}},E={render:e=>{let[t,n]=(0,C.useState)(`medium`);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:280},children:[(0,w.jsx)(S,{...e,multiple:!1,value:t,onChange:e=>{typeof e==`string`&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t]})]})}},D={render:e=>{let[t,n]=(0,C.useState)([`low`,`high`]);return(0,w.jsxs)(`div`,{style:{display:`grid`,gap:12,maxWidth:320},children:[(0,w.jsx)(S,{...e,multiple:!0,value:t,onChange:e=>{Array.isArray(e)&&n(e)}}),(0,w.jsxs)(`div`,{children:[`Выбрано: `,t.join(`, `)||`пусто`]})]})},args:{multiple:!0}},O={render:e=>{let[t,n]=(0,C.useState)(`low`);return(0,w.jsx)(S,{...e,value:t,onChange:e=>{typeof e==`string`&&n(e)},renderItem:(e,t,n)=>(0,w.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`,width:`100%`,opacity:e.disabled?.5:1},children:[(0,w.jsx)(`span`,{children:e.label}),(0,w.jsx)(`span`,{children:t?`Выбрано`:n?`Фокус`:``})]})})}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
render: args => {
|
|
3
|
-
const [value, setValue] = useState<string>("medium");
|
|
4
|
-
return <div style={{
|
|
5
|
-
display: "grid",
|
|
6
|
-
gap: 12,
|
|
7
|
-
maxWidth: 280
|
|
8
|
-
}}>
|
|
9
|
-
<StringListbox {...args} multiple={false} value={value} onChange={next => {
|
|
10
|
-
if (typeof next === "string") setValue(next);
|
|
11
|
-
}} />
|
|
12
|
-
<div>Выбрано: {value}</div>
|
|
13
|
-
</div>;
|
|
14
|
-
}
|
|
15
|
-
}`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
|
|
16
|
-
render: args => {
|
|
17
|
-
const [value, setValue] = useState<string[]>(["low", "high"]);
|
|
18
|
-
return <div style={{
|
|
19
|
-
display: "grid",
|
|
20
|
-
gap: 12,
|
|
21
|
-
maxWidth: 320
|
|
22
|
-
}}>
|
|
23
|
-
<StringListbox {...args} multiple value={value} onChange={next => {
|
|
24
|
-
if (Array.isArray(next)) setValue(next);
|
|
25
|
-
}} />
|
|
26
|
-
<div>Выбрано: {value.join(", ") || "пусто"}</div>
|
|
27
|
-
</div>;
|
|
28
|
-
},
|
|
29
|
-
args: {
|
|
30
|
-
multiple: true
|
|
31
|
-
}
|
|
32
|
-
}`,...D.parameters?.docs?.source}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
|
|
33
|
-
render: args => {
|
|
34
|
-
const [value, setValue] = useState<string>("low");
|
|
35
|
-
return <StringListbox {...args} value={value} onChange={next => {
|
|
36
|
-
if (typeof next === "string") setValue(next);
|
|
37
|
-
}} renderItem={(option, selected, active) => <div style={{
|
|
38
|
-
display: "flex",
|
|
39
|
-
justifyContent: "space-between",
|
|
40
|
-
width: "100%",
|
|
41
|
-
opacity: option.disabled ? 0.5 : 1
|
|
42
|
-
}}>
|
|
43
|
-
<span>{option.label}</span>
|
|
44
|
-
<span>{selected ? "Выбрано" : active ? "Фокус" : ""}</span>
|
|
45
|
-
</div>} />;
|
|
46
|
-
}
|
|
47
|
-
}`,...O.parameters?.docs?.source}}},k=[`SingleSelect`,`MultiSelect`,`CustomRender`]}));A();export{O as CustomRender,D as MultiSelect,E as SingleSelect,k as __namedExportsOrder,T as default,A as n,x as t};
|