@oliasoft-open-source/react-ui-library 4.7.3 → 4.8.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/dist/assets/{index-D5kcnHmD.js → index-Csdt18_R.js} +1 -9
- package/dist/global.css +4 -1
- package/dist/index.d.ts +16 -6
- package/dist/index.html +1 -1
- package/dist/index.js +121 -158
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/Color-KGDBMAHA-BS-rAnbo.js +1 -0
- package/dist/storybook/assets/DocsRenderer-PKQXORMH-DZ7r3cmw.js +1 -0
- package/dist/storybook/assets/{accordion-6ouB0WTt.js → accordion-BiuI_LCA.js} +1 -1
- package/dist/storybook/assets/{accordion.stories-DlFZNmdv.js → accordion.stories-CKrpJWRn.js} +2 -2
- package/dist/storybook/assets/{actions-Cu_0szZ4.js → actions-CHgr8eL8.js} +1 -1
- package/dist/storybook/assets/{actions.stories-SCPuAp0T.js → actions.stories-CCDxFKFk.js} +1 -1
- package/dist/storybook/assets/{afe.stories-G3SzS3sg.js → afe.stories-80-X2oCf.js} +2 -2
- package/dist/storybook/assets/{badge.stories-DGYA6_1I.js → badge.stories-D5DA-vxC.js} +1 -1
- package/dist/storybook/assets/{blowout.stories-P0LHuXSY.js → blowout.stories-ES-Fuaqn.js} +1 -1
- package/dist/storybook/assets/{button-_0DiND6h.js → button-VxhoNhrV.js} +1 -1
- package/dist/storybook/assets/{button-group-BYiHMljF.js → button-group-CwJdFo2z.js} +1 -1
- package/dist/storybook/assets/{button-group.stories-Bz6NHaeB.js → button-group.stories-DU5k5qCY.js} +1 -1
- package/dist/storybook/assets/{button.stories-vVBGddVf.js → button.stories-DVtec2Eo.js} +2 -2
- package/dist/storybook/assets/{buttons-and-links-B6aQa-f5.js → buttons-and-links-sTGnmj6h.js} +2 -2
- package/dist/storybook/assets/{card.stories-DIlqxO94.js → card.stories-CsTB0DuM.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-0T--WlaD.js → casing-loads.stories-Do3mZuX2.js} +2 -2
- package/dist/storybook/assets/{cell.stories-C5Tkxyfr.js → cell.stories-B0YsumDa.js} +2 -2
- package/dist/storybook/assets/{check-box-DkdQxC5c.js → check-box-BtCGePRy.js} +1 -1
- package/dist/storybook/assets/check-box.stories-B6vW-2Fd.js +126 -0
- package/dist/storybook/assets/{chunk-HLWAVYOI-dB_9CZG8.js → chunk-HLWAVYOI-BqK-R5cR.js} +1 -1
- package/dist/storybook/assets/color-Cvx86PKp.js +25 -0
- package/dist/storybook/assets/{column.stories-C1Sxwh4f.js → column.stories-BxfR9Tla.js} +1 -1
- package/dist/storybook/assets/dialog-Di8hNunM.js +1 -0
- package/dist/storybook/assets/{drawer-vbDFqa4U.js → drawer-BhuWxI7V.js} +1 -1
- package/dist/storybook/assets/{drawer.stories-CmbGsKmS.js → drawer.stories-B-PsNJJ6.js} +4 -4
- package/dist/storybook/assets/{empty.stories-iHPKKy4z.js → empty.stories-BVYXwvpa.js} +1 -1
- package/dist/storybook/assets/{field-DwLk_uWj.js → field-HrLaMLbx.js} +1 -1
- package/dist/storybook/assets/{field.stories-s-0LQVbp.js → field.stories-B9p9nBgY.js} +1 -1
- package/dist/storybook/assets/{file-button.stories-C90kcfbw.js → file-button.stories-FOaiNPt-.js} +1 -1
- package/dist/storybook/assets/{file-input-C_2w1dKj.js → file-input-BpMtsZ2S.js} +1 -1
- package/dist/storybook/assets/{file-input.stories-BEsZox6U.js → file-input.stories-Jrdw5k-s.js} +1 -1
- package/dist/storybook/assets/{flex.stories-D-QN0gkk.js → flex.stories-BEXf0VqI.js} +1 -1
- package/dist/storybook/assets/footer.stories-CMN_mVki.js +3 -0
- package/dist/storybook/assets/form.stories-C1Qx3M_1.js +49 -0
- package/dist/storybook/assets/formation.stories-CCJYaUpG.js +74 -0
- package/dist/storybook/assets/{heading-DkSFysAb.js → heading-CRNoBc7q.js} +1 -1
- package/dist/storybook/assets/{heading.stories-Dtq7LNlB.js → heading.stories-DahFxeiX.js} +1 -1
- package/dist/storybook/assets/{help-icon-LfPZiYla.js → help-icon-Buhx5nl6.js} +1 -1
- package/dist/storybook/assets/{help-icon.stories-Dh2ylnGq.js → help-icon.stories-DbmZ1fgP.js} +1 -1
- package/dist/storybook/assets/icon-BSFY3vDO.js +8 -0
- package/dist/storybook/assets/{icon.stories-B-tKaIKA.js → icon.stories-C1hZXIMX.js} +1 -1
- package/dist/storybook/assets/iframe-CUVhB5TR.js +2 -0
- package/dist/storybook/assets/{index-ccPuy0l1.js → index-B8zF6D3V.js} +8 -8
- package/dist/storybook/assets/index-Be0hXiyp.js +179 -0
- package/dist/storybook/assets/index-CF7H4eMJ.js +28 -0
- package/dist/storybook/assets/index-omjWi7I7.js +1 -0
- package/dist/storybook/assets/{index.es-D2piFfFj.js → index.es-DazXb-ul.js} +4 -4
- package/dist/storybook/assets/inheritsLoose-DP0QEDDI.js +1 -0
- package/dist/storybook/assets/{input-D97ganXq.js → input-BW9trNAW.js} +1 -1
- package/dist/storybook/assets/{input-group.stories-BcoORZ9x.js → input-group.stories-44quIZTV.js} +2 -2
- package/dist/storybook/assets/{input-validation-CLVu4gtl.js → input-validation-BREYBXzB.js} +2 -2
- package/dist/storybook/assets/{input.stories-BHdUwYqV.js → input.stories-BruLeJ44.js} +1 -1
- package/dist/storybook/assets/{inputs-qWlLPYX_.js → inputs-DkxT6vDD.js} +2 -2
- package/dist/storybook/assets/{label-tWjEmTQJ.js → label-CqmyC9he.js} +1 -1
- package/dist/storybook/assets/{label.stories-BTA8N7tD.js → label.stories-C0AO5F1a.js} +1 -1
- package/dist/storybook/assets/layout-forms-Y0Chz5wF.js +16 -0
- package/dist/storybook/assets/{layout-general-Dn1nlXYw.js → layout-general-CRJUCd3s.js} +2 -2
- package/dist/storybook/assets/{list-BpVed6Pw.js → list-yVTOdmpX.js} +1 -1
- package/dist/storybook/assets/{list.stories-CiT9J_FH.js → list.stories-ChqQXY5M.js} +2 -2
- package/dist/storybook/assets/{list.stories-data-CnVYk3eo.js → list.stories-data-Iq66w9oH.js} +1 -1
- package/dist/storybook/assets/{loader.stories-BKBFctQ1.js → loader.stories-DM7ZJBgz.js} +1 -1
- package/dist/storybook/assets/menu.stories-Dozt6Npk.js +84 -0
- package/dist/storybook/assets/message-BYzRg8Ae.js +1 -0
- package/dist/storybook/assets/{message.stories-C8YRT7nL.js → message.stories-K3bQ-5bJ.js} +1 -1
- package/dist/storybook/assets/{meta-content-Djgg-tiF.js → meta-content-cbHGvPJ7.js} +1 -1
- package/dist/storybook/assets/modal.stories-BX49dKIM.js +220 -0
- package/dist/storybook/assets/{number-input-B-Nmya5O.js → number-input-CD-fbjVQ.js} +1 -1
- package/dist/storybook/assets/number-input.stories-h1PlFB_G.js +105 -0
- package/dist/storybook/assets/{option-dropdown.stories-COGmMWEl.js → option-dropdown.stories-CoLsSS95.js} +1 -1
- package/dist/storybook/assets/{padding-and-spacing-BNiScrzg.js → padding-and-spacing-DYx_u7EA.js} +2 -2
- package/dist/storybook/assets/{page.stories-BB3g1zwB.js → page.stories-Cse3cMsO.js} +1 -1
- package/dist/storybook/assets/{pagination-DSQeMPG_.js → pagination-iSMIbR33.js} +1 -1
- package/dist/storybook/assets/pagination.stories-BUPaZD5R.js +59 -0
- package/dist/storybook/assets/{pop-confirm.stories-Cr_ZBbLn.js → pop-confirm.stories-Dhid1FK8.js} +1 -1
- package/dist/storybook/assets/popover-CzZdWNnB.js +1 -0
- package/dist/storybook/assets/popover.stories-Duemqiqp.js +10 -0
- package/dist/storybook/assets/{preview-DhMlVLsE.js → preview-B2Xzz4-3.js} +2 -2
- package/dist/storybook/assets/preview-DLBQXbKW.js +1 -0
- package/dist/storybook/assets/preview-kt6m1zZo.js +2 -0
- package/dist/storybook/assets/projects.stories-DU-QlBa6.js +47 -0
- package/dist/storybook/assets/{radio-button-BD7pi0ao.js → radio-button-YBwYcMaM.js} +1 -1
- package/dist/storybook/assets/radio-button.stories-8QEKlNvO.js +71 -0
- package/dist/storybook/assets/react-router-dom-Ck2Y_Fzc.js +8 -0
- package/dist/storybook/assets/{reservoirs.stories-kxVBoa7Y.js → reservoirs.stories-aSZ9r1Pu.js} +2 -2
- package/dist/storybook/assets/{rich-text-input.stories-C5pcIbSa.js → rich-text-input.stories-CsFyrKRA.js} +3 -3
- package/dist/storybook/assets/{row.stories-ATsrjumb.js → row.stories-ZCrMoTuY.js} +2 -2
- package/dist/storybook/assets/select-C8iu4-uz.js +40 -0
- package/dist/storybook/assets/select.stories-DbgjgsiX.js +579 -0
- package/dist/storybook/assets/{side-bar-WsK6pkmj.js → side-bar-CKbHPgIV.js} +1 -1
- package/dist/storybook/assets/{side-bar.stories-Bu2q_b_w.js → side-bar.stories-MUj_dj1F.js} +1 -1
- package/dist/storybook/assets/{site.stories-Yh4uNi3Q.js → site.stories-Ci4g5W2A.js} +2 -2
- package/dist/storybook/assets/{slider-CxVlS0fh.js → slider-DAramr8j.js} +4 -4
- package/dist/storybook/assets/{slider.stories-_wS70xsm.js → slider.stories-Cd0rLfHP.js} +2 -2
- package/dist/storybook/assets/{smart-upload-modal.stories-DDlO9y2j.js → smart-upload-modal.stories-DgnJ79fa.js} +1 -1
- package/dist/storybook/assets/{spacer.stories-B3LrTr7b.js → spacer.stories-CHEZdgDM.js} +1 -1
- package/dist/storybook/assets/{table-DPvzYjoq.js → table-ZQD4ELIM.js} +1 -1
- package/dist/storybook/assets/{table.stories-BGQ1O9nw.js → table.stories-DGedoAir.js} +2 -2
- package/dist/storybook/assets/{table.stories-data-2STKbgzG.js → table.stories-data-CR9VpXHs.js} +1 -1
- package/dist/storybook/assets/text-link.stories-BQAkVO-W.js +14 -0
- package/dist/storybook/assets/{textarea-DOJDK8hI.js → textarea-BV7xWEdt.js} +1 -1
- package/dist/storybook/assets/{textarea.stories-CKm5MlQF.js → textarea.stories-aRLEoDHg.js} +1 -1
- package/dist/storybook/assets/{title.stories-CVRTXggL.js → title.stories-jQBBSflc.js} +2 -2
- package/dist/storybook/assets/toaster-BNO0suPv.js +1 -0
- package/dist/storybook/assets/toaster.stories-CAqrDYpd.js +89 -0
- package/dist/storybook/assets/{toggle-t1iTuSL7.js → toggle-CBpNgTrm.js} +1 -1
- package/dist/storybook/assets/toggle.stories-t0T4HV1D.js +141 -0
- package/dist/storybook/assets/{tooltip-C_E_6ym5.js → tooltip-1V7clEnw.js} +1 -1
- package/dist/storybook/assets/{tooltip.stories-C70ADjjJ.js → tooltip.stories-1YexWg6N.js} +1 -1
- package/dist/storybook/assets/{tooltip.test-case.stories-BtrJUImB.js → tooltip.test-case.stories-i9YQqba1.js} +1 -1
- package/dist/storybook/assets/{top-bar-R-CjhJ21.js → top-bar-C_tn2Pc5.js} +1 -1
- package/dist/storybook/assets/top-bar.stories-B2a-RgK-.js +21 -0
- package/dist/storybook/assets/{top-bar.testcase.stories-ZPaSRyIh.js → top-bar.testcase.stories-DoPEAMYc.js} +1 -1
- package/dist/storybook/assets/{tree.stories-Ghxps-dL.js → tree.stories-6UHASEZu.js} +1 -1
- package/dist/storybook/assets/{unit-input.stories-Bqt0CdF7.js → unit-input.stories-C7XlUSaC.js} +1 -1
- package/dist/storybook/assets/unit-table.stories-BJbxGp7Y.js +150 -0
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.html +6 -2
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/sb-addons/interactions-2/manager-bundle.js +233 -0
- package/dist/storybook/sb-addons/storybook-dark-mode-esm-preset-3/manager-bundle.js.LEGAL.txt +0 -0
- package/package.json +1 -1
- package/dist/404.html +0 -1
- package/dist/storybook/assets/Color-KGDBMAHA-RK4YYQs0.js +0 -1
- package/dist/storybook/assets/DocsRenderer-PKQXORMH-B0ryFlHH.js +0 -1
- package/dist/storybook/assets/check-box.stories-D8C12IQo.js +0 -102
- package/dist/storybook/assets/color-BSzeqkLx.js +0 -25
- package/dist/storybook/assets/dialog-CAWCUmp3.js +0 -1
- package/dist/storybook/assets/extends-CF3RwP-h.js +0 -1
- package/dist/storybook/assets/footer.stories-U_zMDmxF.js +0 -3
- package/dist/storybook/assets/form.stories-1L75MGpX.js +0 -49
- package/dist/storybook/assets/formation.stories-YHpXrXvC.js +0 -74
- package/dist/storybook/assets/icon-BP4BO6-k.js +0 -8
- package/dist/storybook/assets/iframe-CNFcCVDc.js +0 -2
- package/dist/storybook/assets/index-BIwFZkUc.js +0 -1
- package/dist/storybook/assets/inheritsLoose-DR8r8Ogv.js +0 -1
- package/dist/storybook/assets/layout-forms-p4s8eHw6.js +0 -16
- package/dist/storybook/assets/menu.stories-Bp8L83xx.js +0 -82
- package/dist/storybook/assets/message-ttrR1AaP.js +0 -1
- package/dist/storybook/assets/modal.stories-BoVj2EsX.js +0 -200
- package/dist/storybook/assets/number-input.stories-CcNTeD25.js +0 -97
- package/dist/storybook/assets/pagination.stories-DjIohcDx.js +0 -59
- package/dist/storybook/assets/popover-Dq3iC_lM.js +0 -1
- package/dist/storybook/assets/popover.stories-CoWCb2Mn.js +0 -10
- package/dist/storybook/assets/preview-CZPuAPNr.js +0 -2
- package/dist/storybook/assets/projects.stories-BesbPJ8Z.js +0 -47
- package/dist/storybook/assets/radio-button.stories-B84Ip3NV.js +0 -61
- package/dist/storybook/assets/react-router-dom-CMITYWBH.js +0 -8
- package/dist/storybook/assets/select-78sreKsp.js +0 -40
- package/dist/storybook/assets/select.stories-CZwsHVDB.js +0 -914
- package/dist/storybook/assets/text-link.stories-BsuVBOWo.js +0 -14
- package/dist/storybook/assets/toaster-DPbde9Mi.js +0 -1
- package/dist/storybook/assets/toaster.stories-DfbfDavp.js +0 -86
- package/dist/storybook/assets/toggle.stories-D44S3Nix.js +0 -117
- package/dist/storybook/assets/top-bar.stories-BYN9rcUw.js +0 -21
- package/dist/storybook/assets/unit-table.stories-DXies3fA.js +0 -150
- /package/dist/storybook/sb-addons/{storybook-dark-mode-esm-preset-2 → interactions-2}/manager-bundle.js.LEGAL.txt +0 -0
- /package/dist/storybook/sb-addons/{storybook-dark-mode-esm-preset-2 → storybook-dark-mode-esm-preset-3}/manager-bundle.js +0 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import{j as t}from"./jsx-runtime-eps93zm2.js";import{useMDXComponents as n}from"./index-BcNHZKhG.js";import{Z as s,$ as o}from"./index-B8zF6D3V.js";import{Default as l,LabelOnLeft as p}from"./field.stories-B9p9nBgY.js";import{Default as m,LabelsOnLeft as a,Row as h}from"./form.stories-C1Qx3M_1.js";import"./index-DhsZuJvc.js";import"./iframe-CUVhB5TR.js";import"../sb-preview/runtime.js";import"./index-CUZDtIZe.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./index-D6rZ4wEC.js";import"./field-HrLaMLbx.js";import"./index-Bk2sglWO.js";import"./label-CqmyC9he.js";import"./common-types-Sih75Sav.js";import"./help-icon-Buhx5nl6.js";import"./tooltip-1V7clEnw.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./index-CEuq6vkz.js";import"./disabled-context-rmpd7YJS.js";import"./input-BW9trNAW.js";import"./types-UmZ4Y_CR.js";import"./lodash-BHd_uQHh.js";import"./text-B3-TSWok.js";import"./select-C8iu4-uz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./actions-CHgr8eL8.js";import"./button-VxhoNhrV.js";import"./spinner-AWUe4xwQ.js";import"./badge-CLQ59MDF.js";import"./select.input-DIKP56UZ.js";import"./check-box-BtCGePRy.js";import"./button-group-CwJdFo2z.js";import"./toggle-CBpNgTrm.js";import"./input-group-BaRSJAEN.js";import"./input-group-addon-D68iUKV2.js";import"./slider-DAramr8j.js";import"./objectSpread2-DW4nTBoq.js";import"./index-BI4_Bp97.js";import"./textarea-BV7xWEdt.js";import"./radio-button-YBwYcMaM.js";import"./form-row-CM112EYF.js";function r(i){const e={code:"code",h1:"h1",h2:"h2",p:"p",...n(),...i.components};return t.jsxs(t.Fragment,{children:[t.jsx(s,{title:"Layout (Forms)"}),`
|
|
2
|
+
`,t.jsx(e.h1,{id:"layout-forms",children:"Layout (Forms)"}),`
|
|
3
|
+
`,t.jsx(e.h2,{id:"field",children:"Field"}),`
|
|
4
|
+
`,t.jsxs(e.p,{children:["This is a wrapper for any form element with default bottom margin, and props like ",t.jsx(e.code,{children:"label"})," for other default styling."]}),`
|
|
5
|
+
`,t.jsx(o,{of:l}),`
|
|
6
|
+
`,t.jsxs(e.p,{children:["For inline labels, use the ",t.jsx(e.code,{children:"labelLeft"})," prop (and the optional ",t.jsx(e.code,{children:"labelWidth"}),")."]}),`
|
|
7
|
+
`,t.jsx(o,{of:p}),`
|
|
8
|
+
`,t.jsx(e.h2,{id:"stacked",children:"Stacked"}),`
|
|
9
|
+
`,t.jsxs(e.p,{children:["This is the simplest form layout, and works well when horizontal space is limited, or inputs vary in height (e.g. ",t.jsx(e.code,{children:"TextArea"}),")."]}),`
|
|
10
|
+
`,t.jsx(o,{of:m}),`
|
|
11
|
+
`,t.jsx(e.h2,{id:"stacked-with-inline-labels",children:"Stacked with inline labels"}),`
|
|
12
|
+
`,t.jsxs(e.p,{children:["This has the same markup, but with ",t.jsx(e.code,{children:"labelLeft"})," and ",t.jsx(e.code,{children:"labelWidth"})," set on each field."]}),`
|
|
13
|
+
`,t.jsx(o,{of:a}),`
|
|
14
|
+
`,t.jsx(e.h2,{id:"row",children:"Row"}),`
|
|
15
|
+
`,t.jsxs(e.p,{children:["Wrapping a group of form controls in ",t.jsx(e.code,{children:"FormRow"})," arranges them horizontally, and applies default spacing between each item. This works well when vertical space is limited, because inputs will only wrap onto the next line when they need to."]}),`
|
|
16
|
+
`,t.jsx(o,{of:h})]})}function ot(i={}){const{wrapper:e}={...n(),...i.components};return e?t.jsx(e,{...i,children:t.jsx(r,{...i})}):r(i)}export{ot as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{useMDXComponents as s}from"./index-BcNHZKhG.js";import{Z as r,$ as n}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{useMDXComponents as s}from"./index-BcNHZKhG.js";import{Z as r,$ as n}from"./index-B8zF6D3V.js";import{Center as d,SpaceBetween as l,JustifyEnd as a,Column as c}from"./flex.stories-BEXf0VqI.js";import{Default as h,CustomColumnWidth as p,DefaultGap as x,CustomGap as m,Responsive as u}from"./grid.stories-BhjMGl59.js";import{Default as j,FixedWidth as f,NoPadding as w,ResponsiveWidth as g}from"./column.stories-BxfR9Tla.js";import"./index-DhsZuJvc.js";import"./iframe-CUVhB5TR.js";import"../sb-preview/runtime.js";import"./index-CUZDtIZe.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./index-D6rZ4wEC.js";import"./flex-EllkLxgO.js";import"./button-VxhoNhrV.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./index-CEuq6vkz.js";import"./tooltip-1V7clEnw.js";import"./text-B3-TSWok.js";import"./grid-B6LFPf51.js";import"./styled-components.browser.esm-Bf0q9Yjk.js";import"./card-EcjmryU9.js";import"./row-4iAGREkV.js";import"./heading-CRNoBc7q.js";import"./help-icon-Buhx5nl6.js";function t(i){const o={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",...s(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Layout (General)"}),`
|
|
2
2
|
`,e.jsx(o.h1,{id:"layout-general",children:"Layout (General)"}),`
|
|
3
3
|
`,e.jsx(o.h2,{id:"flex",children:"Flex"}),`
|
|
4
4
|
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Flex"})," component is a basic flexbox wrapper with optional props for ",e.jsx(o.code,{children:"alignItems"}),", ",e.jsx(o.code,{children:"justifyContent"})," and ",e.jsx(o.code,{children:"flexDirection"}),". This is a conveninent way to center items vertically and/or horizontally, to align them to opposite edges, or align them to the far side."]}),`
|
|
@@ -32,4 +32,4 @@ import{j as e}from"./jsx-runtime-eps93zm2.js";import{useMDXComponents as s}from"
|
|
|
32
32
|
`,e.jsx(n,{of:w}),`
|
|
33
33
|
`,e.jsx(o.h3,{id:"responsive",children:"Responsive"}),`
|
|
34
34
|
`,e.jsxs(o.p,{children:["To change the layout on smaller devices, you can set props for ",e.jsx(o.code,{children:"widthTablet"})," (up to 992px wide) and/or ",e.jsx(o.code,{children:"widthMobile"})," (up to 575px wide)."]}),`
|
|
35
|
-
`,e.jsx(n,{of:g})]})}function
|
|
35
|
+
`,e.jsx(n,{of:g})]})}function K(i={}){const{wrapper:o}={...s(),...i.components};return o?e.jsx(o,{...i,children:e.jsx(t,{...i})}):t(i)}export{K as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as i}from"./index-DhsZuJvc.js";import{c as S}from"./index-Bk2sglWO.js";import{P as ee,D as ne,C as ae,I as te}from"./index.es-
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as i}from"./index-DhsZuJvc.js";import{c as S}from"./index-Bk2sglWO.js";import{P as ee,D as ne,C as ae,I as te}from"./index.es-DazXb-ul.js";import{C as re}from"./card-EcjmryU9.js";import{l as t,N as se,M as le,L as oe}from"./meta-content-cbHGvPJ7.js";import{I as _}from"./common-types-Sih75Sav.js";import{D as M}from"./disabled-context-rmpd7YJS.js";import{A as R}from"./actions-CHgr8eL8.js";import{B as O}from"./badge-CLQ59MDF.js";import{I as w}from"./icon-BSFY3vDO.js";import{L as ie}from"./loader-XHoVniao.js";const P=({label:n})=>n?e.jsx("span",{className:t.label,children:e.jsx(O,{color:n.color,title:n.value,small:n.small})}):null;P.__docgenInfo={description:"",methods:[],displayName:"Label",props:{label:{required:!1,tsType:{name:"ILabel"},description:""}}};const k=({item:n})=>n.metaCount!==void 0?e.jsx(O,{color:"rgba(0,0,0,0.25)",title:n.metaCount}):null;k.__docgenInfo={description:"",methods:[],displayName:"MetaCount",props:{item:{required:!0,tsType:{name:"signature",type:"object",raw:`{
|
|
2
2
|
metaCount?: number;
|
|
3
3
|
}`,signature:{properties:[{key:"metaCount",value:{name:"number",required:!1}}]}},description:""}}};const B=({item:n,expanding:o})=>{const c=d=>{d.preventDefault(),d.stopPropagation()};return o&&n.active&&n.content?e.jsx("div",{className:t.itemContent,onClick:c,children:n.content}):null};B.__docgenInfo={description:"",methods:[],displayName:"ItemContent",props:{item:{required:!0,tsType:{name:"signature",type:"object",raw:`{
|
|
4
4
|
active?: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as r}from"./jsx-runtime-eps93zm2.js";import{r as W}from"./index-DhsZuJvc.js";import{f}from"./immer.esm-BwVl9PS2.js";import{H as on,S as dn,R as z,L as G}from"./react-router-dom-
|
|
1
|
+
import{j as r}from"./jsx-runtime-eps93zm2.js";import{r as W}from"./index-DhsZuJvc.js";import{f}from"./immer.esm-BwVl9PS2.js";import{H as on,S as dn,R as z,L as G}from"./react-router-dom-Ck2Y_Fzc.js";import{L as y,a as P}from"./list-yVTOdmpX.js";import{L as mn}from"./meta-content-cbHGvPJ7.js";import{F as ln}from"./flex-EllkLxgO.js";import{a as cn,b as pn,c as un,d as gn,e as hn,f as yn,g as bn,h as kn,i as fn,j as xn,k as Sn,m as In,n as Cn,o as sn}from"./list.stories-data-Iq66w9oH.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./tiny-invariant-DqLgxztJ.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./index-Bk2sglWO.js";import"./index.es-DazXb-ul.js";import"./redux-tRgGMjwY.js";import"./objectSpread2-DW4nTBoq.js";import"./index-CUZDtIZe.js";import"./memoize-one.esm-CcMeOnPo.js";import"./card-EcjmryU9.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./actions-CHgr8eL8.js";import"./lodash-BHd_uQHh.js";import"./button-VxhoNhrV.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./tooltip-1V7clEnw.js";import"./types-BmbYqTX_.js";import"./types-UmZ4Y_CR.js";import"./badge-CLQ59MDF.js";import"./loader-XHoVniao.js";import"./heading-CRNoBc7q.js";import"./help-icon-Buhx5nl6.js";const ta={title:"Basic/List",component:y,args:{list:cn,noHeader:!0},parameters:{layout:"fullscreen"}},o=d=>r.jsx(y,{...d}),q=o.bind({}),L=o.bind({});L.args={list:pn};const D=o.bind({});D.args={list:un};const v=o.bind({});v.args={list:gn};const K=o.bind({});K.args={list:hn,expanding:!0};const H=o.bind({});H.args={list:yn,noHeader:!1};const M=o.bind({});M.args={list:bn};const R=o.bind({});R.args={list:kn};const j=o.bind({});j.args={list:fn};const T=o.bind({});T.args={list:xn};const N=o.bind({});N.args={list:Sn,noHeader:!1};const E=o.bind({});E.args={bordered:!0};const w=o.bind({});w.args={list:In};const _=o.bind({});_.args={list:Cn};const S=o.bind({});S.args={list:sn,noHeader:!1,stickyHeader:!0};S.parameters={docs:{story:{inline:!1,iframeHeight:200}}};const x=o.bind({});x.args={list:sn,scrollDetails:{scrollable:!0}};x.parameters={docs:{description:{story:"Adds an internal scrollbar to the `List`, which will fill its parent height unless a `height` is set. The scrollbar can be toggled using `hideScrollbar`."}}};x.decorators=[d=>r.jsx("div",{style:{height:200,overflow:"hidden"},children:d()})];const $=()=>{const[d,b]=W.useState(0),k={name:"Animals",items:[...Array(50)].map((m,l)=>({id:l,name:`Aardvark #${l+1}`,active:l===d,onClick:()=>b(l)}))};return r.jsx("div",{style:{height:200,overflow:"auto"},children:r.jsx(y,{list:k,scrollDetails:{infiniteScroll:!0,scrollable:!0,limit:10}})})},B=()=>{const d=(e,a)=>{switch(a.type){case"headingClicked":{const{headingKey:t}=a.payload;return f(e,s=>{const i=s[t];i.expanded=!i.expanded})}case"itemClicked":{const{headingKey:t,itemIndex:s}=a.payload;return f(e,i=>{Object.keys(i).forEach(h=>{i[h].items.forEach((A,rn)=>{A.active=h===t&&rn===s})})})}case"addClicked":{const{headingKey:t}=a.payload;return f(e,s=>{const i=s[t];i.expanded=!0,i.items.push({name:`${i.label} #${i.items.length+1}`})})}case"deleteClicked":{const{headingKey:t,itemIndex:s}=a.payload;return f(e,i=>{let{items:h}=i[t];delete h[s],i[t].items=h.filter(A=>A)})}default:return e}},b=()=>({mammals:{draggable:!0,name:"Mammals",key:"mammals",label:"Mammals",expanded:!0,items:[{name:"Click item to scroll",type:"Heading"},{name:"Mammal #1",active:!0},{name:"Mammal #2"},{name:"Mammal #3"},{name:"Mammal #4"},{name:"Mammal #5"},{name:"Mammal #6"},{name:"Mammal #7"},{name:"Mammal #8"},{name:"Mammal #9"},{name:"Mammal #10"}]},amphibians:{name:"Amphibians (sticky header)",key:"amphibians",label:"Amphibians",expanded:!0,items:[{name:"Click item to scroll",type:"Heading"},{name:"Amphibian #1",active:!0},{name:"Amphibian #2"},{name:"Amphibian #3"},{name:"Amphibian #4"},{name:"Amphibian #5"},{name:"Amphibian #6"},{name:"Amphibian #7"},{name:"Amphibian #8"},{name:"Amphibian #9"},{name:"Amphibian #10"}]}}),[k,m]=W.useReducer(d,{},()=>b()),[l,u]=W.useState(!1),c=(e,a)=>{u(!0),m({type:"itemClicked",payload:{headingKey:e,itemIndex:a}}),setTimeout(()=>u(!1),0)},p=e=>{m({type:"addClicked",payload:{headingKey:e}})},g=(e,a)=>m({type:"deleteClicked",payload:{headingKey:e,itemIndex:a}}),{mammals:I,amphibians:X}=k,C=e=>({...e,actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>p(e.key)}],items:e.items.map((a,t)=>a.type=="Heading"?{...a,id:t}:{...a,id:t,onClick:()=>c(e.key,t),actions:[{label:"Delete",icon:"delete",onClick:()=>g(e.key,t)}]})}),n=300;return r.jsxs(ln,{gap:!0,children:[r.jsx(y,{list:C(I),bordered:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}}),r.jsx(y,{list:C(X),bordered:!0,stickyHeader:!0,height:n,scrollDetails:{scrollable:!0,hideScrollbar:!1,triggerScrollToActiveItem:l}})]})},F=()=>{const d=(n,e)=>{switch(e.type){case"headingClicked":{const{headingKey:a}=e.payload;return f(n,t=>{const s=t[a];s.expanded=!s.expanded})}case"itemClicked":{const{headingKey:a,itemIndex:t}=e.payload;return f(n,s=>{Object.keys(s).forEach(i=>{s[i].items.forEach((h,A)=>{h.active=i===a&&A===t})})})}case"addClicked":{const{headingKey:a}=e.payload;return f(n,t=>{const s=t[a];s.expanded=!0,s.items.push({name:`${s.label} #${s.items.length+1}`})})}case"deleteClicked":{const{headingKey:a,itemIndex:t}=e.payload;return f(n,s=>{let{items:i}=s[a];delete i[t],s[a].items=i.filter(h=>h)})}default:return n}},b=()=>({mammals:{key:"mammals",label:"Mammals",expanded:!0,items:[{name:"Aardvark",active:!0},{name:"Kangaroo"}]},amphibians:{key:"amphibians",label:"Amphibians",expanded:!0,items:[{name:"Frog"}]}}),[k,m]=W.useReducer(d,b()),l=n=>m({type:"headingClicked",payload:{headingKey:n}}),u=(n,e)=>m({type:"itemClicked",payload:{headingKey:n,itemIndex:e}}),c=n=>m({type:"addClicked",payload:{headingKey:n}}),p=(n,e)=>m({type:"deleteClicked",payload:{headingKey:n,itemIndex:e}}),{mammals:g,amphibians:I}=k,X=n=>({name:n.label,metaCount:n.items.length,expanded:n.expanded,onClick:()=>l(n.key),actions:[{label:"Add",primary:!0,icon:"add",onClick:()=>c(n.key)}]}),C=n=>({...n,items:n.items.map((e,a)=>({...e,id:a,onClick:()=>u(n.key,a),actions:[{label:"Delete",icon:"delete",onClick:()=>p(n.key,a)}]}))});return r.jsxs(r.Fragment,{children:[r.jsx(mn,{name:"Animals"}),r.jsx(P,{item:X(g)}),g.expanded&&r.jsx(y,{noHeader:!0,list:C(g)}),r.jsx(P,{item:X(I)}),I.expanded&&r.jsx(y,{noHeader:!0,list:C(I)})]})},O=()=>{const d=(u,c,p)=>{if(c&&isNaN(c)||p&&isNaN(p)||c===p)return u;const g=[...u];return typeof p=="number"&&typeof c=="number"&&g.splice(p,0,g.splice(c,1)[0]),g},b={name:"List Name",draggable:!0,items:[{id:1,name:"element 1",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:2,name:"Long element name goes here lorem ipsum dolor lorem ipsum dolor",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:3,name:"element 3"},{id:4,name:"element 4",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]},{id:5,name:"element 5",actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}]},[k,m]=W.useState(b.items),l=u=>{const{to:c,from:p}=u;m(d(k,p,c))};return r.jsx(y,{list:{...b,items:k},draggable:!0,onListReorder:l})},J=()=>{const d={items:[{id:1,name:"Dashboard",component:G,url:"/dashboard"},{id:2,name:"Settings",component:G,url:"/settings"}]};return r.jsxs(on,{children:[r.jsx(y,{list:d,noHeader:!0}),r.jsxs(dn,{children:[r.jsx(z,{path:"/dashboard",children:"Dashboard"}),r.jsx(z,{path:"/settings",children:"Settings"})]})]})};$.__docgenInfo={description:"",methods:[],displayName:"InfiniteScroll"};B.__docgenInfo={description:"",methods:[],displayName:"ScrollToActiveItem"};F.__docgenInfo={description:"",methods:[],displayName:"HeadingsManaged"};O.__docgenInfo={description:"",methods:[],displayName:"ManagedDragAndDrop"};J.__docgenInfo={description:"",methods:[],displayName:"AsRouterLink"};var Q,U,V;q.parameters={...q.parameters,docs:{...(Q=q.parameters)==null?void 0:Q.docs,source:{originalSource:`args => {
|
|
2
2
|
return <List {...args} />;
|
|
3
3
|
}`,...(V=(U=q.parameters)==null?void 0:U.docs)==null?void 0:V.source}}};var Y,Z,ee;L.parameters={...L.parameters,docs:{...(Y=L.parameters)==null?void 0:Y.docs,source:{originalSource:`args => {
|
|
4
4
|
return <List {...args} />;
|
|
@@ -473,4 +473,4 @@ import{j as r}from"./jsx-runtime-eps93zm2.js";import{r as W}from"./index-DhsZuJv
|
|
|
473
473
|
<Route path="/settings">Settings</Route>
|
|
474
474
|
</Switch>
|
|
475
475
|
</HashRouter>;
|
|
476
|
-
}`,...(tn=(an=J.parameters)==null?void 0:an.docs)==null?void 0:tn.source}}};const
|
|
476
|
+
}`,...(tn=(an=J.parameters)==null?void 0:an.docs)==null?void 0:tn.source}}};const sa=["Default","Actions","Menus","Details","Expanding","Header","Badges","BadgesSmall","Nested","InvalidItems","JSXTitles","Bordered","IconWithTooltip","Metacount","StickyHeader","Scrollable","InfiniteScroll","ScrollToActiveItem","HeadingsManaged","ManagedDragAndDrop","AsRouterLink"];export{L as Actions,J as AsRouterLink,M as Badges,R as BadgesSmall,E as Bordered,q as Default,v as Details,K as Expanding,H as Header,F as HeadingsManaged,w as IconWithTooltip,$ as InfiniteScroll,T as InvalidItems,N as JSXTitles,O as ManagedDragAndDrop,D as Menus,_ as Metacount,j as Nested,B as ScrollToActiveItem,x as Scrollable,S as StickyHeader,sa as __namedExportsOrder,ta as default};
|
package/dist/storybook/assets/{list.stories-data-CnVYk3eo.js → list.stories-data-Iq66w9oH.js}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-eps93zm2.js";import{I as i,T as c}from"./common-types-Sih75Sav.js";import{F as o}from"./flex-EllkLxgO.js";import{M as d}from"./actions-
|
|
1
|
+
import{j as t}from"./jsx-runtime-eps93zm2.js";import{I as i,T as c}from"./common-types-Sih75Sav.js";import{F as o}from"./flex-EllkLxgO.js";import{M as d}from"./actions-CHgr8eL8.js";import{I as n}from"./icon-BSFY3vDO.js";import{M as l}from"./types-BmbYqTX_.js";const a=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Jaguar",disabled:!0}],p=[{id:1,name:"Marsupials",type:"Heading",metaCount:1},{id:2,name:"Aardvark"},{id:3,name:"Kangaroo",active:!0},{id:4,name:"Mammals",type:"Heading",metaCount:1},{id:5,name:"Jaguar"}],g=[{id:1,name:"Aardvark"},{id:2,name:"Kangaroo",active:!0},{id:3,name:"Grey",level:1},{id:4,name:"Eastern",level:2},{id:5,name:"Macropus giganteus giganteus",title:"Macropus giganteus giganteus",level:3},{id:6,name:"Macropus giganteus tasmaniensis",title:"Macropus giganteus tasmaniensis",level:3},{id:7,name:"Western",level:2},{id:8,name:"Red",level:1},{id:9,name:"Jaguar"}],h={items:a},r={name:"Animals",actions:[{label:"More",subActions:[{label:"Item",icon:"up",onClick:()=>{}},{label:"Item",icon:"down",onClick:()=>{}}]},{label:"Add",primary:!0,icon:"add",onClick:()=>{}}],items:a},m={...r,items:p},A={...r,name:t.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:["Animals",t.jsx(n,{icon:i.STAR})]}),items:a.map(e=>({...e,name:t.jsxs(o,{gap:"var(--padding-xs)",alignItems:"center",children:[e.name,t.jsx(n,{icon:i.STAR})]})}))};a.map(e=>({...e,actions:[{childComponent:t.jsx(d,{menu:{trigger:c.COMPONENT,component:t.jsx(n,{icon:i.MENU}),placement:"bottom-end",sections:[{type:l.OPTION,label:"Item",onClick:()=>{}},{type:l.OPTION,label:"Item",onClick:()=>{}}]}})}]}));const C={items:a.map(e=>({...e,actions:[{label:"More",subActions:[{label:"Move Up",icon:"up",onClick:()=>{}},{label:"Move Down",icon:"down",onClick:()=>{}}]}]}))},k={items:a.map((e,s)=>({...e,label:{value:String(s+1),color:"var(--color-text-info)"}}))},j={items:a.map(e=>({...e,label:{value:t.jsx(t.Fragment,{children:" "}),color:"var(--color-text-info)",small:!0}}))},T={...m,items:m.items.map((e,s)=>({...e,label:{value:String(s+1),color:"var(--color-text-info)"}}))},f={items:a.map(e=>({...e,actions:[{label:"Delete",icon:"delete",onClick:()=>{}}]}))},y={items:a.map((e,s)=>({...e,details:"Description goes here",metadata:"2019-05-03 09:03:51",testId:`story-list-item-${s}`}))},S={items:a.map(e=>({...e,content:t.jsx("div",{children:"Example content element (for show/hide)."})}))},N={items:g},E={items:[...a,{id:4,name:"Dodo",invalid:!0}]},O={items:a.map(e=>({...e,icon:{icon:"success",color:"var(--color-text-success)",tooltip:{text:t.jsx(t.Fragment,{children:"Tooltip goes here"})}}}))},D={items:a.map(e=>({...e,metaCount:3}))},w={name:"Animals",items:[...Array(50)].map((e,s)=>({id:s,name:`Aardvark #${s+1}`}))};export{h as a,f as b,C as c,y as d,S as e,r as f,k as g,j as h,N as i,E as j,A as k,T as l,O as m,D as n,w as o};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as G}from"./index-DhsZuJvc.js";import{a as l}from"./common-types-Sih75Sav.js";import{L as g}from"./loader-XHoVniao.js";import{P as M}from"./progress-bar-C_kV6r0Q.js";import{S as x}from"./spinner-AWUe4xwQ.js";import{S as m}from"./spacer-BWoNR27H.js";import{B as L}from"./button-
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as G}from"./index-DhsZuJvc.js";import{a as l}from"./common-types-Sih75Sav.js";import{L as g}from"./loader-XHoVniao.js";import{P as M}from"./progress-bar-C_kV6r0Q.js";import{S as x}from"./spinner-AWUe4xwQ.js";import{S as m}from"./spacer-BWoNR27H.js";import{B as L}from"./button-VxhoNhrV.js";import{C as q}from"./card-EcjmryU9.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";const le={title:"Progress/Loader",component:g,argTypes:{theme:{control:{type:"inline-radio"},options:["white","light","dark"]}},args:{theme:"white",text:"Loading...",width:"100%",height:"100%",fullViewPortSize:!1},decorators:[r=>e.jsx("div",{style:{height:"200px",position:"relative"},children:r()})],parameters:{docs:{source:{excludeDecorators:!0}}}},S=r=>{const{theme:t}=r;return e.jsx(g,{...r,children:e.jsx(x,{dark:t!=="dark"})})},h=r=>{const{theme:t}=r;return e.jsx(g,{...r,children:e.jsx(M,{width:"300px",inverted:t==="dark",percentage:40})})},o=S.bind({});o.args={testId:"story-default-spinner"};const u=h.bind({}),i=S.bind({});i.args={theme:l.LIGHT};const n=S.bind({});n.args={theme:l.DARK,fullViewPortSize:!0};const d=h.bind({});d.args={theme:l.DARK,fullViewPortSize:!0};const c=h.bind({});c.args={details:"Some extra info"};const p=h.bind({});p.args={text:"",details:e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{opacity:.5},children:"Step 1: Lorem ipsum...DONE"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx("div",{children:"Step 2: Dolor est"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx("div",{style:{opacity:.5},children:"Step 3: Compendum"}),e.jsx(m,{height:"var(--padding-xs)"}),e.jsx(L,{label:"Cancel",onClick:()=>{}})]})};const a=()=>{const[r,t]=G.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.jsx(m,{}),e.jsx(q,{children:e.jsxs("div",{style:{position:"relative"},children:[r&&e.jsx(g,{cover:!0,theme:l.WHITE,children:e.jsx(x,{dark:!0})}),"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)]})})]})};a.parameters={docs:{story:{inline:!1,iframeHeight:400}}};const s=()=>{const[r,t]=G.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(L,{label:"Toggle loading",onClick:()=>t(!r)}),e.jsx(m,{}),e.jsx(q,{children:e.jsx("div",{style:{position:"relative"},children:r?e.jsx(g,{theme:l.WHITE,height:"200px",children:e.jsx(x,{dark:!0})}):e.jsx("div",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(20)})})})]})};s.parameters={docs:{story:{inline:!1,iframeHeight:400}}};a.__docgenInfo={description:"",methods:[],displayName:"CoversCardContent"};s.__docgenInfo={description:"",methods:[],displayName:"ReplacesCardContent"};var v,j,C;o.parameters={...o.parameters,docs:{...(v=o.parameters)==null?void 0:v.docs,source:{originalSource:`(args: ILoaderProps) => {
|
|
2
2
|
const {
|
|
3
3
|
theme
|
|
4
4
|
} = args;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import{j as r}from"./jsx-runtime-eps93zm2.js";import{r as Ir}from"./index-DhsZuJvc.js";import{H as Cr,L as J,S as Dr,R as U}from"./react-router-dom-Ck2Y_Fzc.js";import{T as A,I as fr}from"./common-types-Sih75Sav.js";import{w as kr,e as P,u as v}from"./index-Be0hXiyp.js";import{M as W}from"./actions-CHgr8eL8.js";import{B as X}from"./button-VxhoNhrV.js";import{F as Rr}from"./flex-EllkLxgO.js";import{m as s,a as wr,b as Br,c as Er,d as Nr,e as Fr,f as Lr,g as Pr,h as _r,i as Ar}from"./menu.stories-data-DeDnsKpk.js";import{M as H}from"./types-BmbYqTX_.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./tiny-invariant-DqLgxztJ.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./index-CF7H4eMJ.js";import"./index-Bk2sglWO.js";import"./lodash-BHd_uQHh.js";import"./disabled-context-rmpd7YJS.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./icon-BSFY3vDO.js";import"./types-UmZ4Y_CR.js";import"./badge-CLQ59MDF.js";import"./spinner-AWUe4xwQ.js";const ps={title:"Basic/Menu",component:W,args:{menu:s}},e=a=>r.jsx(W,{...a}),_=e.bind({}),c=e.bind({});c.args={menu:{...s,colored:!0}};const p=e.bind({});p.args={menu:{...s,label:"Delete",colored:"danger"}};const d=e.bind({});d.args={menu:{...s,trigger:A.TEXT}};const l=e.bind({});l.args={menu:{...s,trigger:A.COMPONENT,component:r.jsx(X,{small:!0,colored:!0,round:!0,icon:fr.SETTINGS})}};const m=e.bind({});m.args={menu:wr};const u=e.bind({});u.args={menu:Br};const g=e.bind({});g.args={menu:Er};const b=e.bind({});b.args={menu:Nr};const x=e.bind({});x.args={disabled:!0};const S=e.bind({});S.args={tooltip:"Tooltip goes here"};const h=e.bind({});h.args={error:"Error goes here"};const T=e.bind({});T.args={warning:"Warning goes here"};const j=e.bind({});j.args={loading:!0,disabled:!0};const M=e.bind({});M.args={badgeTitle:"3"};const y=e.bind({});y.args={badgeDot:!0};const O=e.bind({});O.args={menu:Fr};const I=e.bind({});I.args={menu:Lr};const C=e.bind({});C.args={closeOnOptionClick:!1};const D=e.bind({});D.args={contextMenu:!0,menu:{...s,trigger:A.TEXT,label:"Right-click me"}};const f=e.bind({});f.args={width:"100%"};const k=e.bind({});k.args={menu:{...s,small:!0}};const R=e.bind({});R.args={menu:Pr};const w=e.bind({});w.args={menu:{...s,sections:r.jsx("div",{children:"Testing"})}};const B=e.bind({});B.args={menu:_r};const E=e.bind({});E.args={menu:Ar};const N=()=>{const[a,t]=Ir.useState(!1);return r.jsxs(Rr,{gap:!0,children:[r.jsx(W,{menu:s,open:a,setOpen:t}),r.jsx(X,{label:"Open",onClick:()=>t(!0),disabled:a}),r.jsx(X,{label:"Close",onClick:()=>t(!1),disabled:!a})]})},F=()=>r.jsxs(Cr,{children:[r.jsx(W,{menu:{label:"Go to",trigger:A.DROP_DOWN_BUTTON,sections:[{type:H.OPTION,label:"Dashboard",url:"/dashboard",component:J},{type:H.OPTION,label:"Settings",url:"/settings",component:J}]}}),r.jsxs(Dr,{children:[r.jsx(U,{path:"/dashboard",children:"Dashboard"}),r.jsx(U,{path:"/settings",children:"Settings"})]})]}),o=e.bind({});o.args={testId:"testId"};o.play=async({canvasElement:a,step:t})=>{const n=a.parentElement?kr(a.parentElement):null;await P(n).toBeTruthy(),n&&(await t("Clicking trigger should open menu",async()=>{const L=n.getByTestId("testId");await v.click(L);const i=n.getByTestId("testId-layer");await P(i).toBeInTheDocument()}),await t("Clicking disabled item should do nothing",async()=>{await n.getByText("Knight").click();const i=n.getByTestId("testId-layer");await P(i).toBeInTheDocument()}),await t("Clicking item should close menu",async()=>{const L=n.getByText("King");await v.click(L);const i=n.queryByTestId("testId-layer");await P(i).not.toBeInTheDocument()}))};N.__docgenInfo={description:"",methods:[],displayName:"ControlOpenStateFromParent"};F.__docgenInfo={description:"",methods:[],displayName:"AsRouterLink"};var G,K,q;_.parameters={..._.parameters,docs:{...(G=_.parameters)==null?void 0:G.docs,source:{originalSource:`args => <Menu
|
|
2
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
3
|
+
{...args} />`,...(q=(K=_.parameters)==null?void 0:K.docs)==null?void 0:q.source}}};var z,Q,V;c.parameters={...c.parameters,docs:{...(z=c.parameters)==null?void 0:z.docs,source:{originalSource:`args => <Menu
|
|
4
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
5
|
+
{...args} />`,...(V=(Q=c.parameters)==null?void 0:Q.docs)==null?void 0:V.source}}};var Y,Z,$;p.parameters={...p.parameters,docs:{...(Y=p.parameters)==null?void 0:Y.docs,source:{originalSource:`args => <Menu
|
|
6
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
7
|
+
{...args} />`,...($=(Z=p.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};var ee,re,se;d.parameters={...d.parameters,docs:{...(ee=d.parameters)==null?void 0:ee.docs,source:{originalSource:`args => <Menu
|
|
8
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
9
|
+
{...args} />`,...(se=(re=d.parameters)==null?void 0:re.docs)==null?void 0:se.source}}};var ae,ne,te;l.parameters={...l.parameters,docs:{...(ae=l.parameters)==null?void 0:ae.docs,source:{originalSource:`args => <Menu
|
|
10
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
11
|
+
{...args} />`,...(te=(ne=l.parameters)==null?void 0:ne.docs)==null?void 0:te.source}}};var oe,ie,ce;m.parameters={...m.parameters,docs:{...(oe=m.parameters)==null?void 0:oe.docs,source:{originalSource:`args => <Menu
|
|
12
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
13
|
+
{...args} />`,...(ce=(ie=m.parameters)==null?void 0:ie.docs)==null?void 0:ce.source}}};var pe,de,le;u.parameters={...u.parameters,docs:{...(pe=u.parameters)==null?void 0:pe.docs,source:{originalSource:`args => <Menu
|
|
14
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
15
|
+
{...args} />`,...(le=(de=u.parameters)==null?void 0:de.docs)==null?void 0:le.source}}};var me,ue,ge;g.parameters={...g.parameters,docs:{...(me=g.parameters)==null?void 0:me.docs,source:{originalSource:`args => <Menu
|
|
16
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
17
|
+
{...args} />`,...(ge=(ue=g.parameters)==null?void 0:ue.docs)==null?void 0:ge.source}}};var be,xe,Se;b.parameters={...b.parameters,docs:{...(be=b.parameters)==null?void 0:be.docs,source:{originalSource:`args => <Menu
|
|
18
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
19
|
+
{...args} />`,...(Se=(xe=b.parameters)==null?void 0:xe.docs)==null?void 0:Se.source}}};var he,Te,je;x.parameters={...x.parameters,docs:{...(he=x.parameters)==null?void 0:he.docs,source:{originalSource:`args => <Menu
|
|
20
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
21
|
+
{...args} />`,...(je=(Te=x.parameters)==null?void 0:Te.docs)==null?void 0:je.source}}};var Me,ye,Oe;S.parameters={...S.parameters,docs:{...(Me=S.parameters)==null?void 0:Me.docs,source:{originalSource:`args => <Menu
|
|
22
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
23
|
+
{...args} />`,...(Oe=(ye=S.parameters)==null?void 0:ye.docs)==null?void 0:Oe.source}}};var Ie,Ce,De;h.parameters={...h.parameters,docs:{...(Ie=h.parameters)==null?void 0:Ie.docs,source:{originalSource:`args => <Menu
|
|
24
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
25
|
+
{...args} />`,...(De=(Ce=h.parameters)==null?void 0:Ce.docs)==null?void 0:De.source}}};var fe,ke,Re;T.parameters={...T.parameters,docs:{...(fe=T.parameters)==null?void 0:fe.docs,source:{originalSource:`args => <Menu
|
|
26
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
27
|
+
{...args} />`,...(Re=(ke=T.parameters)==null?void 0:ke.docs)==null?void 0:Re.source}}};var we,Be,Ee;j.parameters={...j.parameters,docs:{...(we=j.parameters)==null?void 0:we.docs,source:{originalSource:`args => <Menu
|
|
28
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
29
|
+
{...args} />`,...(Ee=(Be=j.parameters)==null?void 0:Be.docs)==null?void 0:Ee.source}}};var Ne,Fe,Le;M.parameters={...M.parameters,docs:{...(Ne=M.parameters)==null?void 0:Ne.docs,source:{originalSource:`args => <Menu
|
|
30
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
31
|
+
{...args} />`,...(Le=(Fe=M.parameters)==null?void 0:Fe.docs)==null?void 0:Le.source}}};var Pe,_e,Ae;y.parameters={...y.parameters,docs:{...(Pe=y.parameters)==null?void 0:Pe.docs,source:{originalSource:`args => <Menu
|
|
32
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
33
|
+
{...args} />`,...(Ae=(_e=y.parameters)==null?void 0:_e.docs)==null?void 0:Ae.source}}};var We,Xe,Je;O.parameters={...O.parameters,docs:{...(We=O.parameters)==null?void 0:We.docs,source:{originalSource:`args => <Menu
|
|
34
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
35
|
+
{...args} />`,...(Je=(Xe=O.parameters)==null?void 0:Xe.docs)==null?void 0:Je.source}}};var Ue,ve,He;I.parameters={...I.parameters,docs:{...(Ue=I.parameters)==null?void 0:Ue.docs,source:{originalSource:`args => <Menu
|
|
36
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
37
|
+
{...args} />`,...(He=(ve=I.parameters)==null?void 0:ve.docs)==null?void 0:He.source}}};var Ge,Ke,qe;C.parameters={...C.parameters,docs:{...(Ge=C.parameters)==null?void 0:Ge.docs,source:{originalSource:`args => <Menu
|
|
38
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
39
|
+
{...args} />`,...(qe=(Ke=C.parameters)==null?void 0:Ke.docs)==null?void 0:qe.source}}};var ze,Qe,Ve;D.parameters={...D.parameters,docs:{...(ze=D.parameters)==null?void 0:ze.docs,source:{originalSource:`args => <Menu
|
|
40
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
41
|
+
{...args} />`,...(Ve=(Qe=D.parameters)==null?void 0:Qe.docs)==null?void 0:Ve.source}}};var Ye,Ze,$e;f.parameters={...f.parameters,docs:{...(Ye=f.parameters)==null?void 0:Ye.docs,source:{originalSource:`args => <Menu
|
|
42
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
43
|
+
{...args} />`,...($e=(Ze=f.parameters)==null?void 0:Ze.docs)==null?void 0:$e.source}}};var er,rr,sr;k.parameters={...k.parameters,docs:{...(er=k.parameters)==null?void 0:er.docs,source:{originalSource:`args => <Menu
|
|
44
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
45
|
+
{...args} />`,...(sr=(rr=k.parameters)==null?void 0:rr.docs)==null?void 0:sr.source}}};var ar,nr,tr;R.parameters={...R.parameters,docs:{...(ar=R.parameters)==null?void 0:ar.docs,source:{originalSource:`args => <Menu
|
|
46
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
47
|
+
{...args} />`,...(tr=(nr=R.parameters)==null?void 0:nr.docs)==null?void 0:tr.source}}};var or,ir,cr;w.parameters={...w.parameters,docs:{...(or=w.parameters)==null?void 0:or.docs,source:{originalSource:`args => <Menu
|
|
48
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
49
|
+
{...args} />`,...(cr=(ir=w.parameters)==null?void 0:ir.docs)==null?void 0:cr.source}}};var pr,dr,lr;B.parameters={...B.parameters,docs:{...(pr=B.parameters)==null?void 0:pr.docs,source:{originalSource:`args => <Menu
|
|
50
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
51
|
+
{...args} />`,...(lr=(dr=B.parameters)==null?void 0:dr.docs)==null?void 0:lr.source}}};var mr,ur,gr;E.parameters={...E.parameters,docs:{...(mr=E.parameters)==null?void 0:mr.docs,source:{originalSource:`args => <Menu
|
|
52
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
53
|
+
{...args} />`,...(gr=(ur=E.parameters)==null?void 0:ur.docs)==null?void 0:gr.source}}};var br,xr,Sr;N.parameters={...N.parameters,docs:{...(br=N.parameters)==null?void 0:br.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
|
+
}`,...(Sr=(xr=N.parameters)==null?void 0:xr.docs)==null?void 0:Sr.source}}};var hr,Tr,jr;F.parameters={...F.parameters,docs:{...(hr=F.parameters)==null?void 0:hr.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
|
+
}`,...(jr=(Tr=F.parameters)==null?void 0:Tr.docs)==null?void 0:jr.source}}};var Mr,yr,Or;o.parameters={...o.parameters,docs:{...(Mr=o.parameters)==null?void 0:Mr.docs,source:{originalSource:`args => <Menu
|
|
83
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
84
|
+
{...args} />`,...(Or=(yr=o.parameters)==null?void 0:yr.docs)==null?void 0:Or.source}}};const ds=["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","Test"];export{g as Actions,F as AsRouterLink,M as Badge,N as ControlOpenStateFromParent,l as CustomTrigger,_ as Default,u as DescriptionOnRight,p as DestructiveTrigger,x as Disabled,y as Dot,O as Empty,h as Error,m as FileUpload,f as FullWidth,b as Icons,w as JSXContent,R as JSXItems,j as Loading,E as Long,c as PrimaryTrigger,D as RightClickContextMenu,B as ShowAll,k as Small,I as Submenus,o as Test,d as TextTrigger,S as Tooltip,T as Warning,C as WithoutCloseOnOptionClick,ds as __namedExportsOrder,ps as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as T}from"./index-DhsZuJvc.js";import{c as l}from"./index-Bk2sglWO.js";import{I as o}from"./common-types-Sih75Sav.js";import{I as a}from"./icon-BSFY3vDO.js";const N="_inputInTable_s49vk_1",b="_inputHover_s49vk_13",j="_inputFocus_s49vk_18",R="_inputError_s49vk_25",y="_inputWarning_s49vk_26",C="_inputDisabled_s49vk_61",w="_hideScrollbars_s49vk_67",O="_container_s49vk_83",D="_block_s49vk_101",G="_info_s49vk_104",W="_success_s49vk_108",A="_warning_s49vk_112",L="_error_s49vk_116",F="_content_s49vk_120",q="_heading_s49vk_124",z="_icon_s49vk_131",H="_dismiss_s49vk_139",U="_absolute_s49vk_143",V="_legendToggle_s49vk_155",M="_detailsText_s49vk_165",B="_footer_s49vk_169",n={inputInTable:N,inputHover:b,inputFocus:j,inputError:R,inputWarning:y,inputDisabled:C,hideScrollbars:w,container:O,block:D,info:G,success:W,warning:A,error:L,content:F,heading:q,icon:z,dismiss:H,absolute:U,legendToggle:V,detailsText:M,footer:B};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 g=({type:s,onClose:t,isInToast:r,testId:c})=>e.jsx("div",{className:l(n.dismiss,r?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(a,{icon:o.CLOSE,onClick:t,testId:c})});g.__docgenInfo={description:"",methods:[],displayName:"Dismiss",props:{type:{required:!0,tsType:{name:"union",raw:"TMessageType | string",elements:[{name:"union",raw:"'Info' | 'Success' | 'Warning' | 'Error'",elements:[{name:"literal",value:"'Info'"},{name:"literal",value:"'Success'"},{name:"literal",value:"'Warning'"},{name:"literal",value:"'Error'"}]},{name:"string"}]},description:""},onClose:{required:!1,tsType:{name:"signature",type:"function",raw:"(...args: any[]) => any",signature:{arguments:[{type:{name:"Array",elements:[{name:"any"}],raw:"any[]"},name:"args",rest:!0}],return:{name:"any"}}},description:""},isInToast:{required:!1,tsType:{name:"boolean"},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};const J=(s,t)=>{switch(t.type){case d.TOGGLE_DETAILS:return{...s,detailsVisible:!s.detailsVisible};default:return s}},K=({details:s,visible:t,dispatch:r})=>e.jsxs("div",{children:[e.jsx("div",{className:l(n.legendToggle),onClick:r,children:t?"Hide details":"Show details"}),t?e.jsx("div",{className:n.detailsText,children:s}):null]}),P=({type:s})=>{switch(s){case i.SUCCESS:return e.jsx(a,{icon:o.SUCCESS,size:16});case i.WARNING:return e.jsx(a,{icon:o.WARNING,size:16});case i.ERROR:return e.jsx(a,{icon:o.ERROR,size:16});default:return e.jsx(a,{icon:o.INFO,size:16})}},Q=({message:s})=>{const{visible:t,type:r=i.INFO,icon:c,heading:u,content:v,details:_,detailsVisible:h=!1,footer:m,withDismiss:x,onClose:I,width:p,maxHeight:S}=s,f={detailsVisible:h},[k,E]=T.useReducer(J,f);return e.jsx(e.Fragment,{children:t?e.jsxs("div",{className:l(n.container,p?n.block:null,r===i.SUCCESS?n.success:r===i.WARNING?n.warning:r===i.ERROR?n.error:n.info),style:{width:p,maxHeight:S},children:[e.jsx("div",{children:c?e.jsx("div",{className:n.icon,children:e.jsx(P,{type:r})}):null}),e.jsxs("div",{className:n.content,children:[u?e.jsx("div",{className:n.heading,children:u}):null,e.jsx("div",{children:v}),_?e.jsx(K,{details:_,visible:k.detailsVisible,dispatch:()=>E({type:d.TOGGLE_DETAILS})}):null,!!m&&e.jsx("div",{className:n.footer,children:m})]}),x?e.jsx(g,{type:r,onClose:I}):null]}):null})};Q.__docgenInfo={description:"",methods:[],displayName:"Message",props:{message:{required:!0,tsType:{name:"IMessage"},description:""}}};export{g as D,Q as M,i as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as s}from"./jsx-runtime-eps93zm2.js";import{M as a,a as n}from"./message-
|
|
1
|
+
import{j as s}from"./jsx-runtime-eps93zm2.js";import{M as a,a as n}from"./message-BYzRg8Ae.js";import{B as M}from"./button-VxhoNhrV.js";import{G as z}from"./grid-B6LFPf51.js";import"./index-DhsZuJvc.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./disabled-context-rmpd7YJS.js";import"./spinner-AWUe4xwQ.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./styled-components.browser.esm-Bf0q9Yjk.js";const{useArgs:J}=__STORYBOOK_MODULE_PREVIEW_API__,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({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as u}from"./index-DhsZuJvc.js";import{c}from"./index-Bk2sglWO.js";import{I as g}from"./common-types-Sih75Sav.js";import{I as _}from"./icon-
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as u}from"./index-DhsZuJvc.js";import{c}from"./index-Bk2sglWO.js";import{I as g}from"./common-types-Sih75Sav.js";import{I as _}from"./icon-BSFY3vDO.js";import{H as h}from"./heading-CRNoBc7q.js";import{A as x}from"./actions-CHgr8eL8.js";import{B as f}from"./badge-CLQ59MDF.js";import{T as N}from"./tooltip-1V7clEnw.js";const b="_inputInTable_tn20e_1",T="_inputHover_tn20e_13",j="_inputFocus_tn20e_18",v="_inputError_tn20e_25",y="_inputWarning_tn20e_26",I="_inputDisabled_tn20e_61",w="_hideScrollbars_tn20e_67",H="_header_tn20e_77",q="_headerTitle_tn20e_77",C="_heading_tn20e_78",k="_itemHeader_tn20e_78",E="_narrow_tn20e_81",S="_stickyHeader_tn20e_85",M="_title_tn20e_96",R="_name_tn20e_102",L="_iconTooltipMargin_tn20e_105",F="_bold_tn20e_108",V="_toggleNarrow_tn20e_117",W="_drag_tn20e_135",B="_list_tn20e_155",D="_bordered_tn20e_159",P="_item_tn20e_78",$="_action_tn20e_192",A="_active_tn20e_195",O="_indented_tn20e_202",z="_disabled_tn20e_215",G="_label_tn20e_226",J="_details_tn20e_237",K="_metadata_tn20e_238",Q="_itemContent_tn20e_246",U="_indentIcon_tn20e_253",X="_expandIcon_tn20e_258",Y="_expanded_tn20e_265",Z="_right_tn20e_268",ee="_actions_tn20e_276",te="_scrollableList_tn20e_281",ne="_infiniteScrollContainer_tn20e_286",ae="_hideScrollbar_tn20e_67",oe="_noPointerEvents_tn20e_303",n={inputInTable:b,inputHover:T,inputFocus:j,inputError:v,inputWarning:y,inputDisabled:I,hideScrollbars:w,header:H,headerTitle:q,heading:C,itemHeader:k,narrow:E,stickyHeader:S,title:M,name:R,iconTooltipMargin:L,bold:F,toggleNarrow:V,drag:W,list:B,bordered:D,item:P,action:$,active:A,indented:O,disabled:z,label:G,details:J,metadata:K,itemContent:Q,indentIcon:U,expandIcon:X,expanded:Y,right:Z,actions:ee,scrollableList:te,infiniteScrollContainer:ne,hideScrollbar:ae,noPointerEvents:oe},p=({toggleNarrow:a,onClickToggleNarrow:t})=>a?e.jsx("a",{className:n.toggleNarrow,onClick:t,children:e.jsx(_,{icon:g.CHEVRON_LEFT})}):null;p.__docgenInfo={description:"",methods:[],displayName:"ToggleNarrow",props:{toggleNarrow:{required:!1,tsType:{name:"boolean"},description:""},onClickToggleNarrow:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""}}};const ie=u.forwardRef(({name:a,actions:t=[],toggleNarrow:r=!1,onToggleNarrow:o=()=>{},stickyHeader:s},d)=>e.jsxs("div",{ref:d,className:c(n.header,s?n.stickyHeader:""),children:[e.jsx(p,{toggleNarrow:r,onClickToggleNarrow:o}),a&&e.jsx("div",{className:n.headerTitle,children:e.jsx(h,{top:!0,marginBottom:0,children:a})}),e.jsx("div",{className:n.right,children:e.jsx("div",{className:n.actions,children:e.jsx(x,{actions:t})})})]}));ie.__docgenInfo={description:"",methods:[],displayName:"ListHeading",props:{actions:{defaultValue:{value:"[]",computed:!1},required:!1},toggleNarrow:{defaultValue:{value:"false",computed:!1},required:!1},onToggleNarrow:{defaultValue:{value:"() => {}",computed:!1},required:!1}}};const m=({name:a,icon:t,testId:r})=>{const o=t&&e.jsx(_,{icon:t.icon,color:t.color||"#db2828"});return e.jsxs("span",{className:c(n.name,n.bold),"data-testid":r,children:[a,t&&t.tooltip&&t.tooltip.text?e.jsx("span",{className:n.iconTooltipMargin,children:e.jsx(N,{text:t.tooltip.text,maxWidth:"350px",children:o})}):t&&t.icon&&e.jsx("span",{className:n.iconTooltipMargin,children:o})]})};m.__docgenInfo={description:"",methods:[],displayName:"Name",props:{name:{required:!0,tsType:{name:"ReactNode"},description:""},icon:{required:!1,tsType:{name:"signature",type:"object",raw:`{
|
|
2
2
|
icon: ReactNode;
|
|
3
3
|
color?: string;
|
|
4
4
|
tooltip?: {
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as k}from"./index-DhsZuJvc.js";import{w as le,e as j,u as f}from"./index-Be0hXiyp.js";import{T as se}from"./common-types-Sih75Sav.js";import{M as v,D as h}from"./dialog-Di8hNunM.js";import{B as l}from"./button-VxhoNhrV.js";import{P as te}from"./popover-CzZdWNnB.js";import{I as ne}from"./input-BW9trNAW.js";import{I as ae}from"./input-group-BaRSJAEN.js";import{F as S}from"./field-HrLaMLbx.js";import{M as re}from"./actions-CHgr8eL8.js";import{S as ie}from"./select-C8iu4-uz.js";import{S as de}from"./spacer-BWoNR27H.js";import{T as ce}from"./tooltip-1V7clEnw.js";import{M as P}from"./types-BmbYqTX_.js";import"./index-CF7H4eMJ.js";import"./index-Bk2sglWO.js";import"./portal-GQ0_cLB6.js";import"./index-CUZDtIZe.js";import"./lodash-BHd_uQHh.js";import"./heading-CRNoBc7q.js";import"./help-icon-Buhx5nl6.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./disabled-context-rmpd7YJS.js";import"./spinner-AWUe4xwQ.js";import"./types-UmZ4Y_CR.js";import"./label-CqmyC9he.js";import"./badge-CLQ59MDF.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./text-B3-TSWok.js";import"./select.input-DIKP56UZ.js";const{useArgs:ge}=__STORYBOOK_MODULE_PREVIEW_API__,qe={title:"Modals/Modal",component:v,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(l,{label:"Okay",colored:!0,onClick:()=>{}}),e.jsx(l,{label:"Cancel",onClick:()=>{}})]}),onClose:()=>{}},parameters:{docs:{story:{inline:!1,iframeHeight:400}}}},r=()=>{const[{visible:t,centered:a,...o},n]=ge(),s=()=>{n({visible:!t})};return e.jsxs(e.Fragment,{children:[e.jsx(v,{visible:t,centered:a,children:e.jsx(h,{dialog:{...o,onClose:s}})}),e.jsx(l,{label:"Open Modal",onClick:s})]})},C=r.bind({}),d=r.bind({});d.args={centered:!0};const c=r.bind({});c.args={content:["This is a","new line!"]};const g=r.bind({});g.args={scroll:!0,content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const p=r.bind({});p.args={width:"100%",content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const m=r.bind({});m.args={contentPadding:0};const u=r.bind({});u.args={content:e.jsxs(e.Fragment,{children:[e.jsx(ce,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(de,{}),e.jsx(S,{label:"Custom Select",helpText:"Select an animal",children:e.jsx(ie,{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(S,{label:"Nested Menu",children:e.jsx(re,{maxHeight:"240px",menu:{label:"Menu",trigger:se.DROP_DOWN_BUTTON,sections:[{type:P.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:P.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.jsx(te,{content:e.jsxs(ae,{small:!0,children:[e.jsx(ne,{value:"Value",width:"150px",error:"Bad value"}),e.jsx(l,{colored:!0,label:"Save",onClick:()=>{}}),e.jsx(l,{label:"Cancel",onClick:()=>{}})]}),children:e.jsx(l,{colored:!0,label:"Toggle me",onClick:()=>{}})})]})};const b=()=>{const[t,a]=k.useState(!1),o=()=>{a(!0)},n=()=>{a(!1)},s=()=>{console.log("Submit action"),n()};return e.jsxs(e.Fragment,{children:[e.jsx(v,{visible:t,onEnter:()=>{console.log("Enter"),s()},onEscape:()=>{console.log("Escape"),n()},children:e.jsx(h,{dialog:{heading:"Test key handling",content:e.jsx(ne,{}),footer:e.jsxs(e.Fragment,{children:[e.jsx(l,{label:"Done",colored:"red",onClick:s}),e.jsx(l,{label:"Cancel",onClick:n})]}),onClose:n}})}),e.jsx(l,{label:"Open Modal",onClick:o})]})},M=()=>{const[t,a]=k.useState(!1),o=()=>a(!t),[n,s]=k.useState(!1),x=()=>s(!n);return e.jsxs(e.Fragment,{children:[e.jsx(v,{visible:t,children:e.jsx(h,{dialog:{heading:"Modal 1",content:"Lorem ipsum dolor sit amet",footer:e.jsxs(e.Fragment,{children:[e.jsx(l,{label:"Open modal 2",colored:!0,onClick:x}),e.jsx(v,{visible:n,children:e.jsx(h,{dialog:{heading:"Modal 2",content:"Lorem ipsum dolor sit amet",footer:e.jsx(l,{label:"Close",onClick:x}),onClose:x}})}),e.jsx(l,{label:"Close",onClick:o})]}),onClose:o}})}),e.jsx(l,{label:"Open modal 1",onClick:o})]})},i=r.bind({});i.args={testId:"testId"};i.play=async({canvasElement:t,step:a})=>{const o=t.parentElement?le(t.parentElement):null;await j(o).toBeTruthy(),o&&(await a("Modal should appear when triggered",async()=>{const n=o.getByText("Open Modal");await f.click(n);const s=o.getByTestId("testId");await j(s).toBeInTheDocument()}),await a("Modal should disappear when close button pressed",async()=>{const n=o.getByTestId("testId"),s=o.getByTestId("testId-dismiss");await f.click(s),await j(n).not.toBeInTheDocument()}))};b.__docgenInfo={description:"",methods:[],displayName:"KeyHandle"};M.__docgenInfo={description:"",methods:[],displayName:"MultipleModals"};var y,A,B;C.parameters={...C.parameters,docs:{...(y=C.parameters)==null?void 0:y.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
|
+
}`,...(B=(A=C.parameters)==null?void 0:A.docs)==null?void 0:B.source}}};var T,O,D;d.parameters={...d.parameters,docs:{...(T=d.parameters)==null?void 0:T.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
|
+
}`,...(D=(O=d.parameters)==null?void 0:O.docs)==null?void 0:D.source}}};var V,I,E;c.parameters={...c.parameters,docs:{...(V=c.parameters)==null?void 0:V.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
|
+
}`,...(E=(I=c.parameters)==null?void 0:I.docs)==null?void 0:E.source}}};var w,_,F;g.parameters={...g.parameters,docs:{...(w=g.parameters)==null?void 0:w.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=(_=g.parameters)==null?void 0:_.docs)==null?void 0:F.source}}};var L,N,H;p.parameters={...p.parameters,docs:{...(L=p.parameters)==null?void 0:L.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
|
+
}`,...(H=(N=p.parameters)==null?void 0:N.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:`() => {
|
|
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
|
+
}`,...(R=(W=m.parameters)==null?void 0:W.docs)==null?void 0:R.source}}};var U,G,Y;u.parameters={...u.parameters,docs:{...(U=u.parameters)==null?void 0:U.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
|
+
}`,...(Y=(G=u.parameters)==null?void 0:G.docs)==null?void 0:Y.source}}};var q,z,J;b.parameters={...b.parameters,docs:{...(q=b.parameters)==null?void 0:q.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
|
+
}`,...(J=(z=b.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};var Q,X,Z;M.parameters={...M.parameters,docs:{...(Q=M.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
|
+
}`,...(Z=(X=M.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var $,ee,oe;i.parameters={...i.parameters,docs:{...($=i.parameters)==null?void 0:$.docs,source:{originalSource:`() => {
|
|
201
|
+
const [{
|
|
202
|
+
visible,
|
|
203
|
+
centered,
|
|
204
|
+
...dialogProps
|
|
205
|
+
}, updateArgs] = useArgs();
|
|
206
|
+
const toggleModal = () => {
|
|
207
|
+
updateArgs({
|
|
208
|
+
visible: !visible
|
|
209
|
+
});
|
|
210
|
+
};
|
|
211
|
+
return <>
|
|
212
|
+
<Modal visible={visible} centered={centered}>
|
|
213
|
+
<Dialog dialog={{
|
|
214
|
+
...dialogProps,
|
|
215
|
+
onClose: toggleModal
|
|
216
|
+
}} />
|
|
217
|
+
</Modal>
|
|
218
|
+
<Button label="Open Modal" onClick={toggleModal} />
|
|
219
|
+
</>;
|
|
220
|
+
}`,...(oe=(ee=i.parameters)==null?void 0:ee.docs)==null?void 0:oe.source}}};const ze=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers","KeyHandle","MultipleModals","Test"];export{d as Centered,C as Default,p as FullWidth,b as KeyHandle,c as LineBreak,M as MultipleModals,m as NoContentPadding,g as Scroll,i as Test,u as WithPopoverLayers,ze as __namedExportsOrder,qe as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as G}from"./jsx-runtime-eps93zm2.js";import{r as s}from"./index-DhsZuJvc.js";import{d as v}from"./index-DQs5XS8h.js";import{l as J}from"./lodash-BHd_uQHh.js";import{I as K}from"./input-
|
|
1
|
+
import{j as G}from"./jsx-runtime-eps93zm2.js";import{r as s}from"./index-DhsZuJvc.js";import{d as v}from"./index-DQs5XS8h.js";import{l as J}from"./lodash-BHd_uQHh.js";import{I as K}from"./input-BW9trNAW.js";const P=t=>t?typeof t=="string"?t:J.isArray(t)?t[0]:t.fieldName:"",Q=({name:t,placeholder:N="",disabled:q=!1,error:y=!1,left:V=!1,small:I=!1,width:h="100%",value:u="",onChange:F=()=>{},onFocus:S=()=>{},onBlur:x=()=>{},tabIndex:H=0,testId:L,tooltip:M=null,warning:R=!1,validationCallback:l=()=>{},allowEmpty:j=!1,isInTable:A,groupOrder:B,enableDisplayRounding:T=!1,roundDisplayValue:b})=>{const r=s.useRef(null),[i,f]=s.useState(u),[C,o]=s.useState(null),[c,E]=s.useState(!1),a=P(t),w=e=>{let n=v.validateNumber(e);return j&&e===""||n.valid?{...n,valid:!0,errors:void 0}:n};s.useEffect(()=>{const{valid:e,errors:n}=w(u);if(f(u),e)o(null),l(a,null);else{const m=n&&n.length?n[0]:null;o(m),l(a,m)}},[u,y]);const D=e=>{const n=e.target,{value:m}=n,d=v.cleanNumStr(m.replaceAll(" ","").replaceAll("|","")),{valid:z,errors:g}=w(d);if(z){const p={...e,target:{...e.target,value:d,name:a}};F(p),f(d),o(null),l(a,null)}else{f(d);const p=g&&g.length?g[0]:null;o(p),l(a,p)}};s.useEffect(()=>{if(r&&(r!=null&&r.current)&&T&&c){const e=r.current;e&&setTimeout(()=>{const{length:n}=String(i);e.setSelectionRange(n,n)},0)}},[c]);const O=e=>{E(!0),S(e)},_=e=>{E(!1),x(e)},k=!c&&T?b?b(i):v.roundToFixed(i,2):i;return G.jsx(K,{type:"text",name:a,testId:L,disabled:q,placeholder:N,value:k,onChange:D,onFocus:O,onBlur:_,error:y||C,warning:R,right:!V,small:I,width:h,isInTable:A,groupOrder:B,tabIndex:H,tooltip:M,ref:r},a)};Q.__docgenInfo={description:"",methods:[],displayName:"NumberInput",props:{name:{required:!1,tsType:{name:"union",raw:"string | { fieldName: string }",elements:[{name:"string"},{name:"signature",type:"object",raw:"{ fieldName: string }",signature:{properties:[{key:"fieldName",value:{name:"string",required:!0}}]}}]},description:""},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},error:{required:!1,tsType:{name:"union",raw:"string | boolean",elements:[{name:"string"},{name:"boolean"}]},description:"",defaultValue:{value:"false",computed:!1}},left:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},small:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},width:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"",defaultValue:{value:"'100%'",computed:!1}},value:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"",defaultValue:{value:"''",computed:!1}},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: ChangeEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"ChangeEvent",elements:[{name:"HTMLInputElement"}],raw:"ChangeEvent<HTMLInputElement>"},name:"evt"}],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}},onFocus:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: FocusEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"FocusEvent",elements:[{name:"HTMLInputElement"}],raw:"FocusEvent<HTMLInputElement>"},name:"evt"}],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}},onBlur:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: FocusEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"FocusEvent",elements:[{name:"HTMLInputElement"}],raw:"FocusEvent<HTMLInputElement>"},name:"evt"}],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}},tabIndex:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"0",computed:!1}},testId:{required:!1,tsType:{name:"string"},description:""},tooltip:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | React.ReactNode",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactReactNode",raw:"React.ReactNode"}]},description:"",defaultValue:{value:"null",computed:!1}},warning:{required:!1,tsType:{name:"union",raw:"string | boolean",elements:[{name:"string"},{name:"boolean"}]},description:"",defaultValue:{value:"false",computed:!1}},validationCallback:{required:!1,tsType:{name:"signature",type:"function",raw:`(
|
|
2
2
|
name: string | { fieldName: string },
|
|
3
3
|
error: string | null,
|
|
4
4
|
) => void`,signature:{arguments:[{type:{name:"union",raw:"string | { fieldName: string }",elements:[{name:"string"},{name:"signature",type:"object",raw:"{ fieldName: string }",signature:{properties:[{key:"fieldName",value:{name:"string",required:!0}}]}}]},name:"name"},{type:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},name:"error"}],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}},allowEmpty:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},isInTable:{required:!1,tsType:{name:"boolean"},description:""},groupOrder:{required:!1,tsType:{name:"any"},description:""},enableDisplayRounding:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},roundDisplayValue:{required:!1,tsType:{name:"signature",type:"function",raw:"(args: TStringNumberNull) => TStringNumberNull",signature:{arguments:[{type:{name:"union",raw:"string | number | null",elements:[{name:"string"},{name:"number"},{name:"null"}]},name:"args"}],return:{name:"union",raw:"string | number | null",elements:[{name:"string"},{name:"number"},{name:"null"}]}}},description:""}}};export{Q as N};
|