@vuu-ui/vuu-layout 0.9.3 → 0.10.0

package/esm/responsive/use-breakpoints.js

@@ -1,74 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { useResizeObserver } from './useResizeObserver.js';
-import { breakpointRamp, getBreakPoints } from './breakpoints.js';
-
-const EMPTY_ARRAY = [];
-const useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
-  const [breakpointMatch, setBreakpointmatch] = useState(
-    smallerThan ? false : "lg"
-  );
-  const bodyRef = useRef(document.body);
-  const breakPointsRef = useRef(
-    breakPointsProp ? breakpointRamp(breakPointsProp) : getBreakPoints()
-  );
-  const sizeRef = useRef("lg");
-  const stopFromMinWidth = useCallback(
-    (w) => {
-      if (breakPointsRef.current) {
-        for (const [name, size] of breakPointsRef.current) {
-          if (w >= size) {
-            return name;
-          }
-        }
-      }
-    },
-    [breakPointsRef]
-  );
-  const matchSizeAgainstBreakpoints = useCallback(
-    (width) => {
-      if (smallerThan) {
-        const breakPointRamp = breakPointsRef.current.find(
-          ([name]) => name === smallerThan
-        );
-        if (breakPointRamp) {
-          const [, , maxValue] = breakPointRamp;
-          return width < maxValue;
-        }
-      } else {
-        return stopFromMinWidth(width);
-      }
-      return width;
-    },
-    [smallerThan, stopFromMinWidth]
-  );
-  useResizeObserver(
-    ref || bodyRef,
-    breakPointsRef.current ? ["width"] : EMPTY_ARRAY,
-    ({ width: measuredWidth }) => {
-      const result = matchSizeAgainstBreakpoints(measuredWidth);
-      if (result !== sizeRef.current) {
-        sizeRef.current = result;
-        setBreakpointmatch(result);
-      }
-    },
-    true
-  );
-  useEffect(() => {
-    const target = ref || bodyRef;
-    if (target.current) {
-      const prevSize = sizeRef.current;
-      if (breakPointsRef.current) {
-        const { clientWidth } = target.current;
-        const result = matchSizeAgainstBreakpoints(clientWidth);
-        sizeRef.current = result;
-        if (result !== prevSize) {
-          setBreakpointmatch(result);
-        }
-      }
-    }
-  }, [setBreakpointmatch, matchSizeAgainstBreakpoints, ref]);
-  return breakpointMatch;
-};
-
-export { useBreakpoints };
-//# sourceMappingURL=use-breakpoints.js.map

package/esm/responsive/use-breakpoints.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-breakpoints.js","sources":["../../src/responsive/use-breakpoints.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeObserver } from \"./useResizeObserver\";\nimport {\n  BreakPointRamp,\n  breakpointRamp,\n  getBreakPoints as getDocumentBreakpoints,\n} from \"./breakpoints\";\nimport { BreakPoint, BreakPointsProp } from \"../flexbox/flexboxTypes\";\n\nconst EMPTY_ARRAY: BreakPoint[] = [];\n\nexport interface BreakpointsHookProps {\n  breakPoints?: BreakPointsProp;\n  smallerThan?: string;\n}\n\n// TODO how do we cater for smallerThan/greaterThan breakpoints\nexport const useBreakpoints = (\n  { breakPoints: breakPointsProp, smallerThan }: BreakpointsHookProps,\n  ref: RefObject<HTMLElement>\n) => {\n  const [breakpointMatch, setBreakpointmatch] = useState(\n    smallerThan ? false : \"lg\"\n  );\n  const bodyRef = useRef(document.body);\n  const breakPointsRef = useRef<BreakPointRamp[]>(\n    breakPointsProp ? breakpointRamp(breakPointsProp) : getDocumentBreakpoints()\n  );\n\n  // TODO how do we identify the default\n  const sizeRef = useRef(\"lg\");\n\n  const stopFromMinWidth = useCallback(\n    (w) => {\n      if (breakPointsRef.current) {\n        for (const [name, size] of breakPointsRef.current) {\n          if (w >= size) {\n            return name;\n          }\n        }\n      }\n    },\n    [breakPointsRef]\n  );\n\n  const matchSizeAgainstBreakpoints = useCallback(\n    (width) => {\n      if (smallerThan) {\n        const breakPointRamp = breakPointsRef.current.find(\n          ([name]: BreakPointRamp) => name === smallerThan\n        );\n        if (breakPointRamp) {\n          const [, , maxValue] = breakPointRamp;\n          return width < maxValue;\n        }\n      } else {\n        return stopFromMinWidth(width);\n      }\n      // is this right ?\n      return width;\n    },\n    [smallerThan, stopFromMinWidth]\n  );\n\n  // TODO need to make the dimension a config\n  useResizeObserver(\n    ref || bodyRef,\n    breakPointsRef.current ? [\"width\"] : EMPTY_ARRAY,\n    ({ width: measuredWidth }: { width?: number }) => {\n      const result = matchSizeAgainstBreakpoints(measuredWidth);\n      if (result !== sizeRef.current) {\n        sizeRef.current = result;\n        setBreakpointmatch(result);\n      }\n    },\n    true\n  );\n\n  useEffect(() => {\n    const target = ref || bodyRef;\n    if (target.current) {\n      const prevSize = sizeRef.current;\n      if (breakPointsRef.current) {\n        // We're measuring here when the resizeObserver has also measured\n        // There isn't a convenient way to get the Resizeobserver to\n        // notify initial size - that's not really its job, unless we\n        // set a flag ?\n        const { clientWidth } = target.current;\n        const result = matchSizeAgainstBreakpoints(clientWidth);\n        sizeRef.current = result;\n        // If initial size of ref does not match the default, notify client after render\n        if (result !== prevSize) {\n          setBreakpointmatch(result);\n        }\n      }\n    }\n  }, [setBreakpointmatch, matchSizeAgainstBreakpoints, ref]);\n\n  // No, just ass the class directly to the ref, no need to render\n  return breakpointMatch;\n};\n"],"names":["getDocumentBreakpoints"],"mappings":";;;;AASA,MAAM,cAA4B,EAAC;AAQ5B,MAAM,iBAAiB,CAC5B,EAAE,aAAa,eAAiB,EAAA,WAAA,IAChC,GACG,KAAA;AACH,EAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA;AAAA,IAC5C,cAAc,KAAQ,GAAA;AAAA,GACxB;AACA,EAAM,MAAA,OAAA,GAAU,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA;AACpC,EAAA,MAAM,cAAiB,GAAA,MAAA;AAAA,IACrB,eAAkB,GAAA,cAAA,CAAe,eAAe,CAAA,GAAIA,cAAuB;AAAA,GAC7E;AAGA,EAAM,MAAA,OAAA,GAAU,OAAO,IAAI,CAAA;AAE3B,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,CAAM,KAAA;AACL,MAAA,IAAI,eAAe,OAAS,EAAA;AAC1B,QAAA,KAAA,MAAW,CAAC,IAAA,EAAM,IAAI,CAAA,IAAK,eAAe,OAAS,EAAA;AACjD,UAAA,IAAI,KAAK,IAAM,EAAA;AACb,YAAO,OAAA,IAAA;AAAA;AACT;AACF;AACF,KACF;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,2BAA8B,GAAA,WAAA;AAAA,IAClC,CAAC,KAAU,KAAA;AACT,MAAA,IAAI,WAAa,EAAA;AACf,QAAM,MAAA,cAAA,GAAiB,eAAe,OAAQ,CAAA,IAAA;AAAA,UAC5C,CAAC,CAAC,IAAI,CAAA,KAAsB,IAAS,KAAA;AAAA,SACvC;AACA,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,MAAM,KAAK,QAAQ,CAAI,GAAA,cAAA;AACvB,UAAA,OAAO,KAAQ,GAAA,QAAA;AAAA;AACjB,OACK,MAAA;AACL,QAAA,OAAO,iBAAiB,KAAK,CAAA;AAAA;AAG/B,MAAO,OAAA,KAAA;AAAA,KACT;AAAA,IACA,CAAC,aAAa,gBAAgB;AAAA,GAChC;AAGA,EAAA,iBAAA;AAAA,IACE,GAAO,IAAA,OAAA;AAAA,IACP,cAAe,CAAA,OAAA,GAAU,CAAC,OAAO,CAAI,GAAA,WAAA;AAAA,IACrC,CAAC,EAAE,KAAO,EAAA,aAAA,EAAwC,KAAA;AAChD,MAAM,MAAA,MAAA,GAAS,4BAA4B,aAAa,CAAA;AACxD,MAAI,IAAA,MAAA,KAAW,QAAQ,OAAS,EAAA;AAC9B,QAAA,OAAA,CAAQ,OAAU,GAAA,MAAA;AAClB,QAAA,kBAAA,CAAmB,MAAM,CAAA;AAAA;AAC3B,KACF;AAAA,IACA;AAAA,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAS,GAAO,IAAA,OAAA;AACtB,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAA,MAAM,WAAW,OAAQ,CAAA,OAAA;AACzB,MAAA,IAAI,eAAe,OAAS,EAAA;AAK1B,QAAM,MAAA,EAAE,WAAY,EAAA,GAAI,MAAO,CAAA,OAAA;AAC/B,QAAM,MAAA,MAAA,GAAS,4BAA4B,WAAW,CAAA;AACtD,QAAA,OAAA,CAAQ,OAAU,GAAA,MAAA;AAElB,QAAA,IAAI,WAAW,QAAU,EAAA;AACvB,UAAA,kBAAA,CAAmB,MAAM,CAAA;AAAA;AAC3B;AACF;AACF,GACC,EAAA,CAAC,kBAAoB,EAAA,2BAAA,EAA6B,GAAG,CAAC,CAAA;AAGzD,EAAO,OAAA,eAAA;AACT;;;;"}

package/types/flexbox/FluidGrid.d.ts

@@ -1,5 +0,0 @@
-import { FlexboxProps } from "./flexboxTypes";
-export interface FluidGridProps extends FlexboxProps {
-    showGrid?: boolean;
-}
-export declare const FluidGrid: import("react").ForwardRefExoticComponent<FluidGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/flexbox/FluidGridLayout.d.ts

@@ -1,5 +0,0 @@
-import { FluidGridProps } from "./FluidGrid";
-export declare const FluidGridLayout: {
-    (props: FluidGridProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/types/flexbox/useResponsiveSizing.d.ts

@@ -1,10 +0,0 @@
-import { CSSProperties, ReactElement } from "react";
-export declare const useResponsiveSizing: ({ children: childrenProp, cols: colsProp, style, }: {
-    children: ReactElement[];
-    cols?: number;
-    style?: CSSProperties;
-}) => {
-    cols: number;
-    content: ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
-    rootRef: import("react").MutableRefObject<null>;
-};

package/types/responsive/breakpoints.d.ts

@@ -1,4 +0,0 @@
-import { BreakPointsProp } from "../flexbox/flexboxTypes";
-export type BreakPointRamp = [string, number, number];
-export declare const breakpointRamp: (breakpoints: BreakPointsProp) => BreakPointRamp[];
-export declare const getBreakPoints: (themeName?: string) => BreakPointRamp[];

package/types/responsive/use-breakpoints.d.ts

@@ -1,7 +0,0 @@
-import { RefObject } from "react";
-import { BreakPointsProp } from "../flexbox/flexboxTypes";
-export interface BreakpointsHookProps {
-    breakPoints?: BreakPointsProp;
-    smallerThan?: string;
-}
-export declare const useBreakpoints: ({ breakPoints: breakPointsProp, smallerThan }: BreakpointsHookProps, ref: RefObject<HTMLElement>) => string | boolean;