npm - @ntbjs/react-components - Versions diffs - 2.0.14 → 3.0.0-rc.1 - Mend

@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (343) hide show

package/build/data/Popover/Popover.js CHANGED Viewed

@@ -1,10 +1,18 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { isBoolean } from 'lodash';
-import PropTypes from 'prop-types';
-import React__default, { useMemo } from 'react';
+import React__default from 'react';
+import { useFloatingNodeId, useMergeRefs, FloatingNode, FloatingPortal } from '@floating-ui/react';
+import useFloatingPopover from '../../hooks/useFloatingPopover.js';
+import { getElementRef } from '../../utils/getElementRef.js';
+import { SharedFloatingArrow, POPOVER_ARROW } from '../_shared/FloatingArrow.styled.js';
 import { Popover as Popover$1 } from './Popover.styled.js';
-import maxSize from 'popper-max-size-modifier';
+import { jsx, jsxs } from 'react/jsx-runtime';
+const TIPPY_DEFAULT_Z_INDEX = 9999;
+const POSITIONER_MAX_WIDTH = 'calc(100vw - 10px)';
+const CONTEXT_MENU_SUBLEVEL_PLACEMENT = 'right-start';
+const CONTEXT_MENU_SUBLEVEL_TRIGGER = 'mouseenter click focus';
+const CONTEXT_MENU_ITEM_SELECTOR = '.context-menu-item';
+const CONTEXT_MENU_SUBLEVEL_OPENER_CLASS = 'opens-sublevel';
+const PROPS_NEVER_FORWARDED = ['onClick', 'onChange', 'onSubmit', 'popperOptions'];
 const Popover = React__default.forwardRef(function Popover({
   content = 'Tooltip',
   interactive = true,
@@ -18,78 +26,124 @@ const Popover = React__default.forwardRef(function Popover({
   contextMenuSublevel = false,
   children,
   modifiers = [],
+  middleware,
   maxWidth = 'none',
+  zIndex = TIPPY_DEFAULT_Z_INDEX,
+  disabled = false,
+  appendTo,
+  onClickOutside,
+  onShow,
+  onHide,
   ...props
 }, ref) {
-  const errorOffset = useMemo(() => arrow ? 15 : 0, [arrow]);
-  const isControlled = useMemo(() => isBoolean(visible), [visible]);
-  const handleContextMenuItemClick = () => {
-    document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(item => item.addEventListener('click', () => {
-      document.querySelectorAll('[data-tippy-root]').forEach(node => {
-        if (node._tippy) {
-          node._tippy.hide();
-        }
-      });
-    }));
+  void modifiers.length;
+  const onOpenChange = React__default.useCallback((open, event, reason) => {
+    if (!open && reason === 'outside-press') {
+      onClickOutside?.(event);
+    }
+    if (open) {
+      onShow?.();
+    } else {
+      onHide?.();
+    }
+  }, [onClickOutside, onShow, onHide]);
+  const nodeId = useFloatingNodeId();
+  const offsetTuple = [offset[0] ?? 0, offset[1] ?? 0];
+  const arrowDrivesTheOffset = arrow;
+  const drawsArrow = contextMenu ? false : arrow;
+  const {
+    refs,
+    floatingStyles,
+    context,
+    getReferenceProps,
+    getFloatingProps,
+    isMounted,
+    transitionStyles,
+    arrowRef,
+    setOpen,
+    placement: resolvedPlacement,
+    pointerEvents
+  } = useFloatingPopover({
+    placement: contextMenuSublevel ? CONTEXT_MENU_SUBLEVEL_PLACEMENT : placement,
+    open: visible,
+    onOpenChange,
+    trigger: contextMenuSublevel ? CONTEXT_MENU_SUBLEVEL_TRIGGER : trigger,
+    offset: offsetTuple,
+    arrow: arrowDrivesTheOffset,
+    interactive,
+    disabled,
+    duration,
+    constrainHeight: true,
+    nodeId,
+    middleware
+  });
+  const childRef = React__default.isValidElement(children) ? getElementRef(children) : null;
+  const referenceRef = useMergeRefs([ref, childRef, refs.setReference]);
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !PROPS_NEVER_FORWARDED.includes(key)));
+  const reference = React__default.isValidElement(children) ? React__default.cloneElement(children, {
+    ...getReferenceProps(children.props),
+    ref: referenceRef
+  }) : children;
+  const handleContextMenuClick = event => {
+    if (!contextMenu) return;
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const item = target.closest(CONTEXT_MENU_ITEM_SELECTOR);
+    if (!item || item.classList.contains(CONTEXT_MENU_SUBLEVEL_OPENER_CLASS)) return;
+    setOpen(false, event.nativeEvent, 'click');
   };
-  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];
-  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key)));
-  return React__default.createElement("div", null, React__default.createElement(Popover$1, _extends({
-    ref: ref,
-    content: content,
-    interactive: interactive,
-    placement: contextMenuSublevel ? 'right-start' : placement,
-    duration: duration,
-    animation: 'shift-away-subtle',
-    trigger: isControlled ? undefined : contextMenuSublevel ? 'mouseenter click focus' : trigger,
-    offset: [offset[0], offset[1] + errorOffset],
-    arrow: contextMenu ? false : arrow,
-    visible: visible,
-    popperOptions: {
-      modifiers: [{
-        ...maxSize,
-        options: {
-          boundary: 'viewport',
-          rootBoundary: 'viewport',
-          padding: 10
-        }
-      }, {
-        name: 'applyMaxSize',
-        enabled: true,
-        phase: 'beforeWrite',
-        requires: ['maxSize'],
-        fn({
-          state
-        }) {
-          const {
-            height
-          } = state.modifiersData.maxSize;
-          state.styles.popper = {
-            ...state.styles.popper,
-            maxHeight: `${height}px`
-          };
-        }
-      }, ...modifiers]
+  const renderInline = appendTo === 'parent' || interactive && appendTo === undefined;
+  const resolvePortalRoot = () => {
+    if (renderInline || appendTo === undefined) return undefined;
+    if (typeof appendTo === 'function') {
+      const node = refs.reference.current;
+      return node instanceof Element ? appendTo(node) : null;
+    }
+    return appendTo;
+  };
+  const floating = isMounted ? jsx("div", {
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles,
+      zIndex,
+      pointerEvents,
+      maxWidth: POSITIONER_MAX_WIDTH
     },
-    onShow: contextMenu ? handleContextMenuItemClick : undefined,
-    maxWidth: maxWidth
-  }, filteredProps), children));
+    ...getFloatingProps({
+      onClick: handleContextMenuClick
+    }),
+    children: jsxs(Popover$1, {
+      ...filteredProps,
+      "data-placement": resolvedPlacement,
+      "data-context-menu": contextMenu ? 'true' : undefined,
+      "data-context-menu-sublevel": contextMenuSublevel ? 'true' : undefined,
+      role: "tooltip",
+      tabIndex: -1,
+      style: {
+        ...transitionStyles,
+        maxWidth
+      },
+      children: [jsx("div", {
+        className: "tippy-content",
+        children: content
+      }), drawsArrow && jsx(SharedFloatingArrow, {
+        ref: arrowRef,
+        context: context,
+        "data-arrow-surface": "popover",
+        ...POPOVER_ARROW
+      })]
+    })
+  }) : null;
+  return jsxs("div", {
+    children: [reference, jsx(FloatingNode, {
+      id: nodeId,
+      children: renderInline ? floating : jsx(FloatingPortal, {
+        root: resolvePortalRoot(),
+        children: floating
+      })
+    })]
+  });
 });
-Popover.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  interactive: PropTypes.bool,
-  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: PropTypes.number,
-  trigger: PropTypes.string,
-  offset: PropTypes.arrayOf(PropTypes.number),
-  arrow: PropTypes.bool,
-  visible: PropTypes.bool,
-  modifiers: PropTypes.array,
-  maxWidth: PropTypes.string,
-  contextMenu: PropTypes.bool,
-  contextMenuSublevel: PropTypes.bool,
-  children: PropTypes.node.isRequired
-} : {};
 export { Popover as default };
 //# sourceMappingURL=Popover.js.map

package/build/data/Popover/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","sources":["../../../src/components/data/Popover/Popover.js"],"sourcesContent":["import { isBoolean } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { useMemo } from 'react';\nimport * as S from './Popover.styled';\nimport maxSize from 'popper-max-size-modifier';\n\n/*\n The `Popover` is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.\n * A `Popover` renders a temporary context to get user’s attention and to hide unnecessary interactions.\n \n This component is used with the `Button` and `ContextMenu` components to create dropdown menus and context menus.\n * See their documentation for usage examples.\n \n ### Import\n \n ``` js\n * import { Popover } from '@ntbjs/react-components/data'\n * // or\n * import Popover from '@ntbjs/react-components/data/Popover'\n * ```\n \n ### Usage example\n \n ``` js\n<Popover content={<img alt=\"Dummy content\" src={dummyImage} />}>\n <ActionButton icon={<DeleteIcon />} onClick={() => {}} />\n</Popover>\n * ```\n /\n\nconst Popover = React.forwardRef(function Popover(\n {\n content = 'Tooltip',\n interactive = true,\n placement = 'bottom-end',\n duration = 350,\n trigger = 'click focus',\n offset = [0, 8],\n arrow = true,\n visible = undefined,\n contextMenu = false,\n contextMenuSublevel = false,\n children,\n modifiers = [],\n maxWidth = 'none',\n ...props\n },\n ref\n) {\n const errorOffset = useMemo(() => (arrow ? 15 : 0), [arrow]);\n\n const isControlled = useMemo(() => isBoolean(visible), [visible]);\n\n const handleContextMenuItemClick = () => {\n document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(item =>\n item.addEventListener('click', () => {\n document.querySelectorAll('[data-tippy-root]').forEach(node => {\n if (node._tippy) {\n node._tippy.hide();\n }\n });\n })\n );\n };\n\n const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];\n\n const filteredProps = Object.fromEntries(\n Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key))\n );\n\n return (\n <div>\n <S.Popover\n ref={ref}\n content={content}\n interactive={interactive}\n placement={contextMenuSublevel ? 'right-start' : placement}\n duration={duration}\n animation={'shift-away-subtle'}\n trigger={\n isControlled ? undefined : contextMenuSublevel ? 'mouseenter click focus' : trigger\n }\n offset={[offset[0], offset[1] + errorOffset]}\n arrow={contextMenu ? false : arrow}\n visible={visible}\n popperOptions={{\n modifiers: [\n {\n ...maxSize,\n options: {\n boundary: 'viewport',\n rootBoundary: 'viewport',\n padding: 10\n }\n },\n {\n name: 'applyMaxSize',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['maxSize'],\n fn({ state }) {\n // The `maxSize` modifier provides this data\n const { height } = state.modifiersData.maxSize;\n\n state.styles.popper = {\n ...state.styles.popper,\n maxHeight: `${height}px`\n };\n }\n },\n ...modifiers\n ]\n }}\n // contextMenu={contextMenu}\n // contextMenuSublevel={contextMenuSublevel}\n onShow={contextMenu ? handleContextMenuItemClick : undefined}\n maxWidth={maxWidth}\n {...filteredProps}\n >\n {children}\n </S.Popover>\n </div>\n );\n});\n\n/\n https://atomiks.github.io/tippyjs/v6/all-props/\n * @type {{content: Validator<NonNullable<string>>}}\n /\nPopover.propTypes = {\n /\n The content of the `Popover`.\n /\n content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n\n /\n Determines if the `Popover` has interactive content inside of it, so that it can be\n * hovered over and clicked inside without hiding.\n /\n interactive: PropTypes.bool,\n\n /\n The preferred placement of the `Popover`. Note that Popper's flip modifier can change\n * this to the opposite placement if it has more space.\n /\n placement: PropTypes.oneOf([\n 'top',\n 'top-start',\n 'top-end',\n 'right',\n 'right-start',\n 'right-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'auto',\n 'auto-start',\n 'auto-end'\n ]),\n\n /\n Duration in ms of the transition animation.\n /\n duration: PropTypes.number,\n\n /\n Determines the events that cause the `Popover` to show. Multiple event names are separated by\n * spaces.\n \n Example events:\n \n `trigger: 'click'`\n \n `trigger: 'focusin'`\n \n `trigger: 'mouseenter click'`\n \n --\n /\n trigger: PropTypes.string,\n\n /\n Displaces the popover from its reference element in pixels (skidding and distance).\n \n `[skidding, distance]`\n /\n offset: PropTypes.arrayOf(PropTypes.number),\n\n /\n Determines if the popover has an arrow.\n /\n arrow: PropTypes.bool,\n\n /\n Use React's state to fully control the `Popover` instead of relying on the native trigger\n * and `hideOnClick` props\n /\n visible: PropTypes.bool,\n\n /\n Additional Popper modifiers\n /\n modifiers: PropTypes.array,\n\n /\n Max-width\n /\n maxWidth: PropTypes.string,\n\n /\n Whether the `Popover` contains a context menu.\n * This will remove the default arrow, and apply styling.\n /\n contextMenu: PropTypes.bool,\n\n /\n Whether the `Popover` contains a context menu which is the sublevel of another context menu.\n * This will automatically set placement, spacing and trigger events, add a dropdown icon, etc.\n /\n contextMenuSublevel: PropTypes.bool,\n\n /\n Content of the `Popover`.\n */\n children: PropTypes.node.isRequired\n};\n\nexport default Popover;\n"],"names":["Popover","React","forwardRef","content","interactive","placement","duration","trigger","offset","arrow","visible","undefined","contextMenu","contextMenuSublevel","children","modifiers","maxWidth","props","ref","errorOffset","useMemo","isControlled","isBoolean","handleContextMenuItemClick","document","querySelectorAll","forEach","item","addEventListener","node","_tippy","hide","eventHandlerProps","filteredProps","Object","fromEntries","entries","filter","key","includes","createElement","S","_extends","animation","popperOptions","maxSize","options","boundary","rootBoundary","padding","name","enabled","phase","requires","fn","state","height","modifiersData","styles","popper","maxHeight","onShow","propTypes","process","env","NODE_ENV","PropTypes","oneOfType","string","element","isRequired","bool","oneOf","number","arrayOf","array"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.js","sources":["../../../src/components/data/Popover/Popover.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FloatingNode, FloatingPortal, useFloatingNodeId, useMergeRefs } from '@floating-ui/react';\n\nimport useFloatingPopover from '../../../hooks/useFloatingPopover';\nimport { getElementRef } from '../../../utils/getElementRef';\nimport { POPOVER_ARROW, SharedFloatingArrow } from '../_shared/FloatingArrow.styled';\nimport * as S from './Popover.styled';\n\nimport type { Middleware, OpenChangeReason } from '@floating-ui/react';\nimport type { PopoverPlacement, PopperOffset } from '../../../hooks/useFloatingPopover';\n\n/*\n tippy's own default `zIndex`, applied unconditionally to every popper root it ever\n * created (`popper.style.zIndex = String(zIndex)`, `tippy.js/dist/tippy.cjs.js:754`, with\n * `zIndex: 9999` at line 342). 10 consumer call sites override it, up to 999999, which is\n * why it is a declared prop here even though it was never in the old prop type — it used to\n * typecheck only because the published `Props` widened to `TippyProps`, and that widening\n * disappears with tippy.\n /\nconst TIPPY_DEFAULT_Z_INDEX = 9999;\n\n/\n `max-width: calc(100vw - 10px)`, which `tippy.css` applied through `[data-tippy-root]` —\n * i.e. to the POSITIONER, not to the box. It only binds on a viewport narrower than the\n * popover, which is precisely the case it exists for, so it is carried over rather than\n * dropped as unobservable. The box's own cap is the public `maxWidth` prop, default\n * `'none'`, which tippy wrote inline as `box.style.maxWidth` (line 561).\n /\nconst POSITIONER_MAX_WIDTH = 'calc(100vw - 10px)';\n\n/\n What `contextMenuSublevel` forces, unchanged from the old implementation\n * (`placement={contextMenuSublevel ? 'right-start' : placement}` and\n * `trigger={… contextMenuSublevel ? 'mouseenter click focus' : trigger}`). Both override the\n * caller, which is the documented behaviour: \"This will automatically set placement, spacing\n * and trigger events\".\n /\nconst CONTEXT_MENU_SUBLEVEL_PLACEMENT = 'right-start' as const;\nconst CONTEXT_MENU_SUBLEVEL_TRIGGER = 'mouseenter click focus';\n\n/\n The class `ContextMenuItem` writes (`ContextMenuItem.tsx:81`), and the one it adds for an\n * item that opens a submenu. A click on a LEAF item closes the menu; a click on a sublevel\n * opener must not, or the submenu would close the parent it just opened.\n /\nconst CONTEXT_MENU_ITEM_SELECTOR = '.context-menu-item';\nconst CONTEXT_MENU_SUBLEVEL_OPENER_CLASS = 'opens-sublevel';\n\n/\n tippy's `appendTo`, and the three-way rule it implies. `'parent'` and an implicit-parent\n * case are real tippy behaviours, not inventions — measured in\n * `tippy.js/dist/tippy.cjs.js`:\n \n ```js\n * if (instance.props.interactive && appendTo === TIPPY_DEFAULT_APPEND_TO \|\| appendTo === 'parent') {\n * parentNode = node.parentNode; // INLINE, next to the reference\n * } else {\n * parentNode = invokeWithArgsOrReturn(appendTo, [node]); // portal\n * }\n * ```\n \n ⚠️ `Popover` DEFAULTS `interactive` TO `true`, SO ITS DEFAULT IS THE INLINE BRANCH.\n * `appendTo` appears in 6 files per consumer out of 30 `<Popover>` call sites across both,\n * so a blanket `FloatingPortal` would relocate the MAJORITY of call sites out of their\n * current DOM position — a stacking/`z-index` regression across both apps, not a\n * preservation. Plan §A3 originally resolved C4 as \"portal by default\" on half the evidence\n * and was corrected in `0ef5f71`; `Tooltip.tsx:77-97` is where the branch was first found.\n \n \| `appendTo` \| `interactive` \| where it renders \|\n * \| --- \| --- \| --- \|\n * \| given \| any \| `FloatingPortal` rooted at `appendTo` \|\n * \| absent \| `false` \| `FloatingPortal` rooted at `document.body` \|\n * \| absent \| `true` (the default) \| INLINE, into the reference's parent \|\n \n All 12 `appendTo` sites across both consumers pass `document.body`; the `'parent'` and\n * function forms are supported because tippy supported them and the render-gate fixture\n * uses `'parent'` to make an open popover capturable.\n /\nexport type PopoverAppendTo = 'parent' \| Element \| ((reference: Element) => Element);\n\ntype PopoverOwnProps = {\n /\n The content of the `Popover`.\n /\n content: string \| React.ReactElement<any>;\n /\n Determines if the `Popover` has interactive content inside of it, so that it can be\n * hovered over and clicked inside without hiding.\n \n It also decides where the popover renders — see `PopoverAppendTo`. It defaults to\n * `true`, so a `Popover` renders INLINE unless `appendTo` or `interactive={false}` says\n * otherwise.\n /\n interactive?: boolean;\n /\n The preferred placement of the `Popover`. Note that the flip middleware can change this\n * to the opposite placement if it has more space.\n \n The 12 concrete names are spelled identically in Popper and Floating UI, so they need no\n * translation. The three `auto` values have no Floating UI string — they select\n `autoPlacement()` instead of `flip()`; see `useFloatingPopover`.\n /\n placement?: PopoverPlacement;\n /\n Duration in ms of the transition animation.\n /\n duration?: number;\n /\n Determines the events that cause the `Popover` to show. Multiple event names are separated by\n * spaces.\n \n Example events:\n \n `trigger: 'click'`\n \n `trigger: 'focusin'`\n \n `trigger: 'mouseenter click'`\n \n `''` means no triggers at all, and `undefined` means tippy's default\n * (`'mouseenter focus'`) — though this component overrides that with its own default of\n * `'click focus'`. See `parseTrigger`.\n \n --\n /\n trigger?: string;\n /\n Displaces the popover from its reference element in pixels (skidding and distance).\n \n `[skidding, distance]`\n \n `distance` is the gap between the reference and the ARROW TIP, not the box — which is\n * what it has always meant here, because the old implementation handed tippy\n * `offset[1] + (arrow ? 15 : 0)`. `useFloatingPopover` adds the arrow height back, so the\n * prop keeps its meaning; see `DEFAULT_ARROW_HEIGHT` for the derivation of the 15.\n /\n offset?: number[];\n /\n Determines if the popover has an arrow.\n \n ⚠️ It also moves the box even when the arrow is NOT drawn — see the block comment at\n * `arrowDrivesTheOffset` in the body. That is the existing behaviour, reproduced.\n /\n arrow?: boolean;\n /\n Use React's state to fully control the `Popover` instead of relying on the native trigger\n * and `hideOnClick` props\n \n Passing a boolean — including `false` — switches the popover to CONTROLLED mode and\n * its own triggers stop firing. `undefined` leaves it uncontrolled. `onClickOutside` still\n * fires in controlled mode, which is how 12 consumer call sites close a controlled\n * popover.\n /\n visible?: boolean;\n /\n @deprecated Accepted and IGNORED. This was a Popper `modifiers` array, appended to\n * `popperOptions.modifiers`; Floating UI has middleware instead and the two are not\n * translatable prop-for-prop. Kept so that no existing call site throws — plan C6. No\n * consumer passes it. Pass `middleware` instead.\n /\n modifiers?: any[];\n /\n Extra Floating UI middleware, appended after the built-in chain\n * (`offset` → `flip`/`autoPlacement` → `shift` → `arrow` → `size`). This is the honest\n * replacement for `modifiers`, and it exists because one internal caller genuinely needed\n * it: `MultiLevelCheckboxSelect` matched the popover's width to its input with a\n * hand-written Popper `sameWidth` modifier, which C6's accept-and-ignore would have\n * silently dropped.\n /\n middleware?: Middleware[];\n /\n Max-width of the popover box, as a CSS length. Defaults to `'none'`, which is what tippy\n * received and wrote inline on every popover in both consumers.\n /\n maxWidth?: string;\n /\n Whether the `Popover` contains a context menu.\n * This will remove the default arrow, and apply styling.\n \n It also makes a click on a `ContextMenuItem` close the menu — see\n * `handleContextMenuClick`.\n /\n contextMenu?: boolean;\n /\n Whether the `Popover` contains a context menu which is the sublevel of another context menu.\n * This will automatically set placement, spacing and trigger events, add a dropdown icon, etc.\n /\n contextMenuSublevel?: boolean;\n /\n `z-index` of the positioned element. Defaults to 9999, tippy's default. 10 consumer call\n * sites pass this.\n /\n zIndex?: number;\n /\n A disabled popover can never open, even under a controlled `visible={true}` — tippy's\n * semantics.\n /\n disabled?: boolean;\n /\n Where the popover is rendered. Omitting it means INLINE for an `interactive` popover\n * (the default) and `document.body` otherwise. See `PopoverAppendTo`.\n /\n appendTo?: PopoverAppendTo;\n /* Fired when a press lands outside both the reference and the popover. /\n onClickOutside?: (event?: Event) => void;\n /\n Fired when the popover opens. tippy's `onShow`, minus its instance argument.\n /\n onShow?: () => void;\n /\n Fired when the popover closes. tippy's `onHide`, minus its instance argument.\n \n ONE INTERNAL CALLER DEPENDS ON IT: `inputs/Button` passes\n * `onHide={handleDropdownClose}` to reset its `dropdown-is-active` class, so this is not a\n * courtesy re-export. It fires on every close the component decides for itself —\n * outside press, a second click on the trigger, a context-menu item click. It does NOT\n * fire when a CONTROLLED popover is closed by its owner flipping `visible` to `false`,\n * because nothing asks this component to close in that case; tippy did fire there. No\n * call site pairs `onHide` with `visible`, so the difference is currently unobservable.\n /\n onHide?: () => void;\n /\n Content of the `Popover`.\n /\n children: React.ReactNode;\n};\n\n/\n * NMB-3998 §C.2: the rest of `props` is spread onto `S.Popover`, so the published type has\n * to admit that target's props too — a closed type here is worse than `any` for the 125\n * consumer files. Declared members win over the base (`Omit` by `keyof PopoverOwnProps`);\n * a bare `&` would INTERSECT a colliding member instead of overriding it, which narrows\n * it (measured: `rows?: number \| string` & `rows?: number`) or empties it to `never`.\n \n THE BASE MOVED, AND THAT IS WHY THE PROP TYPE ABOVE GREW. It used to be\n * `styled(TippyTooltip)`, so this widening admitted every tippy option — which is how\n * `zIndex`, `disabled`, `appendTo`, `onClickOutside` and `onHide` typechecked at consumer\n * and internal call sites while appearing nowhere in the prop type. `S.Popover` is now a\n * `styled.div`, so those five would have become type errors the moment the library starts\n * publishing `.d.ts` (playbook §G.4). Declaring them explicitly is what keeps that promise;\n * the set was taken from a scan of every `<Popover>` tag in both consumers — 30 sites, 13\n * distinct props — per plan §A6's warning not to trust the old prop types.\n /\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Popover>, keyof PopoverOwnProps> &\n PopoverOwnProps;\n\n/\n Props that are accepted and then deliberately dropped, in two groups.\n \n `onClick` / `onChange` / `onSubmit` — this filter predates the migration and it used to be\n * redundant: `@tippyjs/react` destructures the props it knows and hands the rest to\n * `tippy()`, which ignores what it does not recognise, so an `onClick` passed to a `Popover`\n * has never fired. It is LOAD-BEARING NOW. The rest of `props` lands on a real element in\n * this implementation, so removing the filter would silently activate handlers that have\n * been dead at every call site that passes one — and there are two, in\n * `news_archive/na_download_options` in both consumers.\n \n `popperOptions` — plan C6. A Popper concept with no Floating UI translation and no\n * consumer usage, kept accepted-but-ignored so that no existing call site throws. It is\n * filtered here rather than destructured above because destructuring it would bind a name\n * nothing reads, which is a lint error, and because \"the list of props that never reach the\n * DOM\" is worth having in exactly one place. (`modifiers` and `maxWidth` ARE destructured:\n * `maxWidth` is applied, and `modifiers` is named in the prop type so its deprecation is\n * visible at the call site.)\n /\nconst PROPS_NEVER_FORWARDED = ['onClick', 'onChange', 'onSubmit', 'popperOptions'];\n\n/\n The `Popover` is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.\n * A `Popover` renders a temporary context to get user’s attention and to hide unnecessary interactions.\n \n This component is used with the `Button` and `ContextMenu` components to create dropdown menus and context menus.\n * See their documentation for usage examples.\n \n ### Import\n \n ``` js\n * import { Popover } from '@ntbjs/react-components/data'\n * // or\n * import Popover from '@ntbjs/react-components/data/Popover'\n * ```\n \n ### Usage example\n \n ``` js\n<Popover content={<img alt=\"Dummy content\" src={dummyImage} />}>\n <ActionButton icon={<DeleteIcon />} onClick={() => {}} />\n</Popover>\n * ```\n /\n\nconst Popover = React.forwardRef<any, Props>(function Popover(\n {\n content = 'Tooltip',\n interactive = true,\n placement = 'bottom-end',\n duration = 350,\n trigger = 'click focus',\n offset = [0, 8],\n arrow = true,\n visible = undefined,\n contextMenu = false,\n contextMenuSublevel = false,\n children,\n modifiers = [],\n middleware,\n maxWidth = 'none',\n zIndex = TIPPY_DEFAULT_Z_INDEX,\n disabled = false,\n appendTo,\n onClickOutside,\n onShow,\n onHide,\n ...props\n },\n ref\n) {\n /\n * `modifiers` is destructured so it cannot reach the DOM, and named here so the compiler\n * does not report an unused binding. Reading `.length` is the cheapest expression that is\n * also true of the prop's purpose: it is accepted, measured to be empty at every call site\n * in both consumers, and ignored. Plan C6.\n /\n void modifiers.length;\n\n const onOpenChange = React.useCallback(\n (open: boolean, event?: Event, reason?: OpenChangeReason) => {\n if (!open && reason === 'outside-press') {\n onClickOutside?.(event);\n }\n\n if (open) {\n onShow?.();\n } else {\n onHide?.();\n }\n },\n [onClickOutside, onShow, onHide]\n );\n\n /\n * Registers this popover in an enclosing `FloatingTree`, if there is one, and returns an\n * id either way. Safe with NO tree present, which is the standalone case and plan C5's\n * requirement — verified in the installed 0.26.28 rather than assumed:\n * `useFloatingNodeId` does `tree == null \|\| tree.addNode(node)`, and every tree read in\n * `useDismiss` is guarded (`const children = tree ? getChildren(…) : []`). So a `Popover`\n * with no `FloatingTree` above it behaves exactly as if `nodeId` were absent.\n \n The provider itself is NOT here. Plan C5: it belongs at the nesting site, so only nested\n * context menus pay for it — see `widgets/ContextMenu`, and read the note there, because\n * where it can usefully sit turned out to be narrower than C5 assumed.\n /\n const nodeId = useFloatingNodeId();\n\n /\n * `[skidding, distance]`, normalised to a fixed-length tuple. The public prop stays\n * `number[]` and not a tuple type on purpose: consumers pass `offset={[0, 5]}` through\n * variables typed `number[]`, and narrowing the prop would turn those into type errors at\n * call sites that compile today.\n /\n const offsetTuple: PopperOffset = [offset[0] ?? 0, offset[1] ?? 0];\n\n /\n * ⚠️ THE ARROW DRIVES THE OFFSET EVEN WHEN NO ARROW IS DRAWN, AND THAT IS DELIBERATE\n * REPRODUCTION OF EXISTING GEOMETRY RATHER THAN AN OVERSIGHT.\n \n The old implementation had two separate expressions:\n \n const errorOffset = useMemo(() => (arrow ? 15 : 0), [arrow]); // the RAW prop\n * offset={[offset[0], offset[1] + errorOffset]}\n * arrow={contextMenu ? false : arrow} // the DRAWN arrow\n \n so a `contextMenu` popover that leaves `arrow` at its default `true` gets the +15 in its\n * offset and no arrow on screen. That is not hypothetical: `AssetGalleryGridCard` passes\n * `contextMenu` with `offset={[0, -8]}` and no `arrow`, i.e. −8 + 15 = a box 7px from its\n * reference. Collapsing the two into one flag would move that menu 15px.\n \n So `arrow` (raw) goes to the hook, which adds `DEFAULT_ARROW_HEIGHT` to the main axis\n * and enables the `arrow()` middleware; `drawsArrow` decides whether an `<svg>` is\n * rendered. An enabled `arrow()` middleware with nothing attached to `arrowRef` is inert —\n * `@floating-ui/core` returns `{}` when its `element` is null — so the middleware costs a\n * null check and no behaviour.\n /\n const arrowDrivesTheOffset = arrow;\n const drawsArrow = contextMenu ? false : arrow;\n\n const {\n refs,\n floatingStyles,\n context,\n getReferenceProps,\n getFloatingProps,\n isMounted,\n transitionStyles,\n arrowRef,\n setOpen,\n placement: resolvedPlacement,\n pointerEvents\n } = useFloatingPopover({\n placement: contextMenuSublevel ? CONTEXT_MENU_SUBLEVEL_PLACEMENT : placement,\n open: visible,\n onOpenChange,\n trigger: contextMenuSublevel ? CONTEXT_MENU_SUBLEVEL_TRIGGER : trigger,\n offset: offsetTuple,\n arrow: arrowDrivesTheOffset,\n interactive,\n disabled,\n duration,\n /\n * Always on, because the old implementation always passed the\n * `popper-max-size-modifier` + `applyMaxSize` pair — unconditionally, in the same\n * `popperOptions` object every popover got. The hook's `size()` improves on it in one\n * way that is a fix rather than a change: it CLEARS the cap when the content fits,\n * where `applyMaxSize` set `maxHeight` on every reposition and gave a 3-item menu a\n * scrollbar.\n \n `boundary` is Floating UI's default (`clippingAncestors`) where the old code passed\n * Popper `boundary: 'viewport'`. Floating UI has no `'viewport'` boundary and needs\n * none: the cap is written onto the positioner, whose clipping ancestor is the viewport\n * in the portalled cases, and in the inline case a nearer clipping ancestor is the\n * honest answer anyway.\n /\n constrainHeight: true,\n nodeId,\n middleware\n });\n\n /\n * The reference is the CHILD, not the wrapper `<div>`, and that is a compatibility\n * requirement rather than a preference. `@tippyjs/react` does\n * `cloneElement(children, { ref })` and attaches its listeners to the resulting node, so\n * every popover in both consumers is positioned against the child's box. The wrapper is a\n * plain block `<div>`, which in most layouts is far wider than the child — anchoring to it\n * would re-align every popover that is not in a flex row.\n \n The ref is merged three ways: this component's own forwarded `ref`, the child's existing\n * `ref`, and `refs.setReference`. `useMergeRefs` returns `null` when every input is\n * nullish, which `cloneElement` treats as \"no ref\".\n \n `ref` GOES SOMEWHERE REAL FOR THE FIRST TIME. It used to be handed to\n * `styled(TippyTooltip)`, and `Tippy` is a plain function component, so React had nowhere\n * to put it. Plan risk #9 asks for `forwardRef` onto the reference and this is it; no\n * consumer passes `ref` to a `Popover` (measured over both apps — the `ref` attributes\n * near `<Popover>` in `datepicker_range` are on the calendar `<div>` inside `content`), so\n * nothing observable changes.\n \n The CHILD's ref is a different measurement, and it is live: `inputs/CompactTextInput`\n * renders `<S.Input ref={forwardedRef}>` as this popover's child on the `link` branch, and\n * `ntb-dam/client` passes react-hook-form's `field.ref` that way on React 16.14. Reading\n * it as `children.props.ref` yields `undefined` before React 19, so the `cloneElement`\n * below overwrote it — see `getElementRef`. tippy merged it via `preserveRef`.\n /\n const childRef = React.isValidElement(children) ? getElementRef(children) : null;\n const referenceRef = useMergeRefs([ref, childRef, refs.setReference]);\n\n const filteredProps = Object.fromEntries(\n Object.entries(props).filter(([key]) => !PROPS_NEVER_FORWARDED.includes(key))\n );\n\n /\n * `getReferenceProps(children.props)` and not `getReferenceProps()`: Floating UI COMPOSES\n * the handlers it needs with the ones already on the element, so a child that has its own\n * `onClick` keeps it. That matters more here than for `Tooltip`, because `Popover`'s\n * default trigger is `'click focus'` and the reference is usually a button with its own\n * handler — `inputs/Button` passes `onClick={handleDropdownButtonClick}` on the very\n * element that opens the popover. tippy did not need this: it attached native listeners\n * straight to the DOM node and never touched the child's props.\n /\n const reference = React.isValidElement(children)\n ? React.cloneElement(\n children as React.ReactElement<Record<string, unknown>>,\n {\n ...getReferenceProps((children as React.ReactElement<Record<string, unknown>>).props),\n ref: referenceRef\n } as never\n )\n : children;\n\n /\n * WHAT REPLACED `_tippy.hide()` AND THE `[data-tippy-root]` SWEEP, AND HOW THE WHOLE CHAIN\n * OF MENUS STILL CLOSES.\n \n The old `handleContextMenuItemClick` ran on every `onShow` and, for every\n * `.context-menu-item:not(.opens-sublevel)` IN THE DOCUMENT, added a `click` listener that\n * called `.hide()` on every `[data-tippy-root]` IN THE DOCUMENT. Three things about it:\n * the listeners accumulated one set per show and were never removed; the selector was\n * global, so a menu in one corner of the app closed a popover in another; and it reached\n * for the imperative tippy instance off the DOM node.\n \n This is scoped instead: one delegated handler on this popover's own floating element,\n * closing only this popover. The ANCESTOR menus still close, and by a mechanism worth\n * writing down because it is not obvious — a sublevel `Popover` renders INLINE (C4: it is\n * `interactive` with no `appendTo`), so its floating element is a DOM descendant of the\n * parent menu's floating element, and the same click bubbles into the parent's identical\n * handler. Every menu in the chain closes itself. If a future change portals sublevels,\n * this stops working and a `FloatingTree` event becomes necessary.\n \n TWO DELIBERATE NARROWINGS, both from \"every tippy in the document\" to \"this menu\":\n \n - An unrelated popover elsewhere on the page no longer closes. That was a side effect of\n * a global DOM query, not a feature.\n * - The close now happens AFTER the item's own `onClickEffect` rather than before it,\n * because this is a React handler on an ancestor and tippy's was a native listener on\n * the item itself. The visible result is the same; a handler that called\n * `event.stopPropagation()` would now keep the menu open, and none does.\n /\n const handleContextMenuClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (!contextMenu) return;\n\n const target = event.target;\n if (!(target instanceof Element)) return;\n\n const item = target.closest(CONTEXT_MENU_ITEM_SELECTOR);\n if (!item \|\| item.classList.contains(CONTEXT_MENU_SUBLEVEL_OPENER_CLASS)) return;\n\n setOpen(false, event.nativeEvent, 'click');\n };\n\n /\n * tippy's appendTo resolution, reproduced. `'parent'`, and `interactive` with no explicit\n * `appendTo`, render INLINE; everything else portals. See `PopoverAppendTo` for the\n * measurement, and note that unlike `Tooltip` the INLINE branch is the DEFAULT here.\n /\n const renderInline = appendTo === 'parent' \|\| (interactive && appendTo === undefined);\n\n /\n * Deliberately NOT memoised. The function form of `appendTo` is resolved against the\n * reference node, which is populated by a callback ref and is therefore `null` on the\n * first render; a `useMemo` keyed on `refs.reference.current` would be reading a ref\n * during render to decide whether to recompute, which is the one thing a memo cannot do\n * correctly.\n \n ⚠️ `undefined` AND `null` ARE NOT INTERCHANGEABLE HERE, AND GETTING IT WRONG SILENTLY\n * DELETES THE POPOVER. `FloatingPortal`'s `root` is typed `HTMLElement \| null \| ref`,\n * which reads as though `null` were the \"no root given\" value. It is not — measured in\n * `useFloatingPortalNode`:\n \n ```js\n * // Wait for the root to exist before creating the portal node.\n * if (root === null) return;\n * …\n * container = container \|\| document.body;\n * ```\n \n `null` means \"the root does not exist YET, do not create the portal node\", and the\n * effect simply returns. Only `undefined` falls through to the `\|\| document.body` default.\n * The one place `null` is right is the genuine \"not resolvable yet\" case: a function\n * `appendTo` cannot be called until the reference exists, and `null` correctly defers the\n * portal until it does rather than briefly portalling to the wrong parent.\n /\n const resolvePortalRoot = (): HTMLElement \| null \| undefined => {\n if (renderInline \|\| appendTo === undefined) return undefined;\n if (typeof appendTo === 'function') {\n const node = refs.reference.current;\n return node instanceof Element ? (appendTo(node) as HTMLElement) : null;\n }\n return appendTo as HTMLElement;\n };\n\n const floating = isMounted ? (\n <div\n ref={refs.setFloating}\n style={{ ...floatingStyles, zIndex, pointerEvents, maxWidth: POSITIONER_MAX_WIDTH }}\n {...getFloatingProps({ onClick: handleContextMenuClick })}\n >\n {/\n * `{...filteredProps}` FIRST and the explicit attributes after, so that a colliding\n * `style` or `className` cannot displace the transition styles or the placement\n * attribute. `className` still reaches this element, which is where tippy put it —\n * `@tippyjs/react`'s own `classNamePlugin` does\n * `updateClassName(instance.popper.firstElementChild, 'add', className)`, i.e. onto\n * the box and not the positioner — so `.settings-item-popover` and the other 2\n * consumer classNames land exactly where their CSS expects.\n \n `role=\"tooltip\"` and `tabindex=\"-1\"` are tippy's, not a choice: its `defaultProps`\n * carry `role: 'tooltip'` (`tippy.cjs.js:340`) and its renderer writes both onto the\n * box (`box.setAttribute('tabindex', '-1')`, line 528; `role`, line 564). Every popover\n * in both consumers has carried them. `role=\"menu\"` would arguably be better for a\n * context menu, but `ContextMenu` already puts `role=\"menu\"` on its own root, so adding\n * it here would nest two menus — and changing roles is an accessibility decision, not\n * a dependency swap.\n /}\n <S.Popover\n {...filteredProps}\n data-placement={resolvedPlacement}\n data-context-menu={contextMenu ? 'true' : undefined}\n data-context-menu-sublevel={contextMenuSublevel ? 'true' : undefined}\n role=\"tooltip\"\n tabIndex={-1}\n style={{ ...transitionStyles, maxWidth }}\n >\n <div className=\"tippy-content\">{content}</div>\n {drawsArrow && (\n <SharedFloatingArrow\n ref={arrowRef}\n context={context}\n data-arrow-surface=\"popover\"\n {...POPOVER_ARROW}\n />\n )}\n </S.Popover>\n </div>\n ) : null;\n\n /\n * `FloatingNode` publishes this popover's id to anything rendered inside it, so a nested\n * `Popover` in `content` becomes its child rather than a second root when a `FloatingTree`\n * is present. It renders no DOM — it is a context provider only — so it costs nothing in\n * the standalone case.\n \n The bare wrapper `<div>` is preserved verbatim — plan risk #9. It carries no props and\n * no styling, and consumers position against it.\n */\n return (\n <div>\n {reference}\n <FloatingNode id={nodeId}>\n {renderInline ? (\n floating\n ) : (\n <FloatingPortal root={resolvePortalRoot()}>{floating}</FloatingPortal>\n )}\n </FloatingNode>\n </div>\n );\n});\n\nexport default Popover;\n"],"names":["TIPPY_DEFAULT_Z_INDEX","POSITIONER_MAX_WIDTH","CONTEXT_MENU_SUBLEVEL_PLACEMENT","CONTEXT_MENU_SUBLEVEL_TRIGGER","CONTEXT_MENU_ITEM_SELECTOR","CONTEXT_MENU_SUBLEVEL_OPENER_CLASS","PROPS_NEVER_FORWARDED","Popover","React","forwardRef","content","interactive","placement","duration","trigger","offset","arrow","visible","undefined","contextMenu","contextMenuSublevel","children","modifiers","middleware","maxWidth","zIndex","disabled","appendTo","onClickOutside","onShow","onHide","props","ref","length","onOpenChange","useCallback","open","event","reason","nodeId","useFloatingNodeId","offsetTuple","arrowDrivesTheOffset","drawsArrow","refs","floatingStyles","context","getReferenceProps","getFloatingProps","isMounted","transitionStyles","arrowRef","setOpen","resolvedPlacement","pointerEvents","useFloatingPopover","constrainHeight","childRef","isValidElement","getElementRef","referenceRef","useMergeRefs","setReference","filteredProps","Object","fromEntries","entries","filter","key","includes","reference","cloneElement","handleContextMenuClick","target","Element","item","closest","classList","contains","nativeEvent","renderInline","resolvePortalRoot","node","current","floating","_jsx","setFloating","style","onClick","_jsxs","S","role","tabIndex","className","SharedFloatingArrow","POPOVER_ARROW","FloatingNode","id","FloatingPortal","root"],"mappings":"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"}

package/build/data/Popover/Popover.styled.js CHANGED Viewed

@@ -1,146 +1,16 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { rgba } from 'polished';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
-import TippyTooltip from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css';
-import 'tippy.js/animations/shift-away-subtle.css';
-const Popover = styled(TippyTooltip).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 400;
-  color: inherit;
-  border-radius: 0;
-  line-height: inherit;
-  max-height: inherit;
-  ${props => props.maxWidth && css`
-      max-width: ${props.maxWidth};
-    `}
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
-  ${props => props.theme.themeProp('box-shadow', `0px 1px 6px -3px ${rgba(props.theme.getColor('black'), 0.7)}`, `0 1px 6px -4px ${props.theme.getColor('black')}`)}
-  ${props => props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-800')}`, `1px solid ${props.theme.getColor('gray-300')}`)}
-  ${props => props.contextMenu && css`
-      border-radius: 4px;
-      ${props => props.theme.themeProp('border', 'none', 'none')}
-      ${props => props.theme.themeProp('box-shadow', `none`, `0 1px 6px ${rgba(props.theme.getColor('gray-900'), 0.3)}`)}
-    `}
-  ${props => props.contextMenuSublevel && css`
-      &[data-placement^='right-start'],
-      &[data-placement^='left-start'] {
-        margin-top: -4px;
-      }
-      &[data-placement^='left'] {
-        margin-right: -6px;
-      }
-      &[data-placement^='right'] {
-        margin-left: -6px;
-      }
-    `}
-  .tippy-content {
-    padding: 0;
-    max-height: inherit;
-    > div {
-      max-height: inherit;
-    }
-  }
-  .tippy-arrow {
-    ${props => props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1)}
-  }
-  && > .tippy-arrow::before {
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-  & > .tippy-arrow::after {
-    content: '';
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-  &[data-placement^='top'] {
-    & > .tippy-arrow:before {
-      bottom: -16px;
-      left: -5px;
-      border-width: 15px 13px 0;
-      ${props => props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
-    }
-    & > .tippy-arrow:after {
-      bottom: -15px;
-      left: -5px;
-      border-width: 15px 13px 0;
-      border-top-color: initial;
-      transform-origin: center top;
-    }
-  }
-  &[data-placement^='right'] {
-    & > .tippy-arrow:before {
-      bottom: -5px;
-      left: -16px;
-      border-width: 13px 15px 13px 0;
-      ${props => props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
-    }
-    & > .tippy-arrow:after {
-      bottom: -5px;
-      left: -15px;
-      border-width: 13px 15px 13px 0;
-      border-right-color: initial;
-      transform-origin: center top;
-    }
-  }
-  &[data-placement^='bottom'] {
-    & > .tippy-arrow:before {
-      top: -16px;
-      left: -5px;
-      border-width: 0 13px 15px 13px;
-      ${props => props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
-    }
-    & > .tippy-arrow:after {
-      top: -14.5px;
-      left: -5px;
-      border-width: 0 13px 15px 13px;
-      border-bottom-color: initial;
-      transform-origin: center top;
-    }
-  }
-  &[data-placement^='left'] {
-    & > .tippy-arrow::before {
-      bottom: -5px;
-      right: -16px;
-      border-width: 13px 0 13px 15px;
-      ${props => props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1)}
-    }
-    & > .tippy-arrow::after {
-      bottom: -5px;
-      right: -15px;
-      border-width: 13px 0 13px 15px;
-      border-left-color: initial;
-      transform-origin: center top;
-    }
-  }
-`;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Popover = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Popoverstyled__Popover",
+  componentId: "sc-egg7l2-0"
+})(["position:relative;outline:0;white-space:normal;font-family:", ";font-size:1rem;font-weight:400;color:inherit;border-radius:0;line-height:inherit;max-height:inherit;", " ", " ", " .tippy-content{position:relative;z-index:1;padding:0;max-height:inherit;> div{max-height:inherit;}}&[data-context-menu='true']{border-radius:4px;}body.dark-theme &[data-context-menu='true']{border:none;box-shadow:none;}body.light-theme &[data-context-menu='true']{border:none;box-shadow:0 1px 6px ", ";}body:not(.light-theme):not(.dark-theme) &[data-context-menu='true']{border:none;box-shadow:0 1px 6px ", ";@media (prefers-color-scheme:dark){box-shadow:none;}}&[data-context-menu-sublevel='true']{&[data-placement^='right-start'],&[data-placement^='left-start']{margin-top:-4px;}&[data-placement^='left']{margin-right:-6px;}&[data-placement^='right']{margin-left:-6px;}}"], props => props.theme.primaryFontFamily, props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')), props => props.theme.themeProp('box-shadow', `0px 1px 6px -3px ${rgba(props.theme.getColor('black'), 0.7)}`, `0 1px 6px -4px ${props.theme.getColor('black')}`), props => props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-800')}`, `1px solid ${props.theme.getColor('gray-300')}`), props => rgba(props.theme.getColor('gray-900'), 0.3), props => rgba(props.theme.getColor('gray-900'), 0.3));
 export { Popover };
 //# sourceMappingURL=Popover.styled.js.map

package/build/data/Popover/Popover.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.styled.js","sources":["../../../src/components/data/Popover/Popover.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport TippyTooltip from '@tippyjs/react';\nimport 'tippy.js/dist/tippy.css';\nimport 'tippy.js/animations/shift-away-subtle.css';\n\nexport const Popover = styled(TippyTooltip).attrs(applyDefaultTheme)`\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n line-height: inherit;\n max-height: inherit;\n\n ${props =>\n props.maxWidth &&\n css`\n max-width: ${props.maxWidth};\n `}\n\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('white')\n )}\n\n ${props =>\n props.theme.themeProp(\n 'box-shadow',\n `0px 1px 6px -3px ${rgba(props.theme.getColor('black'), 0.7)}`,\n `0 1px 6px -4px ${props.theme.getColor('black')}`\n )}\n\n ${props =>\n props.theme.themeProp(\n 'border',\n `1px solid ${props.theme.getColor('gray-800')}`,\n `1px solid ${props.theme.getColor('gray-300')}`\n )}\n\n ${props =>\n props.contextMenu &&\n css`\n border-radius: 4px;\n\n ${props => props.theme.themeProp('border', 'none', 'none')}\n\n ${props =>\n props.theme.themeProp(\n 'box-shadow',\n `none`,\n `0 1px 6px ${rgba(props.theme.getColor('gray-900'), 0.3)}`\n )}\n `}\n\n ${props =>\n props.contextMenuSublevel &&\n css`\n &[data-placement^='right-start'],\n &[data-placement^='left-start'] {\n margin-top: -4px;\n }\n\n &[data-placement^='left'] {\n margin-right: -6px;\n }\n\n &[data-placement^='right'] {\n margin-left: -6px;\n }\n `}\n\n .tippy-content {\n padding: 0;\n max-height: inherit;\n\n > div {\n max-height: inherit;\n }\n }\n\n .tippy-arrow {\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('white'),\n 1\n )}\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ${props =>\n props.theme.themeProp(\n 'border-top-color',\n props.theme.getColor('gray-800'),\n props.theme.getColor('gray-300'),\n 1\n )}\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ${props =>\n props.theme.themeProp(\n 'border-right-color',\n props.theme.getColor('gray-800'),\n props.theme.getColor('gray-300'),\n 1\n )}\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ${props =>\n props.theme.themeProp(\n 'border-bottom-color',\n props.theme.getColor('gray-800'),\n props.theme.getColor('gray-300'),\n 1\n )}\n }\n\n & > .tippy-arrow:after {\n top: -14.5px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ${props =>\n props.theme.themeProp(\n 'border-left-color',\n props.theme.getColor('gray-800'),\n props.theme.getColor('gray-300'),\n 1\n )}\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n`;\n"],"names":["Popover","styled","TippyTooltip","attrs","applyDefaultTheme","props","theme","primaryFontFamily","maxWidth","css","themeProp","getColor","rgba","contextMenu","contextMenuSublevel"],"mappings":";;;;;;;AAQO,MAAMA,OAAO,GAAGC,MAAM,CAACC,YAAY,CAAC,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACpE,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIF,KAAK,IACLA,KAAK,CAACG,QAAQ,IACdC,GAAG,CAAA;AACP,iBAAmBJ,EAAAA,KAAK,CAACG,QAAQ,CAAA;AACjC,IAAK,CAAA,CAAA;AACL;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,YAAY,EACZL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,OAAO,CAC9B,CAAC,CAAA;AACL;AACA,EAAA,EAAIN,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,YAAY,EACZ,oBAAoBE,IAAI,CAACP,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAA,CAAE,EAC9D,CAAkBN,eAAAA,EAAAA,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,OAAO,CAAC,EACjD,CAAC,CAAA;AACL;AACA,EAAA,EAAIN,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,QAAQ,EACR,CAAaL,UAAAA,EAAAA,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,CAAE,CAAA,EAC/C,aAAaN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAC/C,CAAC,CAAA;AACL;AACA,EAAA,EAAIN,KAAK,IACLA,KAAK,CAACQ,WAAW,IACjBJ,GAAG,CAAA;AACP;AACA;AACA,MAAA,EAAQJ,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACI,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAChE;AACA,MAAQL,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,YAAY,EACZ,CAAA,IAAA,CAAM,EACN,CAAA,UAAA,EAAaE,IAAI,CAACP,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAA,CAC1D,CAAC,CAAA;AACT,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIN,KAAK,IACLA,KAAK,CAACS,mBAAmB,IACzBL,GAAG,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMJ,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,OAAO,EACPL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,OAAO,CAAC,EAC7B,CACF,CAAC,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAA,EAAQN,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,kBAAkB,EAClBL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChC,CACF,CAAC,CAAA;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAA,EAAQN,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,oBAAoB,EACpBL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChC,CACF,CAAC,CAAA;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAA,EAAQN,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,qBAAqB,EACrBL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChC,CACF,CAAC,CAAA;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAA,EAAQN,KAAK,IACLA,KAAK,CAACC,KAAK,CAACI,SAAS,CACnB,mBAAmB,EACnBL,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACC,KAAK,CAACK,QAAQ,CAAC,UAAU,CAAC,EAChC,CACF,CAAC,CAAA;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
1	+ {"version":3,"file":"Popover.styled.js","sources":["../../../src/components/data/Popover/Popover.styled.ts"],"sourcesContent":["/\n $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n \n NO TRANSIENT PROP IS READ HERE — every interpolation reads only `props.theme`, which\n * `ExecutionContext` already supplies via the C6 `DefaultTheme` augmentation. The two\n * per-instance variants (`contextMenu`, `contextMenuSublevel`) are STATIC ATTRIBUTE\n * SELECTORS, not `${props => css`…`}` rules — see \"THE TWO VARIANTS\" below.\n \n ================== WHAT REPLACED WHAT, AND THE FOUR THINGS THAT CAME BACK ==================\n \n This file used to be `styled(TippyTooltip)`, so the class it generated landed on tippy's\n * `.tippy-box` and the rules below were only ever the OVERRIDES — the base came from\n * `tippy.js/dist/tippy.css`, which this file imported. Dropping tippy therefore drops a\n * base stylesheet nobody had written down. Measured, verbatim, from that file:\n \n .tippy-box { position: relative; background-color: #333; color: #fff;\n * border-radius: 4px; font-size: 14px; line-height: 1.4;\n * white-space: normal; outline: 0;\n * transition-property: transform, visibility, opacity }\n * .tippy-content{ position: relative; padding: 5px 9px; z-index: 1 }\n * [data-tippy-root]{ max-width: calc(100vw - 10px) }\n \n Five of those declarations were OVERRIDDEN by the old version of this file\n * (`background-color` by the themed `background`, `color` by `color: inherit`,\n * `border-radius` by `0`, `font-size` by `1rem`, `line-height` by `inherit`) and tippy's\n * values are simply gone. Four were IN FORCE and are carried over here, because dropping\n * them silently would change the rendering:\n \n - `position: relative` is the ARROW'S CONTAINING BLOCK. `FloatingArrow` positions its\n * `<svg>` at `[side]: 100%`, which resolves against the nearest positioned ancestor;\n * with a static box the arrow escapes to the viewport. This is the single most\n * load-bearing line in the file.\n * - `white-space: normal` and `outline: 0` were in force and are not initial values.\n * - `.tippy-content`'s `position: relative` and `z-index: 1`. The old file overrode only\n * its `padding`; the stacking pair came from `tippy.css` and is declared explicitly\n * below for the same reason `Tooltip.styled.ts` declares it.\n \n `transition-property` is deliberately NOT carried over: `useTransitionStyles` emits its\n * own transition shorthand inline on this element, so a stylesheet declaration would be\n * overridden on every render.\n \n `[data-tippy-root]`'s `max-width: calc(100vw - 10px)` applied to the POSITIONER, not to\n * this element, so it moved to `Popover.tsx` (`POSITIONER_MAX_WIDTH`) along with tippy's\n * `popper.style.zIndex` and `popper.style.pointerEvents`.\n \n The public `maxWidth` prop also moved to `Popover.tsx`. It used to be read here as\n * `${props => props.maxWidth && css`max-width: ${props.maxWidth}`}` AND written inline by\n * tippy (`box.style.maxWidth = maxWidth`), i.e. twice; it is now written once, inline,\n * which is what tippy did and what `Tooltip.tsx` does.\n \n ================== THE ARROW: 8 RULES AND 4 themeProp() CALLS ARE GONE ==================\n \n tippy drew the arrow as a CSS border triangle, so this file carried an outline layer\n * (`::before`) and a fill layer (`::after`) for each of the four sides — 8 nested blocks,\n * 4 `themeProp()` calls for the border colour, and a `.tippy-arrow { color: … }` rule that\n * existed only because `border--color: initial` resolves to `currentColor`.\n \n * All of it is replaced by ONE `<svg>`: `SharedFloatingArrow` with\n * `data-arrow-surface=\"popover\"` and the geometry in `POPOVER_ARROW`\n * (`src/components/data/_shared/FloatingArrow.styled.ts`). That file's `popover` surface\n * carries the same two colour pairs this one did — `gray-700`/`white` for the fill,\n * `gray-800`/`gray-300` for the 1px border that continues the box's own — and it is where\n * the 15px/26px geometry is derived from the `border-width: 15px 13px 0` these blocks used\n * to declare.\n \n ================== WHY `.tippy-content` IS STILL CALLED `.tippy-content` ==================\n \n It is a deliberate compatibility shim, not a leftover. `src/sass/components/popover.scss`\n * in BOTH consumers targets that class name — it is the 600px notification layout — so\n * renaming it needs coordinated PRs in two repos: plan C2/§A4. `Popover.tsx` renders\n * exactly one such element.\n \n ================== THE TWO VARIANTS, AND THE DEAD CSS THEY REVIVE ==================\n \n `contextMenu` and `contextMenuSublevel` used to be `${props => props.contextMenu && css…}`\n * blocks that NOTHING COULD REACH: `Popover.tsx` destructured both props out and the two\n * lines that would have forwarded them were commented out. The old header of this file and\n * `scripts/r19-harness/fixtures.cjs`'s `data/Popover` entry both record that as a declared,\n * unfixed defect — \"~10 CSS declarations in this file are dead code, and no fixture can\n * cover them\".\n \n They are live now, and the plan asks for it (§Approach step 2: \"`contextMenu`: arrow off,\n * context-menu styling variant\"). Two consequences worth stating before the next reader\n * hunts for them:\n \n 1. The rules are written as static attribute selectors, `&[data-context-menu='true']`,\n * not as interpolated `css` blocks. An interpolated rule shares the component's\n * `componentId`, so two instances in different states collide and one wins for both —\n * the convention recorded in `ThemeProp`'s JSDoc in `src/utils/defaultTheme.ts`.\n * 2. The theme branches are written out by hand rather than through `themeProp()`, for\n * the same reason `FloatingArrow.styled.ts` does it: `themeProp()` emits a SELECTOR\n * (`body.dark-theme &&`), and nesting one inside another selector block produces a\n * descendant selector rather than a refinement. Writing them out also settles the\n * specificity question by construction — each variant rule carries the base rule's\n * `body.<theme>` prefix PLUS an attribute selector, so it wins outright instead of by\n * being later in the sheet.\n /\nimport styled from 'styled-components';\nimport { rgba } from 'polished';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and the\n * two majors disagree on the second parameter. §J.4.\n \n IT IS ALSO NOW MANDATORY RATHER THAN OPTIONAL, WHICH FIXES A DECLARED DEFECT. The old\n * version of this file was one of only two of the 36 styled files with no\n * `shouldForwardProp`, and its header recorded the consequence: nothing filtered props, so\n * the `theme` OBJECT that `.attrs(applyDefaultTheme)` injects was handed to\n * `@tippyjs/react`, which did `box.setAttribute('data-theme', theme)` for any truthy theme\n * (`tippy.js/dist/tippy.cjs.js:543`) and put `data-theme=\"[object Object]\"` on the live box.\n * The root here is a plain `styled.div`, so without this predicate that same object would be\n * written to the DOM as `theme=\"[object Object]\"` — `theme` is all-lowercase, so React 19\n * does NOT drop it the way it drops unknown camelCase props. The fix the old header asked\n * for is therefore not a follow-up; it is a precondition of this rewrite.\n \n `data-context-menu` / `data-context-menu-sublevel` are forwarded precisely because they\n * do not start with `$`: the rules below select on them, so they have to reach the DOM.\n /\nconst shouldForwardProp = (prop: string): boolean => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\n/\n The popover box — what `.tippy-box` was.\n \n `Popover.tsx` puts the transition styles and the `max-width` on this element inline and\n * the POSITION on its parent, matching the split tippy used (animated box inside a\n * Popper-positioned root) and the one `Tooltip` and the three existing Floating UI sites\n * use.\n \n `max-height: inherit` is not decorative and neither is the `.tippy-content` chain below\n * it. `size()` writes its cap onto the POSITIONER (`elements.floating`), exactly where\n * `popper-max-size-modifier` + `applyMaxSize` used to write `state.styles.popper.maxHeight`,\n * so the cap has to be inherited down box → `.tippy-content` → its child to reach the\n * element that actually scrolls.\n /\nexport const Popover = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: relative;\n outline: 0;\n white-space: normal;\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n line-height: inherit;\n max-height: inherit;\n\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('white')\n )}\n\n ${props =>\n props.theme.themeProp(\n 'box-shadow',\n `0px 1px 6px -3px ${rgba(props.theme.getColor('black'), 0.7)}`,\n `0 1px 6px -4px ${props.theme.getColor('black')}`\n )}\n\n ${props =>\n props.theme.themeProp(\n 'border',\n `1px solid ${props.theme.getColor('gray-800')}`,\n `1px solid ${props.theme.getColor('gray-300')}`\n )}\n\n .tippy-content {\n position: relative;\n z-index: 1;\n padding: 0;\n max-height: inherit;\n\n > div {\n max-height: inherit;\n }\n }\n\n / ------------------------------------------------------------- context-menu variant ----\n * NO BACKTICKS ANYWHERE BELOW: this is the inside of a tagged template literal, so a\n * backtick in a comment ends the template and the file stops parsing.\n \n border-radius is not themed, so it needs no theme prefix; border and box-shadow are,\n * and both override a themeProp() rule above, so each theme branch is spelled out.\n * \"border: none\" is the same in both themes (the old code passed themeProp('border',\n * 'none', 'none')) but still needs the prefix to outrank the base border rule.\n /\n &[data-context-menu='true'] {\n border-radius: 4px;\n }\n\n body.dark-theme &[data-context-menu='true'] {\n border: none;\n box-shadow: none;\n }\n\n body.light-theme &[data-context-menu='true'] {\n border: none;\n box-shadow: 0 1px 6px ${props => rgba(props.theme.getColor('gray-900'), 0.3)};\n }\n\n body:not(.light-theme):not(.dark-theme) &[data-context-menu='true'] {\n border: none;\n box-shadow: 0 1px 6px ${props => rgba(props.theme.getColor('gray-900'), 0.3)};\n\n @media (prefers-color-scheme: dark) {\n box-shadow: none;\n }\n }\n\n / ---------------------------------------------------------------- sublevel variant ----\n * The margins that pull a submenu back onto its parent item. Not themed, so one block.\n * data-placement is written by Popover.tsx from the placement the middleware RESOLVED,\n * which is what tippy put on the box, so a submenu that has flipped from right to left\n * still gets the correction for the side it ended up on.\n */\n &[data-context-menu-sublevel='true'] {\n &[data-placement^='right-start'],\n &[data-placement^='left-start'] {\n margin-top: -4px;\n }\n\n &[data-placement^='left'] {\n margin-right: -6px;\n }\n\n &[data-placement^='right'] {\n margin-left: -6px;\n }\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Popover","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily","themeProp","getColor","rgba"],"mappings":";;;;AAyHA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAgBM,MAAMC,OAAO,GAAGC,MAAM,CAACC,GAAG,CAC9BC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6DAAA,EAAA,uGAAA,EAAA,GAAA,EAAA,GAAA,EAAA,4SAAA,EAAA,yGAAA,EAAA,0QAAA,CAAA,EAIVC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,EAQnDF,KAAK,IACLA,KAAK,CAACC,KAAK,CAACE,SAAS,CACnB,YAAY,EACZH,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCJ,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,OAAO,CAC9B,CAAC,EAEDJ,KAAK,IACLA,KAAK,CAACC,KAAK,CAACE,SAAS,CACnB,YAAY,EACZ,CAAA,iBAAA,EAAoBE,IAAI,CAACL,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAA,CAAE,EAC9D,CAAA,eAAA,EAAkBJ,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,OAAO,CAAC,CAAA,CACjD,CAAC,EAEDJ,KAAK,IACLA,KAAK,CAACC,KAAK,CAACE,SAAS,CACnB,QAAQ,EACR,CAAA,UAAA,EAAaH,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,CAAA,CAAE,EAC/C,CAAA,UAAA,EAAaJ,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,CAAA,CAC/C,CAAC,EAiCuBJ,KAAK,IAAIK,IAAI,CAACL,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,EAKpDJ,KAAK,IAAIK,IAAI,CAACL,KAAK,CAACC,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC;;;;"}

package/build/data/SeverityBadge/SeverityBadge.js CHANGED Viewed

@@ -1,18 +1,18 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import Badge from '../Badge/Badge.js';
+import { jsx } from 'react/jsx-runtime';
-const InformationIcon = () => React__default.createElement("svg", {
+const InformationIcon = () => jsx("svg", {
   width: "12",
   height: "12",
   viewBox: "0 0 12 12",
   fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, React__default.createElement("path", {
-  d: "M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z",
-  fill: "currentColor"
-}));
+  xmlns: "http://www.w3.org/2000/svg",
+  children: jsx("path", {
+    d: "M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z",
+    fill: "currentColor"
+  })
+});
 const SEVERITY_BADGE_STYLES = {
   1: {
     backgroundColors: ['#272727', '#ffffff'],
@@ -49,9 +49,9 @@ const SeverityBadge = React__default.forwardRef(function SeverityBadge({
   ...rest
 }, forwardedRef) {
   const style = SEVERITY_BADGE_STYLES[severity] || SEVERITY_BADGE_STYLES[1];
-  return React__default.createElement(Badge, _extends({
+  return jsx(Badge, {
     ref: forwardedRef,
-    badgeIcon: icon === undefined ? React__default.createElement(InformationIcon, null) : icon,
+    badgeIcon: icon === undefined ? jsx(InformationIcon, {}) : icon,
     badgeContent: label,
     backgroundColors: style.backgroundColors,
     colors: style.colors,
@@ -60,19 +60,10 @@ const SeverityBadge = React__default.forwardRef(function SeverityBadge({
     fontWeight: fontWeight,
     height: height,
     horizontalPadding: horizontalPadding,
-    verticalPadding: verticalPadding
-  }, rest));
+    verticalPadding: verticalPadding,
+    ...rest
+  });
 });
-SeverityBadge.propTypes = process.env.NODE_ENV !== "production" ? {
-  severity: PropTypes.oneOf([1, 2, 3, 4, 5]).isRequired,
-  label: PropTypes.node.isRequired,
-  icon: PropTypes.node,
-  fontSize: PropTypes.number,
-  fontWeight: PropTypes.number,
-  height: PropTypes.number,
-  horizontalPadding: PropTypes.number,
-  verticalPadding: PropTypes.number
-} : {};
 export { SeverityBadge as default };
 //# sourceMappingURL=SeverityBadge.js.map