@vuu-ui/vuu-layout 0.0.26

package/esm/flexbox/FlexboxLayout.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { Action } from '../layout-action.js';
+import { useLayoutProviderDispatch } from '../layout-provider/LayoutProvider.js';
+import '../layout-provider/LayoutProviderContext.js';
+import { registerComponent } from '../registry/ComponentRegistry.js';
+import Flexbox from './Flexbox.js';
+
+const FlexboxLayout = function FlexboxLayout2(props) {
+  const { path } = props;
+  const dispatch = useLayoutProviderDispatch();
+  const handleSplitterMoved = useCallback(
+    (sizes) => {
+      dispatch({
+        type: Action.SPLITTER_RESIZE,
+        path,
+        sizes
+      });
+    },
+    [dispatch, path]
+  );
+  return /* @__PURE__ */ jsx(Flexbox, { ...props, onSplitterMoved: handleSplitterMoved });
+};
+FlexboxLayout.displayName = "Flexbox";
+registerComponent("Flexbox", FlexboxLayout, "container");
+
+export { FlexboxLayout };
+//# sourceMappingURL=FlexboxLayout.js.map

package/esm/flexbox/FlexboxLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexboxLayout.js","sources":["../../src/flexbox/FlexboxLayout.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Action } from \"../layout-action\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { SplitterResizeAction } from \"../layout-reducer\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport Flexbox from \"./Flexbox\";\nimport { FlexboxLayoutProps } from \"./flexboxTypes\";\n\nexport const FlexboxLayout = function FlexboxLayout(props: FlexboxLayoutProps) {\n  const { path } = props;\n  const dispatch = useLayoutProviderDispatch();\n\n  const handleSplitterMoved = useCallback(\n    (sizes) => {\n      dispatch({\n        type: Action.SPLITTER_RESIZE,\n        path,\n        sizes,\n      } as SplitterResizeAction);\n    },\n    [dispatch, path]\n  );\n\n  return <Flexbox {...props} onSplitterMoved={handleSplitterMoved} />;\n};\nFlexboxLayout.displayName = \"Flexbox\";\n\nregisterComponent(\"Flexbox\", FlexboxLayout, \"container\");\n"],"names":["FlexboxLayout"],"mappings":";;;;;;;;AAQa,MAAA,aAAA,GAAgB,SAASA,cAAAA,CAAc,KAA2B,EAAA;AAC7E,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA,CAAA;AACjB,EAAA,MAAM,WAAW,yBAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,KAAU,KAAA;AACT,MAAS,QAAA,CAAA;AAAA,QACP,MAAM,MAAO,CAAA,eAAA;AAAA,QACb,IAAA;AAAA,QACA,KAAA;AAAA,OACuB,CAAA,CAAA;AAAA,KAC3B;AAAA,IACA,CAAC,UAAU,IAAI,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBAAQ,GAAA,CAAA,OAAA,EAAA,EAAS,GAAG,KAAA,EAAO,iBAAiB,mBAAqB,EAAA,CAAA,CAAA;AACnE,EAAA;AACA,aAAA,CAAc,WAAc,GAAA,SAAA,CAAA;AAE5B,iBAAkB,CAAA,SAAA,EAAW,eAAe,WAAW,CAAA;;;;"}

package/esm/flexbox/FluidGrid.css.js

@@ -0,0 +1,4 @@
+var fluidGridCss = ":root {\n  --hw-space-unit: 4px;\n  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);\n}\n\n.hwFluidGrid {\n  --gap: var(--gutter-width);\n\n  display: flex;\n  gap: calc(var(--grid-gap) * var(--hw-space-unit));\n  flex-wrap: wrap;\n  padding: 0;\n}\n\n.hwFluidGrid > * {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --gutter-count: calc(var(--parent-col-count) - 1);\n  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));\n  --available-width: calc(100% - var(--total-gutter-width));\n\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  position: relative;\n}\n\n.hwFluidGrid > *:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dashed 2px blue;\n}\n\n.hwFluidGrid > [data-xs] {\n  --internal-gutter-count: calc(var(--col-span) - 1);\n  --percent-width: calc(var(--col-span) / var(--parent-col-count));\n  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));\n  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));\n  flex-grow: 0;\n}\n\n.hwFluidGrid > [data-xs='1'] {\n  --col-span: 1;\n}\n.hwFluidGrid > [data-xs='2'] {\n  --col-span: 2;\n}\n.hwFluidGrid > [data-xs='3'] {\n  --col-span: 3;\n}\n\n.hwFluidGrid > [data-xs='4'] {\n  --col-span: 4;\n}\n\n.hwFluidGrid > [data-xs='6'] {\n  --col-span: 6;\n}\n\n.hwFluidGrid > [data-xs='8'] {\n  --col-span: 8;\n}\n\n.hwFluidGrid > [data-xs='9'] {\n  --col-span: 9;\n}\n.hwFluidGrid > [data-xs='10'] {\n  --col-span: 10;\n}\n.hwFluidGrid > [data-xs='11'] {\n  --col-span: 11;\n}\n\n.hwFluidGrid > [data-xs='12'] {\n  --col-span: 12;\n}\n\n@media (min-width: 600px) {\n  .hwFluidGrid > [data-sm='1'] {\n    --col-span: 1;\n  }\n  .hwFluidGrid > [data-sm='2'] {\n    --col-span: 2;\n  }\n\n  .hwFluidGrid > [data-sm='3'] {\n    --col-span: 3;\n  }\n\n  .hwFluidGrid > [data-sm='4'] {\n    --col-span: 4;\n  }\n\n  .hwFluidGrid > [data-sm='6'] {\n    --col-span: 6;\n  }\n\n  .hwFluidGrid > [data-sm='8'] {\n    --col-span: 8;\n  }\n  .hwFluidGrid > [data-sm='9'] {\n    --col-span: 9;\n  }\n  .hwFluidGrid > [data-sm='10'] {\n    --col-span: 10;\n  }\n  .hwFluidGrid > [data-sm='11'] {\n    --col-span: 11;\n  }\n  .hwFluidGrid > [data-sm='12'] {\n    --col-span: 12;\n  }\n}\n\n/* Display the grid background */\n\n.hwFluidGrid-show-grid {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);\n  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));\n  --grid-available-width: calc(100% - var(--grid-total-gutter-width));\n  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));\n  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));\n  background: repeating-linear-gradient(\n    to right,\n    var(--hw-fluid-grid-col-bg) 0,\n    var(--hw-fluid-grid-col-bg) var(--column-width),\n    white var(--column-width),\n    white calc(var(--column-width) + var(--gutter-width))\n  );\n}\n";
+
+export { fluidGridCss as default };
+//# sourceMappingURL=FluidGrid.css.js.map

package/esm/flexbox/FluidGrid.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluidGrid.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/flexbox/FluidGrid.js

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { registerComponent } from '../registry/ComponentRegistry.js';
+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

@@ -0,0 +1 @@
+{"version":3,"file":"FluidGridLayout.js","sources":["../../src/flexbox/FluidGridLayout.tsx"],"sourcesContent":["import { registerComponent } from '../registry/ComponentRegistry';\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/Splitter.css.js

@@ -0,0 +1,4 @@
+var splitterCss = ".vuuSplitter {\n  --splitter-background: var(--salt-separable-secondary-borderColor);\n  --splitter-borderColor: var(--salt-separable-secondary-borderColor);\n  --splitter-borderStyle: none;\n  --splitter-borderWidth: 0;\n  --splitter-size: 3px;\n\n  align-items: center;\n  background-color: var(--splitter-background);\n  border-color: var(--splitter-borderColor);\n  border-style: var(--splitter-borderStyle);\n  border-width: var(--splitter-borderWidth);\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  outline: none;\n  z-index: 1;\n}\n\n.vuuSplitter:hover {\n  --splitter-background: var(--salt-separable-primary-borderColor);\n}\n\n.vuuSplitter-active {\n  --splitter-background: var(--salt-separable-primary-borderColor);\n}\n\n.vuuSplitter-column {\n  cursor: ns-resize;\n  height: var(--splitter-size);\n}\n\n.vuuSplitter:not(.vuuSplitter-column) {\n  cursor: ew-resize;\n  width: var(--splitter-size);\n}\n\n.vuuSplitter:before {\n  border: none;\n  border-radius: 0;\n  content: '';\n  display: block;\n  padding: 0;\n}\n\n.vuuSplitter-grab-zone {\n  position: absolute;\n  background-color: rgba(255, 0, 0, 0.01);\n  cursor: inherit;\n}\n\n.vuuSplitter-column .vuuSplitter-grab-zone {\n  left: 0;\n  right: 0;\n  top: -5px;\n  bottom: -5px;\n}\n\n.vuuSplitter:not(.vuuSplitter-column) .vuuSplitter-grab-zone {\n  left: -5px;\n  right: -5px;\n  top: 0;\n  bottom: 0;\n}\n\n.vuuSplitter-active:not(.vuuSplitter-column) .vuuSplitter-grab-zone {\n  background-color: rgba(255,255,255,.05);\n  left: -150px;\n  right: -150px;\n}\n\n\n.vuuSplitter:not(.vuuSplitter-column):before {\n  width: 1px;\n  height: 10px;\n  background: linear-gradient(\n    to bottom,\n    var(--grey900) 10%,\n    transparent 10%,\n    transparent 30%,\n    var(--grey900) 30%,\n    var(--grey900) 40%,\n    transparent 40%,\n    transparent 60%,\n    var(--grey900) 60%,\n    var(--grey900) 70%,\n    transparent 70%,\n    transparent 90%,\n    var(--grey900) 90%\n  );\n}\n\n.vuuSplitter-active.vuuSplitter-column:before {\n  background: linear-gradient(\n    to right,\n    #ffffff 10%,\n    transparent 10%,\n    transparent 30%,\n    #ffffff 30%,\n    #ffffff 40%,\n    transparent 40%,\n    transparent 60%,\n    #ffffff 60%,\n    #ffffff 70%,\n    transparent 70%,\n    transparent 90%,\n    #ffffff 90%\n  );\n}\n\n.vuuSplitter-active:not(.vuuSplitter-column):before {\n  background: linear-gradient(\n    to bottom,\n    #ffffff 10%,\n    transparent 10%,\n    transparent 30%,\n    #ffffff 30%,\n    #ffffff 40%,\n    transparent 40%,\n    transparent 60%,\n    #ffffff 60%,\n    #ffffff 70%,\n    transparent 70%,\n    transparent 90%,\n    #ffffff 90%\n  );\n}\n\n.vuuSplitter-column:before {\n  width: 10px;\n  height: 1px;\n  background: linear-gradient(\n    to right,\n    var(--grey900) 10%,\n    transparent 10%,\n    transparent 30%,\n    var(--grey900) 30%,\n    var(--grey900) 40%,\n    transparent 40%,\n    transparent 60%,\n    var(--grey900) 60%,\n    var(--grey900) 70%,\n    transparent 70%,\n    transparent 90%,\n    var(--grey900) 90%\n  );\n}\n";
+
+export { splitterCss as default };
+//# sourceMappingURL=Splitter.css.js.map

package/esm/flexbox/Splitter.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/flexbox/Splitter.js

@@ -0,0 +1,120 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import React, { useRef, useState, useCallback } from 'react';
+import splitterCss from './Splitter.css.js';
+
+const classBase = "vuuSplitter";
+const Splitter = React.memo(function Splitter2({
+  column,
+  index,
+  onDrag,
+  onDragEnd,
+  onDragStart,
+  style
+}) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-splitter",
+    css: splitterCss,
+    window: targetWindow
+  });
+  const ignoreClick = useRef();
+  const rootRef = useRef(null);
+  const lastPos = useRef(0);
+  const [active, setActive] = useState(false);
+  const handleKeyDownDrag = useCallback(
+    ({ key, shiftKey }) => {
+      const distance = shiftKey ? 10 : 1;
+      if (column && key === "ArrowDown") {
+        onDrag(index, distance);
+      } else if (column && key === "ArrowUp") {
+        onDrag(index, -distance);
+      } else if (!column && key === "ArrowLeft") {
+        onDrag(index, -distance);
+      } else if (!column && key === "ArrowRight") {
+        onDrag(index, distance);
+      }
+    },
+    [column, index, onDrag]
+  );
+  const handleKeyDownInitDrag = useCallback(
+    (evt) => {
+      const { key } = evt;
+      const horizontalMove = key === "ArrowLeft" || key === "ArrowRight";
+      const verticalMove = key === "ArrowUp" || key === "ArrowDown";
+      if (column && verticalMove || !column && horizontalMove) {
+        onDragStart(index);
+        handleKeyDownDrag(evt);
+        keyDownHandlerRef.current = handleKeyDownDrag;
+      }
+    },
+    [column, handleKeyDownDrag, index, onDragStart]
+  );
+  const keyDownHandlerRef = useRef(handleKeyDownInitDrag);
+  const handleKeyDown = (evt) => keyDownHandlerRef.current(evt);
+  const handleMouseMove = useCallback(
+    (e) => {
+      ignoreClick.current = true;
+      const pos = e[column ? "clientY" : "clientX"];
+      const diff = pos - lastPos.current;
+      if (pos && pos !== lastPos.current) {
+        onDrag(index, diff);
+      }
+      lastPos.current = pos;
+    },
+    [column, index, onDrag]
+  );
+  const handleMouseUp = useCallback(() => {
+    window.removeEventListener("mousemove", handleMouseMove, false);
+    window.removeEventListener("mouseup", handleMouseUp, false);
+    onDragEnd();
+    setActive(false);
+    rootRef.current?.focus();
+  }, [handleMouseMove, onDragEnd, setActive]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      lastPos.current = column ? e.clientY : e.clientX;
+      onDragStart(index);
+      window.addEventListener("mousemove", handleMouseMove, false);
+      window.addEventListener("mouseup", handleMouseUp, false);
+      e.preventDefault();
+      setActive(true);
+    },
+    [column, handleMouseMove, handleMouseUp, index, onDragStart, setActive]
+  );
+  const handleClick = () => {
+    if (ignoreClick.current) {
+      ignoreClick.current = false;
+    } else {
+      rootRef.current?.focus();
+    }
+  };
+  const handleBlur = () => {
+    keyDownHandlerRef.current = handleKeyDownInitDrag;
+  };
+  const className = cx(classBase, {
+    [`${classBase}-active`]: active,
+    [`${classBase}-column`]: column
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-splitter": true,
+      ref: rootRef,
+      role: "separator",
+      style,
+      onBlur: handleBlur,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onMouseDown: handleMouseDown,
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsx("div", { className: `${classBase}-grab-zone` })
+    }
+  );
+});
+
+export { Splitter };
+//# sourceMappingURL=Splitter.js.map

package/esm/flexbox/Splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.js","sources":["../../src/flexbox/Splitter.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, {\n  HTMLAttributes,\n  KeyboardEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport splitterCss from \"./Splitter.css\";\n\nconst classBase = \"vuuSplitter\";\n\nexport type SplitterDragStartHandler = (index: number) => void;\nexport type SplitterDragHandler = (index: number, distance: number) => void;\nexport type SplitterDragEndHandler = () => void;\n\nexport interface SplitterProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onDrag\" | \"onDragStart\"> {\n  //TODO change to alignment (vertical | horizontal)\n  column: boolean;\n  index: number;\n  onDragStart: SplitterDragStartHandler;\n  onDrag: SplitterDragHandler;\n  onDragEnd: SplitterDragEndHandler;\n}\n\nexport const Splitter = React.memo(function Splitter({\n  column,\n  index,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  style,\n}: SplitterProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-splitter\",\n    css: splitterCss,\n    window: targetWindow,\n  });\n\n  const ignoreClick = useRef<boolean>();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const lastPos = useRef<number>(0);\n\n  const [active, setActive] = useState(false);\n\n  const handleKeyDownDrag = useCallback(\n    ({ key, shiftKey }) => {\n      const distance = shiftKey ? 10 : 1;\n      if (column && key === \"ArrowDown\") {\n        onDrag(index, distance);\n      } else if (column && key === \"ArrowUp\") {\n        onDrag(index, -distance);\n      } else if (!column && key === \"ArrowLeft\") {\n        onDrag(index, -distance);\n      } else if (!column && key === \"ArrowRight\") {\n        onDrag(index, distance);\n      }\n    },\n    [column, index, onDrag]\n  );\n\n  const handleKeyDownInitDrag = useCallback(\n    (evt) => {\n      const { key } = evt;\n      const horizontalMove = key === \"ArrowLeft\" || key === \"ArrowRight\";\n      const verticalMove = key === \"ArrowUp\" || key === \"ArrowDown\";\n      if ((column && verticalMove) || (!column && horizontalMove)) {\n        onDragStart(index);\n        handleKeyDownDrag(evt);\n        keyDownHandlerRef.current = handleKeyDownDrag;\n      }\n    },\n    [column, handleKeyDownDrag, index, onDragStart]\n  );\n\n  const keyDownHandlerRef = useRef(handleKeyDownInitDrag);\n  const handleKeyDown = (evt: KeyboardEvent) => keyDownHandlerRef.current(evt);\n\n  const handleMouseMove = useCallback(\n    (e) => {\n      ignoreClick.current = true;\n      const pos = e[column ? \"clientY\" : \"clientX\"];\n      const diff = pos - lastPos.current;\n      if (pos && pos !== lastPos.current) {\n        onDrag(index, diff);\n      }\n      lastPos.current = pos;\n    },\n    [column, index, onDrag]\n  );\n\n  const handleMouseUp = useCallback(() => {\n    window.removeEventListener(\"mousemove\", handleMouseMove, false);\n    window.removeEventListener(\"mouseup\", handleMouseUp, false);\n    onDragEnd();\n    setActive(false);\n    rootRef.current?.focus();\n  }, [handleMouseMove, onDragEnd, setActive]);\n\n  const handleMouseDown = useCallback(\n    (e) => {\n      lastPos.current = column ? e.clientY : e.clientX;\n      onDragStart(index);\n      window.addEventListener(\"mousemove\", handleMouseMove, false);\n      window.addEventListener(\"mouseup\", handleMouseUp, false);\n      e.preventDefault();\n      setActive(true);\n    },\n    [column, handleMouseMove, handleMouseUp, index, onDragStart, setActive]\n  );\n\n  const handleClick = () => {\n    if (ignoreClick.current) {\n      ignoreClick.current = false;\n    } else {\n      rootRef.current?.focus();\n    }\n  };\n\n  const handleBlur = () => {\n    keyDownHandlerRef.current = handleKeyDownInitDrag;\n  };\n\n  const className = cx(classBase, {\n    [`${classBase}-active`]: active,\n    [`${classBase}-column`]: column,\n  });\n  return (\n    <div\n      className={className}\n      data-splitter\n      ref={rootRef}\n      role=\"separator\"\n      style={style}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleMouseDown}\n      tabIndex={0}\n    >\n      <div className={`${classBase}-grab-zone`} />\n    </div>\n  );\n});\n"],"names":["Splitter"],"mappings":";;;;;;;AAaA,MAAM,SAAY,GAAA,aAAA,CAAA;AAgBX,MAAM,QAAW,GAAA,KAAA,CAAM,IAAK,CAAA,SAASA,SAAS,CAAA;AAAA,EACnD,MAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AACF,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,cAAc,MAAgB,EAAA,CAAA;AACpC,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA,OAAA,GAAU,OAAe,CAAC,CAAA,CAAA;AAEhC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE1C,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,EAAE,GAAK,EAAA,QAAA,EAAe,KAAA;AACrB,MAAM,MAAA,QAAA,GAAW,WAAW,EAAK,GAAA,CAAA,CAAA;AACjC,MAAI,IAAA,MAAA,IAAU,QAAQ,WAAa,EAAA;AACjC,QAAA,MAAA,CAAO,OAAO,QAAQ,CAAA,CAAA;AAAA,OACxB,MAAA,IAAW,MAAU,IAAA,GAAA,KAAQ,SAAW,EAAA;AACtC,QAAO,MAAA,CAAA,KAAA,EAAO,CAAC,QAAQ,CAAA,CAAA;AAAA,OACd,MAAA,IAAA,CAAC,MAAU,IAAA,GAAA,KAAQ,WAAa,EAAA;AACzC,QAAO,MAAA,CAAA,KAAA,EAAO,CAAC,QAAQ,CAAA,CAAA;AAAA,OACd,MAAA,IAAA,CAAC,MAAU,IAAA,GAAA,KAAQ,YAAc,EAAA;AAC1C,QAAA,MAAA,CAAO,OAAO,QAAQ,CAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAQ,GAAA,GAAA,CAAA;AAChB,MAAM,MAAA,cAAA,GAAiB,GAAQ,KAAA,WAAA,IAAe,GAAQ,KAAA,YAAA,CAAA;AACtD,MAAM,MAAA,YAAA,GAAe,GAAQ,KAAA,SAAA,IAAa,GAAQ,KAAA,WAAA,CAAA;AAClD,MAAA,IAAK,MAAU,IAAA,YAAA,IAAkB,CAAC,MAAA,IAAU,cAAiB,EAAA;AAC3D,QAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,QAAA,iBAAA,CAAkB,GAAG,CAAA,CAAA;AACrB,QAAA,iBAAA,CAAkB,OAAU,GAAA,iBAAA,CAAA;AAAA,OAC9B;AAAA,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,iBAAmB,EAAA,KAAA,EAAO,WAAW,CAAA;AAAA,GAChD,CAAA;AAEA,EAAM,MAAA,iBAAA,GAAoB,OAAO,qBAAqB,CAAA,CAAA;AACtD,EAAA,MAAM,aAAgB,GAAA,CAAC,GAAuB,KAAA,iBAAA,CAAkB,QAAQ,GAAG,CAAA,CAAA;AAE3E,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,CAAM,KAAA;AACL,MAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AACtB,MAAA,MAAM,GAAM,GAAA,CAAA,CAAE,MAAS,GAAA,SAAA,GAAY,SAAS,CAAA,CAAA;AAC5C,MAAM,MAAA,IAAA,GAAO,MAAM,OAAQ,CAAA,OAAA,CAAA;AAC3B,MAAI,IAAA,GAAA,IAAO,GAAQ,KAAA,OAAA,CAAQ,OAAS,EAAA;AAClC,QAAA,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,OACpB;AACA,MAAA,OAAA,CAAQ,OAAU,GAAA,GAAA,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,MAAQ,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAO,MAAA,CAAA,mBAAA,CAAoB,WAAa,EAAA,eAAA,EAAiB,KAAK,CAAA,CAAA;AAC9D,IAAO,MAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,aAAA,EAAe,KAAK,CAAA,CAAA;AAC1D,IAAU,SAAA,EAAA,CAAA;AACV,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAA,OAAA,CAAQ,SAAS,KAAM,EAAA,CAAA;AAAA,GACtB,EAAA,CAAC,eAAiB,EAAA,SAAA,EAAW,SAAS,CAAC,CAAA,CAAA;AAE1C,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,CAAM,KAAA;AACL,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,GAAS,CAAE,CAAA,OAAA,GAAU,CAAE,CAAA,OAAA,CAAA;AACzC,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,MAAO,MAAA,CAAA,gBAAA,CAAiB,WAAa,EAAA,eAAA,EAAiB,KAAK,CAAA,CAAA;AAC3D,MAAO,MAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,aAAA,EAAe,KAAK,CAAA,CAAA;AACvD,MAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAAA,IACA,CAAC,MAAQ,EAAA,eAAA,EAAiB,aAAe,EAAA,KAAA,EAAO,aAAa,SAAS,CAAA;AAAA,GACxE,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,OAAA,CAAQ,SAAS,KAAM,EAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,iBAAA,CAAkB,OAAU,GAAA,qBAAA,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA;AAAA,IAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,GAC1B,CAAA,CAAA;AACD,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,eAAa,EAAA,IAAA;AAAA,MACb,GAAK,EAAA,OAAA;AAAA,MACL,IAAK,EAAA,WAAA;AAAA,MACL,KAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,WAAa,EAAA,eAAA;AAAA,MACb,QAAU,EAAA,CAAA;AAAA,MAEV,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAc,UAAA,CAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC5C,CAAA;AAEJ,CAAC;;;;"}

package/esm/flexbox/flexbox-utils.js

@@ -0,0 +1,103 @@
+import { getIntrinsicSize, hasUnboundedFlexStyle } from '../layout-reducer/flexUtils.js';
+import 'react';
+import { getProp } from '../utils/propUtils.js';
+
+const NO_INTRINSIC_SIZE = {};
+const SPLITTER = 1;
+const PLACEHOLDER = 2;
+const isIntrinsicallySized = (item) => typeof item.intrinsicSize === "number";
+const getBreakPointValues = (breakPoints, component) => {
+  const values = {};
+  breakPoints.forEach((breakPoint) => {
+    values[breakPoint] = getProp(component, breakPoint);
+  });
+  return values;
+};
+const gatherChildMeta = (children, dimension, breakPoints) => {
+  return children.map((child, index) => {
+    const resizeable = getProp(child, "resizeable");
+    const { [dimension]: intrinsicSize } = getIntrinsicSize(child) ?? NO_INTRINSIC_SIZE;
+    const flexOpen = hasUnboundedFlexStyle(child);
+    if (breakPoints) {
+      return {
+        index,
+        flexOpen,
+        intrinsicSize,
+        resizeable,
+        ...getBreakPointValues(breakPoints, child)
+      };
+    } else {
+      return { index, flexOpen, intrinsicSize, resizeable };
+    }
+  });
+};
+const findSplitterAndPlaceholderPositions = (childMeta) => {
+  const count = childMeta.length;
+  const allIntrinsic = childMeta.every(isIntrinsicallySized);
+  const splitterPositions = Array(count).fill(0);
+  if (allIntrinsic && count > 0) {
+    splitterPositions[0] = PLACEHOLDER;
+    splitterPositions[count - 1] = PLACEHOLDER;
+  }
+  if (count < 2) {
+    return splitterPositions;
+  } else {
+    for (let i = 0, resizeablesLeft = 0; i < count - 1; i++) {
+      if (childMeta[i].resizeable && !resizeablesLeft) {
+        resizeablesLeft = SPLITTER;
+      }
+      splitterPositions[i] += resizeablesLeft;
+    }
+    for (let i = count - 1; i > 0; i--) {
+      if (splitterPositions[i] & SPLITTER) {
+        splitterPositions[i] -= SPLITTER;
+      }
+      if (childMeta[i].resizeable) {
+        break;
+      }
+    }
+    return splitterPositions;
+  }
+};
+const identifyResizeParties = (contentMeta, idx) => {
+  const idx1 = getLeadingResizeablePos(contentMeta, idx);
+  const idx2 = getTrailingResizeablePos(contentMeta, idx);
+  const participants = idx1 !== -1 && idx2 !== -1 ? [idx1, idx2] : void 0;
+  const bystanders = identifyResizeBystanders(contentMeta, participants);
+  return [participants, bystanders];
+};
+function identifyResizeBystanders(contentMeta, participants) {
+  if (participants) {
+    const bystanders = [];
+    for (let i = 0; i < contentMeta.length; i++) {
+      if (contentMeta[i].flexOpen && !participants.includes(i)) {
+        bystanders.push(i);
+      }
+    }
+    return bystanders;
+  }
+}
+function getLeadingResizeablePos(contentMeta, idx) {
+  let pos = idx, resizeable = false;
+  while (pos >= 1 && !resizeable) {
+    pos = pos - 1;
+    resizeable = isResizeable(contentMeta, pos);
+  }
+  return pos;
+}
+function getTrailingResizeablePos(contentMeta, idx) {
+  let pos = idx, resizeable = false;
+  const count = contentMeta.length;
+  while (pos < count - 1 && !resizeable) {
+    pos = pos + 1;
+    resizeable = isResizeable(contentMeta, pos);
+  }
+  return pos === count ? -1 : pos;
+}
+function isResizeable(contentMeta, idx) {
+  const { placeholder, splitter, resizeable, intrinsicSize } = contentMeta[idx];
+  return Boolean(!splitter && !intrinsicSize && (placeholder || resizeable));
+}
+
+export { PLACEHOLDER, SPLITTER, findSplitterAndPlaceholderPositions, gatherChildMeta, identifyResizeParties };
+//# sourceMappingURL=flexbox-utils.js.map

package/esm/flexbox/flexbox-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexbox-utils.js","sources":["../../src/flexbox/flexbox-utils.ts"],"sourcesContent":["import { ReactElement } from \"react\";\nimport {\n  getIntrinsicSize,\n  hasUnboundedFlexStyle,\n} from \"../layout-reducer/flexUtils\";\nimport { getProp } from \"../utils\";\nimport type { BreakPoint, ContentMeta } from \"./flexboxTypes\";\n\nconst NO_INTRINSIC_SIZE: {\n  height?: number;\n  width?: number;\n} = {};\n\nexport const SPLITTER = 1;\nexport const PLACEHOLDER = 2;\n\nconst isIntrinsicallySized = (item: ContentMeta) =>\n  typeof item.intrinsicSize === \"number\";\n\nconst getBreakPointValues = (\n  breakPoints: BreakPoint[],\n  component: ReactElement\n) => {\n  const values: { [key: string]: number | undefined } = {};\n  breakPoints.forEach((breakPoint) => {\n    values[breakPoint] = getProp(component, breakPoint);\n  });\n  return values;\n};\n\nexport const gatherChildMeta = (\n  children: ReactElement[],\n  dimension: \"width\" | \"height\",\n  breakPoints?: BreakPoint[]\n) => {\n  return children.map((child, index) => {\n    const resizeable = getProp(child, \"resizeable\");\n    const { [dimension]: intrinsicSize } =\n      getIntrinsicSize(child) ?? NO_INTRINSIC_SIZE;\n    const flexOpen = hasUnboundedFlexStyle(child);\n    if (breakPoints) {\n      return {\n        index,\n        flexOpen,\n        intrinsicSize,\n        resizeable,\n        ...getBreakPointValues(breakPoints, child),\n      };\n    } else {\n      return { index, flexOpen, intrinsicSize, resizeable };\n    }\n  });\n};\n\n// Splitters are inserted AFTER the associated index, so\n// never a splitter in last position.\n// Placeholder goes before (first) OR after(last) index\nexport const findSplitterAndPlaceholderPositions = (\n  childMeta: ContentMeta[]\n) => {\n  const count = childMeta.length;\n  const allIntrinsic = childMeta.every(isIntrinsicallySized);\n  const splitterPositions = Array(count).fill(0);\n  if (allIntrinsic && count > 0) {\n    splitterPositions[0] = PLACEHOLDER;\n    splitterPositions[count - 1] = PLACEHOLDER;\n  }\n  if (count < 2) {\n    return splitterPositions;\n  } else {\n    // 1) From the left, check each item.\n    // Once we hit a resizable item, set this index and all subsequent indices,\n    // except for last, to SPLITTER\n    for (let i = 0, resizeablesLeft = 0; i < count - 1; i++) {\n      if (childMeta[i].resizeable && !resizeablesLeft) {\n        resizeablesLeft = SPLITTER;\n      }\n      splitterPositions[i] += resizeablesLeft;\n    }\n    // 2) Now check from the right. Undo splitter insertion until we reach a point\n    // where there is a resizeable to our right.\n    for (let i = count - 1; i > 0; i--) {\n      if (splitterPositions[i] & SPLITTER) {\n        splitterPositions[i] -= SPLITTER;\n      }\n      if (childMeta[i].resizeable) {\n        break;\n      }\n    }\n    return splitterPositions;\n  }\n};\n\nexport const identifyResizeParties = (\n  contentMeta: ContentMeta[],\n  idx: number\n) => {\n  const idx1 = getLeadingResizeablePos(contentMeta, idx);\n  const idx2 = getTrailingResizeablePos(contentMeta, idx);\n  const participants = idx1 !== -1 && idx2 !== -1 ? [idx1, idx2] : undefined;\n  const bystanders = identifyResizeBystanders(contentMeta, participants);\n  return [participants, bystanders];\n};\n\nfunction identifyResizeBystanders(\n  contentMeta: ContentMeta[],\n  participants?: number[]\n) {\n  if (participants) {\n    const bystanders = [];\n    for (let i = 0; i < contentMeta.length; i++) {\n      if (contentMeta[i].flexOpen && !participants.includes(i)) {\n        bystanders.push(i);\n      }\n    }\n    return bystanders;\n  }\n}\n\nfunction getLeadingResizeablePos(contentMeta: ContentMeta[], idx: number) {\n  let pos = idx,\n    resizeable = false;\n  while (pos >= 1 && !resizeable) {\n    pos = pos - 1;\n    resizeable = isResizeable(contentMeta, pos);\n  }\n  return pos;\n}\n\nfunction getTrailingResizeablePos(contentMeta: ContentMeta[], idx: number) {\n  let pos = idx,\n    resizeable = false;\n  const count = contentMeta.length;\n  while (pos < count - 1 && !resizeable) {\n    pos = pos + 1;\n    resizeable = isResizeable(contentMeta, pos);\n  }\n  return pos === count ? -1 : pos;\n}\n\nfunction isResizeable(contentMeta: ContentMeta[], idx: number): boolean {\n  const { placeholder, splitter, resizeable, intrinsicSize } = contentMeta[idx];\n  return Boolean(!splitter && !intrinsicSize && (placeholder || resizeable));\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,oBAGF,EAAC,CAAA;AAEE,MAAM,QAAW,GAAA,EAAA;AACjB,MAAM,WAAc,GAAA,EAAA;AAE3B,MAAM,oBAAuB,GAAA,CAAC,IAC5B,KAAA,OAAO,KAAK,aAAkB,KAAA,QAAA,CAAA;AAEhC,MAAM,mBAAA,GAAsB,CAC1B,WAAA,EACA,SACG,KAAA;AACH,EAAA,MAAM,SAAgD,EAAC,CAAA;AACvD,EAAY,WAAA,CAAA,OAAA,CAAQ,CAAC,UAAe,KAAA;AAClC,IAAA,MAAA,CAAO,UAAU,CAAA,GAAI,OAAQ,CAAA,SAAA,EAAW,UAAU,CAAA,CAAA;AAAA,GACnD,CAAA,CAAA;AACD,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEO,MAAM,eAAkB,GAAA,CAC7B,QACA,EAAA,SAAA,EACA,WACG,KAAA;AACH,EAAA,OAAO,QAAS,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAU,KAAA;AACpC,IAAM,MAAA,UAAA,GAAa,OAAQ,CAAA,KAAA,EAAO,YAAY,CAAA,CAAA;AAC9C,IAAM,MAAA,EAAE,CAAC,SAAS,GAAG,eACnB,GAAA,gBAAA,CAAiB,KAAK,CAAK,IAAA,iBAAA,CAAA;AAC7B,IAAM,MAAA,QAAA,GAAW,sBAAsB,KAAK,CAAA,CAAA;AAC5C,IAAA,IAAI,WAAa,EAAA;AACf,MAAO,OAAA;AAAA,QACL,KAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,UAAA;AAAA,QACA,GAAG,mBAAoB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,OAC3C,CAAA;AAAA,KACK,MAAA;AACL,MAAA,OAAO,EAAE,KAAA,EAAO,QAAU,EAAA,aAAA,EAAe,UAAW,EAAA,CAAA;AAAA,KACtD;AAAA,GACD,CAAA,CAAA;AACH,EAAA;AAKa,MAAA,mCAAA,GAAsC,CACjD,SACG,KAAA;AACH,EAAA,MAAM,QAAQ,SAAU,CAAA,MAAA,CAAA;AACxB,EAAM,MAAA,YAAA,GAAe,SAAU,CAAA,KAAA,CAAM,oBAAoB,CAAA,CAAA;AACzD,EAAA,MAAM,iBAAoB,GAAA,KAAA,CAAM,KAAK,CAAA,CAAE,KAAK,CAAC,CAAA,CAAA;AAC7C,EAAI,IAAA,YAAA,IAAgB,QAAQ,CAAG,EAAA;AAC7B,IAAA,iBAAA,CAAkB,CAAC,CAAI,GAAA,WAAA,CAAA;AACvB,IAAkB,iBAAA,CAAA,KAAA,GAAQ,CAAC,CAAI,GAAA,WAAA,CAAA;AAAA,GACjC;AACA,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAO,OAAA,iBAAA,CAAA;AAAA,GACF,MAAA;AAIL,IAAA,KAAA,IAAS,IAAI,CAAG,EAAA,eAAA,GAAkB,GAAG,CAAI,GAAA,KAAA,GAAQ,GAAG,CAAK,EAAA,EAAA;AACvD,MAAA,IAAI,SAAU,CAAA,CAAC,CAAE,CAAA,UAAA,IAAc,CAAC,eAAiB,EAAA;AAC/C,QAAkB,eAAA,GAAA,QAAA,CAAA;AAAA,OACpB;AACA,MAAA,iBAAA,CAAkB,CAAC,CAAK,IAAA,eAAA,CAAA;AAAA,KAC1B;AAGA,IAAA,KAAA,IAAS,CAAI,GAAA,KAAA,GAAQ,CAAG,EAAA,CAAA,GAAI,GAAG,CAAK,EAAA,EAAA;AAClC,MAAI,IAAA,iBAAA,CAAkB,CAAC,CAAA,GAAI,QAAU,EAAA;AACnC,QAAA,iBAAA,CAAkB,CAAC,CAAK,IAAA,QAAA,CAAA;AAAA,OAC1B;AACA,MAAI,IAAA,SAAA,CAAU,CAAC,CAAA,CAAE,UAAY,EAAA;AAC3B,QAAA,MAAA;AAAA,OACF;AAAA,KACF;AACA,IAAO,OAAA,iBAAA,CAAA;AAAA,GACT;AACF,EAAA;AAEa,MAAA,qBAAA,GAAwB,CACnC,WAAA,EACA,GACG,KAAA;AACH,EAAM,MAAA,IAAA,GAAO,uBAAwB,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AACrD,EAAM,MAAA,IAAA,GAAO,wBAAyB,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAe,SAAS,CAAM,CAAA,IAAA,IAAA,KAAS,KAAK,CAAC,IAAA,EAAM,IAAI,CAAI,GAAA,KAAA,CAAA,CAAA;AACjE,EAAM,MAAA,UAAA,GAAa,wBAAyB,CAAA,WAAA,EAAa,YAAY,CAAA,CAAA;AACrE,EAAO,OAAA,CAAC,cAAc,UAAU,CAAA,CAAA;AAClC,EAAA;AAEA,SAAS,wBAAA,CACP,aACA,YACA,EAAA;AACA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,MAAM,aAAa,EAAC,CAAA;AACpB,IAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,WAAA,CAAY,QAAQ,CAAK,EAAA,EAAA;AAC3C,MAAI,IAAA,WAAA,CAAY,CAAC,CAAE,CAAA,QAAA,IAAY,CAAC,YAAa,CAAA,QAAA,CAAS,CAAC,CAAG,EAAA;AACxD,QAAA,UAAA,CAAW,KAAK,CAAC,CAAA,CAAA;AAAA,OACnB;AAAA,KACF;AACA,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AACF,CAAA;AAEA,SAAS,uBAAA,CAAwB,aAA4B,GAAa,EAAA;AACxE,EAAI,IAAA,GAAA,GAAM,KACR,UAAa,GAAA,KAAA,CAAA;AACf,EAAO,OAAA,GAAA,IAAO,CAAK,IAAA,CAAC,UAAY,EAAA;AAC9B,IAAA,GAAA,GAAM,GAAM,GAAA,CAAA,CAAA;AACZ,IAAa,UAAA,GAAA,YAAA,CAAa,aAAa,GAAG,CAAA,CAAA;AAAA,GAC5C;AACA,EAAO,OAAA,GAAA,CAAA;AACT,CAAA;AAEA,SAAS,wBAAA,CAAyB,aAA4B,GAAa,EAAA;AACzE,EAAI,IAAA,GAAA,GAAM,KACR,UAAa,GAAA,KAAA,CAAA;AACf,EAAA,MAAM,QAAQ,WAAY,CAAA,MAAA,CAAA;AAC1B,EAAA,OAAO,GAAM,GAAA,KAAA,GAAQ,CAAK,IAAA,CAAC,UAAY,EAAA;AACrC,IAAA,GAAA,GAAM,GAAM,GAAA,CAAA,CAAA;AACZ,IAAa,UAAA,GAAA,YAAA,CAAa,aAAa,GAAG,CAAA,CAAA;AAAA,GAC5C;AACA,EAAO,OAAA,GAAA,KAAQ,QAAQ,CAAK,CAAA,GAAA,GAAA,CAAA;AAC9B,CAAA;AAEA,SAAS,YAAA,CAAa,aAA4B,GAAsB,EAAA;AACtE,EAAA,MAAM,EAAE,WAAa,EAAA,QAAA,EAAU,YAAY,aAAc,EAAA,GAAI,YAAY,GAAG,CAAA,CAAA;AAC5E,EAAA,OAAO,QAAQ,CAAC,QAAA,IAAY,CAAC,aAAA,KAAkB,eAAe,UAAW,CAAA,CAAA,CAAA;AAC3E;;;;"}

package/esm/flexbox/useResponsiveSizing.js

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1 @@
+{"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,CAC3B,GAAA,CAAC,YAAY,CAAA,GACb,EAAC;AAAA,IACP,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;;;;"}