@transferwise/components 46.157.1 → 46.158.0

package/build/Markup/Markup.js

@@ -12,18 +12,19 @@ const PLACEHOLDER_REGEX = /\{\{(\w+)\}\}/g;
 function substituteData(text, data) {
   return text.replace(PLACEHOLDER_REGEX, (match, key) => Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : match);
 }
-function renderNodes(nodes, actions, data, allowLinks) {
-  return nodes.map((node, index) => renderNode(node, actions, data, allowLinks, index));
+function renderNodes(nodes, onAction, data, allowLinks) {
+  return nodes.map((node, index) => renderNode(node, onAction, data, allowLinks, index));
 }
-function renderLinkNode(node, actions, data, allowLinks, key) {
-  const children = renderNodes(node.children, actions, data, allowLinks);
-  if (node.action && actions?.[node.action]) {
+function renderLinkNode(node, onAction, data, allowLinks, key) {
+  const children = renderNodes(node.children, onAction, data, allowLinks);
+  if (node.action && onAction) {
+    const actionId = node.action;
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
       jsxRuntime.jsx(Link.default, {
         "aria-label": node.accessibilityLabel,
-        onClick: actions[node.action],
+        onClick: () => onAction(actionId),
         children: children
       }, key)
     );
@@ -41,7 +42,7 @@ function renderLinkNode(node, actions, data, allowLinks, key) {
     children: children
   }, key);
 }
-function renderNode(node, actions, data, allowLinks, key) {
+function renderNode(node, onAction, data, allowLinks, key) {
   switch (node.type) {
     case 'text':
       return /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
@@ -55,27 +56,27 @@ function renderNode(node, actions, data, allowLinks, key) {
       return /*#__PURE__*/jsxRuntime.jsx("em", {
         className: `wds-markup-emphasis wds-markup-emphasis--${node.type}`,
         "aria-label": node.accessibilityLabel,
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'strong':
       return /*#__PURE__*/jsxRuntime.jsx("strong", {
         className: "wds-markup-strong",
         "aria-label": node.accessibilityLabel,
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'strikethrough':
       return /*#__PURE__*/jsxRuntime.jsx("del", {
         className: "wds-markup-strikethrough",
         "aria-label": node.accessibilityLabel,
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'paragraph':
       return /*#__PURE__*/jsxRuntime.jsx("p", {
         className: "wds-markup-paragraph",
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'link':
-      return renderLinkNode(node, actions, data, allowLinks, key);
+      return renderLinkNode(node, onAction, data, allowLinks, key);
   }
 }
 function hasParagraph(nodes) {
@@ -106,7 +107,7 @@ const Markup = ({
   children,
   data,
   allowLinks = 'internal',
-  actions,
+  onAction,
   as,
   className,
   'data-testid': testId
@@ -129,7 +130,7 @@ const Markup = ({
   return /*#__PURE__*/jsxRuntime.jsx(Element, {
     className: className,
     "data-testid": testId,
-    children: renderNodes(tree, actions, data, allowLinks)
+    children: renderNodes(tree, onAction, data, allowLinks)
   });
 };
 

package/build/Markup/Markup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Markup.js","sources":["../../src/Markup/Markup.tsx"],"sourcesContent":["import React, { Fragment, useMemo } from 'react';\n\nimport Link from '../Link';\n\nimport { parseMarkup } from './utils/parseMarkup';\nimport { type AllowLinksMode, isHrefAllowedByMode, sanitiseHref } from './utils/sanitise';\nimport type { MarkupActions, MarkupNode, MarkupProps } from './Markup.types';\n\nconst PLACEHOLDER_REGEX = /\\{\\{(\\w+)\\}\\}/g;\n\ntype MarkupData = Record<string, string | number>;\n\nfunction substituteData(text: string, data: MarkupData): string {\n  return text.replace(PLACEHOLDER_REGEX, (match, key: string) =>\n    Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : match,\n  );\n}\n\nfunction renderNodes(\n  nodes: MarkupNode[],\n  actions: MarkupActions | undefined,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n): React.ReactNode[] {\n  return nodes.map((node, index) => renderNode(node, actions, data, allowLinks, index));\n}\n\nfunction renderLinkNode(\n  node: Extract<MarkupNode, { type: 'link' }>,\n  actions: MarkupActions | undefined,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  const children = renderNodes(node.children, actions, data, allowLinks);\n\n  if (node.action && actions?.[node.action]) {\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <Link key={key} aria-label={node.accessibilityLabel} onClick={actions[node.action]}>\n        {children}\n      </Link>\n    );\n  }\n\n  const sanitisedHref = node.href ? sanitiseHref(node.href) : undefined;\n  if (sanitisedHref && isHrefAllowedByMode(sanitisedHref, allowLinks)) {\n    return (\n      <Link\n        key={key}\n        href={sanitisedHref}\n        target={node.target}\n        aria-label={node.accessibilityLabel}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return <Fragment key={key}>{children}</Fragment>;\n}\n\nfunction renderNode(\n  node: MarkupNode,\n  actions: MarkupActions | undefined,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  switch (node.type) {\n    case 'text':\n      return (\n        <Fragment key={key}>{data ? substituteData(node.content, data) : node.content}</Fragment>\n      );\n    case 'newline':\n      return <br key={key} />;\n    case 'important':\n    case 'positive':\n    case 'negative':\n      return (\n        <em\n          key={key}\n          className={`wds-markup-emphasis wds-markup-emphasis--${node.type}`}\n          aria-label={node.accessibilityLabel}\n        >\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </em>\n      );\n    case 'strong':\n      return (\n        <strong key={key} className=\"wds-markup-strong\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </strong>\n      );\n    case 'strikethrough':\n      return (\n        <del key={key} className=\"wds-markup-strikethrough\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </del>\n      );\n    case 'paragraph':\n      return (\n        <p key={key} className=\"wds-markup-paragraph\">\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </p>\n      );\n    case 'link':\n      return renderLinkNode(node, actions, data, allowLinks, key);\n  }\n}\n\nfunction hasParagraph(nodes: MarkupNode[]): boolean {\n  for (const node of nodes) {\n    if (node.type === 'paragraph') {\n      return true;\n    }\n    if ('children' in node && hasParagraph(node.children)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Parses a markup string and renders it as React elements. Supports `<important>`,\n * `<positive>`, `<negative>`, `<strong>`, `<strikethrough>`, `<paragraph>` (alias `<p>`),\n * and `<link>` (alias `<a>`) with secure href validation.\n *\n * It only processes `string` input, while `ReactNode` is passed-through without processing.\n *\n * > The component supersedes [Emphasis](?path=/docs/typography-emphasis--docs), which will be\n * eventually deprecated.\n *\n * @see http://storybook.wise.design/?path=/docs/typography-markup--docs\n * @link ../emphasis/Emphasis | Emphasis\n */\nexport const Markup: React.FC<MarkupProps> = ({\n  children,\n  data,\n  allowLinks = 'internal',\n  actions,\n  as,\n  className,\n  'data-testid': testId,\n}) => {\n  const tree = useMemo(\n    () => (typeof children === 'string' ? parseMarkup(children) : []),\n    [children],\n  );\n\n  if (typeof children !== 'string') {\n    if (children == null) {\n      return null;\n    }\n    return (\n      <span className={className} data-testid={testId}>\n        {children}\n      </span>\n    );\n  }\n\n  if (tree.length === 0) {\n    return null;\n  }\n\n  const Element = as ?? (hasParagraph(tree) ? 'div' : 'span');\n\n  return (\n    <Element className={className} data-testid={testId}>\n      {renderNodes(tree, actions, data, allowLinks)}\n    </Element>\n  );\n};\n\nexport default Markup;\n"],"names":["PLACEHOLDER_REGEX","substituteData","text","data","replace","match","key","Object","prototype","hasOwnProperty","call","String","renderNodes","nodes","actions","allowLinks","map","node","index","renderNode","renderLinkNode","children","action","_jsx","Link","accessibilityLabel","onClick","sanitisedHref","href","sanitiseHref","undefined","isHrefAllowedByMode","target","Fragment","type","content","className","hasParagraph","Markup","as","testId","tree","useMemo","parseMarkup","length","Element"],"mappings":"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"}
+{"version":3,"file":"Markup.js","sources":["../../src/Markup/Markup.tsx"],"sourcesContent":["import React, { Fragment, useMemo } from 'react';\n\nimport Link from '../Link';\n\nimport { parseMarkup } from './utils/parseMarkup';\nimport { type AllowLinksMode, isHrefAllowedByMode, sanitiseHref } from './utils/sanitise';\nimport type { MarkupActionHandler, MarkupNode, MarkupProps } from './Markup.types';\n\nconst PLACEHOLDER_REGEX = /\\{\\{(\\w+)\\}\\}/g;\n\ntype MarkupData = Record<string, string | number>;\n\nfunction substituteData(text: string, data: MarkupData): string {\n  return text.replace(PLACEHOLDER_REGEX, (match, key: string) =>\n    Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : match,\n  );\n}\n\ntype OnAction = MarkupActionHandler | undefined;\n\nfunction renderNodes(\n  nodes: MarkupNode[],\n  onAction: OnAction,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n): React.ReactNode[] {\n  return nodes.map((node, index) => renderNode(node, onAction, data, allowLinks, index));\n}\n\nfunction renderLinkNode(\n  node: Extract<MarkupNode, { type: 'link' }>,\n  onAction: OnAction,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  const children = renderNodes(node.children, onAction, data, allowLinks);\n\n  if (node.action && onAction) {\n    const actionId = node.action;\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <Link key={key} aria-label={node.accessibilityLabel} onClick={() => onAction(actionId)}>\n        {children}\n      </Link>\n    );\n  }\n\n  const sanitisedHref = node.href ? sanitiseHref(node.href) : undefined;\n  if (sanitisedHref && isHrefAllowedByMode(sanitisedHref, allowLinks)) {\n    return (\n      <Link\n        key={key}\n        href={sanitisedHref}\n        target={node.target}\n        aria-label={node.accessibilityLabel}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return <Fragment key={key}>{children}</Fragment>;\n}\n\nfunction renderNode(\n  node: MarkupNode,\n  onAction: OnAction,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  switch (node.type) {\n    case 'text':\n      return (\n        <Fragment key={key}>{data ? substituteData(node.content, data) : node.content}</Fragment>\n      );\n    case 'newline':\n      return <br key={key} />;\n    case 'important':\n    case 'positive':\n    case 'negative':\n      return (\n        <em\n          key={key}\n          className={`wds-markup-emphasis wds-markup-emphasis--${node.type}`}\n          aria-label={node.accessibilityLabel}\n        >\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </em>\n      );\n    case 'strong':\n      return (\n        <strong key={key} className=\"wds-markup-strong\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </strong>\n      );\n    case 'strikethrough':\n      return (\n        <del key={key} className=\"wds-markup-strikethrough\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </del>\n      );\n    case 'paragraph':\n      return (\n        <p key={key} className=\"wds-markup-paragraph\">\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </p>\n      );\n    case 'link':\n      return renderLinkNode(node, onAction, data, allowLinks, key);\n  }\n}\n\nfunction hasParagraph(nodes: MarkupNode[]): boolean {\n  for (const node of nodes) {\n    if (node.type === 'paragraph') {\n      return true;\n    }\n    if ('children' in node && hasParagraph(node.children)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Parses a markup string and renders it as React elements. Supports `<important>`,\n * `<positive>`, `<negative>`, `<strong>`, `<strikethrough>`, `<paragraph>` (alias `<p>`),\n * and `<link>` (alias `<a>`) with secure href validation.\n *\n * It only processes `string` input, while `ReactNode` is passed-through without processing.\n *\n * > The component supersedes [Emphasis](?path=/docs/typography-emphasis--docs), which will be\n * eventually deprecated.\n *\n * @see http://storybook.wise.design/?path=/docs/typography-markup--docs\n * @link ../emphasis/Emphasis | Emphasis\n */\nexport const Markup: React.FC<MarkupProps> = ({\n  children,\n  data,\n  allowLinks = 'internal',\n  onAction,\n  as,\n  className,\n  'data-testid': testId,\n}) => {\n  const tree = useMemo(\n    () => (typeof children === 'string' ? parseMarkup(children) : []),\n    [children],\n  );\n\n  if (typeof children !== 'string') {\n    if (children == null) {\n      return null;\n    }\n    return (\n      <span className={className} data-testid={testId}>\n        {children}\n      </span>\n    );\n  }\n\n  if (tree.length === 0) {\n    return null;\n  }\n\n  const Element = as ?? (hasParagraph(tree) ? 'div' : 'span');\n\n  return (\n    <Element className={className} data-testid={testId}>\n      {renderNodes(tree, onAction, data, allowLinks)}\n    </Element>\n  );\n};\n\nexport default Markup;\n"],"names":["PLACEHOLDER_REGEX","substituteData","text","data","replace","match","key","Object","prototype","hasOwnProperty","call","String","renderNodes","nodes","onAction","allowLinks","map","node","index","renderNode","renderLinkNode","children","action","actionId","_jsx","Link","accessibilityLabel","onClick","sanitisedHref","href","sanitiseHref","undefined","isHrefAllowedByMode","target","Fragment","type","content","className","hasParagraph","Markup","as","testId","tree","useMemo","parseMarkup","length","Element"],"mappings":"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"}

package/build/Markup/Markup.mjs

@@ -8,18 +8,19 @@ const PLACEHOLDER_REGEX = /\{\{(\w+)\}\}/g;
 function substituteData(text, data) {
   return text.replace(PLACEHOLDER_REGEX, (match, key) => Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : match);
 }
-function renderNodes(nodes, actions, data, allowLinks) {
-  return nodes.map((node, index) => renderNode(node, actions, data, allowLinks, index));
+function renderNodes(nodes, onAction, data, allowLinks) {
+  return nodes.map((node, index) => renderNode(node, onAction, data, allowLinks, index));
 }
-function renderLinkNode(node, actions, data, allowLinks, key) {
-  const children = renderNodes(node.children, actions, data, allowLinks);
-  if (node.action && actions?.[node.action]) {
+function renderLinkNode(node, onAction, data, allowLinks, key) {
+  const children = renderNodes(node.children, onAction, data, allowLinks);
+  if (node.action && onAction) {
+    const actionId = node.action;
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
       jsx(Link, {
         "aria-label": node.accessibilityLabel,
-        onClick: actions[node.action],
+        onClick: () => onAction(actionId),
         children: children
       }, key)
     );
@@ -37,7 +38,7 @@ function renderLinkNode(node, actions, data, allowLinks, key) {
     children: children
   }, key);
 }
-function renderNode(node, actions, data, allowLinks, key) {
+function renderNode(node, onAction, data, allowLinks, key) {
   switch (node.type) {
     case 'text':
       return /*#__PURE__*/jsx(Fragment, {
@@ -51,27 +52,27 @@ function renderNode(node, actions, data, allowLinks, key) {
       return /*#__PURE__*/jsx("em", {
         className: `wds-markup-emphasis wds-markup-emphasis--${node.type}`,
         "aria-label": node.accessibilityLabel,
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'strong':
       return /*#__PURE__*/jsx("strong", {
         className: "wds-markup-strong",
         "aria-label": node.accessibilityLabel,
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'strikethrough':
       return /*#__PURE__*/jsx("del", {
         className: "wds-markup-strikethrough",
         "aria-label": node.accessibilityLabel,
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'paragraph':
       return /*#__PURE__*/jsx("p", {
         className: "wds-markup-paragraph",
-        children: renderNodes(node.children, actions, data, allowLinks)
+        children: renderNodes(node.children, onAction, data, allowLinks)
       }, key);
     case 'link':
-      return renderLinkNode(node, actions, data, allowLinks, key);
+      return renderLinkNode(node, onAction, data, allowLinks, key);
   }
 }
 function hasParagraph(nodes) {
@@ -102,7 +103,7 @@ const Markup = ({
   children,
   data,
   allowLinks = 'internal',
-  actions,
+  onAction,
   as,
   className,
   'data-testid': testId
@@ -125,7 +126,7 @@ const Markup = ({
   return /*#__PURE__*/jsx(Element, {
     className: className,
     "data-testid": testId,
-    children: renderNodes(tree, actions, data, allowLinks)
+    children: renderNodes(tree, onAction, data, allowLinks)
   });
 };
 

package/build/Markup/Markup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markup.mjs","sources":["../../src/Markup/Markup.tsx"],"sourcesContent":["import React, { Fragment, useMemo } from 'react';\n\nimport Link from '../Link';\n\nimport { parseMarkup } from './utils/parseMarkup';\nimport { type AllowLinksMode, isHrefAllowedByMode, sanitiseHref } from './utils/sanitise';\nimport type { MarkupActions, MarkupNode, MarkupProps } from './Markup.types';\n\nconst PLACEHOLDER_REGEX = /\\{\\{(\\w+)\\}\\}/g;\n\ntype MarkupData = Record<string, string | number>;\n\nfunction substituteData(text: string, data: MarkupData): string {\n  return text.replace(PLACEHOLDER_REGEX, (match, key: string) =>\n    Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : match,\n  );\n}\n\nfunction renderNodes(\n  nodes: MarkupNode[],\n  actions: MarkupActions | undefined,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n): React.ReactNode[] {\n  return nodes.map((node, index) => renderNode(node, actions, data, allowLinks, index));\n}\n\nfunction renderLinkNode(\n  node: Extract<MarkupNode, { type: 'link' }>,\n  actions: MarkupActions | undefined,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  const children = renderNodes(node.children, actions, data, allowLinks);\n\n  if (node.action && actions?.[node.action]) {\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <Link key={key} aria-label={node.accessibilityLabel} onClick={actions[node.action]}>\n        {children}\n      </Link>\n    );\n  }\n\n  const sanitisedHref = node.href ? sanitiseHref(node.href) : undefined;\n  if (sanitisedHref && isHrefAllowedByMode(sanitisedHref, allowLinks)) {\n    return (\n      <Link\n        key={key}\n        href={sanitisedHref}\n        target={node.target}\n        aria-label={node.accessibilityLabel}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return <Fragment key={key}>{children}</Fragment>;\n}\n\nfunction renderNode(\n  node: MarkupNode,\n  actions: MarkupActions | undefined,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  switch (node.type) {\n    case 'text':\n      return (\n        <Fragment key={key}>{data ? substituteData(node.content, data) : node.content}</Fragment>\n      );\n    case 'newline':\n      return <br key={key} />;\n    case 'important':\n    case 'positive':\n    case 'negative':\n      return (\n        <em\n          key={key}\n          className={`wds-markup-emphasis wds-markup-emphasis--${node.type}`}\n          aria-label={node.accessibilityLabel}\n        >\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </em>\n      );\n    case 'strong':\n      return (\n        <strong key={key} className=\"wds-markup-strong\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </strong>\n      );\n    case 'strikethrough':\n      return (\n        <del key={key} className=\"wds-markup-strikethrough\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </del>\n      );\n    case 'paragraph':\n      return (\n        <p key={key} className=\"wds-markup-paragraph\">\n          {renderNodes(node.children, actions, data, allowLinks)}\n        </p>\n      );\n    case 'link':\n      return renderLinkNode(node, actions, data, allowLinks, key);\n  }\n}\n\nfunction hasParagraph(nodes: MarkupNode[]): boolean {\n  for (const node of nodes) {\n    if (node.type === 'paragraph') {\n      return true;\n    }\n    if ('children' in node && hasParagraph(node.children)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Parses a markup string and renders it as React elements. Supports `<important>`,\n * `<positive>`, `<negative>`, `<strong>`, `<strikethrough>`, `<paragraph>` (alias `<p>`),\n * and `<link>` (alias `<a>`) with secure href validation.\n *\n * It only processes `string` input, while `ReactNode` is passed-through without processing.\n *\n * > The component supersedes [Emphasis](?path=/docs/typography-emphasis--docs), which will be\n * eventually deprecated.\n *\n * @see http://storybook.wise.design/?path=/docs/typography-markup--docs\n * @link ../emphasis/Emphasis | Emphasis\n */\nexport const Markup: React.FC<MarkupProps> = ({\n  children,\n  data,\n  allowLinks = 'internal',\n  actions,\n  as,\n  className,\n  'data-testid': testId,\n}) => {\n  const tree = useMemo(\n    () => (typeof children === 'string' ? parseMarkup(children) : []),\n    [children],\n  );\n\n  if (typeof children !== 'string') {\n    if (children == null) {\n      return null;\n    }\n    return (\n      <span className={className} data-testid={testId}>\n        {children}\n      </span>\n    );\n  }\n\n  if (tree.length === 0) {\n    return null;\n  }\n\n  const Element = as ?? (hasParagraph(tree) ? 'div' : 'span');\n\n  return (\n    <Element className={className} data-testid={testId}>\n      {renderNodes(tree, actions, data, allowLinks)}\n    </Element>\n  );\n};\n\nexport default Markup;\n"],"names":["PLACEHOLDER_REGEX","substituteData","text","data","replace","match","key","Object","prototype","hasOwnProperty","call","String","renderNodes","nodes","actions","allowLinks","map","node","index","renderNode","renderLinkNode","children","action","_jsx","Link","accessibilityLabel","onClick","sanitisedHref","href","sanitiseHref","undefined","isHrefAllowedByMode","target","Fragment","type","content","className","hasParagraph","Markup","as","testId","tree","useMemo","parseMarkup","length","Element"],"mappings":"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"}
+{"version":3,"file":"Markup.mjs","sources":["../../src/Markup/Markup.tsx"],"sourcesContent":["import React, { Fragment, useMemo } from 'react';\n\nimport Link from '../Link';\n\nimport { parseMarkup } from './utils/parseMarkup';\nimport { type AllowLinksMode, isHrefAllowedByMode, sanitiseHref } from './utils/sanitise';\nimport type { MarkupActionHandler, MarkupNode, MarkupProps } from './Markup.types';\n\nconst PLACEHOLDER_REGEX = /\\{\\{(\\w+)\\}\\}/g;\n\ntype MarkupData = Record<string, string | number>;\n\nfunction substituteData(text: string, data: MarkupData): string {\n  return text.replace(PLACEHOLDER_REGEX, (match, key: string) =>\n    Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : match,\n  );\n}\n\ntype OnAction = MarkupActionHandler | undefined;\n\nfunction renderNodes(\n  nodes: MarkupNode[],\n  onAction: OnAction,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n): React.ReactNode[] {\n  return nodes.map((node, index) => renderNode(node, onAction, data, allowLinks, index));\n}\n\nfunction renderLinkNode(\n  node: Extract<MarkupNode, { type: 'link' }>,\n  onAction: OnAction,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  const children = renderNodes(node.children, onAction, data, allowLinks);\n\n  if (node.action && onAction) {\n    const actionId = node.action;\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <Link key={key} aria-label={node.accessibilityLabel} onClick={() => onAction(actionId)}>\n        {children}\n      </Link>\n    );\n  }\n\n  const sanitisedHref = node.href ? sanitiseHref(node.href) : undefined;\n  if (sanitisedHref && isHrefAllowedByMode(sanitisedHref, allowLinks)) {\n    return (\n      <Link\n        key={key}\n        href={sanitisedHref}\n        target={node.target}\n        aria-label={node.accessibilityLabel}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return <Fragment key={key}>{children}</Fragment>;\n}\n\nfunction renderNode(\n  node: MarkupNode,\n  onAction: OnAction,\n  data: MarkupData | undefined,\n  allowLinks: AllowLinksMode,\n  key: number,\n): React.ReactNode {\n  switch (node.type) {\n    case 'text':\n      return (\n        <Fragment key={key}>{data ? substituteData(node.content, data) : node.content}</Fragment>\n      );\n    case 'newline':\n      return <br key={key} />;\n    case 'important':\n    case 'positive':\n    case 'negative':\n      return (\n        <em\n          key={key}\n          className={`wds-markup-emphasis wds-markup-emphasis--${node.type}`}\n          aria-label={node.accessibilityLabel}\n        >\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </em>\n      );\n    case 'strong':\n      return (\n        <strong key={key} className=\"wds-markup-strong\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </strong>\n      );\n    case 'strikethrough':\n      return (\n        <del key={key} className=\"wds-markup-strikethrough\" aria-label={node.accessibilityLabel}>\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </del>\n      );\n    case 'paragraph':\n      return (\n        <p key={key} className=\"wds-markup-paragraph\">\n          {renderNodes(node.children, onAction, data, allowLinks)}\n        </p>\n      );\n    case 'link':\n      return renderLinkNode(node, onAction, data, allowLinks, key);\n  }\n}\n\nfunction hasParagraph(nodes: MarkupNode[]): boolean {\n  for (const node of nodes) {\n    if (node.type === 'paragraph') {\n      return true;\n    }\n    if ('children' in node && hasParagraph(node.children)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Parses a markup string and renders it as React elements. Supports `<important>`,\n * `<positive>`, `<negative>`, `<strong>`, `<strikethrough>`, `<paragraph>` (alias `<p>`),\n * and `<link>` (alias `<a>`) with secure href validation.\n *\n * It only processes `string` input, while `ReactNode` is passed-through without processing.\n *\n * > The component supersedes [Emphasis](?path=/docs/typography-emphasis--docs), which will be\n * eventually deprecated.\n *\n * @see http://storybook.wise.design/?path=/docs/typography-markup--docs\n * @link ../emphasis/Emphasis | Emphasis\n */\nexport const Markup: React.FC<MarkupProps> = ({\n  children,\n  data,\n  allowLinks = 'internal',\n  onAction,\n  as,\n  className,\n  'data-testid': testId,\n}) => {\n  const tree = useMemo(\n    () => (typeof children === 'string' ? parseMarkup(children) : []),\n    [children],\n  );\n\n  if (typeof children !== 'string') {\n    if (children == null) {\n      return null;\n    }\n    return (\n      <span className={className} data-testid={testId}>\n        {children}\n      </span>\n    );\n  }\n\n  if (tree.length === 0) {\n    return null;\n  }\n\n  const Element = as ?? (hasParagraph(tree) ? 'div' : 'span');\n\n  return (\n    <Element className={className} data-testid={testId}>\n      {renderNodes(tree, onAction, data, allowLinks)}\n    </Element>\n  );\n};\n\nexport default Markup;\n"],"names":["PLACEHOLDER_REGEX","substituteData","text","data","replace","match","key","Object","prototype","hasOwnProperty","call","String","renderNodes","nodes","onAction","allowLinks","map","node","index","renderNode","renderLinkNode","children","action","actionId","_jsx","Link","accessibilityLabel","onClick","sanitisedHref","href","sanitiseHref","undefined","isHrefAllowedByMode","target","Fragment","type","content","className","hasParagraph","Markup","as","testId","tree","useMemo","parseMarkup","length","Element"],"mappings":"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"}

package/build/Popover/Popover.js

@@ -34,11 +34,15 @@ var logActionRequired = require('../utilities/logActionRequired.js');
 
 function resolvePlacement(preferredPlacement) {
   switch (preferredPlacement) {
+    case 'top-left':
+    case 'top-right':
     case 'left-top':
     case 'right-top':
       return 'top';
     case 'bottom-left':
     case 'bottom-right':
+    case 'left-bottom':
+    case 'right-bottom':
       return 'bottom';
     default:
       return preferredPlacement;

package/build/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport Title from '../Title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  /** @default 'right' */\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className=\"np-popover\">\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className={clsx('np-popover__container', className)}\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,mCAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,eAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAC,YAAY;AAAAD,IAAAA,QAAA,gBAC1BoB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAER,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDsB,oBAAc,CAA2BtB,QAAQ,CAAC,gBAC/CuB,kBAAY,CAACvB,QAAQ,EAAE;QACrBwB,OAAO,EAAEA,MAAK;AACZxB,UAAAA,QAAQ,CAACyB,KAAK,CAACD,OAAO,IAAI;AAC1BR,UAAAA,OAAO,CAAEU,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF1B;AAAQ,KACR,CACN,eAAAoB,cAAA,CAACO,uBAAe,EAAA;AACd,MAAA,YAAA,EAAYpB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGoB,SAAU;AAC3Db,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL9B,MAAAA,SAAS,EAAE+B,SAAI,CAAC,uBAAuB,EAAE/B,SAAS,CAAE;AACpDK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,eAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJe,cAAA,CAACa,aAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport Title from '../Title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.TOP_LEFT}`\n  | `${Position.TOP_RIGHT}`\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`\n  | `${Position.LEFT_BOTTOM}`\n  | `${Position.RIGHT_BOTTOM}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  /** @default 'right' */\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'top-left':\n    case 'top-right':\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n    case 'left-bottom':\n    case 'right-bottom':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className=\"np-popover\">\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className={clsx('np-popover__container', className)}\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":"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"}

package/build/Popover/Popover.mjs

@@ -30,11 +30,15 @@ import { logActionRequired } from '../utilities/logActionRequired.mjs';
 
 function resolvePlacement(preferredPlacement) {
   switch (preferredPlacement) {
+    case 'top-left':
+    case 'top-right':
     case 'left-top':
     case 'right-top':
       return 'top';
     case 'bottom-left':
     case 'bottom-right':
+    case 'left-bottom':
+    case 'right-bottom':
       return 'bottom';
     default:
       return preferredPlacement;

package/build/Popover/Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.mjs","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport Title from '../Title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  /** @default 'right' */\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className=\"np-popover\">\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className={clsx('np-popover__container', className)}\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK;AACd,IAAA,KAAK,aAAa;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB;AAC7B;AACF;AAEc,SAAUC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,QAAQ,CAACC,KAAK;EACnCC,KAAK;EACLC,OAAO;AACP,EAAA,YAAY,EAAEC;AAAS,CACV,EAAA;AACb,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,iBAAiB,GAAGb,gBAAgB,CAACC,kBAAkB,CAAC;AAC9Da,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKZ,kBAAkB,EAAE;AAC5Cc,MAAAA,iBAAiB,CACf,CAAA,uBAAA,EAA0Bd,kBAAkB,CAAA,qDAAA,EAAwDY,iBAAiB,WAAW,CACjI;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACZ,kBAAkB,EAAEY,iBAAiB,CAAC,CAAC;AAE3C,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,IAAI,CAAC;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC;AACdV,IAAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,oBACEa,IAAA,CAAA,MAAA,EAAA;AAAMlB,IAAAA,SAAS,EAAC,YAAY;AAAAD,IAAAA,QAAA,gBAC1BoB,GAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAER,eAAgB;AAACZ,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDsB,cAAc,CAA2BtB,QAAQ,CAAC,gBAC/CuB,YAAY,CAACvB,QAAQ,EAAE;QACrBwB,OAAO,EAAEA,MAAK;AACZxB,UAAAA,QAAQ,CAACyB,KAAK,CAACD,OAAO,IAAI;AAC1BR,UAAAA,OAAO,CAAEU,QAAQ,IAAK,CAACA,QAAQ,CAAC;AAClC,QAAA;OACD,CAAC,GACF1B;AAAQ,KACR,CACN,eAAAoB,GAAA,CAACO,eAAe,EAAA;AACd,MAAA,YAAA,EAAYpB,SAAU;AACtB,MAAA,iBAAA,EAAiBF,KAAK,IAAI,CAACE,SAAS,GAAGC,OAAO,GAAGoB,SAAU;AAC3Db,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL9B,MAAAA,SAAS,EAAE+B,IAAI,CAAC,uBAAuB,EAAE/B,SAAS,CAAE;AACpDK,MAAAA,OAAO,EAAEY,aAAc;AAAAlB,MAAAA,QAAA,eAEvBmB,IAAA,CAAA,KAAA,EAAA;AAAKlB,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EAAA,CACtDK,KAAK,iBACJe,GAAA,CAACa,KAAK,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACC,UAAAA,EAAE,EAAE7B,OAAQ;AAACP,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAC/DK;SACI,CACR,EACAH,OAAO;OACL;AACP,KAAiB,CACnB;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Popover.mjs","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useRef, useState, cloneElement, useEffect, isValidElement, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/ResponsivePanel';\nimport Title from '../Title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.TOP_LEFT}`\n  | `${Position.TOP_RIGHT}`\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`\n  | `${Position.LEFT_BOTTOM}`\n  | `${Position.RIGHT_BOTTOM}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  title?: React.ReactNode;\n  /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */\n  'aria-label'?: string;\n  /** @default 'right' */\n  preferredPlacement?: PopoverPreferredPlacement;\n  content: React.ReactNode;\n  onClose?: () => void;\n  className?: string;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'top-left':\n    case 'top-right':\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n    case 'left-bottom':\n    case 'right-bottom':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n  'aria-label': ariaLabel,\n}: PopoverProps) {\n  const titleId = useId();\n\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className=\"np-popover\">\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        aria-label={ariaLabel}\n        aria-labelledby={title && !ariaLabel ? titleId : undefined}\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className={clsx('np-popover__container', className)}\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} id={titleId} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","ariaLabel","titleId","useId","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","undefined","anchorRef","position","arrow","clsx","Title","type","Typography","TITLE_BODY","id"],"mappings":"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"}

package/build/common/Panel/Panel.js

@@ -40,7 +40,15 @@ const fallbackPlacements = {
   [position.Position.TOP]: [position.Position.BOTTOM, position.Position.RIGHT, position.Position.LEFT],
   [position.Position.BOTTOM]: [position.Position.TOP, position.Position.RIGHT, position.Position.LEFT],
   [position.Position.LEFT]: [position.Position.RIGHT, position.Position.TOP, position.Position.BOTTOM],
-  [position.Position.RIGHT]: [position.Position.LEFT, position.Position.TOP, position.Position.BOTTOM]
+  [position.Position.RIGHT]: [position.Position.LEFT, position.Position.TOP, position.Position.BOTTOM],
+  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
+  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
+  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
+  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
+  'left-start': ['right-start', 'left-end', 'right-end'],
+  'left-end': ['right-end', 'left-start', 'right-start'],
+  'right-start': ['left-start', 'right-end', 'left-end'],
+  'right-end': ['left-end', 'right-start', 'left-start']
 };
 const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   arrow = false,
@@ -56,13 +64,14 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = React.useRef(null);
+  const floatingPlacement = position.positionToPlacement(position$1);
   const middleware = [];
   if (arrow) {
     middleware.push(react.offset(POPOVER_OFFSET));
   }
-  if (flip && fallbackPlacements[position$1]) {
+  if (flip && fallbackPlacements[floatingPlacement]) {
     middleware.push(react.flip({
-      fallbackPlacements: fallbackPlacements[position$1]
+      fallbackPlacements: fallbackPlacements[floatingPlacement]
     }));
   }
   if (altAxis) {
@@ -91,7 +100,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
     placement,
     middlewareData
   } = react.useFloating({
-    placement: position$1,
+    placement: floatingPlacement,
     middleware,
     elements: {
       reference: anchorRef.current

package/build/common/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, type FloatingPlacement, positionToPlacement } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<Placement, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const floatingPlacement = positionToPlacement(position);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","floatingPlacement","positionToPlacement","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/Panel/Panel.mjs

@@ -11,7 +11,7 @@ import '../PropsValues/width.mjs';
 import '../PropsValues/type.mjs';
 import '../PropsValues/dateMode.mjs';
 import '../PropsValues/monthFormat.mjs';
-import { Position } from '../PropsValues/position.mjs';
+import { Position, positionToPlacement } from '../PropsValues/position.mjs';
 import '../PropsValues/layouts.mjs';
 import '../PropsValues/status.mjs';
 import '../PropsValues/sentiment.mjs';
@@ -36,7 +36,15 @@ const fallbackPlacements = {
   [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
   [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
   [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
-  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
+  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],
+  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
+  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
+  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
+  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
+  'left-start': ['right-start', 'left-end', 'right-end'],
+  'left-end': ['right-end', 'left-start', 'right-start'],
+  'right-start': ['left-start', 'right-end', 'left-end'],
+  'right-end': ['left-end', 'right-start', 'left-start']
 };
 const Panel = /*#__PURE__*/forwardRef(function Panel({
   arrow: arrow$1 = false,
@@ -52,13 +60,14 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = useRef(null);
+  const floatingPlacement = positionToPlacement(position);
   const middleware = [];
   if (arrow$1) {
     middleware.push(offset(POPOVER_OFFSET));
   }
-  if (flip$1 && fallbackPlacements[position]) {
+  if (flip$1 && fallbackPlacements[floatingPlacement]) {
     middleware.push(flip({
-      fallbackPlacements: fallbackPlacements[position]
+      fallbackPlacements: fallbackPlacements[floatingPlacement]
     }));
   }
   if (altAxis) {
@@ -87,7 +96,7 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
     placement,
     middlewareData
   } = useFloating({
-    placement: position,
+    placement: floatingPlacement,
     middleware,
     elements: {
       reference: anchorRef.current

package/build/common/Panel/Panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.mjs","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.mjs","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, type FloatingPlacement, positionToPlacement } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<Placement, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const floatingPlacement = positionToPlacement(position);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","floatingPlacement","positionToPlacement","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}