@transferwise/components 0.0.0-experimental-77e4e3a → 0.0.0-experimental-0657ea4

package/build/ExpressiveMoneyInput/Chevron/Chevron.js

@@ -3,16 +3,24 @@
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
 var react = require('motion/react');
+require('@transferwise/neptune-validation');
+require('react');
+var useDirection = require('../../common/hooks/useDirection/useDirection.js');
+require('@transferwise/neptune-tokens');
 var jsxRuntime = require('react/jsx-runtime');
 
 const Chevron = ({
   shouldShow = true
 }) => {
+  const {
+    isRTL
+  } = useDirection.useDirection();
+  const Icon = isRTL ? icons.ChevronRight : icons.ChevronLeft;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: clsx.clsx('d-flex align-items-center', 'wds-chevron-container', !shouldShow && 'wds-chevron-hidden'),
     children: /*#__PURE__*/jsxRuntime.jsx(react.motion.div, {
       animate: {
-        x: [12, 0, 0, -12],
+        x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
         opacity: [0, 1, 1, 0]
       },
       transition: {
@@ -22,7 +30,7 @@ const Chevron = ({
         repeat: Infinity,
         repeatType: 'loop'
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
     })
   });
 };

package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.js","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,cAAA,CAACI,YAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,cAAA,CAACgB,iBAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chevron.js","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\nimport { useDirection } from '../../common/hooks';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  const { isRTL } = useDirection();\n  const Icon = isRTL ? ChevronRight : ChevronLeft;\n\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <Icon />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","isRTL","useDirection","Icon","ChevronRight","ChevronLeft","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType"],"mappings":";;;;;;;;;;;AAUO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;EACtD,MAAM;AAAEC,IAAAA;GAAO,GAAGC,yBAAY,EAAE;AAChC,EAAA,MAAMC,IAAI,GAAGF,KAAK,GAAGG,kBAAY,GAAGC,iBAAW;AAE/C,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACR,UAAU,IAAI,oBAAoB,CACnC;AAAAS,IAAAA,QAAA,eAEFH,cAAA,CAACI,YAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAEZ,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAC5Ca,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,cAAA,CAACH,IAAI,EAAA,EAAA;KACK;AACd,GAAK,CAAC;AAEV;;;;"}

package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs

@@ -1,16 +1,24 @@
-import { ChevronLeft } from '@transferwise/icons';
+import { ChevronRight, ChevronLeft } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { motion } from 'motion/react';
+import '@transferwise/neptune-validation';
+import 'react';
+import { useDirection } from '../../common/hooks/useDirection/useDirection.mjs';
+import '@transferwise/neptune-tokens';
 import { jsx } from 'react/jsx-runtime';
 
 const Chevron = ({
   shouldShow = true
 }) => {
+  const {
+    isRTL
+  } = useDirection();
+  const Icon = isRTL ? ChevronRight : ChevronLeft;
   return /*#__PURE__*/jsx("div", {
     className: clsx('d-flex align-items-center', 'wds-chevron-container', !shouldShow && 'wds-chevron-hidden'),
     children: /*#__PURE__*/jsx(motion.div, {
       animate: {
-        x: [12, 0, 0, -12],
+        x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
         opacity: [0, 1, 1, 0]
       },
       transition: {
@@ -20,7 +28,7 @@ const Chevron = ({
         repeat: Infinity,
         repeatType: 'loop'
       },
-      children: /*#__PURE__*/jsx(ChevronLeft, {})
+      children: /*#__PURE__*/jsx(Icon, {})
     })
   });
 };

package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.mjs","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,GAAA,CAACI,MAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,GAAA,CAACgB,WAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chevron.mjs","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\nimport { useDirection } from '../../common/hooks';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  const { isRTL } = useDirection();\n  const Icon = isRTL ? ChevronRight : ChevronLeft;\n\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <Icon />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","isRTL","useDirection","Icon","ChevronRight","ChevronLeft","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType"],"mappings":";;;;;;;;;AAUO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;EACtD,MAAM;AAAEC,IAAAA;GAAO,GAAGC,YAAY,EAAE;AAChC,EAAA,MAAMC,IAAI,GAAGF,KAAK,GAAGG,YAAY,GAAGC,WAAW;AAE/C,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACR,UAAU,IAAI,oBAAoB,CACnC;AAAAS,IAAAA,QAAA,eAEFH,GAAA,CAACI,MAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAEZ,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAC5Ca,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,GAAA,CAACH,IAAI,EAAA,EAAA;KACK;AACd,GAAK,CAAC;AAEV;;;;"}

package/build/ListItem/ListItem.js

@@ -115,20 +115,20 @@ const ListItem = ({
   const getFeatureClassName = () => {
     const partials = [];
     const hasMedia = Boolean(media);
-    const hasControl = Boolean(control) && !isNavigationIndicatorHidden;
+    const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;
     const hasInfo = Boolean(additionalInfo);
     const hasPrompt = Boolean(prompt) || disabled && Boolean(disabledPromptMessage);
     /* eslint-disable functional/immutable-data */
-    if (hasMedia && hasControl) {
+    if (hasMedia && hasVisibleControl) {
       partials.push('wds-list-item-hasMedia-hasControl');
     }
-    if (hasMedia && !hasControl) {
+    if (hasMedia && !hasVisibleControl) {
       partials.push('wds-list-item-hasMedia-noControl');
     }
-    if (!hasMedia && hasControl) {
+    if (!hasMedia && hasVisibleControl) {
       partials.push('wds-list-item-noMedia-hasControl');
     }
-    if (!hasMedia && !hasControl) {
+    if (!hasMedia && !hasVisibleControl) {
       partials.push('wds-list-item-noMedia-noControl');
     }
     if (hasInfo && hasPrompt) {

package/build/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  /** @default 'li' */\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   * @default null\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n  const isNavigationIndicatorHidden =\n    controlType === 'navigation' &&\n    Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control) && !isNavigationIndicatorHidden;\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  /** @default 'li' */\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   * @default null\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n  const isNavigationIndicatorHidden =\n    controlType === 'navigation' &&\n    Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}

package/build/ListItem/ListItem.mjs

@@ -111,20 +111,20 @@ const ListItem = ({
   const getFeatureClassName = () => {
     const partials = [];
     const hasMedia = Boolean(media);
-    const hasControl = Boolean(control) && !isNavigationIndicatorHidden;
+    const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;
     const hasInfo = Boolean(additionalInfo);
     const hasPrompt = Boolean(prompt) || disabled && Boolean(disabledPromptMessage);
     /* eslint-disable functional/immutable-data */
-    if (hasMedia && hasControl) {
+    if (hasMedia && hasVisibleControl) {
       partials.push('wds-list-item-hasMedia-hasControl');
     }
-    if (hasMedia && !hasControl) {
+    if (hasMedia && !hasVisibleControl) {
       partials.push('wds-list-item-hasMedia-noControl');
     }
-    if (!hasMedia && hasControl) {
+    if (!hasMedia && hasVisibleControl) {
       partials.push('wds-list-item-noMedia-hasControl');
     }
-    if (!hasMedia && !hasControl) {
+    if (!hasMedia && !hasVisibleControl) {
       partials.push('wds-list-item-noMedia-noControl');
     }
     if (hasInfo && hasPrompt) {

package/build/ListItem/ListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.mjs","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  /** @default 'li' */\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   * @default null\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n  const isNavigationIndicatorHidden =\n    controlType === 'navigation' &&\n    Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasControl = Boolean(control) && !isNavigationIndicatorHidden;\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}
+{"version":3,"file":"ListItem.mjs","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type ListItemProps = {\n  /** @default 'li' */\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  /**\n   * Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n   */\n  disabled?: boolean;\n  /**\n   * If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n   * **NB:** This message cannot house more than **1** link or inline button.<br />\n   * **NB:** It must be used together with `disabled` prop and will be disregarded otherwise.\n   */\n  disabledPromptMessage?: ReactNode;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /**\n   * Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n   * Can be only rendered if `subtitle` is also provided.\n   */\n  additionalInfo?: ReactNode;\n  valueTitle?: ReactNode;\n  valueSubtitle?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br />\n   * `<ListItem.AvatarView />`,\n   * `<ListItem.AvatarLayout />` or\n   * `<ListItem.Image />`\n   */\n  media?: ReactNode;\n  /**\n   * Requires one of the following as a sole child: <br/>\n   * `<ListItem.Button />`, <br/>\n   * `<ListItem.Checkbox />`, <br/>\n   * `<ListItem.IconButton />`, <br/>\n   * `<ListItem.Navigation />`, <br/>\n   * `<ListItem.Radio />`, or\n   * `<ListItem.Switch />`\n   * @default null\n   */\n  control?: ReactNode;\n  /**\n   * Requires `<ListItem.Prompt />` component as a sole child.\n   */\n  prompt?: ReactNode;\n  className?: string;\n  /**\n   * A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n   * Controls the width ratio of left side content (title and subtitle) to the right side content.\n   */\n  valueColumnWidth?: number;\n  id?: string;\n};\n\n/**\n * @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n */\nexport const ListItem = ({\n  as: ListItemElement = 'li',\n  title,\n  subtitle,\n  additionalInfo,\n  prompt,\n  inverted,\n  media,\n  spotlight,\n  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  disabledPromptMessage,\n  className,\n  valueColumnWidth,\n  id,\n}: ListItemProps) => {\n  const idPrefix = useId();\n  const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n  const [mediaSize, setMediaSize] = useState<ListItemMediaSize | undefined>();\n\n  const ids: ListItemContextData['ids'] = {\n    title: `${idPrefix}_title`,\n    ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n    ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n    ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n    control: `${idPrefix}_control`,\n    ...(prompt || (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n    ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n  };\n\n  const isPartiallyInteractive = Boolean(\n    (controlType === 'button' || controlType === 'icon-button') &&\n    (controlProps as ListItemButtonProps | ListItemIconButtonProps)?.partiallyInteractive,\n  );\n  const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n  const isButtonAsLink =\n    (controlType === 'button' || controlType === 'icon-button') &&\n    Boolean((controlProps as ListItemButtonProps | ListItemIconButtonProps)?.href);\n  const isNavigationIndicatorHidden =\n    controlType === 'navigation' &&\n    Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n  const titlesAndValues = [\n    inverted ? ids.subtitle : ids.title,\n    inverted ? ids.title : ids.subtitle,\n    inverted ? ids.valueSubtitle : ids.valueTitle,\n    inverted ? ids.valueTitle : ids.valueSubtitle,\n  ].join(' ');\n  const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n  const describedByIds = useMemo(() => {\n    return isFullyInteractive && !isButtonAsLink\n      ? additionalInfoPrompt\n      : `${titlesAndValues} ${additionalInfoPrompt}`;\n  }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted, disabledPromptMessage },\n      mediaSize,\n      isPartiallyInteractive,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n  );\n  const gridColumnsStyle = {\n    '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n    '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n  } as React.CSSProperties;\n\n  const getFeatureClassName = () => {\n    const partials = [];\n    const hasMedia = Boolean(media);\n    const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt) || (disabled && Boolean(disabledPromptMessage));\n\n    /* eslint-disable functional/immutable-data */\n    if (hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasVisibleControl) {\n      partials.push('wds-list-item-noMedia-noControl');\n    }\n\n    if (hasInfo && hasPrompt) {\n      partials.push('wds-list-item-hasInfo-hasPrompt');\n    }\n    if (hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-hasInfo-noPrompt');\n    }\n    if (!hasInfo && hasPrompt) {\n      partials.push('wds-list-item-noInfo-hasPrompt');\n    }\n    if (!hasInfo && !hasPrompt) {\n      partials.push('wds-list-item-noInfo-noPrompt');\n    }\n    /* eslint-enable functional/immutable-data */\n\n    return partials.join(' ');\n  };\n\n  return (\n    <ListItemContext.Provider value={listItemContext}>\n      <ListItemElement\n        className={clsx(\n          'wds-list-item',\n          `wds-list-item-${controlType}`,\n          getFeatureClassName(),\n          {\n            'wds-list-item-interactive': isFullyInteractive,\n            'wds-list-item-partially-interactive': isPartiallyInteractive,\n            [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n              isFullyInteractive && !!spotlight,\n            disabled: disabled && !isPartiallyInteractive,\n            'disabled--has-prompt-reason':\n              !disabledPromptMessage && disabled && !isPartiallyInteractive,\n          },\n          className,\n        )}\n        id={id}\n        aria-disabled={disabled}\n        style={\n          {\n            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n          } as React.CSSProperties\n        }\n      >\n        {isFullyInteractive && spotlight === 'inactive' && (\n          <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n            <rect />\n          </svg>\n        )}\n\n        <View\n          {...{\n            isPartiallyInteractive,\n            subtitle,\n            additionalInfo,\n            disabled,\n            disabledPromptMessage,\n            prompt,\n            controlType,\n            controlProps,\n          }}\n          className={getFeatureClassName()}\n        >\n          {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n          {/* Title + Subtitle + Values - Group */}\n          <div\n            className=\"wds-list-item-body\"\n            style={valueColumnWidth ? gridColumnsStyle : undefined}\n          >\n            {/* Title + Subtitle + Values - Group */}\n            <span className=\"wds-list-item-titles\">\n              {(() => {\n                const titles = [\n                  <Body\n                    key={ids.title}\n                    id={ids.title}\n                    type={Typography.BODY_LARGE_BOLD}\n                    className=\"wds-list-item-title\"\n                  >\n                    {title}\n                  </Body>,\n                ];\n                if (subtitle) {\n                  titles.push(\n                    <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n                      {subtitle}\n                    </Body>,\n                  );\n                }\n                return inverted ? [...titles].reverse() : titles;\n              })()}\n            </span>\n\n            {(valueTitle || valueSubtitle) && (\n              <span\n                className={clsx('wds-list-item-value', {\n                  'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,\n                })}\n              >\n                {(() => {\n                  const values = [];\n                  if (valueTitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueTitle}\n                        id={ids.valueTitle}\n                        type={Typography.BODY_LARGE_BOLD}\n                        className=\"wds-list-item-title-value\"\n                      >\n                        {valueTitle}\n                      </Body>,\n                    );\n                  }\n                  if (valueSubtitle) {\n                    values.push(\n                      <Body\n                        key={ids.valueSubtitle}\n                        id={ids.valueSubtitle}\n                        className=\"wds-list-item-subtitle-value\"\n                      >\n                        {valueSubtitle}\n                      </Body>,\n                    );\n                  }\n                  return inverted ? [...values].reverse() : values;\n                })()}\n              </span>\n            )}\n          </div>\n\n          {control === null ? null : (\n            <Body\n              className={clsx('wds-list-item-control-wrapper', {\n                'wds-list-item-button-control': controlType === 'button',\n                'wds-list-item-button-control--hasPrompt':\n                  controlType === 'button' && Boolean(prompt),\n              })}\n              style={\n                {\n                  '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n                } as React.CSSProperties\n              }\n            >\n              {control}\n            </Body>\n          )}\n        </View>\n      </ListItemElement>\n    </ListItemContext.Provider>\n  );\n};\n\ntype ViewProps = PropsWithChildren<{\n  isPartiallyInteractive: boolean;\n  controlType?: ListItemTypes;\n  controlProps?: ListItemControlProps;\n}> &\n  Pick<\n    ListItemProps,\n    'subtitle' | 'additionalInfo' | 'prompt' | 'disabled' | 'disabledPromptMessage' | 'className'\n  >;\n\nfunction View({\n  children,\n  additionalInfo,\n  prompt,\n  disabled,\n  disabledPromptMessage,\n  isPartiallyInteractive,\n  controlType = 'non-interactive',\n  controlProps,\n  className = '',\n}: ViewProps) {\n  const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n  const isLinkControl = ['navigation'].includes(controlType);\n\n  const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n  const renderExtras = () => {\n    const resolvedPrompt =\n      disabled && disabledPromptMessage && !prompt ? (\n        <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n      ) : (\n        prompt\n      );\n\n    return (\n      <>\n        {additionalInfo}\n        {resolvedPrompt}\n      </>\n    );\n  };\n\n  if (isLinkControl && isHrefProvided) {\n    return (\n      // for link instances of .Navigation, .IconButton, .Button\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <PrimitiveAnchor\n          aria-describedby={describedByIds}\n          href={(controlProps as ListItemNavigationProps)?.href}\n          target={(controlProps as ListItemNavigationProps)?.target}\n          className={clsx('wds-list-item-view', {\n            'wds-list-item-control': controlType === 'navigation',\n            fullyInteractive: !isPartiallyInteractive,\n          })}\n          disabled={disabled}\n          onClick={(controlProps as PrimitiveAnchorProps | undefined)?.onClick}\n        >\n          {children}\n        </PrimitiveAnchor>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  if (isPartiallyInteractive || controlType === 'non-interactive') {\n    return (\n      <div className={clsx('wds-list-item-gridWrapper', className)}>\n        <div className=\"wds-list-item-view\">{children}</div>\n\n        {renderExtras()}\n      </div>\n    );\n  }\n\n  // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n  // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n  const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n  return (\n    <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n      <label\n        htmlFor={ids.control}\n        className={clsx('wds-list-item-view', {\n          clickable: !disabled,\n          fullyInteractive: !isPartiallyInteractive,\n        })}\n      >\n        {children}\n      </label>\n\n      {renderExtras()}\n    </InputWrapper>\n  );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}

package/build/common/Panel/Panel.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
+var OverlayIdProvider = require('../../Provider/overlay/OverlayIdProvider.js');
+var Dimmer = require('../../Dimmer/Dimmer.js');
+var useDirection = require('../hooks/useDirection/useDirection.js');
 require('../theme.js');
 require('../direction.js');
 require('@transferwise/neptune-tokens');
@@ -29,27 +32,8 @@ require('@transferwise/icons');
 require('react-intl');
 require('../CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Dimmer = require('../../Dimmer/Dimmer.js');
-var OverlayIdProvider = require('../../Provider/overlay/OverlayIdProvider.js');
+var Panel_positionUtils = require('./Panel.positionUtils.js');
 
-const POPOVER_OFFSET = 16;
-// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
-// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
-// This mapping forces popover to try the four available positions before going back to the initial chosen one.
-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],
-  '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,
   flip = true,
@@ -64,14 +48,18 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = React.useRef(null);
-  const floatingPlacement = position.positionToPlacement(position$1);
+  const {
+    isRTL
+  } = useDirection.useDirection();
+  const resolvedPosition = isRTL ? Panel_positionUtils.mirrorPositionForRtl(position$1) : position$1;
+  const floatingPlacement = Panel_positionUtils.positionToPlacement(resolvedPosition);
   const middleware = [];
   if (arrow) {
-    middleware.push(react.offset(POPOVER_OFFSET));
+    middleware.push(react.offset(Panel_positionUtils.POPOVER_OFFSET));
   }
-  if (flip && fallbackPlacements[floatingPlacement]) {
+  if (flip && Panel_positionUtils.fallbackPlacements[floatingPlacement]) {
     middleware.push(react.flip({
-      fallbackPlacements: fallbackPlacements[floatingPlacement]
+      fallbackPlacements: Panel_positionUtils.fallbackPlacements[floatingPlacement]
     }));
   }
   if (altAxis) {
@@ -85,7 +73,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   }
   if (considerHeight) {
     middleware.push(react.size({
-      padding: POPOVER_OFFSET,
+      padding: Panel_positionUtils.POPOVER_OFFSET,
       apply: ({
         elements,
         availableHeight

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  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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"}
+{"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  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 { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\nimport Dimmer from '../../Dimmer';\nimport useDirection from '../hooks/useDirection';\nimport { Position } from '..';\nimport {\n  type FloatingPlacement,\n  POPOVER_OFFSET,\n  fallbackPlacements,\n  mirrorPositionForRtl,\n  positionToPlacement,\n} from './Panel.positionUtils';\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 { isRTL } = useDirection();\n  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;\n  const floatingPlacement = positionToPlacement(resolvedPosition);\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":["Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","Position","BOTTOM","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","isRTL","useDirection","resolvedPosition","mirrorPositionForRtl","floatingPlacement","positionToPlacement","middleware","push","offset","POPOVER_OFFSET","fallbackPlacements","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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"}