@vuu-ui/vuu-layout 0.9.1 → 0.9.3

package/esm/layout-reducer/replace-layout-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"replace-layout-element.js","sources":["../../src/layout-reducer/replace-layout-element.ts"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Action } from '../layout-action';\nimport { getProp, getProps, nextStep } from '../utils';\nimport { ReplaceAction } from './layoutTypes';\nimport { applyLayoutProps, LayoutProps } from './layoutUtils';\n\nexport function replaceChild(model: ReactElement, { target, replacement }: ReplaceAction) {\n  return _replaceChild(model, target, replacement);\n}\n\nexport function _replaceChild(\n  model: ReactElement,\n  child: ReactElement,\n  replacement: ReactElement<LayoutProps>\n) {\n  const path = getProp(child, 'path');\n  const resizeable = getProp(child, 'resizeable');\n  const { style } = getProps(child);\n  const newChild =\n    applyLayoutProps(\n      React.cloneElement(replacement, {\n        resizeable,\n        style: {\n          ...style,\n          ...replacement.props.style\n        }\n      }),\n      path\n    );\n\n  return swapChild(model, child, newChild);\n}\n\nexport function swapChild(\n  model: ReactElement,\n  child: ReactElement,\n  replacement: ReactElement,\n  op?: 'maximize' | 'minimize' | 'restore'\n): ReactElement {\n  if (model === child) {\n    return replacement;\n  }\n  \n  const { idx, finalStep } = nextStep(getProp(model, 'path'), getProp(child, 'path'));\n  const children = model.props.children.slice();\n  \n  if (finalStep) {\n    if (!op) {\n      children[idx] = replacement;\n    } else if (op === Action.MINIMIZE) {\n      children[idx] = minimize(model, children[idx]);\n    } else if (op === Action.RESTORE) {\n      children[idx] = restore(children[idx]);\n    }\n  } else {\n    children[idx] = swapChild(children[idx], child, replacement, op);\n  }\n  return React.cloneElement(model, undefined, children);\n}\n\nfunction minimize(parent: ReactElement, child: ReactElement) {\n  const { style: parentStyle } = getProps(parent);\n  const { style: childStyle } = getProps(child);\n\n  const { width, height, flexBasis, flexShrink, flexGrow, ...rest } = childStyle;\n\n  const restoreStyle = {\n    width,\n    height,\n    flexBasis,\n    flexShrink,\n    flexGrow\n  };\n\n  const style = {\n    ...rest,\n    flexBasis: 0,\n    flexGrow: 0,\n    flexShrink: 0\n  };\n  const collapsed =\n    parentStyle.flexDirection === 'row'\n      ? 'vertical'\n      : parentStyle.flexDirection === 'column'\n      ? 'horizontal'\n      : false;\n\n  if (collapsed) {\n    return React.cloneElement(child, {\n      collapsed,\n      restoreStyle,\n      style\n    });\n  }\n  return child;\n}\n\nfunction restore(child: ReactElement) {\n  const { style: childStyle, restoreStyle } = getProps(child);\n\n  const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;\n\n  const style = {\n    ...rest,\n    ...restoreStyle\n  };\n\n  return React.cloneElement(child, {\n    collapsed: false,\n    style,\n    restoreStyle: undefined\n  });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"replace-layout-element.js","sources":["../../src/layout-reducer/replace-layout-element.ts"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { getProp, getProps, nextStep } from \"../utils\";\nimport { ReplaceAction } from \"./layoutTypes\";\nimport { applyLayoutProps, LayoutProps } from \"./layoutUtils\";\n\nexport function replaceChild(\n  model: ReactElement,\n  { target, replacement }: ReplaceAction,\n) {\n  return _replaceChild(model, target, replacement);\n}\n\nexport function _replaceChild(\n  model: ReactElement,\n  child: ReactElement,\n  replacement: ReactElement<LayoutProps>,\n) {\n  const path = getProp(child, \"path\");\n  const resizeable = getProp(child, \"resizeable\");\n  const { style } = getProps(child);\n  const newChild = applyLayoutProps(\n    React.cloneElement(replacement, {\n      resizeable,\n      style: {\n        ...style,\n        ...replacement.props.style,\n      },\n    }),\n    path,\n  );\n\n  return swapChild(model, child, newChild);\n}\n\nexport function swapChild(\n  model: ReactElement,\n  child: ReactElement,\n  replacement: ReactElement,\n  op?: \"collapse\" | \"expand\",\n): ReactElement {\n  if (model === child) {\n    return replacement;\n  }\n\n  const { idx, finalStep } = nextStep(\n    getProp(model, \"path\"),\n    getProp(child, \"path\"),\n  );\n  const children = model.props.children.slice();\n\n  if (finalStep) {\n    if (!op) {\n      children[idx] = replacement;\n    } else if (op === \"collapse\") {\n      children[idx] = collapse(model, children[idx]);\n    } else if (op === \"expand\") {\n      children[idx] = expand(children[idx]);\n    }\n  } else {\n    children[idx] = swapChild(children[idx], child, replacement, op);\n  }\n  return React.cloneElement(model, undefined, children);\n}\n\nfunction collapse(parent: ReactElement, child: ReactElement) {\n  const { style: parentStyle } = getProps(parent);\n  const { style: childStyle } = getProps(child);\n\n  const { width, height, flexBasis, flexShrink, flexGrow, ...rest } =\n    childStyle;\n\n  const restoreStyle = {\n    width,\n    height,\n    flexBasis,\n    flexShrink,\n    flexGrow,\n  };\n\n  const style = {\n    ...rest,\n    flexBasis: 0,\n    flexGrow: 0,\n    flexShrink: 0,\n  };\n  const collapsed =\n    parentStyle.flexDirection === \"row\"\n      ? \"vertical\"\n      : parentStyle.flexDirection === \"column\"\n        ? \"horizontal\"\n        : false;\n\n  if (collapsed) {\n    return React.cloneElement(child, {\n      collapsed,\n      restoreStyle,\n      style,\n    });\n  }\n  return child;\n}\n\nfunction expand(child: ReactElement) {\n  const { style: childStyle, restoreStyle } = getProps(child);\n\n  const { flexBasis, flexShrink, flexGrow, ...rest } = childStyle;\n\n  const style = {\n    ...rest,\n    ...restoreStyle,\n  };\n\n  return React.cloneElement(child, {\n    collapsed: false,\n    style,\n    restoreStyle: undefined,\n  });\n}\n"],"names":[],"mappings":"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"}

package/esm/layout-reducer/resize-flex-children.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-flex-children.js","sources":["../../src/layout-reducer/resize-flex-children.ts"],"sourcesContent":["import { dimension } from \"@vuu-ui/vuu-utils\";\nimport React, { CSSProperties, ReactElement } from \"react\";\nimport { followPath, getProps } from \"../utils\";\nimport { LayoutResizeAction, SplitterResizeAction } from \"./layoutTypes\";\nimport { swapChild } from \"./replace-layout-element\";\n\nexport function resizeFlexChild(\n  layoutRoot: ReactElement,\n  { path, size }: LayoutResizeAction,\n) {\n  const target = followPath(layoutRoot, path, true);\n\n  const { style } = getProps(target);\n\n  const newStyle = {\n    ...style,\n    width: size,\n  };\n\n  // const dimension = style.flexDirection === \"column\" ? \"height\" : \"width\";\n  // const replacementChildren = applySizesToChildren(children, sizes, dimension);\n\n  const replacement = React.cloneElement(target, { style: newStyle });\n\n  return swapChild(layoutRoot, target, replacement);\n}\n\nexport function resizeFlexChildren(\n  layoutRoot: ReactElement,\n  { path, sizes }: SplitterResizeAction,\n) {\n  const target = followPath(layoutRoot, path, true);\n  const { children, style } = getProps(target);\n\n  const dimension = style.flexDirection === \"column\" ? \"height\" : \"width\";\n  const replacementChildren = applySizesToChildren(children, sizes, dimension);\n\n  const replacement = React.cloneElement(\n    target,\n    undefined,\n    replacementChildren,\n  );\n\n  return swapChild(layoutRoot, target, replacement);\n}\n\nfunction applySizesToChildren(\n  children: ReactElement[],\n  sizes: { currentSize: number; flexBasis: number }[],\n  dimension: dimension,\n) {\n  return children.map((child, i) => {\n    const {\n      style: { [dimension]: size, flexBasis: actualFlexBasis },\n    } = getProps(child);\n    const meta = sizes[i];\n    const { currentSize, flexBasis } = meta;\n    const hasCurrentSize = currentSize !== undefined;\n    const newSize = hasCurrentSize ? meta.currentSize : flexBasis;\n\n    if (\n      newSize === undefined ||\n      size === newSize ||\n      actualFlexBasis === newSize\n    ) {\n      return child;\n    }\n    return React.cloneElement(child, {\n      style: applySizeToChild(child.props.style, dimension, newSize),\n    });\n  });\n}\n\nfunction applySizeToChild(\n  style: CSSProperties,\n  dimension: dimension,\n  newSize: number,\n) {\n  const hasSize = typeof style[dimension] === \"number\";\n  const { flexShrink = 1, flexGrow = 1 } = style;\n  return {\n    ...style,\n    [dimension]: hasSize ? newSize : \"auto\",\n    flexBasis: hasSize ? \"auto\" : newSize,\n    flexShrink,\n    flexGrow,\n  };\n}\n"],"names":["dimension"],"mappings":"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"}
+{"version":3,"file":"resize-flex-children.js","sources":["../../src/layout-reducer/resize-flex-children.ts"],"sourcesContent":["import { dimension } from \"@vuu-ui/vuu-utils\";\nimport React, { CSSProperties, ReactElement } from \"react\";\nimport { followPath, getProps } from \"../utils\";\nimport { LayoutResizeAction, SplitterResizeAction } from \"./layoutTypes\";\nimport { swapChild } from \"./replace-layout-element\";\n\nexport function resizeFlexChild(\n  layoutRoot: ReactElement,\n  { path, size }: LayoutResizeAction,\n) {\n  const target = followPath(layoutRoot, path, true);\n\n  const { style } = getProps(target);\n\n  const newStyle = {\n    ...style,\n    width: size,\n  };\n\n  // const dimension = style.flexDirection === \"column\" ? \"height\" : \"width\";\n  // const replacementChildren = applySizesToChildren(children, sizes, dimension);\n\n  const replacement = React.cloneElement(target, { style: newStyle });\n\n  return swapChild(layoutRoot, target, replacement);\n}\n\nexport function resizeFlexChildren(\n  layoutRoot: ReactElement,\n  { path, sizes }: SplitterResizeAction,\n) {\n  const target = followPath(layoutRoot, path, true);\n  const { children, style } = getProps(target);\n\n  const dimension = style.flexDirection === \"column\" ? \"height\" : \"width\";\n  const replacementChildren = applySizesToChildren(children, sizes, dimension);\n\n  const replacement = React.cloneElement(\n    target,\n    undefined,\n    replacementChildren,\n  );\n\n  return swapChild(layoutRoot, target, replacement);\n}\n\nfunction applySizesToChildren(\n  children: ReactElement[],\n  sizes: { currentSize: number; flexBasis: number }[],\n  dimension: dimension,\n) {\n  return children.map((child, i) => {\n    const {\n      style: { [dimension]: size, flexBasis: actualFlexBasis },\n    } = getProps(child);\n    const meta = sizes[i];\n    const { currentSize, flexBasis } = meta;\n    const hasCurrentSize = currentSize !== undefined;\n    const newSize = hasCurrentSize ? meta.currentSize : flexBasis;\n\n    if (\n      newSize === undefined ||\n      size === newSize ||\n      actualFlexBasis === newSize\n    ) {\n      return child;\n    }\n    return React.cloneElement(child, {\n      style: applySizeToChild(child.props.style, dimension, newSize),\n    });\n  });\n}\n\nfunction applySizeToChild(\n  style: CSSProperties,\n  dimension: dimension,\n  newSize: number,\n) {\n  const hasSize = typeof style[dimension] === \"number\";\n  const { flexShrink = 1, flexGrow = 1 } = style;\n  return {\n    ...style,\n    [dimension]: hasSize ? newSize : \"auto\",\n    flexBasis: hasSize ? \"auto\" : newSize,\n    flexShrink,\n    flexGrow,\n  };\n}\n"],"names":["dimension"],"mappings":";;;;;AAMO,SAAS,eACd,CAAA,UAAA,EACA,EAAE,IAAA,EAAM,MACR,EAAA;AACA,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,UAAY,EAAA,IAAA,EAAM,IAAI,CAAA;AAEhD,EAAA,MAAM,EAAE,KAAA,EAAU,GAAA,QAAA,CAAS,MAAM,CAAA;AAEjC,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG,KAAA;AAAA,IACH,KAAO,EAAA;AAAA,GACT;AAKA,EAAA,MAAM,cAAc,KAAM,CAAA,YAAA,CAAa,QAAQ,EAAE,KAAA,EAAO,UAAU,CAAA;AAElE,EAAO,OAAA,SAAA,CAAU,UAAY,EAAA,MAAA,EAAQ,WAAW,CAAA;AAClD;AAEO,SAAS,kBACd,CAAA,UAAA,EACA,EAAE,IAAA,EAAM,OACR,EAAA;AACA,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,UAAY,EAAA,IAAA,EAAM,IAAI,CAAA;AAChD,EAAA,MAAM,EAAE,QAAA,EAAU,KAAM,EAAA,GAAI,SAAS,MAAM,CAAA;AAE3C,EAAA,MAAMA,UAAY,GAAA,KAAA,CAAM,aAAkB,KAAA,QAAA,GAAW,QAAW,GAAA,OAAA;AAChE,EAAA,MAAM,mBAAsB,GAAA,oBAAA,CAAqB,QAAU,EAAA,KAAA,EAAOA,UAAS,CAAA;AAE3E,EAAA,MAAM,cAAc,KAAM,CAAA,YAAA;AAAA,IACxB,MAAA;AAAA,IACA,KAAA,CAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAU,UAAY,EAAA,MAAA,EAAQ,WAAW,CAAA;AAClD;AAEA,SAAS,oBAAA,CACP,QACA,EAAA,KAAA,EACAA,UACA,EAAA;AACA,EAAA,OAAO,QAAS,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,CAAM,KAAA;AAChC,IAAM,MAAA;AAAA,MACJ,OAAO,EAAE,CAACA,UAAS,GAAG,IAAA,EAAM,WAAW,eAAgB;AAAA,KACzD,GAAI,SAAS,KAAK,CAAA;AAClB,IAAM,MAAA,IAAA,GAAO,MAAM,CAAC,CAAA;AACpB,IAAM,MAAA,EAAE,WAAa,EAAA,SAAA,EAAc,GAAA,IAAA;AACnC,IAAA,MAAM,iBAAiB,WAAgB,KAAA,KAAA,CAAA;AACvC,IAAM,MAAA,OAAA,GAAU,cAAiB,GAAA,IAAA,CAAK,WAAc,GAAA,SAAA;AAEpD,IAAA,IACE,OAAY,KAAA,KAAA,CAAA,IACZ,IAAS,KAAA,OAAA,IACT,oBAAoB,OACpB,EAAA;AACA,MAAO,OAAA,KAAA;AAAA;AAET,IAAO,OAAA,KAAA,CAAM,aAAa,KAAO,EAAA;AAAA,MAC/B,OAAO,gBAAiB,CAAA,KAAA,CAAM,KAAM,CAAA,KAAA,EAAOA,YAAW,OAAO;AAAA,KAC9D,CAAA;AAAA,GACF,CAAA;AACH;AAEA,SAAS,gBAAA,CACP,KACAA,EAAAA,UAAAA,EACA,OACA,EAAA;AACA,EAAA,MAAM,OAAU,GAAA,OAAO,KAAMA,CAAAA,UAAS,CAAM,KAAA,QAAA;AAC5C,EAAA,MAAM,EAAE,UAAA,GAAa,CAAG,EAAA,QAAA,GAAW,GAAM,GAAA,KAAA;AACzC,EAAO,OAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,CAACA,UAAS,GAAG,OAAA,GAAU,OAAU,GAAA,MAAA;AAAA,IACjC,SAAA,EAAW,UAAU,MAAS,GAAA,OAAA;AAAA,IAC9B,UAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/layout-reducer/wrap-layout-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrap-layout-element.js","sources":["../../src/layout-reducer/wrap-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  getLayoutComponent,\n  LayoutModel,\n  rectTuple,\n  uuid,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport { DropPos } from \"../drag-drop/dragDropTypes\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { getProp, getProps, nextStep, resetPath, typeOf } from \"../utils\";\nimport {\n  createFlexbox,\n  createPlaceHolder,\n  flexDirection,\n  getFlexStyle,\n  getIntrinsicSize,\n  wrapIntrinsicSizeComponentWithFlexbox,\n} from \"./flexUtils\";\nimport { applyLayoutProps, LayoutProps } from \"./layoutUtils\";\n\nexport interface LayoutSpec {\n  type: \"Stack\" | \"Flexbox\";\n  flexDirection: \"column\" | \"row\";\n  showTabs?: boolean;\n}\n\nconst isHtmlElement = (component: LayoutModel) => {\n  const [firstLetter] = typeOf(component) as string;\n  return firstLetter === firstLetter.toLowerCase();\n};\n\nexport function wrap(\n  container: ReactElement,\n  existingComponent: ReactElement,\n  newComponent: any,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: DropTarget[\"dropRect\"],\n): ReactElement {\n  const { children: containerChildren, path: containerPath } =\n    getProps(container);\n\n  const existingComponentPath = getProp(existingComponent, \"path\");\n  const { idx, finalStep } = nextStep(containerPath, existingComponentPath);\n  const children = finalStep\n    ? updateChildren(\n        container,\n        containerChildren,\n        existingComponent,\n        newComponent,\n        pos,\n        clientRect,\n        dropRect,\n      )\n    : containerChildren.map((child: ReactElement, index: number) =>\n        index === idx\n          ? wrap(\n              child,\n              existingComponent,\n              newComponent,\n              pos,\n              clientRect,\n              dropRect,\n            )\n          : child,\n      );\n\n  return React.cloneElement(container, undefined, children);\n}\n\nfunction updateChildren(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: rectTuple,\n) {\n  const intrinsicSize = getIntrinsicSize(newComponent);\n\n  if (intrinsicSize?.width && intrinsicSize?.height) {\n    if (clientRect === undefined || dropRect === undefined) {\n      throw Error(\n        \"wrap-layout-element, updateChildren clientRect and dropRect must both be available\",\n      );\n    }\n    return wrapIntrinsicSizedComponent(\n      containerChildren,\n      existingComponent,\n      newComponent,\n      pos,\n      clientRect,\n      dropRect,\n    );\n  }\n  return wrapFlexComponent(\n    container,\n    containerChildren,\n    existingComponent,\n    newComponent,\n    pos,\n  );\n}\n\nfunction wrapFlexComponent(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n) {\n  const { version = 0 } = getProps(newComponent);\n  const { path: existingComponentPath, title } = getProps(existingComponent);\n  const {\n    type,\n    flexDirection,\n    showTabs: showTabsProp,\n  } = getLayoutSpecForWrapper(pos);\n  const [style, existingComponentStyle, newComponentStyle] =\n    getWrappedFlexStyles(\n      type,\n      existingComponent,\n      newComponent,\n      flexDirection,\n      pos,\n    );\n  const targetFirst = isTargetFirst(pos);\n  const active = targetFirst ? 1 : 0;\n\n  const newComponentProps = {\n    resizeable: true,\n    style: newComponentStyle,\n    version: version + 1,\n  };\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const existingComponentProps = {\n    [resizeProp]: true,\n    style: existingComponentStyle,\n  };\n\n  const showTabs = type === \"Stack\" ? { showTabs: showTabsProp } : undefined;\n  const splitterSize =\n    type === \"Flexbox\"\n      ? {\n          splitterSize:\n            (typeOf(container) === \"Flexbox\" && container.props.splitterSize) ??\n            undefined,\n        }\n      : undefined;\n\n  const id = uuid();\n  const wrapper = React.createElement(\n    getLayoutComponent(type),\n    {\n      active,\n      id,\n      key: id,\n      path: getProp(existingComponent, \"path\"),\n      flexFill: getProp(existingComponent, \"flexFill\"),\n      ...splitterSize,\n      ...showTabs,\n      style,\n      title,\n      resizeable: getProp(existingComponent, \"resizeable\"),\n    } as LayoutProps,\n    targetFirst\n      ? [\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.0`,\n            existingComponentProps,\n          ),\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.1`,\n          ),\n        ]\n      : [\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.0`,\n          ),\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.1`,\n            existingComponentProps,\n          ),\n        ],\n  );\n  return containerChildren.map((child: ReactElement) =>\n    child === existingComponent ? wrapper : child,\n  );\n}\n\nfunction wrapIntrinsicSizedComponent(\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect: DropTarget[\"clientRect\"],\n  dropRect: rectTuple,\n) {\n  const { flexDirection } = getLayoutSpecForWrapper(pos);\n  const contraDirection = flexDirection === \"column\" ? \"row\" : \"column\";\n  const targetFirst = isTargetFirst(pos);\n\n  const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;\n  const [startPlaceholder, endPlaceholder] =\n    flexDirection === \"column\"\n      ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]\n      : [dropLeft - clientRect.left, clientRect.right - dropRight];\n  const pathRoot = getProp(existingComponent, \"path\");\n  let pathIndex = 0;\n\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const wrappedChildren = [];\n  if (startPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 },\n          })\n        : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {\n            flexGrow: 0,\n            flexShrink: 0,\n          }),\n    );\n  }\n  wrappedChildren.push(\n    wrapIntrinsicSizeComponentWithFlexbox(\n      newComponent,\n      contraDirection,\n      `${pathRoot}.${pathIndex++}`,\n      clientRect,\n      dropRect,\n    ),\n  );\n  if (endPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0)\n        : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },\n          }),\n    );\n  }\n\n  const wrapper = createFlexbox(\n    flexDirection,\n    existingComponent.props,\n    wrappedChildren,\n    pathRoot,\n  );\n  return containerChildren.map((child) =>\n    child === existingComponent ? wrapper : child,\n  );\n}\n\nfunction getWrappedFlexStyles(\n  type: string,\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  flexDirection: flexDirection,\n  pos: DropPos,\n) {\n  const style = {\n    ...existingComponent.props.style,\n    flexDirection,\n  };\n\n  const dimension =\n    type === \"Flexbox\" && flexDirection === \"column\" ? \"height\" : \"width\";\n  const newComponentStyle = getFlexStyle(newComponent, dimension, pos);\n  const existingComponentStyle = getFlexStyle(existingComponent, dimension);\n\n  return [style, existingComponentStyle, newComponentStyle];\n}\n\nconst isTargetFirst = (pos: DropPos) =>\n  pos.position.SouthOrEast\n    ? true\n    : pos?.tab?.positionRelativeToTab === \"before\"\n      ? false\n      : pos.position.Header\n        ? true\n        : false;\n\nfunction getLayoutSpecForWrapper(pos: DropPos): LayoutSpec {\n  if (pos.position.Header) {\n    return {\n      type: \"Stack\",\n      flexDirection: \"column\",\n      showTabs: true,\n    };\n  } else {\n    return {\n      type: \"Flexbox\",\n      flexDirection: pos.position.EastOrWest ? \"row\" : \"column\",\n    };\n  }\n}\n"],"names":["flexDirection"],"mappings":"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"}
+{"version":3,"file":"wrap-layout-element.js","sources":["../../src/layout-reducer/wrap-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  getLayoutComponent,\n  LayoutModel,\n  rectTuple,\n  uuid,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport { DropPos } from \"../drag-drop/dragDropTypes\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { getProp, getProps, nextStep, resetPath, typeOf } from \"../utils\";\nimport {\n  createFlexbox,\n  createPlaceHolder,\n  flexDirection,\n  getFlexStyle,\n  getIntrinsicSize,\n  wrapIntrinsicSizeComponentWithFlexbox,\n} from \"./flexUtils\";\nimport { applyLayoutProps, LayoutProps } from \"./layoutUtils\";\n\nexport interface LayoutSpec {\n  type: \"Stack\" | \"Flexbox\";\n  flexDirection: \"column\" | \"row\";\n  showTabs?: boolean;\n}\n\nconst isHtmlElement = (component: LayoutModel) => {\n  const [firstLetter] = typeOf(component) as string;\n  return firstLetter === firstLetter.toLowerCase();\n};\n\nexport function wrap(\n  container: ReactElement,\n  existingComponent: ReactElement,\n  newComponent: any,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: DropTarget[\"dropRect\"],\n): ReactElement {\n  const { children: containerChildren, path: containerPath } =\n    getProps(container);\n\n  const existingComponentPath = getProp(existingComponent, \"path\");\n  const { idx, finalStep } = nextStep(containerPath, existingComponentPath);\n  const children = finalStep\n    ? updateChildren(\n        container,\n        containerChildren,\n        existingComponent,\n        newComponent,\n        pos,\n        clientRect,\n        dropRect,\n      )\n    : containerChildren.map((child: ReactElement, index: number) =>\n        index === idx\n          ? wrap(\n              child,\n              existingComponent,\n              newComponent,\n              pos,\n              clientRect,\n              dropRect,\n            )\n          : child,\n      );\n\n  return React.cloneElement(container, undefined, children);\n}\n\nfunction updateChildren(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: rectTuple,\n) {\n  const intrinsicSize = getIntrinsicSize(newComponent);\n\n  if (intrinsicSize?.width && intrinsicSize?.height) {\n    if (clientRect === undefined || dropRect === undefined) {\n      throw Error(\n        \"wrap-layout-element, updateChildren clientRect and dropRect must both be available\",\n      );\n    }\n    return wrapIntrinsicSizedComponent(\n      containerChildren,\n      existingComponent,\n      newComponent,\n      pos,\n      clientRect,\n      dropRect,\n    );\n  }\n  return wrapFlexComponent(\n    container,\n    containerChildren,\n    existingComponent,\n    newComponent,\n    pos,\n  );\n}\n\nfunction wrapFlexComponent(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n) {\n  const { version = 0 } = getProps(newComponent);\n  const { path: existingComponentPath, title } = getProps(existingComponent);\n  const {\n    type,\n    flexDirection,\n    showTabs: showTabsProp,\n  } = getLayoutSpecForWrapper(pos);\n  const [style, existingComponentStyle, newComponentStyle] =\n    getWrappedFlexStyles(\n      type,\n      existingComponent,\n      newComponent,\n      flexDirection,\n      pos,\n    );\n  const targetFirst = isTargetFirst(pos);\n  const active = targetFirst ? 1 : 0;\n\n  const newComponentProps = {\n    resizeable: true,\n    style: newComponentStyle,\n    version: version + 1,\n  };\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const existingComponentProps = {\n    [resizeProp]: true,\n    style: existingComponentStyle,\n  };\n\n  const showTabs = type === \"Stack\" ? { showTabs: showTabsProp } : undefined;\n  const splitterSize =\n    type === \"Flexbox\"\n      ? {\n          splitterSize:\n            (typeOf(container) === \"Flexbox\" && container.props.splitterSize) ??\n            undefined,\n        }\n      : undefined;\n\n  const id = uuid();\n  const wrapper = React.createElement(\n    getLayoutComponent(type),\n    {\n      active,\n      id,\n      key: id,\n      path: getProp(existingComponent, \"path\"),\n      flexFill: getProp(existingComponent, \"flexFill\"),\n      ...splitterSize,\n      ...showTabs,\n      style,\n      title,\n      resizeable: getProp(existingComponent, \"resizeable\"),\n    } as LayoutProps,\n    targetFirst\n      ? [\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.0`,\n            existingComponentProps,\n          ),\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.1`,\n          ),\n        ]\n      : [\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.0`,\n          ),\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.1`,\n            existingComponentProps,\n          ),\n        ],\n  );\n  return containerChildren.map((child: ReactElement) =>\n    child === existingComponent ? wrapper : child,\n  );\n}\n\nfunction wrapIntrinsicSizedComponent(\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect: DropTarget[\"clientRect\"],\n  dropRect: rectTuple,\n) {\n  const { flexDirection } = getLayoutSpecForWrapper(pos);\n  const contraDirection = flexDirection === \"column\" ? \"row\" : \"column\";\n  const targetFirst = isTargetFirst(pos);\n\n  const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;\n  const [startPlaceholder, endPlaceholder] =\n    flexDirection === \"column\"\n      ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]\n      : [dropLeft - clientRect.left, clientRect.right - dropRight];\n  const pathRoot = getProp(existingComponent, \"path\");\n  let pathIndex = 0;\n\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const wrappedChildren = [];\n  if (startPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 },\n          })\n        : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {\n            flexGrow: 0,\n            flexShrink: 0,\n          }),\n    );\n  }\n  wrappedChildren.push(\n    wrapIntrinsicSizeComponentWithFlexbox(\n      newComponent,\n      contraDirection,\n      `${pathRoot}.${pathIndex++}`,\n      clientRect,\n      dropRect,\n    ),\n  );\n  if (endPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0)\n        : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },\n          }),\n    );\n  }\n\n  const wrapper = createFlexbox(\n    flexDirection,\n    existingComponent.props,\n    wrappedChildren,\n    pathRoot,\n  );\n  return containerChildren.map((child) =>\n    child === existingComponent ? wrapper : child,\n  );\n}\n\nfunction getWrappedFlexStyles(\n  type: string,\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  flexDirection: flexDirection,\n  pos: DropPos,\n) {\n  const style = {\n    ...existingComponent.props.style,\n    flexDirection,\n  };\n\n  const dimension =\n    type === \"Flexbox\" && flexDirection === \"column\" ? \"height\" : \"width\";\n  const newComponentStyle = getFlexStyle(newComponent, dimension, pos);\n  const existingComponentStyle = getFlexStyle(existingComponent, dimension);\n\n  return [style, existingComponentStyle, newComponentStyle];\n}\n\nconst isTargetFirst = (pos: DropPos) =>\n  pos.position.SouthOrEast\n    ? true\n    : pos?.tab?.positionRelativeToTab === \"before\"\n      ? false\n      : pos.position.Header\n        ? true\n        : false;\n\nfunction getLayoutSpecForWrapper(pos: DropPos): LayoutSpec {\n  if (pos.position.Header) {\n    return {\n      type: \"Stack\",\n      flexDirection: \"column\",\n      showTabs: true,\n    };\n  } else {\n    return {\n      type: \"Flexbox\",\n      flexDirection: pos.position.EastOrWest ? \"row\" : \"column\",\n    };\n  }\n}\n"],"names":["flexDirection"],"mappings":"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"}

package/esm/layout-view/View.css.js

@@ -1,4 +1,4 @@
-var viewCss = ".vuuView {\n  border-color: var(--vuuView-borderColor, transparent);\n  border-width: var(--vuuView-borderWidth, 1px);\n  border-style: var(--vuuView-borderStyle, solid);\n\n  display: flex;\n  flex-direction: column;\n  margin: var(--vuuView-margin, 0px);\n  min-height: 50px;\n  min-width: 50px;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  &.vuuHighlighted {\n    --vuuView-borderStyle: dashed;\n    --vuuView-borderColor: var(--salt-container-primary-borderColor);\n  }\n}\n\n.vuuView.focus-visible:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dotted cornflowerblue 2px;\n}\n\n.vuuView.dragging {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n}\n\n.vuuView-main {\n  /* height: var(--view-content-height);\n  width: var(--view-content-width); */\n  display: flex;\n  flex-direction: var(--vuuView-flexDirection, column);\n  flex-wrap: var(--vuuView-flex-wrap, nowrap);\n  flex: 1;\n  justify-content: var(--vuuView-justify, flex-start);\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuView-main > * {\n  flex-basis: auto;\n  flex-grow: var(--vuuView-flex-grow, 1);\n  flex-shrink: var(--vuuView-flex-shrink, 1);\n}\n\n.vuuView-collapsed .vuuView-main {\n  display: none;\n}\n\n.vuuView-collapsed + .Splitter {\n  display: none;\n}\n\n.vuuView-collapsed .Toolbar-vertical {\n  border-right: solid 1px var(--grey40);\n}\n\n.vuuView-collapsed .Toolbar-vertical .toolbar-title {\n  display: none;\n}\n";
+var viewCss = ".vuuView {\n  --vuuToolbarProxy-height: var(--salt-size-base);\n  border-color: var(--vuuView-borderColor, transparent);\n  border-width: var(--vuuView-borderWidth, 1px);\n  border-style: var(--vuuView-borderStyle, solid);\n\n  display: flex;\n  flex-direction: column;\n  margin: var(--vuuView-margin, 0px);\n  min-height: 50px;\n  min-width: 50px;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n  transition: flex-basis .3s ease-in-out;\n\n  &.vuuHighlighted {\n    --vuuView-borderStyle: dashed;\n    --vuuView-borderColor: var(--salt-container-primary-borderColor);\n  }\n}\n\n.vuuSplitterResizing .vuuView {\n  transition: none;\n\n}\n\n.vuuView:has(> .vuuHeader){\n  min-height: var(--vuuToolbarProxy-height);\n}\n\n.vuuView.focus-visible:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dotted cornflowerblue 2px;\n}\n\n.vuuView.dragging {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n}\n\n.vuuView-main {\n  /* height: var(--view-content-height);\n  width: var(--view-content-width); */\n  display: flex;\n  flex-direction: var(--vuuView-flexDirection, column);\n  flex-wrap: var(--vuuView-flex-wrap, nowrap);\n  flex: 1;\n  justify-content: var(--vuuView-justify, flex-start);\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuView-main > * {\n  flex-basis: auto;\n  flex-grow: var(--vuuView-flex-grow, 1);\n  flex-shrink: var(--vuuView-flex-shrink, 1);\n}\n\n/* .vuuView-collapsed .vuuView-main {\n  display: none;\n} */\n\n.vuuView-collapsed {\n  flex: 0 0 0 !important;\n}\n\n\n.vuuView-collapsed + .Splitter {\n  display: none;\n}\n\n.vuuView-collapsed .Toolbar-vertical {\n  border-right: solid 1px var(--grey40);\n}\n\n.vuuView-collapsed .Toolbar-vertical .toolbar-title {\n  display: none;\n}\n";
 
 export { viewCss as default };
 //# sourceMappingURL=View.css.js.map

package/esm/layout-view/View.js

@@ -36,10 +36,13 @@ const View = forwardRef(function View2(props, forwardedRef) {
     flexFill,
     id: idProp,
     header,
+    onCollapse,
+    onExpand,
     orientation = "horizontal",
     path = dataPath,
     resize = "responsive",
     resizeable = dataResizeable,
+    restoreStyle,
     tearOut,
     style = {},
     title: titleProp,
@@ -140,7 +143,9 @@ const View = forwardRef(function View2(props, forwardedRef) {
             contributions,
             expanded,
             closeable,
+            onCollapse,
             onEditTitle,
+            onExpand,
             orientation,
             tearOut,
             title

package/esm/layout-view/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sources":["../../src/layout-view/View.tsx"],"sourcesContent":["import { registerComponent, useId } 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 React, {\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Header as VuuHeader } from \"../layout-header/Header\";\nimport { useView } from \"./useView\";\nimport { useViewResize } from \"./useViewResize\";\nimport { ViewContext, ViewContextAPI } from \"../layout-view-actions\";\nimport { ViewProps } from \"./viewTypes\";\n\nimport viewCss from \"./View.css\";\n\nconst classBase = \"vuuView\";\n\ntype Props = { [key: string]: unknown };\n\nconst getProps = (state?: Props, props?: Props) => {\n  if (state && props) {\n    return {\n      ...state,\n      ...props,\n    };\n  } else return state || props;\n};\n\n/**\n * View is the leaf-level entity managed by the Vuu layout system. It may represent a component\n * or a group of components. It also offers an API (via useViewContext) for persistence.\n */\nconst View = forwardRef(function View(\n  props: ViewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    Header = VuuHeader,\n    allowRename,\n    children,\n    className,\n    collapsed,\n    closeable,\n    \"data-path\": dataPath,\n    \"data-resizeable\": dataResizeable,\n    dropTargets,\n    expanded,\n    flexFill,\n    id: idProp,\n    header,\n    orientation = \"horizontal\",\n    path = dataPath,\n    resize = \"responsive\",\n    resizeable = dataResizeable,\n    tearOut,\n    style = {},\n    title: titleProp,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-view\",\n    css: viewCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const mainRef = useRef<HTMLDivElement>(null);\n  const [componentProps, _setComponentProps] = useState<Props>();\n  const {\n    contributions,\n    dispatchViewAction,\n    load,\n    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\n    title,\n  } = useView({\n    id,\n    rootRef,\n    path,\n    dropTargets,\n    title: titleProp,\n  });\n\n  useViewResize({ mainRef, resize, rootRef });\n\n  const setComponentProps = useCallback((props?: Props) => {\n    _setComponentProps(props);\n  }, []);\n\n  const getContent = () => {\n    if (React.isValidElement(children) && (restoredState || componentProps)) {\n      return React.cloneElement(\n        children,\n        getProps(restoredState, componentProps),\n      );\n    }\n    return children;\n  };\n\n  const viewContextValue: ViewContextAPI = useMemo(\n    () => ({\n      dispatch: dispatchViewAction,\n      id,\n      path,\n      title,\n      load,\n      loadSession,\n      onConfigChange,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n    }),\n    [\n      dispatchViewAction,\n      id,\n      load,\n      loadSession,\n      onConfigChange,\n      path,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n      title,\n    ],\n  );\n\n  const headerProps = typeof header === \"object\" ? header : {};\n\n  return (\n    <div\n      {...restProps}\n      className={cx(classBase, className, {\n        [`${classBase}-collapsed`]: collapsed,\n        [`${classBase}-expanded`]: expanded,\n        [`${classBase}-resize-defer`]: resize === \"defer\",\n      })}\n      data-resizeable={resizeable}\n      id={id}\n      ref={useForkRef(forwardedRef, rootRef)}\n      style={style}\n      tabIndex={-1}\n    >\n      <ViewContext.Provider value={viewContextValue}>\n        {header ? (\n          <Header\n            {...headerProps}\n            allowRename={allowRename}\n            collapsed={collapsed}\n            contributions={contributions}\n            expanded={expanded}\n            closeable={closeable}\n            onEditTitle={onEditTitle}\n            orientation={orientation}\n            tearOut={tearOut}\n            title={title}\n          />\n        ) : null}\n        <div className={`${classBase}-main`} ref={mainRef}>\n          {getContent()}\n        </div>\n      </ViewContext.Provider>\n    </div>\n  );\n});\nView.displayName = \"View\";\n\ninterface ViewComponentType {\n  (\n    props: ViewProps & {\n      ref?: ForwardedRef<HTMLDivElement>;\n    },\n  ): ReactElement<ViewProps>;\n  displayName?: string;\n}\n\nconst MemoView = React.memo(View) as ViewComponentType;\n\nMemoView.displayName = \"View\";\n\nregisterComponent(\"View\", MemoView, \"view\");\n\nexport { MemoView as View };\n"],"names":["View","Header","VuuHeader","props"],"mappings":"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"}
+{"version":3,"file":"View.js","sources":["../../src/layout-view/View.tsx"],"sourcesContent":["import { registerComponent, useId } 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 React, {\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Header as VuuHeader } from \"../layout-header/Header\";\nimport { useView } from \"./useView\";\nimport { useViewResize } from \"./useViewResize\";\nimport { ViewContext, ViewContextAPI } from \"../layout-view-actions\";\nimport { ViewProps } from \"./viewTypes\";\n\nimport viewCss from \"./View.css\";\n\nconst classBase = \"vuuView\";\n\ntype Props = { [key: string]: unknown };\n\nconst getProps = (state?: Props, props?: Props) => {\n  if (state && props) {\n    return {\n      ...state,\n      ...props,\n    };\n  } else return state || props;\n};\n\n/**\n * View is the leaf-level entity managed by the Vuu layout system. It may represent a component\n * or a group of components. It also offers an API (via useViewContext) for persistence.\n */\nconst View = forwardRef(function View(\n  props: ViewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    Header = VuuHeader,\n    allowRename,\n    children,\n    className,\n    collapsed,\n    closeable,\n    \"data-path\": dataPath,\n    \"data-resizeable\": dataResizeable,\n    dropTargets,\n    expanded,\n    flexFill,\n    id: idProp,\n    header,\n    onCollapse,\n    onExpand,\n    orientation = \"horizontal\",\n    path = dataPath,\n    resize = \"responsive\",\n    resizeable = dataResizeable,\n    restoreStyle,\n    tearOut,\n    style = {},\n    title: titleProp,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-view\",\n    css: viewCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const mainRef = useRef<HTMLDivElement>(null);\n  const [componentProps, _setComponentProps] = useState<Props>();\n  const {\n    contributions,\n    dispatchViewAction,\n    load,\n    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\n    title,\n  } = useView({\n    id,\n    rootRef,\n    path,\n    dropTargets,\n    title: titleProp,\n  });\n\n  useViewResize({ mainRef, resize, rootRef });\n\n  const setComponentProps = useCallback((props?: Props) => {\n    _setComponentProps(props);\n  }, []);\n\n  const getContent = () => {\n    if (React.isValidElement(children) && (restoredState || componentProps)) {\n      return React.cloneElement(\n        children,\n        getProps(restoredState, componentProps),\n      );\n    }\n    return children;\n  };\n\n  const viewContextValue: ViewContextAPI = useMemo(\n    () => ({\n      dispatch: dispatchViewAction,\n      id,\n      path,\n      title,\n      load,\n      loadSession,\n      onConfigChange,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n    }),\n    [\n      dispatchViewAction,\n      id,\n      load,\n      loadSession,\n      onConfigChange,\n      path,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n      title,\n    ],\n  );\n\n  const headerProps = typeof header === \"object\" ? header : {};\n\n  return (\n    <div\n      {...restProps}\n      className={cx(classBase, className, {\n        [`${classBase}-collapsed`]: collapsed,\n        [`${classBase}-expanded`]: expanded,\n        [`${classBase}-resize-defer`]: resize === \"defer\",\n      })}\n      data-resizeable={resizeable}\n      id={id}\n      ref={useForkRef(forwardedRef, rootRef)}\n      style={style}\n      tabIndex={-1}\n    >\n      <ViewContext.Provider value={viewContextValue}>\n        {header ? (\n          <Header\n            {...headerProps}\n            allowRename={allowRename}\n            collapsed={collapsed}\n            contributions={contributions}\n            expanded={expanded}\n            closeable={closeable}\n            onCollapse={onCollapse}\n            onEditTitle={onEditTitle}\n            onExpand={onExpand}\n            orientation={orientation}\n            tearOut={tearOut}\n            title={title}\n          />\n        ) : null}\n        <div className={`${classBase}-main`} ref={mainRef}>\n          {getContent()}\n        </div>\n      </ViewContext.Provider>\n    </div>\n  );\n});\nView.displayName = \"View\";\n\ninterface ViewComponentType {\n  (\n    props: ViewProps & {\n      ref?: ForwardedRef<HTMLDivElement>;\n    },\n  ): ReactElement<ViewProps>;\n  displayName?: string;\n}\n\nconst MemoView = React.memo(View) as ViewComponentType;\n\nMemoView.displayName = \"View\";\n\nregisterComponent(\"View\", MemoView, \"view\");\n\nexport { MemoView as View };\n"],"names":["View","Header","VuuHeader","props"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,SAAY,GAAA,SAAA;AAIlB,MAAM,QAAA,GAAW,CAAC,KAAA,EAAe,KAAkB,KAAA;AACjD,EAAA,IAAI,SAAS,KAAO,EAAA;AAClB,IAAO,OAAA;AAAA,MACL,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AAAA,GACF,aAAc,KAAS,IAAA,KAAA;AACzB,CAAA;AAMA,MAAM,IAAO,GAAA,UAAA,CAAW,SAASA,KAAAA,CAC/B,OACA,YACA,EAAA;AACA,EAAM,MAAA;AAAA,YACJC,QAAS,GAAAC,MAAA;AAAA,IACT,WAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAa,EAAA,QAAA;AAAA,IACb,iBAAmB,EAAA,cAAA;AAAA,IACnB,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,YAAA;AAAA,IACd,IAAO,GAAA,QAAA;AAAA,IACP,MAAS,GAAA,YAAA;AAAA,IACT,UAAa,GAAA,cAAA;AAAA,IACb,YAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAQ,EAAC;AAAA,IACT,KAAO,EAAA,SAAA;AAAA,IACP,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAA,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,CAAC,cAAA,EAAgB,kBAAkB,CAAA,GAAI,QAAgB,EAAA;AAC7D,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,kBAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,OAAQ,CAAA;AAAA,IACV,EAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,aAAA,CAAc,EAAE,OAAA,EAAS,MAAQ,EAAA,OAAA,EAAS,CAAA;AAE1C,EAAM,MAAA,iBAAA,GAAoB,WAAY,CAAA,CAACC,MAAkB,KAAA;AACvD,IAAA,kBAAA,CAAmBA,MAAK,CAAA;AAAA,GAC1B,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,IAAI,KAAM,CAAA,cAAA,CAAe,QAAQ,CAAA,KAAM,iBAAiB,cAAiB,CAAA,EAAA;AACvE,MAAA,OAAO,KAAM,CAAA,YAAA;AAAA,QACX,QAAA;AAAA,QACA,QAAA,CAAS,eAAe,cAAc;AAAA,OACxC;AAAA;AAEF,IAAO,OAAA,QAAA;AAAA,GACT;AAEA,EAAA,MAAM,gBAAmC,GAAA,OAAA;AAAA,IACvC,OAAO;AAAA,MACL,QAAU,EAAA,kBAAA;AAAA,MACV,EAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,kBAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,WAAc,GAAA,OAAO,MAAW,KAAA,QAAA,GAAW,SAAS,EAAC;AAE3D,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,QAC5B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,QAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,aAAA,CAAe,GAAG,MAAW,KAAA;AAAA,OAC3C,CAAA;AAAA,MACD,iBAAiB,EAAA,UAAA;AAAA,MACjB,EAAA;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,MACrC,KAAA;AAAA,MACA,QAAU,EAAA,CAAA,CAAA;AAAA,MAEV,QAAC,kBAAA,IAAA,CAAA,WAAA,CAAY,QAAZ,EAAA,EAAqB,OAAO,gBAC1B,EAAA,QAAA,EAAA;AAAA,QACC,MAAA,mBAAA,GAAA;AAAA,UAACF,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,WAAA;AAAA,YACJ,WAAA;AAAA,YACA,SAAA;AAAA,YACA,aAAA;AAAA,YACA,QAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,YACA,WAAA;AAAA,YACA,QAAA;AAAA,YACA,WAAA;AAAA,YACA,OAAA;AAAA,YACA;AAAA;AAAA,SAEA,GAAA,IAAA;AAAA,wBACJ,GAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,GAAA,EAAK,OACvC,EAAA,QAAA,EAAA,UAAA,EACH,EAAA;AAAA,OACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC,CAAA;AACD,IAAA,CAAK,WAAc,GAAA,MAAA;AAWb,MAAA,QAAA,GAAW,KAAM,CAAA,IAAA,CAAK,IAAI;AAEhC,QAAA,CAAS,WAAc,GAAA,MAAA;AAEvB,iBAAkB,CAAA,MAAA,EAAQ,UAAU,MAAM,CAAA;;;;"}

package/esm/layout-view/useView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useView.js","sources":["../../src/layout-view/useView.tsx"],"sourcesContent":["import { RefObject, useCallback, useMemo } from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider/LayoutProvider\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { useViewActionDispatcher } from \"../layout-view-actions/useViewActionDispatcher\";\n\nexport interface ViewHookProps {\n  id: string;\n  rootRef: RefObject<HTMLDivElement>;\n  path?: string;\n  dropTargets?: string[];\n  title?: string;\n}\n\nexport const useView = ({\n  id,\n  rootRef,\n  path,\n  dropTargets,\n  title: titleProp,\n}: ViewHookProps) => {\n  const layoutDispatch = useLayoutProviderDispatch();\n\n  const {\n    loadState,\n    loadSessionState,\n    purgeState,\n    saveState,\n    saveSessionState,\n  } = usePersistentState();\n\n  const [dispatchViewAction, contributions] = useViewActionDispatcher(\n    id,\n    rootRef,\n    path,\n    dropTargets\n  );\n\n  const title = useMemo(\n    () => loadState(\"view-title\") ?? titleProp,\n    [loadState, titleProp]\n  );\n\n  const onEditTitle = useCallback(\n    (title: string) => {\n      if (path) {\n        layoutDispatch({ type: \"set-title\", path, title });\n      }\n    },\n    [layoutDispatch, path]\n  );\n\n  const restoredState = useMemo(() => loadState(id), [id, loadState]);\n\n  const load = useCallback(\n    (key?: string) => loadState(id, key),\n    [id, loadState]\n  );\n\n  const purge = useCallback(\n    (key) => {\n      purgeState(id, key);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, purgeState]\n  );\n\n  const save = useCallback(\n    (state, key) => {\n      saveState(id, key, state);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, saveState]\n  );\n  const loadSession = useCallback(\n    (key?: string) => loadSessionState(id, key),\n    [id, loadSessionState]\n  );\n  const saveSession = useCallback(\n    (state, key) => saveSessionState(id, key, state),\n    [id, saveSessionState]\n  );\n\n  const onConfigChange = useCallback(\n    ({ type: key, ...config }) => {\n      const { [key]: data } = config;\n      save(data, key);\n    },\n    [save]\n  );\n\n  return {\n    contributions,\n    dispatchViewAction,\n    load,\n    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\n    title,\n  };\n};\n"],"names":["title"],"mappings":"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"}
+{"version":3,"file":"useView.js","sources":["../../src/layout-view/useView.tsx"],"sourcesContent":["import { RefObject, useCallback, useMemo } from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider/LayoutProvider\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { useViewActionDispatcher } from \"../layout-view-actions/useViewActionDispatcher\";\n\nexport interface ViewHookProps {\n  id: string;\n  rootRef: RefObject<HTMLDivElement>;\n  path?: string;\n  dropTargets?: string[];\n  title?: string;\n}\n\nexport const useView = ({\n  id,\n  rootRef,\n  path,\n  dropTargets,\n  title: titleProp,\n}: ViewHookProps) => {\n  const layoutDispatch = useLayoutProviderDispatch();\n\n  const {\n    loadState,\n    loadSessionState,\n    purgeState,\n    saveState,\n    saveSessionState,\n  } = usePersistentState();\n\n  const [dispatchViewAction, contributions] = useViewActionDispatcher(\n    id,\n    rootRef,\n    path,\n    dropTargets\n  );\n\n  const title = useMemo(\n    () => loadState(\"view-title\") ?? titleProp,\n    [loadState, titleProp]\n  );\n\n  const onEditTitle = useCallback(\n    (title: string) => {\n      if (path) {\n        layoutDispatch({ type: \"set-title\", path, title });\n      }\n    },\n    [layoutDispatch, path]\n  );\n\n  const restoredState = useMemo(() => loadState(id), [id, loadState]);\n\n  const load = useCallback(\n    (key?: string) => loadState(id, key),\n    [id, loadState]\n  );\n\n  const purge = useCallback(\n    (key) => {\n      purgeState(id, key);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, purgeState]\n  );\n\n  const save = useCallback(\n    (state, key) => {\n      saveState(id, key, state);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, saveState]\n  );\n  const loadSession = useCallback(\n    (key?: string) => loadSessionState(id, key),\n    [id, loadSessionState]\n  );\n  const saveSession = useCallback(\n    (state, key) => saveSessionState(id, key, state),\n    [id, saveSessionState]\n  );\n\n  const onConfigChange = useCallback(\n    ({ type: key, ...config }) => {\n      const { [key]: data } = config;\n      save(data, key);\n    },\n    [save]\n  );\n\n  return {\n    contributions,\n    dispatchViewAction,\n    load,\n    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\n    title,\n  };\n};\n"],"names":["title"],"mappings":"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"}

package/esm/layout-view/useViewBroadcastChannel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewBroadcastChannel.js","sources":["../../src/layout-view/useViewBroadcastChannel.ts"],"sourcesContent":["import { VuuBroadcastChannel } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useRef } from \"react\";\n\nexport interface ViewBroadcastMessage {\n  path?: string;\n  targetId?: string;\n  type: \"highlight-on\" | \"highlight-off\" | \"layout-closed\";\n}\n\nexport type BroadcastMessageHandler = (message: ViewBroadcastMessage) => void;\n\nconst isMessageForSelf = (\n  message: ViewBroadcastMessage,\n  id?: string,\n  path?: string,\n) => {\n  if (id && message.targetId === id) {\n    return true;\n  } else if (message.path && path?.startsWith(message.path)) {\n    return true;\n  }\n  return false;\n};\n\nexport const useViewBroadcastChannel = (\n  id?: string,\n  path?: string,\n  onMessageReceived?: BroadcastMessageHandler,\n) => {\n  const broadcastChannelRef =\n    useRef<VuuBroadcastChannel<ViewBroadcastMessage>>();\n\n  useEffect(() => {\n    const broadcastChannel: VuuBroadcastChannel<ViewBroadcastMessage> =\n      new BroadcastChannel(\"vuu\");\n    broadcastChannel.onmessage = (evt) => {\n      if (isMessageForSelf(evt.data, id, path)) {\n        onMessageReceived?.(evt.data);\n      }\n    };\n    broadcastChannelRef.current = broadcastChannel;\n    return () => {\n      broadcastChannel.close();\n      broadcastChannelRef.current = undefined;\n    };\n  }, [id, onMessageReceived, path]);\n\n  const sendMessage = useCallback((message: ViewBroadcastMessage) => {\n    broadcastChannelRef.current?.postMessage(message);\n  }, []);\n\n  return sendMessage;\n};\n"],"names":[],"mappings":";;AAWA,MAAM,gBAAmB,GAAA,CACvB,OACA,EAAA,EAAA,EACA,IACG,KAAA;AACH,EAAI,IAAA,EAAA,IAAM,OAAQ,CAAA,QAAA,KAAa,EAAI,EAAA;AACjC,IAAO,OAAA,IAAA,CAAA;AAAA,aACE,OAAQ,CAAA,IAAA,IAAQ,MAAM,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AAEO,MAAM,uBAA0B,GAAA,CACrC,EACA,EAAA,IAAA,EACA,iBACG,KAAA;AACH,EAAA,MAAM,sBACJ,MAAkD,EAAA,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,gBAAA,GACJ,IAAI,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC5B,IAAiB,gBAAA,CAAA,SAAA,GAAY,CAAC,GAAQ,KAAA;AACpC,MAAA,IAAI,gBAAiB,CAAA,GAAA,CAAI,IAAM,EAAA,EAAA,EAAI,IAAI,CAAG,EAAA;AACxC,QAAA,iBAAA,GAAoB,IAAI,IAAI,CAAA,CAAA;AAAA,OAC9B;AAAA,KACF,CAAA;AACA,IAAA,mBAAA,CAAoB,OAAU,GAAA,gBAAA,CAAA;AAC9B,IAAA,OAAO,MAAM;AACX,MAAA,gBAAA,CAAiB,KAAM,EAAA,CAAA;AACvB,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,KAChC,CAAA;AAAA,GACC,EAAA,CAAC,EAAI,EAAA,iBAAA,EAAmB,IAAI,CAAC,CAAA,CAAA;AAEhC,EAAM,MAAA,WAAA,GAAc,WAAY,CAAA,CAAC,OAAkC,KAAA;AACjE,IAAoB,mBAAA,CAAA,OAAA,EAAS,YAAY,OAAO,CAAA,CAAA;AAAA,GAClD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,WAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useViewBroadcastChannel.js","sources":["../../src/layout-view/useViewBroadcastChannel.ts"],"sourcesContent":["import { VuuBroadcastChannel } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useRef } from \"react\";\n\nexport interface ViewBroadcastMessage {\n  path?: string;\n  targetId?: string;\n  type: \"highlight-on\" | \"highlight-off\" | \"layout-closed\";\n}\n\nexport type BroadcastMessageHandler = (message: ViewBroadcastMessage) => void;\n\nconst isMessageForSelf = (\n  message: ViewBroadcastMessage,\n  id?: string,\n  path?: string,\n) => {\n  if (id && message.targetId === id) {\n    return true;\n  } else if (message.path && path?.startsWith(message.path)) {\n    return true;\n  }\n  return false;\n};\n\nexport const useViewBroadcastChannel = (\n  id?: string,\n  path?: string,\n  onMessageReceived?: BroadcastMessageHandler,\n) => {\n  const broadcastChannelRef =\n    useRef<VuuBroadcastChannel<ViewBroadcastMessage>>();\n\n  useEffect(() => {\n    const broadcastChannel: VuuBroadcastChannel<ViewBroadcastMessage> =\n      new BroadcastChannel(\"vuu\");\n    broadcastChannel.onmessage = (evt) => {\n      if (isMessageForSelf(evt.data, id, path)) {\n        onMessageReceived?.(evt.data);\n      }\n    };\n    broadcastChannelRef.current = broadcastChannel;\n    return () => {\n      broadcastChannel.close();\n      broadcastChannelRef.current = undefined;\n    };\n  }, [id, onMessageReceived, path]);\n\n  const sendMessage = useCallback((message: ViewBroadcastMessage) => {\n    broadcastChannelRef.current?.postMessage(message);\n  }, []);\n\n  return sendMessage;\n};\n"],"names":[],"mappings":";;AAWA,MAAM,gBAAmB,GAAA,CACvB,OACA,EAAA,EAAA,EACA,IACG,KAAA;AACH,EAAI,IAAA,EAAA,IAAM,OAAQ,CAAA,QAAA,KAAa,EAAI,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA,aACE,OAAQ,CAAA,IAAA,IAAQ,MAAM,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA;AAAA;AAET,EAAO,OAAA,KAAA;AACT,CAAA;AAEO,MAAM,uBAA0B,GAAA,CACrC,EACA,EAAA,IAAA,EACA,iBACG,KAAA;AACH,EAAA,MAAM,sBACJ,MAAkD,EAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,gBAAA,GACJ,IAAI,gBAAA,CAAiB,KAAK,CAAA;AAC5B,IAAiB,gBAAA,CAAA,SAAA,GAAY,CAAC,GAAQ,KAAA;AACpC,MAAA,IAAI,gBAAiB,CAAA,GAAA,CAAI,IAAM,EAAA,EAAA,EAAI,IAAI,CAAG,EAAA;AACxC,QAAA,iBAAA,GAAoB,IAAI,IAAI,CAAA;AAAA;AAC9B,KACF;AACA,IAAA,mBAAA,CAAoB,OAAU,GAAA,gBAAA;AAC9B,IAAA,OAAO,MAAM;AACX,MAAA,gBAAA,CAAiB,KAAM,EAAA;AACvB,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA,CAAA;AAAA,KAChC;AAAA,GACC,EAAA,CAAC,EAAI,EAAA,iBAAA,EAAmB,IAAI,CAAC,CAAA;AAEhC,EAAM,MAAA,WAAA,GAAc,WAAY,CAAA,CAAC,OAAkC,KAAA;AACjE,IAAoB,mBAAA,CAAA,OAAA,EAAS,YAAY,OAAO,CAAA;AAAA,GAClD,EAAG,EAAE,CAAA;AAEL,EAAO,OAAA,WAAA;AACT;;;;"}

package/esm/layout-view/useViewResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewResize.js","sources":["../../src/layout-view/useViewResize.ts"],"sourcesContent":["import { useResizeObserver, WidthHeight } from \"../responsive\";\nimport { RefObject, useCallback, useRef } from \"react\";\n\nconst NO_MEASUREMENT: string[] = [];\n\ntype size = {\n  height?: number;\n  width?: number;\n};\n\nexport interface ViewResizeHookProps {\n  mainRef: RefObject<HTMLDivElement>;\n  resize?: \"defer\" | \"responsive\";\n  rootRef: RefObject<HTMLDivElement>;\n}\n\nexport const useViewResize = ({\n  mainRef,\n  resize = \"responsive\",\n  rootRef,\n}: ViewResizeHookProps) => {\n  const deferResize = resize === \"defer\";\n\n  const mainSize = useRef<size>({});\n  const resizeHandle = useRef<number>();\n\n  const setMainSize = useCallback(() => {\n    if (mainRef.current) {\n      mainRef.current.style.height = mainSize.current.height + \"px\";\n      mainRef.current.style.width = mainSize.current.width + \"px\";\n    }\n    resizeHandle.current = undefined;\n  }, [mainRef]);\n\n  const onResize = useCallback(\n    ({ height, width }) => {\n      mainSize.current.height = height;\n      mainSize.current.width = width;\n      if (resizeHandle.current !== null) {\n        clearTimeout(resizeHandle.current);\n      }\n      resizeHandle.current = window.setTimeout(setMainSize, 40);\n    },\n    [setMainSize]\n  );\n\n  useResizeObserver(\n    rootRef,\n    deferResize ? WidthHeight : NO_MEASUREMENT,\n    onResize,\n    deferResize\n  );\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,iBAA2B,EAAC,CAAA;AAa3B,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,MAAS,GAAA,YAAA;AAAA,EACT,OAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,cAAc,MAAW,KAAA,OAAA,CAAA;AAE/B,EAAM,MAAA,QAAA,GAAW,MAAa,CAAA,EAAE,CAAA,CAAA;AAChC,EAAA,MAAM,eAAe,MAAe,EAAA,CAAA;AAEpC,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,MAAS,GAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,IAAA,CAAA;AACzD,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,KAAQ,GAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,IAAA,CAAA;AAAA,KACzD;AACA,IAAA,YAAA,CAAa,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAY,KAAA;AACrB,MAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,MAAA,CAAA;AAC1B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,KAAA,CAAA;AACzB,MAAI,IAAA,YAAA,CAAa,YAAY,IAAM,EAAA;AACjC,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA,CAAA;AAAA,OACnC;AACA,MAAA,YAAA,CAAa,OAAU,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAa,EAAE,CAAA,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,iBAAA;AAAA,IACE,OAAA;AAAA,IACA,cAAc,WAAc,GAAA,cAAA;AAAA,IAC5B,QAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useViewResize.js","sources":["../../src/layout-view/useViewResize.ts"],"sourcesContent":["import { useResizeObserver, WidthHeight } from \"../responsive\";\nimport { RefObject, useCallback, useRef } from \"react\";\n\nconst NO_MEASUREMENT: string[] = [];\n\ntype size = {\n  height?: number;\n  width?: number;\n};\n\nexport interface ViewResizeHookProps {\n  mainRef: RefObject<HTMLDivElement>;\n  resize?: \"defer\" | \"responsive\";\n  rootRef: RefObject<HTMLDivElement>;\n}\n\nexport const useViewResize = ({\n  mainRef,\n  resize = \"responsive\",\n  rootRef,\n}: ViewResizeHookProps) => {\n  const deferResize = resize === \"defer\";\n\n  const mainSize = useRef<size>({});\n  const resizeHandle = useRef<number>();\n\n  const setMainSize = useCallback(() => {\n    if (mainRef.current) {\n      mainRef.current.style.height = mainSize.current.height + \"px\";\n      mainRef.current.style.width = mainSize.current.width + \"px\";\n    }\n    resizeHandle.current = undefined;\n  }, [mainRef]);\n\n  const onResize = useCallback(\n    ({ height, width }) => {\n      mainSize.current.height = height;\n      mainSize.current.width = width;\n      if (resizeHandle.current !== null) {\n        clearTimeout(resizeHandle.current);\n      }\n      resizeHandle.current = window.setTimeout(setMainSize, 40);\n    },\n    [setMainSize]\n  );\n\n  useResizeObserver(\n    rootRef,\n    deferResize ? WidthHeight : NO_MEASUREMENT,\n    onResize,\n    deferResize\n  );\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,iBAA2B,EAAC;AAa3B,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,MAAS,GAAA,YAAA;AAAA,EACT;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,cAAc,MAAW,KAAA,OAAA;AAE/B,EAAM,MAAA,QAAA,GAAW,MAAa,CAAA,EAAE,CAAA;AAChC,EAAA,MAAM,eAAe,MAAe,EAAA;AAEpC,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,MAAS,GAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,IAAA;AACzD,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,KAAQ,GAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,IAAA;AAAA;AAEzD,IAAA,YAAA,CAAa,OAAU,GAAA,KAAA,CAAA;AAAA,GACzB,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAY,KAAA;AACrB,MAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,MAAA;AAC1B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,KAAA;AACzB,MAAI,IAAA,YAAA,CAAa,YAAY,IAAM,EAAA;AACjC,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA;AAEnC,MAAA,YAAA,CAAa,OAAU,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAa,EAAE,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,iBAAA;AAAA,IACE,OAAA;AAAA,IACA,cAAc,WAAc,GAAA,cAAA;AAAA,IAC5B,QAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/layout-view-actions/ViewContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewContext.js","sources":["../../src/layout-view-actions/ViewContext.ts"],"sourcesContent":["import React, { SyntheticEvent, useContext } from \"react\";\nimport type { ViewAction } from \"../layout-view\";\n\nexport type QueryReponse = { [key: string]: unknown };\n\nexport type ViewDispatch = <Action extends ViewAction = ViewAction>(\n  action: Action,\n  evt?: SyntheticEvent\n) => Promise<boolean | QueryReponse | void>;\n\n/**\n * This API is available to any Feature hosted within Vuu (as all Features are wrapped\n * with View component). It offers metadata about the View as well as access to the\n * Vuu persistencew API;\n */\nexport interface ViewContextAPI {\n  /**\n   * dispatcher for View actions. These are a subset of LayoutActions, specifically for\n   * View manipulation\n   */\n  dispatch?: ViewDispatch | null;\n  id?: string;\n  load?: (key?: string) => unknown;\n  loadSession?: (key?: string) => unknown;\n  onConfigChange?: (config: unknown) => void;\n  path?: string;\n  purge?: (key: string) => void;\n  save?: (state: unknown, key: string) => void;\n  saveSession?: (state: unknown, key: string) => void;\n  setComponentProps: (props: { [key: string]: unknown }) => void;\n  title?: string;\n}\n\nconst NO_CONTEXT = { dispatch: null } as ViewContextAPI;\nexport const ViewContext = React.createContext<ViewContextAPI>(NO_CONTEXT);\n\nexport const useViewDispatch = () => {\n  const context = useContext(ViewContext);\n  return context?.dispatch ?? null;\n};\n\nexport const useViewContext = () => useContext(ViewContext);\n"],"names":[],"mappings":";;AAiCA,MAAM,UAAA,GAAa,EAAE,QAAA,EAAU,IAAK,EAAA,CAAA;AACvB,MAAA,WAAA,GAAc,KAAM,CAAA,aAAA,CAA8B,UAAU,EAAA;AAElE,MAAM,kBAAkB,MAAM;AACnC,EAAM,MAAA,OAAA,GAAU,WAAW,WAAW,CAAA,CAAA;AACtC,EAAA,OAAO,SAAS,QAAY,IAAA,IAAA,CAAA;AAC9B,EAAA;AAEa,MAAA,cAAA,GAAiB,MAAM,UAAA,CAAW,WAAW;;;;"}
+{"version":3,"file":"ViewContext.js","sources":["../../src/layout-view-actions/ViewContext.ts"],"sourcesContent":["import React, { SyntheticEvent, useContext } from \"react\";\nimport type { ViewAction } from \"../layout-view\";\n\nexport type QueryReponse = { [key: string]: unknown };\n\nexport type ViewDispatch = <Action extends ViewAction = ViewAction>(\n  action: Action,\n  evt?: SyntheticEvent\n) => Promise<boolean | QueryReponse | void>;\n\n/**\n * This API is available to any Feature hosted within Vuu (as all Features are wrapped\n * with View component). It offers metadata about the View as well as access to the\n * Vuu persistencew API;\n */\nexport interface ViewContextAPI {\n  /**\n   * dispatcher for View actions. These are a subset of LayoutActions, specifically for\n   * View manipulation\n   */\n  dispatch?: ViewDispatch | null;\n  id?: string;\n  load?: (key?: string) => unknown;\n  loadSession?: (key?: string) => unknown;\n  onConfigChange?: (config: unknown) => void;\n  path?: string;\n  purge?: (key: string) => void;\n  save?: (state: unknown, key: string) => void;\n  saveSession?: (state: unknown, key: string) => void;\n  setComponentProps: (props: { [key: string]: unknown }) => void;\n  title?: string;\n}\n\nconst NO_CONTEXT = { dispatch: null } as ViewContextAPI;\nexport const ViewContext = React.createContext<ViewContextAPI>(NO_CONTEXT);\n\nexport const useViewDispatch = () => {\n  const context = useContext(ViewContext);\n  return context?.dispatch ?? null;\n};\n\nexport const useViewContext = () => useContext(ViewContext);\n"],"names":[],"mappings":";;AAiCA,MAAM,UAAA,GAAa,EAAE,QAAA,EAAU,IAAK,EAAA;AACvB,MAAA,WAAA,GAAc,KAAM,CAAA,aAAA,CAA8B,UAAU;AAElE,MAAM,kBAAkB,MAAM;AACnC,EAAM,MAAA,OAAA,GAAU,WAAW,WAAW,CAAA;AACtC,EAAA,OAAO,SAAS,QAAY,IAAA,IAAA;AAC9B;AAEa,MAAA,cAAA,GAAiB,MAAM,UAAA,CAAW,WAAW;;;;"}

package/esm/layout-view-actions/useViewActionDispatcher.js

@@ -81,9 +81,8 @@ const useViewActionDispatcher = (id, rootRef, viewPath, dropTargets) => {
     async (action, evt) => {
       const { type } = action;
       switch (type) {
-        case "maximize":
-        case "minimize":
-        case "restore":
+        case "collapse":
+        case "expand":
           return dispatchLayoutAction({ type, path: action.path ?? viewPath });
         case "remove":
           return handleRemove();

package/esm/layout-view-actions/useViewActionDispatcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewActionDispatcher.js","sources":["../../src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ReactElement,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider/LayoutProvider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { QueryReponse, ViewDispatch } from \"./ViewContext\";\nimport type {\n  BroadcastMessageHandler,\n  Contribution,\n  ContributionLocation,\n  ViewAction,\n} from \"../layout-view\";\nimport { useViewBroadcastChannel } from \"../layout-view/useViewBroadcastChannel\";\n\nexport const useViewActionDispatcher = (\n  id: string,\n  rootRef: RefObject<HTMLDivElement>,\n  viewPath?: string,\n  dropTargets?: string[],\n): [ViewDispatch, Contribution[] | undefined] => {\n  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =\n    usePersistentState();\n\n  const [contributions, setContributions] = useState<Contribution[]>(\n    loadSessionState(id, \"contributions\") ?? [],\n  );\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const updateContributions = useCallback(\n    (location: ContributionLocation, content: ReactElement) => {\n      const updatedContributions = contributions.concat([\n        { location, content },\n      ]);\n      saveSessionState(id, \"contributions\", updatedContributions);\n      setContributions(updatedContributions);\n    },\n    [contributions, id, saveSessionState],\n  );\n\n  const clearContributions = useCallback(() => {\n    purgeSessionState(id, \"contributions\");\n    setContributions([]);\n  }, [id, purgeSessionState]);\n\n  // This assumes datasource has been stored in session state\n  // we should extend to accommodate multiple dataSources\n  const unsubscribeAndClearState = useCallback(() => {\n    const ds = loadSessionState(id, \"data-source\") as DataSource;\n    if (ds) {\n      ds.unsubscribe();\n    }\n    purgeSessionState(id);\n    purgeState(id);\n  }, [id, loadSessionState, purgeSessionState, purgeState]);\n\n  const handleRemove = useCallback(() => {\n    unsubscribeAndClearState();\n    dispatchLayoutAction({ type: \"remove\", path: viewPath });\n  }, [unsubscribeAndClearState, dispatchLayoutAction, viewPath]);\n\n  const handleMouseDown = useCallback(\n    async (evt, index, preDragActivity): Promise<boolean> => {\n      evt.stopPropagation();\n      const dragRect = rootRef.current?.getBoundingClientRect();\n      return new Promise((resolve, reject) => {\n        dispatchLayoutAction({\n          type: \"drag-start\",\n          evt,\n          path: index === undefined ? viewPath : `${viewPath}.${index}`,\n          dragRect,\n          preDragActivity,\n          dropTargets,\n          resolveDragStart: resolve,\n          rejectDragStart: reject,\n        } as DragStartAction);\n      });\n    },\n    [rootRef, dispatchLayoutAction, viewPath, dropTargets],\n  );\n\n  const handleMessageReceived = useCallback<BroadcastMessageHandler>(\n    (message) => {\n      switch (message.type) {\n        case \"highlight-on\":\n          rootRef?.current?.classList.add(\"vuuHighlighted\");\n          break;\n        case \"highlight-off\":\n          rootRef?.current?.classList.remove(\"vuuHighlighted\");\n          break;\n        case \"layout-closed\":\n          unsubscribeAndClearState();\n          break;\n        default:\n          console.log(`received ${message.type} message`);\n      }\n    },\n    [rootRef, unsubscribeAndClearState],\n  );\n\n  const sendMessage = useViewBroadcastChannel(\n    id,\n    viewPath,\n    handleMessageReceived,\n  );\n\n  const dispatchAction = useCallback(\n    async <A extends ViewAction = ViewAction>(\n      action: A,\n      evt?: SyntheticEvent,\n    ): Promise<boolean | QueryReponse | void> => {\n      const { type } = action;\n      switch (type) {\n        case \"maximize\":\n        case \"minimize\":\n        case \"restore\":\n          return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n        case \"remove\":\n          return handleRemove();\n        case \"mousedown\":\n          return handleMouseDown(evt, action.index, action.preDragActivity);\n        case \"add-toolbar-contribution\":\n          return updateContributions(action.location, action.content);\n        case \"remove-toolbar-contribution\":\n          return clearContributions();\n        case \"query\":\n          return dispatchLayoutAction({\n            type,\n            path: action.path,\n            query: action.query,\n          });\n        case \"broadcast-message\":\n          sendMessage(action.message);\n          break;\n\n        default: {\n          return undefined;\n        }\n      }\n    },\n    [\n      dispatchLayoutAction,\n      viewPath,\n      handleRemove,\n      handleMouseDown,\n      updateContributions,\n      clearContributions,\n      sendMessage,\n    ],\n  );\n\n  return [dispatchAction, contributions];\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useViewActionDispatcher.js","sources":["../../src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ReactElement,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider/LayoutProvider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { QueryReponse, ViewDispatch } from \"./ViewContext\";\nimport type {\n  BroadcastMessageHandler,\n  Contribution,\n  ContributionLocation,\n  ViewAction,\n} from \"../layout-view\";\nimport { useViewBroadcastChannel } from \"../layout-view/useViewBroadcastChannel\";\n\nexport const useViewActionDispatcher = (\n  id: string,\n  rootRef: RefObject<HTMLDivElement>,\n  viewPath?: string,\n  dropTargets?: string[],\n): [ViewDispatch, Contribution[] | undefined] => {\n  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =\n    usePersistentState();\n\n  const [contributions, setContributions] = useState<Contribution[]>(\n    loadSessionState(id, \"contributions\") ?? [],\n  );\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const updateContributions = useCallback(\n    (location: ContributionLocation, content: ReactElement) => {\n      const updatedContributions = contributions.concat([\n        { location, content },\n      ]);\n      saveSessionState(id, \"contributions\", updatedContributions);\n      setContributions(updatedContributions);\n    },\n    [contributions, id, saveSessionState],\n  );\n\n  const clearContributions = useCallback(() => {\n    purgeSessionState(id, \"contributions\");\n    setContributions([]);\n  }, [id, purgeSessionState]);\n\n  // This assumes datasource has been stored in session state\n  // we should extend to accommodate multiple dataSources\n  const unsubscribeAndClearState = useCallback(() => {\n    const ds = loadSessionState(id, \"data-source\") as DataSource;\n    if (ds) {\n      ds.unsubscribe();\n    }\n    purgeSessionState(id);\n    purgeState(id);\n  }, [id, loadSessionState, purgeSessionState, purgeState]);\n\n  const handleRemove = useCallback(() => {\n    unsubscribeAndClearState();\n    dispatchLayoutAction({ type: \"remove\", path: viewPath });\n  }, [unsubscribeAndClearState, dispatchLayoutAction, viewPath]);\n\n  const handleMouseDown = useCallback(\n    async (evt, index, preDragActivity): Promise<boolean> => {\n      evt.stopPropagation();\n      const dragRect = rootRef.current?.getBoundingClientRect();\n      return new Promise((resolve, reject) => {\n        dispatchLayoutAction({\n          type: \"drag-start\",\n          evt,\n          path: index === undefined ? viewPath : `${viewPath}.${index}`,\n          dragRect,\n          preDragActivity,\n          dropTargets,\n          resolveDragStart: resolve,\n          rejectDragStart: reject,\n        } as DragStartAction);\n      });\n    },\n    [rootRef, dispatchLayoutAction, viewPath, dropTargets],\n  );\n\n  const handleMessageReceived = useCallback<BroadcastMessageHandler>(\n    (message) => {\n      switch (message.type) {\n        case \"highlight-on\":\n          rootRef?.current?.classList.add(\"vuuHighlighted\");\n          break;\n        case \"highlight-off\":\n          rootRef?.current?.classList.remove(\"vuuHighlighted\");\n          break;\n        case \"layout-closed\":\n          unsubscribeAndClearState();\n          break;\n        default:\n          console.log(`received ${message.type} message`);\n      }\n    },\n    [rootRef, unsubscribeAndClearState],\n  );\n\n  const sendMessage = useViewBroadcastChannel(\n    id,\n    viewPath,\n    handleMessageReceived,\n  );\n\n  const dispatchAction = useCallback(\n    async <A extends ViewAction = ViewAction>(\n      action: A,\n      evt?: SyntheticEvent,\n    ): Promise<boolean | QueryReponse | void> => {\n      const { type } = action;\n      switch (type) {\n        case \"collapse\":\n        case \"expand\":\n          return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n        case \"remove\":\n          return handleRemove();\n        case \"mousedown\":\n          return handleMouseDown(evt, action.index, action.preDragActivity);\n        case \"add-toolbar-contribution\":\n          return updateContributions(action.location, action.content);\n        case \"remove-toolbar-contribution\":\n          return clearContributions();\n        case \"query\":\n          return dispatchLayoutAction({\n            type,\n            path: action.path,\n            query: action.query,\n          });\n        case \"broadcast-message\":\n          sendMessage(action.message);\n          break;\n\n        default: {\n          return undefined;\n        }\n      }\n    },\n    [\n      dispatchLayoutAction,\n      viewPath,\n      handleRemove,\n      handleMouseDown,\n      updateContributions,\n      clearContributions,\n      sendMessage,\n    ],\n  );\n\n  return [dispatchAction, contributions];\n};\n"],"names":[],"mappings":"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"}

package/esm/palette/Palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import {\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent, uuid } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  cloneElement,\n  memo,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n  const dolly = paletteItem.cloneNode(true) as HTMLElement;\n  dolly.id = \"\";\n  delete dolly.dataset.idx;\n  return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n  /**\n   * This is the payload that will be created when the\n   * palette item is dropped\n   */\n  component: ReactElement;\n  closeable?: boolean;\n  header?: boolean;\n  idx?: number;\n  resize?: \"defer\";\n  resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n  ({\n    className,\n    component,\n    idx,\n    resizeable,\n    header,\n    closeable,\n    ...props\n  }: PaletteItemProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-palette\",\n      css: paletteCss,\n      window: targetWindow,\n    });\n\n    return (\n      <ListItem\n        className={cx(\"vuuPaletteItem\", className)}\n        data-draggable\n        {...props}\n      />\n    );\n  },\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n  extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\"\n  > {\n  ListProps?: Partial<ListProps>;\n  ViewProps?: Partial<ViewProps>;\n  children: ReactElement[];\n  itemHeight?: number;\n  orientation: \"horizontal\" | \"vertical\";\n  selection?: string;\n}\n\nexport const Palette = ({\n  ListProps,\n  ViewProps,\n  children,\n  className,\n  itemHeight = 41,\n  orientation = \"horizontal\",\n  ...props\n}: PaletteProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const classBase = \"vuuPalette\";\n\n  function handleMouseDown(evt: MouseEvent) {\n    const target = evt.target as HTMLElement;\n    const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n    const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n    const {\n      props: { caption, component: payload, template, ...props },\n    } = children[idx];\n    const { ViewProps: componentViewProps } = payload.props;\n    const { height, left, top, width } =\n      listItemElement.getBoundingClientRect();\n    const id = uuid();\n    const identifiers = { id, key: id };\n    const component = template ? (\n      payload\n    ) : (\n      <View\n        {...ViewProps}\n        {...identifiers}\n        {...props}\n        {...componentViewProps}\n        title={props.label}\n      >\n        {payload}\n      </View>\n    );\n\n    dispatch({\n      dragRect: {\n        left,\n        top,\n        right: left + width,\n        bottom: top + 150,\n        width,\n        height,\n      },\n      dragElement: clonePaletteItem(listItemElement),\n      evt: evt.nativeEvent,\n      instructions: {\n        DoNotRemove: true,\n        DoNotTransform: true,\n        DriftHomeIfNoDropTarget: true,\n        RemoveDraggableOnDragEnd: true,\n        dragThreshold: 10,\n      },\n      path: \"*\",\n      payload: component,\n      type: \"drag-start\",\n    });\n  }\n\n  return (\n    <List\n      {...ListProps}\n      {...props}\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      itemHeight={itemHeight}\n      selected={null}\n    >\n      {children.map((child, idx) =>\n        child.type === PaletteItem\n          ? cloneElement(child, {\n              key: idx,\n              onMouseDown: handleMouseDown,\n            })\n          : child,\n      )}\n    </List>\n  );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["ListProps","ViewProps","props","View"],"mappings":"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"}
+{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import {\n  List,\n  ListItem,\n  ListItemProps,\n  ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent, uuid } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  cloneElement,\n  memo,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n  const dolly = paletteItem.cloneNode(true) as HTMLElement;\n  dolly.id = \"\";\n  delete dolly.dataset.idx;\n  return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n  /**\n   * This is the payload that will be created when the\n   * palette item is dropped\n   */\n  component: ReactElement;\n  closeable?: boolean;\n  header?: boolean;\n  idx?: number;\n  resize?: \"defer\";\n  resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n  ({\n    className,\n    component,\n    idx,\n    resizeable,\n    header,\n    closeable,\n    ...props\n  }: PaletteItemProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-palette\",\n      css: paletteCss,\n      window: targetWindow,\n    });\n\n    return (\n      <ListItem\n        className={cx(\"vuuPaletteItem\", className)}\n        data-draggable\n        {...props}\n      />\n    );\n  },\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n  extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onDragStart\" | \"onDrop\" | \"onSelect\"\n  > {\n  ListProps?: Partial<ListProps>;\n  ViewProps?: Partial<ViewProps>;\n  children: ReactElement[];\n  itemHeight?: number;\n  orientation: \"horizontal\" | \"vertical\";\n  selection?: string;\n}\n\nexport const Palette = ({\n  ListProps,\n  ViewProps,\n  children,\n  className,\n  itemHeight = 41,\n  orientation = \"horizontal\",\n  ...props\n}: PaletteProps) => {\n  const dispatch = useLayoutProviderDispatch();\n  const classBase = \"vuuPalette\";\n\n  function handleMouseDown(evt: MouseEvent) {\n    const target = evt.target as HTMLElement;\n    const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n    const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n    const {\n      props: { caption, component: payload, template, ...props },\n    } = children[idx];\n    const { ViewProps: componentViewProps } = payload.props;\n    const { height, left, top, width } =\n      listItemElement.getBoundingClientRect();\n    const id = uuid();\n    const identifiers = { id, key: id };\n    const component = template ? (\n      payload\n    ) : (\n      <View\n        {...ViewProps}\n        {...identifiers}\n        {...props}\n        {...componentViewProps}\n        title={props.label}\n      >\n        {payload}\n      </View>\n    );\n\n    dispatch({\n      dragRect: {\n        left,\n        top,\n        right: left + width,\n        bottom: top + 150,\n        width,\n        height,\n      },\n      dragElement: clonePaletteItem(listItemElement),\n      evt: evt.nativeEvent,\n      instructions: {\n        DoNotRemove: true,\n        DoNotTransform: true,\n        DriftHomeIfNoDropTarget: true,\n        RemoveDraggableOnDragEnd: true,\n        dragThreshold: 10,\n      },\n      path: \"*\",\n      payload: component,\n      type: \"drag-start\",\n    });\n  }\n\n  return (\n    <List\n      {...ListProps}\n      {...props}\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      itemHeight={itemHeight}\n      selected={null}\n    >\n      {children.map((child, idx) =>\n        child.type === PaletteItem\n          ? cloneElement(child, {\n              key: idx,\n              onMouseDown: handleMouseDown,\n            })\n          : child,\n      )}\n    </List>\n  );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["ListProps","ViewProps","props","View"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,gBAAA,GAAmB,CAAC,WAA6B,KAAA;AACrD,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,SAAA,CAAU,IAAI,CAAA;AACxC,EAAA,KAAA,CAAM,EAAK,GAAA,EAAA;AACX,EAAA,OAAO,MAAM,OAAQ,CAAA,GAAA;AACrB,EAAO,OAAA,KAAA;AACT,CAAA;AAeO,MAAM,WAAc,GAAA,IAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAA,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAG,CAAA,gBAAA,EAAkB,SAAS,CAAA;AAAA,QACzC,gBAAc,EAAA,IAAA;AAAA,QACb,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;AAenB,MAAM,UAAU,CAAC;AAAA,EACtB,SAAAA,EAAAA,UAAAA;AAAA,EACA,SAAAC,EAAAA,UAAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAa,GAAA,EAAA;AAAA,EACb,WAAc,GAAA,YAAA;AAAA,EACd,GAAG;AACL,CAAoB,KAAA;AAClB,EAAA,MAAM,WAAW,yBAA0B,EAAA;AAC3C,EAAA,MAAM,SAAY,GAAA,YAAA;AAElB,EAAA,SAAS,gBAAgB,GAAiB,EAAA;AACxC,IAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,IAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,OAAA,CAAQ,iBAAiB,CAAA;AACxD,IAAA,MAAM,GAAM,GAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,EAAS,SAAS,IAAI,CAAA;AAC3D,IAAM,MAAA;AAAA,MACJ,OAAO,EAAE,OAAA,EAAS,WAAW,OAAS,EAAA,QAAA,EAAU,GAAGC,MAAM;AAAA,KAC3D,GAAI,SAAS,GAAG,CAAA;AAChB,IAAA,MAAM,EAAE,SAAA,EAAW,kBAAmB,EAAA,GAAI,OAAQ,CAAA,KAAA;AAClD,IAAA,MAAM,EAAE,MAAQ,EAAA,IAAA,EAAM,KAAK,KAAM,EAAA,GAC/B,gBAAgB,qBAAsB,EAAA;AACxC,IAAA,MAAM,KAAK,IAAK,EAAA;AAChB,IAAA,MAAM,WAAc,GAAA,EAAE,EAAI,EAAA,GAAA,EAAK,EAAG,EAAA;AAClC,IAAM,MAAA,SAAA,GAAY,WAChB,OAEA,mBAAA,GAAA;AAAA,MAACC,QAAA;AAAA,MAAA;AAAA,QACE,GAAGF,UAAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACH,GAAGC,MAAAA;AAAA,QACH,GAAG,kBAAA;AAAA,QACJ,OAAOA,MAAM,CAAA,KAAA;AAAA,QAEZ,QAAA,EAAA;AAAA;AAAA,KACH;AAGF,IAAS,QAAA,CAAA;AAAA,MACP,QAAU,EAAA;AAAA,QACR,IAAA;AAAA,QACA,GAAA;AAAA,QACA,OAAO,IAAO,GAAA,KAAA;AAAA,QACd,QAAQ,GAAM,GAAA,GAAA;AAAA,QACd,KAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAa,iBAAiB,eAAe,CAAA;AAAA,MAC7C,KAAK,GAAI,CAAA,WAAA;AAAA,MACT,YAAc,EAAA;AAAA,QACZ,WAAa,EAAA,IAAA;AAAA,QACb,cAAgB,EAAA,IAAA;AAAA,QAChB,uBAAyB,EAAA,IAAA;AAAA,QACzB,wBAA0B,EAAA,IAAA;AAAA,QAC1B,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA,GAAA;AAAA,MACN,OAAS,EAAA,SAAA;AAAA,MACT,IAAM,EAAA;AAAA,KACP,CAAA;AAAA;AAGH,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAGF,UAAAA;AAAA,MACH,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,UAAA;AAAA,MACA,QAAU,EAAA,IAAA;AAAA,MAET,QAAS,EAAA,QAAA,CAAA,GAAA;AAAA,QAAI,CAAC,KAAO,EAAA,GAAA,KACpB,MAAM,IAAS,KAAA,WAAA,GACX,aAAa,KAAO,EAAA;AAAA,UAClB,GAAK,EAAA,GAAA;AAAA,UACL,WAAa,EAAA;AAAA,SACd,CACD,GAAA;AAAA;AACN;AAAA,GACF;AAEJ;AAEA,iBAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}

package/esm/placeholder/LayoutStartPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStartPanel.js","sources":["../../src/placeholder/LayoutStartPanel.tsx"],"sourcesContent":["import { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport {\n  QueryReponse,\n  useViewContext,\n} from \"../layout-view-actions/ViewContext\";\n\nimport layoutStartPanelCss from \"./LayoutStartPanel.css\";\n\nconst classBase = \"vuuLayoutStartPanel\";\n\nexport interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {\n  label?: string;\n}\n\nexport const LayoutStartPanel = (htmlAttributes: LayoutStartPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-start-panel\",\n    css: layoutStartPanelCss,\n    window: targetWindow,\n  });\n\n  const { dispatch, path } = useViewContext();\n  const [displayState, setDisplayState] = useState<\n    \"initial\" | \"nested\" | undefined\n  >();\n\n  useMemo(() => {\n    dispatch?.({\n      type: \"query\",\n      path,\n      query: \"PARENT_CONTAINER\",\n    }).then((response) => {\n      if (\n        (response as QueryReponse)?.parentContainerId ===\n        VuuShellLocation.Workspace\n      ) {\n        setDisplayState(\"initial\");\n      } else {\n        setDisplayState(\"nested\");\n      }\n    });\n  }, [dispatch, path]);\n\n  if (displayState === undefined) {\n    return null;\n  }\n\n  const showInitialState = displayState === \"initial\";\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      {showInitialState ? (\n        <>\n          <div className={`${classBase}-title`}>Start by adding a table</div>\n          <div className={`${classBase}-text`}>\n            To add a table, drag any of the Vuu Tables to this area or click the\n            button below\n          </div>\n        </>\n      ) : null}\n      <IconButton\n        className={`${classBase}-addButton`}\n        icon=\"add\"\n        variant=\"cta\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAI,cAAe,EAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAEtC,EAAA,CAAA;AAEF,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,IAAA;AAAA,MACA,KAAO,EAAA,kBAAA;AAAA,KACR,CAAA,CAAE,IAAK,CAAA,CAAC,QAAa,KAAA;AACpB,MACG,IAAA,QAAA,EAA2B,iBAC5B,KAAA,gBAAA,CAAiB,SACjB,EAAA;AACA,QAAA,eAAA,CAAgB,SAAS,CAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,eAAA,CAAgB,QAAQ,CAAA,CAAA;AAAA,OAC1B;AAAA,KACD,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,IAAI,CAAC,CAAA,CAAA;AAEnB,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,mBAAmB,YAAiB,KAAA,SAAA,CAAA;AAE1C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAuB,EAAA,yBAAA,EAAA,CAAA;AAAA,0BAC5D,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA,CAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,IAAK,EAAA,KAAA;AAAA,QACL,OAAQ,EAAA,KAAA;AAAA,OAAA;AAAA,KACV;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LayoutStartPanel.js","sources":["../../src/placeholder/LayoutStartPanel.tsx"],"sourcesContent":["import { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport {\n  QueryReponse,\n  useViewContext,\n} from \"../layout-view-actions/ViewContext\";\n\nimport layoutStartPanelCss from \"./LayoutStartPanel.css\";\n\nconst classBase = \"vuuLayoutStartPanel\";\n\nexport interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {\n  label?: string;\n}\n\nexport const LayoutStartPanel = (htmlAttributes: LayoutStartPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-start-panel\",\n    css: layoutStartPanelCss,\n    window: targetWindow,\n  });\n\n  const { dispatch, path } = useViewContext();\n  const [displayState, setDisplayState] = useState<\n    \"initial\" | \"nested\" | undefined\n  >();\n\n  useMemo(() => {\n    dispatch?.({\n      type: \"query\",\n      path,\n      query: \"PARENT_CONTAINER\",\n    }).then((response) => {\n      if (\n        (response as QueryReponse)?.parentContainerId ===\n        VuuShellLocation.Workspace\n      ) {\n        setDisplayState(\"initial\");\n      } else {\n        setDisplayState(\"nested\");\n      }\n    });\n  }, [dispatch, path]);\n\n  if (displayState === undefined) {\n    return null;\n  }\n\n  const showInitialState = displayState === \"initial\";\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      {showInitialState ? (\n        <>\n          <div className={`${classBase}-title`}>Start by adding a table</div>\n          <div className={`${classBase}-text`}>\n            To add a table, drag any of the Vuu Tables to this area or click the\n            button below\n          </div>\n        </>\n      ) : null}\n      <IconButton\n        className={`${classBase}-addButton`}\n        icon=\"add\"\n        variant=\"cta\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAI,cAAe,EAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAEtC,EAAA;AAEF,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,IAAA;AAAA,MACA,KAAO,EAAA;AAAA,KACR,CAAA,CAAE,IAAK,CAAA,CAAC,QAAa,KAAA;AACpB,MACG,IAAA,QAAA,EAA2B,iBAC5B,KAAA,gBAAA,CAAiB,SACjB,EAAA;AACA,QAAA,eAAA,CAAgB,SAAS,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,eAAA,CAAgB,QAAQ,CAAA;AAAA;AAC1B,KACD,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,IAAI,CAAC,CAAA;AAEnB,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,mBAAmB,YAAiB,KAAA,SAAA;AAE1C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAuB,EAAA,yBAAA,EAAA,CAAA;AAAA,0BAC5D,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,IAAK,EAAA,KAAA;AAAA,QACL,OAAQ,EAAA;AAAA;AAAA;AACV,GACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/placeholder/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","sources":["../../src/placeholder/Placeholder.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { LayoutStartPanel } from \"./LayoutStartPanel\";\nimport { View } from \"../layout-view/View\";\nimport type { ViewProps } from \"../layout-view/viewTypes\";\n\nimport placeholderCss from \"./Placeholder.css\";\n\nconst classBase = \"vuuPlaceholder\";\n\nexport interface PlaceholderProps extends ViewProps {\n  closeable?: boolean;\n  flexFill?: boolean;\n  resizeable?: boolean;\n  showStartMenu?: boolean;\n  /**\n   * shim is only when we're dealing with intrinsically sized children, which is never\n   * in an actual application. Intrinsic sizing is still experimental.\n   */\n  shim?: boolean;\n}\n\nconst PlaceholderCore = ({ showStartMenu = true }: PlaceholderProps) => {\n  return <>{showStartMenu ? <LayoutStartPanel /> : null}</>;\n};\n\nexport const Placeholder = ({\n  className: classNameProp,\n  showStartMenu,\n  ...viewProps\n}: PlaceholderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-placeholder\",\n    css: placeholderCss,\n    window: targetWindow,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  return (\n    <View {...viewProps} className={className} data-placeholder resizeable>\n      <PlaceholderCore showStartMenu={showStartMenu} />\n    </View>\n  );\n};\n\nPlaceholder.displayName = \"Placeholder\";\nregisterComponent(\"Placeholder\", Placeholder, \"component\");\n"],"names":["View"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAU,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiB,GAAA,CAAA,gBAAA,EAAA,EAAiB,IAAK,IAAK,EAAA,CAAA,CAAA;AACxD,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAE7C,EAAA,uBACG,GAAA,CAAAA,QAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAC1B,iBAAkB,CAAA,aAAA,EAAe,aAAa,WAAW,CAAA;;;;"}
+{"version":3,"file":"Placeholder.js","sources":["../../src/placeholder/Placeholder.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { LayoutStartPanel } from \"./LayoutStartPanel\";\nimport { View } from \"../layout-view/View\";\nimport type { ViewProps } from \"../layout-view/viewTypes\";\n\nimport placeholderCss from \"./Placeholder.css\";\n\nconst classBase = \"vuuPlaceholder\";\n\nexport interface PlaceholderProps extends ViewProps {\n  closeable?: boolean;\n  flexFill?: boolean;\n  resizeable?: boolean;\n  showStartMenu?: boolean;\n  /**\n   * shim is only when we're dealing with intrinsically sized children, which is never\n   * in an actual application. Intrinsic sizing is still experimental.\n   */\n  shim?: boolean;\n}\n\nconst PlaceholderCore = ({ showStartMenu = true }: PlaceholderProps) => {\n  return <>{showStartMenu ? <LayoutStartPanel /> : null}</>;\n};\n\nexport const Placeholder = ({\n  className: classNameProp,\n  showStartMenu,\n  ...viewProps\n}: PlaceholderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-placeholder\",\n    css: placeholderCss,\n    window: targetWindow,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  return (\n    <View {...viewProps} className={className} data-placeholder resizeable>\n      <PlaceholderCore showStartMenu={showStartMenu} />\n    </View>\n  );\n};\n\nPlaceholder.displayName = \"Placeholder\";\nregisterComponent(\"Placeholder\", Placeholder, \"component\");\n"],"names":["View"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,gBAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAU,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiB,GAAA,CAAA,gBAAA,EAAA,EAAiB,IAAK,IAAK,EAAA,CAAA;AACxD,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,GAAG;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAE7C,EAAA,uBACG,GAAA,CAAAA,QAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;AAC1B,iBAAkB,CAAA,aAAA,EAAe,aAAa,WAAW,CAAA;;;;"}

package/esm/responsive/breakpoints.js

@@ -9,7 +9,7 @@ function breakpointReader(themeName, defaultBreakpoints) {
       return val ? parseInt(val) : void 0;
     }
   };
-  return themeRoot ? new Proxy(getComputedStyle(themeRoot), handler) : defaultBreakpoints ?? {};
+  return themeRoot ? new Proxy(getComputedStyle(themeRoot), handler) : {};
 }
 const byDescendingStopSize = ([, s1], [, s2]) => s2 - s1;
 const breakpointRamp = (breakpoints) => Object.entries(breakpoints).sort(byDescendingStopSize).map(([name, value], i, all) => [

package/esm/responsive/breakpoints.js.map

@@ -1 +1 @@
-{"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;;;;"}
+{"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;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;AAAA,OACvC;AACA,MAAO,OAAA,GAAA,GAAM,QAAS,CAAA,GAAG,CAAI,GAAA,KAAA,CAAA;AAAA;AAC/B,GACF;AAEA,EAAO,OAAA,SAAA,GACH,IAAI,KAAM,CAAA,gBAAA,CAAiB,SAAS,CAAG,EAAA,OAAO,CAC9C,GAAsB,EAAC;AAC7B;AAEA,MAAM,oBAAA,GAAuB,CAC3B,GAAG,EAAE,GACL,GAAG,EAAE,CAAA,KACF,EAAK,GAAA,EAAA;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;AACvC,CAAC;AAEL,IAAI,mBAA+C,GAAA,IAAA;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;AACzD,EAAA,OAAO,eAAe,EAAE,EAAA,EAAI,IAAI,EAAI,EAAA,EAAA,EAAI,IAAI,CAAA;AAC9C,CAAA;AAGa,MAAA,cAAA,GAAiB,CAAC,SAAuB,KAAA;AACpD,EAAA,IAAI,wBAAwB,IAAM,EAAA;AAChC,IAAA,mBAAA,GAAsB,gBAAgB,SAAS,CAAA;AAAA;AAEjD,EAAO,OAAA,mBAAA;AACT;;;;"}

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

@@ -1 +1 @@
-{"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,CAAA;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,IAAA;AAAA,GACxB,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACpC,EAAA,MAAM,cAAiB,GAAA,MAAA;AAAA,IACrB,eAAkB,GAAA,cAAA,CAAe,eAAe,CAAA,GAAIA,cAAuB,EAAA;AAAA,GAC7E,CAAA;AAGA,EAAM,MAAA,OAAA,GAAU,OAAO,IAAI,CAAA,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,CAAA;AAAA,WACT;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;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,WAAA;AAAA,SACvC,CAAA;AACA,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,MAAM,KAAK,QAAQ,CAAI,GAAA,cAAA,CAAA;AACvB,UAAA,OAAO,KAAQ,GAAA,QAAA,CAAA;AAAA,SACjB;AAAA,OACK,MAAA;AACL,QAAA,OAAO,iBAAiB,KAAK,CAAA,CAAA;AAAA,OAC/B;AAEA,MAAO,OAAA,KAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,aAAa,gBAAgB,CAAA;AAAA,GAChC,CAAA;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,CAAA;AACxD,MAAI,IAAA,MAAA,KAAW,QAAQ,OAAS,EAAA;AAC9B,QAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAClB,QAAA,kBAAA,CAAmB,MAAM,CAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA,IACA,IAAA;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SAAS,GAAO,IAAA,OAAA,CAAA;AACtB,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAA,MAAM,WAAW,OAAQ,CAAA,OAAA,CAAA;AACzB,MAAA,IAAI,eAAe,OAAS,EAAA;AAK1B,QAAM,MAAA,EAAE,WAAY,EAAA,GAAI,MAAO,CAAA,OAAA,CAAA;AAC/B,QAAM,MAAA,MAAA,GAAS,4BAA4B,WAAW,CAAA,CAAA;AACtD,QAAA,OAAA,CAAQ,OAAU,GAAA,MAAA,CAAA;AAElB,QAAA,IAAI,WAAW,QAAU,EAAA;AACvB,UAAA,kBAAA,CAAmB,MAAM,CAAA,CAAA;AAAA,SAC3B;AAAA,OACF;AAAA,KACF;AAAA,GACC,EAAA,CAAC,kBAAoB,EAAA,2BAAA,EAA6B,GAAG,CAAC,CAAA,CAAA;AAGzD,EAAO,OAAA,eAAA,CAAA;AACT;;;;"}
+{"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/esm/responsive/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../src/responsive/useResizeObserver.ts"],"sourcesContent":["/* eslint-disable no-restricted-syntax */\nimport { useCallback, useLayoutEffect, useRef, RefObject } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  scrollHeight?: T;\n  scrollWidth?: T;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  contentRect: DOMRectReadOnly,\n  dimension: measuredDimension\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return contentRect.height;\n    case \"scrollHeight\":\n      return element.scrollHeight;\n    case \"scrollWidth\":\n      return element.scrollWidth;\n    case \"width\":\n      return contentRect.width;\n    default:\n      return 0;\n  }\n};\n\nexport const resizeObserver = new ResizeObserver(\n  (entries: ResizeObserverEntry[]) => {\n    for (const entry of entries) {\n      const { target, contentRect } = entry;\n      const observedTarget = observedMap.get(target as HTMLElement);\n      if (observedTarget) {\n        const { onResize, measurements } = observedTarget;\n        let sizeChanged = false;\n        for (const [dimension, size] of Object.entries(measurements)) {\n          const newSize = getTargetSize(\n            target as HTMLElement,\n            contentRect,\n            dimension as measuredDimension\n          );\n          if (newSize !== size) {\n            sizeChanged = true;\n            measurements[dimension as measuredDimension] = newSize;\n          }\n        }\n        if (sizeChanged) {\n          onResize && onResize(measurements);\n        }\n      }\n    }\n  }\n);\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false\n): void {\n  const dimensionsRef = useRef(dimensions);\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const rect = target.getBoundingClientRect();\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n        return map;\n      },\n      {}\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    let cleanedUp = false;\n\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      cleanedUp = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { fonts } = document as any;\n      if (fonts) {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        await fonts.ready;\n      }\n      if (!cleanedUp) {\n        const observedTarget = observedMap.get(target);\n        if (observedTarget) {\n          const measurements = measure(target);\n          observedTarget.measurements = measurements;\n          resizeObserver.observe(target);\n          if (reportInitialSize) {\n            onResize(measurements);\n          }\n        }\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        throw Error(\n          \"useResizeObserver attemping to observe same element twice\"\n        );\n      }\n      void registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n        cleanedUp = true;\n      }\n    };\n  }, [ref, measure, reportInitialSize, onResize]);\n\n  useLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n\n  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useResizeObserver.js","sources":["../../src/responsive/useResizeObserver.ts"],"sourcesContent":["/* eslint-disable no-restricted-syntax */\nimport { useCallback, useLayoutEffect, useRef, RefObject } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  scrollHeight?: T;\n  scrollWidth?: T;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  contentRect: DOMRectReadOnly,\n  dimension: measuredDimension\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return contentRect.height;\n    case \"scrollHeight\":\n      return element.scrollHeight;\n    case \"scrollWidth\":\n      return element.scrollWidth;\n    case \"width\":\n      return contentRect.width;\n    default:\n      return 0;\n  }\n};\n\nexport const resizeObserver = new ResizeObserver(\n  (entries: ResizeObserverEntry[]) => {\n    for (const entry of entries) {\n      const { target, contentRect } = entry;\n      const observedTarget = observedMap.get(target as HTMLElement);\n      if (observedTarget) {\n        const { onResize, measurements } = observedTarget;\n        let sizeChanged = false;\n        for (const [dimension, size] of Object.entries(measurements)) {\n          const newSize = getTargetSize(\n            target as HTMLElement,\n            contentRect,\n            dimension as measuredDimension\n          );\n          if (newSize !== size) {\n            sizeChanged = true;\n            measurements[dimension as measuredDimension] = newSize;\n          }\n        }\n        if (sizeChanged) {\n          onResize && onResize(measurements);\n        }\n      }\n    }\n  }\n);\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false\n): void {\n  const dimensionsRef = useRef(dimensions);\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const rect = target.getBoundingClientRect();\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n        return map;\n      },\n      {}\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    let cleanedUp = false;\n\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      cleanedUp = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { fonts } = document as any;\n      if (fonts) {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        await fonts.ready;\n      }\n      if (!cleanedUp) {\n        const observedTarget = observedMap.get(target);\n        if (observedTarget) {\n          const measurements = measure(target);\n          observedTarget.measurements = measurements;\n          resizeObserver.observe(target);\n          if (reportInitialSize) {\n            onResize(measurements);\n          }\n        }\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        throw Error(\n          \"useResizeObserver attemping to observe same element twice\"\n        );\n      }\n      void registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n        cleanedUp = true;\n      }\n    };\n  }, [ref, measure, reportInitialSize, onResize]);\n\n  useLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n\n  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":"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"}

package/esm/responsive/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = 'data-collapsible';\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  'data-pad-start': true,\n  'data-pad-end': true\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: 'dynamic',\n  instant: 'instant',\n  true: 'instant'\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? 'none';\n\ntype Props = { [key: string]: any };\nexport const extractResponsiveProps = (props: Props) => {\n  return Object.keys(props).reduce<[Props, Props]>(\n    (result, propName) => {\n      const [toolbarProps, rest] = result;\n      if (isResponsiveAttribute(propName)) {\n        const value = isCollapsible(propName) ? collapsibleValue(props[propName]) : props[propName];\n\n        toolbarProps[propName] = value;\n        rest[propName] = undefined;\n      }\n      return result;\n    },\n    [{}, {}]\n  );\n};\n"],"names":[],"mappings":"AAAA,MAAM,WAAc,GAAA,kBAAA,CAAA;AAEpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAW,GAAG,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA,IAAA;AAClB,CAAA,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,QACpC,KAAA,oBAAA,CAAqB,QAAQ,CAAK,IAAA,MAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA,CAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,SAAA;AACR,CAAA,CAAA;AAEA,MAAM,gBAAmB,GAAA,CAAC,KAAkB,KAAA,iBAAA,CAAkB,KAAK,CAAK,IAAA,MAAA,CAAA;AAG3D,MAAA,sBAAA,GAAyB,CAAC,KAAiB,KAAA;AACtD,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,KAAK,CAAE,CAAA,MAAA;AAAA,IACxB,CAAC,QAAQ,QAAa,KAAA;AACpB,MAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,MAAA,CAAA;AAC7B,MAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,QAAM,MAAA,KAAA,GAAQ,aAAc,CAAA,QAAQ,CAAI,GAAA,gBAAA,CAAiB,MAAM,QAAQ,CAAC,CAAI,GAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1F,QAAA,YAAA,CAAa,QAAQ,CAAI,GAAA,KAAA,CAAA;AACzB,QAAA,IAAA,CAAK,QAAQ,CAAI,GAAA,KAAA,CAAA,CAAA;AAAA,OACnB;AACA,MAAO,OAAA,MAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,EAAI,EAAA,EAAE,CAAA;AAAA,GACT,CAAA;AACF;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = 'data-collapsible';\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  'data-pad-start': true,\n  'data-pad-end': true\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: 'dynamic',\n  instant: 'instant',\n  true: 'instant'\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? 'none';\n\ntype Props = { [key: string]: any };\nexport const extractResponsiveProps = (props: Props) => {\n  return Object.keys(props).reduce<[Props, Props]>(\n    (result, propName) => {\n      const [toolbarProps, rest] = result;\n      if (isResponsiveAttribute(propName)) {\n        const value = isCollapsible(propName) ? collapsibleValue(props[propName]) : props[propName];\n\n        toolbarProps[propName] = value;\n        rest[propName] = undefined;\n      }\n      return result;\n    },\n    [{}, {}]\n  );\n};\n"],"names":[],"mappings":"AAAA,MAAM,WAAc,GAAA,kBAAA;AAEpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAW,GAAG,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA;AAClB,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,QACpC,KAAA,oBAAA,CAAqB,QAAQ,CAAK,IAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA;AACR,CAAA;AAEA,MAAM,gBAAmB,GAAA,CAAC,KAAkB,KAAA,iBAAA,CAAkB,KAAK,CAAK,IAAA,MAAA;AAG3D,MAAA,sBAAA,GAAyB,CAAC,KAAiB,KAAA;AACtD,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,KAAK,CAAE,CAAA,MAAA;AAAA,IACxB,CAAC,QAAQ,QAAa,KAAA;AACpB,MAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,MAAA;AAC7B,MAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,QAAM,MAAA,KAAA,GAAQ,aAAc,CAAA,QAAQ,CAAI,GAAA,gBAAA,CAAiB,MAAM,QAAQ,CAAC,CAAI,GAAA,KAAA,CAAM,QAAQ,CAAA;AAE1F,QAAA,YAAA,CAAa,QAAQ,CAAI,GAAA,KAAA;AACzB,QAAA,IAAA,CAAK,QAAQ,CAAI,GAAA,KAAA,CAAA;AAAA;AAEnB,MAAO,OAAA,MAAA;AAAA,KACT;AAAA,IACA,CAAC,EAAI,EAAA,EAAE;AAAA,GACT;AACF;;;;"}