@oliasoft-open-source/react-ui-library 4.6.5 → 4.6.6-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/index.d.ts +22 -0
- package/dist/index.js +146 -1
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-6VNJS4EI-6QyiStBx.js → Color-6VNJS4EI-BrOcbA6h.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-NNNQARDV-2upuKe-y.js → DocsRenderer-NNNQARDV-tJI6VTjP.js} +1 -1
- package/dist/storybook/assets/{WithTooltip-V3YHNWJZ-sasadf5B.js → WithTooltip-V3YHNWJZ-YRJYbhNd.js} +1 -1
- package/dist/storybook/assets/{buttons-and-links-5qDA5c0M.js → buttons-and-links-VKKWJKFr.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-Ilvo3kc-.js → casing-loads.stories-oh3l5Q7X.js} +1 -1
- package/dist/storybook/assets/{chunk-HLWAVYOI-2WzL7lNK.js → chunk-HLWAVYOI-83EByc66.js} +1 -1
- package/dist/storybook/assets/{color-oYWpjfqe.js → color-ugWGhOJm.js} +1 -1
- package/dist/storybook/assets/dialog-JbUIdbsX.js +1 -0
- package/dist/storybook/assets/{file-input.stories-OwcfaeRF.js → file-input.stories-8w1taUk6.js} +1 -1
- package/dist/storybook/assets/{form.stories-8fqEXOZ2.js → form.stories-b8fSf1KV.js} +1 -1
- package/dist/storybook/assets/{formatter-SWP5E3XI-NZzQKsls.js → formatter-SWP5E3XI-umUJAuhQ.js} +1 -1
- package/dist/storybook/assets/{iframe-GxJzSQlX.js → iframe-LJjp0O19.js} +2 -2
- package/dist/storybook/assets/{index-NMzKYhDm.js → index-hMEOtd8c.js} +5 -5
- package/dist/storybook/assets/{input-validation-0WooNvL8.js → input-validation-5TXTtQCt.js} +1 -1
- package/dist/storybook/assets/{inputs-ZnQpWnaa.js → inputs-rK_va801.js} +1 -1
- package/dist/storybook/assets/{layout-forms-MHOKZcG9.js → layout-forms-4SDauXUc.js} +1 -1
- package/dist/storybook/assets/{layout-general-X0JNgpR0.js → layout-general-4b2v8KKO.js} +1 -1
- package/dist/storybook/assets/modal.stories-DDey1uF7.js +200 -0
- package/dist/storybook/assets/{padding-and-spacing-hLcWI3R8.js → padding-and-spacing-0ADtQv-B.js} +1 -1
- package/dist/storybook/assets/{preview-TQVrQPI_.js → preview-Jj3eWAFT.js} +1 -1
- package/dist/storybook/assets/{preview-r7HHhykG.js → preview-ZGYBin_R.js} +2 -2
- package/dist/storybook/assets/{syntaxhighlighter-B5GMVT5T-gFlfxFDl.js → syntaxhighlighter-B5GMVT5T-yVSKFRoH.js} +1 -1
- package/dist/storybook/assets/{textarea-TIELeiGt.js → textarea-gwm6gdQO.js} +1 -1
- package/dist/storybook/assets/{textarea.stories-DIzqgg9F.js → textarea.stories-eOTtHmL4.js} +1 -1
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/storybook/stories.json +1 -1
- package/package.json +1 -1
- package/dist/404.html +0 -1
- package/dist/storybook/assets/dialog-roJ8Yns6.js +0 -1
- package/dist/storybook/assets/modal.stories-dirXv4n_.js +0 -173
package/package.json
CHANGED
package/dist/404.html
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-21EwET8E.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-2LJjuVRB.css"></head><body><div id="content"></div></body>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-FsUICBgo.js";import{r as l}from"./index-RfLt4OUa.js";import{c as m}from"./index-VW3EWkuE.js";import{P as x}from"./portal-zPiHHKoC.js";import{l as y}from"./lodash-Bmg8FrMx.js";import{I as j}from"./common-types-U65vzrrz.js";import{H as v}from"./heading-jZsIIJF0.js";import{B as w}from"./button-shH4xakS.js";const _=(n,e,r=[])=>{l.useEffect(()=>{const i=o=>{o.key===n&&e()};return window.addEventListener("keydown",i),()=>{window.removeEventListener("keydown",i)}},r)},E="_wrapper_sb0hc_1",N="_contentContainer_sb0hc_15",b="_centered_sb0hc_24",k="_newLine_sb0hc_28",c={wrapper:E,contentContainer:N,centered:b,newLine:k},C=({children:n})=>{const e=l.useRef(null);return l.useEffect(()=>{if(e.current){const r=e.current.querySelector('[tabindex="0"]');r?r.focus():e.current.focus()}},[]),t.jsx("div",{ref:e,tabIndex:-1,className:m(c.wrapper),children:n})},I=({children:n,width:e,centered:r})=>t.jsx("div",{className:m(c.contentContainer,r?c.centered:""),style:{maxWidth:e},children:n}),f=({children:n,visible:e=!1,centered:r=!1,width:i="100%",onEnter:o,onEscape:d})=>(_("Enter",()=>{e&&o&&o()},[e,o]),_("Escape",()=>{e&&d&&d()},[e,d]),t.jsxs(t.Fragment,{children:[t.jsx(x,{id:"modalContainer",children:e?t.jsx(C,{children:t.jsx(I,{width:i,centered:r,children:n})}):null}),t.jsx("div",{id:"modalContainer"})]}));try{f.displayName="Modal",f.__docgenInfo={description:"",displayName:"Modal",props:{visible:{defaultValue:{value:"false"},description:"",name:"visible",required:!1,type:{name:"boolean"}},centered:{defaultValue:{value:"false"},description:"",name:"centered",required:!1,type:{name:"boolean"}},width:{defaultValue:{value:"100%"},description:"",name:"width",required:!1,type:{name:"TStringOrNumber"}},onEnter:{defaultValue:null,description:"",name:"onEnter",required:!1,type:{name:"(() => void)"}},onEscape:{defaultValue:null,description:"",name:"onEscape",required:!1,type:{name:"(() => void)"}}}}}catch{}const q="_dialog_18g0k_1",L="_inline_18g0k_18",V="_scroll_18g0k_21",D="_header_18g0k_24",M="_dismiss_18g0k_33",S="_content_18g0k_38",$="_footer_18g0k_47",a={dialog:q,inline:L,scroll:V,header:D,dismiss:M,content:S,footer:$},B=n=>y.isArray(n)?n.map((e,r)=>t.jsxs(l.Fragment,{children:[e," ",t.jsx("br",{})]},r)):n,g=({dialog:n})=>{const{heading:e,content:r,contentPadding:i="var(--padding)",footer:o,scroll:d,width:u,height:h,onClose:p,testId:s}=n;return t.jsxs("div",{className:m(a.dialog,u?a.inline:null,d?a.scroll:null),style:{width:u,height:h},"data-testid":s??null,children:[t.jsxs("div",{className:a.header,children:[t.jsx(v,{testId:s&&`${s}-heading`,top:!0,marginBottom:0,children:e}),p?t.jsx("div",{className:a.dismiss,children:t.jsx(w,{icon:j.CLOSE,round:!0,basic:!0,small:!0,colored:"muted",onClick:p})}):null]}),t.jsx("div",{"data-testid":s&&`${s}-content`,className:a.content,style:{padding:i},children:B(r)}),o&&t.jsx("div",{"data-testid":s&&`${s}-footer`,className:a.footer,children:o})]})};try{g.displayName="Dialog",g.__docgenInfo={description:"",displayName:"Dialog",props:{dialog:{defaultValue:null,description:"",name:"dialog",required:!0,type:{name:"IDialog"}}}}}catch{}export{g as D,f as M};
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-FsUICBgo.js";import{r as G}from"./index-RfLt4OUa.js";import{T as Y}from"./common-types-U65vzrrz.js";import{M,D as R}from"./dialog-roJ8Yns6.js";import{B as o}from"./button-shH4xakS.js";import{P as q}from"./popover-cad2llTa.js";import{I as U}from"./input-2BhbKV-j.js";import{I as z}from"./input-group-R8LoqKRn.js";import{F as v}from"./field-FZX0Z7IB.js";import{M as J}from"./actions-mOcj9IlF.js";import{S as Q}from"./select-DZdWUrCW.js";import{S as X}from"./spacer-Yji9g2AW.js";import{T as Z}from"./tooltip-HEHiU__l.js";import{M as x}from"./types-VB5zD18b.js";import"./index-VW3EWkuE.js";import"./portal-zPiHHKoC.js";import"./index-miLrID2P.js";import"./lodash-Bmg8FrMx.js";import"./heading-jZsIIJF0.js";import"./help-icon-SKky6KLV.js";import"./icon-8EQazuuW.js";import"./objectWithoutPropertiesLoose-9Q1jwsKS.js";import"./inheritsLoose-8sb_A2v4.js";import"./tslib.es6-OIsz3r9a.js";import"./index-4QtD-hFu.js";import"./disabled-context-urNQThQz.js";import"./spinner-R8Il4aRe.js";import"./types-5uVBABF4.js";import"./label-uCFEME1p.js";import"./badge-23Ty_zBt.js";import"./assertThisInitialized-4q6YPdh3.js";import"./memoize-one.esm-hqe5SRxC.js";import"./text-6KQ6ntOV.js";import"./select.input-zP5tW20f.js";const{useArgs:$}=__STORYBOOK_MODULE_ADDONS__,Fe={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}}}},n=()=>{const[{visible:g,centered:p,...b},l]=$(),r=()=>{l({visible:!g})};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:g,centered:p,children:e.jsx(R,{dialog:{...b,onClose:r}})}),e.jsx(o,{label:"Open Modal",onClick:r})]})},m=n.bind({}),s=n.bind({});s.args={centered:!0};const a=n.bind({});a.args={content:["This is a","new line!"]};const t=n.bind({});t.args={scroll:!0,content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const i=n.bind({});i.args={width:"100%",content:e.jsx("div",{children:"Example modal content goes here lorem ipsum. ".repeat(100)})};const d=n.bind({});d.args={contentPadding:0};const c=n.bind({});c.args={content:e.jsxs(e.Fragment,{children:[e.jsx(Z,{text:"Tooltip text",children:"Hover for tooltip"}),e.jsx(X,{}),e.jsx(v,{label:"Custom Select",helpText:"Select an animal",children:e.jsx(Q,{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(v,{label:"Nested Menu",children:e.jsx(J,{maxHeight:"240px",menu:{label:"Menu",trigger:Y.DROP_DOWN_BUTTON,sections:[{type:x.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:x.OPTION,label:Math.random().toString(36).substring(7),onClick:()=>{}}))]}})}),e.jsx(q,{content:e.jsxs(z,{small:!0,children:[e.jsx(U,{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[g,p]=G.useState(!1),b=()=>{p(!0)},l=()=>{p(!1)},r=()=>{console.log("Submit action"),l()};return e.jsxs(e.Fragment,{children:[e.jsx(M,{visible:g,onEnter:()=>{console.log("Enter"),r()},onEscape:()=>{console.log("Escape"),l()},children:e.jsx(R,{dialog:{heading:"Test key handling",content:e.jsx(U,{}),footer:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Done",colored:"red",onClick:r}),e.jsx(o,{label:"Cancel",onClick:l})]}),onClose:l}})}),e.jsx(o,{label:"Open Modal",onClick:b})]})};var C,h,j;m.parameters={...m.parameters,docs:{...(C=m.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
|
-
}`,...(j=(h=m.parameters)==null?void 0:h.docs)==null?void 0:j.source}}};var k,P,S;s.parameters={...s.parameters,docs:{...(k=s.parameters)==null?void 0:k.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
|
-
}`,...(S=(P=s.parameters)==null?void 0:P.docs)==null?void 0:S.source}}};var A,f,O;a.parameters={...a.parameters,docs:{...(A=a.parameters)==null?void 0:A.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
|
-
}`,...(O=(f=a.parameters)==null?void 0:f.docs)==null?void 0:O.source}}};var T,y,B;t.parameters={...t.parameters,docs:{...(T=t.parameters)==null?void 0:T.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
|
-
}`,...(B=(y=t.parameters)==null?void 0:y.docs)==null?void 0:B.source}}};var D,E,_;i.parameters={...i.parameters,docs:{...(D=i.parameters)==null?void 0:D.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
|
-
}`,...(_=(E=i.parameters)==null?void 0:E.docs)==null?void 0:_.source}}};var F,N,I;d.parameters={...d.parameters,docs:{...(F=d.parameters)==null?void 0:F.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
|
-
}`,...(I=(N=d.parameters)==null?void 0:N.docs)==null?void 0:I.source}}};var w,H,K;c.parameters={...c.parameters,docs:{...(w=c.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
|
-
}`,...(K=(H=c.parameters)==null?void 0:H.docs)==null?void 0:K.source}}};var L,V,W;u.parameters={...u.parameters,docs:{...(L=u.parameters)==null?void 0:L.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
|
-
}`,...(W=(V=u.parameters)==null?void 0:V.docs)==null?void 0:W.source}}};const Ne=["Default","Centered","LineBreak","Scroll","FullWidth","NoContentPadding","WithPopoverLayers","KeyHandle"];export{s as Centered,m as Default,i as FullWidth,u as KeyHandle,a as LineBreak,d as NoContentPadding,t as Scroll,c as WithPopoverLayers,Ne as __namedExportsOrder,Fe as default};
|