@laser-ui/components 0.1.5 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0](https://github.com/laser-ui/laser-ui/compare/v0.1.6...v0.2.0) (2023-10-31)
+
+### Bug Fixes
+
+- **components:** `list` is optional in `Fab` ([8ee4ae2](https://github.com/laser-ui/laser-ui/commit/8ee4ae2dd032e4ad8ecd0a1e955489c52a335231))
+- **components:** remove Slides's radio value ([f8b07ea](https://github.com/laser-ui/laser-ui/commit/f8b07ea58131e125cd7bdaaa6221be82d32971b7))
+
+## [0.1.6](https://github.com/laser-ui/laser-ui/compare/v0.1.5...v0.1.6) (2023-10-13)
+
+**Note:** Version bump only for package @laser-ui/components
+
 ## [0.1.5](https://github.com/laser-ui/laser-ui/compare/v0.1.4...v0.1.5) (2023-10-09)
 
 ### Bug Fixes

package/card/Card.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import type { CardProps } from './types';
 import { CardAction } from './CardAction';
+import { CardActions } from './CardActions';
 import { CardContent } from './CardContent';
 import { CardHeader } from './CardHeader';
 export declare const Card: {
     (props: CardProps): JSX.Element | null;
     Header: typeof CardHeader;
     Content: typeof CardContent;
+    Actions: typeof CardActions;
     Action: typeof CardAction;
 };

package/card/Card.js

@@ -1,30 +1,24 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { isString } from 'lodash';
-import { Children } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CardAction } from './CardAction';
+import { CardActions } from './CardActions';
 import { CardContent } from './CardContent';
 import { CardHeader } from './CardHeader';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
-import { Separator } from '../separator';
 import { mergeCS } from '../utils';
 export const Card = (props) => {
-    const _a = useComponentProps('Card', props), { children, styleOverrides, styleProvider, shadow = false, header: headerProp, actions } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "shadow", "header", "actions"]);
+    const _a = useComponentProps('Card', props), { children, styleOverrides, styleProvider, shadow = false } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "shadow"]);
     const styled = useStyled(CLASSES, { card: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.card }, styleOverrides);
-    const headerNode = (() => {
-        if (headerProp) {
-            return isString(headerProp) ? _jsx(CardHeader, { children: headerProp }) : headerProp;
-        }
-    })();
-    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('card', {
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('card', {
         'card--shadow': shadow === true,
         'card--shadow-hover': shadow === 'hover',
     }), {
         className: restProps.className,
         style: restProps.style,
-    }), { children: [headerNode, children, actions && (_jsx("div", Object.assign({}, styled('card__actions'), { children: Children.map(actions, (action, index) => (_jsxs(_Fragment, { children: [action, index !== actions.length - 1 && _jsx(Separator, { style: { margin: 8 }, vertical: true })] }))) })))] })));
+    }), { children: children })));
 };
 Card.Header = CardHeader;
 Card.Content = CardContent;
+Card.Actions = CardActions;
 Card.Action = CardAction;

package/card/CardActions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { CardActionsProps } from './types';
+export declare function CardActions(props: CardActionsProps): JSX.Element | null;

package/card/CardActions.js

@@ -0,0 +1,15 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { Separator } from '../separator';
+import { mergeCS } from '../utils';
+export function CardActions(props) {
+    const _a = useComponentProps('CardActions', props), { styleOverrides, styleProvider, actions } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "actions"]);
+    const styled = useStyled(CLASSES, { card: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.card }, styleOverrides);
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('card__actions'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: Children.map(actions, (action, index) => (_jsxs(_Fragment, { children: [action, index !== actions.length - 1 && _jsx(Separator, { style: { margin: 8 }, vertical: true })] }))) })));
+}

package/card/index.d.ts

@@ -1,2 +1,2 @@
-export type { CardProps, CardHeaderProps, CardContentProps, CardActionProps } from './types';
+export type { CardProps, CardHeaderProps, CardContentProps, CardActionsProps, CardActionProps } from './types';
 export { Card } from './Card';

package/card/types.d.ts

@@ -4,14 +4,15 @@ import type { BaseProps } from '../types';
 export {};
 export interface CardProps extends BaseProps<'card', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
     shadow?: boolean | 'hover';
-    header?: React.ReactElement | string;
-    actions?: React.ReactNode[];
 }
 export interface CardHeaderProps extends BaseProps<'card', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
     action?: React.ReactNode;
 }
 export interface CardContentProps extends BaseProps<'card', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
 }
+export interface CardActionsProps extends BaseProps<'card', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    actions: React.ReactNode[];
+}
 export interface CardActionProps extends BaseProps<'card', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
 }

package/context/props.d.ts

@@ -6,7 +6,7 @@ import type { AvatarProps } from '../avatar';
 import type { BadgeProps, BadgeTextProps } from '../badge';
 import type { BreadcrumbProps } from '../breadcrumb';
 import type { ButtonProps } from '../button';
-import type { CardActionProps, CardContentProps, CardHeaderProps, CardProps } from '../card';
+import type { CardActionProps, CardActionsProps, CardContentProps, CardHeaderProps, CardProps } from '../card';
 import type { CascaderProps } from '../cascader';
 import type { CheckboxGroupProps, CheckboxProps } from '../checkbox';
 import type { ComposeItemProps, ComposeProps } from '../compose';
@@ -61,6 +61,7 @@ export interface ComponentProps {
     Card: CardProps;
     CardHeader: CardHeaderProps;
     CardContent: CardContentProps;
+    CardActions: CardActionsProps;
     CardAction: CardActionProps;
     Cascader: CascaderProps<any, any>;
     Checkbox: CheckboxProps;

package/fab/types.d.ts

@@ -7,7 +7,7 @@ export interface FabProps extends BaseProps<'fab', typeof CLASSES>, Omit<React.H
     children: React.ReactElement;
     expand?: boolean;
     defaultExpand?: boolean;
-    list: {
+    list?: {
         placement: 'top' | 'right' | 'bottom' | 'left';
         actions: React.ReactElement[];
     }[];

package/form/model/abstract-control.d.ts

@@ -5,7 +5,7 @@ export declare abstract class AbstractControl<V = any> {
     private _pristine;
     private _errors;
     private _hasOwnPendingAsyncValidator;
-    private _asyncValidationSubscription?;
+    private _abortAsyncValidation?;
     private _composedValidatorFn;
     private _composedAsyncValidatorFn;
     private _rawValidators;

package/form/model/abstract-control.js

@@ -1,5 +1,4 @@
 import { isArray } from 'lodash';
-import { forkJoin, from } from 'rxjs';
 import { DISABLED, INVALID, PENDING, VALID } from './vars';
 function mergeErrors(arrayOfErrors) {
     const res = {};
@@ -26,11 +25,8 @@ function composeAsyncValidators(validators) {
     }
     return function (control) {
         return new Promise((resolve) => {
-            const observables = forkJoin(presentValidators.map((fn) => fn(control)));
-            observables.subscribe({
-                next: (errors) => {
-                    resolve(mergeErrors(errors));
-                },
+            Promise.all(presentValidators.map((fn) => fn(control))).then((errors) => {
+                resolve(mergeErrors(errors));
             });
         });
     };
@@ -84,7 +80,7 @@ export class AbstractControl {
             writable: true,
             value: false
         });
-        Object.defineProperty(this, "_asyncValidationSubscription", {
+        Object.defineProperty(this, "_abortAsyncValidation", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -312,8 +308,8 @@ export class AbstractControl {
         return this.validator ? this.validator(this) : null;
     }
     _cancelExistingSubscription() {
-        if (this._asyncValidationSubscription) {
-            this._asyncValidationSubscription.unsubscribe();
+        if (this._abortAsyncValidation) {
+            this._abortAsyncValidation();
             this._hasOwnPendingAsyncValidator = false;
         }
     }
@@ -321,14 +317,20 @@ export class AbstractControl {
         if (this.asyncValidator) {
             this._status = PENDING;
             this._hasOwnPendingAsyncValidator = true;
-            this._asyncValidationSubscription = from(this.asyncValidator(this)).subscribe((errors) => {
+            let abort = false;
+            this._abortAsyncValidation = () => {
+                abort = true;
+            };
+            this.asyncValidator(this).then((errors) => {
                 var _a, _b;
-                this._hasOwnPendingAsyncValidator = false;
-                // This will trigger the recalculation of the validation status, which depends on
-                // the state of the asynchronous validation (whether it is in progress or not). So, it is
-                // necessary that we have updated the `_hasOwnPendingAsyncValidator` boolean flag first.
-                this.setErrors(errors);
-                (_b = (_a = this.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (!abort) {
+                    this._hasOwnPendingAsyncValidator = false;
+                    // This will trigger the recalculation of the validation status, which depends on
+                    // the state of the asynchronous validation (whether it is in progress or not). So, it is
+                    // necessary that we have updated the `_hasOwnPendingAsyncValidator` boolean flag first.
+                    this.setErrors(errors);
+                    (_b = (_a = this.root)._emitChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
             });
         }
     }

package/internal/popup/Popup.js

@@ -1,7 +1,6 @@
 import { useAsync, useEvent, useRefExtra, useResize } from '@laser-ui/hooks';
 import { isUndefined } from 'lodash';
 import { cloneElement, useEffect, useRef } from 'react';
-import { fromEvent } from 'rxjs';
 import { useLayout, useListenGlobalScrolling } from '../../hooks';
 export function Popup(props) {
     const { children, visible: visibleProp, trigger, disabled = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, updatePosition, onVisibleChange, } = props;
@@ -46,13 +45,17 @@ export function Popup(props) {
     const listenGlobalScrolling = useListenGlobalScrolling(updatePosition.fn, disabled || !visibleProp);
     useEffect(() => {
         if (!disabled && visibleProp && !listenGlobalScrolling) {
-            const ob = fromEvent([pageScrollRef, ...updatePosition.containerRefs].map((ref) => ref.current).filter((el) => el), 'scroll', { passive: true }).subscribe({
-                next: () => {
-                    updatePosition.fn();
-                },
+            const els = [pageScrollRef, ...updatePosition.containerRefs].map((ref) => ref.current).filter((el) => el);
+            const listener = () => {
+                updatePosition.fn();
+            };
+            els.forEach((el) => {
+                el.addEventListener('scroll', listener, { passive: true });
             });
             return () => {
-                ob.unsubscribe();
+                els.forEach((el) => {
+                    el.removeEventListener('scroll', listener);
+                });
             };
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,14 +26,13 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.1.5",
-    "@laser-ui/utils": "0.1.5",
+    "@laser-ui/hooks": "0.2.0",
+    "@laser-ui/utils": "0.2.0",
     "@material-design-icons/svg": "^0.14.12",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
     "lodash": "^4.17.21",
-    "rcl-store": "^2.1.0",
-    "rxjs": "^7.8.1"
+    "rcl-store": "^2.1.0"
   },
   "peerDependencies": {
     "dayjs": "^1.11.0",
@@ -46,5 +45,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "c8b89225f4f524d25980cf918af57106d0a1a587"
+  "gitHead": "70ff2b4c73a45c05aa49c44047e1da3ccbcea030"
 }

package/slides/Slides.js

@@ -270,7 +270,7 @@ export function Slides(props) {
                         'slides__pagination-radio--next-2': pagination.dynamic && index - activeIndex === 2,
                     }), {
                         style: { [vertical ? 'top' : 'left']: pagination.dynamic ? 40 - 8 - 16 * activeIndex : undefined },
-                    }), { key: slide.id, type: "radio", value: slide.id, checked: checked, name: uniqueId, title: slide.tooltip, "aria-checked": checked, "aria-controls": viewId, onChange: () => {
+                    }), { key: slide.id, type: "radio", checked: checked, name: uniqueId, title: slide.tooltip, "aria-checked": checked, "aria-controls": viewId, onChange: () => {
                             changeActive(slide.id);
                         } })));
                 }) })))] })));