@oliasoft-open-source/react-ui-library 4.7.0-beta-1 → 4.7.0-beta-2
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 +12 -11
- package/dist/assets/{index-AkeNwthw.css → index-dOfLgtRX.css} +226 -183
- package/dist/assets/{index-neKlYvgy.js → index-ffnttoim.js} +285 -147
- package/dist/global.css +226 -183
- package/dist/index.d.ts +131 -22
- package/dist/index.html +1 -1
- package/dist/index.js +751 -391
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/Color-6VNJS4EI-9rJemzwR.js +1 -0
- package/dist/storybook/assets/DocsRenderer-NNNQARDV-DP7bJ7AB.js +1 -0
- package/dist/storybook/assets/WithTooltip-V3YHNWJZ-eL_Uxnix.js +1 -0
- package/dist/storybook/assets/{accordion-6_27SROY.js → accordion-MRdNs3mQ.js} +1 -1
- package/dist/storybook/assets/{accordion.stories-Uipdifbl.js → accordion.stories-Ytyr6tn2.js} +2 -2
- package/dist/storybook/assets/actions-Z1pyUd57.js +1 -0
- package/dist/storybook/assets/actions-_FIB7bOt.css +1 -0
- package/dist/storybook/assets/actions.stories-JWaU0QAA.js +1 -0
- package/dist/storybook/assets/afe.stories-Ad1-l25x.js +88 -0
- package/dist/storybook/assets/badge.stories-2BykvoFl.js +1 -0
- package/dist/storybook/assets/blowout.stories--vPM-KpE.js +40 -0
- package/dist/storybook/assets/button-UQO14biP.js +1 -0
- package/dist/storybook/assets/{button-group-q8QKkLVU.js → button-group-g7HxxHTn.js} +1 -1
- package/dist/storybook/assets/{button-group.stories-tLZpLTfD.js → button-group.stories-hJ9V_va5.js} +2 -2
- package/dist/storybook/assets/button.stories-ihIU7iUf.js +80 -0
- package/dist/storybook/assets/{buttons-and-links-gkg6hOs-.js → buttons-and-links-fv_xHVqw.js} +2 -2
- package/dist/storybook/assets/card.stories-5YbTAbLy.js +1 -0
- package/dist/storybook/assets/casing-loads.stories-WfK3k-mh.js +209 -0
- package/dist/storybook/assets/cell.stories-Xy61z8ka.js +245 -0
- package/dist/storybook/assets/{check-box-LZdXXKhv.js → check-box-Q2GsbR79.js} +1 -1
- package/dist/storybook/assets/{check-box.stories-0XCykxnz.js → check-box.stories-iQby_Dan.js} +2 -2
- package/dist/storybook/assets/{chunk-HLWAVYOI-YF156CNQ.js → chunk-HLWAVYOI-RXldIcZr.js} +1 -1
- package/dist/storybook/assets/color-5ySMclFt.js +25 -0
- package/dist/storybook/assets/{column.stories-6OLsjlcP.js → column.stories-NnQNzY18.js} +7 -7
- package/dist/storybook/assets/dialog-hHTtMGls.js +1 -0
- package/dist/storybook/assets/{drawer-WuErQ5Z8.js → drawer-ChY55ghN.js} +1 -1
- package/dist/storybook/assets/{drawer.stories-RFRPs_pQ.js → drawer.stories-xv50_UKt.js} +4 -4
- package/dist/storybook/assets/empty.stories-dFjUCZln.js +1 -0
- package/dist/storybook/assets/entry-preview-TGgN7-T4.js +1 -0
- package/dist/storybook/assets/{config-b-_d5fwn.js → entry-preview-docs-KfUfHYQ7.js} +37 -37
- package/dist/storybook/assets/{field-eknsj_Ll.js → field-jD6TclDQ.js} +1 -1
- package/dist/storybook/assets/{field.stories-RmhJ16HT.js → field.stories-CeHr9rXs.js} +5 -5
- package/dist/storybook/assets/file-button.stories-XxMjOBfe.js +10 -0
- package/dist/storybook/assets/file-input-A0eGNEgX.js +1 -0
- package/dist/storybook/assets/file-input.stories-dM7UFPVo.js +66 -0
- package/dist/storybook/assets/{flex.stories-lLz0Xrt_.js → flex.stories-6qFQFEL7.js} +2 -2
- package/dist/storybook/assets/footer.stories-4cSc0hBz.js +3 -0
- package/dist/storybook/assets/form.stories--Sgi1gUF.js +49 -0
- package/dist/storybook/assets/formation.stories-VUtbgcsq.js +74 -0
- package/dist/storybook/assets/{formatter-SWP5E3XI-uJi-Y6Jy.js → formatter-SWP5E3XI-qYj9Quey.js} +2 -2
- package/dist/storybook/assets/{heading-Bk0bpNfe.js → heading-FcNTpGhR.js} +1 -1
- package/dist/storybook/assets/{heading.stories-HLMPkIPo.js → heading.stories-0MJHBHcQ.js} +2 -2
- package/dist/storybook/assets/{help-icon--rUDxLUD.js → help-icon-D6ZGAbgL.js} +1 -1
- package/dist/storybook/assets/help-icon.stories-YZw5pFQt.js +4 -0
- package/dist/storybook/assets/{icon-y1a2N5SZ.js → icon-_m67DAr0.js} +3 -3
- package/dist/storybook/assets/icon.stories-2aZia1VV.js +6 -0
- package/dist/storybook/assets/iframe-oMAlwWd9.js +7 -0
- package/dist/storybook/assets/index-PPLHz8o0.js +6 -0
- package/dist/storybook/assets/index-R5dkQuFe.js +3 -0
- package/dist/storybook/assets/{index-_waogfzH.js → index-RhTUHV_k.js} +20 -20
- package/dist/storybook/assets/index-VSx05S_2.js +14 -0
- package/dist/storybook/assets/index.es-HG2GUH9i.js +79 -0
- package/dist/storybook/assets/{input-u1He-wWs.js → input-fYKvBwPs.js} +1 -1
- package/dist/storybook/assets/{input-group.stories-WljyIQ0a.js → input-group.stories-ZBffPltv.js} +5 -5
- package/dist/storybook/assets/{input-validation-XFS-LWhH.js → input-validation-bb_81fGi.js} +2 -2
- package/dist/storybook/assets/{input.stories-rLdDRxtU.js → input.stories-Y5X-JFWU.js} +1 -1
- package/dist/storybook/assets/{inputs-vo_nTpyh.js → inputs-MxyGbJ9Y.js} +14 -14
- package/dist/storybook/assets/{isPlainObject-4RuU_w9g.js → isPlainObject-OQlD0fAV.js} +1 -1
- package/dist/storybook/assets/{label-0_Qf6I8t.js → label-dla_bzHj.js} +1 -1
- package/dist/storybook/assets/label.stories-t-e2pWHW.js +11 -0
- package/dist/storybook/assets/layout-forms-_uf7qzAu.js +16 -0
- package/dist/storybook/assets/{layout-general-QgIJDQ4H.js → layout-general-rHEcWCrx.js} +2 -2
- package/dist/storybook/assets/list-Nr0UfaUw.js +8 -0
- package/dist/storybook/assets/list.stories-K1nFEsjX.js +478 -0
- package/dist/storybook/assets/{list.stories-data-IcFu6vvd.js → list.stories-data-WlepbhE1.js} +1 -1
- package/dist/storybook/assets/{loader.stories-0OwmnNML.js → loader.stories-eEBGjVSN.js} +5 -5
- package/dist/storybook/assets/menu.stories-nx6w59Nv.js +82 -0
- package/dist/storybook/assets/{message-uMHaTEXV.js → message-bbAE2zjv.js} +1 -1
- package/dist/storybook/assets/{message.stories-CDgUaLZP.js → message.stories-RJI8haIH.js} +2 -2
- package/dist/storybook/assets/meta-content-073TGkSN.js +1 -0
- package/dist/storybook/assets/meta-content-dR7AAq04.css +1 -0
- package/dist/storybook/assets/modal.stories-rjCFe4Mn.js +200 -0
- package/dist/storybook/assets/number-input-xqup0wHW.js +1 -0
- package/dist/storybook/assets/number-input.stories-Kzl7Diug.js +153 -0
- package/dist/storybook/assets/objectWithoutPropertiesLoose-9Q1jwsKS.js +1 -0
- package/dist/storybook/assets/option-dropdown.stories-M9-IYc-K.js +21 -0
- package/dist/storybook/assets/{padding-and-spacing-J_Zb8SJm.js → padding-and-spacing-dUA1CCP8.js} +2 -2
- package/dist/storybook/assets/page.stories-x7QRBnZm.js +57 -0
- package/dist/storybook/assets/{pagination-5n5spTRo.js → pagination-er5fRdi2.js} +1 -1
- package/dist/storybook/assets/{pagination.stories-g4a-aSxq.js → pagination.stories-9_uskT8r.js} +2 -2
- package/dist/storybook/assets/pop-confirm.stories-QyBm5ZAb.js +9 -0
- package/dist/storybook/assets/popover-rJn7kxkX.js +1 -0
- package/dist/storybook/assets/popover.stories-5aZN8AoC.js +10 -0
- package/dist/storybook/assets/{portal.stories-UGkzdgVk.js → portal.stories-1Jnj3LXz.js} +1 -1
- package/dist/storybook/assets/{preview-WIFbPoA-.js → preview-3kPhKzar.js} +13 -13
- package/dist/storybook/assets/preview-64tDm6Er.js +7 -0
- package/dist/storybook/assets/preview-OnO0tzRj.js +17 -0
- package/dist/storybook/assets/projects.stories-wnXCxuJE.js +47 -0
- package/dist/storybook/assets/{radio-button-jHcwHUA4.js → radio-button-7TJh5k-h.js} +1 -1
- package/dist/storybook/assets/{radio-button.stories-LkCJsp5P.js → radio-button.stories-9mvBu2BH.js} +5 -5
- package/dist/storybook/assets/react-router-dom-4Z66xYqZ.js +8 -0
- package/dist/storybook/assets/{reservoirs.stories-hhPblhmv.js → reservoirs.stories-XGU7s6pI.js} +2 -2
- package/dist/storybook/assets/{rich-text-input.stories-7UzvJ-A1.js → rich-text-input.stories-3Xaavdx_.js} +3 -3
- package/dist/storybook/assets/row.stories-Ph7Ckyfn.js +130 -0
- package/dist/storybook/assets/{select-JjEPivho.js → select-KWgree43.js} +1 -1
- package/dist/storybook/assets/{select.stories-qFDyxRFm.js → select.stories-3D2KkC3_.js} +2 -2
- package/dist/storybook/assets/side-bar-kr46QLwI.js +1 -0
- package/dist/storybook/assets/side-bar.stories-bJoVvzG5.js +1 -0
- package/dist/storybook/assets/{site.stories-QHCzFOnt.js → site.stories-VpsCjYty.js} +2 -2
- package/dist/storybook/assets/slider-jx0z5OyT.js +7 -0
- package/dist/storybook/assets/slider.stories-CpY4L01U.js +171 -0
- package/dist/storybook/assets/smart-upload-modal.stories-hjd4L84J.js +25 -0
- package/dist/storybook/assets/spacer.stories-FpDFoVWE.js +1 -0
- package/dist/storybook/assets/syntaxhighlighter-B5GMVT5T-1rrvKZrw.js +1 -0
- package/dist/storybook/assets/table-4SISWUSt.js +1 -0
- package/dist/storybook/assets/table-smKT-hbF.css +1 -0
- package/dist/storybook/assets/table.stories-data-UqqhbXjA.js +1 -0
- package/dist/storybook/assets/{table.stories-tEvulp9K.js → table.stories-rKzdxDA4.js} +94 -18
- package/dist/storybook/assets/{tabs.stories-KtJc5Yci.js → tabs.stories-aps5NXFv.js} +2 -2
- package/dist/storybook/assets/text-link.stories-Plmiu8NV.js +14 -0
- package/dist/storybook/assets/{textarea-gxvxVBdC.js → textarea-JE26Eekm.js} +1 -1
- package/dist/storybook/assets/{textarea.stories-MZHVAwSx.js → textarea.stories-c1mkQU4s.js} +1 -1
- package/dist/storybook/assets/tiny-invariant-R4kOKlvx.js +8 -0
- package/dist/storybook/assets/title.stories-6AjYBLcL.js +37 -0
- package/dist/storybook/assets/{toaster-eOozfa7U.js → toaster-IL_npIpU.js} +1 -1
- package/dist/storybook/assets/toaster.stories-QL3_PKZL.js +86 -0
- package/dist/storybook/assets/{toggle-BPI2y-lU.js → toggle-vKuY4G3w.js} +1 -1
- package/dist/storybook/assets/{toggle.stories-aVmjpons.js → toggle.stories-fJ5QYzcQ.js} +2 -2
- package/dist/storybook/assets/{tooltip-HEHiU__l.js → tooltip-dueTLnwA.js} +2 -2
- package/dist/storybook/assets/{tooltip.stories-tiOgoWHH.js → tooltip.stories-a_gd0XYu.js} +1 -1
- package/dist/storybook/assets/tooltip.test-case.stories-0HiezXaS.js +5 -0
- package/dist/storybook/assets/top-bar-K-LdFikH.css +1 -0
- package/dist/storybook/assets/top-bar-pptAo2LU.js +1 -0
- package/dist/storybook/assets/top-bar.stories-H1OeyQS_.js +21 -0
- package/dist/storybook/assets/top-bar.testcase.stories-uJCoeG_m.js +30 -0
- package/dist/storybook/assets/tree-U4LtpVm9.css +1 -0
- package/dist/storybook/assets/tree.stories-a-UG4OFf.js +182 -0
- package/dist/storybook/assets/unit-input-OT-AqIIa.css +1 -0
- package/dist/storybook/assets/unit-input.stories--qvPjZnZ.js +349 -0
- package/dist/storybook/assets/unit-table.stories-4HlhxSjf.js +150 -0
- package/dist/storybook/iframe.html +3 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/sb-addons/actions-0/manager-bundle.js +1 -1
- package/dist/storybook/sb-preview/globals.js +1 -1
- package/dist/storybook/sb-preview/runtime.js +19 -19
- package/dist/storybook/stories.json +1 -1
- package/package.json +10 -9
- package/dist/storybook/assets/Color-6VNJS4EI-NPUHt_3q.js +0 -1
- package/dist/storybook/assets/DocsRenderer-NNNQARDV-HIEKjKKN.js +0 -1
- package/dist/storybook/assets/WithTooltip-4HIR6TLV-XVy3Qn7b.js +0 -1
- package/dist/storybook/assets/actions-W12osUP0.css +0 -1
- package/dist/storybook/assets/actions-Z9jDWreP.js +0 -1
- package/dist/storybook/assets/actions.stories-Qrio9EMy.js +0 -1
- package/dist/storybook/assets/afe.stories-mangk6LB.js +0 -88
- package/dist/storybook/assets/badge.stories-C0MXS15j.js +0 -1
- package/dist/storybook/assets/blowout.stories-i7Ii3760.js +0 -40
- package/dist/storybook/assets/button-7V8oA22w.js +0 -1
- package/dist/storybook/assets/button.stories-PhWmZXOu.js +0 -71
- package/dist/storybook/assets/card.stories-HzHJW6ek.js +0 -1
- package/dist/storybook/assets/casing-loads.stories-4eIPrrhL.js +0 -209
- package/dist/storybook/assets/cell.stories-X4sboJCw.js +0 -212
- package/dist/storybook/assets/color-PIYd2VAw.js +0 -25
- package/dist/storybook/assets/dialog-WKHRZcjc.js +0 -1
- package/dist/storybook/assets/empty.stories-lva3DbfI.js +0 -1
- package/dist/storybook/assets/file-input.stories-SF8BeFpu.js +0 -66
- package/dist/storybook/assets/footer.stories-L0qQuABW.js +0 -3
- package/dist/storybook/assets/form.stories-qQsjBbOk.js +0 -49
- package/dist/storybook/assets/formation.stories-E8DV_cIY.js +0 -74
- package/dist/storybook/assets/help-icon.stories-vifwJgNA.js +0 -4
- package/dist/storybook/assets/icon.stories-W-UgTWyK.js +0 -6
- package/dist/storybook/assets/iframe-NU_z28D3.js +0 -7
- package/dist/storybook/assets/index-IQMsp8Ab.js +0 -14
- package/dist/storybook/assets/index-gM75B7fB.js +0 -8
- package/dist/storybook/assets/index.es-JXn3JM7k.js +0 -86
- package/dist/storybook/assets/label.stories-aXdU5_Ql.js +0 -11
- package/dist/storybook/assets/layout-forms-w8JJQQqh.js +0 -16
- package/dist/storybook/assets/list-8l-RGDgw.js +0 -8
- package/dist/storybook/assets/list-heading-Vd3hu5Pf.js +0 -1
- package/dist/storybook/assets/list-heading-Y8BAUuV6.css +0 -1
- package/dist/storybook/assets/list.stories-Vp0Dm7UU.js +0 -457
- package/dist/storybook/assets/menu.stories-VwRF_Pbx.js +0 -60
- package/dist/storybook/assets/modal.stories-15sY1c5H.js +0 -173
- package/dist/storybook/assets/number-input-SvjJIGsW.js +0 -1
- package/dist/storybook/assets/number-input.stories-BURENIFo.js +0 -81
- package/dist/storybook/assets/option-dropdown.stories-Q2zd2AcS.js +0 -21
- package/dist/storybook/assets/page.stories-pa-9WU0e.js +0 -57
- package/dist/storybook/assets/pop-confirm.stories-_agvSFJd.js +0 -9
- package/dist/storybook/assets/popover-Y3FpGdUS.js +0 -1
- package/dist/storybook/assets/popover.stories-b7Tt4S0j.js +0 -1
- package/dist/storybook/assets/preview-D7BEK6_6.js +0 -7
- package/dist/storybook/assets/preview-Fi7DQdoQ.js +0 -1
- package/dist/storybook/assets/projects.stories-YPlCLdRE.js +0 -47
- package/dist/storybook/assets/row.stories-juQv80h3.js +0 -122
- package/dist/storybook/assets/side-bar-Fjr2t9MT.js +0 -1
- package/dist/storybook/assets/side-bar.stories-sxBJCVnV.js +0 -1
- package/dist/storybook/assets/slider-nl2rJ9LF.js +0 -7
- package/dist/storybook/assets/slider.stories--aZa8kf-.js +0 -127
- package/dist/storybook/assets/spacer.stories-eCrKj4b3.js +0 -1
- package/dist/storybook/assets/syntaxhighlighter-NMPM6SWI--OA96ou_.js +0 -1
- package/dist/storybook/assets/table-PWodWi0p.css +0 -1
- package/dist/storybook/assets/table-i8WT9qpj.js +0 -1
- package/dist/storybook/assets/table.stories-data-4h6h0P0V.js +0 -1
- package/dist/storybook/assets/text-link.stories-kjfUeFtk.js +0 -1
- package/dist/storybook/assets/title.stories-cmteB9lx.js +0 -37
- package/dist/storybook/assets/toaster.stories-S25S4g_F.js +0 -86
- package/dist/storybook/assets/tooltip.test-case.stories-kIeZayHw.js +0 -3
- package/dist/storybook/assets/top-bar-9iOkm7Gq.js +0 -1
- package/dist/storybook/assets/top-bar-cBtxm6yr.css +0 -1
- package/dist/storybook/assets/top-bar.stories-5jcHi3Q_.js +0 -1
- package/dist/storybook/assets/top-bar.testcase.stories-7acJvLc_.js +0 -30
- package/dist/storybook/assets/tree-zmq4MRb6.css +0 -1
- package/dist/storybook/assets/tree.stories-_5t-Rrls.js +0 -128
- package/dist/storybook/assets/unit-input-qBUtqoTb.css +0 -1
- package/dist/storybook/assets/unit-input.stories-j3Ykteob.js +0 -273
- package/dist/storybook/assets/unit-table.stories-4XYwgJwY.js +0 -100
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import{j as r}from"./jsx-runtime-FsUICBgo.js";import{r as br}from"./index-RfLt4OUa.js";import{H as xr,L as W,S as Sr,R as w}from"./react-router-dom-4Z66xYqZ.js";import{T as L,I as hr}from"./common-types-U65vzrrz.js";import{M as N}from"./actions-Z1pyUd57.js";import{B}from"./button-UQO14biP.js";import{F as jr}from"./flex-RYZsoWEN.js";import{m as s,a as Tr,b as Mr,c as Or,d as Cr,e as Dr,f as Rr,g as fr,h as yr,i as kr}from"./menu.stories-data-hEz8P1yK.js";import{M as A}from"./types-VB5zD18b.js";import"./inheritsLoose-Y9jOMJLd.js";import"./index-4QtD-hFu.js";import"./extends-dGVwEr9R.js";import"./tiny-invariant-R4kOKlvx.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./index-VW3EWkuE.js";import"./lodash-Bmg8FrMx.js";import"./disabled-context-urNQThQz.js";import"./tooltip-dueTLnwA.js";import"./index-miLrID2P.js";import"./icon-_m67DAr0.js";import"./tslib.es6-OIsz3r9a.js";import"./types-5uVBABF4.js";import"./badge-23Ty_zBt.js";import"./spinner-R8Il4aRe.js";const $r={title:"Basic/Menu",component:N,args:{menu:s}},e=a=>r.jsx(N,{...a}),E=e.bind({}),n=e.bind({});n.args={menu:{...s,colored:!0}};const o=e.bind({});o.args={menu:{...s,label:"Delete",colored:"danger"}};const t=e.bind({});t.args={menu:{...s,trigger:L.TEXT}};const i=e.bind({});i.args={menu:{...s,trigger:L.COMPONENT,component:r.jsx(B,{small:!0,colored:!0,round:!0,icon:hr.SETTINGS})}};const c=e.bind({});c.args={menu:Tr};const p=e.bind({});p.args={menu:Mr};const d=e.bind({});d.args={menu:Or};const l=e.bind({});l.args={menu:Cr};const m=e.bind({});m.args={disabled:!0};const u=e.bind({});u.args={tooltip:"Tooltip goes here"};const g=e.bind({});g.args={error:"Error goes here"};const b=e.bind({});b.args={warning:"Warning goes here"};const x=e.bind({});x.args={loading:!0,disabled:!0};const S=e.bind({});S.args={badgeTitle:"3"};const h=e.bind({});h.args={badgeDot:!0};const j=e.bind({});j.args={menu:Dr};const T=e.bind({});T.args={menu:Rr};const M=e.bind({});M.args={closeOnOptionClick:!1};const O=e.bind({});O.args={contextMenu:!0,menu:{...s,trigger:L.TEXT,label:"Right-click me"}};const C=e.bind({});C.args={width:"100%"};const D=e.bind({});D.args={menu:{...s,small:!0}};const R=e.bind({});R.args={menu:fr};const f=e.bind({});f.args={menu:{...s,sections:r.jsx("div",{children:"Testing"})}};const y=e.bind({});y.args={menu:yr};const k=e.bind({});k.args={menu:kr};const I=()=>{const[a,P]=br.useState(!1);return r.jsxs(jr,{gap:!0,children:[r.jsx(N,{menu:s,open:a,setOpen:P}),r.jsx(B,{label:"Open",onClick:()=>P(!0),disabled:a}),r.jsx(B,{label:"Close",onClick:()=>P(!1),disabled:!a})]})},F=()=>r.jsxs(xr,{children:[r.jsx(N,{menu:{label:"Go to",trigger:L.DROP_DOWN_BUTTON,sections:[{type:A.OPTION,label:"Dashboard",url:"/dashboard",component:W},{type:A.OPTION,label:"Settings",url:"/settings",component:W}]}}),r.jsxs(Sr,{children:[r.jsx(w,{path:"/dashboard",children:"Dashboard"}),r.jsx(w,{path:"/settings",children:"Settings"})]})]});var _,X,J;E.parameters={...E.parameters,docs:{...(_=E.parameters)==null?void 0:_.docs,source:{originalSource:`args => <Menu
|
|
2
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
3
|
+
{...args} />`,...(J=(X=E.parameters)==null?void 0:X.docs)==null?void 0:J.source}}};var U,H,v;n.parameters={...n.parameters,docs:{...(U=n.parameters)==null?void 0:U.docs,source:{originalSource:`args => <Menu
|
|
4
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
5
|
+
{...args} />`,...(v=(H=n.parameters)==null?void 0:H.docs)==null?void 0:v.source}}};var G,q,z;o.parameters={...o.parameters,docs:{...(G=o.parameters)==null?void 0:G.docs,source:{originalSource:`args => <Menu
|
|
6
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
7
|
+
{...args} />`,...(z=(q=o.parameters)==null?void 0:q.docs)==null?void 0:z.source}}};var K,Q,V;t.parameters={...t.parameters,docs:{...(K=t.parameters)==null?void 0:K.docs,source:{originalSource:`args => <Menu
|
|
8
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
9
|
+
{...args} />`,...(V=(Q=t.parameters)==null?void 0:Q.docs)==null?void 0:V.source}}};var Y,Z,$;i.parameters={...i.parameters,docs:{...(Y=i.parameters)==null?void 0:Y.docs,source:{originalSource:`args => <Menu
|
|
10
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
11
|
+
{...args} />`,...($=(Z=i.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};var ee,re,se;c.parameters={...c.parameters,docs:{...(ee=c.parameters)==null?void 0:ee.docs,source:{originalSource:`args => <Menu
|
|
12
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
13
|
+
{...args} />`,...(se=(re=c.parameters)==null?void 0:re.docs)==null?void 0:se.source}}};var ae,ne,oe;p.parameters={...p.parameters,docs:{...(ae=p.parameters)==null?void 0:ae.docs,source:{originalSource:`args => <Menu
|
|
14
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
15
|
+
{...args} />`,...(oe=(ne=p.parameters)==null?void 0:ne.docs)==null?void 0:oe.source}}};var te,ie,ce;d.parameters={...d.parameters,docs:{...(te=d.parameters)==null?void 0:te.docs,source:{originalSource:`args => <Menu
|
|
16
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
17
|
+
{...args} />`,...(ce=(ie=d.parameters)==null?void 0:ie.docs)==null?void 0:ce.source}}};var pe,de,le;l.parameters={...l.parameters,docs:{...(pe=l.parameters)==null?void 0:pe.docs,source:{originalSource:`args => <Menu
|
|
18
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
19
|
+
{...args} />`,...(le=(de=l.parameters)==null?void 0:de.docs)==null?void 0:le.source}}};var me,ue,ge;m.parameters={...m.parameters,docs:{...(me=m.parameters)==null?void 0:me.docs,source:{originalSource:`args => <Menu
|
|
20
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
21
|
+
{...args} />`,...(ge=(ue=m.parameters)==null?void 0:ue.docs)==null?void 0:ge.source}}};var be,xe,Se;u.parameters={...u.parameters,docs:{...(be=u.parameters)==null?void 0:be.docs,source:{originalSource:`args => <Menu
|
|
22
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
23
|
+
{...args} />`,...(Se=(xe=u.parameters)==null?void 0:xe.docs)==null?void 0:Se.source}}};var he,je,Te;g.parameters={...g.parameters,docs:{...(he=g.parameters)==null?void 0:he.docs,source:{originalSource:`args => <Menu
|
|
24
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
25
|
+
{...args} />`,...(Te=(je=g.parameters)==null?void 0:je.docs)==null?void 0:Te.source}}};var Me,Oe,Ce;b.parameters={...b.parameters,docs:{...(Me=b.parameters)==null?void 0:Me.docs,source:{originalSource:`args => <Menu
|
|
26
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
27
|
+
{...args} />`,...(Ce=(Oe=b.parameters)==null?void 0:Oe.docs)==null?void 0:Ce.source}}};var De,Re,fe;x.parameters={...x.parameters,docs:{...(De=x.parameters)==null?void 0:De.docs,source:{originalSource:`args => <Menu
|
|
28
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
29
|
+
{...args} />`,...(fe=(Re=x.parameters)==null?void 0:Re.docs)==null?void 0:fe.source}}};var ye,ke,Ee;S.parameters={...S.parameters,docs:{...(ye=S.parameters)==null?void 0:ye.docs,source:{originalSource:`args => <Menu
|
|
30
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
31
|
+
{...args} />`,...(Ee=(ke=S.parameters)==null?void 0:ke.docs)==null?void 0:Ee.source}}};var Ie,Fe,Le;h.parameters={...h.parameters,docs:{...(Ie=h.parameters)==null?void 0:Ie.docs,source:{originalSource:`args => <Menu
|
|
32
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
33
|
+
{...args} />`,...(Le=(Fe=h.parameters)==null?void 0:Fe.docs)==null?void 0:Le.source}}};var Ne,Pe,Be;j.parameters={...j.parameters,docs:{...(Ne=j.parameters)==null?void 0:Ne.docs,source:{originalSource:`args => <Menu
|
|
34
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
35
|
+
{...args} />`,...(Be=(Pe=j.parameters)==null?void 0:Pe.docs)==null?void 0:Be.source}}};var We,we,Ae;T.parameters={...T.parameters,docs:{...(We=T.parameters)==null?void 0:We.docs,source:{originalSource:`args => <Menu
|
|
36
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
37
|
+
{...args} />`,...(Ae=(we=T.parameters)==null?void 0:we.docs)==null?void 0:Ae.source}}};var _e,Xe,Je;M.parameters={...M.parameters,docs:{...(_e=M.parameters)==null?void 0:_e.docs,source:{originalSource:`args => <Menu
|
|
38
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
39
|
+
{...args} />`,...(Je=(Xe=M.parameters)==null?void 0:Xe.docs)==null?void 0:Je.source}}};var Ue,He,ve;O.parameters={...O.parameters,docs:{...(Ue=O.parameters)==null?void 0:Ue.docs,source:{originalSource:`args => <Menu
|
|
40
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
41
|
+
{...args} />`,...(ve=(He=O.parameters)==null?void 0:He.docs)==null?void 0:ve.source}}};var Ge,qe,ze;C.parameters={...C.parameters,docs:{...(Ge=C.parameters)==null?void 0:Ge.docs,source:{originalSource:`args => <Menu
|
|
42
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
43
|
+
{...args} />`,...(ze=(qe=C.parameters)==null?void 0:qe.docs)==null?void 0:ze.source}}};var Ke,Qe,Ve;D.parameters={...D.parameters,docs:{...(Ke=D.parameters)==null?void 0:Ke.docs,source:{originalSource:`args => <Menu
|
|
44
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
45
|
+
{...args} />`,...(Ve=(Qe=D.parameters)==null?void 0:Qe.docs)==null?void 0:Ve.source}}};var Ye,Ze,$e;R.parameters={...R.parameters,docs:{...(Ye=R.parameters)==null?void 0:Ye.docs,source:{originalSource:`args => <Menu
|
|
46
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
47
|
+
{...args} />`,...($e=(Ze=R.parameters)==null?void 0:Ze.docs)==null?void 0:$e.source}}};var er,rr,sr;f.parameters={...f.parameters,docs:{...(er=f.parameters)==null?void 0:er.docs,source:{originalSource:`args => <Menu
|
|
48
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
49
|
+
{...args} />`,...(sr=(rr=f.parameters)==null?void 0:rr.docs)==null?void 0:sr.source}}};var ar,nr,or;y.parameters={...y.parameters,docs:{...(ar=y.parameters)==null?void 0:ar.docs,source:{originalSource:`args => <Menu
|
|
50
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
51
|
+
{...args} />`,...(or=(nr=y.parameters)==null?void 0:nr.docs)==null?void 0:or.source}}};var tr,ir,cr;k.parameters={...k.parameters,docs:{...(tr=k.parameters)==null?void 0:tr.docs,source:{originalSource:`args => <Menu
|
|
52
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
53
|
+
{...args} />`,...(cr=(ir=k.parameters)==null?void 0:ir.docs)==null?void 0:cr.source}}};var pr,dr,lr;I.parameters={...I.parameters,docs:{...(pr=I.parameters)==null?void 0:pr.docs,source:{originalSource:`() => {
|
|
54
|
+
const [open, setOpen] = useState(false);
|
|
55
|
+
return <Flex gap>
|
|
56
|
+
<Menu menu={storyData.menu} open={open} setOpen={setOpen} />
|
|
57
|
+
<Button label="Open" onClick={() => setOpen(true)} disabled={open} />
|
|
58
|
+
<Button label="Close" onClick={() => setOpen(false)} disabled={!open} />
|
|
59
|
+
</Flex>;
|
|
60
|
+
}`,...(lr=(dr=I.parameters)==null?void 0:dr.docs)==null?void 0:lr.source}}};var mr,ur,gr;F.parameters={...F.parameters,docs:{...(mr=F.parameters)==null?void 0:mr.docs,source:{originalSource:`() => {
|
|
61
|
+
return <HashRouter>
|
|
62
|
+
<Menu menu={{
|
|
63
|
+
label: 'Go to',
|
|
64
|
+
trigger: TriggerType.DROP_DOWN_BUTTON,
|
|
65
|
+
sections: [{
|
|
66
|
+
type: MenuType.OPTION,
|
|
67
|
+
label: 'Dashboard',
|
|
68
|
+
url: '/dashboard',
|
|
69
|
+
component: Link
|
|
70
|
+
}, {
|
|
71
|
+
type: MenuType.OPTION,
|
|
72
|
+
label: 'Settings',
|
|
73
|
+
url: '/settings',
|
|
74
|
+
component: Link
|
|
75
|
+
}]
|
|
76
|
+
}} />
|
|
77
|
+
<Switch>
|
|
78
|
+
<Route path="/dashboard">Dashboard</Route>
|
|
79
|
+
<Route path="/settings">Settings</Route>
|
|
80
|
+
</Switch>
|
|
81
|
+
</HashRouter>;
|
|
82
|
+
}`,...(gr=(ur=F.parameters)==null?void 0:ur.docs)==null?void 0:gr.source}}};const es=["Default","PrimaryTrigger","DestructiveTrigger","TextTrigger","CustomTrigger","FileUpload","DescriptionOnRight","Actions","Icons","Disabled","Tooltip","Error","Warning","Loading","Badge","Dot","Empty","Submenus","WithoutCloseOnOptionClick","RightClickContextMenu","FullWidth","Small","JSXItems","JSXContent","ShowAll","Long","ControlOpenStateFromParent","AsRouterLink"];export{d as Actions,F as AsRouterLink,S as Badge,I as ControlOpenStateFromParent,i as CustomTrigger,E as Default,p as DescriptionOnRight,o as DestructiveTrigger,m as Disabled,h as Dot,j as Empty,g as Error,c as FileUpload,C as FullWidth,l as Icons,f as JSXContent,R as JSXItems,x as Loading,k as Long,n as PrimaryTrigger,O as RightClickContextMenu,y as ShowAll,D as Small,T as Submenus,t as TextTrigger,u as Tooltip,b as Warning,M as WithoutCloseOnOptionClick,es as __namedExportsOrder,$r as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as b}from"./index-RfLt4OUa.js";import{c as l}from"./index-VW3EWkuE.js";import{I as r}from"./common-types-U65vzrrz.js";import{I as c}from"./icon-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as b}from"./index-RfLt4OUa.js";import{c as l}from"./index-VW3EWkuE.js";import{I as r}from"./common-types-U65vzrrz.js";import{I as c}from"./icon-_m67DAr0.js";const j="_inputInTable_s49vk_1",R="_inputHover_s49vk_13",T="_inputFocus_s49vk_18",C="_inputError_s49vk_25",y="_inputWarning_s49vk_26",D="_inputDisabled_s49vk_61",O="_hideScrollbars_s49vk_67",G="_container_s49vk_83",w="_block_s49vk_101",A="_info_s49vk_104",F="_success_s49vk_108",L="_warning_s49vk_112",W="_error_s49vk_116",V="_content_s49vk_120",z="_heading_s49vk_124",H="_icon_s49vk_131",U="_dismiss_s49vk_139",q="_absolute_s49vk_143",M="_legendToggle_s49vk_155",B="_detailsText_s49vk_165",J="_footer_s49vk_169",n={inputInTable:j,inputHover:R,inputFocus:T,inputError:C,inputWarning:y,inputDisabled:D,hideScrollbars:O,container:G,block:w,info:A,success:F,warning:L,error:W,content:V,heading:z,icon:H,dismiss:U,absolute:q,legendToggle:M,detailsText:B,footer:J};var i=(s=>(s.INFO="Info",s.SUCCESS="Success",s.WARNING="Warning",s.ERROR="Error",s))(i||{}),d=(s=>(s.TOGGLE_DETAILS="TOGGLE_DETAILS",s))(d||{});const a=({type:s,onClose:t,isInToast:o})=>e.jsx("div",{className:l(n.dismiss,o?n.absolute:"",s===i.INFO?n.info:s===i.SUCCESS?n.success:s===i.WARNING?n.warning:s===i.ERROR?n.error:null),children:e.jsx(c,{icon:r.CLOSE,onClick:t})});try{a.displayName="Dismiss",a.__docgenInfo={description:"",displayName:"Dismiss",props:{type:{defaultValue:null,description:"",name:"type",required:!0,type:{name:"string"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"TFunction"}},isInToast:{defaultValue:null,description:"",name:"isInToast",required:!1,type:{name:"boolean"}}}}}catch{}const K=(s,t)=>{switch(t.type){case d.TOGGLE_DETAILS:return{...s,detailsVisible:!s.detailsVisible};default:return s}},P=({details:s,visible:t,dispatch:o})=>e.jsxs("div",{children:[e.jsx("div",{className:l(n.legendToggle),onClick:o,children:t?"Hide details":"Show details"}),t?e.jsx("div",{className:n.detailsText,children:s}):null]}),Q=({type:s})=>{switch(s){case i.SUCCESS:return e.jsx(c,{icon:r.SUCCESS,size:16});case i.WARNING:return e.jsx(c,{icon:r.WARNING,size:16});case i.ERROR:return e.jsx(c,{icon:r.ERROR,size:16});default:return e.jsx(c,{icon:r.INFO,size:16})}},v=({message:s})=>{const{visible:t,type:o=i.INFO,icon:g,heading:_,content:h,details:u,detailsVisible:x=!1,footer:p,withDismiss:f,onClose:k,width:m,maxHeight:I}=s,N={detailsVisible:x},[S,E]=b.useReducer(K,N);return e.jsx(e.Fragment,{children:t?e.jsxs("div",{className:l(n.container,m?n.block:null,o===i.SUCCESS?n.success:o===i.WARNING?n.warning:o===i.ERROR?n.error:n.info),style:{width:m,maxHeight:I},children:[e.jsx("div",{children:g?e.jsx("div",{className:n.icon,children:e.jsx(Q,{type:o})}):null}),e.jsxs("div",{className:n.content,children:[_?e.jsx("div",{className:n.heading,children:_}):null,e.jsx("div",{children:h}),u?e.jsx(P,{details:u,visible:S.detailsVisible,dispatch:()=>E({type:d.TOGGLE_DETAILS})}):null,!!p&&e.jsx("div",{className:n.footer,children:p})]}),f?e.jsx(a,{type:o,onClose:k}):null]}):null})};try{v.displayName="Message",v.__docgenInfo={description:"",displayName:"Message",props:{message:{defaultValue:null,description:"",name:"message",required:!0,type:{name:"IMessage"}}}}}catch{}export{a as D,v as M,i as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as s}from"./jsx-runtime-FsUICBgo.js";import{a,
|
|
1
|
+
import{j as s}from"./jsx-runtime-FsUICBgo.js";import{M as a,a as n}from"./message-bbAE2zjv.js";import{B as M}from"./button-UQO14biP.js";import{G as z}from"./grid-u1mZpaML.js";import"./index-RfLt4OUa.js";import"./index-VW3EWkuE.js";import"./common-types-U65vzrrz.js";import"./icon-_m67DAr0.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-Y9jOMJLd.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./tooltip-dueTLnwA.js";import"./index-miLrID2P.js";import"./styled-components.browser.esm-qIipjd6c.js";const{useArgs:J}=__STORYBOOK_MODULE_ADDONS__,Q={visible:!0,heading:void 0,content:"Here is some info",withDismiss:!1,icon:!1,details:void 0,maxHeight:void 0,type:n.INFO},Ce={title:"Basic/Message",component:a,args:{...Q},argTypes:{heading:{control:{type:"text"}},details:{control:{type:"text"}}}},e=u=>{const[X,y]=J(),c=()=>{y({visible:!1}),setTimeout(()=>{y({visible:!0})},1e3)};return s.jsxs(z,{gap:!0,children:[s.jsx(a,{message:{...u,onClose:c,type:n.INFO}}),s.jsx(a,{message:{...u,onClose:c,type:n.ERROR}}),s.jsx(a,{message:{...u,onClose:c,type:n.WARNING}}),s.jsx(a,{message:{...u,onClose:c,type:n.SUCCESS}})]})},C=e.bind({}),o=e.bind({});o.args={heading:"Message Heading"};const r=e.bind({});r.args={icon:!0};const t=e.bind({});t.args={details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mi ac quam condimentum blandit at sit amet lectus. Nullam volutpat erat maximus, venenatis nisl sed, aliquam libero."};const g=e.bind({});g.args={details:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mi ac quam condimentum blandit at sit amet lectus. Nullam volutpat erat maximus, venenatis nisl sed, aliquam libero.",detailsVisible:!0};const l=e.bind({});l.args={type:n.ERROR,icon:!0,content:"Unable to sync because connection settings are not set.",footer:s.jsxs(s.Fragment,{children:[s.jsx(M,{small:!0,label:"Edit connection settings",colored:"primary"},"edit-settings"),s.jsx(M,{small:!0,label:"Cancel sync"},"cancel-sync"),","]})};const i=e.bind({});i.args={width:"100%"};const p=e.bind({});p.args={width:"300px"};const d=e.bind({});d.args={maxHeight:"100px",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)};const m=e.bind({});m.args={withDismiss:!0,onClose:()=>{}};var h,T,A;C.parameters={...C.parameters,docs:{...(h=C.parameters)==null?void 0:h.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
const handleClose = () => {
|
|
4
4
|
updateArgs({
|
|
@@ -338,4 +338,4 @@ import{j as s}from"./jsx-runtime-FsUICBgo.js";import{a,M as n}from"./message-uMH
|
|
|
338
338
|
type: MessageType.SUCCESS
|
|
339
339
|
}} />
|
|
340
340
|
</Grid>;
|
|
341
|
-
}`,...(k=(Y=m.parameters)==null?void 0:Y.docs)==null?void 0:k.source}}};const
|
|
341
|
+
}`,...(k=(Y=m.parameters)==null?void 0:Y.docs)==null?void 0:k.source}}};const ye=["Default","Heading","Icon","Details","DetailsShowDefault","Footer","FullWidth","FixedWidth","MaxHeight","Dismiss"];export{C as Default,t as Details,g as DetailsShowDefault,m as Dismiss,p as FixedWidth,l as Footer,i as FullWidth,o as Heading,r as Icon,d as MaxHeight,ye as __namedExportsOrder,Ce as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as f}from"./index-RfLt4OUa.js";import{c as u}from"./index-VW3EWkuE.js";import{I as N}from"./common-types-U65vzrrz.js";import{I as g}from"./icon-_m67DAr0.js";import{H as y}from"./heading-FcNTpGhR.js";import{A as h}from"./actions-Z1pyUd57.js";import{B as x}from"./badge-23Ty_zBt.js";import{T as b}from"./tooltip-dueTLnwA.js";const I="_inputInTable_tn20e_1",T="_inputHover_tn20e_13",j="_inputFocus_tn20e_18",w="_inputError_tn20e_25",H="_inputWarning_tn20e_26",v="_inputDisabled_tn20e_61",C="_hideScrollbars_tn20e_67",V="_header_tn20e_77",q="_headerTitle_tn20e_77",E="_heading_tn20e_78",R="_itemHeader_tn20e_78",S="_narrow_tn20e_81",k="_stickyHeader_tn20e_85",M="_title_tn20e_96",L="_name_tn20e_102",F="_iconTooltipMargin_tn20e_105",P="_bold_tn20e_108",W="_toggleNarrow_tn20e_117",$="_drag_tn20e_135",B="_list_tn20e_155",D="_bordered_tn20e_159",A="_item_tn20e_78",J="_action_tn20e_192",O="_active_tn20e_195",X="_indented_tn20e_202",z="_disabled_tn20e_215",G="_label_tn20e_226",K="_details_tn20e_237",Q="_metadata_tn20e_238",U="_itemContent_tn20e_246",Y="_indentIcon_tn20e_253",Z="_expandIcon_tn20e_258",ee="_expanded_tn20e_265",te="_right_tn20e_268",ne="_actions_tn20e_276",ae="_scrollableList_tn20e_281",oe="_infiniteScrollContainer_tn20e_286",re="_hideScrollbar_tn20e_67",ie="_noPointerEvents_tn20e_303",a={inputInTable:I,inputHover:T,inputFocus:j,inputError:w,inputWarning:H,inputDisabled:v,hideScrollbars:C,header:V,headerTitle:q,heading:E,itemHeader:R,narrow:S,stickyHeader:k,title:M,name:L,iconTooltipMargin:F,bold:P,toggleNarrow:W,drag:$,list:B,bordered:D,item:A,action:J,active:O,indented:X,disabled:z,label:G,details:K,metadata:Q,itemContent:U,indentIcon:Y,expandIcon:Z,expanded:ee,right:te,actions:ne,scrollableList:ae,infiniteScrollContainer:oe,hideScrollbar:re,noPointerEvents:ie},c=({toggleNarrow:n,onClickToggleNarrow:t})=>n?e.jsx("a",{className:a.toggleNarrow,onClick:t,children:e.jsx(g,{icon:N.CHEVRON_LEFT})}):null;try{c.displayName="ToggleNarrow",c.__docgenInfo={description:"",displayName:"ToggleNarrow",props:{toggleNarrow:{defaultValue:null,description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onClickToggleNarrow:{defaultValue:null,description:"",name:"onClickToggleNarrow",required:!1,type:{name:"TEmpty"}}}}}catch{}const p=f.forwardRef(({name:n,actions:t=[],toggleNarrow:i=!1,onToggleNarrow:o=()=>{},stickyHeader:s},l)=>e.jsxs("div",{ref:l,className:u(a.header,s?a.stickyHeader:""),children:[e.jsx(c,{toggleNarrow:i,onClickToggleNarrow:o}),n&&e.jsx("div",{className:a.headerTitle,children:e.jsx(y,{top:!0,marginBottom:0,children:n})}),e.jsx("div",{className:a.right,children:e.jsx("div",{className:a.actions,children:e.jsx(h,{actions:t})})})]}));try{p.displayName="ListHeading",p.__docgenInfo={description:"",displayName:"ListHeading",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined"}},actions:{defaultValue:{value:"[]"},description:"",name:"actions",required:!1,type:{name:"any[]"}},toggleNarrow:{defaultValue:{value:"false"},description:"",name:"toggleNarrow",required:!1,type:{name:"boolean"}},onToggleNarrow:{defaultValue:{value:"() => {}"},description:"",name:"onToggleNarrow",required:!1,type:{name:"TEmpty"}},stickyHeader:{defaultValue:null,description:"",name:"stickyHeader",required:!1,type:{name:"boolean"}}}}}catch{}const _=({name:n,icon:t,testId:i})=>{const o=t&&e.jsx(g,{icon:t.icon,color:t.color||"#db2828"});return e.jsxs("span",{className:u(a.name,a.bold),"data-testid":i,children:[n,t&&t.tooltip&&t.tooltip.text?e.jsx("span",{className:a.iconTooltipMargin,children:e.jsx(b,{text:t.tooltip.text,maxWidth:"350px",children:o})}):t&&t.icon&&e.jsx("span",{className:a.iconTooltipMargin,children:o})]})};try{_.displayName="Name",_.__docgenInfo={description:"",displayName:"Name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}try{name.displayName="name",name.__docgenInfo={description:"",displayName:"name",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"ReactNode"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"{ icon: ReactNode; color?: string; tooltip?: { text: ReactNode; }; } | undefined"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}}}}}catch{}const m=({item:n})=>{const{name:t,icon:i,details:o,metadata:s,invalid:l,testId:r}=n;let d=e.jsx(_,{name:t,icon:i,testId:r&&`${r}-name`});return l&&(d=e.jsx(x,{small:!0,margin:"-2px",title:"!",children:d})),e.jsxs("span",{className:a.title,children:[d,o&&e.jsx("span",{className:a.details,"data-testid":r&&`${r}-details`,children:o}),s&&e.jsx("span",{className:a.metadata,"data-testid":r&&`${r}-metadata`,children:s})]})};try{m.displayName="MetaContent",m.__docgenInfo={description:"",displayName:"MetaContent",props:{item:{defaultValue:null,description:"",name:"item",required:!0,type:{name:"IMetaContentItem"}}}}}catch{}export{p as L,m as M,_ as N,a as l};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._inputInTable_tn20e_1{background-color:transparent;border-radius:inherit!important;height:var(--size);min-height:100%}._inputInTable_tn20e_1:not(:hover){border-color:transparent}._inputInTable_tn20e_1:not(:focus){box-shadow:none}._inputHover_tn20e_13{position:relative;border-color:var(--color-border-hover);z-index:2}._inputFocus_tn20e_18{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputError_tn20e_25,._inputWarning_tn20e_26{position:relative}._inputError_tn20e_25{z-index:2;border-color:var(--color-border-error);color:var(--color-text-error)!important;background-color:var(--color-background-error-muted)}._inputError_tn20e_25:hover{border-color:var(--color-border-error-hover)!important}._inputError_tn20e_25:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputWarning_tn20e_26{z-index:1;border-color:var(--color-border-warning);color:var(--color-text-warning)!important;background-color:var(--color-background-warning-muted)}._inputWarning_tn20e_26:hover{border-color:var(--color-border-warning-hover)!important}._inputWarning_tn20e_26:focus{position:relative;outline:none!important;border-color:var(--color-border-focus)!important;box-shadow:var(--shadow-focus);z-index:3}._inputDisabled_tn20e_61{pointer-events:none;background-color:var(--color-background-disabled);color:var(--color-text-muted);box-shadow:none}._hideScrollbars_tn20e_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbars_tn20e_67::-webkit-scrollbar{display:none}._header_tn20e_77 ._headerTitle_tn20e_77,._heading_tn20e_78 ._itemHeader_tn20e_78{transition:opacity .3s}._narrow_tn20e_81 ._header_tn20e_77 ._headerTitle_tn20e_77,._narrow_tn20e_81 ._heading_tn20e_78 ._itemHeader_tn20e_78{opacity:0}._stickyHeader_tn20e_85{position:sticky;top:0;background-color:var(--color-background);z-index:10}._itemHeader_tn20e_78{padding:var(--padding-xs) var(--padding);display:flex;align-items:flex-start}._itemHeader_tn20e_78 ._title_tn20e_96{margin:0;padding:0;flex-grow:1;min-width:0}._itemHeader_tn20e_78 ._name_tn20e_102{font-weight:400}._itemHeader_tn20e_78 ._iconTooltipMargin_tn20e_105{margin-left:var(--padding-xs)}._itemHeader_tn20e_78 ._bold_tn20e_108{font-weight:700}._header_tn20e_77{padding:var(--padding);display:flex;align-items:center;border-bottom:1px solid var(--color-border)}._toggleNarrow_tn20e_117{margin-right:16px;margin-left:-5px;color:#c8c8c8;transition:all .4s;display:flex;width:22px;justify-content:center}._toggleNarrow_tn20e_117:hover{color:var(--color-text-primary-hover)}._toggleNarrow_tn20e_117:active{color:var(--color-text-primary-active)}._narrow_tn20e_81 ._toggleNarrow_tn20e_117{transform:scaleX(-1)}._drag_tn20e_135{color:var(--color-text-faint);display:flex;align-items:center;justify-content:center;margin-right:var(--padding-xs);margin-left:calc(var(--padding-xs) * -1);margin-top:calc((var(--line-height) - var(--size-sm)) / 2);margin-bottom:calc((var(--line-height) - var(--size-sm)) / 2);cursor:move;height:var(--size-sm);width:var(--size-sm);flex-shrink:0}._drag_tn20e_135:hover{color:var(--color-text-primary-hover)}._drag_tn20e_135:active{color:var(--color-text-primary-active)}._list_tn20e_155{flex-shrink:0;background:var(--color-background)}._list_tn20e_155._bordered_tn20e_159:first-child,._list_tn20e_155._bordered_tn20e_159:first-child>:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}._list_tn20e_155._bordered_tn20e_159:last-child,._list_tn20e_155._bordered_tn20e_159:last-child>:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-bottom:0}._item_tn20e_78{color:inherit;display:block;transition:background-color .2s;position:relative;border-bottom:1px solid var(--color-border);background-color:var(--color-background-raised);transition:background .3s;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}._item_tn20e_78:not(._heading_tn20e_78):after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-top-left-radius:inherit;border-bottom-left-radius:inherit;transition:background .3s,width .3s}._item_tn20e_78._action_tn20e_192{cursor:pointer}._item_tn20e_78._action_tn20e_192:not(._active_tn20e_195):hover{background:var(--color-background-listitem-hover)}._item_tn20e_78._action_tn20e_192:not(._active_tn20e_195):hover:after{width:5px;background:#0000001a}._item_tn20e_78._indented_tn20e_202:after{width:3px;background:#0000001a}._item_tn20e_78._active_tn20e_195{cursor:default;position:relative;z-index:1;background:var(--color-background-listitem-active)}._item_tn20e_78._active_tn20e_195:after{background:var(--color-background-primary)!important}._item_tn20e_78._disabled_tn20e_215{color:var(--color-text-faint);pointer-events:none}._item_tn20e_78._heading_tn20e_78{color:var(--color-text-muted);background-color:var(--color-background-cardheader)}._item_tn20e_78._heading_tn20e_78._action_tn20e_192:hover{color:var(--color-text-primary-hover)}._item_tn20e_78 ._label_tn20e_226{margin-right:var(--padding-xs);flex-shrink:0;width:var(--size-sm);height:var(--size-sm);margin-top:calc(var(--line-height) / 2 - var(--size-sm) / 2);margin-bottom:calc(var(--line-height) / 2 - var(--size-sm) / 2);display:flex;align-items:center;justify-content:center}._item_tn20e_78 ._details_tn20e_237,._item_tn20e_78 ._metadata_tn20e_238{display:block;width:100%;font-weight:400}._item_tn20e_78 ._metadata_tn20e_238{color:var(--color-text-muted)}._item_tn20e_78 ._itemContent_tn20e_246{padding:0 var(--padding) var(--padding-sm);cursor:auto}._item_tn20e_78 ._itemContent_tn20e_246:empty{padding:inherit}._indentIcon_tn20e_253{color:var(--color-text-faint);flex-shrink:0;margin-right:var(--padding-xxs)}._expandIcon_tn20e_258{flex-shrink:0;position:relative;display:flex;height:var(--line-height);margin-right:var(--padding-xs)}._expandIcon_tn20e_258._expanded_tn20e_265 svg{transform:rotate(90deg)}._right_tn20e_268{margin-left:auto;display:flex;align-items:center;margin-top:calc((var(--line-height) - var(--size-sm)) / 2);margin-bottom:calc((var(--line-height) - var(--size-sm)) / 2);min-height:var(--size-sm)}._actions_tn20e_276{margin-left:var(--padding-xs);display:flex;align-items:center}._scrollableList_tn20e_281{height:100%;overflow-y:auto;scroll-behavior:smooth}._infiniteScrollContainer_tn20e_286{overflow:hidden!important}._hideScrollbar_tn20e_67{scrollbar-width:none;-ms-overflow-style:none}._hideScrollbar_tn20e_67::-webkit-scrollbar{display:none}._bordered_tn20e_159{box-shadow:inset 0 0 0 2px var(--color-background-primary);background:var(--color-background-listitem-active)}._noPointerEvents_tn20e_303{pointer-events:none}
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as h}from"./index-RfLt4OUa.js";import{T as X}from"./common-types-U65vzrrz.js";import{M as u,D as C}from"./dialog-hHTtMGls.js";import{B as o}from"./button-UQO14biP.js";import{P as Z}from"./popover-rJn7kxkX.js";import{I as Q}from"./input-fYKvBwPs.js";import{I as $}from"./input-group-R8LoqKRn.js";import{F as j}from"./field-jD6TclDQ.js";import{M as ee}from"./actions-Z1pyUd57.js";import{S as oe}from"./select-KWgree43.js";import{S as ne}from"./spacer-Yji9g2AW.js";import{T as le}from"./tooltip-dueTLnwA.js";import{M as k}from"./types-VB5zD18b.js";import"./index-VW3EWkuE.js";import"./portal-zPiHHKoC.js";import"./index-miLrID2P.js";import"./lodash-Bmg8FrMx.js";import"./heading-FcNTpGhR.js";import"./help-icon-D6ZGAbgL.js";import"./icon-_m67DAr0.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-Y9jOMJLd.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./types-5uVBABF4.js";import"./label-dla_bzHj.js";import"./badge-23Ty_zBt.js";import"./extends-dGVwEr9R.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./text-6KQ6ntOV.js";import"./select.input-zP5tW20f.js";const{useArgs:se}=__STORYBOOK_MODULE_ADDONS__,He={title:"Modals/Modal",component:u,args:{visible:!0,centered:!0,width:"300px",heading:"Are you sure?",content:e.jsx(e.Fragment,{children:"This will complete the transaction"}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Okay",colored:!0,onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),onClose:()=>{}},parameters:{docs:{story:{inline:!1,iframeHeight:400}}}},a=()=>{const[{visible:l,centered:r,...s},n]=se(),t=()=>{n({visible:!l})};return e.jsxs(e.Fragment,{children:[e.jsx(u,{visible:l,centered:r,children:e.jsx(C,{dialog:{...s,onClose:t}})}),e.jsx(o,{label:"Open Modal",onClick:t})]})},b=a.bind({}),i=a.bind({});i.args={centered:!0};const d=a.bind({});d.args={content:["This is a","new line!"]};const c=a.bind({});c.args={scroll:!0,content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const g=a.bind({});g.args={width:"100%",content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const p=a.bind({});p.args={contentPadding:0};const m=a.bind({});m.args={content:e.jsxs(e.Fragment,{children:[e.jsx(le,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(ne,{}),e.jsx(j,{label:"Custom Select",helpText:"Select an animal",children:e.jsx(oe,{name:"example",options:["Aardvarks","Kangaroos","Monkeys","Possums","Gorilla","Puma","Patagonian Mara","Tarsier","Koala","Panda","Red Panda","Impala","Tiger","Crocodile","Bat"],onChange:()=>{},value:"Monkeys",error:"Bad value"})}),e.jsx(j,{label:"Nested Menu",children:e.jsx(ee,{maxHeight:"240px",menu:{label:"Menu",trigger:X.DROP_DOWN_BUTTON,sections:[{type:k.MENU,menu:{trigger:"Text",label:"Children",sections:[...Array(100).keys()].map(()=>({type:"Option",label:Math.random().toString(36).substring(7),onClick:()=>{}}))}},...[...Array(100).keys()].map(()=>({type:k.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.jsx(Z,{content:e.jsxs($,{small:!0,children:[e.jsx(Q,{value:"Value",width:"150px",error:"Bad value"}),e.jsx(o,{colored:!0,label:"Save",onClick:()=>{}}),e.jsx(o,{label:"Cancel",onClick:()=>{}})]}),children:e.jsx(o,{colored:!0,label:"Toggle me",onClick:()=>{}})})]})};const M=()=>{const[l,r]=h.useState(!1),s=()=>{r(!0)},n=()=>{r(!1)},t=()=>{console.log("Submit action"),n()};return e.jsxs(e.Fragment,{children:[e.jsx(u,{visible:l,onEnter:()=>{console.log("Enter"),t()},onEscape:()=>{console.log("Escape"),n()},children:e.jsx(C,{dialog:{heading:"Test key handling",content:e.jsx(Q,{}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Done",colored:"red",onClick:t}),e.jsx(o,{label:"Cancel",onClick:n})]}),onClose:n}})}),e.jsx(o,{label:"Open Modal",onClick:s})]})},v=()=>{const[l,r]=h.useState(!1),s=()=>r(!l),[n,t]=h.useState(!1),x=()=>t(!n);return e.jsxs(e.Fragment,{children:[e.jsx(u,{visible:l,children:e.jsx(C,{dialog:{heading:"Modal 1",content:"Lorem ipsum dolor sit amet",footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Open modal 2",colored:!0,onClick:x}),e.jsx(u,{visible:n,children:e.jsx(C,{dialog:{heading:"Modal 2",content:"Lorem ipsum dolor sit amet",footer:e.jsx(o,{label:"Close",onClick:x}),onClose:x}})}),e.jsx(o,{label:"Close",onClick:s})]}),onClose:s}})}),e.jsx(o,{label:"Open modal 1",onClick:s})]})};var f,S,P;b.parameters={...b.parameters,docs:{...(f=b.parameters)==null?void 0:f.docs,source:{originalSource:`() => {
|
|
2
|
+
const [{
|
|
3
|
+
visible,
|
|
4
|
+
centered,
|
|
5
|
+
...dialogProps
|
|
6
|
+
}, updateArgs] = useArgs();
|
|
7
|
+
const toggleModal = () => {
|
|
8
|
+
updateArgs({
|
|
9
|
+
visible: !visible
|
|
10
|
+
});
|
|
11
|
+
};
|
|
12
|
+
return <>
|
|
13
|
+
<Modal visible={visible} centered={centered}>
|
|
14
|
+
<Dialog dialog={{
|
|
15
|
+
...dialogProps,
|
|
16
|
+
onClose: toggleModal
|
|
17
|
+
}} />
|
|
18
|
+
</Modal>
|
|
19
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
20
|
+
</>;
|
|
21
|
+
}`,...(P=(S=b.parameters)==null?void 0:S.docs)==null?void 0:P.source}}};var A,O,B;i.parameters={...i.parameters,docs:{...(A=i.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
|
|
22
|
+
const [{
|
|
23
|
+
visible,
|
|
24
|
+
centered,
|
|
25
|
+
...dialogProps
|
|
26
|
+
}, updateArgs] = useArgs();
|
|
27
|
+
const toggleModal = () => {
|
|
28
|
+
updateArgs({
|
|
29
|
+
visible: !visible
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
return <>
|
|
33
|
+
<Modal visible={visible} centered={centered}>
|
|
34
|
+
<Dialog dialog={{
|
|
35
|
+
...dialogProps,
|
|
36
|
+
onClose: toggleModal
|
|
37
|
+
}} />
|
|
38
|
+
</Modal>
|
|
39
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
40
|
+
</>;
|
|
41
|
+
}`,...(B=(O=i.parameters)==null?void 0:O.docs)==null?void 0:B.source}}};var D,T,V;d.parameters={...d.parameters,docs:{...(D=d.parameters)==null?void 0:D.docs,source:{originalSource:`() => {
|
|
42
|
+
const [{
|
|
43
|
+
visible,
|
|
44
|
+
centered,
|
|
45
|
+
...dialogProps
|
|
46
|
+
}, updateArgs] = useArgs();
|
|
47
|
+
const toggleModal = () => {
|
|
48
|
+
updateArgs({
|
|
49
|
+
visible: !visible
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
return <>
|
|
53
|
+
<Modal visible={visible} centered={centered}>
|
|
54
|
+
<Dialog dialog={{
|
|
55
|
+
...dialogProps,
|
|
56
|
+
onClose: toggleModal
|
|
57
|
+
}} />
|
|
58
|
+
</Modal>
|
|
59
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
60
|
+
</>;
|
|
61
|
+
}`,...(V=(T=d.parameters)==null?void 0:T.docs)==null?void 0:V.source}}};var y,E,F;c.parameters={...c.parameters,docs:{...(y=c.parameters)==null?void 0:y.docs,source:{originalSource:`() => {
|
|
62
|
+
const [{
|
|
63
|
+
visible,
|
|
64
|
+
centered,
|
|
65
|
+
...dialogProps
|
|
66
|
+
}, updateArgs] = useArgs();
|
|
67
|
+
const toggleModal = () => {
|
|
68
|
+
updateArgs({
|
|
69
|
+
visible: !visible
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
return <>
|
|
73
|
+
<Modal visible={visible} centered={centered}>
|
|
74
|
+
<Dialog dialog={{
|
|
75
|
+
...dialogProps,
|
|
76
|
+
onClose: toggleModal
|
|
77
|
+
}} />
|
|
78
|
+
</Modal>
|
|
79
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
80
|
+
</>;
|
|
81
|
+
}`,...(F=(E=c.parameters)==null?void 0:E.docs)==null?void 0:F.source}}};var _,L,N;g.parameters={...g.parameters,docs:{...(_=g.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
|
|
82
|
+
const [{
|
|
83
|
+
visible,
|
|
84
|
+
centered,
|
|
85
|
+
...dialogProps
|
|
86
|
+
}, updateArgs] = useArgs();
|
|
87
|
+
const toggleModal = () => {
|
|
88
|
+
updateArgs({
|
|
89
|
+
visible: !visible
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
return <>
|
|
93
|
+
<Modal visible={visible} centered={centered}>
|
|
94
|
+
<Dialog dialog={{
|
|
95
|
+
...dialogProps,
|
|
96
|
+
onClose: toggleModal
|
|
97
|
+
}} />
|
|
98
|
+
</Modal>
|
|
99
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
100
|
+
</>;
|
|
101
|
+
}`,...(N=(L=g.parameters)==null?void 0:L.docs)==null?void 0:N.source}}};var I,w,H;p.parameters={...p.parameters,docs:{...(I=p.parameters)==null?void 0:I.docs,source:{originalSource:`() => {
|
|
102
|
+
const [{
|
|
103
|
+
visible,
|
|
104
|
+
centered,
|
|
105
|
+
...dialogProps
|
|
106
|
+
}, updateArgs] = useArgs();
|
|
107
|
+
const toggleModal = () => {
|
|
108
|
+
updateArgs({
|
|
109
|
+
visible: !visible
|
|
110
|
+
});
|
|
111
|
+
};
|
|
112
|
+
return <>
|
|
113
|
+
<Modal visible={visible} centered={centered}>
|
|
114
|
+
<Dialog dialog={{
|
|
115
|
+
...dialogProps,
|
|
116
|
+
onClose: toggleModal
|
|
117
|
+
}} />
|
|
118
|
+
</Modal>
|
|
119
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
120
|
+
</>;
|
|
121
|
+
}`,...(H=(w=p.parameters)==null?void 0:w.docs)==null?void 0:H.source}}};var K,W,R;m.parameters={...m.parameters,docs:{...(K=m.parameters)==null?void 0:K.docs,source:{originalSource:`() => {
|
|
122
|
+
const [{
|
|
123
|
+
visible,
|
|
124
|
+
centered,
|
|
125
|
+
...dialogProps
|
|
126
|
+
}, updateArgs] = useArgs();
|
|
127
|
+
const toggleModal = () => {
|
|
128
|
+
updateArgs({
|
|
129
|
+
visible: !visible
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
return <>
|
|
133
|
+
<Modal visible={visible} centered={centered}>
|
|
134
|
+
<Dialog dialog={{
|
|
135
|
+
...dialogProps,
|
|
136
|
+
onClose: toggleModal
|
|
137
|
+
}} />
|
|
138
|
+
</Modal>
|
|
139
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
140
|
+
</>;
|
|
141
|
+
}`,...(R=(W=m.parameters)==null?void 0:W.docs)==null?void 0:R.source}}};var U,G,Y;M.parameters={...M.parameters,docs:{...(U=M.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
|
|
142
|
+
const [visible, setVisible] = useState(false);
|
|
143
|
+
const openModal = () => {
|
|
144
|
+
setVisible(true);
|
|
145
|
+
};
|
|
146
|
+
const closeModal = () => {
|
|
147
|
+
setVisible(false);
|
|
148
|
+
};
|
|
149
|
+
const handleSubmit = () => {
|
|
150
|
+
console.log('Submit action');
|
|
151
|
+
closeModal();
|
|
152
|
+
};
|
|
153
|
+
return <>
|
|
154
|
+
<Modal visible={visible} onEnter={() => {
|
|
155
|
+
console.log('Enter');
|
|
156
|
+
handleSubmit();
|
|
157
|
+
}} onEscape={() => {
|
|
158
|
+
console.log('Escape');
|
|
159
|
+
closeModal();
|
|
160
|
+
}}>
|
|
161
|
+
<Dialog dialog={{
|
|
162
|
+
heading: 'Test key handling',
|
|
163
|
+
content: <Input />,
|
|
164
|
+
footer: <>
|
|
165
|
+
<Button label="Done" colored="red" onClick={handleSubmit} />
|
|
166
|
+
<Button label="Cancel" onClick={closeModal} />
|
|
167
|
+
</>,
|
|
168
|
+
onClose: closeModal
|
|
169
|
+
}} />
|
|
170
|
+
</Modal>
|
|
171
|
+
<Button label="Open Modal" onClick={openModal} />
|
|
172
|
+
</>;
|
|
173
|
+
}`,...(Y=(G=M.parameters)==null?void 0:G.docs)==null?void 0:Y.source}}};var q,z,J;v.parameters={...v.parameters,docs:{...(q=v.parameters)==null?void 0:q.docs,source:{originalSource:`() => {
|
|
174
|
+
const [visible1, setVisible1] = useState(false);
|
|
175
|
+
const toggleVisible1 = () => setVisible1(!visible1);
|
|
176
|
+
const [visible2, setVisible2] = useState(false);
|
|
177
|
+
const toggleVisible2 = () => setVisible2(!visible2);
|
|
178
|
+
return <>
|
|
179
|
+
<Modal visible={visible1}>
|
|
180
|
+
<Dialog dialog={{
|
|
181
|
+
heading: 'Modal 1',
|
|
182
|
+
content: 'Lorem ipsum dolor sit amet',
|
|
183
|
+
footer: <>
|
|
184
|
+
<Button label="Open modal 2" colored onClick={toggleVisible2} />
|
|
185
|
+
<Modal visible={visible2}>
|
|
186
|
+
<Dialog dialog={{
|
|
187
|
+
heading: 'Modal 2',
|
|
188
|
+
content: 'Lorem ipsum dolor sit amet',
|
|
189
|
+
footer: <Button label="Close" onClick={toggleVisible2} />,
|
|
190
|
+
onClose: toggleVisible2
|
|
191
|
+
}} />
|
|
192
|
+
</Modal>
|
|
193
|
+
<Button label="Close" onClick={toggleVisible1} />
|
|
194
|
+
</>,
|
|
195
|
+
onClose: toggleVisible1
|
|
196
|
+
}} />
|
|
197
|
+
</Modal>
|
|
198
|
+
<Button label="Open modal 1" onClick={toggleVisible1} />
|
|
199
|
+
</>;
|
|
200
|
+
}`,...(J=(z=v.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};const Ke=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers","KeyHandle","MultipleModals"];export{i as Centered,b as Default,g as FullWidth,M as KeyHandle,d as LineBreak,v as MultipleModals,p as NoContentPadding,c as Scroll,m as WithPopoverLayers,Ke as __namedExportsOrder,He as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as S}from"./jsx-runtime-FsUICBgo.js";import{r as n}from"./index-RfLt4OUa.js";import{d as o}from"./index-VSx05S_2.js";import{K as Z,E as z}from"./select-KWgree43.js";import{l as Q}from"./lodash-Bmg8FrMx.js";import{I as Y}from"./input-fYKvBwPs.js";const $=14,ee=t=>o.isScientificStringNum(t)?t:o.roundToPrecision(t,$),te=t=>t?typeof t=="string"?t:Q.isArray(t)?t[0]:t.fieldName:"",h=({name:t,placeholder:p="",disabled:q=!1,error:y=!1,left:C=!1,small:T=!1,width:R="100%",value:c="",onChange:x=()=>{},onFocus:_=()=>{},onBlur:F=()=>{},tabIndex:O=0,testId:w,tooltip:D=null,warning:K=!1,validationCallback:g=()=>{},allowEmpty:j=!1,isInTable:A,groupOrder:B,enableCosmeticRounding:v=!0,enableDisplayRounding:f=!1,roundDisplayValue:b})=>{const l=n.useRef(null),[r,V]=n.useState(String(c)),[s,E]=n.useState(!1),[H,L]=n.useState(!0),i=te(t),M=e=>{const a=o.validateNumber(e);return j&&e===""||a.valid?{...a,valid:!0,errors:void 0}:a},{valid:d,errors:m}=M(r),N=m&&m.length?m[0]:null;n.useEffect(()=>{V(String(c))},[c,v,f]),n.useEffect(()=>{!s&&!d?g(i,N):g(i,null)},[s,d,y]);const I=e=>{if(d&&!H){const a={...e,target:{...e.target,value:String(r),name:i}};x(a)}},P=e=>{const a=e.target,{value:J}=a,X=o.cleanNumStr(J.replaceAll(" ","").replaceAll("|",""));V(X),L(!1)};n.useEffect(()=>{if(l&&(l!=null&&l.current)&&f&&s){const e=l.current;e&&setTimeout(()=>{const{length:a}=String(r);e.setSelectionRange(a,a)},0)}},[s]);const k=e=>{E(!0),_(e)},U=e=>{E(!1),I(e),F(e)},u=f&&!s?b?String(b(r)):o.roundToFixed(r,2):r,W=!!(u!=null&&u.endsWith("0")),G=v&&u&&!W&&d?ee(u):u;return S.jsx(Z,{handleKeys:[z.ENTER],onKeyEvent:(e,a)=>I(a),children:S.jsx(Y,{type:"text",name:i,testId:w,disabled:q,placeholder:p,value:G,onChange:P,onFocus:k,onBlur:U,error:!s&&(N||y),warning:K,right:!C,small:T,width:R,isInTable:A,groupOrder:B,tabIndex:O,tooltip:D,ref:l},i)})};try{h.displayName="NumberInput",h.__docgenInfo={description:"",displayName:"NumberInput",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string | { fieldName: string; }"}},placeholder:{defaultValue:{value:""},description:"",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},error:{defaultValue:{value:"false"},description:"",name:"error",required:!1,type:{name:"string | boolean"}},left:{defaultValue:{value:"false"},description:"",name:"left",required:!1,type:{name:"boolean"}},small:{defaultValue:{value:"false"},description:"",name:"small",required:!1,type:{name:"boolean"}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},value:{defaultValue:{value:""},description:"",name:"value",required:!1,type:{name:"TStringOrNumber"}},onChange:{defaultValue:{value:"() => {}"},description:"",name:"onChange",required:!1,type:{name:"((evt: ChangeEvent<HTMLInputElement>) => void)"}},onFocus:{defaultValue:{value:"() => {}"},description:"",name:"onFocus",required:!1,type:{name:"((evt: FocusEvent<HTMLInputElement, Element>) => void)"}},onBlur:{defaultValue:{value:"() => {}"},description:"",name:"onBlur",required:!1,type:{name:"((evt: FocusEvent<HTMLInputElement, Element>) => void)"}},tabIndex:{defaultValue:{value:"0"},description:"",name:"tabIndex",required:!1,type:{name:"number"}},testId:{defaultValue:null,description:"",name:"testId",required:!1,type:{name:"string"}},tooltip:{defaultValue:{value:"null"},description:"",name:"tooltip",required:!1,type:{name:"string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null"}},warning:{defaultValue:{value:"false"},description:"",name:"warning",required:!1,type:{name:"string | boolean"}},validationCallback:{defaultValue:{value:"() => {}"},description:"",name:"validationCallback",required:!1,type:{name:"((name: string | { fieldName: string; }, error: string | null) => void)"}},allowEmpty:{defaultValue:{value:"false"},description:"",name:"allowEmpty",required:!1,type:{name:"boolean"}},isInTable:{defaultValue:null,description:"",name:"isInTable",required:!1,type:{name:"boolean"}},groupOrder:{defaultValue:null,description:"",name:"groupOrder",required:!1,type:{name:"any"}},enableCosmeticRounding:{defaultValue:{value:"true"},description:"",name:"enableCosmeticRounding",required:!1,type:{name:"boolean"}},enableDisplayRounding:{defaultValue:{value:"false"},description:"",name:"enableDisplayRounding",required:!1,type:{name:"boolean"}},roundDisplayValue:{defaultValue:null,description:"",name:"roundDisplayValue",required:!1,type:{name:"((args: TStringNumberNull) => TStringNumberNull)"}}}}}catch{}export{h as N,ee as r};
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as d}from"./index-RfLt4OUa.js";import{d as Ae}from"./index-VSx05S_2.js";import{S as T}from"./spacer-Yji9g2AW.js";import{G as xe}from"./grid-u1mZpaML.js";import{F as y}from"./field-jD6TclDQ.js";import{T as H}from"./toggle-vKuY4G3w.js";import{N as u}from"./number-input-xqup0wHW.js";import{I as je}from"./input-group-R8LoqKRn.js";import{I as Re}from"./input-group-addon-BHVsW9mL.js";import{S as Te}from"./select-KWgree43.js";import{C as s}from"./card-0r8RRVk-.js";import{B as Ee}from"./button-UQO14biP.js";import{H as o}from"./heading-FcNTpGhR.js";import{T as Ne}from"./text-6KQ6ntOV.js";import{M as Me}from"./message-bbAE2zjv.js";import"./index-cCpkwrS5.js";import"./styled-components.browser.esm-qIipjd6c.js";import"./tslib.es6-OIsz3r9a.js";import"./index-VW3EWkuE.js";import"./label-dla_bzHj.js";import"./common-types-U65vzrrz.js";import"./help-icon-D6ZGAbgL.js";import"./tooltip-dueTLnwA.js";import"./index-miLrID2P.js";import"./icon-_m67DAr0.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-Y9jOMJLd.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./lodash-Bmg8FrMx.js";import"./input-fYKvBwPs.js";import"./types-5uVBABF4.js";import"./extends-dGVwEr9R.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./types-VB5zD18b.js";import"./actions-Z1pyUd57.js";import"./badge-23Ty_zBt.js";import"./select.input-zP5tW20f.js";import"./spinner-R8Il4aRe.js";const{useArgs:ye}=__STORYBOOK_MODULE_ADDONS__,In={title:"Forms/NumberInput",component:u,parameters:{canvas:{page:null}},args:{label:"Label"}},n=a=>{const[l,r]=ye(),j=i=>{r({value:i.target.value})};return e.jsx(u,{onChange:j,value:123,...a})},E=n.bind({}),g=n.bind({});g.args={small:!0};const c=n.bind({});c.args={width:"150px"};const p=n.bind({});p.args={left:!0};const m=n.bind({});m.args={disabled:!0};const h=n.bind({});h.args={allowEmpty:!0,value:""};const v=n.bind({});v.args={warning:"This input number is almost 100!",value:"99"};const C=n.bind({});C.args={error:"This is a error message"};const b=n.bind({});b.args={value:"123test"};const I=n.bind({});I.args={value:"123.123456789",enableDisplayRounding:!0};const x=n.bind({});x.args={value:"123.123456789",enableDisplayRounding:!0,roundDisplayValue:a=>Ae.roundToFixed(a,4)};const S=()=>e.jsxs(je,{small:!0,children:[e.jsx(u,{value:123}),e.jsx(Re,{children:"to"}),e.jsx(u,{value:123}),e.jsx(Te,{options:[{value:"units",label:"units"}],width:"auto",value:"units"})]}),f=()=>{const[a,l]=d.useState("123");return e.jsxs(xe,{columns:"1fr 1fr",gap:!0,children:[e.jsxs(s,{heading:e.jsx(o,{children:"Storage State (Redux)"}),children:[a,e.jsx(T,{}),e.jsx(Ee,{label:"Change value",onClick:()=>l(String(Math.floor(Math.random()*100)))})]}),e.jsx(s,{heading:e.jsx(o,{children:"NumberInput"}),children:e.jsx(u,{value:a,onChange:r=>{l(r.target.value)},error:Number(a)>=0?"":"Value must be positive"})})]})},A=()=>{const[a,l]=d.useState(!1),[r,j]=d.useState(!0),[i,N]=d.useState("0.6889763779527558"),[M,Se]=d.useState(""),fe=Number(i)*.3048;return e.jsxs(xe,{columns:"1fr 1fr",gap:!0,children:[e.jsxs(s,{heading:e.jsx(o,{children:"Settings"}),children:[e.jsx(y,{label:"Enable display rounding:",labelLeft:!0,labelWidth:200,children:e.jsx(H,{checked:a,onChange:t=>l(t.target.checked)})}),e.jsx(y,{label:"Enable cosmetic rounding:",labelLeft:!0,labelWidth:200,children:e.jsx(H,{checked:r,onChange:t=>j(t.target.checked)})})]}),e.jsxs(s,{heading:e.jsx(o,{children:"NumberInput (displayed in Meters)"}),children:[e.jsx(Ne,{faint:!0,children:"Cosmetic Rounding Test Cases: type 0.21 then return (compare with enableCosmeticRounding on and off)"}),e.jsx(T,{}),e.jsx(u,{name:"Example",value:fe,onChange:t=>{const R=String(Number(t.target.value)/.3048);N(R)},enableDisplayRounding:a,enableCosmeticRounding:r,error:Number(i)>=0?"":"Value must be positive",validationCallback:(t,R)=>{Se(R??"")}})]}),e.jsxs(s,{heading:e.jsx(o,{children:"Storage State / Redux (stored in Feet)"}),children:[i,e.jsx(T,{}),e.jsx(Ee,{label:"Change value",onClick:()=>N(String(Math.floor(Math.random()*100)))})]}),e.jsx(s,{heading:e.jsx(o,{children:"Test Validation Callback"}),children:M&&e.jsx(Me,{message:{content:M,icon:!0,type:"Error",visible:!0}})})]})};var k,D,F;E.parameters={...E.parameters,docs:{...(k=E.parameters)==null?void 0:k.docs,source:{originalSource:`args => {
|
|
2
|
+
const [_, updateArgs] = useArgs();
|
|
3
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
4
|
+
updateArgs({
|
|
5
|
+
value: evt.target.value
|
|
6
|
+
});
|
|
7
|
+
};
|
|
8
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
9
|
+
}`,...(F=(D=E.parameters)==null?void 0:D.docs)==null?void 0:F.source}}};var _,L,V;g.parameters={...g.parameters,docs:{...(_=g.parameters)==null?void 0:_.docs,source:{originalSource:`args => {
|
|
10
|
+
const [_, updateArgs] = useArgs();
|
|
11
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
12
|
+
updateArgs({
|
|
13
|
+
value: evt.target.value
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
17
|
+
}`,...(V=(L=g.parameters)==null?void 0:L.docs)==null?void 0:V.source}}};var B,G,W;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`args => {
|
|
18
|
+
const [_, updateArgs] = useArgs();
|
|
19
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
20
|
+
updateArgs({
|
|
21
|
+
value: evt.target.value
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
25
|
+
}`,...(W=(G=c.parameters)==null?void 0:G.docs)==null?void 0:W.source}}};var w,O,K;p.parameters={...p.parameters,docs:{...(w=p.parameters)==null?void 0:w.docs,source:{originalSource:`args => {
|
|
26
|
+
const [_, updateArgs] = useArgs();
|
|
27
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
28
|
+
updateArgs({
|
|
29
|
+
value: evt.target.value
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
33
|
+
}`,...(K=(O=p.parameters)==null?void 0:O.docs)==null?void 0:K.source}}};var U,Y,q;m.parameters={...m.parameters,docs:{...(U=m.parameters)==null?void 0:U.docs,source:{originalSource:`args => {
|
|
34
|
+
const [_, updateArgs] = useArgs();
|
|
35
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
36
|
+
updateArgs({
|
|
37
|
+
value: evt.target.value
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
41
|
+
}`,...(q=(Y=m.parameters)==null?void 0:Y.docs)==null?void 0:q.source}}};var z,J,P;h.parameters={...h.parameters,docs:{...(z=h.parameters)==null?void 0:z.docs,source:{originalSource:`args => {
|
|
42
|
+
const [_, updateArgs] = useArgs();
|
|
43
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
44
|
+
updateArgs({
|
|
45
|
+
value: evt.target.value
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
49
|
+
}`,...(P=(J=h.parameters)==null?void 0:J.docs)==null?void 0:P.source}}};var Q,X,Z;v.parameters={...v.parameters,docs:{...(Q=v.parameters)==null?void 0:Q.docs,source:{originalSource:`args => {
|
|
50
|
+
const [_, updateArgs] = useArgs();
|
|
51
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
52
|
+
updateArgs({
|
|
53
|
+
value: evt.target.value
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
57
|
+
}`,...(Z=(X=v.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var $,ee,ne;C.parameters={...C.parameters,docs:{...($=C.parameters)==null?void 0:$.docs,source:{originalSource:`args => {
|
|
58
|
+
const [_, updateArgs] = useArgs();
|
|
59
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
60
|
+
updateArgs({
|
|
61
|
+
value: evt.target.value
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
65
|
+
}`,...(ne=(ee=C.parameters)==null?void 0:ee.docs)==null?void 0:ne.source}}};var ae,re,te;b.parameters={...b.parameters,docs:{...(ae=b.parameters)==null?void 0:ae.docs,source:{originalSource:`args => {
|
|
66
|
+
const [_, updateArgs] = useArgs();
|
|
67
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
68
|
+
updateArgs({
|
|
69
|
+
value: evt.target.value
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
73
|
+
}`,...(te=(re=b.parameters)==null?void 0:re.docs)==null?void 0:te.source}}};var se,oe,ue;I.parameters={...I.parameters,docs:{...(se=I.parameters)==null?void 0:se.docs,source:{originalSource:`args => {
|
|
74
|
+
const [_, updateArgs] = useArgs();
|
|
75
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
76
|
+
updateArgs({
|
|
77
|
+
value: evt.target.value
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
81
|
+
}`,...(ue=(oe=I.parameters)==null?void 0:oe.docs)==null?void 0:ue.source}}};var le,ie,de;x.parameters={...x.parameters,docs:{...(le=x.parameters)==null?void 0:le.docs,source:{originalSource:`args => {
|
|
82
|
+
const [_, updateArgs] = useArgs();
|
|
83
|
+
const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
|
|
84
|
+
updateArgs({
|
|
85
|
+
value: evt.target.value
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
return <NumberInput onChange={handleChange} value={123} {...args} />;
|
|
89
|
+
}`,...(de=(ie=x.parameters)==null?void 0:ie.docs)==null?void 0:de.source}}};var ge,ce,pe;S.parameters={...S.parameters,docs:{...(ge=S.parameters)==null?void 0:ge.docs,source:{originalSource:`() => <InputGroup small>
|
|
90
|
+
<NumberInput value={123} />
|
|
91
|
+
<InputGroupAddon>to</InputGroupAddon>
|
|
92
|
+
<NumberInput value={123} />
|
|
93
|
+
<Select options={[{
|
|
94
|
+
value: 'units',
|
|
95
|
+
label: 'units'
|
|
96
|
+
}]} width="auto" value="units" />
|
|
97
|
+
</InputGroup>`,...(pe=(ce=S.parameters)==null?void 0:ce.docs)==null?void 0:pe.source}}};var me,he,ve;f.parameters={...f.parameters,docs:{...(me=f.parameters)==null?void 0:me.docs,source:{originalSource:`() => {
|
|
98
|
+
const [value, setValue] = useState('123');
|
|
99
|
+
return <Grid columns="1fr 1fr" gap>
|
|
100
|
+
<Card heading={<Heading>Storage State (Redux)</Heading>}>
|
|
101
|
+
{value}
|
|
102
|
+
<Spacer />
|
|
103
|
+
<Button label="Change value" onClick={() => setValue(String(Math.floor(Math.random() * 100)))} />
|
|
104
|
+
</Card>
|
|
105
|
+
<Card heading={<Heading>NumberInput</Heading>}>
|
|
106
|
+
<NumberInput value={value} onChange={evt => {
|
|
107
|
+
setValue(evt.target.value);
|
|
108
|
+
}} error={Number(value) >= 0 ? '' : 'Value must be positive'} />
|
|
109
|
+
</Card>
|
|
110
|
+
</Grid>;
|
|
111
|
+
}`,...(ve=(he=f.parameters)==null?void 0:he.docs)==null?void 0:ve.source}}};var Ce,be,Ie;A.parameters={...A.parameters,docs:{...(Ce=A.parameters)==null?void 0:Ce.docs,source:{originalSource:`() => {
|
|
112
|
+
const [enableDisplayRounding, setEnableDisplayRounding] = useState(false);
|
|
113
|
+
const [enableCosmeticRounding, setEnableCosmeticRounding] = useState(true);
|
|
114
|
+
const [valueInFeet, setValueInFeet] = useState('0.6889763779527558');
|
|
115
|
+
const [callBackError, setCallBackError] = useState('');
|
|
116
|
+
const valueInMeters = Number(valueInFeet) * 0.3048;
|
|
117
|
+
return <Grid columns="1fr 1fr" gap>
|
|
118
|
+
<Card heading={<Heading>Settings</Heading>}>
|
|
119
|
+
<Field label="Enable display rounding:" labelLeft labelWidth={200}>
|
|
120
|
+
<Toggle checked={enableDisplayRounding} onChange={evt => setEnableDisplayRounding(evt.target.checked)} />
|
|
121
|
+
</Field>
|
|
122
|
+
<Field label="Enable cosmetic rounding:" labelLeft labelWidth={200}>
|
|
123
|
+
<Toggle checked={enableCosmeticRounding} onChange={evt => setEnableCosmeticRounding(evt.target.checked)} />
|
|
124
|
+
</Field>
|
|
125
|
+
</Card>
|
|
126
|
+
<Card heading={<Heading>NumberInput (displayed in Meters)</Heading>}>
|
|
127
|
+
<Text faint>
|
|
128
|
+
Cosmetic Rounding Test Cases: type 0.21 then return (compare with
|
|
129
|
+
enableCosmeticRounding on and off)
|
|
130
|
+
</Text>
|
|
131
|
+
<Spacer />
|
|
132
|
+
<NumberInput name="Example" value={valueInMeters} onChange={evt => {
|
|
133
|
+
const nextValueInFeet = String(Number(evt.target.value) / 0.3048);
|
|
134
|
+
setValueInFeet(nextValueInFeet); // convert back to ft
|
|
135
|
+
}} enableDisplayRounding={enableDisplayRounding} enableCosmeticRounding={enableCosmeticRounding} error={Number(valueInFeet) >= 0 ? '' : 'Value must be positive'} validationCallback={(name, error) => {
|
|
136
|
+
setCallBackError(error ?? '');
|
|
137
|
+
}} />
|
|
138
|
+
</Card>
|
|
139
|
+
<Card heading={<Heading>Storage State / Redux (stored in Feet)</Heading>}>
|
|
140
|
+
{valueInFeet}
|
|
141
|
+
<Spacer />
|
|
142
|
+
<Button label="Change value" onClick={() => setValueInFeet(String(Math.floor(Math.random() * 100)))} />
|
|
143
|
+
</Card>
|
|
144
|
+
<Card heading={<Heading>Test Validation Callback</Heading>}>
|
|
145
|
+
{callBackError && <Message message={{
|
|
146
|
+
content: callBackError,
|
|
147
|
+
icon: true,
|
|
148
|
+
type: 'Error',
|
|
149
|
+
visible: true
|
|
150
|
+
}} />}
|
|
151
|
+
</Card>
|
|
152
|
+
</Grid>;
|
|
153
|
+
}`,...(Ie=(be=A.parameters)==null?void 0:be.docs)==null?void 0:Ie.source}}};const xn=["Default","Small","Width","Left","Disabled","AllowEmpty","Warning","Error","BadInput","WithDisplayRounding","WithCustomDisplayRounding","TestInputGroup","ManagedTestCase","DemoCosmeticRounding"];export{h as AllowEmpty,b as BadInput,E as Default,A as DemoCosmeticRounding,m as Disabled,C as Error,p as Left,f as ManagedTestCase,g as Small,S as TestInputGroup,v as Warning,c as Width,x as WithCustomDisplayRounding,I as WithDisplayRounding,xn as __namedExportsOrder,In as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function a(r,o){if(r==null)return{};var n={},i=Object.keys(r),e,t;for(t=0;t<i.length;t++)e=i[t],!(o.indexOf(e)>=0)&&(n[e]=r[e]);return n}export{a as _};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{j as n}from"./jsx-runtime-FsUICBgo.js";import{T as I}from"./common-types-U65vzrrz.js";import{M as N}from"./actions-Z1pyUd57.js";import{c as A}from"./index-VW3EWkuE.js";import{C as E}from"./check-box-Q2GsbR79.js";import{D as f}from"./divider-RwW2f_N0.js";import"./index-RfLt4OUa.js";import"./lodash-Bmg8FrMx.js";import"./disabled-context-urNQThQz.js";import"./button-UQO14biP.js";import"./spinner-R8Il4aRe.js";import"./icon-_m67DAr0.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-Y9jOMJLd.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./tooltip-dueTLnwA.js";import"./index-miLrID2P.js";import"./types-VB5zD18b.js";import"./types-5uVBABF4.js";import"./badge-23Ty_zBt.js";import"./help-icon-D6ZGAbgL.js";import"./text-6KQ6ntOV.js";const V="_menu_12x4u_1",T="_header_12x4u_11",q="_item_12x4u_27",w="_heading_12x4u_32",u={menu:V,header:T,item:q,heading:w},g=({option:e,onChange:r})=>{const{key:o,label:i,selected:a}=e;return n.jsx("div",{className:u.item,children:n.jsx(E,{label:i,noMargin:!0,checked:a,onChange:r})},o)};try{g.displayName="Option",g.__docgenInfo={description:"",displayName:"Option",props:{option:{defaultValue:null,description:"",name:"option",required:!0,type:{name:"{ key?: string | undefined; label?: string | null | undefined; selected?: boolean | undefined; }"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(evt: ChangeEvent<HTMLInputElement>) => void"}}}}}catch{}const _=({label:e})=>n.jsx("div",{className:u.heading,children:e});try{_.displayName="Heading",_.__docgenInfo={description:"",displayName:"Heading",props:{label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}}}}}catch{}var h=(e=>(e.HEADING="Heading",e.DIVIDER="Divider",e.DEFAULT="Default",e))(h||{});const y=({options:e,onChangeOptions:r,showHeader:o,maxHeight:i})=>n.jsxs("div",{className:A("menu",u.menu),style:{maxHeight:i},children:[o&&n.jsxs(n.Fragment,{children:[n.jsxs("div",{className:u.header,children:[n.jsx("a",{onClick:a=>{const s=e.map(t=>({...t,selected:!0}));r(a,s)},children:"All"}),n.jsx("a",{onClick:a=>{const s=e.map(t=>({...t,selected:!1}));r(a,s)},children:"Clear"}),n.jsx("a",{onClick:a=>{const s=e.map(t=>({...t,selected:!t.selected}));r(a,s)},children:"Invert"})]}),n.jsx(f,{margin:0})]}),e.map((a,s)=>{switch(a.type){case h.HEADING:return n.jsx(_,{label:a.label},s);case h.DIVIDER:return n.jsx(f,{margin:0},s);default:return n.jsx(g,{option:a,onChange:t=>{const{value:m}=a,H=e.map(d=>d.value!==m?d:{...d,selected:!d.selected});r(t,H)}},s)}})]});try{y.displayName="Layer",y.__docgenInfo={description:"",displayName:"Layer",props:{options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"IOptionType[]"}},onChangeOptions:{defaultValue:null,description:"",name:"onChangeOptions",required:!0,type:{name:"(evt: MouseEvent<HTMLAnchorElement, MouseEvent>, options: IOptionType[]) => void"}},showHeader:{defaultValue:null,description:"",name:"showHeader",required:!1,type:{name:"boolean"}},maxHeight:{defaultValue:null,description:"",name:"maxHeight",required:!1,type:{name:"TStringOrNumber"}}}}}catch{}const c=({name:e,label:r,options:o,onChange:i,showHeader:a=!0,maxHeight:s="40vh"})=>n.jsx(N,{menu:{label:r,trigger:I.DROP_DOWN_BUTTON,possiblePlacements:["top-start","bottom-start"],sections:n.jsx(y,{options:o,onChangeOptions:(t,m)=>{t.stopPropagation(),t.target.name=e,t.target.value=m,i(t)},showHeader:a,maxHeight:s})}});try{c.displayName="OptionDropdown",c.__docgenInfo={description:"",displayName:"OptionDropdown",props:{name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string"}},options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"IOptionType[]"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(evt: ChangeEvent<HTMLInputElement & { name?: string | undefined; value: IOptionType[]; }>) => void"}},showHeader:{defaultValue:{value:"true"},description:"",name:"showHeader",required:!1,type:{name:"boolean"}},maxHeight:{defaultValue:{value:"40vh"},description:"",name:"maxHeight",required:!1,type:{name:"string"}}}}}catch{}const{useArgs:M}=__STORYBOOK_MODULE_ADDONS__,k=[{label:"Animals",type:"Heading"},{type:"Divider"},{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas"}],oe={title:"Forms/OptionDropdown",component:c,args:{label:"Label",options:k}},j=e=>{const[r,o]=M(),i=a=>{o({options:a.target.value})};return n.jsx(c,{...e,onChange:i})},p=j.bind({}),l=j.bind({});l.args={options:[...Array(50)].map((e,r)=>({label:`Item #${r}`,value:r}))};var v,x,b;p.parameters={...p.parameters,docs:{...(v=p.parameters)==null?void 0:v.docs,source:{originalSource:`args => {
|
|
2
|
+
const [_, updateArgs] = useArgs();
|
|
3
|
+
const handleChange = (evt: any) => {
|
|
4
|
+
updateArgs({
|
|
5
|
+
options: evt.target.value
|
|
6
|
+
});
|
|
7
|
+
};
|
|
8
|
+
return <OptionDropdown
|
|
9
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
10
|
+
{...args} onChange={handleChange} />;
|
|
11
|
+
}`,...(b=(x=p.parameters)==null?void 0:x.docs)==null?void 0:b.source}}};var O,D,C;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`args => {
|
|
12
|
+
const [_, updateArgs] = useArgs();
|
|
13
|
+
const handleChange = (evt: any) => {
|
|
14
|
+
updateArgs({
|
|
15
|
+
options: evt.target.value
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
return <OptionDropdown
|
|
19
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
20
|
+
{...args} onChange={handleChange} />;
|
|
21
|
+
}`,...(C=(D=l.parameters)==null?void 0:D.docs)==null?void 0:C.source}}};const ie=["Default","ScrollOverflow"];export{p as Default,l as ScrollOverflow,ie as __namedExportsOrder,oe as default};
|
package/dist/storybook/assets/{padding-and-spacing-J_Zb8SJm.js → padding-and-spacing-dUA1CCP8.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r}from"./index-RhTUHV_k.js";import{useMDXComponents as t}from"./index-4YXVTraW.js";import"./index-RfLt4OUa.js";import"./iframe-oMAlwWd9.js";import"../sb-preview/runtime.js";import"./index-miLrID2P.js";import"./extends-dGVwEr9R.js";import"./assertThisInitialized-4q6YPdh3.js";import"./inheritsLoose-Y9jOMJLd.js";import"./index-R5dkQuFe.js";import"./index-PPLHz8o0.js";function i(n){const s=Object.assign({h1:"h1",h2:"h2",p:"p",ul:"ul",li:"li",strong:"strong",code:"code"},t(),n.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Padding, Margin & Size"}),`
|
|
2
2
|
`,e.jsx(s.h1,{id:"padding-margin--size",children:"Padding, Margin & Size"}),`
|
|
3
3
|
`,e.jsx(s.h2,{id:"padding--margin",children:"Padding & Margin"}),`
|
|
4
4
|
`,e.jsx(s.p,{children:"There are standard CSS spacing variables for padding and margin."}),`
|
|
@@ -16,4 +16,4 @@ import{j as e}from"./jsx-runtime-FsUICBgo.js";import{M as r}from"./index-_waogfz
|
|
|
16
16
|
`,e.jsxs(s.li,{children:[e.jsx(s.code,{children:"var(--size)"})," is the default size for buttons & inputs."]}),`
|
|
17
17
|
`,e.jsxs(s.li,{children:[e.jsx(s.code,{children:"var(--size-sm)"})," is for small buttons & inputs."]}),`
|
|
18
18
|
`,e.jsxs(s.li,{children:[e.jsx(s.code,{children:"var(--size-xs)"})," is for checkboxes, toggles & radios."]}),`
|
|
19
|
-
`]})]})}function
|
|
19
|
+
`]})]})}function b(n={}){const{wrapper:s}=Object.assign({},t(),n.components);return s?e.jsx(s,Object.assign({},n,{children:e.jsx(i,n)})):i(n)}export{b as default};
|