@vuu-ui/vuu-layout 0.9.2 → 0.10.0

package/esm/flexbox/FluidGrid.js

@@ -1,85 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { asReactElements } from '@vuu-ui/vuu-utils';
-import { useForkRef } from '@salt-ds/core';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { forwardRef, useMemo } from 'react';
-import { useBreakpoints } from '../responsive/use-breakpoints.js';
-import '../responsive/useResizeObserver.js';
-import { useResponsiveSizing } from './useResponsiveSizing.js';
-import fluidGridCss from './FluidGrid.css.js';
-
-const classBase = "hwFluidGrid";
-const FluidGrid = forwardRef(function FluidGrid2(props, ref) {
-  const {
-    breakPoints,
-    children: childrenProp,
-    column,
-    cols: colsProp = 12,
-    className: classNameProp,
-    flexFill,
-    gap = 3,
-    fullPage,
-    id,
-    onSplitterMoved,
-    resizeable,
-    row,
-    showGrid,
-    spacing,
-    splitterSize,
-    style: styleProp,
-    ...rest
-  } = props;
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-fluid-grid",
-    css: fluidGridCss,
-    window: targetWindow
-  });
-  const children = useMemo(() => {
-    return asReactElements(childrenProp);
-  }, [childrenProp]);
-  const { cols, content, rootRef } = useResponsiveSizing({
-    children,
-    cols: colsProp,
-    style: styleProp
-  });
-  const breakpoint = useBreakpoints(
-    {
-      breakPoints
-    },
-    rootRef
-  );
-  const className = cx(classBase, classNameProp, {
-    [`${classBase}-column`]: column,
-    [`${classBase}-row`]: row,
-    [`${classBase}-show-grid`]: showGrid,
-    "flex-fill": flexFill,
-    "full-page": fullPage
-  });
-  const style = {
-    ...styleProp,
-    "--spacing": spacing,
-    "--grid-col-count": cols,
-    "--grid-gap": gap
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      className,
-      "data-breakpoint": breakpoint,
-      "data-cols": cols,
-      "data-resizeable": resizeable || void 0,
-      id,
-      ref: useForkRef(rootRef, ref),
-      style,
-      children: content
-    }
-  );
-});
-FluidGrid.displayName = "FluidGrid";
-
-export { FluidGrid };
-//# sourceMappingURL=FluidGrid.js.map

package/esm/flexbox/FluidGrid.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FluidGrid.js","sources":["../../src/flexbox/FluidGrid.tsx"],"sourcesContent":["import { asReactElements } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, useMemo } from \"react\";\nimport { useBreakpoints } from \"../responsive\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport { useResponsiveSizing } from \"./useResponsiveSizing\";\n\nimport fluidGridCss from \"./FluidGrid.css\";\n\nconst classBase = \"hwFluidGrid\";\n\nexport interface FluidGridProps extends FlexboxProps {\n  showGrid?: boolean;\n}\n\nexport const FluidGrid = forwardRef(function FluidGrid(\n  props: FluidGridProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    breakPoints,\n    children: childrenProp,\n    column,\n    cols: colsProp = 12,\n    className: classNameProp,\n    flexFill,\n    gap = 3,\n    fullPage,\n    id,\n    onSplitterMoved,\n    resizeable,\n    row,\n    showGrid,\n    spacing,\n    splitterSize,\n    style: styleProp,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-fluid-grid\",\n    css: fluidGridCss,\n    window: targetWindow,\n  });\n\n  //TODO does thie useMemo serve any actual purpose or will childrenProp\n  // always be new anyway ?\n  const children = useMemo(() => {\n    return asReactElements(childrenProp);\n  }, [childrenProp]);\n\n  const { cols, content, rootRef } = useResponsiveSizing({\n    children,\n    cols: colsProp,\n    style: styleProp,\n  });\n\n  const breakpoint = useBreakpoints(\n    {\n      breakPoints,\n    },\n    rootRef,\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-column`]: column,\n    [`${classBase}-row`]: row,\n    [`${classBase}-show-grid`]: showGrid,\n    \"flex-fill\": flexFill,\n    \"full-page\": fullPage,\n  });\n\n  const style = {\n    ...styleProp,\n    \"--spacing\": spacing,\n    \"--grid-col-count\": cols,\n    \"--grid-gap\": gap,\n  };\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-breakpoint={breakpoint}\n      data-cols={cols}\n      data-resizeable={resizeable || undefined}\n      id={id}\n      ref={useForkRef(rootRef, ref)}\n      style={style}\n    >\n      {content}\n    </div>\n  );\n});\nFluidGrid.displayName = \"FluidGrid\";\n"],"names":["FluidGrid"],"mappings":";;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,aAAA,CAAA;AAMX,MAAM,SAAY,GAAA,UAAA,CAAW,SAASA,UAAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,MAAA;AAAA,IACA,MAAM,QAAW,GAAA,EAAA;AAAA,IACjB,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAM,GAAA,CAAA;AAAA,IACN,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,IAAA,OAAO,gBAAgB,YAAY,CAAA,CAAA;AAAA,GACrC,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAY,mBAAoB,CAAA;AAAA,IACrD,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA,cAAA;AAAA,IACjB;AAAA,MACE,WAAA;AAAA,KACF;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,QAAA;AAAA,IAC5B,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA,QAAA;AAAA,GACd,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,WAAa,EAAA,OAAA;AAAA,IACb,kBAAoB,EAAA,IAAA;AAAA,IACpB,YAAc,EAAA,GAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAiB,EAAA,UAAA;AAAA,MACjB,WAAW,EAAA,IAAA;AAAA,MACX,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}

package/esm/flexbox/FluidGridLayout.js

@@ -1,12 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { registerComponent } from '@vuu-ui/vuu-utils';
-import { FluidGrid } from './FluidGrid.js';
-
-const FluidGridLayout = function FluidGridLayout2(props) {
-  return /* @__PURE__ */ jsx(FluidGrid, { ...props });
-};
-FluidGridLayout.displayName = "FluidGrid";
-registerComponent("FluidGrid", FluidGridLayout, "container");
-
-export { FluidGridLayout };
-//# sourceMappingURL=FluidGridLayout.js.map

package/esm/flexbox/FluidGridLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FluidGridLayout.js","sources":["../../src/flexbox/FluidGridLayout.tsx"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { FluidGrid, FluidGridProps } from \"./FluidGrid\";\n\nexport const FluidGridLayout = function FluidGridLayout(props: FluidGridProps) {\n  return <FluidGrid {...props} />;\n};\nFluidGridLayout.displayName = \"FluidGrid\";\n\nregisterComponent(\"FluidGrid\", FluidGridLayout, \"container\");\n"],"names":["FluidGridLayout"],"mappings":";;;;AAGa,MAAA,eAAA,GAAkB,SAASA,gBAAAA,CAAgB,KAAuB,EAAA;AAC7E,EAAO,uBAAA,GAAA,CAAC,SAAW,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAC/B,EAAA;AACA,eAAA,CAAgB,WAAc,GAAA,WAAA,CAAA;AAE9B,iBAAkB,CAAA,WAAA,EAAa,iBAAiB,WAAW,CAAA;;;;"}

package/esm/flexbox/useResponsiveSizing.js

@@ -1,60 +0,0 @@
-import { getUniqueId } from '@vuu-ui/vuu-utils';
-import { useRef, useMemo, isValidElement, useCallback, cloneElement } from 'react';
-import { gatherChildMeta } from './flexbox-utils.js';
-
-const breakPoints = ["xs", "sm", "md", "lg", "xl"];
-const DEFAULT_COLS = 12;
-const useResponsiveSizing = ({
-  children: childrenProp,
-  cols: colsProp,
-  style
-}) => {
-  const rootRef = useRef(null);
-  const metaRef = useRef(null);
-  const contentRef = useRef();
-  const cols = colsProp ?? DEFAULT_COLS;
-  const isColumn = style?.flexDirection === "column";
-  const dimension = isColumn ? "height" : "width";
-  const children = useMemo(
-    () => Array.isArray(childrenProp) ? childrenProp : isValidElement(childrenProp) ? [childrenProp] : [],
-    [childrenProp]
-  );
-  const buildContent = useCallback(
-    (children2, dimension2) => {
-      const childMeta = gatherChildMeta(children2, dimension2, breakPoints);
-      const content = [];
-      const meta = [];
-      for (let i = 0; i < children2.length; i++) {
-        const child = children2[i];
-        const {
-          style: { flex, ...rest }
-        } = child.props;
-        content.push(
-          cloneElement(child, {
-            key: getUniqueId(),
-            style: {
-              ...rest,
-              "--parent-col-count": cols
-            }
-          })
-        );
-        meta.push(childMeta[i]);
-      }
-      return [content, meta];
-    },
-    [cols]
-  );
-  useMemo(() => {
-    const [content, meta] = buildContent(children, dimension);
-    metaRef.current = meta;
-    contentRef.current = content;
-  }, [buildContent, children, dimension]);
-  return {
-    cols,
-    content: contentRef.current,
-    rootRef
-  };
-};
-
-export { useResponsiveSizing };
-//# sourceMappingURL=useResponsiveSizing.js.map

package/esm/flexbox/useResponsiveSizing.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useResponsiveSizing.js","sources":["../../src/flexbox/useResponsiveSizing.ts"],"sourcesContent":["import { getUniqueId } from \"@vuu-ui/vuu-utils\";\nimport {\n  cloneElement,\n  CSSProperties,\n  isValidElement,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { gatherChildMeta } from \"./flexbox-utils\";\nimport { BreakPoint } from \"./flexboxTypes\";\n\nconst breakPoints: BreakPoint[] = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst DEFAULT_COLS = 12;\n\nexport const useResponsiveSizing = ({\n  children: childrenProp,\n  cols: colsProp,\n  style,\n}: {\n  children: ReactElement[];\n  cols?: number;\n  style?: CSSProperties;\n}) => {\n  const rootRef = useRef(null);\n  const metaRef = useRef(null);\n  const contentRef = useRef<ReactElement[]>();\n  const cols = colsProp ?? DEFAULT_COLS;\n\n  const isColumn = style?.flexDirection === \"column\";\n  const dimension = isColumn ? \"height\" : \"width\";\n\n  const children = useMemo(\n    () =>\n      Array.isArray(childrenProp)\n        ? childrenProp\n        : isValidElement(childrenProp)\n          ? [childrenProp]\n          : [],\n    [childrenProp],\n  );\n\n  const buildContent = useCallback(\n    (children, dimension): [ReactElement[], any] => {\n      const childMeta = gatherChildMeta(children, dimension, breakPoints);\n      const content = [];\n      const meta = [];\n      for (let i = 0; i < children.length; i++) {\n        const child = children[i];\n        const {\n          style: { flex, ...rest },\n        } = child.props;\n        content.push(\n          cloneElement(child, {\n            key: getUniqueId(),\n            style: {\n              ...rest,\n              \"--parent-col-count\": cols,\n            },\n          }),\n        );\n        meta.push(childMeta[i]);\n      }\n      return [content, meta];\n    },\n    [cols],\n  );\n\n  useMemo(() => {\n    const [content, meta] = buildContent(children, dimension);\n    metaRef.current = meta;\n    contentRef.current = content;\n  }, [buildContent, children, dimension]);\n\n  return {\n    cols,\n    content: contentRef.current,\n    rootRef,\n  };\n};\n"],"names":["children","dimension"],"mappings":";;;;AAaA,MAAM,cAA4B,CAAC,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,MAAM,IAAI,CAAA,CAAA;AAE/D,MAAM,YAAe,GAAA,EAAA,CAAA;AAEd,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAU,EAAA,YAAA;AAAA,EACV,IAAM,EAAA,QAAA;AAAA,EACN,KAAA;AACF,CAIM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,OAAO,IAAI,CAAA,CAAA;AAC3B,EAAM,MAAA,OAAA,GAAU,OAAO,IAAI,CAAA,CAAA;AAC3B,EAAA,MAAM,aAAa,MAAuB,EAAA,CAAA;AAC1C,EAAA,MAAM,OAAO,QAAY,IAAA,YAAA,CAAA;AAEzB,EAAM,MAAA,QAAA,GAAW,OAAO,aAAkB,KAAA,QAAA,CAAA;AAC1C,EAAM,MAAA,SAAA,GAAY,WAAW,QAAW,GAAA,OAAA,CAAA;AAExC,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,KAAA,CAAM,OAAQ,CAAA,YAAY,CACtB,GAAA,YAAA,GACA,cAAe,CAAA,YAAY,CACzB,GAAA,CAAC,YAAY,CAAA,GACb,EAAC;AAAA,IACT,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAACA,WAAUC,UAAqC,KAAA;AAC9C,MAAA,MAAM,SAAY,GAAA,eAAA,CAAgBD,SAAUC,EAAAA,UAAAA,EAAW,WAAW,CAAA,CAAA;AAClE,MAAA,MAAM,UAAU,EAAC,CAAA;AACjB,MAAA,MAAM,OAAO,EAAC,CAAA;AACd,MAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAID,GAAAA,SAAAA,CAAS,QAAQ,CAAK,EAAA,EAAA;AACxC,QAAM,MAAA,KAAA,GAAQA,UAAS,CAAC,CAAA,CAAA;AACxB,QAAM,MAAA;AAAA,UACJ,KAAO,EAAA,EAAE,IAAM,EAAA,GAAG,IAAK,EAAA;AAAA,YACrB,KAAM,CAAA,KAAA,CAAA;AACV,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN,aAAa,KAAO,EAAA;AAAA,YAClB,KAAK,WAAY,EAAA;AAAA,YACjB,KAAO,EAAA;AAAA,cACL,GAAG,IAAA;AAAA,cACH,oBAAsB,EAAA,IAAA;AAAA,aACxB;AAAA,WACD,CAAA;AAAA,SACH,CAAA;AACA,QAAK,IAAA,CAAA,IAAA,CAAK,SAAU,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACxB;AACA,MAAO,OAAA,CAAC,SAAS,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,MAAM,CAAC,OAAS,EAAA,IAAI,CAAI,GAAA,YAAA,CAAa,UAAU,SAAS,CAAA,CAAA;AACxD,IAAA,OAAA,CAAQ,OAAU,GAAA,IAAA,CAAA;AAClB,IAAA,UAAA,CAAW,OAAU,GAAA,OAAA,CAAA;AAAA,GACpB,EAAA,CAAC,YAAc,EAAA,QAAA,EAAU,SAAS,CAAC,CAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,SAAS,UAAW,CAAA,OAAA;AAAA,IACpB,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/responsive/breakpoints.js

@@ -1,33 +0,0 @@
-function breakpointReader(themeName, defaultBreakpoints) {
-  const themeRoot = document.body.querySelector(`.${themeName}`);
-  const handler = {
-    get: function(style, stopName) {
-      const val = style.getPropertyValue(
-        // lets assume we have the following naming convention
-        `--${themeName}-breakpoint-${stopName}`
-      );
-      return val ? parseInt(val) : void 0;
-    }
-  };
-  return themeRoot ? new Proxy(getComputedStyle(themeRoot), handler) : defaultBreakpoints ?? {};
-}
-const byDescendingStopSize = ([, s1], [, s2]) => s2 - s1;
-const breakpointRamp = (breakpoints) => Object.entries(breakpoints).sort(byDescendingStopSize).map(([name, value], i, all) => [
-  name,
-  value,
-  i < all.length - 1 ? all[i + 1][1] : 9999
-]);
-let documentBreakpoints = null;
-const loadBreakpoints = (themeName = "salt") => {
-  const { xs, sm, md, lg, xl } = breakpointReader(themeName);
-  return breakpointRamp({ xs, sm, md, lg, xl });
-};
-const getBreakPoints = (themeName) => {
-  if (documentBreakpoints === null) {
-    documentBreakpoints = loadBreakpoints(themeName);
-  }
-  return documentBreakpoints;
-};
-
-export { breakpointRamp, getBreakPoints };
-//# sourceMappingURL=breakpoints.js.map

package/esm/responsive/breakpoints.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoints.js","sources":["../../src/responsive/breakpoints.ts"],"sourcesContent":["// should we have some global; defaults ?\n\nimport { BreakPointsProp } from \"../flexbox/flexboxTypes\";\n\nexport type BreakPointRamp = [string, number, number];\n\nfunction breakpointReader(\n  themeName: string,\n  defaultBreakpoints?: BreakPointsProp\n) {\n  //TODO ownerDocument\n  const themeRoot = document.body.querySelector(`.${themeName}`);\n  const handler = {\n    get: function (style: CSSStyleDeclaration, stopName: string) {\n      const val = style.getPropertyValue(\n        // lets assume we have the following naming convention\n        `--${themeName}-breakpoint-${stopName}`\n      );\n      return val ? parseInt(val) : undefined;\n    },\n  };\n\n  return themeRoot\n    ? new Proxy(getComputedStyle(themeRoot), handler)\n    : defaultBreakpoints ?? {};\n}\n\nconst byDescendingStopSize = (\n  [, s1]: [string, number],\n  [, s2]: [string, number]\n) => s2 - s1;\n\n// These are assumed to be min-width (aka mobile-first) stops, we could take a\n// paramneter to support max-width as well ?\n// return [stopName, minWidth, maxWidth]\nexport const breakpointRamp = (\n  breakpoints: BreakPointsProp\n): BreakPointRamp[] =>\n  Object.entries(breakpoints)\n    .sort(byDescendingStopSize)\n    .map(([name, value], i, all) => [\n      name,\n      value,\n      i < all.length - 1 ? all[i + 1][1] : 9999,\n    ]);\n\nlet documentBreakpoints: BreakPointRamp[] | null = null;\n\nconst loadBreakpoints = (themeName = \"salt\") => {\n  // TODO would be nice to read these breakpoint labels from a css variable to\n  // avoid hard-coding them here ?\n  const { xs, sm, md, lg, xl } = breakpointReader(themeName) as BreakPointsProp;\n  return breakpointRamp({ xs, sm, md, lg, xl });\n};\n\n//TODO support multiple themes loaded\nexport const getBreakPoints = (themeName?: string) => {\n  if (documentBreakpoints === null) {\n    documentBreakpoints = loadBreakpoints(themeName);\n  }\n  return documentBreakpoints;\n};\n"],"names":[],"mappings":"AAMA,SAAS,gBAAA,CACP,WACA,kBACA,EAAA;AAEA,EAAA,MAAM,YAAY,QAAS,CAAA,IAAA,CAAK,aAAc,CAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA,CAAA;AAC7D,EAAA,MAAM,OAAU,GAAA;AAAA,IACd,GAAA,EAAK,SAAU,KAAA,EAA4B,QAAkB,EAAA;AAC3D,MAAA,MAAM,MAAM,KAAM,CAAA,gBAAA;AAAA;AAAA,QAEhB,CAAA,EAAA,EAAK,SAAS,CAAA,YAAA,EAAe,QAAQ,CAAA,CAAA;AAAA,OACvC,CAAA;AACA,MAAO,OAAA,GAAA,GAAM,QAAS,CAAA,GAAG,CAAI,GAAA,KAAA,CAAA,CAAA;AAAA,KAC/B;AAAA,GACF,CAAA;AAEA,EAAO,OAAA,SAAA,GACH,IAAI,KAAM,CAAA,gBAAA,CAAiB,SAAS,CAAG,EAAA,OAAO,CAC9C,GAAA,kBAAA,IAAsB,EAAC,CAAA;AAC7B,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAC3B,GAAG,EAAE,GACL,GAAG,EAAE,CAAA,KACF,EAAK,GAAA,EAAA,CAAA;AAKH,MAAM,iBAAiB,CAC5B,WAAA,KAEA,MAAO,CAAA,OAAA,CAAQ,WAAW,CACvB,CAAA,IAAA,CAAK,oBAAoB,CAAA,CACzB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAA,EAAG,GAAG,GAAQ,KAAA;AAAA,EAC9B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,CAAA,GAAI,IAAI,MAAS,GAAA,CAAA,GAAI,IAAI,CAAI,GAAA,CAAC,CAAE,CAAA,CAAC,CAAI,GAAA,IAAA;AACvC,CAAC,EAAA;AAEL,IAAI,mBAA+C,GAAA,IAAA,CAAA;AAEnD,MAAM,eAAA,GAAkB,CAAC,SAAA,GAAY,MAAW,KAAA;AAG9C,EAAM,MAAA,EAAE,IAAI,EAAI,EAAA,EAAA,EAAI,IAAI,EAAG,EAAA,GAAI,iBAAiB,SAAS,CAAA,CAAA;AACzD,EAAA,OAAO,eAAe,EAAE,EAAA,EAAI,IAAI,EAAI,EAAA,EAAA,EAAI,IAAI,CAAA,CAAA;AAC9C,CAAA,CAAA;AAGa,MAAA,cAAA,GAAiB,CAAC,SAAuB,KAAA;AACpD,EAAA,IAAI,wBAAwB,IAAM,EAAA;AAChC,IAAA,mBAAA,GAAsB,gBAAgB,SAAS,CAAA,CAAA;AAAA,GACjD;AACA,EAAO,OAAA,mBAAA,CAAA;AACT;;;;"}

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":"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"}

package/types/flexbox/FluidGrid.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-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,6 +0,0 @@
-/// <reference types="react" />
-import { FluidGridProps } from "./FluidGrid";
-export declare const FluidGridLayout: {
-    (props: FluidGridProps): 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 | undefined;
-    style?: CSSProperties | undefined;
-}) => {
-    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;