@oliasoft-open-source/react-ui-library 4.11.0-beta-3 → 4.12.0-beta-1
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-BpSdrNXy.css → index-BU9wzZv9.css} +336 -336
- package/dist/assets/{index-DoFa61ar.js → index-BVCFmQTa.js} +144 -164
- package/dist/index.d.ts +2 -6
- package/dist/index.html +1 -1
- package/dist/index.js +190 -181
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-KGDBMAHA-DeGjmgTY.js → Color-KGDBMAHA-CK3d59Om.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-PKQXORMH-DJIj_qEG.js → DocsRenderer-PKQXORMH-C_QE44cn.js} +1 -1
- package/dist/storybook/assets/{accordion.stories-BTxV-ybU.js → accordion.stories-C3VY77Jy.js} +2 -2
- package/dist/storybook/assets/{actions-D-uVCDzk.js → actions-Bax0KeqM.js} +2 -2
- package/dist/storybook/assets/{actions.stories-gKfuiKQy.js → actions.stories-BnPZKqOJ.js} +1 -1
- package/dist/storybook/assets/{afe.stories-DFQsvqIV.js → afe.stories-C9XjJj62.js} +2 -2
- package/dist/storybook/assets/{badge.stories-Dkq_XgEW.js → badge.stories-DA_eeQyi.js} +1 -1
- package/dist/storybook/assets/{blowout.stories-DHdofVc-.js → blowout.stories-DH-sYHgB.js} +1 -1
- package/dist/storybook/assets/button-Cbv7WK6k.js +1 -0
- package/dist/storybook/assets/button-DtgxLQCF.css +1 -0
- package/dist/storybook/assets/{button-group-1DEZPmxq.js → button-group-D2fGP_bX.js} +1 -1
- package/dist/storybook/assets/{button-group.stories-C4V1k0z_.js → button-group.stories-BETADGti.js} +1 -1
- package/dist/storybook/assets/{button.stories-DA9DGYD2.js → button.stories-C03VvX8K.js} +1 -1
- package/dist/storybook/assets/{buttons-and-links-BHGzZGPV.js → buttons-and-links-FQEbqz9H.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-CJpnsmsZ.js → casing-loads.stories-B7JIoJVk.js} +2 -2
- package/dist/storybook/assets/{cell.stories-Bpl0Squh.js → cell.stories-xZiHEc0P.js} +2 -2
- package/dist/storybook/assets/check-box.stories-BJ0ShmeC.js +97 -0
- package/dist/storybook/assets/check-box.test-case.stories-CzuYZkUh.js +30 -0
- package/dist/storybook/assets/{chunk-HLWAVYOI-D2p4xoma.js → chunk-HLWAVYOI-EhWEisNT.js} +1 -1
- package/dist/storybook/assets/{color-D9KYOiNh.js → color-B3dajHjs.js} +1 -1
- package/dist/storybook/assets/{dialog-BelCA1mt.js → dialog-DkpQscuI.js} +1 -1
- package/dist/storybook/assets/drawer-BVc1xI9q.css +1 -0
- package/dist/storybook/assets/drawer-DaQ1xGjV.js +3 -0
- package/dist/storybook/assets/{drawer.stories-DcjyDHEs.js → drawer.stories-C08XBVTq.js} +1 -1
- package/dist/storybook/assets/{empty.stories-DcwF0pkK.js → empty.stories-L7LSMcLe.js} +1 -1
- package/dist/storybook/assets/enum-Bnn40S8Q.js +1 -0
- package/dist/storybook/assets/{field.stories-DUGMwi1O.js → field.stories-CYpQ669-.js} +1 -1
- package/dist/storybook/assets/{file-button.stories-CU2pZcEO.js → file-button.stories-CRaTdLfv.js} +1 -1
- package/dist/storybook/assets/{file-input-B0-ERX66.js → file-input-yalPf7-m.js} +1 -1
- package/dist/storybook/assets/{file-input.stories-Cpd1NHbq.js → file-input.stories-DMTQqAF8.js} +1 -1
- package/dist/storybook/assets/{flex.stories-BhvJpHpN.js → flex.stories-CLwPyEMp.js} +1 -1
- package/dist/storybook/assets/footer.stories-BxzKeFAK.js +3 -0
- package/dist/storybook/assets/form.stories-BNORsn6Z.js +49 -0
- package/dist/storybook/assets/formation.stories-C5Hkb3iK.js +74 -0
- package/dist/storybook/assets/helpers-JJxzGegQ.js +1 -0
- package/dist/storybook/assets/iframe-DOUoMheZ.js +2 -0
- package/dist/storybook/assets/{index-C0Iaso0O.js → index-AKsHS-dO.js} +4 -4
- package/dist/storybook/assets/{index-CNkaN_wz.js → index-KVAIZqzA.js} +1 -1
- package/dist/storybook/assets/initialize-context-rEvM6bdZ.js +1 -0
- package/dist/storybook/assets/input-Db9WkmPP.js +1 -0
- package/dist/storybook/assets/input-Dz1ZZYN5.css +1 -0
- package/dist/storybook/assets/{input-group.stories-CElwRt3p.js → input-group.stories-BCajsqAk.js} +3 -3
- package/dist/storybook/assets/{input-validation-Ccgprl1C.js → input-validation-BNoUk3q6.js} +2 -2
- package/dist/storybook/assets/{input.stories-FKl0qVhm.js → input.stories-SJy3TKkD.js} +1 -1
- package/dist/storybook/assets/{inputs-DtQ245kS.js → inputs-Dql6Fq32.js} +2 -2
- package/dist/storybook/assets/{layout-forms-Bm7FYA3V.js → layout-forms-DuFo_rwV.js} +5 -5
- package/dist/storybook/assets/{layout-general-V7ekuEG7.js → layout-general-C-UddRr1.js} +1 -1
- package/dist/storybook/assets/{list-bKpz6I9Q.js → list-By3wp5Wa.js} +1 -1
- package/dist/storybook/assets/{list.stories-Cgmt29Wv.js → list.stories-BcDHHHYJ.js} +1 -1
- package/dist/storybook/assets/{list.stories-data-D_Aj3AN4.js → list.stories-data-Doo2Rqun.js} +1 -1
- package/dist/storybook/assets/{loader.stories-pS8zRM4u.js → loader.stories-Q0U2BqZX.js} +1 -1
- package/dist/storybook/assets/menu.stories-1I5AGGQx.js +82 -0
- package/dist/storybook/assets/menu.test-case.stories-BFYhvtSH.js +3 -0
- package/dist/storybook/assets/message-BRyKdRaX.js +1 -0
- package/dist/storybook/assets/message-C2ZCkHX6.css +1 -0
- package/dist/storybook/assets/{message.stories-r_UlbshI.js → message.stories-bCqCYIuN.js} +1 -1
- package/dist/storybook/assets/meta-content-ByVTG0hd.css +1 -0
- package/dist/storybook/assets/meta-content-DNgQbAW0.js +9 -0
- package/dist/storybook/assets/modal.stories-C2d-Em5V.js +200 -0
- package/dist/storybook/assets/modal.test-case.stories-H8AYyvAl.js +21 -0
- package/dist/storybook/assets/{number-input-Bpg4Yqmo.js → number-input-CNnU6gOF.js} +2 -2
- package/dist/storybook/assets/number-input.stories-Bo26PJmJ.js +89 -0
- package/dist/storybook/assets/number-input.test-case.stories-BBKpBWfA.js +92 -0
- package/dist/storybook/assets/{option-dropdown.stories-CIvqMhQ3.js → option-dropdown.stories-CznUbXVi.js} +1 -1
- package/dist/storybook/assets/{padding-and-spacing-IKi7rvQ-.js → padding-and-spacing-B9ObVTUS.js} +1 -1
- package/dist/storybook/assets/{page.stories-DnCh8h8y.js → page.stories-DthnK8qb.js} +1 -1
- package/dist/storybook/assets/{pagination-CLt-kUlx.js → pagination-CR1nxnnq.js} +1 -1
- package/dist/storybook/assets/{pagination.stories-CTRM0Xou.js → pagination.stories-qXmBYwYc.js} +2 -2
- package/dist/storybook/assets/{pop-confirm.stories-DCpooB2O.js → pop-confirm.stories-CHa0qUBe.js} +1 -1
- package/dist/storybook/assets/{popover-rq33c1W2.js → popover-C_2P8LFJ.js} +1 -1
- package/dist/storybook/assets/popover.stories-DZTfimDf.js +10 -0
- package/dist/storybook/assets/{preview-ZgLLfBPl.js → preview-_21fnvwa.js} +2 -2
- package/dist/storybook/assets/{preview-CtQzjqBP.js → preview-dBqj-M8_.js} +1 -1
- package/dist/storybook/assets/projects.stories-BPm6ucAe.js +47 -0
- package/dist/storybook/assets/{radio-button-DmDuw4DA.js → radio-button-C4ljBRED.js} +1 -1
- package/dist/storybook/assets/radio-button.stories-D1rWr6ms.js +61 -0
- package/dist/storybook/assets/radio-button.test-case.stories-DglmHlWs.js +11 -0
- package/dist/storybook/assets/{reservoirs.stories-B12tIrmZ.js → reservoirs.stories-r1Ip90kJ.js} +2 -2
- package/dist/storybook/assets/{rich-text-input-dDjxXFl-.css → rich-text-input-BJfL0Me_.css} +1 -1
- package/dist/storybook/assets/{rich-text-input.stories-DkaOBgbE.js → rich-text-input.stories-DwaseXZv.js} +3 -3
- package/dist/storybook/assets/{row.stories-msEoNdGI.js → row.stories-BrPMTnKK.js} +2 -2
- package/dist/storybook/assets/select-BmYXTl_0.css +1 -0
- package/dist/storybook/assets/select-Cwks-WA0.js +61 -0
- package/dist/storybook/assets/select.input-CJed_LLR.js +1 -0
- package/dist/storybook/assets/select.stories-DjGSNDXK.js +498 -0
- package/dist/storybook/assets/select.stories-data-DxgWKlU6.js +1 -0
- package/dist/storybook/assets/select.test-case.stories-B6On-PjA.js +82 -0
- package/dist/storybook/assets/side-bar-fBbBqyAT.css +1 -0
- package/dist/storybook/assets/side-bar-wpFQ5NEE.js +24 -0
- package/dist/storybook/assets/{side-bar.stories-M6FsuCrQ.js → side-bar.stories-LjClxJcG.js} +1 -1
- package/dist/storybook/assets/{site.stories-umpPYjkq.js → site.stories-BnWmALGd.js} +2 -2
- package/dist/storybook/assets/{slider-C7vnj_3M.js → slider-CcpE4BLD.js} +1 -1
- package/dist/storybook/assets/{slider.stories-BzBb3PkP.js → slider.stories-BqlRLY_C.js} +1 -1
- package/dist/storybook/assets/{smart-upload-modal.stories-xqiXR6jV.js → smart-upload-modal.stories-BlTSF64K.js} +1 -1
- package/dist/storybook/assets/{spacer.stories-BBTt2LdE.js → spacer.stories-BT2S6B0R.js} +1 -1
- package/dist/storybook/assets/table-BtBtDwPu.css +1 -0
- package/dist/storybook/assets/table-iVsvoMpy.js +86 -0
- package/dist/storybook/assets/{table.stories-Clltxls0.js → table.stories-DmGMjcFw.js} +2 -2
- package/dist/storybook/assets/{table.stories-data-C3vJedB1.js → table.stories-data-C7mC5R8Q.js} +1 -1
- package/dist/storybook/assets/{tabs-C3NG6m9W.js → tabs-BoToLVEP.js} +1 -1
- package/dist/storybook/assets/tabs.stories-B52iEaHf.js +30 -0
- package/dist/storybook/assets/{textarea-D6ltcKhz.js → textarea-DflOOrxV.js} +2 -2
- package/dist/storybook/assets/textarea-TqxidmV4.css +1 -0
- package/dist/storybook/assets/{textarea.stories-CJ-Oqytp.js → textarea.stories-CzsqRVpC.js} +1 -1
- package/dist/storybook/assets/{title.stories-CsrYTGde.js → title.stories-D2LDNgbT.js} +3 -3
- package/dist/storybook/assets/{toaster-BoBcvmf9.js → toaster-O8ftrUAJ.js} +1 -1
- package/dist/storybook/assets/toaster.stories-CdpwLBSo.js +84 -0
- package/dist/storybook/assets/toaster.test-case.stories-BhWnh4Cd.js +6 -0
- package/dist/storybook/assets/toggle.stories-BAislK3I.js +106 -0
- package/dist/storybook/assets/toggle.test-case.stories-CeUwdhGD.js +36 -0
- package/dist/storybook/assets/{tooltip.test-case.stories-CHibN8rC.js → tooltip.test-case.stories-De9h8ThH.js} +1 -1
- package/dist/storybook/assets/{top-bar-DkXSzzqt.js → top-bar-Bjf6PQE1.js} +1 -1
- package/dist/storybook/assets/{top-bar.stories-HDmWT243.js → top-bar.stories-1hZmlzDT.js} +1 -1
- package/dist/storybook/assets/{top-bar.testcase.stories-DfmrkEpT.js → top-bar.testcase.stories-BsFYqaw6.js} +1 -1
- package/dist/storybook/assets/{tree.stories-feLUcTtm.js → tree.stories-NGZfmH_B.js} +1 -1
- package/dist/storybook/assets/unit-input-Byipu-z0.js +10 -0
- package/dist/storybook/assets/unit-input.stories-CChVbxmI.js +198 -0
- package/dist/storybook/assets/unit-input.test-case.stories-BwKiucyc.js +220 -0
- package/dist/storybook/assets/unit-table.stories-B7rN0MF0.js +152 -0
- package/dist/storybook/assets/unit-table.test-case.stories-BIMbgiTz.js +1 -0
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/package.json +1 -1
- package/dist/storybook/assets/button-DHevvVBE.js +0 -1
- package/dist/storybook/assets/button-fAxt_G4d.css +0 -1
- package/dist/storybook/assets/check-box.stories-DfbWw6mD.js +0 -126
- package/dist/storybook/assets/drawer-DOWJp9T4.js +0 -3
- package/dist/storybook/assets/drawer-DhrjYsQu.css +0 -1
- package/dist/storybook/assets/footer.stories-DgjDE_JR.js +0 -3
- package/dist/storybook/assets/form.stories-BrUnmw7R.js +0 -49
- package/dist/storybook/assets/formation.stories-BT8VrcqV.js +0 -74
- package/dist/storybook/assets/iframe-B8VgeFPT.js +0 -2
- package/dist/storybook/assets/initialize-context-DOqEe1Xq.js +0 -1
- package/dist/storybook/assets/input-DD7t4kHm.css +0 -1
- package/dist/storybook/assets/input-DTXbDJaL.js +0 -1
- package/dist/storybook/assets/menu.stories-xWX80Eh2.js +0 -84
- package/dist/storybook/assets/message-Cl3kn7ZD.css +0 -1
- package/dist/storybook/assets/message-Y48EomV-.js +0 -1
- package/dist/storybook/assets/meta-content-DWZbURV2.js +0 -9
- package/dist/storybook/assets/meta-content-DnZPPeTF.css +0 -1
- package/dist/storybook/assets/modal.stories-LhoWfDE6.js +0 -220
- package/dist/storybook/assets/number-input.stories-DhCjZ37u.js +0 -180
- package/dist/storybook/assets/popover.stories-CGm0M5fv.js +0 -10
- package/dist/storybook/assets/projects.stories-BQswWVCx.js +0 -47
- package/dist/storybook/assets/radio-button.stories-5gvV0LD0.js +0 -71
- package/dist/storybook/assets/select-DnRuRG_N.js +0 -61
- package/dist/storybook/assets/select-H-9tdhwc.css +0 -1
- package/dist/storybook/assets/select.input-D0UkAPd9.js +0 -1
- package/dist/storybook/assets/select.stories-B9w9ONzj.js +0 -579
- package/dist/storybook/assets/side-bar-CSx5wI-k.js +0 -24
- package/dist/storybook/assets/side-bar-auov230-.css +0 -1
- package/dist/storybook/assets/table-5Y5KPNSk.js +0 -86
- package/dist/storybook/assets/table-B8ojy8Nj.css +0 -1
- package/dist/storybook/assets/tabs.stories-dsXjRHJy.js +0 -30
- package/dist/storybook/assets/textarea-H-YTEwr8.css +0 -1
- package/dist/storybook/assets/toaster.stories-HO4VBTy-.js +0 -89
- package/dist/storybook/assets/toggle.stories-qTHFTXxI.js +0 -141
- package/dist/storybook/assets/unit-input.stories-QnEpR0rY.js +0 -426
- package/dist/storybook/assets/unit-table.stories-BZCc0yfc.js +0 -152
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as h}from"./index-DhsZuJvc.js";import{T as X}from"./common-types-Sih75Sav.js";import{M,D as C}from"./dialog-DkpQscuI.js";import{B as o}from"./button-Cbv7WK6k.js";import{P as Z}from"./popover-C_2P8LFJ.js";import{I as Q}from"./input-Db9WkmPP.js";import{I as $}from"./input-group-BaRSJAEN.js";import{F as j}from"./field-HrLaMLbx.js";import{M as ee}from"./actions-Bax0KeqM.js";import{S as oe}from"./select-Cwks-WA0.js";import{S as le}from"./spacer-BWoNR27H.js";import{T as ne}from"./tooltip-1V7clEnw.js";import{M as k}from"./types-BmbYqTX_.js";import"./index-Bk2sglWO.js";import"./portal-GQ0_cLB6.js";import"./index-CUZDtIZe.js";import"./lodash-c4VUpsOs.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-Dx2TtIG9.js";import"./label-CqmyC9he.js";import"./badge-CLQ59MDF.js";import"./enum-Bnn40S8Q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./text-B3-TSWok.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";const{useArgs:se}=__STORYBOOK_MODULE_PREVIEW_API__,Ke={title:"Modals/Modal",component:M,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:n,centered:r,...s},l]=se(),t=()=>{l({visible:!n})};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:n,centered:r,children:e.jsx(C,{dialog:{...s,onClose:t}})}),e.jsx(o,{label:"Open Modal",onClick:t})]})},v=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(ne,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(le,{}),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 u=()=>{const[n,r]=h.useState(!1),s=()=>{r(!0)},l=()=>{r(!1)},t=()=>{console.log("Submit action"),l()};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:n,onEnter:()=>{console.log("Enter"),t()},onEscape:()=>{console.log("Escape"),l()},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:l})]}),onClose:l}})}),e.jsx(o,{label:"Open Modal",onClick:s})]})},b=()=>{const[n,r]=h.useState(!1),s=()=>r(!n),[l,t]=h.useState(!1),x=()=>t(!l);return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:n,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(M,{visible:l,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})]})};u.__docgenInfo={description:"",methods:[],displayName:"KeyHandle"};b.__docgenInfo={description:"",methods:[],displayName:"MultipleModals"};var f,S,P;v.parameters={...v.parameters,docs:{...(f=v.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=v.parameters)==null?void 0:S.docs)==null?void 0:P.source}}};var A,O,y;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
|
+
}`,...(y=(O=i.parameters)==null?void 0:O.docs)==null?void 0:y.source}}};var B,V,T;d.parameters={...d.parameters,docs:{...(B=d.parameters)==null?void 0:B.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
|
+
}`,...(T=(V=d.parameters)==null?void 0:V.docs)==null?void 0:T.source}}};var D,E,_;c.parameters={...c.parameters,docs:{...(D=c.parameters)==null?void 0:D.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
|
+
}`,...(_=(E=c.parameters)==null?void 0:E.docs)==null?void 0:_.source}}};var F,I,L;g.parameters={...g.parameters,docs:{...(F=g.parameters)==null?void 0:F.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
|
+
}`,...(L=(I=g.parameters)==null?void 0:I.docs)==null?void 0:L.source}}};var N,H,K;p.parameters={...p.parameters,docs:{...(N=p.parameters)==null?void 0:N.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
|
+
}`,...(K=(H=p.parameters)==null?void 0:H.docs)==null?void 0:K.source}}};var W,w,R;m.parameters={...m.parameters,docs:{...(W=m.parameters)==null?void 0:W.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;u.parameters={...u.parameters,docs:{...(U=u.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=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:`() => {
|
|
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=b.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};const We=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers","KeyHandle","MultipleModals"];export{i as Centered,v as Default,g as FullWidth,u as KeyHandle,d as LineBreak,b as MultipleModals,p as NoContentPadding,c as Scroll,m as WithPopoverLayers,We as __namedExportsOrder,Ke as default};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{w as u,e as i,u as d}from"./index-DMAnyMX5.js";import{M as g,D as h}from"./dialog-DkpQscuI.js";import{B as l}from"./button-Cbv7WK6k.js";import"./index-DhsZuJvc.js";import"./index-CF7H4eMJ.js";import"./index-Bk2sglWO.js";import"./portal-GQ0_cLB6.js";import"./index-CUZDtIZe.js";import"./lodash-c4VUpsOs.js";import"./common-types-Sih75Sav.js";import"./heading-CRNoBc7q.js";import"./help-icon-Buhx5nl6.js";import"./tooltip-1V7clEnw.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";const{useArgs:M}=__STORYBOOK_MODULE_PREVIEW_API__,H={title:"Modals/Modal/Test Cases",component:g,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}}},tags:["!autodocs"]},x=()=>{const[{visible:a,centered:n,...t},r]=M(),o=()=>{r({visible:!a})};return e.jsxs(e.Fragment,{children:[e.jsx(g,{visible:a,centered:n,children:e.jsx(h,{dialog:{...t,onClose:o}})}),e.jsx(l,{label:"Open Modal",onClick:o})]})},s=x.bind({});s.args={testId:"testId"};s.play=async({canvasElement:a,step:n})=>{const t=a.parentElement?u(a.parentElement):null;await i(t).toBeTruthy(),t&&(await n("Modal should appear when triggered",async()=>{const r=t.getByText("Open Modal");await d.click(r);const o=t.getByTestId("testId");await i(o).toBeInTheDocument()}),await n("Modal should disappear when close button pressed",async()=>{const r=t.getByTestId("testId"),o=t.getByTestId("testId-dismiss");await d.click(o),await i(r).not.toBeInTheDocument()}))};var c,p,m;s.parameters={...s.parameters,docs:{...(c=s.parameters)==null?void 0:c.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
|
+
}`,...(m=(p=s.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};const K=["Test"];export{s as Test,K as __namedExportsOrder,H as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as R}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJvc.js";import{d as a}from"./index-C0x1JmaP.js";import{K as J,E as Q}from"./
|
|
1
|
+
import{j as R}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJvc.js";import{d as a}from"./index-C0x1JmaP.js";import{K as J,E as Q}from"./enum-Bnn40S8Q.js";import{l as X}from"./lodash-c4VUpsOs.js";import{i as S}from"./helpers-JJxzGegQ.js";import{I as Y}from"./input-Db9WkmPP.js";const $=14,s=n=>String(a.toString(n)),ee=n=>a.isScientificStringNum(n)?n:s(a.roundToPrecision(a.toNum(n),$)),ne=n=>n?typeof n=="string"?n:X.isArray(n)?n[0]:n.fieldName:"",te=({name:n,placeholder:p="",disabled:C=!1,error:b=!1,left:L=!1,small:k=!1,width:x="100%",value:c="",onChange:j=()=>{},onFocus:M=()=>{},onBlur:O=()=>{},tabIndex:H=0,testId:K,tooltip:P=null,warning:_=!1,validationCallback:E=()=>{},allowEmpty:A=!1,isInTable:D,groupOrder:W,enableCosmeticRounding:w=!0,enableDisplayRounding:g=!1,roundDisplayValue:N,disableInternalErrorValidationMessages:B=!1})=>{const y=e=>{const t=a.validateNumber(e);return p&&S(e)?{valid:!0,errors:[]}:A&&e===""||t.valid?{...t,valid:!0,errors:void 0}:t},q=e=>{var d;const t=!!(e!=null&&e.endsWith("0")),f=w&&e&&!t&&((d=y(e))==null?void 0:d.valid)?ee(e):e;return s(f)},i=l.useRef(null),[r,h]=l.useState(q(s(c))),[u,V]=l.useState(!1),o=ne(n),{valid:v,errors:T}=y(r),I=T&&T.length&&!B?T[0]:null;l.useEffect(()=>{const e=q(s(c));a.toNum(r)!==a.toNum(e)&&h(e)},[c,w,g]),l.useEffect(()=>{!u&&!v?E(o,I):E(o,null)},[u,v,b]);const F=e=>{var f,d;const t=e instanceof KeyboardEvent?r:(f=e==null?void 0:e.target)==null?void 0:f.value,m=a.cleanNumStr(t.replaceAll(" ","").replaceAll("|",""));if(h(m),(d=y(m))!=null&&d.valid||p&&S(t)){const z={...e,target:{...e.target,value:a.stripLeadingZeros(s(m)),name:o}};j(z)}};l.useEffect(()=>{if(i&&(i!=null&&i.current)&&g&&u){const e=i.current;e&&setTimeout(()=>{const{length:t}=s(r);e.setSelectionRange(t,t)},0)}},[u]);const U=e=>{V(!0),M(e)},Z=e=>{V(!1),O(e)},G=g&&!u&&v?N?s(N(r)):a.roundToFixed(r,2):r;return R.jsx(J,{handleKeys:[Q.ENTER],onKeyEvent:(e,t)=>F(t),children:R.jsx(Y,{type:"text",name:o,testId:K,disabled:C,placeholder:p,value:G,onChange:F,onFocus:U,onBlur:Z,error:I||b,warning:_,right:!L,small:k,width:x,isInTable:D,groupOrder:W,tabIndex:H,tooltip:P,ref:i},o)})};te.__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:`(
|
|
2
2
|
event: TChangeEvent<T>,
|
|
3
3
|
...additionalProps: { [key: string]: any }[]
|
|
4
4
|
) => void`,signature:{arguments:[{type:{name:"intersection",raw:`ChangeEvent<T> & {
|
|
@@ -13,4 +13,4 @@ import{j as R}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJv
|
|
|
13
13
|
| { name: string; value: any; label?: string; files?: FileList | null }`,elements:[{name:"T"},{name:"signature",type:"object",raw:"{ name: string; value: any; label?: string; files?: FileList | null }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"any",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"files",value:{name:"union",raw:"FileList | null",elements:[{name:"FileList"},{name:"null"}],required:!1}}]}}],required:!0}}]}}]},name:"event"},{type:{name:"Array",elements:[{name:"signature",type:"object",raw:"{ [key: string]: any }",signature:{properties:[{key:{name:"string"},value:{name:"any",required:!0}}]}}],raw:"{ [key: string]: any }[]"},name:"additionalProps",rest:!0}],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:`(
|
|
14
14
|
name: string | { fieldName: string },
|
|
15
15
|
error: string | null,
|
|
16
|
-
) => 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:""},enableCosmeticRounding:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},enableDisplayRounding:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},roundDisplayValue:{required:!1,tsType:{name:"signature",type:"function",raw:"(args: TStringOrNumber) => TStringOrNumber",signature:{arguments:[{type:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},name:"args"}],return:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]}}},description:""},disableInternalErrorValidationMessages:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}}}};export{te as N,ee as r};
|
|
16
|
+
) => 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:""},enableCosmeticRounding:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},enableDisplayRounding:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},roundDisplayValue:{required:!1,tsType:{name:"signature",type:"function",raw:"(args: TStringOrNumber) => TStringOrNumber",signature:{arguments:[{type:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},name:"args"}],return:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]}}},description:""},disableInternalErrorValidationMessages:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}}}};export{te as N,ee as r,s};
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import{j as Q}from"./jsx-runtime-eps93zm2.js";import{d as X}from"./index-C0x1JmaP.js";import{N as q}from"./number-input-CNnU6gOF.js";import"./index-DhsZuJvc.js";import"./index-DRSy5Ssd.js";import"./enum-Bnn40S8Q.js";import"./index-CEuq6vkz.js";import"./lodash-c4VUpsOs.js";import"./helpers-JJxzGegQ.js";import"./input-Db9WkmPP.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";const{useArgs:Z}=__STORYBOOK_MODULE_PREVIEW_API__,he={title:"Forms/NumberInput",component:q,parameters:{canvas:{page:null}},args:{label:"Label"}},e=c=>{const[$,z]=Z(),G=J=>{z({value:J.target.value})};return Q.jsx(q,{onChange:G,value:123,...c})},d=e.bind({}),n=e.bind({});n.args={small:!0};const a=e.bind({});a.args={width:"150px"};const r=e.bind({});r.args={left:!0};const t=e.bind({});t.args={disabled:!0};const s=e.bind({});s.args={allowEmpty:!0,value:""};const u=e.bind({});u.args={warning:"This input number is almost 100!",value:"99"};const o=e.bind({});o.args={error:"This is a error message"};const g=e.bind({});g.args={value:"123test"};const p=e.bind({});p.args={value:"123.123456789",enableDisplayRounding:!0};const l=e.bind({});l.args={value:"123.123456789",enableDisplayRounding:!0,roundDisplayValue:c=>X.roundToFixed(c,4)};var m,i,h;d.parameters={...d.parameters,docs:{...(m=d.parameters)==null?void 0:m.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
|
+
}`,...(h=(i=d.parameters)==null?void 0:i.docs)==null?void 0:h.source}}};var v,C,A;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.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
|
+
}`,...(A=(C=n.parameters)==null?void 0:C.docs)==null?void 0:A.source}}};var b,E,I;a.parameters={...a.parameters,docs:{...(b=a.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
|
+
}`,...(I=(E=a.parameters)==null?void 0:E.docs)==null?void 0:I.source}}};var _,T,L;r.parameters={...r.parameters,docs:{...(_=r.parameters)==null?void 0:_.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
|
+
}`,...(L=(T=r.parameters)==null?void 0:T.docs)==null?void 0:L.source}}};var N,S,D;t.parameters={...t.parameters,docs:{...(N=t.parameters)==null?void 0:N.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
|
+
}`,...(D=(S=t.parameters)==null?void 0:S.docs)==null?void 0:D.source}}};var M,H,y;s.parameters={...s.parameters,docs:{...(M=s.parameters)==null?void 0:M.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
|
+
}`,...(y=(H=s.parameters)==null?void 0:H.docs)==null?void 0:y.source}}};var f,R,W;u.parameters={...u.parameters,docs:{...(f=u.parameters)==null?void 0:f.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
|
+
}`,...(W=(R=u.parameters)==null?void 0:R.docs)==null?void 0:W.source}}};var x,w,O;o.parameters={...o.parameters,docs:{...(x=o.parameters)==null?void 0:x.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
|
+
}`,...(O=(w=o.parameters)==null?void 0:w.docs)==null?void 0:O.source}}};var j,B,F;g.parameters={...g.parameters,docs:{...(j=g.parameters)==null?void 0:j.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
|
+
}`,...(F=(B=g.parameters)==null?void 0:B.docs)==null?void 0:F.source}}};var P,V,K;p.parameters={...p.parameters,docs:{...(P=p.parameters)==null?void 0:P.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
|
+
}`,...(K=(V=p.parameters)==null?void 0:V.docs)==null?void 0:K.source}}};var U,Y,k;l.parameters={...l.parameters,docs:{...(U=l.parameters)==null?void 0:U.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
|
+
}`,...(k=(Y=l.parameters)==null?void 0:Y.docs)==null?void 0:k.source}}};const ve=["Default","Small","Width","Left","Disabled","AllowEmpty","Warning","Error","BadInput","WithDisplayRounding","WithCustomDisplayRounding"];export{s as AllowEmpty,g as BadInput,d as Default,t as Disabled,o as Error,r as Left,n as Small,u as Warning,a as Width,l as WithCustomDisplayRounding,p as WithDisplayRounding,ve as __namedExportsOrder,he as default};
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import{j as a}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJvc.js";import{w as c,u as n,e as o,f as B,a as C}from"./index-DMAnyMX5.js";import{S as x}from"./spacer-BWoNR27H.js";import{G as K}from"./grid-DRkC-bt8.js";import{C as m}from"./card-EcjmryU9.js";import{B as Q}from"./button-Cbv7WK6k.js";import{H as p}from"./heading-CRNoBc7q.js";import{I as ee}from"./input-group-addon-D68iUKV2.js";import{S as te}from"./select-Cwks-WA0.js";import{I as ae}from"./input-group-BaRSJAEN.js";import{F as V}from"./field-HrLaMLbx.js";import{T as R}from"./toggle-BbFVf61v.js";import{T as ne}from"./text-B3-TSWok.js";import{M as se}from"./message-BRyKdRaX.js";import{I as X}from"./icon-BSFY3vDO.js";import{N as u}from"./number-input-CNnU6gOF.js";import"./index-CF7H4eMJ.js";import"./styled-components.browser.esm-BQ9GQzDc.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./spinner-AWUe4xwQ.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./help-icon-Buhx5nl6.js";import"./lodash-c4VUpsOs.js";import"./types-Dx2TtIG9.js";import"./enum-Bnn40S8Q.js";import"./index-CEuq6vkz.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./actions-Bax0KeqM.js";import"./badge-CLQ59MDF.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";import"./label-CqmyC9he.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./index-C0x1JmaP.js";import"./index-DRSy5Ssd.js";import"./input-Db9WkmPP.js";const Ke={title:"Forms/NumberInput/Test Cases",component:u,parameters:{canvas:{page:null}},args:{label:"Label"},tags:["!autodocs"]},v=()=>a.jsxs(ae,{small:!0,children:[a.jsx(u,{value:123}),a.jsx(ee,{children:"to"}),a.jsx(u,{value:123}),a.jsx(te,{options:[{value:"units",label:"units"}],width:"auto",value:"units"})]}),g=()=>{const[r,s]=l.useState("123|m");return a.jsx(u,{name:"example",onChange:t=>s(t.target.value),placeholder:"Type a value...",value:r,testId:"testId"})};g.play=async({canvasElement:r,step:s})=>{const t=c(r),i=c(r.ownerDocument.body);await s("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await o(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await B.mouseOver(e),await o(e.getAttribute("data-error")).toEqual("Must be a numerical value"),await C(()=>{o(i.getByText("Must be a numerical value")).toBeInTheDocument()})})};const y=()=>{const[r,s]=l.useState("123");return a.jsx(u,{value:r,onChange:t=>{s(t.target.value)},testId:"testId",enableDisplayRounding:!0})};y.play=async({canvasElement:r,step:s})=>{const t=c(r);await s("Value should be rounded on blur",async()=>{const i=t.getByTestId("testId");await n.clear(i),await n.type(i,"123.123456789"),await n.click(r),await o(t.getByDisplayValue("123.12")).toBeInTheDocument()}),await s("Full value shown on focus",async()=>{const i=t.getByTestId("testId");await n.click(i),await o(t.getByDisplayValue("123.123456789")).toBeInTheDocument()})};const w=()=>{const[r,s]=l.useState(!0),t=()=>{s(!1),setTimeout(()=>s(!0),0)},[i,e]=l.useState("123");return a.jsxs(K,{columns:"1fr 1fr",gap:!0,children:[a.jsxs(m,{heading:a.jsx(p,{children:"Storage State (Redux)"}),children:[i,a.jsx(x,{}),a.jsx(Q,{label:"Change value",onClick:()=>e(String(Math.floor(Math.random()*100)))})]}),a.jsx(m,{heading:a.jsx(p,{icon:a.jsx(X,{icon:"refresh"}),onIconClick:t,children:"NumberInput"}),children:r&&a.jsx(u,{value:i,onChange:h=>{e(h.target.value)},error:Number(i)>=0?"":"Value must be positive"})})]})},I=()=>{const[r,s]=l.useState(!0),t=()=>{s(!1),setTimeout(()=>s(!0),0)},[i,e]=l.useState(!1),[h,Y]=l.useState(!0),[f,D]=l.useState("0.6889763779527558"),[S,Z]=l.useState(""),$=Number(f)*.3048;return a.jsxs(K,{columns:"1fr 1fr",gap:!0,children:[a.jsxs(m,{heading:a.jsx(p,{children:"Settings"}),children:[a.jsx(V,{label:"Enable display rounding:",labelLeft:!0,labelWidth:200,children:a.jsx(R,{checked:i,onChange:d=>e(d.target.checked)})}),a.jsx(V,{label:"Enable cosmetic rounding:",labelLeft:!0,labelWidth:200,children:a.jsx(R,{checked:h,onChange:d=>Y(d.target.checked)})})]}),a.jsxs(m,{heading:a.jsx(p,{icon:a.jsx(X,{icon:"refresh",testId:"triggerRerenderTestId"}),onIconClick:t,children:"NumberInput (displayed in Meters)"}),children:[a.jsx(ne,{faint:!0,children:"Cosmetic Rounding Test Cases: type 0.21 then return (compare with enableCosmeticRounding on and off)"}),a.jsx(x,{}),r&&a.jsx(u,{name:"Example",value:$,onChange:d=>{const T=String(Number(d.target.value)/.3048);D(T)},enableDisplayRounding:i,enableCosmeticRounding:h,error:Number(f)>=0?"":"Value must be positive",validationCallback:(d,T)=>{Z(T??"")},testId:"testId"})]}),a.jsxs(m,{heading:a.jsx(p,{children:"Storage State / Redux (stored in Feet)"}),children:[f,a.jsx(x,{}),a.jsx(Q,{label:"Change value",onClick:()=>D(String(Math.floor(Math.random()*100)))})]}),a.jsx(m,{heading:a.jsx(p,{children:"Test Validation Callback"}),children:S&&a.jsx(se,{message:{content:S,icon:!0,type:"Error",visible:!0}})})]})};I.play=async({canvasElement:r,step:s})=>{const t=c(r),i=c(r.ownerDocument.body);await s("Can enter decimal values",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123.123456789"),await n.click(r),await o(t.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await s("Can enter scientific notation when storage unit is different",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"-1.12e-3"),await o(t.getByDisplayValue("-1.12e-3")).toBeInTheDocument(),await t.getByTestId("triggerRerenderTestId").click(),await C(()=>{o(t.getByDisplayValue(-.00112)).toBeInTheDocument()})}),await s("Can enter comma decimals (converts to dot)",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123,456"),await o(t.getByDisplayValue("123.456")).toBeInTheDocument()}),await s("Can enter small numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"0.0000000023"),await o(t.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await s("Can enter large numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"999999999999"),await o(t.getByDisplayValue("999999999999")).toBeInTheDocument()}),await s("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await n.click(r),await o(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await o(e.getAttribute("data-error")).toEqual("Must be a numerical value"),await B.mouseOver(e),await C(()=>{o(i.getAllByText("Must be a numerical value").length).toEqual(2)})})};const b=()=>{const[r,s]=l.useState("123");return a.jsx(u,{value:r,onChange:t=>{s(t.target.value)},testId:"testId"})};b.play=async({canvasElement:r,step:s})=>{const t=c(r),i=c(r.ownerDocument.body);await s("Can enter decimal values",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123.123456789"),await o(t.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await s("Can enter scientific notation",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"-1.12e3"),await o(t.getByDisplayValue("-1.12e3")).toBeInTheDocument()}),await s("Can enter comma decimals (converts to dot)",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123,456"),await o(t.getByDisplayValue("123.456")).toBeInTheDocument()}),await s("Can enter small numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"0.0000000023"),await o(t.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await s("Can enter large numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"999999999999"),await o(t.getByDisplayValue("999999999999")).toBeInTheDocument()}),await s("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await o(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await o(e.getAttribute("data-error")).toEqual("Must be a numerical value"),await B.mouseOver(e),await C(()=>{o(i.getByText("Must be a numerical value")).toBeInTheDocument()})})};v.__docgenInfo={description:"",methods:[],displayName:"TestInputGroup"};g.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"Placeholder"};y.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestDisplayRounding"};w.__docgenInfo={description:"",methods:[],displayName:"ManagedTestCase"};I.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"DemoCosmeticRounding"};b.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestUserInput"};var j,k,E;v.parameters={...v.parameters,docs:{...(j=v.parameters)==null?void 0:j.docs,source:{originalSource:`() => <InputGroup small>
|
|
2
|
+
<NumberInput value={123} />
|
|
3
|
+
<InputGroupAddon>to</InputGroupAddon>
|
|
4
|
+
<NumberInput value={123} />
|
|
5
|
+
<Select options={[{
|
|
6
|
+
value: 'units',
|
|
7
|
+
label: 'units'
|
|
8
|
+
}]} width="auto" value="units" />
|
|
9
|
+
</InputGroup>`,...(E=(k=v.parameters)==null?void 0:k.docs)==null?void 0:E.source}}};var N,M,F;g.parameters={...g.parameters,docs:{...(N=g.parameters)==null?void 0:N.docs,source:{originalSource:`() => {
|
|
10
|
+
const [value, setValue] = useState('123|m');
|
|
11
|
+
return <NumberInput name="example" onChange={evt => setValue(evt.target.value)} placeholder="Type a value..." value={value} testId="testId" />;
|
|
12
|
+
}`,...(F=(M=g.parameters)==null?void 0:M.docs)==null?void 0:F.source}}};var _,G,H;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
|
|
13
|
+
const [value, setValue] = useState('123');
|
|
14
|
+
return <NumberInput value={value} onChange={evt => {
|
|
15
|
+
setValue(evt.target.value);
|
|
16
|
+
}} testId="testId" enableDisplayRounding />;
|
|
17
|
+
}`,...(H=(G=y.parameters)==null?void 0:G.docs)==null?void 0:H.source}}};var A,L,q;w.parameters={...w.parameters,docs:{...(A=w.parameters)==null?void 0:A.docs,source:{originalSource:`() => {
|
|
18
|
+
const [visible, setVisible] = useState(true);
|
|
19
|
+
const triggerRerender = () => {
|
|
20
|
+
setVisible(false);
|
|
21
|
+
setTimeout(() => setVisible(true), 0);
|
|
22
|
+
};
|
|
23
|
+
const [value, setValue] = useState('123');
|
|
24
|
+
return <Grid columns="1fr 1fr" gap>
|
|
25
|
+
<Card heading={<Heading>Storage State (Redux)</Heading>}>
|
|
26
|
+
{value}
|
|
27
|
+
<Spacer />
|
|
28
|
+
<Button label="Change value" onClick={() => setValue(String(Math.floor(Math.random() * 100)))} />
|
|
29
|
+
</Card>
|
|
30
|
+
<Card heading={<Heading icon={<Icon icon="refresh" />} onIconClick={triggerRerender}>
|
|
31
|
+
NumberInput
|
|
32
|
+
</Heading>}>
|
|
33
|
+
{visible && <NumberInput value={value} onChange={evt => {
|
|
34
|
+
setValue(evt.target.value);
|
|
35
|
+
}} error={Number(value) >= 0 ? '' : 'Value must be positive'} />}
|
|
36
|
+
</Card>
|
|
37
|
+
</Grid>;
|
|
38
|
+
}`,...(q=(L=w.parameters)==null?void 0:L.docs)==null?void 0:q.source}}};var O,W,P;I.parameters={...I.parameters,docs:{...(O=I.parameters)==null?void 0:O.docs,source:{originalSource:`() => {
|
|
39
|
+
const [visible, setVisible] = useState(true);
|
|
40
|
+
const triggerRerender = () => {
|
|
41
|
+
setVisible(false);
|
|
42
|
+
setTimeout(() => setVisible(true), 0);
|
|
43
|
+
};
|
|
44
|
+
const [enableDisplayRounding, setEnableDisplayRounding] = useState(false);
|
|
45
|
+
const [enableCosmeticRounding, setEnableCosmeticRounding] = useState(true);
|
|
46
|
+
const [valueInFeet, setValueInFeet] = useState('0.6889763779527558');
|
|
47
|
+
const [callBackError, setCallBackError] = useState('');
|
|
48
|
+
const valueInMeters = Number(valueInFeet) * 0.3048;
|
|
49
|
+
return <Grid columns="1fr 1fr" gap>
|
|
50
|
+
<Card heading={<Heading>Settings</Heading>}>
|
|
51
|
+
<Field label="Enable display rounding:" labelLeft labelWidth={200}>
|
|
52
|
+
<Toggle checked={enableDisplayRounding} onChange={evt => setEnableDisplayRounding(evt.target.checked)} />
|
|
53
|
+
</Field>
|
|
54
|
+
<Field label="Enable cosmetic rounding:" labelLeft labelWidth={200}>
|
|
55
|
+
<Toggle checked={enableCosmeticRounding} onChange={evt => setEnableCosmeticRounding(evt.target.checked)} />
|
|
56
|
+
</Field>
|
|
57
|
+
</Card>
|
|
58
|
+
<Card heading={<Heading icon={<Icon icon="refresh" testId="triggerRerenderTestId" />} onIconClick={triggerRerender}>
|
|
59
|
+
NumberInput (displayed in Meters)
|
|
60
|
+
</Heading>}>
|
|
61
|
+
<Text faint>
|
|
62
|
+
Cosmetic Rounding Test Cases: type 0.21 then return (compare with
|
|
63
|
+
enableCosmeticRounding on and off)
|
|
64
|
+
</Text>
|
|
65
|
+
<Spacer />
|
|
66
|
+
{visible && <NumberInput name="Example" value={valueInMeters} onChange={evt => {
|
|
67
|
+
const nextValueInFeet = String(Number(evt.target.value) / 0.3048);
|
|
68
|
+
setValueInFeet(nextValueInFeet); // convert back to ft
|
|
69
|
+
}} enableDisplayRounding={enableDisplayRounding} enableCosmeticRounding={enableCosmeticRounding} error={Number(valueInFeet) >= 0 ? '' : 'Value must be positive'} validationCallback={(name, error) => {
|
|
70
|
+
setCallBackError(error ?? '');
|
|
71
|
+
}} testId="testId" />}
|
|
72
|
+
</Card>
|
|
73
|
+
<Card heading={<Heading>Storage State / Redux (stored in Feet)</Heading>}>
|
|
74
|
+
{valueInFeet}
|
|
75
|
+
<Spacer />
|
|
76
|
+
<Button label="Change value" onClick={() => setValueInFeet(String(Math.floor(Math.random() * 100)))} />
|
|
77
|
+
</Card>
|
|
78
|
+
<Card heading={<Heading>Test Validation Callback</Heading>}>
|
|
79
|
+
{callBackError && <Message message={{
|
|
80
|
+
content: callBackError,
|
|
81
|
+
icon: true,
|
|
82
|
+
type: 'Error',
|
|
83
|
+
visible: true
|
|
84
|
+
}} />}
|
|
85
|
+
</Card>
|
|
86
|
+
</Grid>;
|
|
87
|
+
}`,...(P=(W=I.parameters)==null?void 0:W.docs)==null?void 0:P.source}}};var U,z,J;b.parameters={...b.parameters,docs:{...(U=b.parameters)==null?void 0:U.docs,source:{originalSource:`() => {
|
|
88
|
+
const [value, setValue] = useState('123');
|
|
89
|
+
return <NumberInput value={value} onChange={evt => {
|
|
90
|
+
setValue(evt.target.value);
|
|
91
|
+
}} testId="testId" />;
|
|
92
|
+
}`,...(J=(z=b.parameters)==null?void 0:z.docs)==null?void 0:J.source}}};const Qe=["TestInputGroup","Placeholder","TestDisplayRounding","ManagedTestCase","DemoCosmeticRounding","TestUserInput"];export{I as DemoCosmeticRounding,w as ManagedTestCase,g as Placeholder,y as TestDisplayRounding,v as TestInputGroup,b as TestUserInput,Qe as __namedExportsOrder,Ke as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as n}from"./jsx-runtime-eps93zm2.js";import{T as A}from"./common-types-Sih75Sav.js";import{M as C}from"./actions-
|
|
1
|
+
import{j as n}from"./jsx-runtime-eps93zm2.js";import{T as A}from"./common-types-Sih75Sav.js";import{M as C}from"./actions-Bax0KeqM.js";import{c as E}from"./index-Bk2sglWO.js";import{C as O}from"./check-box-DPLaOkRR.js";import{D as y}from"./divider-DY9nJ_7N.js";import"./index-DhsZuJvc.js";import"./lodash-c4VUpsOs.js";import"./disabled-context-rmpd7YJS.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.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";import"./types-BmbYqTX_.js";import"./types-Dx2TtIG9.js";import"./badge-CLQ59MDF.js";import"./help-icon-Buhx5nl6.js";import"./text-B3-TSWok.js";const D="_menu_12x4u_1",I="_header_12x4u_11",L="_item_12x4u_27",F="_heading_12x4u_32",p={menu:D,header:I,item:L,heading:F},w=({option:e,onChange:r})=>{const{key:i,label:l,selected:a}=e;return n.jsx("div",{className:p.item,children:n.jsx(O,{label:l,noMargin:!0,checked:a,onChange:r})},i)};w.__docgenInfo={description:"",methods:[],displayName:"Option",props:{option:{required:!0,tsType:{name:"signature",type:"object",raw:`{
|
|
2
2
|
key?: string;
|
|
3
3
|
label?: string | null;
|
|
4
4
|
selected?: boolean;
|
package/dist/storybook/assets/{padding-and-spacing-IKi7rvQ-.js → padding-and-spacing-B9ObVTUS.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{useMDXComponents as r}from"./index-BcNHZKhG.js";import{Z as t}from"./index-
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{useMDXComponents as r}from"./index-BcNHZKhG.js";import{Z as t}from"./index-AKsHS-dO.js";import"./index-DhsZuJvc.js";import"./iframe-DOUoMheZ.js";import"../sb-preview/runtime.js";import"./index-CUZDtIZe.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./index-D6rZ4wEC.js";function i(s){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Padding, Margin & Size"}),`
|
|
2
2
|
`,e.jsx(n.h1,{id:"padding-margin--size",children:"Padding, Margin & Size"}),`
|
|
3
3
|
`,e.jsx(n.h2,{id:"padding--margin",children:"Padding & Margin"}),`
|
|
4
4
|
`,e.jsx(n.p,{children:"There are standard CSS spacing variables for padding and margin."}),`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{P as i}from"./page-7SSpdYhb.js";import{T as d}from"./top-bar-
|
|
1
|
+
import{j as e}from"./jsx-runtime-eps93zm2.js";import{P as i}from"./page-7SSpdYhb.js";import{T as d}from"./top-bar-Bjf6PQE1.js";import{S as c}from"./side-bar-wpFQ5NEE.js";import{H as s}from"./heading-CRNoBc7q.js";import{L as D}from"./logo-BVP9045W.js";import"./index-DhsZuJvc.js";import"./index-Bk2sglWO.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./disabled-context-rmpd7YJS.js";import"./common-types-Sih75Sav.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./actions-Bax0KeqM.js";import"./lodash-c4VUpsOs.js";import"./types-BmbYqTX_.js";import"./types-Dx2TtIG9.js";import"./badge-CLQ59MDF.js";import"./index-BI4_Bp97.js";import"./drawer-DaQ1xGjV.js";import"./help-icon-Buhx5nl6.js";const W="_printHeader_o7xxx_1",L={printHeader:W},I=({logo:F,alt:V,logoWidth:C="100px"})=>e.jsx("img",{src:F,alt:V,className:L.printHeader,style:{width:C}});I.__docgenInfo={description:"",methods:[],displayName:"PrintHeader",props:{logo:{required:!0,tsType:{name:"string"},description:""},logoWidth:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"",defaultValue:{value:"'100px'",computed:!1}},alt:{required:!0,tsType:{name:"string"},description:""}}};const t="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum velit vitae dolor eleifend, quis cursus tortor tempor. Etiam laoreet tempor turpis ut tristique. In hac habitasse platea dictumst. Ut viverra vestibulum facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur commodo egestas magna, at molestie quam euismod ut. Aliquam suscipit at velit vel venenatis. Morbi rhoncus odio neque, volutpat finibus risus hendrerit quis. Sed vitae justo at elit dictum semper. Suspendisse non luctus nulla. Suspendisse condimentum tellus ac elit ornare porttitor. In dignissim libero erat, eget varius nisl tincidunt sed. Duis vel viverra dolor. Mauris nisl lorem, consectetur sed ullamcorper consequat, dictum eu diam. Fusce pretium velit vitae urna tempor, id luctus velit lacinia. Suspendisse lacinia, ante eget egestas mollis, magna magna imperdiet lacus, vitae molestie purus urna et ipsum. Nulla facilisi. Nam augue sapien, dapibus id nunc a, iaculis vulputate urna. Nullam sit amet rutrum tortor. Fusce vel augue vel orci porttitor auctor. Vivamus pulvinar urna quam, non posuere lorem mollis fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque porta odio quis urna pulvinar hendrerit. Nam eros sapien, cursus at maximus id, suscipit et erat. Praesent semper consectetur lacus eu suscipit. In mi ex, feugiat sagittis facilisis ut, fermentum quis mi. Nunc egestas tempor pharetra. Nulla condimentum massa non facilisis bibendum. Sed at justo eget massa lobortis ultricies sit amet eu ex. Nullam auctor ex ac elit laoreet, vitae convallis sem egestas. Maecenas gravida eros sit amet orci dapibus, rutrum gravida nisl finibus. Pellentesque vitae lorem vulputate, accumsan ligula quis, rhoncus urna. Vestibulum velit ex, venenatis ut sagittis id, malesuada vel diam. Suspendisse et turpis eu metus luctus fermentum at consectetur est. Suspendisse sit amet tincidunt dolor. Curabitur imperdiet congue urna in fringilla. Donec nec accumsan purus. Cras et blandit turpis. Curabitur sed libero nibh. Morbi scelerisque, metus vel cursus dapibus, quam lorem placerat odio, at rhoncus diam diam eget nisi. Nulla sagittis posuere ex, vel scelerisque justo egestas vel. Duis aliquam mollis est id tristique. Ut eros libero, faucibus sed ante sit amet, euismod condimentum dolor. Aenean feugiat augue tortor, id egestas tellus porta eu. Maecenas sed dui vitae erat fringilla lacinia. Etiam nisi felis, rhoncus nec vestibulum vel, mattis eget ligula. Cras sed quam sed nisi mollis eleifend. Nulla commodo, dolor nec bibendum finibus, lorem quam tincidunt lectus, sed volutpat lorem ligula vitae leo. Aliquam efficitur eu felis at dignissim. Fusce auctor eleifend justo, ut varius sapien ullamcorper mattis. Curabitur suscipit pellentesque augue sed bibendum.",le={title:"Layout/Page",component:i,parameters:{layout:"fullscreen",docs:{story:{inline:!1,iframeHeight:400}}},argTypes:{top:{control:"text"},left:{control:"text"},padding:{control:{type:"boolean"}}}},a=()=>e.jsxs(e.Fragment,{children:[e.jsx(d,{}),e.jsx(c,{options:{title:"",sections:[]}}),e.jsxs(i,{children:[e.jsx(s,{top:!0,children:"Heading"}),t]})]}),r=()=>e.jsxs(e.Fragment,{children:[e.jsx(d,{}),e.jsx(c,{options:{title:"",sections:[]}}),e.jsxs(i,{padding:!1,children:[e.jsx(s,{top:!0,children:"Heading"}),t]})]}),o=()=>e.jsxs(e.Fragment,{children:[e.jsx(d,{}),e.jsx(c,{options:{title:"",sections:[]}}),e.jsxs(i,{scroll:!1,children:[e.jsx(s,{top:!0,children:"Heading"}),t]})]}),n=()=>e.jsxs(e.Fragment,{children:[e.jsx(c,{options:{title:"",sections:[]}}),e.jsxs(i,{top:0,children:[e.jsx(s,{top:!0,children:"Heading"}),t]})]}),u=()=>e.jsxs(e.Fragment,{children:[e.jsx(d,{}),e.jsxs(i,{left:0,children:[e.jsx(s,{top:!0,children:"Heading"}),t]})]}),l=()=>e.jsxs(e.Fragment,{children:[e.jsx(I,{logo:D,logoWidth:"60px",alt:"company logo"}),e.jsx(d,{}),e.jsx(c,{options:{title:"",sections:[]}}),e.jsxs(i,{children:[e.jsx(s,{top:!0,children:"Heading"}),t]})]});a.__docgenInfo={description:"",methods:[],displayName:"Default"};r.__docgenInfo={description:"",methods:[],displayName:"NoPadding"};o.__docgenInfo={description:"",methods:[],displayName:"NoScroll"};n.__docgenInfo={description:"",methods:[],displayName:"NoTopBar"};u.__docgenInfo={description:"",methods:[],displayName:"NoSideBar"};l.__docgenInfo={description:"",methods:[],displayName:"WithPrintHeader"};var m,p,g;a.parameters={...a.parameters,docs:{...(m=a.parameters)==null?void 0:m.docs,source:{originalSource:`() => <>
|
|
2
2
|
<TopBar />
|
|
3
3
|
<SideBar options={{
|
|
4
4
|
title: '',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-eps93zm2.js";import{r as b}from"./index-DhsZuJvc.js";import{I as l}from"./common-types-Sih75Sav.js";import{S as C}from"./select-
|
|
1
|
+
import{j as o}from"./jsx-runtime-eps93zm2.js";import{r as b}from"./index-DhsZuJvc.js";import{I as l}from"./common-types-Sih75Sav.js";import{S as C}from"./select-Cwks-WA0.js";import{I}from"./input-Db9WkmPP.js";import{B as p}from"./button-Cbv7WK6k.js";import{I as N}from"./input-group-BaRSJAEN.js";import{I as j}from"./input-group-addon-D68iUKV2.js";const E=(n,i)=>i||n&&n.reduce((e,t)=>t.selected?Number(t.value):e,10)||10,_=(n,i)=>{if(!i||!n)return 10;const{options:e,value:t}=i,a=Number(t);return a===0?1:Math.ceil(n/E(e,a))},S=(n,i,e="Selected page must be a positive whole number between 1 and")=>{const t=`${e} ${i}`,a={valid:!0,error:null};return n===""?a:!n.match(/^\d+$/g)||parseInt(n)<=0||parseInt(n)>i?{valid:!1,error:t}:a},P="_paginationContainer_1tmz4_1",R={paginationContainer:P},T=({pagination:n})=>{const{rowCount:i,selectedPage:e,small:t,onSelectPage:a,rowsPerPage:r,errorMessageTemplate:g,testIds:m}=n,d=Number(r==null?void 0:r.value)===0,u=_(i,r),[f,h]=b.useState(String(e));b.useEffect(()=>{h(String(e))},[e]);const{error:v}=S(f,u,g),c=s=>{const{valid:x}=S(s,u,g);h(s),x&&s!==""&&a&&a(Number(s))};return o.jsxs("div",{className:R.paginationContainer,children:[r&&o.jsx("div",{style:{flexShrink:0},children:o.jsx(C,{onChange:s=>{r.onChange&&r.onChange(s),c(String(1))},options:r.options,native:!!r.options,small:t,width:"auto",value:r.value})}),o.jsx(p,{small:t,round:!0,basic:!0,icon:l.CHEVRON_DOUBLE_LEFT,onClick:()=>c(String(1)),disabled:d||e===1}),o.jsx(p,{small:t,round:!0,basic:!0,icon:l.CHEVRON_LEFT,onClick:()=>c(String(Number(e)-1)),disabled:d||e===1}),o.jsxs(N,{small:t,width:"auto",children:[o.jsx(I,{right:!0,value:f,placeholder:String(e),onChange:s=>c(s.target.value),width:"50px",disabled:d||u<=1,error:v}),o.jsxs(j,{children:["of ",u]})]}),o.jsx(p,{small:t,round:!0,basic:!0,icon:l.CHEVRON_RIGHT,onClick:()=>c(String(Number(e)+1)),disabled:d||e===u}),o.jsx(p,{small:t,round:!0,basic:!0,icon:l.CHEVRON_DOUBLE_RIGHT,onClick:()=>c(String(u)),disabled:d||e===u,testId:m==null?void 0:m.doubleRightBtn})]})};T.__docgenInfo={description:"",methods:[],displayName:"Pagination",props:{pagination:{required:!0,tsType:{name:"IPagination"},description:""}}};export{T as P};
|
package/dist/storybook/assets/{pagination.stories-CTRM0Xou.js → pagination.stories-qXmBYwYc.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as p}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJvc.js";import{P as g}from"./pagination-
|
|
1
|
+
import{j as p}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJvc.js";import{P as g}from"./pagination-CR1nxnnq.js";import"./common-types-Sih75Sav.js";import"./select-Cwks-WA0.js";import"./lodash-c4VUpsOs.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./enum-Bnn40S8Q.js";import"./index-CEuq6vkz.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./text-B3-TSWok.js";import"./actions-Bax0KeqM.js";import"./button-Cbv7WK6k.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./badge-CLQ59MDF.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";import"./input-Db9WkmPP.js";import"./input-group-BaRSJAEN.js";import"./input-group-addon-D68iUKV2.js";const h={rowCount:500,selectedPage:1,onSelectPage:()=>{}},X={title:"Basic/Pagination",component:g,args:{pagination:h}},n=()=>{const[a,t]=l.useState(1);return p.jsx(g,{pagination:{rowCount:500,selectedPage:a,onSelectPage:o=>t(o)}})},r=()=>{const[a,t]=l.useState(1),[o,i]=l.useState(20);return p.jsx(g,{pagination:{rowCount:500,selectedPage:a,rowsPerPage:{onChange:e=>i(Number(e.target.value)),options:[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],value:o},onSelectPage:e=>t(e)}})},s=()=>{const[a,t]=l.useState(1),[o,i]=l.useState(20);return p.jsx(g,{pagination:{small:!0,rowCount:500,selectedPage:a,rowsPerPage:{onChange:e=>i(Number(e.target.value)),options:[{label:"10 / page",value:10},{label:"20 / page",value:20},{label:"50 / page",value:50},{label:"Show all",value:0}],value:o},onSelectPage:e=>t(e)}})};n.__docgenInfo={description:"",methods:[],displayName:"Default"};r.__docgenInfo={description:"",methods:[],displayName:"RowsPerPage"};s.__docgenInfo={description:"",methods:[],displayName:"Small"};var P,c,u;n.parameters={...n.parameters,docs:{...(P=n.parameters)==null?void 0:P.docs,source:{originalSource:`() => {
|
|
2
2
|
const [selectedPage, setSelectedPage] = useState(1);
|
|
3
3
|
return <Pagination pagination={{
|
|
4
4
|
rowCount: 500,
|
|
@@ -56,4 +56,4 @@ import{j as p}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJv
|
|
|
56
56
|
},
|
|
57
57
|
onSelectPage: evt => setSelectedPage(evt)
|
|
58
58
|
}} />;
|
|
59
|
-
}`,...(b=(w=s.parameters)==null?void 0:w.docs)==null?void 0:b.source}}};const
|
|
59
|
+
}`,...(b=(w=s.parameters)==null?void 0:w.docs)==null?void 0:b.source}}};const Y=["Default","RowsPerPage","Small"];export{n as Default,r as RowsPerPage,s as Small,Y as __namedExportsOrder,X as default};
|
package/dist/storybook/assets/{pop-confirm.stories-DCpooB2O.js → pop-confirm.stories-CHa0qUBe.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-eps93zm2.js";import{P as S}from"./popover-
|
|
1
|
+
import{j as t}from"./jsx-runtime-eps93zm2.js";import{P as S}from"./popover-C_2P8LFJ.js";import{B as u}from"./button-Cbv7WK6k.js";import{T as I}from"./text-B3-TSWok.js";import{t as A}from"./toaster-O8ftrUAJ.js";import"./index-DhsZuJvc.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.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"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./toaster-7wnI6hqB.js";import"./message-BRyKdRaX.js";const R="_popConfirm_1x6ye_1",$="_content_1x6ye_7",W="_buttons_1x6ye_13",y={popConfirm:R,content:$,buttons:W},O=({title:e,okText:p,onClickOk:d,disableConfirmButton:m,cancelText:f,onClickCancel:g,close:a,testId:o})=>t.jsxs("div",{className:y.popConfirm,children:[e&&t.jsx("div",{className:y.content,children:t.jsx(I,{small:!0,children:e})}),t.jsxs("div",{className:y.buttons,children:[t.jsx(u,{small:!0,colored:!0,label:p,onClick:()=>d(a),disabled:m,testId:`${o}-ok-button`}),t.jsx(u,{small:!0,label:f,onClick:()=>g(a),testId:`${o}-cancel-button`})]})]});O.__docgenInfo={description:"",methods:[],displayName:"Content",props:{title:{required:!1,tsType:{name:"string"},description:""},okText:{required:!0,tsType:{name:"string"},description:""},onClickOk:{required:!0,tsType:{name:"signature",type:"function",raw:"(close?: TEmpty) => void",signature:{arguments:[{type:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},name:"close"}],return:{name:"void"}}},description:""},disableConfirmButton:{required:!1,tsType:{name:"boolean"},description:""},cancelText:{required:!0,tsType:{name:"string"},description:""},onClickCancel:{required:!0,tsType:{name:"signature",type:"function",raw:"(close?: TEmpty) => void",signature:{arguments:[{type:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},name:"close"}],return:{name:"void"}}},description:""},close:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};const v=({children:e,placement:p="top-center",closeOnOutsideClick:d=!0,fullWidth:m=!1,title:f="",cancelText:g="Cancel",onClickCancel:a=i=>i&&i(),okText:o="Ok",onClickOk:D=()=>{},disableConfirmButton:E=!1,overflowContainer:N=!1,testId:C=void 0})=>{const i=t.jsx(O,{title:f,okText:o,onClickOk:D,disableConfirmButton:E,cancelText:g,onClickCancel:a,testId:C});return t.jsx(S,{content:i,placement:p,closeOnOutsideClick:d,fullWidth:m,overflowContainer:N,testId:C,children:e})};v.__docgenInfo={description:"",methods:[],displayName:"PopConfirm",props:{children:{required:!1,tsType:{name:"ReactNode"},description:""},placement:{required:!1,tsType:{name:"Placement"},description:"",defaultValue:{value:"'top-center'",computed:!1}},closeOnOutsideClick:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},fullWidth:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},title:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},cancelText:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'Cancel'",computed:!1}},onClickCancel:{required:!1,tsType:{name:"signature",type:"function",raw:"(close?: TEmpty) => void",signature:{arguments:[{type:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},name:"close"}],return:{name:"void"}}},description:"",defaultValue:{value:"(close) => close && close()",computed:!1}},disableConfirmButton:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},okText:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'Ok'",computed:!1}},onClickOk:{required:!1,tsType:{name:"signature",type:"function",raw:"(close?: TEmpty) => void",signature:{arguments:[{type:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},name:"close"}],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}},overflowContainer:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},testId:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"undefined",computed:!0}}}};const Y=e=>{A({message:{type:"Success",content:"success!",details:"You successfully booked your cruise to Bahamas."}}),e()},oe={title:"Basic/PopConfirm",component:v,args:{title:"Do you want a free cruise to Bahamas?",onClickCancel:e=>e(),onClickOk:Y,children:t.jsx(u,{label:"Click me!"}),overflowContainer:!0,placement:"top-center"},decorators:[e=>t.jsx("div",{style:{display:"flex",justifyContent:"center"},children:e()})],parameters:{docs:{source:{excludeDecorators:!0}}}},c=e=>t.jsx(v,{...e}),l=c.bind({}),r=c.bind({});r.args={children:t.jsx(u,{small:!0,round:!0,basic:!0,colored:"muted",icon:"delete"})};const s=c.bind({});s.args={placement:"bottom-end"};const n=c.bind({});n.args={disableConfirmButton:!0};var x,b,T;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:`args => <PopConfirm
|
|
2
2
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
3
3
|
{...args} />`,...(T=(b=l.parameters)==null?void 0:b.docs)==null?void 0:T.source}}};var k,q,j;r.parameters={...r.parameters,docs:{...(k=r.parameters)==null?void 0:k.docs,source:{originalSource:`args => <PopConfirm
|
|
4
4
|
// eslint-disable-next-line react/jsx-props-no-spreading
|