@web-package/react-widgets - npm Package Compare versions

Comparing version 1.0.0-beta2 to 1.0.0-beta3

CHANGELOG.md

 # 1.0.0-beta2
-- Added the `AnimatedTransition` widget. This widget detects changes in child elements and animates them. It can be applied in various scenarios, such as loading screens and updates to child elements.
+- Added the `AnimatedTransition` widget. This widget detects changes in child elements and animates them. It can be applied in various scenarios, such as loading screens and updates to child elements.
+
+# 1.0.0-beta3
+- Fixed an issue where the sizes of both parent and child elements in `AnimatedTransition` were not being calculated correctly due to all child elements being absolute position applied.
+
+- Added an option that is whether to using memo(cache, recycle) into the `ConditionalRender` widget.

dist/index.esm.js

@@ -1,2 +0,2 @@
-import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{forwardRef as i,useRef as r,useLayoutEffect as s,memo as o,useState as l,useMemo as a,createContext as c,useContext as d}from"react";var h;!function(e){e.REACT_WIDGETS_OPTION={}}(h||(h={}));class u{constructor(){this.ids=new Map}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new u}set currentOption(e){h.REACT_WIDGETS_OPTION=e}getElementIdByTag(e){var t;const n=(null!==(t=this.ids.get(e))&&void 0!==t?t:0)+1;return e+this.ids.set(e,n).get(e)}optionValueOf(e){var t;return null!==(t=h.REACT_WIDGETS_OPTION[e])&&void 0!==t?t:u.default[e]}initialize(){const e=new CSSStyleSheet;this.optionValueOf("useStrict")&&e.insertRule("div { flex-shrink: 0; boxSizing: border-box; }"),this.initializeStyleSheet(e)}initializeStyleSheet(e){e.insertRule("widget-row { display: flex; flex-direction: row; }"),e.insertRule("widget-column { display: flex; flex-direction: column; }"),e.insertRule("widget-grid { display: grid; }"),e.insertRule("\n                scrollable-vertical {\n                    display: block;\n                    height: 100%;\n                    overflow-y: auto;\n                    overflow-x: clip;\n                }\n            "),e.insertRule("scrollable-vertical > * { height: max-content }"),e.insertRule("scrollable-vertical[scrollbar-none]::-webkit-scrollbar { display: none; }"),e.insertRule("\n                scrollable-horizontal {\n                    display: block;\n                    width: 100%;\n                    overflow-x: auto;\n                    overflow-y: clip;\n                }\n            "),e.insertRule("scrollable-horizontal > * { width: max-content; }"),e.insertRule("scrollable-horizontal[scrollbar-none]::-webkit-scrollbar { display: none; }"),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}}u.default={useStrict:!0,useDefaultMemo:!0,useWillChange:!0};class g{constructor(){this.listeners=[]}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new g}attach(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding."),this.listeners.push(e)}detach(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding."),this.listeners=this.listeners.filter((t=>t!=e))}rebuild(){console.assert(0!=this.listeners.length,"The `Application` component to detect events at top-level components is missing."),console.assert(1==this.listeners.length,"The `Application` component must exist as the only unique entity.")}}g._instance=null;const f=new Proxy(g,{get:()=>g.instance});var p;!function(e){e[e.REBUILD=0]="REBUILD"}(p||(p={}));const y=i(((t,n)=>{var i;const r=Object.assign({},t),s={id:t.id,className:t.className,children:t.children,ref:n,dangerouslySetInnerHTML:t.innerHTML?{__html:t.innerHTML}:void 0,onClick:t.onClick,onClickCapture:t.onClickCapture,onDoubleClick:t.onDoubleClick,onDoubleClickCapture:t.onDoubleClickCapture,onFocus:t.onFocus,onFocusCapture:t.onFocusCapture,onChange:t.onChange,onChangeCapture:t.onChangeCapture,onRateChange:t.onRateChange,onRateChangeCapture:t.onRateChangeCapture,onVolumeChange:t.onVolumeChange,onVolumeChangeCapture:t.onVolumeChangeCapture};return t.size&&(console.assert(null==t.width,"The width cannot be defined when defining the size."),console.assert(null==t.height,"The height cannot be defined when defining the size."),r.width=t.size,r.height=t.size),e(null!==(i=t.tagName)&&void 0!==i?i:"div",Object.assign(Object.assign({},s),{style:r}))}));Object.defineProperty(Element.prototype,"intrinsicSize",{get:function(){return b.intrinsicSizeOf(this)}}),Object.defineProperty(Element.prototype,"intrinsicWidth",{get:function(){return b.intrinsicSizeOf(this).width}}),Object.defineProperty(Element.prototype,"intrinsicHeight",{get:function(){return b.intrinsicSizeOf(this).height}}),Object.defineProperty(Element.prototype,"reflow",{get:function(){return b.reflow(this)}});class b{static reflow(e){e.getBoundingClientRect()}static intrinsicSizeOf(e,t){for(;e;){const n=null!=t?t:getComputedStyle(e),i=parseFloat(n.width),r=parseFloat(n.height),s=parseFloat(n.paddingLeft),o=parseFloat(n.paddingRight),l=parseFloat(n.paddingTop),a=parseFloat(n.paddingBottom),c=parseFloat(n.borderLeftWidth),d=parseFloat(n.borderRightWidth),h=parseFloat(n.borderTopWidth),u=parseFloat(n.borderBottomWidth),g=parseFloat(n.marginLeft),f=parseFloat(n.marginRight),p=parseFloat(n.marginTop),y=parseFloat(n.marginBottom),b=n.boxSizing,m=n.position;if("contents"===n.display){let t=Array.from(e.children).filter((e=>"STYLE"!==e.tagName&&"SCRIPT"!==e.tagName));if(1!==t.length)throw new Error("An element with a display property of 'contents' must have only one child to define its intrinsic size.");e=t[0];continue}let w=i,v=r;return"content-box"===b&&(w+=s+o+c+d,v+=l+a+h+u),"absolute"!==m&&"fixed"!==m&&(w+=g+f,v+=p+y),{width:w,height:v}}}}Object.defineProperty(Element.prototype,"intrinsicRect",{get:function(){return m.intrinsicOf(this)}});class m{static intrinsicOf(e,t){const n=null!=t?t:getComputedStyle(e),i=b.intrinsicSizeOf(e,n),r=e.getBoundingClientRect();return new DOMRect(r.x,r.y,i.width,i.height)}}var w;!function(t){t.Horizontal=function({visible:t,overflow:n="hidden",duration:i,transition:o={opacity:!1},curve:l,children:a}){var c;const d=r(t),h=r(null),g=null!==(c=null==o?void 0:o.opacity)&&void 0!==c&&c,f=u.instance.optionValueOf("useWillChange")?g?"width, opacity":"width":void 0;return s((()=>{const e=h.current,n=e.firstElementChild,i=b.intrinsicSizeOf(n),r=b.intrinsicSizeOf(e);if(n.ontransitionend=e=>{e.stopPropagation()},t==d.current)e.style.width=t?null:"0px",n.style.width=t?null:`${i.width}px`;else{e.style.width=null,n.style.width=null;const i=b.intrinsicSizeOf(e);g&&(e.style.opacity=t?"1":"0"),t?(e.style.width=`${r.width}px`,n.style.width=`${r.width}px`,b.reflow(e),e.style.width=`${i.width}px`,e.ontransitionend=()=>{e.style.width=null,n.style.width=null},n.style.width=`${i.width}px`):(e.style.width=`${r.width}px`,n.style.width=`${i.width}px`,b.reflow(e),e.style.width="0px",e.ontransitionend=null)}d.current=t}),[t]),e(y,{ref:h,opacity:g?t?"1":"0":void 0,overflow:n,willChange:f,transitionProperty:g?"width, opacity":"width",transitionDuration:i,transitionTimingFunction:l,children:e("div",{children:a})})},t.Vertical=function({visible:t,overflow:n="hidden",duration:i,transition:o={opacity:!1},curve:l,children:a}){var c;const d=r(t),h=r(null),g=null!==(c=null==o?void 0:o.opacity)&&void 0!==c&&c,f=u.instance.optionValueOf("useWillChange")?g?"height, opacity":"height":void 0;return s((()=>{const e=h.current,n=e.firstElementChild,i=b.intrinsicSizeOf(n),r=b.intrinsicSizeOf(e);if(n.ontransitionend=e=>{e.stopPropagation()},t==d.current)e.style.height=t?null:"0px",n.style.height=t?null:`${i.height}px`;else{e.style.height=null,n.style.height=null;const i=b.intrinsicSizeOf(e);g&&(e.style.opacity=t?"1":"0"),t?(e.style.height=`${r.height}px`,n.style.height=`${r.height}px`,b.reflow(e),e.style.height=`${i.height}px`,e.ontransitionend=()=>{e.style.height=null,n.style.height=null},n.style.height=`${i.height}px`):(e.style.height=`${r.height}px`,n.style.height=`${i.height}px`,b.reflow(e),e.style.height="0px",e.ontransitionend=null)}d.current=t}),[t]),e(y,{ref:h,opacity:g?t?"1":"0":void 0,overflow:n,willChange:f,transitionProperty:g?"height, opacity":"height",transitionDuration:i,transitionTimingFunction:l,children:e("div",{children:a})})}}(w||(w={}));const v=o((e=>e.children),((e,t)=>e.value===t.value));function C({value:t,style:n,animation:i,children:s}){const o=null!=t?t:s,a=r(0),c=r([{key:o,id:a.current}]),d=c.current,[h,u]=l(0);return 0!=d.length&&d[d.length-1].key!=o&&d.push({key:o,id:a.current+=1}),e("div",{style:Object.assign({position:"relative"},n),children:d.map(((t,n)=>e(O,{value:t.key,first:0==t.id,latest:n==d.length-1,children:s,animation:i,onDetach:()=>{c.current=c.current.filter((e=>e.id!==t.id)),u((e=>e+1))}},t.id)))})}function O({value:t,first:n,latest:i,children:o,onDetach:l,animation:a}){const c=r(null);return console.assert(null!=a.duration||null!=a.fadeInDuration,"A given not exists a duration of the fade-in animation. therefore, you should defines the value of the `duration` or `fadeInDuration`."),console.assert(null!=a.duration||null!=a.fadeOutDuration,"A given not exists a duration of the fade-out animation. therefore, you should defines the value of the `duration` or `fadeOutDuration`."),s((()=>{var e,t,r;const s=c.current;if(i){const t=null!==(e=a.fadeOutDuration)&&void 0!==e?e:a.duration;if(n)return;"string"==typeof a.fadeIn?s.style.animation=`${a.fadeIn} ${t}`:(s.style.transitionProperty=[...new Set([...Object.keys(a.fadeIn.from),...Object.keys(a.fadeIn.to)])].join(", "),Object.entries(a.fadeIn.from).forEach((([e,t])=>{s.style.setProperty(e,t)})),requestAnimationFrame((()=>{s.style.transitionDuration=t,Object.entries(a.fadeIn.to).forEach((([e,t])=>{s.style.setProperty(e,t)}))})))}else{const e=null!==(t=a.fadeOutDuration)&&void 0!==t?t:a.duration;"string"==typeof a.fadeOut?(s.style.animation=`${a.fadeOut} ${e}`,s.onanimationend=l):(s.style.transitionProperty=[...new Set([...Object.keys(null!==(r=a.fadeOut.from)&&void 0!==r?r:[]),...Object.keys(a.fadeOut.to)])].join(", "),s.style.transitionDuration=e,s.ontransitionend=l,null!=a.fadeOut.from&&Object.entries(a.fadeOut.from).forEach((([e,t])=>{s.style.setProperty(e,t)})),requestAnimationFrame((()=>{s.style.transitionDuration=e,Object.entries(a.fadeOut.to).forEach((([e,t])=>{s.style.setProperty(e,t)}))})))}}),[i]),e(y,{ref:c,position:"absolute",children:e(v,{value:t,children:o})})}function j({children:t,duration:n,curve:i}){const o=r(null),l=r(null),a=r(null),c=u.instance.optionValueOf("useWillChange")?"width, height":void 0,d=()=>o.current,h=()=>d().firstElementChild;return s((()=>{const e=b.intrinsicSizeOf(h());l.current=e,a.current=e}),[]),s((()=>{const e=d(),t=h();t.firstChild.ontransitionend=e=>{e.stopPropagation()};{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null;const n=l.current,i=b.intrinsicSizeOf(t);if(n.width==i.width&&n.height==i.height)return;a.current=i,e.style.width=`${n.width}px`,e.style.height=`${n.height}px`,b.reflow(t),e.style.width=`${i.width}px`,e.style.height=`${i.height}px`,e.ontransitionend=()=>{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null},t.style.minWidth=`${i.width}px`,t.style.minHeight=`${i.height}px`}const n=new ResizeObserver((()=>{l.current=b.intrinsicSizeOf(e)}));return n.observe(e,{box:"border-box"}),()=>n.disconnect()}),[t]),e(y,{ref:o,overflow:"hidden",willChange:c,transitionProperty:"width, height",transitionDuration:n,transitionTimingFunction:i,children:e("div",{children:t})})}class x{constructor(){this._listeners=[]}redraw(){this.animId&&cancelAnimationFrame(this.animId),this.animId=requestAnimationFrame((()=>{this.notifyListeners(),this.animId=null}))}addListener(e){console.assert(!this._listeners.includes(e),"Already exists a given listener."),this._listeners.push(e)}removeListener(e){console.assert(this._listeners.includes(e),"Already not exists a given listener."),this._listeners=this._listeners.filter((t=>t!=e))}notifyListeners(){this._listeners.forEach((e=>e()))}}var z,S,T;function I(t){const n=t.align,i=Object.assign(Object.assign({},t),{flexDirection:t.reverse?"column-reverse":void 0,flexWrap:t.wrap?"wrap":void 0});return t.size&&(console.assert(null==t.width,"The `width` cannot be defined when defining the `size`."),console.assert(null==t.height,"The `height` cannot be defined when defining the `size`."),i.width=t.size,i.height=t.size),t.paddingAndGap&&(console.assert(null==t.padding,"The `padding` cannot be defined when defining the `paddingAndGap`."),console.assert(null==t.gap,"The `gap` cannot be defined when defining the `paddingAndGap`."),i.padding=t.paddingAndGap,i.gap=t.paddingAndGap),"bottomCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="end"):"bottomLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="end"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="end"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="center"):"centerRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"topCenter"==n?(i.alignItems="center",i.alignContent="center"):"topLeft"==n?(i.alignItems="left",i.alignContent="left"):"topRight"==n?(i.alignItems="right",i.alignContent="right"):"spaceBetweenLeft"==n?i.justifyContent="space-between":"spaceBetweenCenter"==n?(i.alignContent="center",i.justifyContent="space-between"):"spaceBetweenRight"==n?(i.alignContent="end",i.justifyContent="space-between"):"spaceAroundLeft"==n?i.justifyContent="space-between":"spaceAroundCenter"==n?(i.alignContent="center",i.justifyContent="space-around"):"spaceAroundRight"==n?(i.alignContent="end",i.justifyContent="space-around"):"spaceEvenlyLeft"==n?i.justifyContent="space-evenly":"spaceEvenlyCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"spaceEvenlyRight"==n&&(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"),e("widget-column",{className:t.className,style:i,children:t.children})}function R(t){const n=t.align,i=Object.assign(Object.assign({},t),{flexDirection:t.reverse?"row-reverse":void 0,flexWrap:t.wrap?"wrap":void 0});return t.size&&(console.assert(null==t.width,"The width cannot be defined when defining the size."),console.assert(null==t.height,"The height cannot be defined when defining the size."),i.width=t.size,i.height=t.size),t.paddingAndGap&&(console.assert(null==t.padding,"The padding cannot be defined when defining the paddingAndGap."),console.assert(null==t.gap,"The gap cannot be defined when defining the paddingAndGap."),i.padding=t.paddingAndGap,i.gap=t.paddingAndGap),"bottomCenter"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"bottomLeft"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="left"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="right"):"bottomSpaceBetween"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-between"):"bottomSpaceAround"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-around"):"bottomSpaceEvenly"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="left"):"centerRight"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="right"):"centerSpaceBetween"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-between"):"centerSpaceAround"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-around"):"centerSpaceEvenly"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"topCenter"==n?i.justifyContent="center":"topLeft"==n?i.justifyContent="left":"topRight"==n?i.justifyContent="right":"topSpaceBetween"==n?i.justifyContent="space-between":"topSpaceAround"==n?i.justifyContent="space-around":"topSpaceEvenly"==n&&(i.justifyContent="space-evenly"),e("widget-row",{className:t.className,style:i,children:t.children})}!function(t){function n({contextType:t,width:n,height:i,onDraw:o,controller:l}){const a=r(null);return s((()=>{const e=a.current,r=new ResizeObserver((()=>{e.style.width=n,e.style.height=i;const r=b.intrinsicSizeOf(e);e.setAttribute("width",`${r.width}px`),e.setAttribute("height",`${r.height}px`),o(e.getContext(t))}));return r.observe(e),()=>{r.disconnect()}}),[]),s((()=>{const e=a.current;l&&(l.active=e,l.addListener((()=>o(e.getContext(t)))))}),[l]),e("canvas",{ref:a})}t.Context2D=function({width:t,height:i,onDraw:r,controller:s}){return e(n,{contextType:"2d",width:t,height:i,onDraw:r,controller:s})},t.Foundation=n}(z||(z={})),function(n){n.Viewport=function({builder:n}){const i=()=>({width:window.innerWidth,height:window.innerHeight}),[r,o]=l(i());return s((()=>{const e=()=>o(i());return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),e(t,{children:n(r.width,r.height)})},n.Parent=function({builder:e}){}}(S||(S={}));class A{constructor(e,t,n){if(this.min=e,this.max=t,this.value=n,e>t)throw new Error("A min-constraint must be less than a max-constraint.")}}function E({constraints:t,usememo:n,builder:i}){return console.assert(0!=t.length,"A constraints of ConstraintBuilder must be one or more."),e(S.Viewport,{builder:(e,r)=>{var s;const o=null===(s=t.find((t=>t.min<=e&&t.max>=e)))||void 0===s?void 0:s.value;if(null==o)throw new Error("No constraint value exists for the current window size.");return(null!=n?n:u.instance.optionValueOf("useDefaultMemo"))?a((()=>i(o)),[o]):i(o)}})}function D({direction:t,children:n}){const i=r(null);return s((()=>{const e=i.current,n=e.parentElement,r=Array.from(n.children).filter((t=>t!=e));let s=0,o=0;const l=new ResizeObserver((i=>{const a=i[0].contentBoxSize[0].inlineSize,c=i[0].contentBoxSize[0].blockSize;if("vertical"==t&&o==c)return;if("horizontal"==t&&s==a)return;s=a,o=c;const d=r.reduce(((e,t)=>{const n=b.intrinsicSizeOf(t);return{width:e.width+n.width,height:e.height+n.height}}),{width:0,height:0});l.disconnect(),"vertical"==t?e.style.height=`calc(100% - ${d.height}px)`:e.style.minWidth=`calc(100% - ${d.width}px)`,requestAnimationFrame((()=>l.observe(n)))}));return l.observe(n),()=>l.disconnect()}),[]),e("div",{ref:i,children:n})}function L(t){const n=Object.assign(Object.assign({},t),{gridTemplateColumns:Array.from({length:t.rowCount},(()=>"1fr")).join(" "),padding:t.padding,margin:t.margin});return null!=t.gap?n.gap=t.gap:null!=t.verticalGap?n.rowGap=t.verticalGap:null!=t.horizontalGap&&(n.columnGap=t.horizontalGap),e("widget-grid",{style:n,children:t.children})}function k({children:t}){return e("div",{className:"ignore",children:t})}function F({before:t,behind:n,children:i}){const o=r(null);return s((()=>{const e=o.current,i=new ResizeObserver((()=>{if(e.removeAttribute("style"),t){const n=e.getBoundingClientRect();t(n,e)}if(n){console.assert(null!=t,"[before] and [behind] must be used together.");const i=e.getBoundingClientRect();n(i,e)}}));return i.observe(e),()=>i.disconnect()}),[]),e("div",{ref:o,children:i})}!function(t){t.Vertical=function(t){var n;const i=!(null===(n=t.scrollbar)||void 0===n||n);return e("scrollable-vertical",Object.assign({children:t.children},i&&{"scrollbar-none":""}))},t.Horizontal=function(t){var n;const i=!(null===(n=t.scrollbar)||void 0===n||n);return e("scrollable-horizontal",Object.assign({children:t.children},i&&{"scrollbar-none":""}))}}(T||(T={}));const $=c(null);class P{constructor(){this.listeners=[]}addListener(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding"),this.listeners.push(e)}removeListener(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding"),this.listeners=this.listeners.filter((t=>t!=e))}notifyListeners(e){console.assert(0!=this.listeners.length,"Not exists a listener to notify in this `SizedCononectionBinding` instance. Therefore, you need to add the 'SizedSlaver' component to the subtree of the 'SizedConnection' component."),this.listeners.forEach((t=>t(e)))}}function B({children:t}){const[n,i]=l(new P);return e($.Provider,{value:n,children:t})}function N(t){const n=d($),i=r(null);return console.assert(null!=n,"The `SizedConnection` component does not exist among the ancestor components of this `SizedMaster` component, Therefore you need to insert a `SizedConnection` component into ancestor tree of the `SizedMaster` component."),s((()=>{const e=i.current.firstElementChild,t=new ResizeObserver((()=>{null==n||n.notifyListeners(b.intrinsicSizeOf(e))}));return t.observe(e,{box:"border-box"}),()=>t.disconnect()}),[]),e(y,Object.assign({ref:i},t))}function W({onLayout:t,children:n}){const i=d($),o=r(null);return s((()=>{const e=e=>{t(e,o.current.firstElementChild)};return i.addListener(e),()=>i.removeListener(e)}),[]),e(y,{ref:o,display:"contents",children:n})}var _;function G(t){const n=Object.assign(Object.assign({},t),{display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:t.maxLine,textAlign:t.alignment,overflow:"hidden"});switch(t.type){case"h1":return e("h1",{style:n,children:t.children});case"h2":return e("h2",{style:n,children:t.children});case"h3":return e("h3",{style:n,children:t.children});case"h4":return e("h4",{style:n,children:t.children});case"h5":return e("h5",{style:n,children:t.children});case"h6":return e("h6",{style:n,children:t.children});case"a":return e("a",{style:n,children:t.children});case"p":return e("p",{style:n,children:t.children});case"span":return e("span",{style:n,children:t.children});default:return e("div",{style:n,children:t.children})}}!function(t){function i(e,t){const n=e.length;if(t>n)throw new Error(`The index of TabNavigation is overflowed. (given: ${t} > length: ${n})`);let i=0;for(let n=0;n<=t;n++)"ignore"==e[n+i].className&&i++;return e[t+i]}t.defualtStyle={backgroundColor:"black",width:"100%",thickness:"3px"},t.Horizontal=function({children:o,index:l,style:a,duration:c,curve:d,gap:h}){const u=r(null),g=Object.assign(Object.assign({},t.defualtStyle),a);return console.assert(l>=0,"The index of TabNavigation cannot be negative."),console.assert(l!=1/0,"The index of TabNavigation cannot be infinity."),s((()=>{if(null==l)return;const e=u.current,t=e.firstElementChild,n=e.lastElementChild,r=i(t.children,l),s=m.intrinsicOf(t),o=m.intrinsicOf(r);n.style.width=`${o.width}px`,n.style.marginLeft=o.left-s.left+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, width"))}),[l]),n(y,{ref:u,children:[e(R,{gap:h,children:o}),e(y,{transitionDuration:c,transitionTimingFunction:d,children:e(y,{width:g.width,height:null!=l?g.thickness:0,backgroundColor:g.backgroundColor,borderRadius:g.borderRadius,transitionDuration:c,transitionProperty:"height",transitionTimingFunction:d,margin:"0 auto"})})]})},t.Vertical=function({children:o,index:l,style:a,duration:c,curve:d,gap:h}){const u=r(null),g=Object.assign(Object.assign({},t.defualtStyle),a);return console.assert(l>=0,"The index of TabNavigation cannot be negative."),console.assert(l!=1/0,"The index of TabNavigation cannot be infinity."),s((()=>{if(null==l)return;const e=u.current,t=e.lastElementChild,n=e.firstElementChild,r=i(t.children,l),s=m.intrinsicOf(t),o=m.intrinsicOf(r);n.style.height=`${o.height}px`,n.style.marginTop=o.top-s.top+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, height"))}),[l]),n(y,{display:"flex",ref:u,children:[e(y,{display:"flex",alignItems:"center",transitionDuration:c,transitionTimingFunction:d,children:e(y,{width:null!=l?g.thickness:0,height:g.width,backgroundColor:g.backgroundColor,borderRadius:g.borderRadius,transitionDuration:c,transitionProperty:"width",transitionTimingFunction:d})}),e(I,{gap:h,children:o})]})}}(_||(_={})),function(t){t.h1=function(n){return n=Object.assign(Object.assign({},n),{type:"h1"}),e(t,Object.assign({},n))},t.h2=function(n){return n=Object.assign(Object.assign({},n),{type:"h2"}),e(t,Object.assign({},n))},t.h3=function(n){return n=Object.assign(Object.assign({},n),{type:"h3"}),e(t,Object.assign({},n))},t.h4=function(n){return n=Object.assign(Object.assign({},n),{type:"h4"}),e(t,Object.assign({},n))},t.h5=function(n){return n=Object.assign(Object.assign({},n),{type:"h5"}),e(t,Object.assign({},n))},t.h6=function(n){return n=Object.assign(Object.assign({},n),{type:"h6"}),e(t,Object.assign({},n))},t.a=function(n){return n=Object.assign(Object.assign({},n),{type:"a"}),e(t,Object.assign({},n))},t.p=function(n){return n=Object.assign(Object.assign({},n),{type:"p"}),e(t,Object.assign({},n))},t.span=function(n){return n=Object.assign(Object.assign({},n),{type:"span"}),e(t,Object.assign({},n))}}(G||(G={})),addEventListener("DOMContentLoaded",(()=>u.instance.initialize()));export{w as AnimatedFoldable,j as AnimatedSize,C as AnimatedTransition,f as App,g as ApplicationBinding,p as ApplicationEvent,y as Box,z as Canvas,x as CanvasController,I as Column,v as ConditionalRender,A as Constraint,E as ConstraintBuilder,D as Expanded,L as Grid,k as Ignore,F as Layout,h as ReactWidgets,u as ReactWidgetsBinding,R as Row,T as Scrollable,S as SizeBuilder,B as SizedConnection,P as SizedConnectionBinding,$ as SizedConnectionContext,N as SizedMaster,W as SizedSlaver,_ as TabNavigation,G as Text};
+import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{forwardRef as i,useRef as r,useLayoutEffect as s,memo as o,useState as l,useMemo as a,createContext as c,useContext as d}from"react";var h;!function(e){e.REACT_WIDGETS_OPTION={}}(h||(h={}));class u{constructor(){this.ids=new Map}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new u}set currentOption(e){h.REACT_WIDGETS_OPTION=e}getElementIdByTag(e){var t;const n=(null!==(t=this.ids.get(e))&&void 0!==t?t:0)+1;return e+this.ids.set(e,n).get(e)}optionValueOf(e){var t;return null!==(t=h.REACT_WIDGETS_OPTION[e])&&void 0!==t?t:u.default[e]}initialize(){const e=new CSSStyleSheet;this.optionValueOf("useStrict")&&e.insertRule("div { flex-shrink: 0; boxSizing: border-box; }"),this.initializeStyleSheet(e)}initializeStyleSheet(e){e.insertRule("widget-row { display: flex; flex-direction: row; }"),e.insertRule("widget-column { display: flex; flex-direction: column; }"),e.insertRule("widget-grid { display: grid; }"),e.insertRule("\n                scrollable-vertical {\n                    display: block;\n                    height: 100%;\n                    overflow-y: auto;\n                    overflow-x: clip;\n                }\n            "),e.insertRule("scrollable-vertical > * { height: max-content }"),e.insertRule("scrollable-vertical[scrollbar-none]::-webkit-scrollbar { display: none; }"),e.insertRule("\n                scrollable-horizontal {\n                    display: block;\n                    width: 100%;\n                    overflow-x: auto;\n                    overflow-y: clip;\n                }\n            "),e.insertRule("scrollable-horizontal > * { width: max-content; }"),e.insertRule("scrollable-horizontal[scrollbar-none]::-webkit-scrollbar { display: none; }"),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}}u.default={useStrict:!0,useDefaultMemo:!0,useWillChange:!0};class g{constructor(){this.listeners=[]}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new g}attach(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding."),this.listeners.push(e)}detach(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding."),this.listeners=this.listeners.filter((t=>t!=e))}rebuild(){console.assert(0!=this.listeners.length,"The `Application` component to detect events at top-level components is missing."),console.assert(1==this.listeners.length,"The `Application` component must exist as the only unique entity.")}}g._instance=null;const f=new Proxy(g,{get:()=>g.instance});var p;!function(e){e[e.REBUILD=0]="REBUILD"}(p||(p={}));const y=i(((t,n)=>{var i;const r=Object.assign({},t),s={id:t.id,className:t.className,children:t.children,ref:n,dangerouslySetInnerHTML:t.innerHTML?{__html:t.innerHTML}:void 0,onClick:t.onClick,onClickCapture:t.onClickCapture,onDoubleClick:t.onDoubleClick,onDoubleClickCapture:t.onDoubleClickCapture,onFocus:t.onFocus,onFocusCapture:t.onFocusCapture,onChange:t.onChange,onChangeCapture:t.onChangeCapture,onRateChange:t.onRateChange,onRateChangeCapture:t.onRateChangeCapture,onVolumeChange:t.onVolumeChange,onVolumeChangeCapture:t.onVolumeChangeCapture};return t.size&&(console.assert(null==t.width,"The width cannot be defined when defining the size."),console.assert(null==t.height,"The height cannot be defined when defining the size."),r.width=t.size,r.height=t.size),e(null!==(i=t.tagName)&&void 0!==i?i:"div",Object.assign(Object.assign({},s),{style:r}))}));Object.defineProperty(Element.prototype,"intrinsicSize",{get:function(){return b.intrinsicSizeOf(this)}}),Object.defineProperty(Element.prototype,"intrinsicWidth",{get:function(){return b.intrinsicSizeOf(this).width}}),Object.defineProperty(Element.prototype,"intrinsicHeight",{get:function(){return b.intrinsicSizeOf(this).height}}),Object.defineProperty(Element.prototype,"reflow",{get:function(){return b.reflow(this)}});class b{static reflow(e){e.getBoundingClientRect()}static intrinsicSizeOf(e,t){for(;e;){const n=null!=t?t:getComputedStyle(e),i=parseFloat(n.width),r=parseFloat(n.height),s=parseFloat(n.paddingLeft),o=parseFloat(n.paddingRight),l=parseFloat(n.paddingTop),a=parseFloat(n.paddingBottom),c=parseFloat(n.borderLeftWidth),d=parseFloat(n.borderRightWidth),h=parseFloat(n.borderTopWidth),u=parseFloat(n.borderBottomWidth),g=parseFloat(n.marginLeft),f=parseFloat(n.marginRight),p=parseFloat(n.marginTop),y=parseFloat(n.marginBottom),b=n.boxSizing,m=n.position;if("contents"===n.display){let t=Array.from(e.children).filter((e=>"STYLE"!==e.tagName&&"SCRIPT"!==e.tagName));if(1!==t.length)throw new Error("An element with a display property of 'contents' must have only one child to define its intrinsic size.");e=t[0];continue}let w=i,v=r;return"content-box"===b&&(w+=s+o+c+d,v+=l+a+h+u),"absolute"!==m&&"fixed"!==m&&(w+=g+f,v+=p+y),{width:w,height:v}}}}Object.defineProperty(Element.prototype,"intrinsicRect",{get:function(){return m.intrinsicOf(this)}});class m{static intrinsicOf(e,t){const n=null!=t?t:getComputedStyle(e),i=b.intrinsicSizeOf(e,n),r=e.getBoundingClientRect();return new DOMRect(r.x,r.y,i.width,i.height)}}var w;!function(t){t.Horizontal=function({visible:t,overflow:n="hidden",duration:i,transition:o={opacity:!1},curve:l,children:a}){var c;const d=r(t),h=r(null),g=null!==(c=null==o?void 0:o.opacity)&&void 0!==c&&c,f=u.instance.optionValueOf("useWillChange")?g?"width, opacity":"width":void 0;return s((()=>{const e=h.current,n=e.firstElementChild,i=b.intrinsicSizeOf(n),r=b.intrinsicSizeOf(e);if(n.ontransitionend=e=>{e.stopPropagation()},t==d.current)e.style.width=t?null:"0px",n.style.width=t?null:`${i.width}px`;else{e.style.width=null,n.style.width=null;const i=b.intrinsicSizeOf(e);g&&(e.style.opacity=t?"1":"0"),t?(e.style.width=`${r.width}px`,n.style.width=`${r.width}px`,b.reflow(e),e.style.width=`${i.width}px`,e.ontransitionend=()=>{e.style.width=null,n.style.width=null},n.style.width=`${i.width}px`):(e.style.width=`${r.width}px`,n.style.width=`${i.width}px`,b.reflow(e),e.style.width="0px",e.ontransitionend=null)}d.current=t}),[t]),e(y,{ref:h,opacity:g?t?"1":"0":void 0,overflow:n,willChange:f,transitionProperty:g?"width, opacity":"width",transitionDuration:i,transitionTimingFunction:l,children:e("div",{children:a})})},t.Vertical=function({visible:t,overflow:n="hidden",duration:i,transition:o={opacity:!1},curve:l,children:a}){var c;const d=r(t),h=r(null),g=null!==(c=null==o?void 0:o.opacity)&&void 0!==c&&c,f=u.instance.optionValueOf("useWillChange")?g?"height, opacity":"height":void 0;return s((()=>{const e=h.current,n=e.firstElementChild,i=b.intrinsicSizeOf(n),r=b.intrinsicSizeOf(e);if(n.ontransitionend=e=>{e.stopPropagation()},t==d.current)e.style.height=t?null:"0px",n.style.height=t?null:`${i.height}px`;else{e.style.height=null,n.style.height=null;const i=b.intrinsicSizeOf(e);g&&(e.style.opacity=t?"1":"0"),t?(e.style.height=`${r.height}px`,n.style.height=`${r.height}px`,b.reflow(e),e.style.height=`${i.height}px`,e.ontransitionend=()=>{e.style.height=null,n.style.height=null},n.style.height=`${i.height}px`):(e.style.height=`${r.height}px`,n.style.height=`${i.height}px`,b.reflow(e),e.style.height="0px",e.ontransitionend=null)}d.current=t}),[t]),e(y,{ref:h,opacity:g?t?"1":"0":void 0,overflow:n,willChange:f,transitionProperty:g?"height, opacity":"height",transitionDuration:i,transitionTimingFunction:l,children:e("div",{children:a})})}}(w||(w={}));const v=o((e=>e.children),((e,t)=>{var n;return(null===(n=t.active)||void 0===n||n)&&e.value===t.value}));function C({value:t,style:n,animation:i,children:s}){const o=null!=t?t:s,a=r(0),c=r([{key:o,id:a.current}]),d=c.current,[h,u]=l(0);return 0!=d.length&&d[d.length-1].key!==o&&d.push({key:o,id:a.current+=1}),e("div",{style:Object.assign({position:"relative"},n),children:d.map(((t,n)=>e(O,{value:t.key,first:0==t.id,latest:n==d.length-1,children:s,animation:i,onDetach:()=>{c.current=c.current.filter((e=>e.id!==t.id)),u((e=>e+1))}},t.id)))})}function O({value:t,first:n,latest:i,children:o,onDetach:l,animation:a}){const c=r(null),d=r({width:0,height:0});console.assert(null!=a.duration||null!=a.fadeInDuration,"A given not exists a duration of the fade-in animation. therefore, you should defines the value of the `duration` or `fadeInDuration`."),console.assert(null!=a.duration||null!=a.fadeOutDuration,"A given not exists a duration of the fade-out animation. therefore, you should defines the value of the `duration` or `fadeOutDuration`."),s((()=>{var e,t,r;const s=c.current;if(i){const t=null!==(e=a.fadeOutDuration)&&void 0!==e?e:a.duration;if(n)return;"string"==typeof a.fadeIn?s.style.animation=`${a.fadeIn} ${t}`:(s.style.transitionProperty=[...new Set([...Object.keys(a.fadeIn.from),...Object.keys(a.fadeIn.to)])].join(", "),Object.entries(a.fadeIn.from).forEach((([e,t])=>{s.style.setProperty(e,t)})),requestAnimationFrame((()=>{s.style.transitionDuration=t,Object.entries(a.fadeIn.to).forEach((([e,t])=>{s.style.setProperty(e,t)}))})))}else{const e=null!==(t=a.fadeOutDuration)&&void 0!==t?t:a.duration,n=d.current;s.style.width=`${n.width}px`,s.style.height=`${n.height}px`,"string"==typeof a.fadeOut?(s.style.animation=`${a.fadeOut} ${e}`,s.onanimationend=l):(s.style.transitionProperty=[...new Set([...Object.keys(null!==(r=a.fadeOut.from)&&void 0!==r?r:[]),...Object.keys(a.fadeOut.to)])].join(", "),s.style.transitionDuration=e,s.ontransitionend=l,null!=a.fadeOut.from&&Object.entries(a.fadeOut.from).forEach((([e,t])=>{s.style.setProperty(e,t)})),requestAnimationFrame((()=>{s.style.transitionDuration=e,Object.entries(a.fadeOut.to).forEach((([e,t])=>{s.style.setProperty(e,t)}))})))}}),[i]),s((()=>{const e=new ResizeObserver((e=>{d.current={width:e[0].contentRect.width,height:e[0].contentRect.height}}));return e.observe(c.current),()=>e.disconnect()}),[]);return e(y,{ref:c,position:i?void 0:"absolute",children:e(v,{active:!i,value:t,children:o})})}function j({children:t,duration:n,curve:i}){const o=r(null),l=r(null),a=r(null),c=u.instance.optionValueOf("useWillChange")?"width, height":void 0,d=()=>o.current,h=()=>d().firstElementChild;return s((()=>{const e=b.intrinsicSizeOf(h());l.current=e,a.current=e}),[]),s((()=>{const e=d(),t=h();t.firstChild.ontransitionend=e=>{e.stopPropagation()};{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null;const n=l.current,i=b.intrinsicSizeOf(t);if(n.width==i.width&&n.height==i.height)return;a.current=i,e.style.width=`${n.width}px`,e.style.height=`${n.height}px`,b.reflow(t),e.style.width=`${i.width}px`,e.style.height=`${i.height}px`,e.ontransitionend=()=>{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null},t.style.minWidth=`${i.width}px`,t.style.minHeight=`${i.height}px`}const n=new ResizeObserver((()=>{l.current=b.intrinsicSizeOf(e)}));return n.observe(e,{box:"border-box"}),()=>n.disconnect()}),[t]),e(y,{ref:o,overflow:"hidden",willChange:c,transitionProperty:"width, height",transitionDuration:n,transitionTimingFunction:i,children:e("div",{children:t})})}class x{constructor(){this._listeners=[]}redraw(){this.animId&&cancelAnimationFrame(this.animId),this.animId=requestAnimationFrame((()=>{this.notifyListeners(),this.animId=null}))}addListener(e){console.assert(!this._listeners.includes(e),"Already exists a given listener."),this._listeners.push(e)}removeListener(e){console.assert(this._listeners.includes(e),"Already not exists a given listener."),this._listeners=this._listeners.filter((t=>t!=e))}notifyListeners(){this._listeners.forEach((e=>e()))}}var z,S,T;function R(t){const n=t.align,i=Object.assign(Object.assign({},t),{flexDirection:t.reverse?"column-reverse":void 0,flexWrap:t.wrap?"wrap":void 0});return t.size&&(console.assert(null==t.width,"The `width` cannot be defined when defining the `size`."),console.assert(null==t.height,"The `height` cannot be defined when defining the `size`."),i.width=t.size,i.height=t.size),t.paddingAndGap&&(console.assert(null==t.padding,"The `padding` cannot be defined when defining the `paddingAndGap`."),console.assert(null==t.gap,"The `gap` cannot be defined when defining the `paddingAndGap`."),i.padding=t.paddingAndGap,i.gap=t.paddingAndGap),"bottomCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="end"):"bottomLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="end"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="end"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="center"):"centerRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"topCenter"==n?(i.alignItems="center",i.alignContent="center"):"topLeft"==n?(i.alignItems="left",i.alignContent="left"):"topRight"==n?(i.alignItems="right",i.alignContent="right"):"spaceBetweenLeft"==n?i.justifyContent="space-between":"spaceBetweenCenter"==n?(i.alignContent="center",i.justifyContent="space-between"):"spaceBetweenRight"==n?(i.alignContent="end",i.justifyContent="space-between"):"spaceAroundLeft"==n?i.justifyContent="space-between":"spaceAroundCenter"==n?(i.alignContent="center",i.justifyContent="space-around"):"spaceAroundRight"==n?(i.alignContent="end",i.justifyContent="space-around"):"spaceEvenlyLeft"==n?i.justifyContent="space-evenly":"spaceEvenlyCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"spaceEvenlyRight"==n&&(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"),e("widget-column",{className:t.className,style:i,children:t.children})}function I(t){const n=t.align,i=Object.assign(Object.assign({},t),{flexDirection:t.reverse?"row-reverse":void 0,flexWrap:t.wrap?"wrap":void 0});return t.size&&(console.assert(null==t.width,"The width cannot be defined when defining the size."),console.assert(null==t.height,"The height cannot be defined when defining the size."),i.width=t.size,i.height=t.size),t.paddingAndGap&&(console.assert(null==t.padding,"The padding cannot be defined when defining the paddingAndGap."),console.assert(null==t.gap,"The gap cannot be defined when defining the paddingAndGap."),i.padding=t.paddingAndGap,i.gap=t.paddingAndGap),"bottomCenter"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"bottomLeft"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="left"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="right"):"bottomSpaceBetween"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-between"):"bottomSpaceAround"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-around"):"bottomSpaceEvenly"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="left"):"centerRight"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="right"):"centerSpaceBetween"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-between"):"centerSpaceAround"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-around"):"centerSpaceEvenly"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"topCenter"==n?i.justifyContent="center":"topLeft"==n?i.justifyContent="left":"topRight"==n?i.justifyContent="right":"topSpaceBetween"==n?i.justifyContent="space-between":"topSpaceAround"==n?i.justifyContent="space-around":"topSpaceEvenly"==n&&(i.justifyContent="space-evenly"),e("widget-row",{className:t.className,style:i,children:t.children})}!function(t){function n({contextType:t,width:n,height:i,onDraw:o,controller:l}){const a=r(null);return s((()=>{const e=a.current,r=new ResizeObserver((()=>{e.style.width=n,e.style.height=i;const r=b.intrinsicSizeOf(e);e.setAttribute("width",`${r.width}px`),e.setAttribute("height",`${r.height}px`),o(e.getContext(t))}));return r.observe(e),()=>{r.disconnect()}}),[]),s((()=>{const e=a.current;l&&(l.active=e,l.addListener((()=>o(e.getContext(t)))))}),[l]),e("canvas",{ref:a})}t.Context2D=function({width:t,height:i,onDraw:r,controller:s}){return e(n,{contextType:"2d",width:t,height:i,onDraw:r,controller:s})},t.Foundation=n}(z||(z={})),function(n){n.Viewport=function({builder:n}){const i=()=>({width:window.innerWidth,height:window.innerHeight}),[r,o]=l(i());return s((()=>{const e=()=>o(i());return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),e(t,{children:n(r.width,r.height)})},n.Parent=function({builder:e}){}}(S||(S={}));class A{constructor(e,t,n){if(this.min=e,this.max=t,this.value=n,e>t)throw new Error("A min-constraint must be less than a max-constraint.")}}function E({constraints:t,usememo:n,builder:i}){return console.assert(0!=t.length,"A constraints of ConstraintBuilder must be one or more."),e(S.Viewport,{builder:(e,r)=>{var s;const o=null===(s=t.find((t=>t.min<=e&&t.max>=e)))||void 0===s?void 0:s.value;if(null==o)throw new Error("No constraint value exists for the current window size.");return(null!=n?n:u.instance.optionValueOf("useDefaultMemo"))?a((()=>i(o)),[o]):i(o)}})}function D({direction:t,children:n}){const i=r(null);return s((()=>{const e=i.current,n=e.parentElement,r=Array.from(n.children).filter((t=>t!=e));let s=0,o=0;const l=new ResizeObserver((i=>{const a=i[0].contentBoxSize[0].inlineSize,c=i[0].contentBoxSize[0].blockSize;if("vertical"==t&&o==c)return;if("horizontal"==t&&s==a)return;s=a,o=c;const d=r.reduce(((e,t)=>{const n=b.intrinsicSizeOf(t);return{width:e.width+n.width,height:e.height+n.height}}),{width:0,height:0});l.disconnect(),"vertical"==t?e.style.height=`calc(100% - ${d.height}px)`:e.style.minWidth=`calc(100% - ${d.width}px)`,requestAnimationFrame((()=>l.observe(n)))}));return l.observe(n),()=>l.disconnect()}),[]),e("div",{ref:i,children:n})}function L(t){const n=Object.assign(Object.assign({},t),{gridTemplateColumns:Array.from({length:t.rowCount},(()=>"1fr")).join(" "),padding:t.padding,margin:t.margin});return null!=t.gap?n.gap=t.gap:null!=t.verticalGap?n.rowGap=t.verticalGap:null!=t.horizontalGap&&(n.columnGap=t.horizontalGap),e("widget-grid",{style:n,children:t.children})}function k({children:t}){return e("div",{className:"ignore",children:t})}function $({before:t,behind:n,children:i}){const o=r(null);return s((()=>{const e=o.current,i=new ResizeObserver((()=>{if(e.removeAttribute("style"),t){const n=e.getBoundingClientRect();t(n,e)}if(n){console.assert(null!=t,"[before] and [behind] must be used together.");const i=e.getBoundingClientRect();n(i,e)}}));return i.observe(e),()=>i.disconnect()}),[]),e("div",{ref:o,children:i})}!function(t){t.Vertical=function(t){var n;const i=!(null===(n=t.scrollbar)||void 0===n||n);return e("scrollable-vertical",Object.assign({children:t.children},i&&{"scrollbar-none":""}))},t.Horizontal=function(t){var n;const i=!(null===(n=t.scrollbar)||void 0===n||n);return e("scrollable-horizontal",Object.assign({children:t.children},i&&{"scrollbar-none":""}))}}(T||(T={}));const F=c(null);class P{constructor(){this.listeners=[]}addListener(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding"),this.listeners.push(e)}removeListener(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding"),this.listeners=this.listeners.filter((t=>t!=e))}notifyListeners(e){console.assert(0!=this.listeners.length,"Not exists a listener to notify in this `SizedCononectionBinding` instance. Therefore, you need to add the 'SizedSlaver' component to the subtree of the 'SizedConnection' component."),this.listeners.forEach((t=>t(e)))}}function B({children:t}){const[n,i]=l(new P);return e(F.Provider,{value:n,children:t})}function N(t){const n=d(F),i=r(null);return console.assert(null!=n,"The `SizedConnection` component does not exist among the ancestor components of this `SizedMaster` component, Therefore you need to insert a `SizedConnection` component into ancestor tree of the `SizedMaster` component."),s((()=>{const e=i.current.firstElementChild,t=new ResizeObserver((()=>{null==n||n.notifyListeners(b.intrinsicSizeOf(e))}));return t.observe(e,{box:"border-box"}),()=>t.disconnect()}),[]),e(y,Object.assign({ref:i},t))}function W({onLayout:t,children:n}){const i=d(F),o=r(null);return s((()=>{const e=e=>{t(e,o.current.firstElementChild)};return i.addListener(e),()=>i.removeListener(e)}),[]),e(y,{ref:o,display:"contents",children:n})}var _;function G(t){const n=Object.assign(Object.assign({},t),{display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:t.maxLine,textAlign:t.alignment,overflow:"hidden"});switch(t.type){case"h1":return e("h1",{style:n,children:t.children});case"h2":return e("h2",{style:n,children:t.children});case"h3":return e("h3",{style:n,children:t.children});case"h4":return e("h4",{style:n,children:t.children});case"h5":return e("h5",{style:n,children:t.children});case"h6":return e("h6",{style:n,children:t.children});case"a":return e("a",{style:n,children:t.children});case"p":return e("p",{style:n,children:t.children});case"span":return e("span",{style:n,children:t.children});default:return e("div",{style:n,children:t.children})}}!function(t){function i(e,t){const n=e.length;if(t>n)throw new Error(`The index of TabNavigation is overflowed. (given: ${t} > length: ${n})`);let i=0;for(let n=0;n<=t;n++)"ignore"==e[n+i].className&&i++;return e[t+i]}t.defualtStyle={backgroundColor:"black",width:"100%",thickness:"3px"},t.Horizontal=function({children:o,index:l,style:a,duration:c,curve:d,gap:h}){const u=r(null),g=Object.assign(Object.assign({},t.defualtStyle),a);return console.assert(l>=0,"The index of TabNavigation cannot be negative."),console.assert(l!=1/0,"The index of TabNavigation cannot be infinity."),s((()=>{if(null==l)return;const e=u.current,t=e.firstElementChild,n=e.lastElementChild,r=i(t.children,l),s=m.intrinsicOf(t),o=m.intrinsicOf(r);n.style.width=`${o.width}px`,n.style.marginLeft=o.left-s.left+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, width"))}),[l]),n(y,{ref:u,children:[e(I,{gap:h,children:o}),e(y,{transitionDuration:c,transitionTimingFunction:d,children:e(y,{width:g.width,height:null!=l?g.thickness:0,backgroundColor:g.backgroundColor,borderRadius:g.borderRadius,transitionDuration:c,transitionProperty:"height",transitionTimingFunction:d,margin:"0 auto"})})]})},t.Vertical=function({children:o,index:l,style:a,duration:c,curve:d,gap:h}){const u=r(null),g=Object.assign(Object.assign({},t.defualtStyle),a);return console.assert(l>=0,"The index of TabNavigation cannot be negative."),console.assert(l!=1/0,"The index of TabNavigation cannot be infinity."),s((()=>{if(null==l)return;const e=u.current,t=e.lastElementChild,n=e.firstElementChild,r=i(t.children,l),s=m.intrinsicOf(t),o=m.intrinsicOf(r);n.style.height=`${o.height}px`,n.style.marginTop=o.top-s.top+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, height"))}),[l]),n(y,{display:"flex",ref:u,children:[e(y,{display:"flex",alignItems:"center",transitionDuration:c,transitionTimingFunction:d,children:e(y,{width:null!=l?g.thickness:0,height:g.width,backgroundColor:g.backgroundColor,borderRadius:g.borderRadius,transitionDuration:c,transitionProperty:"width",transitionTimingFunction:d})}),e(R,{gap:h,children:o})]})}}(_||(_={})),function(t){t.h1=function(n){return n=Object.assign(Object.assign({},n),{type:"h1"}),e(t,Object.assign({},n))},t.h2=function(n){return n=Object.assign(Object.assign({},n),{type:"h2"}),e(t,Object.assign({},n))},t.h3=function(n){return n=Object.assign(Object.assign({},n),{type:"h3"}),e(t,Object.assign({},n))},t.h4=function(n){return n=Object.assign(Object.assign({},n),{type:"h4"}),e(t,Object.assign({},n))},t.h5=function(n){return n=Object.assign(Object.assign({},n),{type:"h5"}),e(t,Object.assign({},n))},t.h6=function(n){return n=Object.assign(Object.assign({},n),{type:"h6"}),e(t,Object.assign({},n))},t.a=function(n){return n=Object.assign(Object.assign({},n),{type:"a"}),e(t,Object.assign({},n))},t.p=function(n){return n=Object.assign(Object.assign({},n),{type:"p"}),e(t,Object.assign({},n))},t.span=function(n){return n=Object.assign(Object.assign({},n),{type:"span"}),e(t,Object.assign({},n))}}(G||(G={})),addEventListener("DOMContentLoaded",(()=>u.instance.initialize()));export{w as AnimatedFoldable,j as AnimatedSize,C as AnimatedTransition,f as App,g as ApplicationBinding,p as ApplicationEvent,y as Box,z as Canvas,x as CanvasController,R as Column,v as ConditionalRender,A as Constraint,E as ConstraintBuilder,D as Expanded,L as Grid,k as Ignore,$ as Layout,h as ReactWidgets,u as ReactWidgetsBinding,I as Row,T as Scrollable,S as SizeBuilder,B as SizedConnection,P as SizedConnectionBinding,F as SizedConnectionContext,N as SizedMaster,W as SizedSlaver,_ as TabNavigation,G as Text};
 //# sourceMappingURL=index.esm.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactWidgets={},e.React,e.React)}(this,(function(e,t,n){"use strict";e.ReactWidgets=void 0,(e.ReactWidgets||(e.ReactWidgets={})).REACT_WIDGETS_OPTION={};class i{constructor(){this.ids=new Map}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new i}set currentOption(t){e.ReactWidgets.REACT_WIDGETS_OPTION=t}getElementIdByTag(e){var t;const n=(null!==(t=this.ids.get(e))&&void 0!==t?t:0)+1;return e+this.ids.set(e,n).get(e)}optionValueOf(t){var n;return null!==(n=e.ReactWidgets.REACT_WIDGETS_OPTION[t])&&void 0!==n?n:i.default[t]}initialize(){const e=new CSSStyleSheet;this.optionValueOf("useStrict")&&e.insertRule("div { flex-shrink: 0; boxSizing: border-box; }"),this.initializeStyleSheet(e)}initializeStyleSheet(e){e.insertRule("widget-row { display: flex; flex-direction: row; }"),e.insertRule("widget-column { display: flex; flex-direction: column; }"),e.insertRule("widget-grid { display: grid; }"),e.insertRule("\n                scrollable-vertical {\n                    display: block;\n                    height: 100%;\n                    overflow-y: auto;\n                    overflow-x: clip;\n                }\n            "),e.insertRule("scrollable-vertical > * { height: max-content }"),e.insertRule("scrollable-vertical[scrollbar-none]::-webkit-scrollbar { display: none; }"),e.insertRule("\n                scrollable-horizontal {\n                    display: block;\n                    width: 100%;\n                    overflow-x: auto;\n                    overflow-y: clip;\n                }\n            "),e.insertRule("scrollable-horizontal > * { width: max-content; }"),e.insertRule("scrollable-horizontal[scrollbar-none]::-webkit-scrollbar { display: none; }"),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}}i.default={useStrict:!0,useDefaultMemo:!0,useWillChange:!0};class s{constructor(){this.listeners=[]}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new s}attach(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding."),this.listeners.push(e)}detach(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding."),this.listeners=this.listeners.filter((t=>t!=e))}rebuild(){console.assert(0!=this.listeners.length,"The `Application` component to detect events at top-level components is missing."),console.assert(1==this.listeners.length,"The `Application` component must exist as the only unique entity.")}}s._instance=null;const r=new Proxy(s,{get:()=>s.instance});var o;e.ApplicationEvent=void 0,(o=e.ApplicationEvent||(e.ApplicationEvent={}))[o.REBUILD=0]="REBUILD";const l=n.forwardRef(((e,n)=>{var i;const s=Object.assign({},e),r={id:e.id,className:e.className,children:e.children,ref:n,dangerouslySetInnerHTML:e.innerHTML?{__html:e.innerHTML}:void 0,onClick:e.onClick,onClickCapture:e.onClickCapture,onDoubleClick:e.onDoubleClick,onDoubleClickCapture:e.onDoubleClickCapture,onFocus:e.onFocus,onFocusCapture:e.onFocusCapture,onChange:e.onChange,onChangeCapture:e.onChangeCapture,onRateChange:e.onRateChange,onRateChangeCapture:e.onRateChangeCapture,onVolumeChange:e.onVolumeChange,onVolumeChangeCapture:e.onVolumeChangeCapture};return e.size&&(console.assert(null==e.width,"The width cannot be defined when defining the size."),console.assert(null==e.height,"The height cannot be defined when defining the size."),s.width=e.size,s.height=e.size),t.jsx(null!==(i=e.tagName)&&void 0!==i?i:"div",Object.assign(Object.assign({},r),{style:s}))}));Object.defineProperty(Element.prototype,"intrinsicSize",{get:function(){return a.intrinsicSizeOf(this)}}),Object.defineProperty(Element.prototype,"intrinsicWidth",{get:function(){return a.intrinsicSizeOf(this).width}}),Object.defineProperty(Element.prototype,"intrinsicHeight",{get:function(){return a.intrinsicSizeOf(this).height}}),Object.defineProperty(Element.prototype,"reflow",{get:function(){return a.reflow(this)}});class a{static reflow(e){e.getBoundingClientRect()}static intrinsicSizeOf(e,t){for(;e;){const n=null!=t?t:getComputedStyle(e),i=parseFloat(n.width),s=parseFloat(n.height),r=parseFloat(n.paddingLeft),o=parseFloat(n.paddingRight),l=parseFloat(n.paddingTop),a=parseFloat(n.paddingBottom),c=parseFloat(n.borderLeftWidth),d=parseFloat(n.borderRightWidth),u=parseFloat(n.borderTopWidth),h=parseFloat(n.borderBottomWidth),g=parseFloat(n.marginLeft),f=parseFloat(n.marginRight),p=parseFloat(n.marginTop),y=parseFloat(n.marginBottom),b=n.boxSizing,m=n.position;if("contents"===n.display){let t=Array.from(e.children).filter((e=>"STYLE"!==e.tagName&&"SCRIPT"!==e.tagName));if(1!==t.length)throw new Error("An element with a display property of 'contents' must have only one child to define its intrinsic size.");e=t[0];continue}let w=i,v=s;return"content-box"===b&&(w+=r+o+c+d,v+=l+a+u+h),"absolute"!==m&&"fixed"!==m&&(w+=g+f,v+=p+y),{width:w,height:v}}}}Object.defineProperty(Element.prototype,"intrinsicRect",{get:function(){return c.intrinsicOf(this)}});class c{static intrinsicOf(e,t){const n=null!=t?t:getComputedStyle(e),i=a.intrinsicSizeOf(e,n),s=e.getBoundingClientRect();return new DOMRect(s.x,s.y,i.width,i.height)}}var d;e.AnimatedFoldable=void 0,(d=e.AnimatedFoldable||(e.AnimatedFoldable={})).Horizontal=function({visible:e,overflow:s="hidden",duration:r,transition:o={opacity:!1},curve:c,children:d}){var u;const h=n.useRef(e),g=n.useRef(null),f=null!==(u=null==o?void 0:o.opacity)&&void 0!==u&&u,p=i.instance.optionValueOf("useWillChange")?f?"width, opacity":"width":void 0;return n.useLayoutEffect((()=>{const t=g.current,n=t.firstElementChild,i=a.intrinsicSizeOf(n),s=a.intrinsicSizeOf(t);if(n.ontransitionend=e=>{e.stopPropagation()},e==h.current)t.style.width=e?null:"0px",n.style.width=e?null:`${i.width}px`;else{t.style.width=null,n.style.width=null;const i=a.intrinsicSizeOf(t);f&&(t.style.opacity=e?"1":"0"),e?(t.style.width=`${s.width}px`,n.style.width=`${s.width}px`,a.reflow(t),t.style.width=`${i.width}px`,t.ontransitionend=()=>{t.style.width=null,n.style.width=null},n.style.width=`${i.width}px`):(t.style.width=`${s.width}px`,n.style.width=`${i.width}px`,a.reflow(t),t.style.width="0px",t.ontransitionend=null)}h.current=e}),[e]),t.jsx(l,{ref:g,opacity:f?e?"1":"0":void 0,overflow:s,willChange:p,transitionProperty:f?"width, opacity":"width",transitionDuration:r,transitionTimingFunction:c,children:t.jsx("div",{children:d})})},d.Vertical=function({visible:e,overflow:s="hidden",duration:r,transition:o={opacity:!1},curve:c,children:d}){var u;const h=n.useRef(e),g=n.useRef(null),f=null!==(u=null==o?void 0:o.opacity)&&void 0!==u&&u,p=i.instance.optionValueOf("useWillChange")?f?"height, opacity":"height":void 0;return n.useLayoutEffect((()=>{const t=g.current,n=t.firstElementChild,i=a.intrinsicSizeOf(n),s=a.intrinsicSizeOf(t);if(n.ontransitionend=e=>{e.stopPropagation()},e==h.current)t.style.height=e?null:"0px",n.style.height=e?null:`${i.height}px`;else{t.style.height=null,n.style.height=null;const i=a.intrinsicSizeOf(t);f&&(t.style.opacity=e?"1":"0"),e?(t.style.height=`${s.height}px`,n.style.height=`${s.height}px`,a.reflow(t),t.style.height=`${i.height}px`,t.ontransitionend=()=>{t.style.height=null,n.style.height=null},n.style.height=`${i.height}px`):(t.style.height=`${s.height}px`,n.style.height=`${i.height}px`,a.reflow(t),t.style.height="0px",t.ontransitionend=null)}h.current=e}),[e]),t.jsx(l,{ref:g,opacity:f?e?"1":"0":void 0,overflow:s,willChange:p,transitionProperty:f?"height, opacity":"height",transitionDuration:r,transitionTimingFunction:c,children:t.jsx("div",{children:d})})};const u=n.memo((e=>e.children),((e,t)=>e.value===t.value));function h({value:e,first:i,latest:s,children:r,onDetach:o,animation:a}){const c=n.useRef(null);return console.assert(null!=a.duration||null!=a.fadeInDuration,"A given not exists a duration of the fade-in animation. therefore, you should defines the value of the `duration` or `fadeInDuration`."),console.assert(null!=a.duration||null!=a.fadeOutDuration,"A given not exists a duration of the fade-out animation. therefore, you should defines the value of the `duration` or `fadeOutDuration`."),n.useLayoutEffect((()=>{var e,t,n;const r=c.current;if(s){const t=null!==(e=a.fadeOutDuration)&&void 0!==e?e:a.duration;if(i)return;"string"==typeof a.fadeIn?r.style.animation=`${a.fadeIn} ${t}`:(r.style.transitionProperty=[...new Set([...Object.keys(a.fadeIn.from),...Object.keys(a.fadeIn.to)])].join(", "),Object.entries(a.fadeIn.from).forEach((([e,t])=>{r.style.setProperty(e,t)})),requestAnimationFrame((()=>{r.style.transitionDuration=t,Object.entries(a.fadeIn.to).forEach((([e,t])=>{r.style.setProperty(e,t)}))})))}else{const e=null!==(t=a.fadeOutDuration)&&void 0!==t?t:a.duration;"string"==typeof a.fadeOut?(r.style.animation=`${a.fadeOut} ${e}`,r.onanimationend=o):(r.style.transitionProperty=[...new Set([...Object.keys(null!==(n=a.fadeOut.from)&&void 0!==n?n:[]),...Object.keys(a.fadeOut.to)])].join(", "),r.style.transitionDuration=e,r.ontransitionend=o,null!=a.fadeOut.from&&Object.entries(a.fadeOut.from).forEach((([e,t])=>{r.style.setProperty(e,t)})),requestAnimationFrame((()=>{r.style.transitionDuration=e,Object.entries(a.fadeOut.to).forEach((([e,t])=>{r.style.setProperty(e,t)}))})))}}),[s]),t.jsx(l,{ref:c,position:"absolute",children:t.jsx(u,{value:e,children:r})})}function g(e){const n=e.align,i=Object.assign(Object.assign({},e),{flexDirection:e.reverse?"column-reverse":void 0,flexWrap:e.wrap?"wrap":void 0});return e.size&&(console.assert(null==e.width,"The `width` cannot be defined when defining the `size`."),console.assert(null==e.height,"The `height` cannot be defined when defining the `size`."),i.width=e.size,i.height=e.size),e.paddingAndGap&&(console.assert(null==e.padding,"The `padding` cannot be defined when defining the `paddingAndGap`."),console.assert(null==e.gap,"The `gap` cannot be defined when defining the `paddingAndGap`."),i.padding=e.paddingAndGap,i.gap=e.paddingAndGap),"bottomCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="end"):"bottomLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="end"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="end"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="center"):"centerRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"topCenter"==n?(i.alignItems="center",i.alignContent="center"):"topLeft"==n?(i.alignItems="left",i.alignContent="left"):"topRight"==n?(i.alignItems="right",i.alignContent="right"):"spaceBetweenLeft"==n?i.justifyContent="space-between":"spaceBetweenCenter"==n?(i.alignContent="center",i.justifyContent="space-between"):"spaceBetweenRight"==n?(i.alignContent="end",i.justifyContent="space-between"):"spaceAroundLeft"==n?i.justifyContent="space-between":"spaceAroundCenter"==n?(i.alignContent="center",i.justifyContent="space-around"):"spaceAroundRight"==n?(i.alignContent="end",i.justifyContent="space-around"):"spaceEvenlyLeft"==n?i.justifyContent="space-evenly":"spaceEvenlyCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"spaceEvenlyRight"==n&&(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"),t.jsx("widget-column",{className:e.className,style:i,children:e.children})}function f(e){const n=e.align,i=Object.assign(Object.assign({},e),{flexDirection:e.reverse?"row-reverse":void 0,flexWrap:e.wrap?"wrap":void 0});return e.size&&(console.assert(null==e.width,"The width cannot be defined when defining the size."),console.assert(null==e.height,"The height cannot be defined when defining the size."),i.width=e.size,i.height=e.size),e.paddingAndGap&&(console.assert(null==e.padding,"The padding cannot be defined when defining the paddingAndGap."),console.assert(null==e.gap,"The gap cannot be defined when defining the paddingAndGap."),i.padding=e.paddingAndGap,i.gap=e.paddingAndGap),"bottomCenter"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"bottomLeft"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="left"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="right"):"bottomSpaceBetween"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-between"):"bottomSpaceAround"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-around"):"bottomSpaceEvenly"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="left"):"centerRight"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="right"):"centerSpaceBetween"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-between"):"centerSpaceAround"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-around"):"centerSpaceEvenly"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"topCenter"==n?i.justifyContent="center":"topLeft"==n?i.justifyContent="left":"topRight"==n?i.justifyContent="right":"topSpaceBetween"==n?i.justifyContent="space-between":"topSpaceAround"==n?i.justifyContent="space-around":"topSpaceEvenly"==n&&(i.justifyContent="space-evenly"),t.jsx("widget-row",{className:e.className,style:i,children:e.children})}var p,y;e.Canvas=void 0,function(e){function i({contextType:e,width:i,height:s,onDraw:r,controller:o}){const l=n.useRef(null);return n.useLayoutEffect((()=>{const t=l.current,n=new ResizeObserver((()=>{t.style.width=i,t.style.height=s;const n=a.intrinsicSizeOf(t);t.setAttribute("width",`${n.width}px`),t.setAttribute("height",`${n.height}px`),r(t.getContext(e))}));return n.observe(t),()=>{n.disconnect()}}),[]),n.useLayoutEffect((()=>{const t=l.current;o&&(o.active=t,o.addListener((()=>r(t.getContext(e)))))}),[o]),t.jsx("canvas",{ref:l})}e.Context2D=function({width:e,height:n,onDraw:s,controller:r}){return t.jsx(i,{contextType:"2d",width:e,height:n,onDraw:s,controller:r})},e.Foundation=i}(e.Canvas||(e.Canvas={})),e.SizeBuilder=void 0,(p=e.SizeBuilder||(e.SizeBuilder={})).Viewport=function({builder:e}){const i=()=>({width:window.innerWidth,height:window.innerHeight}),[s,r]=n.useState(i());return n.useLayoutEffect((()=>{const e=()=>r(i());return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),t.jsx(t.Fragment,{children:e(s.width,s.height)})},p.Parent=function({builder:e}){};e.Scrollable=void 0,(y=e.Scrollable||(e.Scrollable={})).Vertical=function(e){var n;const i=!(null===(n=e.scrollbar)||void 0===n||n);return t.jsx("scrollable-vertical",Object.assign({children:e.children},i&&{"scrollbar-none":""}))},y.Horizontal=function(e){var n;const i=!(null===(n=e.scrollbar)||void 0===n||n);return t.jsx("scrollable-horizontal",Object.assign({children:e.children},i&&{"scrollbar-none":""}))};const b=n.createContext(null);class m{constructor(){this.listeners=[]}addListener(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding"),this.listeners.push(e)}removeListener(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding"),this.listeners=this.listeners.filter((t=>t!=e))}notifyListeners(e){console.assert(0!=this.listeners.length,"Not exists a listener to notify in this `SizedCononectionBinding` instance. Therefore, you need to add the 'SizedSlaver' component to the subtree of the 'SizedConnection' component."),this.listeners.forEach((t=>t(e)))}}function w(e){const n=Object.assign(Object.assign({},e),{display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:e.maxLine,textAlign:e.alignment,overflow:"hidden"});switch(e.type){case"h1":return t.jsx("h1",{style:n,children:e.children});case"h2":return t.jsx("h2",{style:n,children:e.children});case"h3":return t.jsx("h3",{style:n,children:e.children});case"h4":return t.jsx("h4",{style:n,children:e.children});case"h5":return t.jsx("h5",{style:n,children:e.children});case"h6":return t.jsx("h6",{style:n,children:e.children});case"a":return t.jsx("a",{style:n,children:e.children});case"p":return t.jsx("p",{style:n,children:e.children});case"span":return t.jsx("span",{style:n,children:e.children});default:return t.jsx("div",{style:n,children:e.children})}}e.TabNavigation=void 0,function(e){function i(e,t){const n=e.length;if(t>n)throw new Error(`The index of TabNavigation is overflowed. (given: ${t} > length: ${n})`);let i=0;for(let n=0;n<=t;n++)"ignore"==e[n+i].className&&i++;return e[t+i]}e.defualtStyle={backgroundColor:"black",width:"100%",thickness:"3px"},e.Horizontal=function({children:s,index:r,style:o,duration:a,curve:d,gap:u}){const h=n.useRef(null),g=Object.assign(Object.assign({},e.defualtStyle),o);return console.assert(r>=0,"The index of TabNavigation cannot be negative."),console.assert(r!=1/0,"The index of TabNavigation cannot be infinity."),n.useLayoutEffect((()=>{if(null==r)return;const e=h.current,t=e.firstElementChild,n=e.lastElementChild,s=i(t.children,r),o=c.intrinsicOf(t),l=c.intrinsicOf(s);n.style.width=`${l.width}px`,n.style.marginLeft=l.left-o.left+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, width"))}),[r]),t.jsxs(l,{ref:h,children:[t.jsx(f,{gap:u,children:s}),t.jsx(l,{transitionDuration:a,transitionTimingFunction:d,children:t.jsx(l,{width:g.width,height:null!=r?g.thickness:0,backgroundColor:g.backgroundColor,borderRadius:g.borderRadius,transitionDuration:a,transitionProperty:"height",transitionTimingFunction:d,margin:"0 auto"})})]})},e.Vertical=function({children:s,index:r,style:o,duration:a,curve:d,gap:u}){const h=n.useRef(null),f=Object.assign(Object.assign({},e.defualtStyle),o);return console.assert(r>=0,"The index of TabNavigation cannot be negative."),console.assert(r!=1/0,"The index of TabNavigation cannot be infinity."),n.useLayoutEffect((()=>{if(null==r)return;const e=h.current,t=e.lastElementChild,n=e.firstElementChild,s=i(t.children,r),o=c.intrinsicOf(t),l=c.intrinsicOf(s);n.style.height=`${l.height}px`,n.style.marginTop=l.top-o.top+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, height"))}),[r]),t.jsxs(l,{display:"flex",ref:h,children:[t.jsx(l,{display:"flex",alignItems:"center",transitionDuration:a,transitionTimingFunction:d,children:t.jsx(l,{width:null!=r?f.thickness:0,height:f.width,backgroundColor:f.backgroundColor,borderRadius:f.borderRadius,transitionDuration:a,transitionProperty:"width",transitionTimingFunction:d})}),t.jsx(g,{gap:u,children:s})]})}}(e.TabNavigation||(e.TabNavigation={})),function(e){e.h1=function(n){return n=Object.assign(Object.assign({},n),{type:"h1"}),t.jsx(e,Object.assign({},n))},e.h2=function(n){return n=Object.assign(Object.assign({},n),{type:"h2"}),t.jsx(e,Object.assign({},n))},e.h3=function(n){return n=Object.assign(Object.assign({},n),{type:"h3"}),t.jsx(e,Object.assign({},n))},e.h4=function(n){return n=Object.assign(Object.assign({},n),{type:"h4"}),t.jsx(e,Object.assign({},n))},e.h5=function(n){return n=Object.assign(Object.assign({},n),{type:"h5"}),t.jsx(e,Object.assign({},n))},e.h6=function(n){return n=Object.assign(Object.assign({},n),{type:"h6"}),t.jsx(e,Object.assign({},n))},e.a=function(n){return n=Object.assign(Object.assign({},n),{type:"a"}),t.jsx(e,Object.assign({},n))},e.p=function(n){return n=Object.assign(Object.assign({},n),{type:"p"}),t.jsx(e,Object.assign({},n))},e.span=function(n){return n=Object.assign(Object.assign({},n),{type:"span"}),t.jsx(e,Object.assign({},n))}}(w||(w={})),addEventListener("DOMContentLoaded",(()=>i.instance.initialize())),e.AnimatedSize=function({children:e,duration:s,curve:r}){const o=n.useRef(null),c=n.useRef(null),d=n.useRef(null),u=i.instance.optionValueOf("useWillChange")?"width, height":void 0,h=()=>o.current,g=()=>h().firstElementChild;return n.useLayoutEffect((()=>{const e=a.intrinsicSizeOf(g());c.current=e,d.current=e}),[]),n.useLayoutEffect((()=>{const e=h(),t=g();t.firstChild.ontransitionend=e=>{e.stopPropagation()};{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null;const n=c.current,i=a.intrinsicSizeOf(t);if(n.width==i.width&&n.height==i.height)return;d.current=i,e.style.width=`${n.width}px`,e.style.height=`${n.height}px`,a.reflow(t),e.style.width=`${i.width}px`,e.style.height=`${i.height}px`,e.ontransitionend=()=>{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null},t.style.minWidth=`${i.width}px`,t.style.minHeight=`${i.height}px`}const n=new ResizeObserver((()=>{c.current=a.intrinsicSizeOf(e)}));return n.observe(e,{box:"border-box"}),()=>n.disconnect()}),[e]),t.jsx(l,{ref:o,overflow:"hidden",willChange:u,transitionProperty:"width, height",transitionDuration:s,transitionTimingFunction:r,children:t.jsx("div",{children:e})})},e.AnimatedTransition=function({value:e,style:i,animation:s,children:r}){const o=null!=e?e:r,l=n.useRef(0),a=n.useRef([{key:o,id:l.current}]),c=a.current,[d,u]=n.useState(0);return 0!=c.length&&c[c.length-1].key!=o&&c.push({key:o,id:l.current+=1}),t.jsx("div",{style:Object.assign({position:"relative"},i),children:c.map(((e,n)=>t.jsx(h,{value:e.key,first:0==e.id,latest:n==c.length-1,children:r,animation:s,onDetach:()=>{a.current=a.current.filter((t=>t.id!==e.id)),u((e=>e+1))}},e.id)))})},e.App=r,e.ApplicationBinding=s,e.Box=l,e.CanvasController=class{constructor(){this._listeners=[]}redraw(){this.animId&&cancelAnimationFrame(this.animId),this.animId=requestAnimationFrame((()=>{this.notifyListeners(),this.animId=null}))}addListener(e){console.assert(!this._listeners.includes(e),"Already exists a given listener."),this._listeners.push(e)}removeListener(e){console.assert(this._listeners.includes(e),"Already not exists a given listener."),this._listeners=this._listeners.filter((t=>t!=e))}notifyListeners(){this._listeners.forEach((e=>e()))}},e.Column=g,e.ConditionalRender=u,e.Constraint=class{constructor(e,t,n){if(this.min=e,this.max=t,this.value=n,e>t)throw new Error("A min-constraint must be less than a max-constraint.")}},e.ConstraintBuilder=function({constraints:s,usememo:r,builder:o}){return console.assert(0!=s.length,"A constraints of ConstraintBuilder must be one or more."),t.jsx(e.SizeBuilder.Viewport,{builder:(e,t)=>{var l;const a=null===(l=s.find((t=>t.min<=e&&t.max>=e)))||void 0===l?void 0:l.value;if(null==a)throw new Error("No constraint value exists for the current window size.");return(null!=r?r:i.instance.optionValueOf("useDefaultMemo"))?n.useMemo((()=>o(a)),[a]):o(a)}})},e.Expanded=function({direction:e,children:i}){const s=n.useRef(null);return n.useLayoutEffect((()=>{const t=s.current,n=t.parentElement,i=Array.from(n.children).filter((e=>e!=t));let r=0,o=0;const l=new ResizeObserver((s=>{const c=s[0].contentBoxSize[0].inlineSize,d=s[0].contentBoxSize[0].blockSize;if("vertical"==e&&o==d)return;if("horizontal"==e&&r==c)return;r=c,o=d;const u=i.reduce(((e,t)=>{const n=a.intrinsicSizeOf(t);return{width:e.width+n.width,height:e.height+n.height}}),{width:0,height:0});l.disconnect(),"vertical"==e?t.style.height=`calc(100% - ${u.height}px)`:t.style.minWidth=`calc(100% - ${u.width}px)`,requestAnimationFrame((()=>l.observe(n)))}));return l.observe(n),()=>l.disconnect()}),[]),t.jsx("div",{ref:s,children:i})},e.Grid=function(e){const n=Object.assign(Object.assign({},e),{gridTemplateColumns:Array.from({length:e.rowCount},(()=>"1fr")).join(" "),padding:e.padding,margin:e.margin});return null!=e.gap?n.gap=e.gap:null!=e.verticalGap?n.rowGap=e.verticalGap:null!=e.horizontalGap&&(n.columnGap=e.horizontalGap),t.jsx("widget-grid",{style:n,children:e.children})},e.Ignore=function({children:e}){return t.jsx("div",{className:"ignore",children:e})},e.Layout=function({before:e,behind:i,children:s}){const r=n.useRef(null);return n.useLayoutEffect((()=>{const t=r.current,n=new ResizeObserver((()=>{if(t.removeAttribute("style"),e){const n=t.getBoundingClientRect();e(n,t)}if(i){console.assert(null!=e,"[before] and [behind] must be used together.");const n=t.getBoundingClientRect();i(n,t)}}));return n.observe(t),()=>n.disconnect()}),[]),t.jsx("div",{ref:r,children:s})},e.ReactWidgetsBinding=i,e.Row=f,e.SizedConnection=function({children:e}){const[i,s]=n.useState(new m);return t.jsx(b.Provider,{value:i,children:e})},e.SizedConnectionBinding=m,e.SizedConnectionContext=b,e.SizedMaster=function(e){const i=n.useContext(b),s=n.useRef(null);return console.assert(null!=i,"The `SizedConnection` component does not exist among the ancestor components of this `SizedMaster` component, Therefore you need to insert a `SizedConnection` component into ancestor tree of the `SizedMaster` component."),n.useLayoutEffect((()=>{const e=s.current.firstElementChild,t=new ResizeObserver((()=>{null==i||i.notifyListeners(a.intrinsicSizeOf(e))}));return t.observe(e,{box:"border-box"}),()=>t.disconnect()}),[]),t.jsx(l,Object.assign({ref:s},e))},e.SizedSlaver=function({onLayout:e,children:i}){const s=n.useContext(b),r=n.useRef(null);return n.useLayoutEffect((()=>{const t=t=>{e(t,r.current.firstElementChild)};return s.addListener(t),()=>s.removeListener(t)}),[]),t.jsx(l,{ref:r,display:"contents",children:i})},e.Text=w}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactWidgets={},e.React,e.React)}(this,(function(e,t,n){"use strict";e.ReactWidgets=void 0,(e.ReactWidgets||(e.ReactWidgets={})).REACT_WIDGETS_OPTION={};class i{constructor(){this.ids=new Map}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new i}set currentOption(t){e.ReactWidgets.REACT_WIDGETS_OPTION=t}getElementIdByTag(e){var t;const n=(null!==(t=this.ids.get(e))&&void 0!==t?t:0)+1;return e+this.ids.set(e,n).get(e)}optionValueOf(t){var n;return null!==(n=e.ReactWidgets.REACT_WIDGETS_OPTION[t])&&void 0!==n?n:i.default[t]}initialize(){const e=new CSSStyleSheet;this.optionValueOf("useStrict")&&e.insertRule("div { flex-shrink: 0; boxSizing: border-box; }"),this.initializeStyleSheet(e)}initializeStyleSheet(e){e.insertRule("widget-row { display: flex; flex-direction: row; }"),e.insertRule("widget-column { display: flex; flex-direction: column; }"),e.insertRule("widget-grid { display: grid; }"),e.insertRule("\n                scrollable-vertical {\n                    display: block;\n                    height: 100%;\n                    overflow-y: auto;\n                    overflow-x: clip;\n                }\n            "),e.insertRule("scrollable-vertical > * { height: max-content }"),e.insertRule("scrollable-vertical[scrollbar-none]::-webkit-scrollbar { display: none; }"),e.insertRule("\n                scrollable-horizontal {\n                    display: block;\n                    width: 100%;\n                    overflow-x: auto;\n                    overflow-y: clip;\n                }\n            "),e.insertRule("scrollable-horizontal > * { width: max-content; }"),e.insertRule("scrollable-horizontal[scrollbar-none]::-webkit-scrollbar { display: none; }"),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}}i.default={useStrict:!0,useDefaultMemo:!0,useWillChange:!0};class s{constructor(){this.listeners=[]}static get instance(){var e;return null!==(e=this._instance)&&void 0!==e?e:this._instance=new s}attach(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding."),this.listeners.push(e)}detach(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding."),this.listeners=this.listeners.filter((t=>t!=e))}rebuild(){console.assert(0!=this.listeners.length,"The `Application` component to detect events at top-level components is missing."),console.assert(1==this.listeners.length,"The `Application` component must exist as the only unique entity.")}}s._instance=null;const r=new Proxy(s,{get:()=>s.instance});var o;e.ApplicationEvent=void 0,(o=e.ApplicationEvent||(e.ApplicationEvent={}))[o.REBUILD=0]="REBUILD";const l=n.forwardRef(((e,n)=>{var i;const s=Object.assign({},e),r={id:e.id,className:e.className,children:e.children,ref:n,dangerouslySetInnerHTML:e.innerHTML?{__html:e.innerHTML}:void 0,onClick:e.onClick,onClickCapture:e.onClickCapture,onDoubleClick:e.onDoubleClick,onDoubleClickCapture:e.onDoubleClickCapture,onFocus:e.onFocus,onFocusCapture:e.onFocusCapture,onChange:e.onChange,onChangeCapture:e.onChangeCapture,onRateChange:e.onRateChange,onRateChangeCapture:e.onRateChangeCapture,onVolumeChange:e.onVolumeChange,onVolumeChangeCapture:e.onVolumeChangeCapture};return e.size&&(console.assert(null==e.width,"The width cannot be defined when defining the size."),console.assert(null==e.height,"The height cannot be defined when defining the size."),s.width=e.size,s.height=e.size),t.jsx(null!==(i=e.tagName)&&void 0!==i?i:"div",Object.assign(Object.assign({},r),{style:s}))}));Object.defineProperty(Element.prototype,"intrinsicSize",{get:function(){return a.intrinsicSizeOf(this)}}),Object.defineProperty(Element.prototype,"intrinsicWidth",{get:function(){return a.intrinsicSizeOf(this).width}}),Object.defineProperty(Element.prototype,"intrinsicHeight",{get:function(){return a.intrinsicSizeOf(this).height}}),Object.defineProperty(Element.prototype,"reflow",{get:function(){return a.reflow(this)}});class a{static reflow(e){e.getBoundingClientRect()}static intrinsicSizeOf(e,t){for(;e;){const n=null!=t?t:getComputedStyle(e),i=parseFloat(n.width),s=parseFloat(n.height),r=parseFloat(n.paddingLeft),o=parseFloat(n.paddingRight),l=parseFloat(n.paddingTop),a=parseFloat(n.paddingBottom),c=parseFloat(n.borderLeftWidth),d=parseFloat(n.borderRightWidth),h=parseFloat(n.borderTopWidth),u=parseFloat(n.borderBottomWidth),g=parseFloat(n.marginLeft),f=parseFloat(n.marginRight),p=parseFloat(n.marginTop),y=parseFloat(n.marginBottom),b=n.boxSizing,m=n.position;if("contents"===n.display){let t=Array.from(e.children).filter((e=>"STYLE"!==e.tagName&&"SCRIPT"!==e.tagName));if(1!==t.length)throw new Error("An element with a display property of 'contents' must have only one child to define its intrinsic size.");e=t[0];continue}let w=i,v=s;return"content-box"===b&&(w+=r+o+c+d,v+=l+a+h+u),"absolute"!==m&&"fixed"!==m&&(w+=g+f,v+=p+y),{width:w,height:v}}}}Object.defineProperty(Element.prototype,"intrinsicRect",{get:function(){return c.intrinsicOf(this)}});class c{static intrinsicOf(e,t){const n=null!=t?t:getComputedStyle(e),i=a.intrinsicSizeOf(e,n),s=e.getBoundingClientRect();return new DOMRect(s.x,s.y,i.width,i.height)}}var d;e.AnimatedFoldable=void 0,(d=e.AnimatedFoldable||(e.AnimatedFoldable={})).Horizontal=function({visible:e,overflow:s="hidden",duration:r,transition:o={opacity:!1},curve:c,children:d}){var h;const u=n.useRef(e),g=n.useRef(null),f=null!==(h=null==o?void 0:o.opacity)&&void 0!==h&&h,p=i.instance.optionValueOf("useWillChange")?f?"width, opacity":"width":void 0;return n.useLayoutEffect((()=>{const t=g.current,n=t.firstElementChild,i=a.intrinsicSizeOf(n),s=a.intrinsicSizeOf(t);if(n.ontransitionend=e=>{e.stopPropagation()},e==u.current)t.style.width=e?null:"0px",n.style.width=e?null:`${i.width}px`;else{t.style.width=null,n.style.width=null;const i=a.intrinsicSizeOf(t);f&&(t.style.opacity=e?"1":"0"),e?(t.style.width=`${s.width}px`,n.style.width=`${s.width}px`,a.reflow(t),t.style.width=`${i.width}px`,t.ontransitionend=()=>{t.style.width=null,n.style.width=null},n.style.width=`${i.width}px`):(t.style.width=`${s.width}px`,n.style.width=`${i.width}px`,a.reflow(t),t.style.width="0px",t.ontransitionend=null)}u.current=e}),[e]),t.jsx(l,{ref:g,opacity:f?e?"1":"0":void 0,overflow:s,willChange:p,transitionProperty:f?"width, opacity":"width",transitionDuration:r,transitionTimingFunction:c,children:t.jsx("div",{children:d})})},d.Vertical=function({visible:e,overflow:s="hidden",duration:r,transition:o={opacity:!1},curve:c,children:d}){var h;const u=n.useRef(e),g=n.useRef(null),f=null!==(h=null==o?void 0:o.opacity)&&void 0!==h&&h,p=i.instance.optionValueOf("useWillChange")?f?"height, opacity":"height":void 0;return n.useLayoutEffect((()=>{const t=g.current,n=t.firstElementChild,i=a.intrinsicSizeOf(n),s=a.intrinsicSizeOf(t);if(n.ontransitionend=e=>{e.stopPropagation()},e==u.current)t.style.height=e?null:"0px",n.style.height=e?null:`${i.height}px`;else{t.style.height=null,n.style.height=null;const i=a.intrinsicSizeOf(t);f&&(t.style.opacity=e?"1":"0"),e?(t.style.height=`${s.height}px`,n.style.height=`${s.height}px`,a.reflow(t),t.style.height=`${i.height}px`,t.ontransitionend=()=>{t.style.height=null,n.style.height=null},n.style.height=`${i.height}px`):(t.style.height=`${s.height}px`,n.style.height=`${i.height}px`,a.reflow(t),t.style.height="0px",t.ontransitionend=null)}u.current=e}),[e]),t.jsx(l,{ref:g,opacity:f?e?"1":"0":void 0,overflow:s,willChange:p,transitionProperty:f?"height, opacity":"height",transitionDuration:r,transitionTimingFunction:c,children:t.jsx("div",{children:d})})};const h=n.memo((e=>e.children),((e,t)=>{var n;return(null===(n=t.active)||void 0===n||n)&&e.value===t.value}));function u({value:e,first:i,latest:s,children:r,onDetach:o,animation:a}){const c=n.useRef(null),d=n.useRef({width:0,height:0});console.assert(null!=a.duration||null!=a.fadeInDuration,"A given not exists a duration of the fade-in animation. therefore, you should defines the value of the `duration` or `fadeInDuration`."),console.assert(null!=a.duration||null!=a.fadeOutDuration,"A given not exists a duration of the fade-out animation. therefore, you should defines the value of the `duration` or `fadeOutDuration`."),n.useLayoutEffect((()=>{var e,t,n;const r=c.current;if(s){const t=null!==(e=a.fadeOutDuration)&&void 0!==e?e:a.duration;if(i)return;"string"==typeof a.fadeIn?r.style.animation=`${a.fadeIn} ${t}`:(r.style.transitionProperty=[...new Set([...Object.keys(a.fadeIn.from),...Object.keys(a.fadeIn.to)])].join(", "),Object.entries(a.fadeIn.from).forEach((([e,t])=>{r.style.setProperty(e,t)})),requestAnimationFrame((()=>{r.style.transitionDuration=t,Object.entries(a.fadeIn.to).forEach((([e,t])=>{r.style.setProperty(e,t)}))})))}else{const e=null!==(t=a.fadeOutDuration)&&void 0!==t?t:a.duration,i=d.current;r.style.width=`${i.width}px`,r.style.height=`${i.height}px`,"string"==typeof a.fadeOut?(r.style.animation=`${a.fadeOut} ${e}`,r.onanimationend=o):(r.style.transitionProperty=[...new Set([...Object.keys(null!==(n=a.fadeOut.from)&&void 0!==n?n:[]),...Object.keys(a.fadeOut.to)])].join(", "),r.style.transitionDuration=e,r.ontransitionend=o,null!=a.fadeOut.from&&Object.entries(a.fadeOut.from).forEach((([e,t])=>{r.style.setProperty(e,t)})),requestAnimationFrame((()=>{r.style.transitionDuration=e,Object.entries(a.fadeOut.to).forEach((([e,t])=>{r.style.setProperty(e,t)}))})))}}),[s]),n.useLayoutEffect((()=>{const e=new ResizeObserver((e=>{d.current={width:e[0].contentRect.width,height:e[0].contentRect.height}}));return e.observe(c.current),()=>e.disconnect()}),[]);const u=s?void 0:"absolute";return t.jsx(l,{ref:c,position:u,children:t.jsx(h,{active:!s,value:e,children:r})})}function g(e){const n=e.align,i=Object.assign(Object.assign({},e),{flexDirection:e.reverse?"column-reverse":void 0,flexWrap:e.wrap?"wrap":void 0});return e.size&&(console.assert(null==e.width,"The `width` cannot be defined when defining the `size`."),console.assert(null==e.height,"The `height` cannot be defined when defining the `size`."),i.width=e.size,i.height=e.size),e.paddingAndGap&&(console.assert(null==e.padding,"The `padding` cannot be defined when defining the `paddingAndGap`."),console.assert(null==e.gap,"The `gap` cannot be defined when defining the `paddingAndGap`."),i.padding=e.paddingAndGap,i.gap=e.paddingAndGap),"bottomCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="end"):"bottomLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="end"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="end"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="start",i.alignContent="start",i.justifyContent="center"):"centerRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"topCenter"==n?(i.alignItems="center",i.alignContent="center"):"topLeft"==n?(i.alignItems="left",i.alignContent="left"):"topRight"==n?(i.alignItems="right",i.alignContent="right"):"spaceBetweenLeft"==n?i.justifyContent="space-between":"spaceBetweenCenter"==n?(i.alignContent="center",i.justifyContent="space-between"):"spaceBetweenRight"==n?(i.alignContent="end",i.justifyContent="space-between"):"spaceAroundLeft"==n?i.justifyContent="space-between":"spaceAroundCenter"==n?(i.alignContent="center",i.justifyContent="space-around"):"spaceAroundRight"==n?(i.alignContent="end",i.justifyContent="space-around"):"spaceEvenlyLeft"==n?i.justifyContent="space-evenly":"spaceEvenlyCenter"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"spaceEvenlyRight"==n&&(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"),t.jsx("widget-column",{className:e.className,style:i,children:e.children})}function f(e){const n=e.align,i=Object.assign(Object.assign({},e),{flexDirection:e.reverse?"row-reverse":void 0,flexWrap:e.wrap?"wrap":void 0});return e.size&&(console.assert(null==e.width,"The width cannot be defined when defining the size."),console.assert(null==e.height,"The height cannot be defined when defining the size."),i.width=e.size,i.height=e.size),e.paddingAndGap&&(console.assert(null==e.padding,"The padding cannot be defined when defining the paddingAndGap."),console.assert(null==e.gap,"The gap cannot be defined when defining the paddingAndGap."),i.padding=e.paddingAndGap,i.gap=e.paddingAndGap),"bottomCenter"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="center"):"bottomLeft"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="left"):"bottomRight"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="right"):"bottomSpaceBetween"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-between"):"bottomSpaceAround"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-around"):"bottomSpaceEvenly"==n?(i.alignItems="end",i.alignContent="end",i.justifyContent="space-evenly"):"center"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="center"):"centerLeft"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="left"):"centerRight"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="right"):"centerSpaceBetween"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-between"):"centerSpaceAround"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-around"):"centerSpaceEvenly"==n?(i.alignItems="center",i.alignContent="center",i.justifyContent="space-evenly"):"topCenter"==n?i.justifyContent="center":"topLeft"==n?i.justifyContent="left":"topRight"==n?i.justifyContent="right":"topSpaceBetween"==n?i.justifyContent="space-between":"topSpaceAround"==n?i.justifyContent="space-around":"topSpaceEvenly"==n&&(i.justifyContent="space-evenly"),t.jsx("widget-row",{className:e.className,style:i,children:e.children})}var p,y;e.Canvas=void 0,function(e){function i({contextType:e,width:i,height:s,onDraw:r,controller:o}){const l=n.useRef(null);return n.useLayoutEffect((()=>{const t=l.current,n=new ResizeObserver((()=>{t.style.width=i,t.style.height=s;const n=a.intrinsicSizeOf(t);t.setAttribute("width",`${n.width}px`),t.setAttribute("height",`${n.height}px`),r(t.getContext(e))}));return n.observe(t),()=>{n.disconnect()}}),[]),n.useLayoutEffect((()=>{const t=l.current;o&&(o.active=t,o.addListener((()=>r(t.getContext(e)))))}),[o]),t.jsx("canvas",{ref:l})}e.Context2D=function({width:e,height:n,onDraw:s,controller:r}){return t.jsx(i,{contextType:"2d",width:e,height:n,onDraw:s,controller:r})},e.Foundation=i}(e.Canvas||(e.Canvas={})),e.SizeBuilder=void 0,(p=e.SizeBuilder||(e.SizeBuilder={})).Viewport=function({builder:e}){const i=()=>({width:window.innerWidth,height:window.innerHeight}),[s,r]=n.useState(i());return n.useLayoutEffect((()=>{const e=()=>r(i());return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),t.jsx(t.Fragment,{children:e(s.width,s.height)})},p.Parent=function({builder:e}){};e.Scrollable=void 0,(y=e.Scrollable||(e.Scrollable={})).Vertical=function(e){var n;const i=!(null===(n=e.scrollbar)||void 0===n||n);return t.jsx("scrollable-vertical",Object.assign({children:e.children},i&&{"scrollbar-none":""}))},y.Horizontal=function(e){var n;const i=!(null===(n=e.scrollbar)||void 0===n||n);return t.jsx("scrollable-horizontal",Object.assign({children:e.children},i&&{"scrollbar-none":""}))};const b=n.createContext(null);class m{constructor(){this.listeners=[]}addListener(e){console.assert(!this.listeners.includes(e),"Already exists a given listener in this binding"),this.listeners.push(e)}removeListener(e){console.assert(this.listeners.includes(e),"Already not exists a given listener in this binding"),this.listeners=this.listeners.filter((t=>t!=e))}notifyListeners(e){console.assert(0!=this.listeners.length,"Not exists a listener to notify in this `SizedCononectionBinding` instance. Therefore, you need to add the 'SizedSlaver' component to the subtree of the 'SizedConnection' component."),this.listeners.forEach((t=>t(e)))}}function w(e){const n=Object.assign(Object.assign({},e),{display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:e.maxLine,textAlign:e.alignment,overflow:"hidden"});switch(e.type){case"h1":return t.jsx("h1",{style:n,children:e.children});case"h2":return t.jsx("h2",{style:n,children:e.children});case"h3":return t.jsx("h3",{style:n,children:e.children});case"h4":return t.jsx("h4",{style:n,children:e.children});case"h5":return t.jsx("h5",{style:n,children:e.children});case"h6":return t.jsx("h6",{style:n,children:e.children});case"a":return t.jsx("a",{style:n,children:e.children});case"p":return t.jsx("p",{style:n,children:e.children});case"span":return t.jsx("span",{style:n,children:e.children});default:return t.jsx("div",{style:n,children:e.children})}}e.TabNavigation=void 0,function(e){function i(e,t){const n=e.length;if(t>n)throw new Error(`The index of TabNavigation is overflowed. (given: ${t} > length: ${n})`);let i=0;for(let n=0;n<=t;n++)"ignore"==e[n+i].className&&i++;return e[t+i]}e.defualtStyle={backgroundColor:"black",width:"100%",thickness:"3px"},e.Horizontal=function({children:s,index:r,style:o,duration:a,curve:d,gap:h}){const u=n.useRef(null),g=Object.assign(Object.assign({},e.defualtStyle),o);return console.assert(r>=0,"The index of TabNavigation cannot be negative."),console.assert(r!=1/0,"The index of TabNavigation cannot be infinity."),n.useLayoutEffect((()=>{if(null==r)return;const e=u.current,t=e.firstElementChild,n=e.lastElementChild,s=i(t.children,r),o=c.intrinsicOf(t),l=c.intrinsicOf(s);n.style.width=`${l.width}px`,n.style.marginLeft=l.left-o.left+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, width"))}),[r]),t.jsxs(l,{ref:u,children:[t.jsx(f,{gap:h,children:s}),t.jsx(l,{transitionDuration:a,transitionTimingFunction:d,children:t.jsx(l,{width:g.width,height:null!=r?g.thickness:0,backgroundColor:g.backgroundColor,borderRadius:g.borderRadius,transitionDuration:a,transitionProperty:"height",transitionTimingFunction:d,margin:"0 auto"})})]})},e.Vertical=function({children:s,index:r,style:o,duration:a,curve:d,gap:h}){const u=n.useRef(null),f=Object.assign(Object.assign({},e.defualtStyle),o);return console.assert(r>=0,"The index of TabNavigation cannot be negative."),console.assert(r!=1/0,"The index of TabNavigation cannot be infinity."),n.useLayoutEffect((()=>{if(null==r)return;const e=u.current,t=e.lastElementChild,n=e.firstElementChild,s=i(t.children,r),o=c.intrinsicOf(t),l=c.intrinsicOf(s);n.style.height=`${l.height}px`,n.style.marginTop=l.top-o.top+"px",null==n.style.transitionProperty&&requestAnimationFrame((()=>n.style.transitionProperty="margin, height"))}),[r]),t.jsxs(l,{display:"flex",ref:u,children:[t.jsx(l,{display:"flex",alignItems:"center",transitionDuration:a,transitionTimingFunction:d,children:t.jsx(l,{width:null!=r?f.thickness:0,height:f.width,backgroundColor:f.backgroundColor,borderRadius:f.borderRadius,transitionDuration:a,transitionProperty:"width",transitionTimingFunction:d})}),t.jsx(g,{gap:h,children:s})]})}}(e.TabNavigation||(e.TabNavigation={})),function(e){e.h1=function(n){return n=Object.assign(Object.assign({},n),{type:"h1"}),t.jsx(e,Object.assign({},n))},e.h2=function(n){return n=Object.assign(Object.assign({},n),{type:"h2"}),t.jsx(e,Object.assign({},n))},e.h3=function(n){return n=Object.assign(Object.assign({},n),{type:"h3"}),t.jsx(e,Object.assign({},n))},e.h4=function(n){return n=Object.assign(Object.assign({},n),{type:"h4"}),t.jsx(e,Object.assign({},n))},e.h5=function(n){return n=Object.assign(Object.assign({},n),{type:"h5"}),t.jsx(e,Object.assign({},n))},e.h6=function(n){return n=Object.assign(Object.assign({},n),{type:"h6"}),t.jsx(e,Object.assign({},n))},e.a=function(n){return n=Object.assign(Object.assign({},n),{type:"a"}),t.jsx(e,Object.assign({},n))},e.p=function(n){return n=Object.assign(Object.assign({},n),{type:"p"}),t.jsx(e,Object.assign({},n))},e.span=function(n){return n=Object.assign(Object.assign({},n),{type:"span"}),t.jsx(e,Object.assign({},n))}}(w||(w={})),addEventListener("DOMContentLoaded",(()=>i.instance.initialize())),e.AnimatedSize=function({children:e,duration:s,curve:r}){const o=n.useRef(null),c=n.useRef(null),d=n.useRef(null),h=i.instance.optionValueOf("useWillChange")?"width, height":void 0,u=()=>o.current,g=()=>u().firstElementChild;return n.useLayoutEffect((()=>{const e=a.intrinsicSizeOf(g());c.current=e,d.current=e}),[]),n.useLayoutEffect((()=>{const e=u(),t=g();t.firstChild.ontransitionend=e=>{e.stopPropagation()};{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null;const n=c.current,i=a.intrinsicSizeOf(t);if(n.width==i.width&&n.height==i.height)return;d.current=i,e.style.width=`${n.width}px`,e.style.height=`${n.height}px`,a.reflow(t),e.style.width=`${i.width}px`,e.style.height=`${i.height}px`,e.ontransitionend=()=>{e.style.width=null,e.style.height=null,t.style.minWidth=null,t.style.minHeight=null},t.style.minWidth=`${i.width}px`,t.style.minHeight=`${i.height}px`}const n=new ResizeObserver((()=>{c.current=a.intrinsicSizeOf(e)}));return n.observe(e,{box:"border-box"}),()=>n.disconnect()}),[e]),t.jsx(l,{ref:o,overflow:"hidden",willChange:h,transitionProperty:"width, height",transitionDuration:s,transitionTimingFunction:r,children:t.jsx("div",{children:e})})},e.AnimatedTransition=function({value:e,style:i,animation:s,children:r}){const o=null!=e?e:r,l=n.useRef(0),a=n.useRef([{key:o,id:l.current}]),c=a.current,[d,h]=n.useState(0);return 0!=c.length&&c[c.length-1].key!==o&&c.push({key:o,id:l.current+=1}),t.jsx("div",{style:Object.assign({position:"relative"},i),children:c.map(((e,n)=>t.jsx(u,{value:e.key,first:0==e.id,latest:n==c.length-1,children:r,animation:s,onDetach:()=>{a.current=a.current.filter((t=>t.id!==e.id)),h((e=>e+1))}},e.id)))})},e.App=r,e.ApplicationBinding=s,e.Box=l,e.CanvasController=class{constructor(){this._listeners=[]}redraw(){this.animId&&cancelAnimationFrame(this.animId),this.animId=requestAnimationFrame((()=>{this.notifyListeners(),this.animId=null}))}addListener(e){console.assert(!this._listeners.includes(e),"Already exists a given listener."),this._listeners.push(e)}removeListener(e){console.assert(this._listeners.includes(e),"Already not exists a given listener."),this._listeners=this._listeners.filter((t=>t!=e))}notifyListeners(){this._listeners.forEach((e=>e()))}},e.Column=g,e.ConditionalRender=h,e.Constraint=class{constructor(e,t,n){if(this.min=e,this.max=t,this.value=n,e>t)throw new Error("A min-constraint must be less than a max-constraint.")}},e.ConstraintBuilder=function({constraints:s,usememo:r,builder:o}){return console.assert(0!=s.length,"A constraints of ConstraintBuilder must be one or more."),t.jsx(e.SizeBuilder.Viewport,{builder:(e,t)=>{var l;const a=null===(l=s.find((t=>t.min<=e&&t.max>=e)))||void 0===l?void 0:l.value;if(null==a)throw new Error("No constraint value exists for the current window size.");return(null!=r?r:i.instance.optionValueOf("useDefaultMemo"))?n.useMemo((()=>o(a)),[a]):o(a)}})},e.Expanded=function({direction:e,children:i}){const s=n.useRef(null);return n.useLayoutEffect((()=>{const t=s.current,n=t.parentElement,i=Array.from(n.children).filter((e=>e!=t));let r=0,o=0;const l=new ResizeObserver((s=>{const c=s[0].contentBoxSize[0].inlineSize,d=s[0].contentBoxSize[0].blockSize;if("vertical"==e&&o==d)return;if("horizontal"==e&&r==c)return;r=c,o=d;const h=i.reduce(((e,t)=>{const n=a.intrinsicSizeOf(t);return{width:e.width+n.width,height:e.height+n.height}}),{width:0,height:0});l.disconnect(),"vertical"==e?t.style.height=`calc(100% - ${h.height}px)`:t.style.minWidth=`calc(100% - ${h.width}px)`,requestAnimationFrame((()=>l.observe(n)))}));return l.observe(n),()=>l.disconnect()}),[]),t.jsx("div",{ref:s,children:i})},e.Grid=function(e){const n=Object.assign(Object.assign({},e),{gridTemplateColumns:Array.from({length:e.rowCount},(()=>"1fr")).join(" "),padding:e.padding,margin:e.margin});return null!=e.gap?n.gap=e.gap:null!=e.verticalGap?n.rowGap=e.verticalGap:null!=e.horizontalGap&&(n.columnGap=e.horizontalGap),t.jsx("widget-grid",{style:n,children:e.children})},e.Ignore=function({children:e}){return t.jsx("div",{className:"ignore",children:e})},e.Layout=function({before:e,behind:i,children:s}){const r=n.useRef(null);return n.useLayoutEffect((()=>{const t=r.current,n=new ResizeObserver((()=>{if(t.removeAttribute("style"),e){const n=t.getBoundingClientRect();e(n,t)}if(i){console.assert(null!=e,"[before] and [behind] must be used together.");const n=t.getBoundingClientRect();i(n,t)}}));return n.observe(t),()=>n.disconnect()}),[]),t.jsx("div",{ref:r,children:s})},e.ReactWidgetsBinding=i,e.Row=f,e.SizedConnection=function({children:e}){const[i,s]=n.useState(new m);return t.jsx(b.Provider,{value:i,children:e})},e.SizedConnectionBinding=m,e.SizedConnectionContext=b,e.SizedMaster=function(e){const i=n.useContext(b),s=n.useRef(null);return console.assert(null!=i,"The `SizedConnection` component does not exist among the ancestor components of this `SizedMaster` component, Therefore you need to insert a `SizedConnection` component into ancestor tree of the `SizedMaster` component."),n.useLayoutEffect((()=>{const e=s.current.firstElementChild,t=new ResizeObserver((()=>{null==i||i.notifyListeners(a.intrinsicSizeOf(e))}));return t.observe(e,{box:"border-box"}),()=>t.disconnect()}),[]),t.jsx(l,Object.assign({ref:s},e))},e.SizedSlaver=function({onLayout:e,children:i}){const s=n.useContext(b),r=n.useRef(null);return n.useLayoutEffect((()=>{const t=t=>{e(t,r.current.firstElementChild)};return s.addListener(t),()=>s.removeListener(t)}),[]),t.jsx(l,{ref:r,display:"contents",children:i})},e.Text=w}));
 //# sourceMappingURL=index.umd.js.map

dist/types/widgets/ConditionalRender.d.ts

@@ -9,3 +9,4 @@ import { ReactNode } from "react";
     value: any;
+    active?: boolean;
     children: ReactNode;
 }) => ReactNode>;

package.json

 {
   "name": "@web-package/react-widgets",
-  "version": "1.0.0-beta2",
+  "version": "1.0.0-beta3",
   "description": "This is package that provides templates that can significantly reduce CSS development works in a react development environment.",
@@ -5,0 +5,0 @@ "author": "Dev Ttangkong",

README.md

@@ -8,3 +8,3 @@ <div align="center">
             <th>Version</th>
-            <th>v1.0.0-beta2</th>
+            <th>v1.0.0-beta3</th>
           </tr>
@@ -11,0 +11,0 @@ </tbody>

No alert changes

Improved metrics

Total package byte prevSize

173527

increased by1.05%

Lines of code

2406

increased by0.8%

No dependency changes