@e1011/es-kit 1.0.0 → 1.0.2

package/dist/lib/src/core/hooks/index.js

@@ -18,4 +18,5 @@ __exportStar(require("./useApi"), exports);
 __exportStar(require("./useToggle"), exports);
 __exportStar(require("./useTranslations"), exports);
 __exportStar(require("./useOutsideClick"), exports);
+__exportStar(require("./useResize"), exports);
 //# sourceMappingURL=index.js.map

package/dist/lib/src/core/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAwB;AACxB,8CAA2B;AAC3B,oDAAiC;AACjC,oDAAiC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAwB;AACxB,8CAA2B;AAC3B,oDAAiC;AACjC,oDAAiC;AACjC,8CAA2B"}

package/dist/lib/src/core/hooks/useResize.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResize = void 0;
+const react_1 = require("react");
+const debounce_1 = __importDefault(require("lodash-es/debounce"));
+const useResize = (debounceDelay = 250) => {
+    const [containerSize, setContainerSize] = (0, react_1.useState)({ width: undefined, height: undefined });
+    const lastResizeWidthRef = (0, react_1.useRef)({ width: 0, height: 0 });
+    const containerRef = (0, react_1.useRef)();
+    // const [unobserver, setUnobserver] = useState<Unobserver>(DefaultUnobserver)
+    const unobserverRef = (0, react_1.useRef)();
+    const debouncedResizeWrapper = (0, react_1.useMemo)(() => (0, debounce_1.default)((entries) => {
+        const newResizeWidth = entries[0].contentRect.width;
+        const newResizeHeight = entries[0].contentRect.height;
+        if (lastResizeWidthRef.current?.width === newResizeWidth
+            && lastResizeWidthRef.current?.height === newResizeHeight) {
+            return;
+        }
+        lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight };
+        setContainerSize({
+            width: containerRef?.current?.clientWidth,
+            height: containerRef?.current?.clientHeight,
+        });
+    }, debounceDelay), [containerRef, debounceDelay]);
+    (0, react_1.useEffect)(() => {
+        let resizeObserver;
+        let containerElement;
+        if (containerRef?.current) {
+            containerElement = containerRef?.current;
+            resizeObserver = new ResizeObserver(debouncedResizeWrapper);
+            resizeObserver.observe(containerElement);
+            setContainerSize({
+                width: containerRef?.current?.clientWidth,
+                height: containerRef?.current?.clientHeight,
+            });
+        }
+        const unobserver = () => {
+            resizeObserver?.unobserve?.(containerElement);
+        };
+        // setUnobserver(unobserver)
+        unobserverRef.current = unobserver;
+        return unobserver;
+    }, [debouncedResizeWrapper, containerRef]);
+    return [containerRef, containerSize, unobserverRef.current];
+};
+exports.useResize = useResize;
+//# sourceMappingURL=useResize.js.map

package/dist/lib/src/core/hooks/useResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResize.js","sourceRoot":"","sources":["../../../../../src/core/hooks/useResize.ts"],"names":[],"mappings":";;;;;;AAAA,iCAA8E;AAC9E,kEAAyC;AAQlC,MAAM,SAAS,GAAG,CAAC,aAAa,GAAG,GAAG,EAC4C,EAAE;IACzF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,IAAA,gBAAQ,EAAc,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAA;IAEhE,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAc,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;IACvE,MAAM,YAAY,GAAqD,IAAA,cAAM,GAAkC,CAAA;IAE/G,8EAA8E;IAC9E,MAAM,aAAa,GAAG,IAAA,cAAM,GAAc,CAAA;IAE1C,MAAM,sBAAsB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,kBAAQ,EAAC,CAAC,OAAO,EAAE,EAAE;QAChE,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAA;QACnD,MAAM,eAAe,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAA;QAErD,IAAI,kBAAkB,CAAC,OAAO,EAAE,KAAK,KAAK,cAAc;eACnD,kBAAkB,CAAC,OAAO,EAAE,MAAM,KAAK,eAAe,EAAE;YAC3D,OAAM;SACP;QACD,kBAAkB,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,CAAA;QAE/E,gBAAgB,CAAC;YACf,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW;YACzC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY;SAC5C,CAAC,CAAA;IACJ,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAA;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,cAA8B,CAAA;QAClC,IAAI,gBAA6B,CAAA;QAEjC,IAAI,YAAY,EAAE,OAAO,EAAE;YACzB,gBAAgB,GAAG,YAAY,EAAE,OAAO,CAAA;YACxC,cAAc,GAAG,IAAI,cAAc,CAAC,sBAAsB,CAAC,CAAA;YAC3D,cAAc,CAAC,OAAO,CAAC,gBAA2B,CAAC,CAAA;YAEnD,gBAAgB,CAAC;gBACf,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW;gBACzC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY;aAC5C,CAAC,CAAA;SACH;QACD,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,cAAc,EAAE,SAAS,EAAE,CAAC,gBAA2B,CAAC,CAAA;QAC1D,CAAC,CAAA;QAED,4BAA4B;QAC5B,aAAa,CAAC,OAAO,GAAG,UAAU,CAAA;QAElC,OAAO,UAAU,CAAA;IACnB,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1C,OAAO,CAAC,YAAY,EAAE,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;AAC7D,CAAC,CAAA;AApDY,QAAA,SAAS,aAoDrB"}

package/dist/types/src/core/hooks/index.d.ts

@@ -2,4 +2,5 @@ export * from './useApi';
 export * from './useToggle';
 export * from './useTranslations';
 export * from './useOutsideClick';
+export * from './useResize';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/core/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}

package/dist/types/src/core/hooks/useResize.d.ts

@@ -0,0 +1,13 @@
+import { MutableRefObject } from 'react';
+type WrapperSize = {
+    width: undefined | number;
+    height: undefined | number;
+};
+type Unobserver = () => (null | void);
+export declare const useResize: (debounceDelay?: number) => [
+    MutableRefObject<HTMLElement | null | undefined>,
+    WrapperSize,
+    Unobserver | undefined
+];
+export {};
+//# sourceMappingURL=useResize.d.ts.map

package/dist/types/src/core/hooks/useResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResize.d.ts","sourceRoot":"","sources":["../../../../../src/core/hooks/useResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAwC,MAAM,OAAO,CAAA;AAG9E,KAAK,WAAW,GAAG;IAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAA;CAAC,CAAA;AAI1E,KAAK,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,CAAA;AAErC,eAAO,MAAM,SAAS,8BAA0B;IAC9C,iBAAiB,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAAE,WAAW;IAAE,UAAU,GAAG,SAAS;CAmDtF,CAAA"}

package/dist/types/src/core/ui/components/container/Flex.d.ts

@@ -45,7 +45,7 @@ export declare const FlexWrapper: import("react").MemoExoticComponent<import("st
     gap?: string | undefined;
     css?: string | undefined;
     borderRadius?: string | undefined;
-}, "direction" | "flex" | "flexGrow" | "alignText" | "flexShrink" | "flexBasis" | "flexWrap" | "justify" | "align" | "alignSelf" | "margin" | "padding" | "width" | "height" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight" | "gap" | "css" | "borderRadius">>;
+}, "width" | "height" | "direction" | "flex" | "flexGrow" | "alignText" | "flexShrink" | "flexBasis" | "flexWrap" | "justify" | "align" | "alignSelf" | "margin" | "padding" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight" | "gap" | "css" | "borderRadius">>;
 export declare const FlexTight: import("react").MemoExoticComponent<import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("styled-components").StyledComponent<"div", any, FlexProps, never>>, any, {
     flex?: string | undefined;
     flexGrow?: string | number | undefined;
@@ -69,5 +69,5 @@ export declare const FlexTight: import("react").MemoExoticComponent<import("styl
     css?: string | undefined;
     borderRadius?: string | undefined;
     size: string;
-}, "direction" | "flex" | "flexGrow" | "alignText" | "flexShrink" | "flexBasis" | "flexWrap" | "justify" | "align" | "alignSelf" | "margin" | "padding" | "width" | "height" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight" | "gap" | "css" | "borderRadius" | "size">>;
+}, "width" | "height" | "direction" | "flex" | "flexGrow" | "alignText" | "flexShrink" | "flexBasis" | "flexWrap" | "justify" | "align" | "alignSelf" | "margin" | "padding" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight" | "gap" | "css" | "borderRadius" | "size">>;
 //# sourceMappingURL=Flex.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e1011/es-kit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/lib/cjs/src/index.js",
   "module": "dist/lib/esm/src/index.js",
   "sideEffects": false,