@adatechnology/conversations-ui 0.6.0 → 0.6.1

package/dist/index.js

@@ -3,11 +3,6 @@ import {
   TooltipLayer,
   WhatsAppMessagePreview
 } from "./chunk-HOKNKXIT.js";
-import {
-  CHAT_TEXT_PRIMARY_CLASS,
-  CHAT_TEXT_SECONDARY_CLASS,
-  MessageText
-} from "./chunk-OVFCLRQQ.js";
 import {
   AudioPlayer,
   AudioRecorderButton,
@@ -70,6 +65,11 @@ import {
   useDarkMode,
   useIsDarkTheme
 } from "./chunk-MRVFFJEH.js";
+import {
+  CHAT_TEXT_PRIMARY_CLASS,
+  CHAT_TEXT_SECONDARY_CLASS,
+  MessageText
+} from "./chunk-OVFCLRQQ.js";
 import {
   CHANNEL_CAPABILITIES,
   CHANNEL_FILTER_ALL,

package/dist/styles.css

@@ -1928,6 +1928,14 @@
     transition: background-color 0.12s, border-color 0.12s;
   }
 }
+.cv-p-filters,
+.cv-p-quick,
+.cv-p-search,
+.cv-p-composer,
+.cv-p-thread__header,
+.cv-p-thread__subject-card {
+  flex: 0 0 auto;
+}
 .cv-p-root {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -35,8 +35,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/conversation-contracts": "0.5.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.6.0"
+    "@adatechnology/meta-whatsapp-contracts": "0.6.0",
+    "@adatechnology/conversation-contracts": "0.5.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

package/src/cssBlocks.test-helper.ts

@@ -0,0 +1,31 @@
+export type CssBlock = { readonly prelude: string; readonly body: string | undefined }
+
+export function splitBlocks(css: string): CssBlock[] {
+  const blocks: CssBlock[] = []
+  let depth = 0
+  let start = 0
+  let bodyStart = 0
+  let prelude = ''
+  for (let index = 0; index < css.length; index += 1) {
+    const char = css[index]
+    if (depth === 0 && char === ';') {
+      blocks.push({ prelude: css.slice(start, index).trim(), body: undefined })
+      start = index + 1
+    }
+    if (char === '{') {
+      if (depth === 0) {
+        prelude = css.slice(start, index).trim()
+        bodyStart = index + 1
+      }
+      depth += 1
+    }
+    if (char === '}') {
+      depth -= 1
+      if (depth === 0) {
+        blocks.push({ prelude, body: css.slice(bodyStart, index) })
+        start = index + 1
+      }
+    }
+  }
+  return blocks
+}

package/src/legacyStyles.golden.test.ts

@@ -2,6 +2,8 @@ import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { describe, expect, it } from 'bun:test'
 
+import { splitBlocks } from './cssBlocks.test-helper'
+
 // legacyStyles.fixture.css is the styles.css shipped by 0.4.2; the stylesheet is global, so anything
 // added since must be namespaced under .cv- and must not reach the host's own elements.
 const LEGACY_CSS = readFileSync(join(import.meta.dir, 'legacyStyles.fixture.css'), 'utf8')
@@ -10,39 +12,8 @@ const CURRENT_CSS = readFileSync(join(import.meta.dir, 'styles.css'), 'utf8')
 const NESTED_AT_RULES = ['@media', '@supports']
 const ALLOWED_NEW_AT_RULES = ['@media', '@supports', '@keyframes']
 
-type Block = { readonly prelude: string; readonly body: string | undefined }
 type Inventory = { selectors: string[]; atRules: string[]; keyframeNames: string[] }
 
-function splitBlocks(css: string): Block[] {
-  const blocks: Block[] = []
-  let depth = 0
-  let start = 0
-  let bodyStart = 0
-  let prelude = ''
-  for (let index = 0; index < css.length; index += 1) {
-    const char = css[index]
-    if (depth === 0 && char === ';') {
-      blocks.push({ prelude: css.slice(start, index).trim(), body: undefined })
-      start = index + 1
-    }
-    if (char === '{') {
-      if (depth === 0) {
-        prelude = css.slice(start, index).trim()
-        bodyStart = index + 1
-      }
-      depth += 1
-    }
-    if (char === '}') {
-      depth -= 1
-      if (depth === 0) {
-        blocks.push({ prelude, body: css.slice(bodyStart, index) })
-        start = index + 1
-      }
-    }
-  }
-  return blocks
-}
-
 function splitSelectorList(prelude: string): string[] {
   const parts: string[] = []
   let parenthesisDepth = 0

package/src/participantLayoutShrink.test.ts

@@ -0,0 +1,82 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'bun:test'
+
+import { splitBlocks } from './cssBlocks.test-helper'
+
+const CSS = readFileSync(join(import.meta.dir, 'styles.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+
+const NON_SHRINKING_ITEMS = [
+  '.cv-p-filters',
+  '.cv-p-quick',
+  '.cv-p-search',
+  '.cv-p-composer',
+  '.cv-p-thread__header',
+  '.cv-p-thread__subject-card',
+]
+
+type FlexState = { grow: number; shrink: number }
+
+const FLEX_KEYWORDS: Record<string, FlexState> = {
+  none: { grow: 0, shrink: 0 },
+  auto: { grow: 1, shrink: 1 },
+  initial: { grow: 0, shrink: 1 },
+}
+
+function parseFlexShorthand(value: string): FlexState {
+  const keyword = FLEX_KEYWORDS[value]
+  if (keyword) return { ...keyword }
+  const numbers = value
+    .split(/\s+/)
+    .filter((token) => /^\d*\.?\d+$/.test(token))
+    .map(Number)
+  return { grow: numbers[0] ?? 0, shrink: numbers[1] ?? 1 }
+}
+
+function cleanValue(raw: string): string {
+  return raw
+    .replace(/!important/g, '')
+    .trim()
+    .toLowerCase()
+}
+
+// Only depth-0 style rules count (@media/@supports are conditional); later declarations win.
+function effectiveFlex(selector: string): FlexState | undefined {
+  let state: FlexState | undefined
+  for (const { prelude, body } of splitBlocks(CSS)) {
+    if (body === undefined || prelude.startsWith('@')) continue
+    if (!prelude.split(',').some((entry) => entry.trim() === selector)) continue
+    for (const declaration of body.split(';')) {
+      const separator = declaration.indexOf(':')
+      if (separator === -1) continue
+      const property = declaration.slice(0, separator).trim().toLowerCase()
+      const value = cleanValue(declaration.slice(separator + 1))
+      if (property === 'flex') state = parseFlexShorthand(value)
+      if (property === 'flex-shrink') state = { grow: state?.grow ?? 0, shrink: Number(value) }
+    }
+  }
+  return state
+}
+
+function hasMinHeightZero(selector: string): boolean {
+  return splitBlocks(CSS).some(
+    ({ prelude, body }) =>
+      body !== undefined &&
+      !prelude.startsWith('@') &&
+      prelude.split(',').some((entry) => entry.trim() === selector) &&
+      /min-height:\s*0\b/.test(body),
+  )
+}
+
+describe('participant view flex layout', () => {
+  it.each(NON_SHRINKING_ITEMS)('%s does not shrink inside a flex column', (selector) => {
+    expect(effectiveFlex(selector)?.shrink).toBe(0)
+  })
+
+  it('keeps the thread scroller as the only shrinking, growing region', () => {
+    const scroller = effectiveFlex('.cv-p-thread__scroll')
+    expect(scroller?.grow).toBe(1)
+    expect(scroller?.shrink).toBe(1)
+    expect(hasMinHeightZero('.cv-p-thread__scroll')).toBe(true)
+  })
+})

package/src/styles.css

@@ -1295,5 +1295,8 @@
   .cv-p-row, .cv-p-button, .cv-p-chip { transition: background-color 0.12s, border-color 0.12s; }
 }
 
+/* Item de coluna flex com overflow ≠ visible (no próprio item) perde o min-height:auto e encolhe; os quatro últimos são defensivos. */
+.cv-p-filters, .cv-p-quick, .cv-p-search, .cv-p-composer, .cv-p-thread__header, .cv-p-thread__subject-card { flex: 0 0 auto; }
+
 .cv-p-root { display: flex; flex-direction: column; min-height: 0; height: 100%; }
 .cv-p-root__screen { display: flex; flex-direction: column; flex: 1; min-height: 0; }