@public-ui/sample-react 1.7.5 → 1.7.6-rc.1

package/dist/main.js.LICENSE.txt

@@ -35,7 +35,7 @@
  */
 
 /**
- * @remix-run/router v1.9.0
+ * @remix-run/router v1.11.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +46,7 @@
  */
 
 /**
- * React Router v6.16.0
+ * React Router v6.18.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.5",
+  "version": "1.7.6-rc.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,31 +8,31 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "1.7.5",
-    "@public-ui/react": "1.7.5",
-    "@public-ui/themes": "1.7.5",
-    "@types/node": "20.8.0",
-    "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.8",
-    "@unocss/preset-uno": "0.56.4",
-    "@unocss/webpack": "0.56.4",
+    "@public-ui/components": "1.7.6-rc.1",
+    "@public-ui/react": "1.7.6-rc.1",
+    "@public-ui/themes": "1.7.6-rc.1",
+    "@types/node": "20.9.0",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@unocss/preset-uno": "0.57.3",
+    "@unocss/webpack": "0.57.3",
     "ajv": "8.12.0",
-    "chromedriver": "116.0.0",
+    "chromedriver": "119.0.1",
     "cpy-cli": "5.0.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "formik": "2.4.5",
     "nightwatch-axe-verbose": "2.2.2",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.16.0",
-    "react-router-dom": "6.16.0",
+    "react-router": "6.18.0",
+    "react-router-dom": "6.18.0",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.2.2",
     "world_countries_lists": "2.8.2",
-    "yup": "1.3.1"
+    "yup": "1.3.2"
   },
   "files": [
     ".eslintignore",

package/src/components/FocusInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect, useRef } from 'react';
+import React, { FC, useRef } from 'react';
 import { RefComponent } from './types';
 
 type FokusElementProps = {
@@ -8,13 +8,14 @@ type FokusElementProps = {
 export const FocusElement: FC<FokusElementProps> = (props) => {
 	const ref = useRef(null);
 
-	useLayoutEffect(() => {
-		setTimeout(() => {
-			if (ref.current && window.self === window.top) {
-				(ref.current as unknown as HTMLElement).focus();
-			}
-		}, 500);
-	}, [ref]);
+	/* Focus effect for the moment to ensure test stability */
+	// useLayoutEffect(() => {
+	// 	setTimeout(() => {
+	// 		if (ref.current && window.self === window.top) {
+	// 			(ref.current as unknown as HTMLElement).focus();
+	// 		}
+	// 	}, 500);
+	// }, [ref]);
 
 	return <props.RefComponent ref={ref} {...props} />;
 };

package/src/components/badge/basic.tsx

@@ -8,11 +8,11 @@ const PROPS = {
 };
 
 export const BadgeBasic: FC = () => (
-	<div className="d-flex gap-2">
+	<div className="flex gap-2">
 		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
-		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
-		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
-		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
+		<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
+		<KolBadge _color="#06539e" {...PROPS}></KolBadge>
+		<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
+		<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
 	</div>
 );

package/src/components/toast/basic.tsx

@@ -5,39 +5,63 @@ import { getRoot } from '../../shares/react-roots';
 
 const toaster = ToasterService.getInstance(document);
 
-const handleButtonClickSimple = () => {
-	void toaster.enqueue({
-		description: 'Toasty',
-		label: `Initial Toast`,
-		type: 'warning',
-	});
-};
+export const ToastBasic: FC = () => {
+	const handleButtonClickSimple = () => {
+		void toaster.enqueue({
+			description: 'Toasty',
+			label: `Initial Toast`,
+			type: 'warning',
+		});
+	};
 
-const handleButtonClickComplex = () => {
-	void toaster.enqueue({
-		render: (element: HTMLElement, { close }) => {
-			getRoot(element).render(
-				<>
-					<KolButton
-						_label={'Hello World from Toast!'}
-						_on={{
-							onClick: () => {
-								console.log('Toast Button clicked!');
-								close();
-							},
-						}}
-					/>
-				</>,
-			);
-		},
-		label: `Initial Toast`,
-		type: 'warning',
-	});
-};
+	const handleButtonClickComplex = () => {
+		void toaster.enqueue({
+			render: (element: HTMLElement, { close }) => {
+				getRoot(element).render(
+					<>
+						<KolButton
+							_label={'Hello World from Toast!'}
+							_on={{
+								onClick: () => {
+									console.log('Toast Button clicked!');
+									close();
+								},
+							}}
+						/>
+					</>,
+				);
+			},
+			label: `Initial Toast`,
+			type: 'warning',
+		});
+	};
+
+	const handleButtonClickOpenAndClose = async () => {
+		const close = await toaster.enqueue({
+			description: 'I will disappear in two seconds...',
+			label: `Good Bye`,
+			type: 'warning',
+		});
 
-export const ToastBasic: FC = () => (
-	<div>
-		<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
-		<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-	</div>
-);
+		if (close) {
+			setTimeout(close, 2000);
+		}
+	};
+
+	const closeAll = () => {
+		toaster.closeAll();
+	};
+
+	return (
+		<div>
+			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
+			<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
+			<br />
+			<br />
+			<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
+			<br />
+			<br />
+			<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+		</div>
+	);
+};

package/src/shares/routes.ts

@@ -33,7 +33,6 @@ import { LOGO_ROUTES } from '../components/logo/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
-import { POPOVER_ROUTES } from '../components/popover/routes';
 import { PROGRESS_ROUTES } from '../components/progress/routes';
 import { QUOTE_ROUTES } from '../components/quote/routes';
 import { SELECT_ROUTES } from '../components/select/routes';
@@ -85,7 +84,6 @@ export const ROUTES: Routes = {
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
-	...POPOVER_ROUTES,
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
 	...SELECT_ROUTES,

package/dist/6655.js

@@ -1,2 +0,0 @@
-/*! For license information please see 6655.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6655],{6655:(t,e,i)=>{i.r(e),i.d(e,{kol_popover:()=>h});var o=i(8269),s=i(4604),n=i(9336),a=i(9430),r=i(1454),l=i(2180);const h=class{constructor(t){(0,o.r)(this,t),this.alignPopover=t=>{setTimeout((()=>{var e;if("test"!==l.p&&this.triggerElement&&this.popoverElement){const i=this.triggerElement,o=this.popoverElement,n=this.arrowElement,a=[(0,s.o)(null!==(e=null==n?void 0:n.offsetHeight)&&void 0!==e?e:10),(0,s.f)(),(0,s.s)()];n&&a.push((0,s.a)({element:n})),(0,s.c)(i,o,{placement:this.state._align,middleware:a}).then((({x:e,y:i,middlewareData:o,placement:s})=>{this.setPosition(e,i,o,s,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,i,o,s){if(this.popoverElement){const n={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&i.arrow)switch(o){case"top":this.arrowElement.style.inset=`100% auto auto ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${i.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${i.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${i.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}n.left!==this.popoverElement.style.left||n.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=(0,r.g)().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=(0,r.g)().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return(0,o.h)(o.H,{ref:this.catchHostAndTriggerElement},(0,o.h)("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},(0,o.h)("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),(0,o.h)("slot",null)))}validateAlign(t){(0,n.v)(this,t)}validateShow(t){(0,a.v)(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};h.style=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}"},9430:(t,e,i)=>{i.d(e,{v:()=>s});var o=i(8068);const s=(t,e,i)=>{(0,o.a)(t,"_show",e,i)}}}]);

package/src/components/popover/basic.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { KolButton, KolInputPassword, KolInputText, KolPopover } from '@public-ui/react';
-
-import { FC } from 'react';
-
-export const PopoverBasic: FC = () => {
-	const [top, setTop] = React.useState(false);
-	const [right, setRight] = React.useState(false);
-	const [bottom, setBottom] = React.useState(false);
-	const [left, setLeft] = React.useState(false);
-	const [login, setLogin] = React.useState(false);
-
-	return (
-		<div className="grid gap-4 max-w-[400px] mx-auto pt-8">
-			<KolButton _label="Oben" _icons="codicon codicon-arrow-up" _variant="primary" _on={{ onClick: () => setTop(!top) }}></KolButton>
-			<KolPopover _show={top}>Ich bin oberhalb</KolPopover>
-			<KolButton _label="Rechts" _icons="codicon codicon-arrow-right" _variant="danger" _on={{ onClick: () => setRight(!right) }}></KolButton>
-			<KolPopover _align="right" _show={right}>
-				Ich bin rechts
-			</KolPopover>
-			<KolButton _label="Unten" _icons="codicon codicon-arrow-down" _variant="secondary" _on={{ onClick: () => setBottom(!bottom) }}></KolButton>
-			<KolPopover _align="bottom" _show={bottom}>
-				Ich bin unterhalb
-			</KolPopover>
-			<KolButton _label="Links" _icons="codicon codicon-arrow-left" _variant="normal" _on={{ onClick: () => setLeft(!left) }}></KolButton>
-			<KolPopover _align="left" _show={left}>
-				Ich bin links
-			</KolPopover>
-			<KolButton _label="PR starten" _icons="codicon codicon-git-pull-request" _variant="normal" _on={{ onClick: () => setLogin(!login) }}></KolButton>
-			<KolPopover _show={login}>
-				<KolInputText>Benutzername</KolInputText>
-				<KolInputPassword>Passwort</KolInputPassword>
-			</KolPopover>
-		</div>
-	);
-};

package/src/components/popover/routes.ts

@@ -1,8 +0,0 @@
-import { Routes } from '../../shares/types';
-import { PopoverBasic } from './basic';
-
-export const POPOVER_ROUTES: Routes = {
-	popover: {
-		basic: PopoverBasic,
-	},
-};