@oliasoft-open-source/react-ui-library 4.11.0-beta-3 → 4.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/dist/404.html +1 -0
  2. package/dist/index.js +78 -58
  3. package/dist/index.js.map +1 -1
  4. package/dist/storybook/assets/{Color-KGDBMAHA-DeGjmgTY.js → Color-KGDBMAHA-C4DMqLTk.js} +1 -1
  5. package/dist/storybook/assets/{DocsRenderer-PKQXORMH-DJIj_qEG.js → DocsRenderer-PKQXORMH-4sK5I5fh.js} +1 -1
  6. package/dist/storybook/assets/{accordion.stories-BTxV-ybU.js → accordion.stories-BSRBp5Mg.js} +2 -2
  7. package/dist/storybook/assets/{afe.stories-DFQsvqIV.js → afe.stories-DM18uTAa.js} +2 -2
  8. package/dist/storybook/assets/{buttons-and-links-BHGzZGPV.js → buttons-and-links-BAJT7RF7.js} +1 -1
  9. package/dist/storybook/assets/{casing-loads.stories-CJpnsmsZ.js → casing-loads.stories-CE6GJ021.js} +2 -2
  10. package/dist/storybook/assets/{cell.stories-Bpl0Squh.js → cell.stories-BkZwSf40.js} +2 -2
  11. package/dist/storybook/assets/check-box.stories-BJ0ShmeC.js +97 -0
  12. package/dist/storybook/assets/check-box.test-case.stories-CzuYZkUh.js +30 -0
  13. package/dist/storybook/assets/{chunk-HLWAVYOI-D2p4xoma.js → chunk-HLWAVYOI-wyESLsMA.js} +1 -1
  14. package/dist/storybook/assets/{color-D9KYOiNh.js → color-CXm-Xks7.js} +1 -1
  15. package/dist/storybook/assets/enum-Bnn40S8Q.js +1 -0
  16. package/dist/storybook/assets/footer.stories-C1SojIiD.js +3 -0
  17. package/dist/storybook/assets/form.stories-BLcmnfy8.js +49 -0
  18. package/dist/storybook/assets/{formation.stories-BT8VrcqV.js → formation.stories-DZ9-Ct5F.js} +2 -2
  19. package/dist/storybook/assets/helpers-JJxzGegQ.js +1 -0
  20. package/dist/storybook/assets/iframe-DGCZgYKU.js +2 -0
  21. package/dist/storybook/assets/{index-C0Iaso0O.js → index-D-ApmKaY.js} +88 -88
  22. package/dist/storybook/assets/{index-CNkaN_wz.js → index-DHATsyTR.js} +1 -1
  23. package/dist/storybook/assets/{input-group.stories-CElwRt3p.js → input-group.stories-EhmORqH9.js} +3 -3
  24. package/dist/storybook/assets/{input-validation-Ccgprl1C.js → input-validation-BdnKKR1J.js} +2 -2
  25. package/dist/storybook/assets/{inputs-DtQ245kS.js → inputs-Cpi6xZLB.js} +2 -2
  26. package/dist/storybook/assets/{layout-forms-Bm7FYA3V.js → layout-forms-DxC0zO_Y.js} +5 -5
  27. package/dist/storybook/assets/{layout-general-V7ekuEG7.js → layout-general-Be4RMwPl.js} +1 -1
  28. package/dist/storybook/assets/menu.stories-DLJSzJa-.js +82 -0
  29. package/dist/storybook/assets/menu.test-case.stories-DyrNbGBs.js +3 -0
  30. package/dist/storybook/assets/modal.stories-DOgeTuHT.js +200 -0
  31. package/dist/storybook/assets/modal.test-case.stories-DQ1Izuq6.js +21 -0
  32. package/dist/storybook/assets/{number-input-Bpg4Yqmo.js → number-input-CJJvhIIv.js} +1 -1
  33. package/dist/storybook/assets/number-input.stories-CKVq60XH.js +89 -0
  34. package/dist/storybook/assets/number-input.test-case.stories-Dh1F7N8M.js +92 -0
  35. package/dist/storybook/assets/{padding-and-spacing-IKi7rvQ-.js → padding-and-spacing-BZdh5XRo.js} +1 -1
  36. package/dist/storybook/assets/{pagination-CLt-kUlx.js → pagination-DWc8zp3k.js} +1 -1
  37. package/dist/storybook/assets/{pagination.stories-CTRM0Xou.js → pagination.stories-B5cOvzik.js} +2 -2
  38. package/dist/storybook/assets/popover.stories-p9_-pH_Q.js +10 -0
  39. package/dist/storybook/assets/{preview-ZgLLfBPl.js → preview-B3bzTGOp.js} +2 -2
  40. package/dist/storybook/assets/{preview-CtQzjqBP.js → preview-NGnahGuq.js} +1 -1
  41. package/dist/storybook/assets/{projects.stories-BQswWVCx.js → projects.stories-Co_WnKSx.js} +2 -2
  42. package/dist/storybook/assets/{radio-button-DmDuw4DA.js → radio-button-C4ljBRED.js} +1 -1
  43. package/dist/storybook/assets/radio-button.stories-D1rWr6ms.js +61 -0
  44. package/dist/storybook/assets/radio-button.test-case.stories-DglmHlWs.js +11 -0
  45. package/dist/storybook/assets/{reservoirs.stories-B12tIrmZ.js → reservoirs.stories-UW_8sofe.js} +2 -2
  46. package/dist/storybook/assets/{rich-text-input.stories-DkaOBgbE.js → rich-text-input.stories-CK_OTGiV.js} +3 -3
  47. package/dist/storybook/assets/{row.stories-msEoNdGI.js → row.stories-D11wLSt6.js} +2 -2
  48. package/dist/storybook/assets/select-03uRbc4I.js +61 -0
  49. package/dist/storybook/assets/select.input-CJed_LLR.js +1 -0
  50. package/dist/storybook/assets/select.stories-Bpffz9TF.js +498 -0
  51. package/dist/storybook/assets/select.stories-data-DxgWKlU6.js +1 -0
  52. package/dist/storybook/assets/select.test-case.stories-DwDNDHax.js +82 -0
  53. package/dist/storybook/assets/{site.stories-umpPYjkq.js → site.stories-ZGohyW6Z.js} +2 -2
  54. package/dist/storybook/assets/{table-5Y5KPNSk.js → table-DyOsClUv.js} +1 -1
  55. package/dist/storybook/assets/{table.stories-Clltxls0.js → table.stories-C1GgZCCR.js} +2 -2
  56. package/dist/storybook/assets/{tabs-C3NG6m9W.js → tabs-BoToLVEP.js} +1 -1
  57. package/dist/storybook/assets/tabs.stories-B52iEaHf.js +30 -0
  58. package/dist/storybook/assets/{title.stories-CsrYTGde.js → title.stories-jatDyjoM.js} +3 -3
  59. package/dist/storybook/assets/toaster.stories-G6nKp3uV.js +84 -0
  60. package/dist/storybook/assets/toaster.test-case.stories-CCHTh_U1.js +6 -0
  61. package/dist/storybook/assets/toggle.stories-BAislK3I.js +106 -0
  62. package/dist/storybook/assets/toggle.test-case.stories-CeUwdhGD.js +36 -0
  63. package/dist/storybook/assets/{tooltip.test-case.stories-CHibN8rC.js → tooltip.test-case.stories-C0wxGvKJ.js} +1 -1
  64. package/dist/storybook/assets/unit-input-CooRJQnF.js +10 -0
  65. package/dist/storybook/assets/unit-input.stories-zmSrl6iW.js +198 -0
  66. package/dist/storybook/assets/unit-input.test-case.stories-C1xRJ1EZ.js +220 -0
  67. package/dist/storybook/assets/unit-table.stories-Bl2gHPKG.js +152 -0
  68. package/dist/storybook/assets/unit-table.test-case.stories-DpSewGv4.js +1 -0
  69. package/dist/storybook/assets/use-previous-D775JrO6.js +1 -0
  70. package/dist/storybook/iframe.html +1 -1
  71. package/dist/storybook/index.json +1 -1
  72. package/dist/storybook/project.json +1 -1
  73. package/package.json +1 -1
  74. package/dist/storybook/assets/check-box.stories-DfbWw6mD.js +0 -126
  75. package/dist/storybook/assets/footer.stories-DgjDE_JR.js +0 -3
  76. package/dist/storybook/assets/form.stories-BrUnmw7R.js +0 -49
  77. package/dist/storybook/assets/iframe-B8VgeFPT.js +0 -2
  78. package/dist/storybook/assets/initialize-context-DOqEe1Xq.js +0 -1
  79. package/dist/storybook/assets/menu.stories-xWX80Eh2.js +0 -84
  80. package/dist/storybook/assets/modal.stories-LhoWfDE6.js +0 -220
  81. package/dist/storybook/assets/number-input.stories-DhCjZ37u.js +0 -180
  82. package/dist/storybook/assets/popover.stories-CGm0M5fv.js +0 -10
  83. package/dist/storybook/assets/radio-button.stories-5gvV0LD0.js +0 -71
  84. package/dist/storybook/assets/select-DnRuRG_N.js +0 -61
  85. package/dist/storybook/assets/select.input-D0UkAPd9.js +0 -1
  86. package/dist/storybook/assets/select.stories-B9w9ONzj.js +0 -579
  87. package/dist/storybook/assets/tabs.stories-dsXjRHJy.js +0 -30
  88. package/dist/storybook/assets/toaster.stories-HO4VBTy-.js +0 -89
  89. package/dist/storybook/assets/toggle.stories-qTHFTXxI.js +0 -141
  90. package/dist/storybook/assets/unit-input.stories-QnEpR0rY.js +0 -426
  91. package/dist/storybook/assets/unit-table.stories-BZCc0yfc.js +0 -152
@@ -1,220 +0,0 @@
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-DMAnyMX5.js";import{T as se}from"./common-types-Sih75Sav.js";import{M as v,D as h}from"./dialog-BelCA1mt.js";import{B as l}from"./button-DHevvVBE.js";import{P as te}from"./popover-rq33c1W2.js";import{I as ne}from"./input-DTXbDJaL.js";import{I as ae}from"./input-group-BaRSJAEN.js";import{F as S}from"./field-HrLaMLbx.js";import{M as re}from"./actions-D-uVCDzk.js";import{S as ie}from"./select-DnRuRG_N.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-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"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./text-B3-TSWok.js";import"./select.input-D0UkAPd9.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,180 +0,0 @@
1
- import{j as a}from"./jsx-runtime-eps93zm2.js";import{r as l}from"./index-DhsZuJvc.js";import{w as d,u as n,e as u,f as H,a as N}from"./index-DMAnyMX5.js";import{d as qe}from"./index-C0x1JmaP.js";import{S as _}from"./spacer-BWoNR27H.js";import{G as Le}from"./grid-DRkC-bt8.js";import{C as p}from"./card-EcjmryU9.js";import{B as Ge}from"./button-DHevvVBE.js";import{H as m}from"./heading-CRNoBc7q.js";import{I as Ke}from"./input-group-addon-D68iUKV2.js";import{S as Ye}from"./select-DnRuRG_N.js";import{I as ze}from"./input-group-BaRSJAEN.js";import{F as G}from"./field-HrLaMLbx.js";import{T as W}from"./toggle-BbFVf61v.js";import{T as Je}from"./text-B3-TSWok.js";import{M as Qe}from"./message-Y48EomV-.js";import{I as We}from"./icon-BSFY3vDO.js";import{N as c}from"./number-input-Bpg4Yqmo.js";import"./index-CF7H4eMJ.js";import"./index-DRSy5Ssd.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"./index-CEuq6vkz.js";import"./inheritsLoose-DP0QEDDI.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./actions-D-uVCDzk.js";import"./badge-CLQ59MDF.js";import"./select.input-D0UkAPd9.js";import"./label-CqmyC9he.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./input-DTXbDJaL.js";const{useArgs:Xe}=__STORYBOOK_MODULE_PREVIEW_API__,Lt={title:"Forms/NumberInput",component:c,parameters:{canvas:{page:null}},args:{label:"Label"}},i=s=>{const[r,t]=Xe(),o=e=>{t({value:e.target.value})};return a.jsx(c,{onChange:o,value:123,...s})},j=i.bind({}),C=i.bind({});C.args={small:!0};const w=i.bind({});w.args={width:"150px"};const T=i.bind({});T.args={left:!0};const f=i.bind({});f.args={disabled:!0};const x=i.bind({});x.args={allowEmpty:!0,value:""};const h=()=>{const[s,r]=l.useState("123|m");return a.jsx(c,{name:"example",onChange:t=>r(t.target.value),placeholder:"Type a value...",value:s,testId:"testId"})};h.play=async({canvasElement:s,step:r})=>{const t=d(s),o=d(s.ownerDocument.body);await r("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await u(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await H.mouseOver(e),await N(()=>{u(o.getByText("Must be a numerical value")).toBeInTheDocument()})})};const B=i.bind({});B.args={warning:"This input number is almost 100!",value:"99"};const S=i.bind({});S.args={error:"This is a error message"};const D=i.bind({});D.args={value:"123test"};const E=i.bind({});E.args={value:"123.123456789",enableDisplayRounding:!0};const V=i.bind({});V.args={value:"123.123456789",enableDisplayRounding:!0,roundDisplayValue:s=>qe.roundToFixed(s,4)};const R=()=>a.jsxs(ze,{small:!0,children:[a.jsx(c,{value:123}),a.jsx(Ke,{children:"to"}),a.jsx(c,{value:123}),a.jsx(Ye,{options:[{value:"units",label:"units"}],width:"auto",value:"units"})]}),v=()=>{const[s,r]=l.useState("123");return a.jsx(c,{value:s,onChange:t=>{r(t.target.value)},testId:"testId",enableDisplayRounding:!0})};v.play=async({canvasElement:s,step:r})=>{const t=d(s);await r("Value should be rounded on blur",async()=>{const o=t.getByTestId("testId");await n.clear(o),await n.type(o,"123.123456789"),await n.click(s),await u(t.getByDisplayValue("123.12")).toBeInTheDocument()}),await r("Full value shown on focus",async()=>{const o=t.getByTestId("testId");await n.click(o),await u(t.getByDisplayValue("123.123456789")).toBeInTheDocument()})};const A=()=>{const[s,r]=l.useState(!0),t=()=>{r(!1),setTimeout(()=>r(!0),0)},[o,e]=l.useState("123");return a.jsxs(Le,{columns:"1fr 1fr",gap:!0,children:[a.jsxs(p,{heading:a.jsx(m,{children:"Storage State (Redux)"}),children:[o,a.jsx(_,{}),a.jsx(Ge,{label:"Change value",onClick:()=>e(String(Math.floor(Math.random()*100)))})]}),a.jsx(p,{heading:a.jsx(m,{icon:a.jsx(We,{icon:"refresh"}),onIconClick:t,children:"NumberInput"}),children:s&&a.jsx(c,{value:o,onChange:b=>{e(b.target.value)},error:Number(o)>=0?"":"Value must be positive"})})]})},I=()=>{const[s,r]=l.useState(!0),t=()=>{r(!1),setTimeout(()=>r(!0),0)},[o,e]=l.useState(!1),[b,Oe]=l.useState(!0),[k,F]=l.useState("0.6889763779527558"),[L,Pe]=l.useState(""),Ue=Number(k)*.3048;return a.jsxs(Le,{columns:"1fr 1fr",gap:!0,children:[a.jsxs(p,{heading:a.jsx(m,{children:"Settings"}),children:[a.jsx(G,{label:"Enable display rounding:",labelLeft:!0,labelWidth:200,children:a.jsx(W,{checked:o,onChange:g=>e(g.target.checked)})}),a.jsx(G,{label:"Enable cosmetic rounding:",labelLeft:!0,labelWidth:200,children:a.jsx(W,{checked:b,onChange:g=>Oe(g.target.checked)})})]}),a.jsxs(p,{heading:a.jsx(m,{icon:a.jsx(We,{icon:"refresh",testId:"triggerRerenderTestId"}),onIconClick:t,children:"NumberInput (displayed in Meters)"}),children:[a.jsx(Je,{faint:!0,children:"Cosmetic Rounding Test Cases: type 0.21 then return (compare with enableCosmeticRounding on and off)"}),a.jsx(_,{}),s&&a.jsx(c,{name:"Example",value:Ue,onChange:g=>{const M=String(Number(g.target.value)/.3048);F(M)},enableDisplayRounding:o,enableCosmeticRounding:b,error:Number(k)>=0?"":"Value must be positive",validationCallback:(g,M)=>{Pe(M??"")},testId:"testId"})]}),a.jsxs(p,{heading:a.jsx(m,{children:"Storage State / Redux (stored in Feet)"}),children:[k,a.jsx(_,{}),a.jsx(Ge,{label:"Change value",onClick:()=>F(String(Math.floor(Math.random()*100)))})]}),a.jsx(p,{heading:a.jsx(m,{children:"Test Validation Callback"}),children:L&&a.jsx(Qe,{message:{content:L,icon:!0,type:"Error",visible:!0}})})]})};I.play=async({canvasElement:s,step:r})=>{const t=d(s),o=d(s.ownerDocument.body);await r("Can enter decimal values",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123.123456789"),await n.click(s),await u(t.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await r("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 u(t.getByDisplayValue("-1.12e-3")).toBeInTheDocument(),await t.getByTestId("triggerRerenderTestId").click(),await N(()=>{u(t.getByDisplayValue(-.00112)).toBeInTheDocument()})}),await r("Can enter comma decimals (converts to dot)",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123,456"),await u(t.getByDisplayValue("123.456")).toBeInTheDocument()}),await r("Can enter small numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"0.0000000023"),await u(t.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await r("Can enter large numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"999999999999"),await u(t.getByDisplayValue("999999999999")).toBeInTheDocument()}),await r("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(s),await u(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await H.mouseOver(e),await N(()=>{u(o.getAllByText("Must be a numerical value").length).toEqual(2)})})};const y=()=>{const[s,r]=l.useState("123");return a.jsx(c,{value:s,onChange:t=>{r(t.target.value)},testId:"testId"})};y.play=async({canvasElement:s,step:r})=>{const t=d(s),o=d(s.ownerDocument.body);await r("Can enter decimal values",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123.123456789"),await u(t.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await r("Can enter scientific notation",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"-1.12e3"),await u(t.getByDisplayValue("-1.12e3")).toBeInTheDocument()}),await r("Can enter comma decimals (converts to dot)",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123,456"),await u(t.getByDisplayValue("123.456")).toBeInTheDocument()}),await r("Can enter small numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"0.0000000023"),await u(t.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await r("Can enter large numbers",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"999999999999"),await u(t.getByDisplayValue("999999999999")).toBeInTheDocument()}),await r("Shows validation error for non-numeric input",async()=>{const e=t.getByTestId("testId");await n.clear(e),await n.type(e,"123x45s6"),await u(t.getByDisplayValue("123x45s6")).toBeInTheDocument(),await H.mouseOver(e),await N(()=>{u(o.getByText("Must be a numerical value")).toBeInTheDocument()})})};h.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"Placeholder"};R.__docgenInfo={description:"",methods:[],displayName:"TestInputGroup"};v.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestDisplayRounding"};A.__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"};y.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestUserInput"};var O,P,U;j.parameters={...j.parameters,docs:{...(O=j.parameters)==null?void 0:O.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
- }`,...(U=(P=j.parameters)==null?void 0:P.docs)==null?void 0:U.source}}};var q,K,Y;C.parameters={...C.parameters,docs:{...(q=C.parameters)==null?void 0:q.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
- }`,...(Y=(K=C.parameters)==null?void 0:K.docs)==null?void 0:Y.source}}};var z,J,Q;w.parameters={...w.parameters,docs:{...(z=w.parameters)==null?void 0:z.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
- }`,...(Q=(J=w.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var X,Z,$;T.parameters={...T.parameters,docs:{...(X=T.parameters)==null?void 0:X.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
- }`,...($=(Z=T.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};var ee,te,ae;f.parameters={...f.parameters,docs:{...(ee=f.parameters)==null?void 0:ee.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
- }`,...(ae=(te=f.parameters)==null?void 0:te.docs)==null?void 0:ae.source}}};var ne,re,se;x.parameters={...x.parameters,docs:{...(ne=x.parameters)==null?void 0:ne.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
- }`,...(se=(re=x.parameters)==null?void 0:re.docs)==null?void 0:se.source}}};var oe,ue,ie;h.parameters={...h.parameters,docs:{...(oe=h.parameters)==null?void 0:oe.docs,source:{originalSource:`() => {
50
- const [value, setValue] = useState('123|m');
51
- return <NumberInput name="example" onChange={evt => setValue(evt.target.value)} placeholder="Type a value..." value={value} testId="testId" />;
52
- }`,...(ie=(ue=h.parameters)==null?void 0:ue.docs)==null?void 0:ie.source}}};var le,ce,de;B.parameters={...B.parameters,docs:{...(le=B.parameters)==null?void 0:le.docs,source:{originalSource:`args => {
53
- const [_, updateArgs] = useArgs();
54
- const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
55
- updateArgs({
56
- value: evt.target.value
57
- });
58
- };
59
- return <NumberInput onChange={handleChange} value={123} {...args} />;
60
- }`,...(de=(ce=B.parameters)==null?void 0:ce.docs)==null?void 0:de.source}}};var ge,pe,me;S.parameters={...S.parameters,docs:{...(ge=S.parameters)==null?void 0:ge.docs,source:{originalSource:`args => {
61
- const [_, updateArgs] = useArgs();
62
- const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
63
- updateArgs({
64
- value: evt.target.value
65
- });
66
- };
67
- return <NumberInput onChange={handleChange} value={123} {...args} />;
68
- }`,...(me=(pe=S.parameters)==null?void 0:pe.docs)==null?void 0:me.source}}};var he,ve,Ie;D.parameters={...D.parameters,docs:{...(he=D.parameters)==null?void 0:he.docs,source:{originalSource:`args => {
69
- const [_, updateArgs] = useArgs();
70
- const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
71
- updateArgs({
72
- value: evt.target.value
73
- });
74
- };
75
- return <NumberInput onChange={handleChange} value={123} {...args} />;
76
- }`,...(Ie=(ve=D.parameters)==null?void 0:ve.docs)==null?void 0:Ie.source}}};var ye,be,Ce;E.parameters={...E.parameters,docs:{...(ye=E.parameters)==null?void 0:ye.docs,source:{originalSource:`args => {
77
- const [_, updateArgs] = useArgs();
78
- const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
79
- updateArgs({
80
- value: evt.target.value
81
- });
82
- };
83
- return <NumberInput onChange={handleChange} value={123} {...args} />;
84
- }`,...(Ce=(be=E.parameters)==null?void 0:be.docs)==null?void 0:Ce.source}}};var we,Te,fe;V.parameters={...V.parameters,docs:{...(we=V.parameters)==null?void 0:we.docs,source:{originalSource:`args => {
85
- const [_, updateArgs] = useArgs();
86
- const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
87
- updateArgs({
88
- value: evt.target.value
89
- });
90
- };
91
- return <NumberInput onChange={handleChange} value={123} {...args} />;
92
- }`,...(fe=(Te=V.parameters)==null?void 0:Te.docs)==null?void 0:fe.source}}};var xe,Be,Se;R.parameters={...R.parameters,docs:{...(xe=R.parameters)==null?void 0:xe.docs,source:{originalSource:`() => <InputGroup small>
93
- <NumberInput value={123} />
94
- <InputGroupAddon>to</InputGroupAddon>
95
- <NumberInput value={123} />
96
- <Select options={[{
97
- value: 'units',
98
- label: 'units'
99
- }]} width="auto" value="units" />
100
- </InputGroup>`,...(Se=(Be=R.parameters)==null?void 0:Be.docs)==null?void 0:Se.source}}};var De,Ee,Ve;v.parameters={...v.parameters,docs:{...(De=v.parameters)==null?void 0:De.docs,source:{originalSource:`() => {
101
- const [value, setValue] = useState('123');
102
- return <NumberInput value={value} onChange={evt => {
103
- setValue(evt.target.value);
104
- }} testId="testId" enableDisplayRounding />;
105
- }`,...(Ve=(Ee=v.parameters)==null?void 0:Ee.docs)==null?void 0:Ve.source}}};var Re,Ae,je;A.parameters={...A.parameters,docs:{...(Re=A.parameters)==null?void 0:Re.docs,source:{originalSource:`() => {
106
- const [visible, setVisible] = useState(true);
107
- const triggerRerender = () => {
108
- setVisible(false);
109
- setTimeout(() => setVisible(true), 0);
110
- };
111
- const [value, setValue] = useState('123');
112
- return <Grid columns="1fr 1fr" gap>
113
- <Card heading={<Heading>Storage State (Redux)</Heading>}>
114
- {value}
115
- <Spacer />
116
- <Button label="Change value" onClick={() => setValue(String(Math.floor(Math.random() * 100)))} />
117
- </Card>
118
- <Card heading={<Heading icon={<Icon icon="refresh" />} onIconClick={triggerRerender}>
119
- NumberInput
120
- </Heading>}>
121
- {visible && <NumberInput value={value} onChange={evt => {
122
- setValue(evt.target.value);
123
- }} error={Number(value) >= 0 ? '' : 'Value must be positive'} />}
124
- </Card>
125
- </Grid>;
126
- }`,...(je=(Ae=A.parameters)==null?void 0:Ae.docs)==null?void 0:je.source}}};var Ne,ke,Me;I.parameters={...I.parameters,docs:{...(Ne=I.parameters)==null?void 0:Ne.docs,source:{originalSource:`() => {
127
- const [visible, setVisible] = useState(true);
128
- const triggerRerender = () => {
129
- setVisible(false);
130
- setTimeout(() => setVisible(true), 0);
131
- };
132
- const [enableDisplayRounding, setEnableDisplayRounding] = useState(false);
133
- const [enableCosmeticRounding, setEnableCosmeticRounding] = useState(true);
134
- const [valueInFeet, setValueInFeet] = useState('0.6889763779527558');
135
- const [callBackError, setCallBackError] = useState('');
136
- const valueInMeters = Number(valueInFeet) * 0.3048;
137
- return <Grid columns="1fr 1fr" gap>
138
- <Card heading={<Heading>Settings</Heading>}>
139
- <Field label="Enable display rounding:" labelLeft labelWidth={200}>
140
- <Toggle checked={enableDisplayRounding} onChange={evt => setEnableDisplayRounding(evt.target.checked)} />
141
- </Field>
142
- <Field label="Enable cosmetic rounding:" labelLeft labelWidth={200}>
143
- <Toggle checked={enableCosmeticRounding} onChange={evt => setEnableCosmeticRounding(evt.target.checked)} />
144
- </Field>
145
- </Card>
146
- <Card heading={<Heading icon={<Icon icon="refresh" testId="triggerRerenderTestId" />} onIconClick={triggerRerender}>
147
- NumberInput (displayed in Meters)
148
- </Heading>}>
149
- <Text faint>
150
- Cosmetic Rounding Test Cases: type 0.21 then return (compare with
151
- enableCosmeticRounding on and off)
152
- </Text>
153
- <Spacer />
154
- {visible && <NumberInput name="Example" value={valueInMeters} onChange={evt => {
155
- const nextValueInFeet = String(Number(evt.target.value) / 0.3048);
156
- setValueInFeet(nextValueInFeet); // convert back to ft
157
- }} enableDisplayRounding={enableDisplayRounding} enableCosmeticRounding={enableCosmeticRounding} error={Number(valueInFeet) >= 0 ? '' : 'Value must be positive'} validationCallback={(name, error) => {
158
- setCallBackError(error ?? '');
159
- }} testId="testId" />}
160
- </Card>
161
- <Card heading={<Heading>Storage State / Redux (stored in Feet)</Heading>}>
162
- {valueInFeet}
163
- <Spacer />
164
- <Button label="Change value" onClick={() => setValueInFeet(String(Math.floor(Math.random() * 100)))} />
165
- </Card>
166
- <Card heading={<Heading>Test Validation Callback</Heading>}>
167
- {callBackError && <Message message={{
168
- content: callBackError,
169
- icon: true,
170
- type: 'Error',
171
- visible: true
172
- }} />}
173
- </Card>
174
- </Grid>;
175
- }`,...(Me=(ke=I.parameters)==null?void 0:ke.docs)==null?void 0:Me.source}}};var _e,He,Fe;y.parameters={...y.parameters,docs:{...(_e=y.parameters)==null?void 0:_e.docs,source:{originalSource:`() => {
176
- const [value, setValue] = useState('123');
177
- return <NumberInput value={value} onChange={evt => {
178
- setValue(evt.target.value);
179
- }} testId="testId" />;
180
- }`,...(Fe=(He=y.parameters)==null?void 0:He.docs)==null?void 0:Fe.source}}};const Gt=["Default","Small","Width","Left","Disabled","AllowEmpty","Placeholder","Warning","Error","BadInput","WithDisplayRounding","WithCustomDisplayRounding","TestInputGroup","TestDisplayRounding","ManagedTestCase","DemoCosmeticRounding","TestUserInput"];export{x as AllowEmpty,D as BadInput,j as Default,I as DemoCosmeticRounding,f as Disabled,S as Error,T as Left,A as ManagedTestCase,h as Placeholder,C as Small,v as TestDisplayRounding,R as TestInputGroup,y as TestUserInput,B as Warning,w as Width,V as WithCustomDisplayRounding,E as WithDisplayRounding,Gt as __namedExportsOrder,Lt as default};
@@ -1,10 +0,0 @@
1
- import{j as r}from"./jsx-runtime-eps93zm2.js";import{r as k}from"./index-DhsZuJvc.js";import{S as w}from"./spacer-BWoNR27H.js";import{P as i}from"./popover-rq33c1W2.js";import{I as c}from"./input-DTXbDJaL.js";import{B as l}from"./button-DHevvVBE.js";import{F as y}from"./flex-EllkLxgO.js";import{S as D}from"./select-DnRuRG_N.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./index-Bk2sglWO.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./types-Dx2TtIG9.js";import"./lodash-c4VUpsOs.js";import"./spinner-AWUe4xwQ.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";import"./assertThisInitialized-B9jnkVVz.js";import"./memoize-one.esm-CcMeOnPo.js";import"./types-BmbYqTX_.js";import"./text-B3-TSWok.js";import"./actions-D-uVCDzk.js";import"./badge-CLQ59MDF.js";import"./select.input-D0UkAPd9.js";const u=[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"}],_=({close:e})=>r.jsxs(y,{gap:"var(--padding-xs)",children:[r.jsx(c,{value:"Value",width:"150px",small:!0}),r.jsx(D,{options:u,value:u[0],width:"auto",small:!0}),r.jsx(l,{colored:!0,label:"Save",onClick:()=>{},small:!0}),r.jsx(l,{label:"Cancel",onClick:e,small:!0})]}),lr={title:"Basic/Popover",component:i,args:{overflowContainer:!0,content:r.jsx(_,{}),children:r.jsx(l,{label:"Toggle me"})},decorators:[e=>r.jsx("div",{style:{display:"flex"},children:e()})],parameters:{docs:{source:{excludeDecorators:!0}}}},n=e=>r.jsx(i,{...e}),p=n.bind({}),o=n.bind({});o.args={children:r.jsx(c,{value:"Value",width:"100%"})};const s=n.bind({});s.args={closeOnOutsideClick:!1,showCloseButton:!0};const t=n.bind({});t.args={disabled:!0};const a=e=>{const[m,T]=k.useState(!1);return r.jsxs("div",{children:[r.jsx(l,{onClick:()=>T(!m),label:"Toggle Popover Externally"}),r.jsx(w,{}),r.jsx(i,{...e,isOpen:m,children:r.jsx(c,{})})]})};a.__docgenInfo={description:"",methods:[],displayName:"ExternalControl"};var d,g,x;p.parameters={...p.parameters,docs:{...(d=p.parameters)==null?void 0:d.docs,source:{originalSource:"args => <Popover {...args} />",...(x=(g=p.parameters)==null?void 0:g.docs)==null?void 0:x.source}}};var v,f,j;o.parameters={...o.parameters,docs:{...(v=o.parameters)==null?void 0:v.docs,source:{originalSource:"args => <Popover {...args} />",...(j=(f=o.parameters)==null?void 0:f.docs)==null?void 0:j.source}}};var b,S,C;s.parameters={...s.parameters,docs:{...(b=s.parameters)==null?void 0:b.docs,source:{originalSource:"args => <Popover {...args} />",...(C=(S=s.parameters)==null?void 0:S.docs)==null?void 0:C.source}}};var O,h,P;t.parameters={...t.parameters,docs:{...(O=t.parameters)==null?void 0:O.docs,source:{originalSource:"args => <Popover {...args} />",...(P=(h=t.parameters)==null?void 0:h.docs)==null?void 0:P.source}}};var I,E,B;a.parameters={...a.parameters,docs:{...(I=a.parameters)==null?void 0:I.docs,source:{originalSource:`args => {
2
- const [isOpen, setIsOpen] = useState(false);
3
- return <div>
4
- <Button onClick={() => setIsOpen(!isOpen)} label="Toggle Popover Externally" />
5
- <Spacer />
6
- <Popover {...args} isOpen={isOpen}>
7
- <Input />
8
- </Popover>
9
- </div>;
10
- }`,...(B=(E=a.parameters)==null?void 0:E.docs)==null?void 0:B.source}}};const nr=["Default","InputTrigger","CloseButton","Disabled","ExternalControl"];export{s as CloseButton,p as Default,t as Disabled,a as ExternalControl,o as InputTrigger,nr as __namedExportsOrder,lr as default};
@@ -1,71 +0,0 @@
1
- import{j as A}from"./jsx-runtime-eps93zm2.js";import{r as F}from"./index-DhsZuJvc.js";import{w as K,u as q,e as m}from"./index-DMAnyMX5.js";import{R as j}from"./radio-button-DmDuw4DA.js";import"./index-CF7H4eMJ.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./select.input-D0UkAPd9.js";import"./types-BmbYqTX_.js";import"./common-types-Sih75Sav.js";import"./help-icon-Buhx5nl6.js";import"./tooltip-1V7clEnw.js";import"./index-CUZDtIZe.js";import"./icon-BSFY3vDO.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DP0QEDDI.js";import"./index-CEuq6vkz.js";const s=[{label:"Aardvarks",value:"termites"},{label:"Kangaroos",value:"grass"},{label:"Monkeys",value:"bananas",disabled:!0}],re={title:"Forms/RadioButton",component:j,args:{options:s,inline:!1,noMargin:!1,disabled:!1,small:!1}},a=t=>{const[e,u]=F.useState(s[0]),n=_=>{const $=_.target.value,g=s.find(W=>W.value===$);g&&u(g)};return A.jsx(j,{...t,value:e,onChange:n})},d=a.bind({}),o=a.bind({});o.args={small:!0};const l=a.bind({});l.args={options:s.map((t,e)=>({...t,helpText:`Help text #${e}`}))};const r=a.bind({});r.args={options:s.map((t,e)=>({...t,onClickHelp:()=>console.log(`Help #${e} clicked`)}))};const i=a.bind({});i.args={inline:!0};const c=a.bind({});c.args={options:s.map((t,e)=>({...t,helpText:`Help text #${e}`,disabled:!0}))};const p=a.bind({});p.play=async({canvasElement:t,step:e})=>{const u=K(t);await e("Clicking a radio should activate it",async()=>{const n=u.getByDisplayValue("grass");await q.click(n),await m(n).toBeChecked()}),await e("Clicking a disabled radio shouldn't activate it",async()=>{const n=u.getByDisplayValue("bananas");await n.click(),await m(n).not.toBeChecked()})};var v,h,C;d.parameters={...d.parameters,docs:{...(v=d.parameters)==null?void 0:v.docs,source:{originalSource:`args => {
2
- const [value, setValue] = useState<OptionType>(options[0]);
3
- const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
4
- const selectedValue = evt.target.value;
5
- const selectedOption = options.find(opt => opt.value === selectedValue);
6
- if (selectedOption) {
7
- setValue(selectedOption);
8
- }
9
- };
10
- return <RadioButton {...args} value={value} onChange={handleChange} />;
11
- }`,...(C=(h=d.parameters)==null?void 0:h.docs)==null?void 0:C.source}}};var O,V,f;o.parameters={...o.parameters,docs:{...(O=o.parameters)==null?void 0:O.docs,source:{originalSource:`args => {
12
- const [value, setValue] = useState<OptionType>(options[0]);
13
- const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
14
- const selectedValue = evt.target.value;
15
- const selectedOption = options.find(opt => opt.value === selectedValue);
16
- if (selectedOption) {
17
- setValue(selectedOption);
18
- }
19
- };
20
- return <RadioButton {...args} value={value} onChange={handleChange} />;
21
- }`,...(f=(V=o.parameters)==null?void 0:V.docs)==null?void 0:f.source}}};var T,b,E;l.parameters={...l.parameters,docs:{...(T=l.parameters)==null?void 0:T.docs,source:{originalSource:`args => {
22
- const [value, setValue] = useState<OptionType>(options[0]);
23
- const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
24
- const selectedValue = evt.target.value;
25
- const selectedOption = options.find(opt => opt.value === selectedValue);
26
- if (selectedOption) {
27
- setValue(selectedOption);
28
- }
29
- };
30
- return <RadioButton {...args} value={value} onChange={handleChange} />;
31
- }`,...(E=(b=l.parameters)==null?void 0:b.docs)==null?void 0:E.source}}};var R,H,S;r.parameters={...r.parameters,docs:{...(R=r.parameters)==null?void 0:R.docs,source:{originalSource:`args => {
32
- const [value, setValue] = useState<OptionType>(options[0]);
33
- const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
34
- const selectedValue = evt.target.value;
35
- const selectedOption = options.find(opt => opt.value === selectedValue);
36
- if (selectedOption) {
37
- setValue(selectedOption);
38
- }
39
- };
40
- return <RadioButton {...args} value={value} onChange={handleChange} />;
41
- }`,...(S=(H=r.parameters)==null?void 0:H.docs)==null?void 0:S.source}}};var y,x,B;i.parameters={...i.parameters,docs:{...(y=i.parameters)==null?void 0:y.docs,source:{originalSource:`args => {
42
- const [value, setValue] = useState<OptionType>(options[0]);
43
- const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
44
- const selectedValue = evt.target.value;
45
- const selectedOption = options.find(opt => opt.value === selectedValue);
46
- if (selectedOption) {
47
- setValue(selectedOption);
48
- }
49
- };
50
- return <RadioButton {...args} value={value} onChange={handleChange} />;
51
- }`,...(B=(x=i.parameters)==null?void 0:x.docs)==null?void 0:B.source}}};var k,I,M;c.parameters={...c.parameters,docs:{...(k=c.parameters)==null?void 0:k.docs,source:{originalSource:`args => {
52
- const [value, setValue] = useState<OptionType>(options[0]);
53
- const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
54
- const selectedValue = evt.target.value;
55
- const selectedOption = options.find(opt => opt.value === selectedValue);
56
- if (selectedOption) {
57
- setValue(selectedOption);
58
- }
59
- };
60
- return <RadioButton {...args} value={value} onChange={handleChange} />;
61
- }`,...(M=(I=c.parameters)==null?void 0:I.docs)==null?void 0:M.source}}};var w,L,D;p.parameters={...p.parameters,docs:{...(w=p.parameters)==null?void 0:w.docs,source:{originalSource:`args => {
62
- const [value, setValue] = useState<OptionType>(options[0]);
63
- const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
64
- const selectedValue = evt.target.value;
65
- const selectedOption = options.find(opt => opt.value === selectedValue);
66
- if (selectedOption) {
67
- setValue(selectedOption);
68
- }
69
- };
70
- return <RadioButton {...args} value={value} onChange={handleChange} />;
71
- }`,...(D=(L=p.parameters)==null?void 0:L.docs)==null?void 0:D.source}}};const ie=["Default","Small","HelpText","OnClickHelp","Inline","DisabledWithHelpText","Test"];export{d as Default,c as DisabledWithHelpText,l as HelpText,i as Inline,r as OnClickHelp,o as Small,p as Test,ie as __namedExportsOrder,re as default};