@transferwise/components 46.130.2 → 46.130.3

package/build/inputs/SelectInput/ItemView/SelectInputItemView.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var SelectInput_utils = require('../SelectInput.utils.js');
+var SelectInputOption = require('../Option/SelectInputOption.js');
+var SelectInputGroupItemView = require('./GroupItemView/SelectInputGroupItemView.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  switch (item.type) {
+    case 'option':
+      {
+        if (item.value != null && (needle == null || SelectInput_utils.selectInputOptionItemIncludesNeedle(item, needle))) {
+          return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption.SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(SelectInputGroupItemView.SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsxRuntime.jsx("hr", {
+            className: "np-select-input-separator-item"
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+
+exports.SelectInputItemView = SelectInputItemView;
+//# sourceMappingURL=SelectInputItemView.js.map

package/build/inputs/SelectInput/ItemView/SelectInputItemView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputItemView.js","sources":["../../../../src/inputs/SelectInput/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils';\nimport { SelectInputItem, SelectInputProps } from '../SelectInput.types';\nimport { SelectInputOption } from '../Option';\nimport { SelectInputGroupItemView } from './GroupItemView';\n\nexport interface SelectInputItemViewProps<\n  T = string,\n  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,\n> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {\n  item: I;\n  needle: string | null | undefined;\n}\n\n/**\n * Component that renders different types of SelectInput items:\n * options, groups, or separators.\n */\nexport function SelectInputItemView<T = string>({\n  item,\n  renderValue,\n  needle,\n}: SelectInputItemViewProps<T>) {\n  switch (item.type) {\n    case 'option': {\n      if (\n        item.value != null &&\n        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n      ) {\n        return (\n          <SelectInputOption value={item.value} disabled={item.disabled}>\n            {renderValue(item.value, false)}\n          </SelectInputOption>\n        );\n      }\n      break;\n    }\n    case 'group': {\n      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n    }\n    case 'separator': {\n      if (needle == null) {\n        return <hr className=\"np-select-input-separator-item\" />;\n      }\n      break;\n    }\n  }\n  return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","className"],"mappings":";;;;;;;AAiBM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,qDAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,cAAA,CAACC,mCAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,cAAA,CAACI,iDAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;AAClB,UAAA,oBAAOI,cAAA,CAAA,IAAA,EAAA;AAAIK,YAAAA,SAAS,EAAC;AAAgC,YAAG;AAC1D,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs

@@ -0,0 +1,45 @@
+import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils.mjs';
+import { SelectInputOption } from '../Option/SelectInputOption.mjs';
+import { SelectInputGroupItemView } from './GroupItemView/SelectInputGroupItemView.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function SelectInputItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  switch (item.type) {
+    case 'option':
+      {
+        if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
+          return /*#__PURE__*/jsx(SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsx(SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsx("hr", {
+            className: "np-select-input-separator-item"
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+
+export { SelectInputItemView };
+//# sourceMappingURL=SelectInputItemView.mjs.map

package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputItemView.mjs","sources":["../../../../src/inputs/SelectInput/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils';\nimport { SelectInputItem, SelectInputProps } from '../SelectInput.types';\nimport { SelectInputOption } from '../Option';\nimport { SelectInputGroupItemView } from './GroupItemView';\n\nexport interface SelectInputItemViewProps<\n  T = string,\n  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,\n> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {\n  item: I;\n  needle: string | null | undefined;\n}\n\n/**\n * Component that renders different types of SelectInput items:\n * options, groups, or separators.\n */\nexport function SelectInputItemView<T = string>({\n  item,\n  renderValue,\n  needle,\n}: SelectInputItemViewProps<T>) {\n  switch (item.type) {\n    case 'option': {\n      if (\n        item.value != null &&\n        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n      ) {\n        return (\n          <SelectInputOption value={item.value} disabled={item.disabled}>\n            {renderValue(item.value, false)}\n          </SelectInputOption>\n        );\n      }\n      break;\n    }\n    case 'group': {\n      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n    }\n    case 'separator': {\n      if (needle == null) {\n        return <hr className=\"np-select-input-separator-item\" />;\n      }\n      break;\n    }\n  }\n  return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","className"],"mappings":";;;;;AAiBM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,mCAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,GAAA,CAACC,iBAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,GAAA,CAACI,wBAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;AAClB,UAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIK,YAAAA,SAAS,EAAC;AAAgC,YAAG;AAC1D,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/inputs/SelectInput/Option/SelectInputOption.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var clsx = require('clsx');
+var React = require('react');
+var react = require('@headlessui/react');
+var SelectInput_contexts = require('../SelectInput.contexts.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputOption({
+  value,
+  disabled,
+  children
+}) {
+  const itemsCount = React.useContext(SelectInput_contexts.SelectInputItemsCountContext);
+  const itemPosition = React.useContext(SelectInput_contexts.SelectInputItemPositionContext);
+  return /*#__PURE__*/jsxRuntime.jsx(react.ListboxOption, {
+    as: "div",
+    value: value,
+    "aria-setsize": itemsCount,
+    "aria-posinset": itemPosition,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => clsx.clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    children: ({
+      selected
+    }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      }), /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 16,
+        className: clsx.clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      })]
+    })
+  });
+}
+
+exports.SelectInputOption = SelectInputOption;
+//# sourceMappingURL=SelectInputOption.js.map

package/build/inputs/SelectInput/Option/SelectInputOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOption.js","sources":["../../../../src/inputs/SelectInput/Option/SelectInputOption.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { ListboxOption } from '@headlessui/react';\nimport {\n  SelectInputItemsCountContext,\n  SelectInputItemPositionContext,\n} from '../SelectInput.contexts';\n\nexport interface SelectInputOptionProps<T = string> {\n  value: T;\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * A selectable option in a SelectInput dropdown.\n * Includes accessibility support and styling for selected, active, and disabled states.\n */\nexport function SelectInputOption<T = string>({\n  value,\n  disabled,\n  children,\n}: SelectInputOptionProps<T>) {\n  const itemsCount = useContext(SelectInputItemsCountContext);\n  const itemPosition = useContext(SelectInputItemPositionContext);\n\n  return (\n    <ListboxOption\n      as=\"div\"\n      value={value}\n      aria-setsize={itemsCount}\n      aria-posinset={itemPosition}\n      disabled={disabled}\n      className={({ active, disabled: uiDisabled }) =>\n        clsx(\n          'np-select-input-option-container np-text-body-large',\n          active && 'np-select-input-option-container--active',\n          uiDisabled && 'np-select-input-option-container--disabled',\n        )\n      }\n    >\n      {({ selected }) => (\n        <>\n          <div className=\"np-select-input-option\">{children}</div>\n          <Check\n            size={16}\n            className={clsx(\n              'np-select-input-option-check',\n              !selected && 'np-select-input-option-check--not-selected',\n            )}\n          />\n        </>\n      )}\n    </ListboxOption>\n  );\n}\n"],"names":["SelectInputOption","value","disabled","children","itemsCount","useContext","SelectInputItemsCountContext","itemPosition","SelectInputItemPositionContext","_jsx","ListboxOption","as","className","active","uiDisabled","clsx","selected","_jsxs","_Fragment","Check","size"],"mappings":";;;;;;;;;AAmBM,SAAUA,iBAAiBA,CAAa;EAC5CC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AAAQ,CACkB,EAAA;AAC1B,EAAA,MAAMC,UAAU,GAAGC,gBAAU,CAACC,iDAA4B,CAAC;AAC3D,EAAA,MAAMC,YAAY,GAAGF,gBAAU,CAACG,mDAA8B,CAAC;EAE/D,oBACEC,cAAA,CAACC,mBAAa,EAAA;AACZC,IAAAA,EAAE,EAAC,KAAK;AACRV,IAAAA,KAAK,EAAEA,KAAM;AACb,IAAA,cAAA,EAAcG,UAAW;AACzB,IAAA,eAAA,EAAeG,YAAa;AAC5BL,IAAAA,QAAQ,EAAEA,QAAS;AACnBU,IAAAA,SAAS,EAAEA,CAAC;MAAEC,MAAM;AAAEX,MAAAA,QAAQ,EAAEY;AAAU,KAAE,KAC1CC,SAAI,CACF,qDAAqD,EACrDF,MAAM,IAAI,0CAA0C,EACpDC,UAAU,IAAI,4CAA4C,CAE7D;AAAAX,IAAAA,QAAA,EAEAA,CAAC;AAAEa,MAAAA;KAAU,kBACZC,eAAA,CAAAC,mBAAA,EAAA;AAAAf,MAAAA,QAAA,gBACEM,cAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,SAAS,EAAC,wBAAwB;AAAAT,QAAAA,QAAA,EAAEA;AAAQ,OAAM,CACvD,eAAAM,cAAA,CAACU,WAAK,EAAA;AACJC,QAAAA,IAAI,EAAE,EAAG;QACTR,SAAS,EAAEG,SAAI,CACb,8BAA8B,EAC9B,CAACC,QAAQ,IAAI,4CAA4C;AACzD,OAAA,CAEN;KAAA;AACD,GACY,CAAC;AAEpB;;;;"}

package/build/inputs/SelectInput/Option/SelectInputOption.mjs

@@ -0,0 +1,40 @@
+import { Check } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { ListboxOption } from '@headlessui/react';
+import { SelectInputItemsCountContext, SelectInputItemPositionContext } from '../SelectInput.contexts.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SelectInputOption({
+  value,
+  disabled,
+  children
+}) {
+  const itemsCount = useContext(SelectInputItemsCountContext);
+  const itemPosition = useContext(SelectInputItemPositionContext);
+  return /*#__PURE__*/jsx(ListboxOption, {
+    as: "div",
+    value: value,
+    "aria-setsize": itemsCount,
+    "aria-posinset": itemPosition,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    children: ({
+      selected
+    }) => /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      }), /*#__PURE__*/jsx(Check, {
+        size: 16,
+        className: clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+      })]
+    })
+  });
+}
+
+export { SelectInputOption };
+//# sourceMappingURL=SelectInputOption.mjs.map

package/build/inputs/SelectInput/Option/SelectInputOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOption.mjs","sources":["../../../../src/inputs/SelectInput/Option/SelectInputOption.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { ListboxOption } from '@headlessui/react';\nimport {\n  SelectInputItemsCountContext,\n  SelectInputItemPositionContext,\n} from '../SelectInput.contexts';\n\nexport interface SelectInputOptionProps<T = string> {\n  value: T;\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * A selectable option in a SelectInput dropdown.\n * Includes accessibility support and styling for selected, active, and disabled states.\n */\nexport function SelectInputOption<T = string>({\n  value,\n  disabled,\n  children,\n}: SelectInputOptionProps<T>) {\n  const itemsCount = useContext(SelectInputItemsCountContext);\n  const itemPosition = useContext(SelectInputItemPositionContext);\n\n  return (\n    <ListboxOption\n      as=\"div\"\n      value={value}\n      aria-setsize={itemsCount}\n      aria-posinset={itemPosition}\n      disabled={disabled}\n      className={({ active, disabled: uiDisabled }) =>\n        clsx(\n          'np-select-input-option-container np-text-body-large',\n          active && 'np-select-input-option-container--active',\n          uiDisabled && 'np-select-input-option-container--disabled',\n        )\n      }\n    >\n      {({ selected }) => (\n        <>\n          <div className=\"np-select-input-option\">{children}</div>\n          <Check\n            size={16}\n            className={clsx(\n              'np-select-input-option-check',\n              !selected && 'np-select-input-option-check--not-selected',\n            )}\n          />\n        </>\n      )}\n    </ListboxOption>\n  );\n}\n"],"names":["SelectInputOption","value","disabled","children","itemsCount","useContext","SelectInputItemsCountContext","itemPosition","SelectInputItemPositionContext","_jsx","ListboxOption","as","className","active","uiDisabled","clsx","selected","_jsxs","_Fragment","Check","size"],"mappings":";;;;;;;AAmBM,SAAUA,iBAAiBA,CAAa;EAC5CC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AAAQ,CACkB,EAAA;AAC1B,EAAA,MAAMC,UAAU,GAAGC,UAAU,CAACC,4BAA4B,CAAC;AAC3D,EAAA,MAAMC,YAAY,GAAGF,UAAU,CAACG,8BAA8B,CAAC;EAE/D,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZC,IAAAA,EAAE,EAAC,KAAK;AACRV,IAAAA,KAAK,EAAEA,KAAM;AACb,IAAA,cAAA,EAAcG,UAAW;AACzB,IAAA,eAAA,EAAeG,YAAa;AAC5BL,IAAAA,QAAQ,EAAEA,QAAS;AACnBU,IAAAA,SAAS,EAAEA,CAAC;MAAEC,MAAM;AAAEX,MAAAA,QAAQ,EAAEY;AAAU,KAAE,KAC1CC,IAAI,CACF,qDAAqD,EACrDF,MAAM,IAAI,0CAA0C,EACpDC,UAAU,IAAI,4CAA4C,CAE7D;AAAAX,IAAAA,QAAA,EAEAA,CAAC;AAAEa,MAAAA;KAAU,kBACZC,IAAA,CAAAC,QAAA,EAAA;AAAAf,MAAAA,QAAA,gBACEM,GAAA,CAAA,KAAA,EAAA;AAAKG,QAAAA,SAAS,EAAC,wBAAwB;AAAAT,QAAAA,QAAA,EAAEA;AAAQ,OAAM,CACvD,eAAAM,GAAA,CAACU,KAAK,EAAA;AACJC,QAAAA,IAAI,EAAE,EAAG;QACTR,SAAS,EAAEG,IAAI,CACb,8BAA8B,EAC9B,CAACC,QAAQ,IAAI,4CAA4C;AACzD,OAAA,CAEN;KAAA;AACD,GACY,CAAC;AAEpB;;;;"}

package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var SelectInput_contexts = require('../SelectInput.contexts.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon
+}) {
+  const withinTrigger = React.useContext(SelectInput_contexts.SelectInputOptionContentWithinTriggerContext);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: clsx.clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
+    children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: clsx.clsx('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
+      children: icon
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "np-select-input-option-content-text",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: clsx.clsx('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "d-inline",
+          children: title
+        }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          children: note
+        }) : null]
+      }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: clsx.clsx('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger'),
+        children: description
+      }) : null]
+    })]
+  });
+}
+
+exports.SelectInputOptionContent = SelectInputOptionContent;
+//# sourceMappingURL=SelectInputOptionContent.js.map

package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOptionContent.js","sources":["../../../../src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';\n\nexport interface SelectInputOptionContentProps {\n  title: React.ReactNode;\n  note?: string;\n  description?: string;\n  icon?: React.ReactNode;\n}\n\n/**\n * Component for rendering structured content within a SelectInput option.\n * Supports title, optional note, description, and icon with different styling\n * based on whether it's rendered within the trigger button or the dropdown.\n */\nexport function SelectInputOptionContent({\n  title,\n  note,\n  description,\n  icon,\n}: SelectInputOptionContentProps) {\n  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);\n\n  return (\n    <div\n      className={clsx(\n        'np-select-input-option-content-container',\n        (note || description) && 'np-text-body-large',\n      )}\n    >\n      {icon ? (\n        <div\n          className={clsx(\n            'np-select-input-option-content-icon',\n            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',\n          )}\n        >\n          {icon}\n        </div>\n      ) : null}\n\n      <div className=\"np-select-input-option-content-text\">\n        <div\n          className={clsx(\n            'np-select-input-option-content-text-line-1',\n            withinTrigger && 'np-select-input-option-content-text-within-trigger',\n          )}\n        >\n          <div className=\"d-inline\">{title}</div>\n          {note ? (\n            <span className=\"np-select-input-option-content-text-secondary np-text-body-default\">\n              {note}\n            </span>\n          ) : null}\n        </div>\n\n        {description ? (\n          <div\n            className={clsx(\n              'np-select-input-option-content-text-secondary np-text-body-default',\n              withinTrigger &&\n                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',\n            )}\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["SelectInputOptionContent","title","note","description","icon","withinTrigger","useContext","SelectInputOptionContentWithinTriggerContext","_jsxs","className","clsx","children","_jsx"],"mappings":";;;;;;;AAgBM,SAAUA,wBAAwBA,CAAC;EACvCC,KAAK;EACLC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAI,CAC0B,EAAA;AAC9B,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iEAA4C,CAAC;AAE9E,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,0CAA0C,EAC1C,CAACR,IAAI,IAAIC,WAAW,KAAK,oBAAoB,CAC7C;IAAAQ,QAAA,EAAA,CAEDP,IAAI,gBACHQ,cAAA,CAAA,KAAA,EAAA;MACEH,SAAS,EAAEC,SAAI,CACb,qCAAqC,EACrC,CAACL,aAAa,IAAI,yDAAyD,CAC3E;AAAAM,MAAAA,QAAA,EAEDP;AAAI,KACF,CAAC,GACJ,IAAI,eAERI,eAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,qCAAqC;AAAAE,MAAAA,QAAA,gBAClDH,eAAA,CAAA,KAAA,EAAA;QACEC,SAAS,EAAEC,SAAI,CACb,4CAA4C,EAC5CL,aAAa,IAAI,oDAAoD,CACrE;AAAAM,QAAAA,QAAA,gBAEFC,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,UAAU;AAAAE,UAAAA,QAAA,EAAEV;AAAK,SAAM,CACtC,EAACC,IAAI,gBACHU,cAAA,CAAA,MAAA,EAAA;AAAMH,UAAAA,SAAS,EAAC,oEAAoE;AAAAE,UAAAA,QAAA,EACjFT;SACG,CAAC,GACL,IAAI;AAAA,OACL,CAEL,EAACC,WAAW,gBACVS,cAAA,CAAA,KAAA,EAAA;QACEH,SAAS,EAAEC,SAAI,CACb,oEAAoE,EACpEL,aAAa,IACX,kGAAkG,CACpG;AAAAM,QAAAA,QAAA,EAEDR;OACE,CAAC,GACJ,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import { useContext } from 'react';
+import { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon
+}) {
+  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
+  return /*#__PURE__*/jsxs("div", {
+    className: clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
+    children: [icon ? /*#__PURE__*/jsx("div", {
+      className: clsx('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
+      children: icon
+    }) : null, /*#__PURE__*/jsxs("div", {
+      className: "np-select-input-option-content-text",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: clsx('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
+        children: [/*#__PURE__*/jsx("div", {
+          className: "d-inline",
+          children: title
+        }), note ? /*#__PURE__*/jsx("span", {
+          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          children: note
+        }) : null]
+      }), description ? /*#__PURE__*/jsx("div", {
+        className: clsx('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger'),
+        children: description
+      }) : null]
+    })]
+  });
+}
+
+export { SelectInputOptionContent };
+//# sourceMappingURL=SelectInputOptionContent.mjs.map

package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOptionContent.mjs","sources":["../../../../src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext } from 'react';\nimport { SelectInputOptionContentWithinTriggerContext } from '../SelectInput.contexts';\n\nexport interface SelectInputOptionContentProps {\n  title: React.ReactNode;\n  note?: string;\n  description?: string;\n  icon?: React.ReactNode;\n}\n\n/**\n * Component for rendering structured content within a SelectInput option.\n * Supports title, optional note, description, and icon with different styling\n * based on whether it's rendered within the trigger button or the dropdown.\n */\nexport function SelectInputOptionContent({\n  title,\n  note,\n  description,\n  icon,\n}: SelectInputOptionContentProps) {\n  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);\n\n  return (\n    <div\n      className={clsx(\n        'np-select-input-option-content-container',\n        (note || description) && 'np-text-body-large',\n      )}\n    >\n      {icon ? (\n        <div\n          className={clsx(\n            'np-select-input-option-content-icon',\n            !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',\n          )}\n        >\n          {icon}\n        </div>\n      ) : null}\n\n      <div className=\"np-select-input-option-content-text\">\n        <div\n          className={clsx(\n            'np-select-input-option-content-text-line-1',\n            withinTrigger && 'np-select-input-option-content-text-within-trigger',\n          )}\n        >\n          <div className=\"d-inline\">{title}</div>\n          {note ? (\n            <span className=\"np-select-input-option-content-text-secondary np-text-body-default\">\n              {note}\n            </span>\n          ) : null}\n        </div>\n\n        {description ? (\n          <div\n            className={clsx(\n              'np-select-input-option-content-text-secondary np-text-body-default',\n              withinTrigger &&\n                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',\n            )}\n          >\n            {description}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["SelectInputOptionContent","title","note","description","icon","withinTrigger","useContext","SelectInputOptionContentWithinTriggerContext","_jsxs","className","clsx","children","_jsx"],"mappings":";;;;;AAgBM,SAAUA,wBAAwBA,CAAC;EACvCC,KAAK;EACLC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAI,CAC0B,EAAA;AAC9B,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,4CAA4C,CAAC;AAE9E,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,0CAA0C,EAC1C,CAACR,IAAI,IAAIC,WAAW,KAAK,oBAAoB,CAC7C;IAAAQ,QAAA,EAAA,CAEDP,IAAI,gBACHQ,GAAA,CAAA,KAAA,EAAA;MACEH,SAAS,EAAEC,IAAI,CACb,qCAAqC,EACrC,CAACL,aAAa,IAAI,yDAAyD,CAC3E;AAAAM,MAAAA,QAAA,EAEDP;AAAI,KACF,CAAC,GACJ,IAAI,eAERI,IAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAC,qCAAqC;AAAAE,MAAAA,QAAA,gBAClDH,IAAA,CAAA,KAAA,EAAA;QACEC,SAAS,EAAEC,IAAI,CACb,4CAA4C,EAC5CL,aAAa,IAAI,oDAAoD,CACrE;AAAAM,QAAAA,QAAA,gBAEFC,GAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,UAAU;AAAAE,UAAAA,QAAA,EAAEV;AAAK,SAAM,CACtC,EAACC,IAAI,gBACHU,GAAA,CAAA,MAAA,EAAA;AAAMH,UAAAA,SAAS,EAAC,oEAAoE;AAAAE,UAAAA,QAAA,EACjFT;SACG,CAAC,GACL,IAAI;AAAA,OACL,CAEL,EAACC,WAAW,gBACVS,GAAA,CAAA,KAAA,EAAA;QACEH,SAAS,EAAEC,IAAI,CACb,oEAAoE,EACpEL,aAAa,IACX,kGAAkG,CACpG;AAAAM,QAAAA,QAAA,EAEDR;OACE,CAAC,GACJ,IAAI;AAAA,KACL,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var useEffectEvent = require('../../../../common/hooks/useEffectEvent.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function SelectInputOptionsContainer({
+  'aria-orientation': ariaOrientation,
+  'aria-activedescendant': ariaActiveDescendant,
+  role,
+  tabIndex,
+  onAriaActiveDescendantChange,
+  onKeyDown,
+  ...restProps
+}, ref) {
+  const handleAriaActiveDescendantChange = useEffectEvent.useEffectEvent(onAriaActiveDescendantChange);
+  React.useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    role: "none",
+    onKeyDown: event => {
+      // Prevent confirmation close without an active item
+      if (event.key === 'Enter' && ariaActiveDescendant == null) {
+        return;
+      }
+      // Required to make ListBox focusable
+      if (event.key === 'Tab') {
+        return;
+      }
+      // Prevent absorbing Escape early
+      if (event.key === 'Escape') {
+        onKeyDown?.({
+          ...event,
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        });
+        return;
+      }
+      onKeyDown?.(event);
+    },
+    ...restProps
+  });
+});
+
+exports.SelectInputOptionsContainer = SelectInputOptionsContainer;
+//# sourceMappingURL=SelectInputOptionsContainer.js.map

package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOptionsContainer.js","sources":["../../../../../src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx"],"sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport { useEffectEvent } from '../../../../common/hooks/useEffectEvent';\n\nexport interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {\n  onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;\n}\n\n/**\n * Container component for SelectInput options.\n * Handles keyboard navigation and accessibility features.\n */\nexport const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContainer(\n  {\n    'aria-orientation': ariaOrientation,\n    'aria-activedescendant': ariaActiveDescendant,\n    role,\n    tabIndex,\n    onAriaActiveDescendantChange,\n    onKeyDown,\n    ...restProps\n  }: SelectInputOptionsContainerProps,\n  ref: React.ForwardedRef<HTMLDivElement | null>,\n) {\n  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);\n  useEffect(() => {\n    handleAriaActiveDescendantChange(ariaActiveDescendant);\n  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"none\"\n      onKeyDown={(event) => {\n        // Prevent confirmation close without an active item\n        if (event.key === 'Enter' && ariaActiveDescendant == null) {\n          return;\n        }\n\n        // Required to make ListBox focusable\n        if (event.key === 'Tab') {\n          return;\n        }\n\n        // Prevent absorbing Escape early\n        if (event.key === 'Escape') {\n          onKeyDown?.({\n            ...event,\n            preventDefault: () => {},\n            stopPropagation: () => {},\n          });\n          return;\n        }\n\n        onKeyDown?.(event);\n      }}\n      {...restProps}\n    />\n  );\n});\n"],"names":["SelectInputOptionsContainer","forwardRef","ariaOrientation","ariaActiveDescendant","role","tabIndex","onAriaActiveDescendantChange","onKeyDown","restProps","ref","handleAriaActiveDescendantChange","useEffectEvent","useEffect","_jsx","event","key","preventDefault","stopPropagation"],"mappings":";;;;;;MAWaA,2BAA2B,gBAAGC,gBAAU,CAAC,SAASD,2BAA2BA,CACxF;AACE,EAAA,kBAAkB,EAAEE,eAAe;AACnC,EAAA,uBAAuB,EAAEC,oBAAoB;EAC7CC,IAAI;EACJC,QAAQ;EACRC,4BAA4B;EAC5BC,SAAS;EACT,GAAGC;AAAS,CACqB,EACnCC,GAA8C,EAAA;AAE9C,EAAA,MAAMC,gCAAgC,GAAGC,6BAAc,CAACL,4BAA4B,CAAC;AACrFM,EAAAA,eAAS,CAAC,MAAK;IACbF,gCAAgC,CAACP,oBAAoB,CAAC;AACxD,EAAA,CAAC,EAAE,CAACA,oBAAoB,EAAEO,gCAAgC,CAAC,CAAC;AAE5D,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,GAAG,EAAEA,GAAI;AACTL,IAAAA,IAAI,EAAC,MAAM;IACXG,SAAS,EAAGO,KAAK,IAAI;AACnB;MACA,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAIZ,oBAAoB,IAAI,IAAI,EAAE;AACzD,QAAA;AACF,MAAA;AAEA;AACA,MAAA,IAAIW,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;AACvB,QAAA;AACF,MAAA;AAEA;AACA,MAAA,IAAID,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;AAC1BR,QAAAA,SAAS,GAAG;AACV,UAAA,GAAGO,KAAK;AACRE,UAAAA,cAAc,EAAEA,MAAK,CAAE,CAAC;UACxBC,eAAe,EAAEA,MAAK,CAAE;AACzB,SAAA,CAAC;AACF,QAAA;AACF,MAAA;MAEAV,SAAS,GAAGO,KAAK,CAAC;IACpB,CAAE;IAAA,GACEN;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs

@@ -0,0 +1,46 @@
+import { forwardRef, useEffect } from 'react';
+import { useEffectEvent } from '../../../../common/hooks/useEffectEvent.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInputOptionsContainer({
+  'aria-orientation': ariaOrientation,
+  'aria-activedescendant': ariaActiveDescendant,
+  role,
+  tabIndex,
+  onAriaActiveDescendantChange,
+  onKeyDown,
+  ...restProps
+}, ref) {
+  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
+  useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    role: "none",
+    onKeyDown: event => {
+      // Prevent confirmation close without an active item
+      if (event.key === 'Enter' && ariaActiveDescendant == null) {
+        return;
+      }
+      // Required to make ListBox focusable
+      if (event.key === 'Tab') {
+        return;
+      }
+      // Prevent absorbing Escape early
+      if (event.key === 'Escape') {
+        onKeyDown?.({
+          ...event,
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        });
+        return;
+      }
+      onKeyDown?.(event);
+    },
+    ...restProps
+  });
+});
+
+export { SelectInputOptionsContainer };
+//# sourceMappingURL=SelectInputOptionsContainer.mjs.map

package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputOptionsContainer.mjs","sources":["../../../../../src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx"],"sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport { useEffectEvent } from '../../../../common/hooks/useEffectEvent';\n\nexport interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {\n  onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;\n}\n\n/**\n * Container component for SelectInput options.\n * Handles keyboard navigation and accessibility features.\n */\nexport const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContainer(\n  {\n    'aria-orientation': ariaOrientation,\n    'aria-activedescendant': ariaActiveDescendant,\n    role,\n    tabIndex,\n    onAriaActiveDescendantChange,\n    onKeyDown,\n    ...restProps\n  }: SelectInputOptionsContainerProps,\n  ref: React.ForwardedRef<HTMLDivElement | null>,\n) {\n  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);\n  useEffect(() => {\n    handleAriaActiveDescendantChange(ariaActiveDescendant);\n  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"none\"\n      onKeyDown={(event) => {\n        // Prevent confirmation close without an active item\n        if (event.key === 'Enter' && ariaActiveDescendant == null) {\n          return;\n        }\n\n        // Required to make ListBox focusable\n        if (event.key === 'Tab') {\n          return;\n        }\n\n        // Prevent absorbing Escape early\n        if (event.key === 'Escape') {\n          onKeyDown?.({\n            ...event,\n            preventDefault: () => {},\n            stopPropagation: () => {},\n          });\n          return;\n        }\n\n        onKeyDown?.(event);\n      }}\n      {...restProps}\n    />\n  );\n});\n"],"names":["SelectInputOptionsContainer","forwardRef","ariaOrientation","ariaActiveDescendant","role","tabIndex","onAriaActiveDescendantChange","onKeyDown","restProps","ref","handleAriaActiveDescendantChange","useEffectEvent","useEffect","_jsx","event","key","preventDefault","stopPropagation"],"mappings":";;;;MAWaA,2BAA2B,gBAAGC,UAAU,CAAC,SAASD,2BAA2BA,CACxF;AACE,EAAA,kBAAkB,EAAEE,eAAe;AACnC,EAAA,uBAAuB,EAAEC,oBAAoB;EAC7CC,IAAI;EACJC,QAAQ;EACRC,4BAA4B;EAC5BC,SAAS;EACT,GAAGC;AAAS,CACqB,EACnCC,GAA8C,EAAA;AAE9C,EAAA,MAAMC,gCAAgC,GAAGC,cAAc,CAACL,4BAA4B,CAAC;AACrFM,EAAAA,SAAS,CAAC,MAAK;IACbF,gCAAgC,CAACP,oBAAoB,CAAC;AACxD,EAAA,CAAC,EAAE,CAACA,oBAAoB,EAAEO,gCAAgC,CAAC,CAAC;AAE5D,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,GAAG,EAAEA,GAAI;AACTL,IAAAA,IAAI,EAAC,MAAM;IACXG,SAAS,EAAGO,KAAK,IAAI;AACnB;MACA,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAIZ,oBAAoB,IAAI,IAAI,EAAE;AACzD,QAAA;AACF,MAAA;AAEA;AACA,MAAA,IAAIW,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;AACvB,QAAA;AACF,MAAA;AAEA;AACA,MAAA,IAAID,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;AAC1BR,QAAAA,SAAS,GAAG;AACV,UAAA,GAAGO,KAAK;AACRE,UAAAA,cAAc,EAAEA,MAAK,CAAE,CAAC;UACxBC,eAAe,EAAEA,MAAK,CAAE;AACzB,SAAA,CAAC;AACF,QAAA;AACF,MAAA;MAEAV,SAAS,GAAGO,KAAK,CAAC;IACpB,CAAE;IAAA,GACEN;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}