@laser-ui/components 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/laser-ui/laser-ui/compare/v1.1.1...v1.2.0) (2024-09-12)
+
+### Features
+
+- **components:** form support `labelWrap` ([ffeb41a](https://github.com/laser-ui/laser-ui/commit/ffeb41afb4531e33b53343f245190dfa34872188))
+
+### Performance Improvements
+
+- **components:** optimize `Validators.required` ([39f452c](https://github.com/laser-ui/laser-ui/commit/39f452ce964b28fe3271c0016290a8a7667cdcf0))
+
+## [1.1.1](https://github.com/laser-ui/laser-ui/compare/v1.1.0...v1.1.1) (2024-08-30)
+
+### Bug Fixes
+
+- fix automatically update when nested ([d1c0b46](https://github.com/laser-ui/laser-ui/commit/d1c0b4645965e31b382058b60b2569b253c162e5))
+
 # [1.1.0](https://github.com/laser-ui/laser-ui/compare/v1.0.2...v1.1.0) (2024-08-30)
 
 ### Features

package/dropdown/Dropdown.js

@@ -9,7 +9,7 @@ import { DropdownItem as DropdownItemFC } from './internal/DropdownItem';
 import { DropdownSub } from './internal/DropdownSub';
 import { checkEnableItem, getSameLevelEnableItems } from './utils';
 import { CLASSES } from './vars';
-import { useComponentProps, useControlled, useFocusVisible, useJSS, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useJSS, useMaxIndex, useNamespace, useNestedPopup, useStyled, useTranslation, } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -254,14 +254,14 @@ function DropdownFC(props, ref) {
         });
         return getNodes(list, 0, []);
     })();
-    useImperativeHandle(ref, () => ({
-        updatePosition: () => {
-            updatePosition();
-            for (const fn of dataRef.current.updatePosition.values()) {
-                fn();
-            }
-        },
-    }), [updatePosition]);
+    const updateAllPosition = useEventCallback(() => {
+        updatePosition();
+        for (const fn of dataRef.current.updatePosition.values()) {
+            fn();
+        }
+    });
+    useContainerScrolling(triggerRef, updateAllPosition, !visible);
+    useImperativeHandle(ref, () => ({ updatePosition: updateAllPosition }), [updateAllPosition]);
     return (_jsx(Popup, { visible: visible, trigger: trigger, updatePosition: {
             fn: updatePosition,
             triggerRef,

package/dropdown/internal/DropdownSub.js

@@ -20,7 +20,7 @@ export const DropdownSub = forwardRef((props, ref) => {
     const visible = !isUndefined(popupState);
     const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
-        if (visible && popupRef.current && triggerRef.current) {
+        if (!disabled && visible && popupRef.current && triggerRef.current) {
             const [width, height] = [popupRef.current.offsetWidth, popupRef.current.offsetHeight];
             const position = getHorizontalSidePosition(triggerRef.current, { width, height }, {
                 placement: 'right',
@@ -42,6 +42,7 @@ export const DropdownSub = forwardRef((props, ref) => {
             fn: updatePosition,
             triggerRef,
             popupRef,
+            scroll: false,
         }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
                     'dropdown__item.is-expand': visible,
                     'dropdown__item.is-disabled': disabled,

package/form/Form.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isUndefined } from 'lodash';
 import { useEffect, useRef } from 'react';
 import { FormItem } from './FormItem';
 import { CLASSES, FormContext } from './vars';
@@ -7,7 +8,7 @@ import { ConfigProvider } from '../config-provider';
 import { useComponentProps, useScopedProps, useStyled } from '../hooks';
 import { mergeCS } from '../utils';
 export const Form = (props) => {
-    const _a = useComponentProps('Form', props), { children, styleOverrides, styleProvider, vertical = false, labelWidth, labelColon, requiredType = 'required', feedbackIcon = false, size: sizeProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "vertical", "labelWidth", "labelColon", "requiredType", "feedbackIcon", "size"]);
+    const _a = useComponentProps('Form', props), { children, styleOverrides, styleProvider, vertical = false, labelWidth, labelWrap = false, labelColon, requiredType = 'required', feedbackIcon = false, size: sizeProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "vertical", "labelWidth", "labelWrap", "labelColon", "requiredType", "feedbackIcon", "size"]);
     const styled = useStyled(CLASSES, { form: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.form }, styleOverrides);
     const formRef = useRef(null);
     const { size } = useScopedProps({ size: sizeProp });
@@ -35,6 +36,7 @@ export const Form = (props) => {
         }, children: _jsx(ConfigProvider, { context: { componentSize: size }, children: _jsx(FormContext.Provider, { value: {
                     vertical,
                     labelWidth: labelWidth !== null && labelWidth !== void 0 ? labelWidth : (vertical ? undefined : 'auto'),
+                    labelWrap: isUndefined(labelWidth) ? false : labelWrap,
                     labelColon: labelColon !== null && labelColon !== void 0 ? labelColon : !vertical,
                     requiredType,
                     feedbackIcon,

package/form/FormItem.js

@@ -4,7 +4,7 @@ import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
 import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
 import ErrorFilled from '@material-design-icons/svg/filled/error.svg?react';
 import HelpOutlineOutlined from '@material-design-icons/svg/outlined/help_outline.svg?react';
-import { isBoolean, isFunction, isNull, isNumber, isString } from 'lodash';
+import { isBoolean, isFunction, isNull, isNumber, isString, isUndefined } from 'lodash';
 import { useContext, useId, useRef } from 'react';
 import { FormError } from './internal/FormError';
 import { Validators } from './model/validators';
@@ -22,7 +22,7 @@ const ValidateState = {
     Pending: 4,
 };
 export function FormItem(props) {
-    const _a = useComponentProps('FormItem', props), { children, styleOverrides, styleProvider, formControls, label, labelWidth: labelWidthProp, labelExtra: labelExtraProp, labelFor, required: requiredProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControls", "label", "labelWidth", "labelExtra", "labelFor", "required"]);
+    const _a = useComponentProps('FormItem', props), { children, styleOverrides, styleProvider, formControls, label, labelWidth: labelWidthProp, labelWrap: labelWrapProp, labelExtra: labelExtraProp, labelFor, required: requiredProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControls", "label", "labelWidth", "labelWrap", "labelExtra", "labelFor", "required"]);
     const styled = useStyled(CLASSES, { form: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.form }, styleOverrides);
     const { t } = useTranslation();
     const formContext = useContext(FormContext);
@@ -31,6 +31,7 @@ export function FormItem(props) {
     const uniqueId = useId();
     const getErrorId = (controlName) => `${controlName}-error-${uniqueId}`;
     const labelWidth = labelWidthProp !== null && labelWidthProp !== void 0 ? labelWidthProp : formContext.labelWidth;
+    const labelWrap = isUndefined(labelWidth) ? false : (labelWrapProp !== null && labelWrapProp !== void 0 ? labelWrapProp : formContext.labelWrap);
     const formControlProviders = (() => {
         const obj = {};
         Object.keys(formControls !== null && formControls !== void 0 ? formControls : {}).forEach((controlName) => {
@@ -149,9 +150,9 @@ export function FormItem(props) {
         className: restProps.className,
         style: restProps.style,
     }), { ref: divRef, children: _jsxs("div", Object.assign({}, styled('form__item-container'), { children: [labelWidth !== 0 && (_jsx("div", Object.assign({}, mergeCS(styled('form__item-label-wrapper'), {
-                    style: { width: formContext.vertical ? '100%' : labelWidth === 'auto' ? 'var(--label-width)' : labelWidth },
+                    style: { width: formContext.vertical ? undefined : labelWidth === 'auto' ? 'var(--label-width)' : labelWidth },
                 }), { children: label && (_jsxs("label", Object.assign({}, styled('form__item-label', {
-                        'form__item-label--auto': !formContext.vertical && labelWidth === 'auto',
+                        'form__item-label--wrap': labelWrap,
                         'form__item-label--required': formContext.requiredType === 'required' && required,
                         'form__item-label--colon': formContext.labelColon,
                     }), { htmlFor: labelFor, "data-l-form-label": true, children: [label, (labelExtra || (formContext.requiredType === 'optional' && !required)) && (_jsxs("div", Object.assign({}, styled('form__item-label-extra'), { children: [formContext.requiredType === 'optional' && !required && _jsx("span", { children: t('Form', 'Optional') }), labelExtra] })))] }))) }))), _jsxs("div", Object.assign({}, mergeCS(styled('form__item-content'), {

package/form/model/validators.js

@@ -1,4 +1,4 @@
-import { isArray, isNull, isNumber, isString } from 'lodash';
+import { isArray, isNumber, isString } from 'lodash';
 export class Validators {
     static min(min) {
         return (control) => {
@@ -29,7 +29,7 @@ export class Validators {
         };
     }
     static required(control) {
-        const isEmpty = isArray(control.value) || isString(control.value) ? control.value.length === 0 : isNull(control.value) ? true : false;
+        const isEmpty = control.value == null || ((isArray(control.value) || isString(control.value)) && control.value.length === 0);
         return isEmpty ? { required: true } : null;
     }
     static email(control) {

package/form/types.d.ts

@@ -23,6 +23,7 @@ export interface FormControlProvider {
 export interface FormContextData {
     vertical: boolean;
     labelWidth: number | string | undefined;
+    labelWrap: boolean;
     labelColon: boolean;
     requiredType: 'required' | 'optional' | 'hidden';
     feedbackIcon: boolean | {
@@ -35,6 +36,7 @@ export interface FormContextData {
 export interface FormProps extends BaseProps<'form', typeof CLASSES>, React.FormHTMLAttributes<HTMLFormElement> {
     vertical?: boolean;
     labelWidth?: number | string;
+    labelWrap?: boolean;
     labelColon?: boolean;
     requiredType?: 'required' | 'optional' | 'hidden';
     feedbackIcon?: boolean | {
@@ -54,6 +56,7 @@ export interface FormItemProps<T extends {
     formControls?: T;
     label?: React.ReactNode;
     labelWidth?: number | string;
+    labelWrap?: boolean;
     labelExtra?: {
         title: string;
         icon?: React.ReactElement;

package/form/vars.d.ts

@@ -11,7 +11,7 @@ export declare const CLASSES: {
     'form__item-container': string;
     'form__item-label-wrapper': string;
     'form__item-label': string;
-    'form__item-label--auto': string;
+    'form__item-label--wrap': string;
     'form__item-label--required': string;
     'form__item-label--colon': string;
     'form__item-label-extra': string;

package/form/vars.js

@@ -9,7 +9,7 @@ export const CLASSES = {
     '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--wrap': '^form__item-label--wrap',
     'form__item-label--required': '^form__item-label--required',
     'form__item-label--colon': '^form__item-label--colon',
     'form__item-label-extra': '^form__item-label-extra',

package/internal/popup/Popup.js

@@ -42,7 +42,7 @@ export function Popup(props) {
             changeVisible();
         }
     };
-    useContainerScrolling(updatePosition.triggerRef, updatePosition.fn, disabled || !visibleProp);
+    useContainerScrolling(updatePosition.triggerRef, updatePosition.fn, disabled || updatePosition.scroll === false || !visibleProp);
     useResize(updatePosition.triggerRef, updatePosition.fn, undefined, disabled || !visibleProp);
     useResize(updatePosition.popupRef, updatePosition.fn, undefined, disabled || !visibleProp);
     useResize(contentResizeRef, updatePosition.fn, undefined, disabled || !visibleProp);

package/internal/popup/types.d.ts

@@ -15,6 +15,7 @@ export interface PopupProps {
         fn: () => void;
         triggerRef: React.RefObject<HTMLElement>;
         popupRef: React.RefObject<HTMLElement>;
+        scroll?: boolean;
     };
     onVisibleChange: (visible: boolean) => void;
 }

package/menu/Menu.js

@@ -2,13 +2,13 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { findNested } from '@laser-ui/utils';
 import { isNull, isUndefined, nth } from 'lodash';
-import { Fragment, forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import { Fragment, forwardRef, useCallback, useId, useImperativeHandle, useRef, useState } from 'react';
 import { MenuGroup } from './internal/MenuGroup';
 import { MenuItem as MenuItemFC } from './internal/MenuItem';
 import { MenuSub } from './internal/MenuSub';
 import { checkEnableItem, getSameLevelEnableItems } from './utils';
 import { CLASSES } from './vars';
-import { useComponentProps, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled } from '../hooks';
+import { useComponentProps, useContainerScrolling, useControlled, useFocusVisible, useNamespace, useNestedPopup, useStyled, } from '../hooks';
 import { CollapseTransition } from '../internal/transition';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
@@ -18,6 +18,7 @@ function MenuFC(props, ref) {
     const styled = useStyled(CLASSES, { menu: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.menu, 'menu-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['menu-popup'] }, styleOverrides);
     const uniqueId = useId();
     const getItemId = (id) => `${namespace}-menu-item-${id}-${uniqueId}`;
+    const menuRef = useRef(null);
     const dataRef = useRef({
         mousedown: false,
         updatePosition: new Map(),
@@ -324,13 +325,13 @@ function MenuFC(props, ref) {
         };
         return getNodes(list, 0, [], true);
     })();
-    useImperativeHandle(ref, () => ({
-        updatePosition: () => {
-            for (const fn of dataRef.current.updatePosition.values()) {
-                fn();
-            }
-        },
-    }), []);
+    const updatePosition = useCallback(() => {
+        for (const fn of dataRef.current.updatePosition.values()) {
+            fn();
+        }
+    }, []);
+    useContainerScrolling(menuRef, updatePosition);
+    useImperativeHandle(ref, () => ({ updatePosition }), [updatePosition]);
     return (_jsx(CollapseTransition, { originalSize: {
             width,
         }, collapsedSize: {
@@ -342,7 +343,7 @@ function MenuFC(props, ref) {
             leaving: {
                 transition: ['width', 'padding', 'margin'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
             },
-        }, children: (menuRef, collapseStyle) => {
+        }, children: (collapseRef, collapseStyle) => {
             var _a;
             const preventBlur = (e) => {
                 if (document.activeElement === e.currentTarget && e.button === 0) {
@@ -354,7 +355,10 @@ function MenuFC(props, ref) {
             _jsx("nav", Object.assign({}, restProps, mergeCS(styled('menu', { 'menu--horizontal': mode === 'horizontal' }), {
                 className: restProps.className,
                 style: Object.assign(Object.assign(Object.assign({}, restProps.style), { width }), collapseStyle),
-            }), { ref: menuRef, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : 0, role: "menubar", "aria-orientation": mode === 'horizontal' ? 'horizontal' : 'vertical', "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), onFocus: (e) => {
+            }), { ref: (el) => {
+                    collapseRef.current = el;
+                    menuRef.current = el;
+                }, tabIndex: (_a = restProps.tabIndex) !== null && _a !== void 0 ? _a : 0, role: "menubar", "aria-orientation": mode === 'horizontal' ? 'horizontal' : 'vertical', "aria-activedescendant": isUndefined(focusId) ? undefined : getItemId(focusId), onFocus: (e) => {
                     var _a;
                     (_a = restProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                     if (!dataRef.current.mousedown) {

package/menu/internal/MenuSub.js

@@ -21,7 +21,7 @@ export const MenuSub = forwardRef((props, ref) => {
     const iconMode = mode === 'icon' && inNav;
     const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
-        if (visible && popupRef.current && triggerRef.current) {
+        if (!(disabled || mode === 'vertical') && visible && popupRef.current && triggerRef.current) {
             const height = popupRef.current.offsetHeight;
             let width = popupRef.current.offsetWidth;
             if (inHorizontalNav) {
@@ -56,6 +56,7 @@ export const MenuSub = forwardRef((props, ref) => {
                     fn: updatePosition,
                     triggerRef,
                     popupRef,
+                    scroll: false,
                 }, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('menu__item', 'menu__item--sub', {
                             'menu__item--horizontal': inHorizontalNav,
                             'menu__item--icon': iconMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "6a7e6e2e141237b816d4a9f414bcf4c5274e14e6"
+  "gitHead": "b972aaf248e60ba8e9c9d5e09e07ab46116f4ad8"
 }