5htp-core 0.5.0-6 → 0.5.0-8

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.5.0-6",
+	"version": "0.5.0-8",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/components/button.tsx

@@ -23,7 +23,6 @@ export type Props = {
     iconR?: ComponentChild,
 
     prefix?: ComponentChild,
-    children?: ComponentChild | ComponentChild[],
     suffix?: ComponentChild,
     
     tag?: "a" | "button",
@@ -31,7 +30,6 @@ export type Props = {
     shape?: 'default' | 'icon' | 'tile' | 'pill',
     size?: TComponentSize,
     class?: string,
-    title?: string,
 
     state?: [string, React.StateUpdater<string>],
     active?: boolean,
@@ -45,7 +43,14 @@ export type Props = {
     submenu?: ComponentChild,
     nav?: boolean | 'exact'
 
-} & (TButtonProps | TLinkProps)
+// SEO: if icon only, should provinde a hint (aria-label)
+} & ({ 
+    hint: string,
+    children?: ComponentChild | ComponentChild[],
+} | { 
+    children: ComponentChild | ComponentChild[],
+    hint?: string,
+}) & (TButtonProps | TLinkProps)
 
 export type TButtonProps = {
     
@@ -84,6 +89,7 @@ export default ({
     iconR, suffix,
     submenu,
     nav,
+    hint,
 
     // Style
     class: className,
@@ -125,6 +131,12 @@ export default ({
         props.onClick = () => setActive(id);
     }
 
+    // Hint
+    if (hint !== undefined) {
+        props['aria-label'] = hint;
+        props.title = hint;
+    }
+
     // Shape classes
     const classNames: string[] = ['btn'];
     if (className)

package/src/client/components/containers/Popover/index.tsx

@@ -77,15 +77,21 @@ export default (props: Props) => {
                 )
             );
 
-            // Autofocus elements
-            focusContent( refContent.current );
-
             // Close when the user clicks elsewere tha the popover
             return blurable([ refCont.current, () => show(false) ])
         }
 
     }, [shown]);
 
+    React.useEffect(() => {
+        if (position !== undefined) {
+
+            // Autofocus elements once the final position has been set
+            focusContent( refContent.current );
+
+        }
+    }, [position]);
+
     /*----------------------------------
     - ATTRIBUTES
     ----------------------------------*/

package/src/client/components/inputv3/base.tsx

@@ -41,7 +41,7 @@ export type TInputState<TValue> = {
 - HOOKS
 ----------------------------------*/
 export function useInput<TValue>(
-    { value: externalValue, onChange, className, ...otherProps }: InputBaseProps<TValue>, 
+    { value: externalValue, onChange, className, hint, ...otherProps }: InputBaseProps<TValue>, 
     defaultValue: TValue,
     autoCommit: boolean = false
 ): [

package/src/client/utils/dom.ts

@@ -71,7 +71,7 @@ export const focusContent = ( container: HTMLElement ) => {
 
     const toFocus = container.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement>(
         'input, textarea, button.btn.primary, footer > button.btn'
-    )// || container;  // Is it useful ? Creating unwanted scroll issue on showing popover
+    ) || container;  // Is it useful ? Creating unwanted scroll issue on showing popover
 
     toFocus?.focus();
 }

package/src/server/services/router/response/page/document.tsx

@@ -58,7 +58,7 @@ export default class DocumentRenderer<TRouter extends Router> {
     public async page( html: string, page: Page, response: ServerResponse<TRouter> ) {
 
         // TODO: can be customized via page / route config
-        const canonicalUrl = response.request.req.url;
+        const canonicalUrl = response.request.url;
 
         let attrsBody = {
             className: [...page.bodyClass].join(' '),