@activecollab/components 2.0.498 → 2.0.499

package/dist/esm/components/Menu/Styles.d.ts

@@ -1,6 +1,9 @@
 export declare const StyledMenu: import("styled-components").StyledComponent<import("react").FC<import("..").IBubble & import("react").HTMLAttributes<HTMLDivElement>>, any, {
     $mode: string;
 }, never>;
-export declare const StyledMenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMenuFooter: import("styled-components").StyledComponent<"div", any, {
+    $actions?: boolean;
+}, never>;
+export declare const StyledMenuFooterGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledMenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Menu/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,UAAU;WAA2B,MAAM;SAoCvD,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAO5B,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAK5B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,UAAU;WAA2B,MAAM;SAoCvD,CAAC;AAGF,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAiB9D,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAIjC,CAAC;AAGF,eAAO,MAAM,gBAAgB,oEAK5B,CAAC"}

package/dist/esm/components/Menu/Styles.js

@@ -13,17 +13,21 @@ StyledMenu.displayName = "StyledMenu";
 export const StyledMenuFooter = styled.div.withConfig({
   displayName: "Styles__StyledMenuFooter",
   componentId: "sc-8fhkp-1"
-})(["", " display:flex;border-top:1px solid var(--border-primary);height:32px;align-items:center;"], {
+})(["", " display:flex;border-top:1px solid var(--border-primary);height:32px;align-items:center;", ""], {
   "display": "flex",
   "paddingLeft": "0.5rem",
   "paddingRight": "0.5rem",
   "paddingTop": "0.25rem",
   "paddingBottom": "0.25rem"
-});
+}, props => props.$actions && css(["height:auto;justify-content:space-between;gap:0.5rem;padding:0.625rem 0.75rem;border-top-color:var(--border-raised);"]));
+export const StyledMenuFooterGroup = styled.div.withConfig({
+  displayName: "Styles__StyledMenuFooterGroup",
+  componentId: "sc-8fhkp-2"
+})(["display:flex;align-items:center;gap:0.5rem;"]);
 StyledMenuFooter.displayName = "StyledMenuFooter";
 export const StyledMenuHeader = styled.div.withConfig({
   displayName: "Styles__StyledMenuHeader",
-  componentId: "sc-8fhkp-2"
+  componentId: "sc-8fhkp-3"
 })(["", " border-bottom:1px solid var(--border-primary);height:32px;"], {
   "display": "flex",
   "alignItems": "center",

package/dist/esm/components/Menu/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Bubble","FontStyle","StyledMenu","withConfig","displayName","componentId","props","$mode","StyledMenuFooter","div","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n  ${tw`tw-bg-page-paper-main tw-overflow-auto`}\n  border-color: var(--popover-border);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n  \n  color: var(--color-theme-700);\n  a:focus,\n  a:active {\n    outline: none;\n  }\n\n  ${(props) =>\n    props.$mode === \"normal\" &&\n    css`\n      width: 260px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"wider\" &&\n    css`\n      width: 350px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"tiny\" &&\n    css`\n      width: 180px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"widest\" &&\n    css`\n      width: 590px;\n    `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div`\n  ${tw`tw-flex tw-px-2 tw-py-1`}\n\n  display: flex;\n  border-top: 1px solid var(--border-primary);\n  height: 32px;\n  align-items: center;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n  ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n  border-bottom: 1px solid var(--border-primary);\n  height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,UAAU,GAAGL,MAAM,CAACG,MAAM,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0IAClC;EAAA;EAAA;AAAuC,CAAC,EAG1CJ,SAAS,EACTF,cAAc,EAQbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBT,GAAG,kBAEF,CACJ;AACDI,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,OAAO,MAAMI,gBAAgB,GAAGX,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qGACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwB,CAAC,CAM9B;AACDG,gBAAgB,CAACJ,WAAW,GAAG,kBAAkB;AAEjD,OAAO,MAAMM,gBAAgB,GAAGb,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEACpC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2D,CAAC,CAIjE;AACDK,gBAAgB,CAACN,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","Bubble","FontStyle","StyledMenu","withConfig","displayName","componentId","props","$mode","StyledMenuFooter","div","$actions","StyledMenuFooterGroup","StyledMenuHeader"],"sources":["../../../../src/components/Menu/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Bubble } from \"../Bubble\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledMenu = styled(Bubble)<{ $mode: string }>`\n  ${tw`tw-bg-page-paper-main tw-overflow-auto`}\n  border-color: var(--popover-border);\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n  \n  color: var(--color-theme-700);\n  a:focus,\n  a:active {\n    outline: none;\n  }\n\n  ${(props) =>\n    props.$mode === \"normal\" &&\n    css`\n      width: 260px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"wider\" &&\n    css`\n      width: 350px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"tiny\" &&\n    css`\n      width: 180px;\n    `}\n\n  ${(props) =>\n    props.$mode === \"widest\" &&\n    css`\n      width: 590px;\n    `}\n`;\nStyledMenu.displayName = \"StyledMenu\";\n\nexport const StyledMenuFooter = styled.div<{ $actions?: boolean }>`\n  ${tw`tw-flex tw-px-2 tw-py-1`}\n\n  display: flex;\n  border-top: 1px solid var(--border-primary);\n  height: 32px;\n  align-items: center;\n\n  ${(props) =>\n    props.$actions &&\n    css`\n      height: auto;\n      justify-content: space-between;\n      gap: 0.5rem;\n      padding: 0.625rem 0.75rem;\n      border-top-color: var(--border-raised);\n    `}\n`;\n\nexport const StyledMenuFooterGroup = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n`;\nStyledMenuFooter.displayName = \"StyledMenuFooter\";\n\nexport const StyledMenuHeader = styled.div`\n  ${tw`tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1`}\n\n  border-bottom: 1px solid var(--border-primary);\n  height: 32px;\n`;\nStyledMenuHeader.displayName = \"StyledMenuHeader\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,UAAU,GAAGL,MAAM,CAACG,MAAM,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0IAClC;EAAA;EAAA;AAAuC,CAAC,EAG1CJ,SAAS,EACTF,cAAc,EAQbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,kBAEF,EAEAQ,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,QAAQ,IACxBT,GAAG,kBAEF,CACJ;AACDI,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,OAAO,MAAMI,gBAAgB,GAAGX,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yGACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwB,CAAC,EAO1BC,KAAK,IACNA,KAAK,CAACI,QAAQ,IACdZ,GAAG,0HAMF,CACJ;AAED,OAAO,MAAMa,qBAAqB,GAAGd,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDAI9C;AACDG,gBAAgB,CAACJ,WAAW,GAAG,kBAAkB;AAEjD,OAAO,MAAMQ,gBAAgB,GAAGf,MAAM,CAACY,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEACpC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA2D,CAAC,CAIjE;AACDO,gBAAgB,CAACR,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/dist/esm/components/MessageBubble/MessageBubble.d.ts

@@ -0,0 +1,29 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { MessageBubbleLook, MessageBubbleSurface } from "./Styles";
+export interface IMessageBubbleProps extends HTMLAttributes<HTMLDivElement> {
+    /** "own" and "other" by the author, "new" for an unread message, "pending" while it sends, "error" when it failed. */
+    look?: MessageBubbleLook;
+    /** The surface of another person's message: "raised" on a panel in the color of the sheet. */
+    surface?: MessageBubbleSurface;
+    /** The side of the tail corner. An own message has it at the end. */
+    side?: "start" | "end";
+    /** Draws an outline, for a message that a link points to. */
+    highlighted?: boolean;
+}
+export declare const MessageBubble: React.ForwardRefExoticComponent<IMessageBubbleProps & React.RefAttributes<HTMLDivElement>>;
+export interface IReactionChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    emoji: ReactNode;
+    count?: number;
+    /** The viewer gave this reaction. */
+    pressed?: boolean;
+    readOnly?: boolean;
+}
+export declare const ReactionChip: React.ForwardRefExoticComponent<IReactionChipProps & React.RefAttributes<HTMLButtonElement>>;
+export interface IHoverActionsProps extends HTMLAttributes<HTMLElement> {
+    /** Keeps the actions visible, for example while their menu is open. */
+    open?: boolean;
+    as?: "div" | "span";
+}
+/** Controls that show while the pointer or the focus is in the closest element with `data-hover-scope`. */
+export declare const HoverActions: React.ForwardRefExoticComponent<IHoverActionsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=MessageBubble.d.ts.map

package/dist/esm/components/MessageBubble/MessageBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageBubble/MessageBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,oBAAoB,EACpB,cAAc,EACd,SAAS,EAEV,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EAIrB,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,sHAAsH;IACtH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,qEAAqE;IACrE,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,4FA0BzB,CAAC;AAIF,MAAM,WAAW,kBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,8FAmBxB,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrE,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAED,2GAA2G;AAC3G,eAAO,MAAM,YAAY,2FAWxB,CAAC"}

package/dist/esm/components/MessageBubble/MessageBubble.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["look", "surface", "side", "highlighted", "className", "children"],
+  _excluded2 = ["emoji", "count", "pressed", "readOnly", "className"],
+  _excluded3 = ["open", "className", "children"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { StyledHoverActions, StyledMessageBubble, StyledReactionChip } from "./Styles";
+export const MessageBubble = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let _ref$look = _ref.look,
+    look = _ref$look === void 0 ? "other" : _ref$look,
+    _ref$surface = _ref.surface,
+    surface = _ref$surface === void 0 ? "tint" : _ref$surface,
+    side = _ref.side,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledMessageBubble, _extends({}, rest, {
+    ref: ref,
+    $look: look,
+    $surface: surface,
+    $side: side != null ? side : look === "own" ? "end" : "start",
+    $highlighted: highlighted,
+    "data-look": look,
+    className: classnames("c-message-bubble", className)
+  }), children);
+});
+MessageBubble.displayName = "MessageBubble";
+export const ReactionChip = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let emoji = _ref2.emoji,
+    _ref2$count = _ref2.count,
+    count = _ref2$count === void 0 ? 0 : _ref2$count,
+    _ref2$pressed = _ref2.pressed,
+    pressed = _ref2$pressed === void 0 ? false : _ref2$pressed,
+    _ref2$readOnly = _ref2.readOnly,
+    readOnly = _ref2$readOnly === void 0 ? false : _ref2$readOnly,
+    className = _ref2.className,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(StyledReactionChip, _extends({
+    type: "button"
+  }, rest, {
+    ref: ref,
+    disabled: readOnly,
+    "aria-pressed": pressed,
+    $pressed: pressed,
+    $readOnly: readOnly,
+    className: classnames("c-reaction-chip", className)
+  }), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, emoji), count > 0 ? /*#__PURE__*/React.createElement("span", null, count) : null);
+});
+ReactionChip.displayName = "ReactionChip";
+/** Controls that show while the pointer or the focus is in the closest element with `data-hover-scope`. */
+export const HoverActions = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let _ref3$open = _ref3.open,
+    open = _ref3$open === void 0 ? false : _ref3$open,
+    className = _ref3.className,
+    children = _ref3.children,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(StyledHoverActions, _extends({}, rest, {
+    ref: ref,
+    $open: open,
+    className: classnames("c-hover-actions", className)
+  }), children);
+});
+HoverActions.displayName = "HoverActions";
+//# sourceMappingURL=MessageBubble.js.map

package/dist/esm/components/MessageBubble/MessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.js","names":["React","forwardRef","classnames","StyledHoverActions","StyledMessageBubble","StyledReactionChip","MessageBubble","_ref","ref","_ref$look","look","_ref$surface","surface","side","_ref$highlighted","highlighted","className","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$look","$surface","$side","$highlighted","displayName","ReactionChip","_ref2","emoji","_ref2$count","count","_ref2$pressed","pressed","_ref2$readOnly","readOnly","_excluded2","type","disabled","$pressed","$readOnly","HoverActions","_ref3","_ref3$open","open","_excluded3","$open"],"sources":["../../../../src/components/MessageBubble/MessageBubble.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  MessageBubbleLook,\n  MessageBubbleSurface,\n  StyledHoverActions,\n  StyledMessageBubble,\n  StyledReactionChip,\n} from \"./Styles\";\n\nexport interface IMessageBubbleProps extends HTMLAttributes<HTMLDivElement> {\n  /** \"own\" and \"other\" by the author, \"new\" for an unread message, \"pending\" while it sends, \"error\" when it failed. */\n  look?: MessageBubbleLook;\n  /** The surface of another person's message: \"raised\" on a panel in the color of the sheet. */\n  surface?: MessageBubbleSurface;\n  /** The side of the tail corner. An own message has it at the end. */\n  side?: \"start\" | \"end\";\n  /** Draws an outline, for a message that a link points to. */\n  highlighted?: boolean;\n}\n\nexport const MessageBubble = forwardRef<HTMLDivElement, IMessageBubbleProps>(\n  (\n    {\n      look = \"other\",\n      surface = \"tint\",\n      side,\n      highlighted = false,\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <StyledMessageBubble\n      {...rest}\n      ref={ref}\n      $look={look}\n      $surface={surface}\n      $side={side ?? (look === \"own\" ? \"end\" : \"start\")}\n      $highlighted={highlighted}\n      data-look={look}\n      className={classnames(\"c-message-bubble\", className)}\n    >\n      {children}\n    </StyledMessageBubble>\n  )\n);\n\nMessageBubble.displayName = \"MessageBubble\";\n\nexport interface IReactionChipProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  emoji: ReactNode;\n  count?: number;\n  /** The viewer gave this reaction. */\n  pressed?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ReactionChip = forwardRef<HTMLButtonElement, IReactionChipProps>(\n  (\n    { emoji, count = 0, pressed = false, readOnly = false, className, ...rest },\n    ref\n  ) => (\n    <StyledReactionChip\n      type=\"button\"\n      {...rest}\n      ref={ref}\n      disabled={readOnly}\n      aria-pressed={pressed}\n      $pressed={pressed}\n      $readOnly={readOnly}\n      className={classnames(\"c-reaction-chip\", className)}\n    >\n      <span aria-hidden=\"true\">{emoji}</span>\n      {count > 0 ? <span>{count}</span> : null}\n    </StyledReactionChip>\n  )\n);\n\nReactionChip.displayName = \"ReactionChip\";\n\nexport interface IHoverActionsProps extends HTMLAttributes<HTMLElement> {\n  /** Keeps the actions visible, for example while their menu is open. */\n  open?: boolean;\n  as?: \"div\" | \"span\";\n}\n\n/** Controls that show while the pointer or the focus is in the closest element with `data-hover-scope`. */\nexport const HoverActions = forwardRef<HTMLDivElement, IHoverActionsProps>(\n  ({ open = false, className, children, ...rest }, ref) => (\n    <StyledHoverActions\n      {...rest}\n      ref={ref}\n      $open={open}\n      className={classnames(\"c-hover-actions\", className)}\n    >\n      {children}\n    </StyledHoverActions>\n  )\n);\n\nHoverActions.displayName = \"HoverActions\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/MessageBubble/Styles.d.ts

@@ -0,0 +1,16 @@
+export type MessageBubbleLook = "own" | "other" | "new" | "pending" | "error";
+export type MessageBubbleSurface = "tint" | "raised";
+export declare const StyledMessageBubble: import("styled-components").StyledComponent<"div", any, {
+    $look: MessageBubbleLook;
+    $surface: MessageBubbleSurface;
+    $side: "start" | "end";
+    $highlighted: boolean;
+}, never>;
+export declare const StyledReactionChip: import("styled-components").StyledComponent<"button", any, {
+    $pressed: boolean;
+    $readOnly: boolean;
+}, never>;
+export declare const StyledHoverActions: import("styled-components").StyledComponent<"div", any, {
+    $open: boolean;
+}, never>;
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/MessageBubble/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageBubble/Styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9E,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAcrD,eAAO,MAAM,mBAAmB;WACvB,iBAAiB;cACd,oBAAoB;WACvB,OAAO,GAAG,KAAK;kBACR,OAAO;SAqBtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;cACnB,OAAO;eACN,OAAO;SAyBnB,CAAC;AAEF,eAAO,MAAM,kBAAkB;WAAuB,OAAO;SAgB5D,CAAC"}

package/dist/esm/components/MessageBubble/Styles.js

@@ -0,0 +1,51 @@
+import styled, { css } from "styled-components";
+const tint = function (step, border, style) {
+  if (style === void 0) {
+    style = "solid";
+  }
+  return css(["background-color:var(--color-primary-opaque-", ");border:1px ", " ", ";"], step, style, border);
+};
+const LOOKS = {
+  own: tint(300, "var(--color-primary-opaque-500)"),
+  new: tint(200, "var(--color-primary-opaque-500)"),
+  pending: tint(300, "var(--color-primary-opaque-500)", "dashed"),
+  error: tint(300, "var(--red-alert)")
+};
+export const StyledMessageBubble = styled.div.withConfig({
+  displayName: "Styles__StyledMessageBubble",
+  componentId: "sc-sfjofu-0"
+})(["padding:9px 12px 8px;overflow:hidden;border-radius:18px;border-bottom-", "-radius:6px;", " ", ""], _ref => {
+  let $side = _ref.$side;
+  return $side === "end" ? "right" : "left";
+}, _ref2 => {
+  let $look = _ref2.$look,
+    $surface = _ref2.$surface;
+  return $look === "other" ? css(["background-color:var( ", " );border:1px solid var(", ");"], $surface === "raised" ? "--surface-raised" : "--pill-background", $surface === "raised" ? "--border-raised" : "--pill-border") : LOOKS[$look];
+}, _ref3 => {
+  let $highlighted = _ref3.$highlighted;
+  return $highlighted && "outline: 2px solid var(--color-primary);";
+});
+export const StyledReactionChip = styled.button.withConfig({
+  displayName: "Styles__StyledReactionChip",
+  componentId: "sc-sfjofu-1"
+})(["display:flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var( ", " );border-radius:12px;background-color:var( ", " );box-shadow:var(--shadow-soft);color:var( ", " );font-size:12px;line-height:1;font-weight:600;cursor:", ";"], _ref4 => {
+  let $pressed = _ref4.$pressed;
+  return $pressed ? "--color-primary-opaque-500" : "--border-raised";
+}, _ref5 => {
+  let $pressed = _ref5.$pressed;
+  return $pressed ? "--color-primary-opaque-300" : "--surface-raised";
+}, _ref6 => {
+  let $pressed = _ref6.$pressed;
+  return $pressed ? "--color-primary" : "--color-theme-800";
+}, _ref7 => {
+  let $readOnly = _ref7.$readOnly;
+  return $readOnly ? "default" : "pointer";
+});
+export const StyledHoverActions = styled.div.withConfig({
+  displayName: "Styles__StyledHoverActions",
+  componentId: "sc-sfjofu-2"
+})(["opacity:", ";transition:opacity 150ms cubic-bezier(0.4,0,0.2,1);[data-hover-scope]:hover &,[data-hover-scope]:focus-within &{opacity:1;}@media (hover:none){opacity:1;}@media print{display:none;}"], _ref8 => {
+  let $open = _ref8.$open;
+  return $open ? 1 : 0;
+});
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/MessageBubble/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","tint","step","border","style","LOOKS","own","new","pending","error","StyledMessageBubble","div","withConfig","displayName","componentId","_ref","$side","_ref2","$look","$surface","_ref3","$highlighted","StyledReactionChip","button","_ref4","$pressed","_ref5","_ref6","_ref7","$readOnly","StyledHoverActions","_ref8","$open"],"sources":["../../../../src/components/MessageBubble/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport type MessageBubbleLook = \"own\" | \"other\" | \"new\" | \"pending\" | \"error\";\nexport type MessageBubbleSurface = \"tint\" | \"raised\";\n\nconst tint = (step: number, border: string, style = \"solid\") => css`\n  background-color: var(--color-primary-opaque-${step});\n  border: 1px ${style} ${border};\n`;\n\nconst LOOKS = {\n  own: tint(300, \"var(--color-primary-opaque-500)\"),\n  new: tint(200, \"var(--color-primary-opaque-500)\"),\n  pending: tint(300, \"var(--color-primary-opaque-500)\", \"dashed\"),\n  error: tint(300, \"var(--red-alert)\"),\n};\n\nexport const StyledMessageBubble = styled.div<{\n  $look: MessageBubbleLook;\n  $surface: MessageBubbleSurface;\n  $side: \"start\" | \"end\";\n  $highlighted: boolean;\n}>`\n  padding: 9px 12px 8px;\n  overflow: hidden;\n  border-radius: 18px;\n  border-bottom-${({ $side }) =>\n    $side === \"end\" ? \"right\" : \"left\"}-radius: 6px;\n\n  ${({ $look, $surface }) =>\n    $look === \"other\"\n      ? css`\n          background-color: var(\n            ${$surface === \"raised\" ? \"--surface-raised\" : \"--pill-background\"}\n          );\n          border: 1px solid\n            var(${$surface === \"raised\" ? \"--border-raised\" : \"--pill-border\"});\n        `\n      : LOOKS[$look]}\n\n  ${({ $highlighted }) =>\n    $highlighted && \"outline: 2px solid var(--color-primary);\"}\n`;\n\nexport const StyledReactionChip = styled.button<{\n  $pressed: boolean;\n  $readOnly: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 24px;\n  padding: 0 8px;\n  border: 1px solid\n    var(\n      ${({ $pressed }) =>\n        $pressed ? \"--color-primary-opaque-500\" : \"--border-raised\"}\n    );\n  border-radius: 12px;\n  background-color: var(\n    ${({ $pressed }) =>\n      $pressed ? \"--color-primary-opaque-300\" : \"--surface-raised\"}\n  );\n  box-shadow: var(--shadow-soft);\n  color: var(\n    ${({ $pressed }) => ($pressed ? \"--color-primary\" : \"--color-theme-800\")}\n  );\n  font-size: 12px;\n  line-height: 1;\n  font-weight: 600;\n  cursor: ${({ $readOnly }) => ($readOnly ? \"default\" : \"pointer\")};\n`;\n\nexport const StyledHoverActions = styled.div<{ $open: boolean }>`\n  opacity: ${({ $open }) => ($open ? 1 : 0)};\n  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);\n\n  [data-hover-scope]:hover &,\n  [data-hover-scope]:focus-within & {\n    opacity: 1;\n  }\n\n  @media (hover: none) {\n    opacity: 1;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,MAAMC,IAAI,GAAG,SAAAA,CAACC,IAAY,EAAEC,MAAc,EAAEC,KAAK;EAAA,IAALA,KAAK;IAALA,KAAK,GAAG,OAAO;EAAA;EAAA,OAAKJ,GAAG,8EAClBE,IAAI,EACrCE,KAAK,EAAID,MAAM;AAAA,CAC9B;AAED,MAAME,KAAK,GAAG;EACZC,GAAG,EAAEL,IAAI,CAAC,GAAG,EAAE,iCAAiC,CAAC;EACjDM,GAAG,EAAEN,IAAI,CAAC,GAAG,EAAE,iCAAiC,CAAC;EACjDO,OAAO,EAAEP,IAAI,CAAC,GAAG,EAAE,iCAAiC,EAAE,QAAQ,CAAC;EAC/DQ,KAAK,EAAER,IAAI,CAAC,GAAG,EAAE,kBAAkB;AACrC,CAAC;AAED,OAAO,MAAMS,mBAAmB,GAAGX,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wGAS3BC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OACtBA,KAAK,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM;AAAA,GAElCC,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;EAAA,OAClBD,KAAK,KAAK,OAAO,GACblB,GAAG,+DAEGmB,QAAQ,KAAK,QAAQ,GAAG,kBAAkB,GAAG,mBAAmB,EAG5DA,QAAQ,KAAK,QAAQ,GAAG,iBAAiB,GAAG,eAAe,IAErEd,KAAK,CAACa,KAAK,CAAC;AAAA,GAEhBE,KAAA;EAAA,IAAGC,YAAY,GAAAD,KAAA,CAAZC,YAAY;EAAA,OACfA,YAAY,IAAI,0CAA0C;AAAA,EAC7D;AAED,OAAO,MAAMC,kBAAkB,GAAGvB,MAAM,CAACwB,MAAM,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iQAWvCU,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,GAAG,4BAA4B,GAAG,iBAAiB;AAAA,GAI7DC,KAAA;EAAA,IAAGD,QAAQ,GAAAC,KAAA,CAARD,QAAQ;EAAA,OACXA,QAAQ,GAAG,4BAA4B,GAAG,kBAAkB;AAAA,GAI5DE,KAAA;EAAA,IAAGF,QAAQ,GAAAE,KAAA,CAARF,QAAQ;EAAA,OAAQA,QAAQ,GAAG,iBAAiB,GAAG,mBAAmB;AAAA,CAAC,EAKhEG,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OAAQA,SAAS,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,CACjE;AAED,OAAO,MAAMC,kBAAkB,GAAG/B,MAAM,CAACY,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2MAC/BiB,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAAQA,KAAK,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC,CAe1C","ignoreList":[]}

package/dist/esm/components/MessageBubble/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MessageBubble";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/MessageBubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageBubble/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/esm/components/MessageBubble/index.js

@@ -0,0 +1,2 @@
+export * from "./MessageBubble";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/MessageBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/MessageBubble/index.ts"],"sourcesContent":["export * from \"./MessageBubble\";\n"],"mappings":"AAAA,cAAc,iBAAiB","ignoreList":[]}

package/dist/esm/components/ObjectLayout/ObjectLayout.d.ts

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface IObjectLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** Sticky bar at the top edge. */
+    topBar?: ReactNode;
+    /** Sticky band under the top bar, for the title. */
+    band?: ReactNode;
+    /** Panel mode: a block above the main content. */
+    properties?: ReactNode;
+    main?: ReactNode;
+    /** Rail mode: the 300px right column. */
+    rail?: ReactNode;
+    /** Rail mode: content after the main column that can hold a part on the bottom edge. */
+    stream?: ReactNode;
+    /** Replaces the rail with a panel at the full height of the layout. */
+    panel?: ReactNode;
+    panelWidth?: number;
+    panelMin?: number;
+    panelMax?: number;
+    /** The width the main part keeps beside the panel. */
+    mainMin?: number;
+    /** With it the panel has a resize handle. Called with a whole pixel. */
+    onPanelWidthChange?: (width: number) => void;
+    /** The accessible name of the resize handle. */
+    resizeLabel?: string;
+    /** Panel mode: the layout has the height of its parent and the main part scrolls by itself. */
+    ownScroll?: boolean;
+    /** Rail mode: a new value measures the opening height of the rail again. */
+    resetKey?: string | number;
+    "data-testid"?: string;
+}
+export declare const ObjectLayout: React.ForwardRefExoticComponent<IObjectLayoutProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ObjectLayout.d.ts.map

package/dist/esm/components/ObjectLayout/ObjectLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/ObjectLayout/ObjectLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,cAAc,EACd,SAAS,EAMV,MAAM,OAAO,CAAC;AAyBf,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0CD,eAAO,MAAM,YAAY,2FAiKxB,CAAC"}

package/dist/esm/components/ObjectLayout/ObjectLayout.js

@@ -0,0 +1,162 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["topBar", "band", "properties", "main", "rail", "stream", "panel", "panelWidth", "panelMin", "panelMax", "mainMin", "onPanelWidthChange", "resizeLabel", "ownScroll", "resetKey", "className", "data-testid"];
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { CONTAINER_CSS, StyledBand, StyledColumns, StyledHeader, StyledLeft, StyledMain, StyledObjectLayout, StyledPanel, StyledPanelHandle, StyledPart, StyledPartColumns, StyledProperties, StyledRail, StyledSplit, StyledStream, StyledTopBar } from "./Styles";
+import { clampPanelWidth, useResizablePanel } from "../../hooks";
+import { useContainerCss } from "../../utils/useContainerCss";
+// The height of the rail as the object opens. It stops to follow the rail at the first action of the user.
+const useOpeningRailHeight = resetKey => {
+  const railRef = useRef(null);
+  const isFrozen = useRef(false);
+  const _useState = useState(0),
+    height = _useState[0],
+    setHeight = _useState[1];
+  useEffect(() => {
+    const rail = railRef.current;
+    isFrozen.current = false;
+    const measure = () => {
+      if (rail && !isFrozen.current) {
+        setHeight(rail.offsetHeight);
+      }
+    };
+    measure();
+    if (!rail || typeof ResizeObserver === "undefined") {
+      return undefined;
+    }
+
+    // eslint-disable-next-line compat/compat
+    const observer = new ResizeObserver(measure);
+    observer.observe(rail);
+    return () => observer.disconnect();
+  }, [resetKey]);
+  const freeze = useCallback(() => {
+    isFrozen.current = true;
+  }, []);
+  return {
+    railRef,
+    height,
+    freeze
+  };
+};
+const noChange = () => undefined;
+export const ObjectLayout = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let topBar = _ref.topBar,
+    band = _ref.band,
+    properties = _ref.properties,
+    main = _ref.main,
+    rail = _ref.rail,
+    stream = _ref.stream,
+    panel = _ref.panel,
+    _ref$panelWidth = _ref.panelWidth,
+    panelWidth = _ref$panelWidth === void 0 ? 600 : _ref$panelWidth,
+    _ref$panelMin = _ref.panelMin,
+    panelMin = _ref$panelMin === void 0 ? 300 : _ref$panelMin,
+    _ref$panelMax = _ref.panelMax,
+    panelMax = _ref$panelMax === void 0 ? 750 : _ref$panelMax,
+    _ref$mainMin = _ref.mainMin,
+    mainMin = _ref$mainMin === void 0 ? 550 : _ref$mainMin,
+    onPanelWidthChange = _ref.onPanelWidthChange,
+    _ref$resizeLabel = _ref.resizeLabel,
+    resizeLabel = _ref$resizeLabel === void 0 ? "Resize panel" : _ref$resizeLabel,
+    _ref$ownScroll = _ref.ownScroll,
+    ownScroll = _ref$ownScroll === void 0 ? false : _ref$ownScroll,
+    resetKey = _ref.resetKey,
+    className = _ref.className,
+    testId = _ref["data-testid"],
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useContainerCss("c-object-layout-container", CONTAINER_CSS);
+  const hasPanel = panel !== undefined && panel !== null;
+  const _useOpeningRailHeight = useOpeningRailHeight(resetKey),
+    railRef = _useOpeningRailHeight.railRef,
+    height = _useOpeningRailHeight.height,
+    freeze = _useOpeningRailHeight.freeze;
+  const _useResizablePanel = useResizablePanel({
+      side: "right",
+      width: clampPanelWidth(panelWidth, panelMin, panelMax),
+      min: panelMin,
+      max: panelMax,
+      onChange: onPanelWidthChange != null ? onPanelWidthChange : noChange
+    }),
+    width = _useResizablePanel.width,
+    handleProps = _useResizablePanel.handleProps;
+  const part = name => testId ? testId + "-" + name : undefined;
+  const header = topBar ? /*#__PURE__*/React.createElement(StyledHeader, {
+    $panel: hasPanel,
+    className: "c-object-layout__header",
+    "data-testid": part("header")
+  }, /*#__PURE__*/React.createElement(StyledTopBar, {
+    "data-testid": part("top-bar")
+  }, topBar)) : null;
+  const bandNode = band ? /*#__PURE__*/React.createElement(StyledBand, {
+    className: "c-object-layout__band",
+    "data-testid": part("band")
+  }, band) : null;
+  if (hasPanel) {
+    return /*#__PURE__*/React.createElement(StyledObjectLayout, _extends({}, rest, {
+      ref: ref,
+      $fill: ownScroll,
+      "data-testid": testId,
+      className: classnames("c-object-layout c-object-layout--panel", {
+        "c-object-layout--own-scroll": ownScroll
+      }, className)
+    }), /*#__PURE__*/React.createElement(StyledSplit, {
+      $ownScroll: ownScroll,
+      className: "c-object-layout__split",
+      style: {
+        "--panel-width": width + "px",
+        "--main-min": mainMin + "px"
+      },
+      "data-testid": part("split")
+    }, /*#__PURE__*/React.createElement(StyledPart, {
+      className: "c-object-layout__part",
+      "data-testid": part("part")
+    }, header, bandNode, /*#__PURE__*/React.createElement(StyledPartColumns, {
+      className: "c-object-layout__part-columns",
+      "data-testid": part("columns")
+    }, properties ? /*#__PURE__*/React.createElement(StyledProperties, {
+      "data-testid": part("properties")
+    }, properties) : null, /*#__PURE__*/React.createElement(StyledMain, {
+      $padded: true,
+      className: "c-object-layout__main",
+      "data-testid": part("main")
+    }, main))), /*#__PURE__*/React.createElement(StyledPanel, {
+      className: "c-object-layout__panel",
+      "data-testid": part("rail")
+    }, onPanelWidthChange ? /*#__PURE__*/React.createElement(StyledPanelHandle, _extends({}, handleProps, {
+      label: resizeLabel,
+      className: "c-object-layout__handle",
+      "data-testid": part("resize")
+    })) : null, panel)));
+  }
+  return /*#__PURE__*/React.createElement(StyledObjectLayout, _extends({}, rest, {
+    ref: ref,
+    $fill: false,
+    "data-testid": testId,
+    onPointerDownCapture: freeze,
+    onKeyDownCapture: freeze,
+    className: classnames("c-object-layout", className)
+  }), header, bandNode, /*#__PURE__*/React.createElement(StyledColumns, {
+    className: "c-object-layout__columns",
+    "data-testid": part("columns")
+  }, /*#__PURE__*/React.createElement(StyledLeft, {
+    className: "c-object-layout__left",
+    style: {
+      "--opening-rail-height": height + "px"
+    },
+    "data-testid": part("left")
+  }, /*#__PURE__*/React.createElement(StyledMain, {
+    $padded: !stream,
+    className: "c-object-layout__main",
+    "data-testid": part("main")
+  }, main), /*#__PURE__*/React.createElement(StyledStream, {
+    "data-testid": part("stream")
+  }, stream)), /*#__PURE__*/React.createElement(StyledRail, {
+    ref: railRef,
+    className: "c-object-layout__rail",
+    "data-testid": part("rail")
+  }, rail)));
+});
+ObjectLayout.displayName = "ObjectLayout";
+//# sourceMappingURL=ObjectLayout.js.map

package/dist/esm/components/ObjectLayout/ObjectLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectLayout.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","classnames","CONTAINER_CSS","StyledBand","StyledColumns","StyledHeader","StyledLeft","StyledMain","StyledObjectLayout","StyledPanel","StyledPanelHandle","StyledPart","StyledPartColumns","StyledProperties","StyledRail","StyledSplit","StyledStream","StyledTopBar","clampPanelWidth","useResizablePanel","useContainerCss","useOpeningRailHeight","resetKey","railRef","isFrozen","_useState","height","setHeight","rail","current","measure","offsetHeight","ResizeObserver","undefined","observer","observe","disconnect","freeze","noChange","ObjectLayout","_ref","ref","topBar","band","properties","main","stream","panel","_ref$panelWidth","panelWidth","_ref$panelMin","panelMin","_ref$panelMax","panelMax","_ref$mainMin","mainMin","onPanelWidthChange","_ref$resizeLabel","resizeLabel","_ref$ownScroll","ownScroll","className","testId","rest","_objectWithoutPropertiesLoose","_excluded","hasPanel","_useOpeningRailHeight","_useResizablePanel","side","width","min","max","onChange","handleProps","part","name","header","createElement","$panel","bandNode","_extends","$fill","$ownScroll","style","$padded","label","onPointerDownCapture","onKeyDownCapture","displayName"],"sources":["../../../../src/components/ObjectLayout/ObjectLayout.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  CONTAINER_CSS,\n  StyledBand,\n  StyledColumns,\n  StyledHeader,\n  StyledLeft,\n  StyledMain,\n  StyledObjectLayout,\n  StyledPanel,\n  StyledPanelHandle,\n  StyledPart,\n  StyledPartColumns,\n  StyledProperties,\n  StyledRail,\n  StyledSplit,\n  StyledStream,\n  StyledTopBar,\n} from \"./Styles\";\nimport { clampPanelWidth, useResizablePanel } from \"../../hooks\";\nimport { useContainerCss } from \"../../utils/useContainerCss\";\n\nexport interface IObjectLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /** Sticky bar at the top edge. */\n  topBar?: ReactNode;\n  /** Sticky band under the top bar, for the title. */\n  band?: ReactNode;\n  /** Panel mode: a block above the main content. */\n  properties?: ReactNode;\n  main?: ReactNode;\n  /** Rail mode: the 300px right column. */\n  rail?: ReactNode;\n  /** Rail mode: content after the main column that can hold a part on the bottom edge. */\n  stream?: ReactNode;\n  /** Replaces the rail with a panel at the full height of the layout. */\n  panel?: ReactNode;\n  panelWidth?: number;\n  panelMin?: number;\n  panelMax?: number;\n  /** The width the main part keeps beside the panel. */\n  mainMin?: number;\n  /** With it the panel has a resize handle. Called with a whole pixel. */\n  onPanelWidthChange?: (width: number) => void;\n  /** The accessible name of the resize handle. */\n  resizeLabel?: string;\n  /** Panel mode: the layout has the height of its parent and the main part scrolls by itself. */\n  ownScroll?: boolean;\n  /** Rail mode: a new value measures the opening height of the rail again. */\n  resetKey?: string | number;\n  \"data-testid\"?: string;\n}\n\n// The height of the rail as the object opens. It stops to follow the rail at the first action of the user.\nconst useOpeningRailHeight = (resetKey?: string | number) => {\n  const railRef = useRef<HTMLDivElement>(null);\n  const isFrozen = useRef(false);\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    const rail = railRef.current;\n\n    isFrozen.current = false;\n\n    const measure = () => {\n      if (rail && !isFrozen.current) {\n        setHeight(rail.offsetHeight);\n      }\n    };\n\n    measure();\n\n    if (!rail || typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    // eslint-disable-next-line compat/compat\n    const observer = new ResizeObserver(measure);\n\n    observer.observe(rail);\n\n    return () => observer.disconnect();\n  }, [resetKey]);\n\n  const freeze = useCallback(() => {\n    isFrozen.current = true;\n  }, []);\n\n  return { railRef, height, freeze };\n};\n\nconst noChange = () => undefined;\n\nexport const ObjectLayout = forwardRef<HTMLDivElement, IObjectLayoutProps>(\n  (\n    {\n      topBar,\n      band,\n      properties,\n      main,\n      rail,\n      stream,\n      panel,\n      panelWidth = 600,\n      panelMin = 300,\n      panelMax = 750,\n      mainMin = 550,\n      onPanelWidthChange,\n      resizeLabel = \"Resize panel\",\n      ownScroll = false,\n      resetKey,\n      className,\n      \"data-testid\": testId,\n      ...rest\n    },\n    ref\n  ) => {\n    useContainerCss(\"c-object-layout-container\", CONTAINER_CSS);\n\n    const hasPanel = panel !== undefined && panel !== null;\n    const { railRef, height, freeze } = useOpeningRailHeight(resetKey);\n    const { width, handleProps } = useResizablePanel({\n      side: \"right\",\n      width: clampPanelWidth(panelWidth, panelMin, panelMax),\n      min: panelMin,\n      max: panelMax,\n      onChange: onPanelWidthChange ?? noChange,\n    });\n    const part = (name: string) => (testId ? `${testId}-${name}` : undefined);\n\n    const header = topBar ? (\n      <StyledHeader\n        $panel={hasPanel}\n        className=\"c-object-layout__header\"\n        data-testid={part(\"header\")}\n      >\n        <StyledTopBar data-testid={part(\"top-bar\")}>{topBar}</StyledTopBar>\n      </StyledHeader>\n    ) : null;\n\n    const bandNode = band ? (\n      <StyledBand className=\"c-object-layout__band\" data-testid={part(\"band\")}>\n        {band}\n      </StyledBand>\n    ) : null;\n\n    if (hasPanel) {\n      return (\n        <StyledObjectLayout\n          {...rest}\n          ref={ref}\n          $fill={ownScroll}\n          data-testid={testId}\n          className={classnames(\n            \"c-object-layout c-object-layout--panel\",\n            { \"c-object-layout--own-scroll\": ownScroll },\n            className\n          )}\n        >\n          <StyledSplit\n            $ownScroll={ownScroll}\n            className=\"c-object-layout__split\"\n            style={\n              {\n                \"--panel-width\": `${width}px`,\n                \"--main-min\": `${mainMin}px`,\n              } as CSSProperties\n            }\n            data-testid={part(\"split\")}\n          >\n            <StyledPart\n              className=\"c-object-layout__part\"\n              data-testid={part(\"part\")}\n            >\n              {header}\n              {bandNode}\n              <StyledPartColumns\n                className=\"c-object-layout__part-columns\"\n                data-testid={part(\"columns\")}\n              >\n                {properties ? (\n                  <StyledProperties data-testid={part(\"properties\")}>\n                    {properties}\n                  </StyledProperties>\n                ) : null}\n                <StyledMain\n                  $padded\n                  className=\"c-object-layout__main\"\n                  data-testid={part(\"main\")}\n                >\n                  {main}\n                </StyledMain>\n              </StyledPartColumns>\n            </StyledPart>\n            <StyledPanel\n              className=\"c-object-layout__panel\"\n              data-testid={part(\"rail\")}\n            >\n              {onPanelWidthChange ? (\n                <StyledPanelHandle\n                  {...handleProps}\n                  label={resizeLabel}\n                  className=\"c-object-layout__handle\"\n                  data-testid={part(\"resize\")}\n                />\n              ) : null}\n              {panel}\n            </StyledPanel>\n          </StyledSplit>\n        </StyledObjectLayout>\n      );\n    }\n\n    return (\n      <StyledObjectLayout\n        {...rest}\n        ref={ref}\n        $fill={false}\n        data-testid={testId}\n        onPointerDownCapture={freeze}\n        onKeyDownCapture={freeze}\n        className={classnames(\"c-object-layout\", className)}\n      >\n        {header}\n        {bandNode}\n        <StyledColumns\n          className=\"c-object-layout__columns\"\n          data-testid={part(\"columns\")}\n        >\n          <StyledLeft\n            className=\"c-object-layout__left\"\n            style={{ \"--opening-rail-height\": `${height}px` } as CSSProperties}\n            data-testid={part(\"left\")}\n          >\n            <StyledMain\n              $padded={!stream}\n              className=\"c-object-layout__main\"\n              data-testid={part(\"main\")}\n            >\n              {main}\n            </StyledMain>\n            <StyledStream data-testid={part(\"stream\")}>{stream}</StyledStream>\n          </StyledLeft>\n          <StyledRail\n            ref={railRef}\n            className=\"c-object-layout__rail\"\n            data-testid={part(\"rail\")}\n          >\n            {rail}\n          </StyledRail>\n        </StyledColumns>\n      </StyledObjectLayout>\n    );\n  }\n);\n\nObjectLayout.displayName = \"ObjectLayout\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/ObjectLayout/Styles.d.ts

@@ -0,0 +1,25 @@
+export declare const CONTAINER_CSS = "\n@container (min-width: 900px) {\n  .c-object-layout .c-object-layout__header,\n  .c-object-layout .c-object-layout__band {\n    position: sticky;\n    z-index: 6;\n    background-color: var(--surface-sheet);\n  }\n  .c-object-layout .c-object-layout__header { top: 0; }\n  .c-object-layout .c-object-layout__band { top: 41px; padding: 8px 32px 16px; }\n  .c-object-layout .c-object-layout__columns {\n    grid-template-columns: minmax(0, 1fr) 300px;\n    column-gap: 32px;\n    padding-top: 0;\n    padding-left: 32px;\n  }\n  .c-object-layout .c-object-layout__left {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    gap: 16px;\n    min-width: 0;\n    min-height: var(--opening-rail-height);\n  }\n  .c-object-layout .c-object-layout__rail { padding-bottom: 24px; }\n  .c-object-layout .c-object-layout__split {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) min(var(--panel-width), calc(100% - var(--main-min)));\n  }\n  .c-object-layout--own-scroll .c-object-layout__split { grid-template-rows: minmax(0, 1fr); }\n  .c-object-layout--own-scroll .c-object-layout__part { min-height: 0; overflow-y: auto; }\n  .c-object-layout .c-object-layout__part-columns { padding: 0 32px; }\n  .c-object-layout .c-object-layout__panel { padding: 0; }\n  .c-object-layout .c-object-layout__handle { display: block; }\n}\n@container (max-width: 899px) {\n  .c-object-layout .c-object-layout__columns { align-content: start; }\n  .c-object-layout--panel .c-object-layout__header { border-top-right-radius: inherit; }\n  .c-object-layout--own-scroll .c-object-layout__split { overflow-y: auto; }\n}\n";
+export declare const StyledObjectLayout: import("styled-components").StyledComponent<"div", any, {
+    $fill: boolean;
+}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {
+    $panel: boolean;
+}, never>;
+export declare const StyledTopBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBand: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledColumns: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"div", any, {
+    $padded: boolean;
+}, never>;
+export declare const StyledStream: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledRail: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSplit: import("styled-components").StyledComponent<"div", any, {
+    $ownScroll: boolean;
+}, never>;
+export declare const StyledPart: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPartColumns: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledProperties: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPanelHandle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").IResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/ObjectLayout/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ObjectLayout/Styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,umDAwCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;WAAuB,OAAO;SAS5D,CAAC;AAEF,eAAO,MAAM,YAAY;YAAwB,OAAO;SAGvD,CAAC;AAEF,eAAO,MAAM,YAAY,oEAExB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAGtB,CAAC;AAEF,eAAO,MAAM,aAAa,oEAOzB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAEtB,CAAC;AAEF,eAAO,MAAM,UAAU;aAAyB,OAAO;SAOtD,CAAC;AAEF,eAAO,MAAM,YAAY,oEAExB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,WAAW;gBAA4B,OAAO;SAK1D,CAAC;AAEF,eAAO,MAAM,UAAU,oEAItB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAM7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAE5B,CAAC;AAEF,eAAO,MAAM,WAAW,oEAIvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,yLAG7B,CAAC"}