@vitus-labs/elements 0.40.0 → 0.41.0-alpha.0

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 export { Provider } from '@vitus-labs/unistyle';
 import * as React from 'react';
-import React__default, { ComponentType, VFC, ForwardedRef, PropsWithChildren, ReactElement, ReactNode, ReactText, ForwardRefExoticComponent, FC } from 'react';
+import React__default, { ForwardedRef, ComponentType, VFC, PropsWithChildren, ReactElement, ReactNode, ReactText, ForwardRefExoticComponent, FC } from 'react';
 import { renderContent, config, HTMLTags, HTMLTagsText } from '@vitus-labs/core';
 
 declare type ExtractNullableKeys<T> = {
@@ -13,20 +13,65 @@ declare type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 declare type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 declare type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
 declare type SimpleHoc<P extends Record<string, unknown>> = <T extends ComponentType<any>>(WrappedComponent: T) => VFC<MergeTypes<[P, ExtractProps<T>]>>;
+/**
+ * @hidden
+ */
 declare type InnerRef = ForwardedRef<any>;
+/**
+ * @hidden
+ */
 declare type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
+/**
+ * @hidden
+ */
 declare type Css = CssCallback | string | ReturnType<typeof config.css>;
+/**
+ * @hidden
+ */
 declare type isEmpty = null | undefined;
+/**
+ * @hidden
+ */
 declare type Content = Parameters<typeof renderContent>['0'];
+/**
+ * @hidden
+ */
 declare type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
+/**
+ * @hidden
+ */
 declare type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
+/**
+ * @hidden
+ */
 declare type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows' | isEmpty;
+/**
+ * @hidden
+ */
 declare type AlignY$2 = ContentAlignY | ContentAlignY[] | Record<string, ContentAlignY>;
+/**
+ * @hidden
+ */
 declare type AlignX$2 = ContentAlignX | ContentAlignX[] | Record<string, ContentAlignX>;
+/**
+ * @hidden
+ */
 declare type Direction = ContentDirection | ContentDirection[] | Record<string, ContentDirection>;
+/**
+ * @hidden
+ */
 declare type ResponsiveBooltype = boolean | Record<string, boolean> | Array<boolean>;
+/**
+ * @hidden
+ */
 declare type Responsive = number | Array<string | number> | Record<string, number | string>;
+/**
+ * @hidden
+ */
 declare type ExtendCss = Css | Array<Css> | Record<string, Css>;
+/**
+ * @hidden
+ */
 declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
 declare type VLForwardedComponent<P = Record<string, unknown>> = ForwardRefRenderFunction<any, P> & VLStatic;
 declare type VLComponent<P = Record<string, unknown>> = VFC<P> & VLStatic;
@@ -100,7 +145,13 @@ declare const withEqualBeforeAfter: SimpleHoc<Props$7>;
 declare type MaybeNull = undefined | null;
 declare type TObj = Record<string, unknown>;
 declare type SimpleValue = ReactText;
+/**
+ * @hidden
+ */
 declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T> | HTMLTags;
+/**
+ * @hidden
+ */
 declare type ExtendedProps = {
     index: number;
     first: boolean;
@@ -109,12 +160,18 @@ declare type ExtendedProps = {
     even: boolean;
     position: number;
 };
+/**
+ * @hidden
+ */
 declare type DataArrayObject = Partial<{
     id: SimpleValue;
     key: SimpleValue;
     itemId: SimpleValue;
     component: ElementType;
 }> & Record<string, unknown>;
+/**
+ * @hidden
+ */
 declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
 declare type Props$6 = Partial<{
     children: ReactNode;
@@ -238,4 +295,4 @@ declare type Props = {
 };
 declare const component: VLComponent<Props>;
 
-export { component$7 as Element, Props$8 as ElementProps, component$6 as List, Props$5 as ListProps, component$4 as Overlay, Props$3 as OverlayProps, component$3 as OverlayProvider, component$2 as Portal, Props$2 as PortalProps, component$1 as Text, Props$1 as TextProps, UseOverlayProps, component as Util, Props as UtilProps, _default as useOverlay, component$5 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { AlignX$2 as AlignX, AlignY$2 as AlignY, Content, Direction, component$7 as Element, Props$8 as ElementProps, ExtendCss, InnerRef, component$6 as List, Props$5 as ListProps, component$4 as Overlay, Props$3 as OverlayProps, component$3 as OverlayProvider, component$2 as Portal, Props$2 as PortalProps, Responsive, ResponsiveBooltype, component$1 as Text, Props$1 as TextProps, UseOverlayProps, component as Util, Props as UtilProps, _default as useOverlay, component$5 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };

package/lib/types/helpers/Iterator/types.d.ts

@@ -3,7 +3,13 @@ import { HTMLTags } from '@vitus-labs/core';
 export declare type MaybeNull = undefined | null;
 export declare type TObj = Record<string, unknown>;
 export declare type SimpleValue = ReactText;
+/**
+ * @hidden
+ */
 export declare type ElementType<T extends Record<string, unknown> = any> = ComponentType<T> | ForwardRefExoticComponent<T> | HTMLTags;
+/**
+ * @hidden
+ */
 export declare type ExtendedProps = {
     index: number;
     first: boolean;
@@ -12,12 +18,18 @@ export declare type ExtendedProps = {
     even: boolean;
     position: number;
 };
+/**
+ * @hidden
+ */
 export declare type DataArrayObject = Partial<{
     id: SimpleValue;
     key: SimpleValue;
     itemId: SimpleValue;
     component: ElementType;
 }> & Record<string, unknown>;
+/**
+ * @hidden
+ */
 export declare type PropsCallback = TObj | ((itemProps: Record<string, never> | Record<string, SimpleValue> | DataArrayObject, extendedProps: ExtendedProps) => TObj);
 export declare type Props = Partial<{
     children: ReactNode;

package/lib/types/index.d.ts

@@ -5,5 +5,6 @@ import Overlay, { Props as OverlayProps, useOverlay, OverlayProvider, UseOverlay
 import Portal, { Props as PortalProps } from "./Portal";
 import Text, { Props as TextProps } from "./Text";
 import Util, { Props as UtilProps } from "./Util";
-export type { ElementProps, ListProps, OverlayProps, UseOverlayProps, PortalProps, TextProps, UtilProps, };
+import type { AlignX, AlignY, Content, Direction, ResponsiveBooltype, Responsive, ExtendCss, InnerRef } from "./types";
+export type { ElementProps, ListProps, OverlayProps, UseOverlayProps, PortalProps, TextProps, UtilProps, AlignX, AlignY, Content, Direction, ResponsiveBooltype, Responsive, ExtendCss, InnerRef, };
 export { Element, withEqualSizeBeforeAfter, withActiveState, List, Overlay, useOverlay, OverlayProvider, Portal, Text, Util, Provider, };

package/lib/types/types.d.ts

@@ -10,21 +10,69 @@ declare type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
 declare type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
 export declare type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
 export declare type SimpleHoc<P extends Record<string, unknown>> = <T extends ComponentType<any>>(WrappedComponent: T) => VFC<MergeTypes<[P, ExtractProps<T>]>>;
+/**
+ * @hidden
+ */
 export declare type InnerRef = ForwardedRef<any>;
+/**
+ * @hidden
+ */
 export declare type CssCallback = (css: typeof config.css) => ReturnType<typeof css>;
+/**
+ * @hidden
+ */
 export declare type Css = CssCallback | string | ReturnType<typeof config.css>;
+/**
+ * @hidden
+ */
 export declare type isEmpty = null | undefined;
+/**
+ * @hidden
+ */
 export declare type Content = Parameters<typeof renderContent>['0'];
+/**
+ * @hidden
+ */
 export declare type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
+/**
+ * @hidden
+ */
 export declare type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block' | isEmpty;
+/**
+ * @hidden
+ */
 export declare type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows' | isEmpty;
+/**
+ * @hidden
+ */
 export declare type Ref = HTMLElement;
+/**
+ * @hidden
+ */
 export declare type AlignY = ContentAlignY | ContentAlignY[] | Record<string, ContentAlignY>;
+/**
+ * @hidden
+ */
 export declare type AlignX = ContentAlignX | ContentAlignX[] | Record<string, ContentAlignX>;
+/**
+ * @hidden
+ */
 export declare type Direction = ContentDirection | ContentDirection[] | Record<string, ContentDirection>;
+/**
+ * @hidden
+ */
 export declare type ResponsiveBooltype = boolean | Record<string, boolean> | Array<boolean>;
+/**
+ * @hidden
+ */
 export declare type Responsive = number | Array<string | number> | Record<string, number | string>;
+/**
+ * @hidden
+ */
 export declare type ExtendCss = Css | Array<Css> | Record<string, Css>;
+/**
+ * @hidden
+ */
 export declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentType<infer TProps> ? TProps : TComponentOrTProps;
 export declare type VLForwardedComponent<P = Record<string, unknown>> = ForwardRefRenderFunction<any, P> & VLStatic;
 export declare type VLComponent<P = Record<string, unknown>> = VFC<P> & VLStatic;

package/lib/vitus-labs-elements.browser.js

@@ -20,20 +20,6 @@ const INLINE_ELEMENTS_FLEX_FIX = {
 const isWebFixNeeded = (tag) => INLINE_ELEMENTS_FLEX_FIX[tag];
 
 const styles$2 = ({ theme: t, css }) => css `
-  ${css `
-    ${({ $childFix }) => !$childFix &&
-        css `
-        display: ${t.block ? 'flex' : 'inline-flex'};
-      `};
-
-    ${({ $parentFix }) => $parentFix &&
-        t.block &&
-        css `
-        flex-direction: column;
-        width: 100%;
-      `};
-  `};
-
   ${t.alignY === 'block' &&
     css `
     height: 100%;
@@ -50,6 +36,20 @@ const styles$2 = ({ theme: t, css }) => css `
     align-self: stretch;
   `}
 
+  ${css `
+    ${({ $childFix }) => !$childFix &&
+        css `
+        display: ${t.block ? 'flex' : 'inline-flex'};
+      `};
+
+    ${({ $parentFix }) => $parentFix &&
+        t.block &&
+        css `
+        flex-direction: column;
+        width: 100%;
+      `};
+  `};
+
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
 const platformStyles = 'box-sizing: border-box;' ;
@@ -735,22 +735,33 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     const hideContent = useCallback(() => {
         handleActive(false);
     }, []);
+    useEffect(() => {
+        if (active) {
+            if (onOpen)
+                onOpen();
+        }
+        else {
+            if (onClose)
+                onClose();
+        }
+    }, [active, onOpen, onClose]);
+    useEffect(() => {
+        if (disabled) {
+            hideContent();
+        }
+    }, [disabled]);
     // if an Overlay has an Overlay child, this will prevent closing parent child
     // + calculate correct position when an Overlay is opened
     useEffect(() => {
         if (active) {
             if (ctx?.setBlocked)
                 ctx.setBlocked();
-            if (onOpen)
-                onOpen();
         }
         else {
             if (ctx?.setUnblocked)
                 ctx.setUnblocked();
-            if (onClose)
-                onClose();
         }
-    }, [active, onOpen, onClose]);
+    }, [active, ctx]);
     // calculate position on every position change state
     useEffect(() => {
         if (active) {