@laser-ui/components 0.0.1

package/form/model/form-group.js

@@ -0,0 +1,165 @@
+import { AbstractControl } from './abstract-control';
+import { VALID } from './vars';
+function find(control, path, delimiter) {
+    if (path == null)
+        return null;
+    if (!Array.isArray(path)) {
+        path = path.split(delimiter);
+    }
+    if (Array.isArray(path) && path.length === 0)
+        return null;
+    // Not using Array.reduce here due to a Chrome 80 bug
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
+    let controlToFind = control;
+    path.forEach((name) => {
+        if (controlToFind instanceof FormGroup) {
+            controlToFind = name in controlToFind.controls ? controlToFind.controls[name] : null;
+        }
+        else {
+            controlToFind = null;
+        }
+    });
+    return controlToFind;
+}
+export class FormGroup extends AbstractControl {
+    constructor(controls, validators, asyncValidator) {
+        super(validators !== null && validators !== void 0 ? validators : null, asyncValidator !== null && asyncValidator !== void 0 ? asyncValidator : null);
+        Object.defineProperty(this, "controls", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: controls
+        });
+        Object.defineProperty(this, "_value", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VALID
+        });
+        this._setUpControls();
+        this.updateValueAndValidity(true);
+    }
+    get(path) {
+        return find(this, path, '.');
+    }
+    getError(errorCode, path) {
+        const control = path ? this.get(path) : this;
+        return control && control.errors ? control.errors[errorCode] : null;
+    }
+    hasError(errorCode, path) {
+        return !!this.getError(errorCode, path);
+    }
+    addControl(name, control) {
+        if (!(name in this.controls)) {
+            this.controls[name] = control;
+            control.setParent(this);
+        }
+        this.updateValueAndValidity();
+    }
+    removeControl(name) {
+        delete this.controls[name];
+        this.updateValueAndValidity();
+    }
+    setControl(name, control) {
+        delete this.controls[name];
+        this.addControl(name, control);
+        this.updateValueAndValidity();
+    }
+    contains(controlName) {
+        return controlName in this.controls;
+    }
+    setValue(value, onlySelf) {
+        this._checkAllValuesPresent(value);
+        Object.keys(value).forEach((name) => {
+            this._throwIfControlMissing(name);
+            this.controls[name].setValue(value[name], true);
+        });
+        this.updateValueAndValidity(onlySelf);
+    }
+    patchValue(value, onlySelf) {
+        Object.keys(value).forEach((name) => {
+            if (this.controls[name]) {
+                this.controls[name].patchValue(value[name], true);
+            }
+        });
+        this.updateValueAndValidity(onlySelf);
+    }
+    reset(value = {}, onlySelf) {
+        this._forEachChild((control, name) => {
+            control.reset(value[name], true);
+        });
+        this._updatePristine(onlySelf);
+        this.updateValueAndValidity(onlySelf);
+    }
+    _updateValue() {
+        this._value = this._reduceValue();
+    }
+    _forEachChild(cb) {
+        Object.keys(this.controls).forEach((key) => {
+            // The list of controls can change (for ex. controls might be removed) while the loop
+            // is running (as a result of invoking Forms API in `valueChanges` subscription), so we
+            // have to null check before invoking the callback.
+            const control = this.controls[key];
+            control && cb(control, key);
+        });
+    }
+    _anyControls(condition) {
+        for (const controlName of Object.keys(this.controls)) {
+            const control = this.controls[controlName];
+            if (this.contains(controlName) && condition(control)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _allControlsDisabled() {
+        for (const controlName of Object.keys(this.controls)) {
+            if (this.controls[controlName].enabled) {
+                return false;
+            }
+        }
+        return Object.keys(this.controls).length > 0 || this.disabled;
+    }
+    _setUpControls() {
+        this._forEachChild((control) => {
+            control.setParent(this);
+        });
+    }
+    _reduceValue() {
+        return this._reduceChildren({}, (acc, control, name) => {
+            acc[name] = control.value;
+            return acc;
+        });
+    }
+    _reduceChildren(initValue, fn) {
+        let res = initValue;
+        this._forEachChild((control, name) => {
+            res = fn(res, control, name);
+        });
+        return res;
+    }
+    _checkAllValuesPresent(value) {
+        this._forEachChild((control, name) => {
+            if (value[name] === undefined) {
+                throw new Error(`Must supply a value for form control with name: '${name}'.`);
+            }
+        });
+    }
+    _throwIfControlMissing(name) {
+        if (!Object.keys(this.controls).length) {
+            throw new Error(`
+          There are no form controls registered with this group yet. If you're using ngModel,
+          you may want to check next tick (e.g. use setTimeout).
+        `);
+        }
+        if (!this.controls[name]) {
+            throw new Error(`Cannot find form control with name: ${name}.`);
+        }
+    }
+}

package/form/model/types.d.ts

@@ -0,0 +1,8 @@
+import type { AbstractControl } from './abstract-control';
+export {};
+export type FormControlStatus = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
+export interface ValidationErrors {
+    [key: string]: any;
+}
+export type ValidatorFn = (control: AbstractControl) => ValidationErrors | null;
+export type AsyncValidatorFn = (control: AbstractControl) => Promise<ValidationErrors | null>;

package/form/model/types.js

@@ -0,0 +1 @@
+export {};

package/form/model/validators.d.ts

@@ -0,0 +1,11 @@
+import type { AbstractControl } from './abstract-control';
+import type { ValidationErrors, ValidatorFn } from './types';
+export declare class Validators {
+    static min(min: number): ValidatorFn;
+    static max(max: number): ValidatorFn;
+    static required(control: AbstractControl): ValidationErrors | null;
+    static email(control: AbstractControl): ValidationErrors | null;
+    static minLength(minLength: number): ValidatorFn;
+    static maxLength(maxLength: number): ValidatorFn;
+    static pattern(pattern: string | RegExp): ValidatorFn;
+}

package/form/model/validators.js

@@ -0,0 +1,83 @@
+import { isArray, isNull, isNumber, isString } from 'lodash';
+export class Validators {
+    static min(min) {
+        return (control) => {
+            if (isString(control.value) || isNumber(control.value)) {
+                const value = Number(control.value);
+                if (Number.isNaN(value)) {
+                    return null;
+                }
+                else {
+                    return value < min ? { min: { min, actual: control.value } } : null;
+                }
+            }
+            return null;
+        };
+    }
+    static max(max) {
+        return (control) => {
+            if (isString(control.value) || isNumber(control.value)) {
+                const value = Number(control.value);
+                if (Number.isNaN(value)) {
+                    return null;
+                }
+                else {
+                    return value > max ? { max: { max, actual: control.value } } : null;
+                }
+            }
+            return null;
+        };
+    }
+    static required(control) {
+        const isEmpty = isArray(control.value) || isString(control.value) ? control.value.length === 0 : isNull(control.value) ? true : false;
+        return isEmpty ? { required: true } : null;
+    }
+    static email(control) {
+        if (isString(control.value) &&
+            !/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(control.value)) {
+            return { email: true };
+        }
+        return null;
+    }
+    static minLength(minLength) {
+        return (control) => {
+            if ((isArray(control.value) || isString(control.value)) && control.value.length < minLength) {
+                return { minLength: { minLength, actual: control.value.length } };
+            }
+            return null;
+        };
+    }
+    static maxLength(maxLength) {
+        return (control) => {
+            if ((isArray(control.value) || isString(control.value)) && control.value.length > maxLength) {
+                return { maxLength: { maxLength, actual: control.value.length } };
+            }
+            return null;
+        };
+    }
+    static pattern(pattern) {
+        if (!pattern)
+            return () => null;
+        let regex;
+        let regexStr;
+        if (isString(pattern)) {
+            regexStr = '';
+            if (pattern.charAt(0) !== '^')
+                regexStr += '^';
+            regexStr += pattern;
+            if (pattern.charAt(pattern.length - 1) !== '$')
+                regexStr += '$';
+            regex = new RegExp(regexStr);
+        }
+        else {
+            regexStr = pattern.toString();
+            regex = pattern;
+        }
+        return (control) => {
+            if ((isString(control.value) || isNumber(control.value)) && !regex.test(control.value.toString())) {
+                return { pattern: { pattern: regexStr, actual: control.value } };
+            }
+            return null;
+        };
+    }
+}

package/form/model/vars.d.ts

@@ -0,0 +1 @@
+export declare const VALID: "VALID", INVALID: "INVALID", PENDING: "PENDING", DISABLED: "DISABLED";

package/form/model/vars.js

@@ -0,0 +1 @@
+export const [VALID, INVALID, PENDING, DISABLED] = ['VALID', 'INVALID', 'PENDING', 'DISABLED'];

package/form/types.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import type { AbstractControl } from './model/abstract-control';
+import type { CLASSES } from './vars';
+import type { BaseProps, Size } from '../types';
+export {};
+export type FormErrors = string | {
+    message: string;
+    invalid: 'warning' | 'error';
+} | {
+    [index: string]: string | {
+        message: string;
+        invalid: 'warning' | 'error';
+    };
+};
+export interface FormControlProvider {
+    control: AbstractControl;
+    invalid: 'warning' | 'error' | false;
+    inputAria: {
+        'aria-invalid'?: boolean;
+        'aria-describedby'?: string;
+    };
+}
+export interface FormContextData {
+    vertical: boolean;
+    labelWidth: number | string | undefined;
+    labelColon: boolean;
+    requiredType: 'required' | 'optional' | 'hidden';
+    feedbackIcon: boolean | {
+        success?: React.ReactNode;
+        warning?: React.ReactNode;
+        error?: React.ReactNode;
+        pending?: React.ReactNode;
+    };
+}
+export interface FormProps extends BaseProps<'form', typeof CLASSES>, React.FormHTMLAttributes<HTMLFormElement> {
+    vertical?: boolean;
+    labelWidth?: number | string;
+    labelColon?: boolean;
+    requiredType?: 'required' | 'optional' | 'hidden';
+    feedbackIcon?: boolean | {
+        success?: React.ReactNode;
+        warning?: React.ReactNode;
+        error?: React.ReactNode;
+        pending?: React.ReactNode;
+    };
+    size?: Size;
+}
+export interface FormItemProps<T extends {
+    [index: string]: FormErrors;
+}> extends BaseProps<'form', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: React.ReactNode | ((formControls: {
+        [N in keyof T]: FormControlProvider;
+    }) => React.ReactNode);
+    formControls?: T;
+    label?: React.ReactNode;
+    labelWidth?: number | string;
+    labelExtra?: {
+        title: string;
+        icon?: React.ReactElement;
+    } | string;
+    labelFor?: string;
+    required?: boolean;
+}

package/form/types.js

@@ -0,0 +1 @@
+export {};

package/form/vars.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { FormGroup } from './model/form-group';
+import type { FormContextData } from './types';
+export declare const CLASSES: {
+    form: string;
+    'form--small': string;
+    'form--medium': string;
+    'form--large': string;
+    form__row: string;
+    form__item: string;
+    'form__item-container': string;
+    'form__item-label-wrapper': string;
+    'form__item-label': string;
+    'form__item-label--auto': string;
+    'form__item-label--required': string;
+    'form__item-label--colon': string;
+    'form__item-label-extra': string;
+    'form__item-content': string;
+    'form__item-control': string;
+    'form__item-feedback-icon': string;
+    'form__error-container': string;
+    form__error: string;
+    'form__error--error': string;
+    'form__error--warning': string;
+};
+export declare const FormContext: import("react").Context<FormContextData>;
+export declare const FormGroupContext: import("react").Context<FormGroup<any>>;

package/form/vars.js

@@ -0,0 +1,25 @@
+import { createContext } from 'react';
+export const CLASSES = {
+    form: '^form',
+    'form--small': '^form--small',
+    'form--medium': '^form--medium',
+    'form--large': '^form--large',
+    form__row: '^form__row',
+    form__item: '^form__item',
+    'form__item-container': '^form__item-container',
+    'form__item-label-wrapper': '^form__item-label-wrapper',
+    'form__item-label': '^form__item-label',
+    'form__item-label--auto': '^form__item-label--auto',
+    'form__item-label--required': '^form__item-label--required',
+    'form__item-label--colon': '^form__item-label--colon',
+    'form__item-label-extra': '^form__item-label-extra',
+    'form__item-content': '^form__item-content',
+    'form__item-control': '^form__item-control',
+    'form__item-feedback-icon': '^form__item-feedback-icon',
+    'form__error-container': '^form__error-container',
+    form__error: '^form__error',
+    'form__error--error': '^form__error--error',
+    'form__error--warning': '^form__error--warning',
+};
+export const FormContext = createContext(undefined);
+export const FormGroupContext = createContext(undefined);

package/hooks/index.d.ts

@@ -0,0 +1,14 @@
+export { useComponentProps } from './useComponentProps';
+export { useControlled } from './useControlled';
+export { useDesign } from './useDesign';
+export { useFocusVisible } from './useFocusVisible';
+export { useLayout } from './useLayout';
+export { useListenGlobalScrolling } from './useListenGlobalScrolling';
+export { useLockScroll } from './useLockScroll';
+export { useMaxIndex } from './useMaxIndex';
+export { useNamespace } from './useNamespace';
+export { useNestedPopup } from './useNestedPopup';
+export { useNextTick } from './useNextTick';
+export { useScopedProps } from './useScopedProps';
+export { useStyled } from './useStyled';
+export { useTranslation } from './useTranslation';

package/hooks/index.js

@@ -0,0 +1,14 @@
+export { useComponentProps } from './useComponentProps';
+export { useControlled } from './useControlled';
+export { useDesign } from './useDesign';
+export { useFocusVisible } from './useFocusVisible';
+export { useLayout } from './useLayout';
+export { useListenGlobalScrolling } from './useListenGlobalScrolling';
+export { useLockScroll } from './useLockScroll';
+export { useMaxIndex } from './useMaxIndex';
+export { useNamespace } from './useNamespace';
+export { useNestedPopup } from './useNestedPopup';
+export { useNextTick } from './useNextTick';
+export { useScopedProps } from './useScopedProps';
+export { useStyled } from './useStyled';
+export { useTranslation } from './useTranslation';

package/hooks/useComponentProps.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from '../context/props';
+export declare function useComponentProps<T extends object>(component: keyof ComponentProps, props: T): T;

package/hooks/useComponentProps.js

@@ -0,0 +1,15 @@
+import { isUndefined } from 'lodash';
+import { useContext } from 'react';
+import { LContext } from '../context';
+export function useComponentProps(component, props) {
+    var _a;
+    const context = useContext(LContext);
+    const defaultProps = (_a = context.componentDefaultProps[component]) !== null && _a !== void 0 ? _a : {};
+    const definedProps = {};
+    Object.keys(props).forEach((key) => {
+        if (!isUndefined(props[key])) {
+            definedProps[key] = props[key];
+        }
+    });
+    return Object.assign(defaultProps, definedProps);
+}

package/hooks/useControlled.d.ts

@@ -0,0 +1,3 @@
+import type { AbstractControl } from '../form';
+import type { DraftFunction } from '@laser-ui/hooks/useImmer';
+export declare function useControlled<T, S = T>(initialValue: T | (() => T), value?: T, onChange?: (value: S) => void, deepCompare?: (previous: T, current: S) => boolean, formControl?: AbstractControl): [T, (value: S | DraftFunction<S>) => S];

package/hooks/useControlled.js

@@ -0,0 +1,26 @@
+import { freeze, produce } from 'immer';
+import { isFunction, isUndefined } from 'lodash';
+import { useRef, useState } from 'react';
+export function useControlled(initialValue, value, onChange, deepCompare, formControl) {
+    const [_value, setValue] = useState(initialValue);
+    const valueRef = useRef(_value);
+    valueRef.current = formControl ? formControl.value : !isUndefined(value) ? value : _value;
+    return [
+        valueRef.current,
+        (value) => {
+            var _a, _b;
+            const newValue = isFunction(value) ? produce(valueRef.current, value) : freeze(value);
+            const reRender = deepCompare ? !deepCompare(valueRef.current, newValue) : !Object.is(valueRef.current, newValue);
+            if (reRender) {
+                setValue(newValue);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                if (formControl) {
+                    formControl.markAsDirty(true);
+                    formControl.setValue(newValue);
+                    (_b = (_a = formControl.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
+            }
+            return newValue;
+        },
+    ];
+}

package/hooks/useDesign.d.ts

@@ -0,0 +1,12 @@
+import type { FormControlProvider } from '../form/types';
+export declare function useDesign(opts: {
+    compose?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+    form?: FormControlProvider;
+}): {
+    'data-l-compose-active': boolean | undefined;
+    'data-l-compose-disabled': boolean | undefined;
+    'data-l-form-invalid': false | "error" | "warning" | undefined;
+};

package/hooks/useDesign.js

@@ -0,0 +1,8 @@
+export function useDesign(opts) {
+    var _a, _b, _c;
+    return {
+        'data-l-compose-active': (_a = opts.compose) === null || _a === void 0 ? void 0 : _a.active,
+        'data-l-compose-disabled': (_b = opts.compose) === null || _b === void 0 ? void 0 : _b.disabled,
+        'data-l-form-invalid': (_c = opts.form) === null || _c === void 0 ? void 0 : _c.invalid,
+    };
+}

package/hooks/useFocusVisible.d.ts

@@ -0,0 +1,2 @@
+import type { CloneHTMLElement } from '../types';
+export declare function useFocusVisible(isValidCode: (code: string) => boolean): [boolean, CloneHTMLElement];

package/hooks/useFocusVisible.js

@@ -0,0 +1,38 @@
+import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
+import { cloneElement, useRef, useState } from 'react';
+export function useFocusVisible(isValidCode) {
+    const windowRef = useRefExtra(() => window);
+    const async = useAsync();
+    const hadKeyboardEvent = useRef(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    useEvent(windowRef, 'keydown', () => {
+        hadKeyboardEvent.current = true;
+        async.requestAnimationFrame(() => {
+            hadKeyboardEvent.current = false;
+        });
+    });
+    return [
+        focusVisible,
+        (el) => cloneElement(el, {
+            onFocus: (e) => {
+                var _a, _b;
+                (_b = (_a = el.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                if (hadKeyboardEvent.current) {
+                    setFocusVisible(true);
+                }
+            },
+            onBlur: (e) => {
+                var _a, _b;
+                (_b = (_a = el.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                setFocusVisible(false);
+            },
+            onKeyDown: (e) => {
+                var _a, _b;
+                (_b = (_a = el.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                if (isValidCode(e.code)) {
+                    setFocusVisible(true);
+                }
+            },
+        }),
+    ];
+}

package/hooks/useLayout.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useLayout(): {
+    pageScrollRef: import("react").RefObject<HTMLElement>;
+    contentResizeRef: import("react").RefObject<HTMLElement>;
+};

package/hooks/useLayout.js

@@ -0,0 +1,10 @@
+import { useRefExtra } from '@laser-ui/hooks';
+import { useContext } from 'react';
+import { LContext } from '../context';
+export function useLayout() {
+    var _a, _b;
+    const context = useContext(LContext);
+    const pageScrollRef = useRefExtra((_a = context.layoutPageScrollEl) !== null && _a !== void 0 ? _a : (() => null));
+    const contentResizeRef = useRefExtra((_b = context.layoutContentResizeEl) !== null && _b !== void 0 ? _b : (() => null));
+    return { pageScrollRef, contentResizeRef };
+}

package/hooks/useListenGlobalScrolling.d.ts

@@ -0,0 +1 @@
+export declare function useListenGlobalScrolling(callback?: () => void, disabled?: boolean): boolean;

package/hooks/useListenGlobalScrolling.js

@@ -0,0 +1,9 @@
+import { useEvent, useRefExtra } from '@laser-ui/hooks';
+import { useContext } from 'react';
+import { LContext } from '../context';
+export function useListenGlobalScrolling(callback, disabled = false) {
+    const context = useContext(LContext);
+    const windowRef = useRefExtra(() => window);
+    useEvent(windowRef, 'scroll', callback, { passive: true, capture: true }, !context.listenGlobalScrolling || disabled);
+    return context.listenGlobalScrolling;
+}

package/hooks/useLockScroll.d.ts

@@ -0,0 +1 @@
+export declare function useLockScroll(lock: boolean): void;

package/hooks/useLockScroll.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { ROOT_DATA } from '../root/vars';
+export function useLockScroll(lock) {
+    useEffect(() => {
+        if (lock) {
+            const cssText = document.documentElement.style.cssText;
+            const scrollTop = document.documentElement.scrollTop;
+            const scrollLeft = document.documentElement.scrollLeft;
+            let addCssText = 'position:fixed;width:100%;height:100%;';
+            if (document.documentElement.scrollHeight > ROOT_DATA.windowSize.height) {
+                addCssText += `top:-${scrollTop}px;overflow-y:scroll;`;
+            }
+            if (document.documentElement.scrollWidth > ROOT_DATA.windowSize.width) {
+                addCssText += `left:-${scrollLeft}px;overflow-x:scroll;`;
+            }
+            document.documentElement.style.cssText += addCssText;
+            return () => {
+                document.documentElement.style.cssText = cssText;
+                document.documentElement.scrollTop = scrollTop;
+                document.documentElement.scrollLeft = scrollLeft;
+            };
+        }
+    }, [lock]);
+}

package/hooks/useMaxIndex.d.ts

@@ -0,0 +1 @@
+export declare function useMaxIndex(visible: boolean): number;

package/hooks/useMaxIndex.js

@@ -0,0 +1,32 @@
+import { useUnmount } from '@laser-ui/hooks';
+import { useId, useMemo, useRef } from 'react';
+const MAX_INDEX_MANAGER = {
+    record: [],
+    add(id) {
+        let n = 1;
+        if (this.record.length > 0) {
+            n = this.record[this.record.length - 1].n + 1;
+        }
+        this.record.push({ id, n });
+        return n;
+    },
+    delete(id) {
+        this.record = this.record.filter((item) => item.id !== id);
+    },
+};
+export function useMaxIndex(visible) {
+    const id = useId();
+    const prevMaxZIndex = useRef(0);
+    const maxZIndex = useMemo(() => {
+        if (visible) {
+            return MAX_INDEX_MANAGER.add(id);
+        }
+        MAX_INDEX_MANAGER.delete(id);
+        return prevMaxZIndex.current;
+    }, [id, visible]);
+    prevMaxZIndex.current = maxZIndex;
+    useUnmount(() => {
+        MAX_INDEX_MANAGER.delete(id);
+    });
+    return maxZIndex;
+}

package/hooks/useNamespace.d.ts

@@ -0,0 +1 @@
+export declare function useNamespace(): string;

package/hooks/useNamespace.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { LContext } from '../context';
+export function useNamespace() {
+    const context = useContext(LContext);
+    return context.namespace;
+}