@razorpay/blade 11.6.2 → 11.7.0

package/build/lib/web/development/components/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useCallback, useMemo, Children, cloneElement } from 'react';
+import { useState, Children, useCallback, useMemo, cloneElement } from 'react';
 import { AccordionContext } from './AccordionContext.js';
 import { MAX_WIDTH } from './styles.web.js';
 import '../Box/BaseBox/index.js';
@@ -17,7 +17,7 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 
-var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "testID"];
+var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "variant", "size", "testID"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var MIN_WIDTH = {
@@ -25,6 +25,49 @@ var MIN_WIDTH = {
   m: makeSize(size[360]),
   l: makeSize(size[360])
 };
+var getVariantStyles = function getVariantStyles(variant) {
+  if (variant === 'transparent') {
+    return {};
+  }
+  return {
+    backgroundColor: 'surface.background.gray.intense',
+    borderRadius: 'medium',
+    borderWidth: 'thinner',
+    borderColor: 'surface.border.gray.subtle'
+  };
+};
+
+/**
+ * # Accordion
+ *
+ * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.
+ *
+ * ## Usage
+ *
+ * ```jsx
+ * <Accordion>
+ *  <AccordionItem>
+ *    <AccordionItemHeader title="Title" />
+ *    <AccordionItemBody>
+ *      <Text color="surface.text.gray.subtle">
+ *        Hello this is accordion body content
+ *        </Text>
+ *     </AccordionItemBody>
+ *  </AccordionItem>
+ *  <AccordionItem>
+ *    <AccordionItemHeader title="Title" />
+ *    <AccordionItemBody>
+ *      <Text color="surface.text.gray.subtle">
+ *         Hello this is accordion body content
+ *      </Text>
+ *    </AccordionItemBody>
+ *  </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs
+ *
+ */
 var Accordion = function Accordion(_ref) {
   var defaultExpandedIndex = _ref.defaultExpandedIndex,
     expandedIndex = _ref.expandedIndex,
@@ -32,12 +75,17 @@ var Accordion = function Accordion(_ref) {
     _ref$showNumberPrefix = _ref.showNumberPrefix,
     showNumberPrefix = _ref$showNumberPrefix === void 0 ? false : _ref$showNumberPrefix,
     children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'transparent' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultExpandedIndex),
     _useState2 = _slicedToArray(_useState, 2),
     expandedAccordionItemIndex = _useState2[0],
     setExpandedAccordionItemIndex = _useState2[1];
+  var numberOfItems = Children.count(children);
   var handleExpandChange = useCallback(function (nextExpandedIndex) {
     if (typeof expandedIndex !== 'undefined') {
       // controlled
@@ -57,16 +105,19 @@ var Accordion = function Accordion(_ref) {
       expandedIndex: expandedIndex !== null && expandedIndex !== void 0 ? expandedIndex : expandedAccordionItemIndex,
       defaultExpandedIndex: defaultExpandedIndex,
       onExpandChange: handleExpandChange,
-      showNumberPrefix: showNumberPrefix
+      showNumberPrefix: showNumberPrefix,
+      variant: variant,
+      numberOfItems: numberOfItems,
+      size: size
     };
-  }, [expandedAccordionItemIndex, handleExpandChange, expandedIndex, showNumberPrefix, defaultExpandedIndex]);
+  }, [expandedAccordionItemIndex, handleExpandChange, expandedIndex, showNumberPrefix, defaultExpandedIndex, variant, numberOfItems, size]);
   return /*#__PURE__*/jsx(AccordionContext.Provider, {
     value: accordionContext,
     children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
       name: MetaConstants.Accordion,
       testID: testID
     })), getStyledProps(styledProps)), {}, {
-      children: /*#__PURE__*/jsx(BaseBox, {
+      children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getVariantStyles(variant)), {}, {
         minWidth: MIN_WIDTH,
         maxWidth: MAX_WIDTH,
         width: "100%",
@@ -76,7 +127,7 @@ var Accordion = function Accordion(_ref) {
             key: index
           });
         })
-      })
+      }))
     }))
   });
 };

package/build/lib/web/development/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState, cloneElement, Children } from 'react';\nimport type { AccordionContextState } from './AccordionContext';\nimport { AccordionContext } from './AccordionContext';\nimport { MAX_WIDTH } from './styles';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\ntype AccordionProps = {\n  /**\n   * Makes the passed item index expanded by default (uncontrolled)\n   */\n  defaultExpandedIndex?: number;\n\n  /**\n   * Expands the passed index (controlled), `-1` implies no expanded items\n   */\n  expandedIndex?: number;\n\n  /**\n   * Callback for change in any item's expanded state,\n   * `-1` implies no expanded items\n   */\n  onExpandChange?: ({ expandedIndex }: { expandedIndex: number }) => void;\n\n  /**\n   * Adds numeric index at the beginning of items\n   *\n   * @default false\n   */\n  showNumberPrefix?: boolean;\n\n  /**\n   * Accepts `AccordionItem` child nodes\n   */\n  children: ReactElement | ReactElement[];\n} & TestID &\n  StyledPropsBlade;\n\nconst MIN_WIDTH: BoxProps['minWidth'] = {\n  s: makeSize(size[200]),\n  m: makeSize(size[360]),\n  l: makeSize(size[360]),\n};\n\nconst Accordion = ({\n  defaultExpandedIndex,\n  expandedIndex,\n  onExpandChange,\n  showNumberPrefix = false,\n  children,\n  testID,\n  ...styledProps\n}: AccordionProps): ReactElement => {\n  const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number | undefined>(\n    defaultExpandedIndex,\n  );\n\n  const handleExpandChange = useCallback(\n    (nextExpandedIndex: number) => {\n      if (typeof expandedIndex !== 'undefined') {\n        // controlled\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      } else {\n        // uncontrolled\n        setExpandedAccordionItemIndex(nextExpandedIndex);\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      }\n    },\n    [onExpandChange, expandedIndex],\n  );\n\n  const accordionContext = useMemo<AccordionContextState>(\n    () => ({\n      expandedIndex: expandedIndex ?? expandedAccordionItemIndex,\n      defaultExpandedIndex,\n      onExpandChange: handleExpandChange,\n      showNumberPrefix,\n    }),\n    [\n      expandedAccordionItemIndex,\n      handleExpandChange,\n      expandedIndex,\n      showNumberPrefix,\n      defaultExpandedIndex,\n    ],\n  );\n\n  return (\n    <AccordionContext.Provider value={accordionContext}>\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <BaseBox minWidth={MIN_WIDTH} maxWidth={MAX_WIDTH} width=\"100%\">\n          {Children.map(children, (child, index) =>\n            cloneElement(child, { _index: index, key: index }),\n          )}\n        </BaseBox>\n      </BaseBox>\n    </AccordionContext.Provider>\n  );\n};\n\nexport type { AccordionProps };\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","size","m","l","Accordion","_ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","testID","styledProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","getStyledProps","minWidth","maxWidth","MAX_WIDTH","width","Children","map","child","index","cloneElement","_index","key"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState, cloneElement, Children } from 'react';\nimport type { AccordionContextState } from './AccordionContext';\nimport { AccordionContext } from './AccordionContext';\nimport { MAX_WIDTH } from './styles';\nimport type { AccordionProps } from './types';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { size as sizeTokens } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst MIN_WIDTH: BoxProps['minWidth'] = {\n  s: makeSize(sizeTokens[200]),\n  m: makeSize(sizeTokens[360]),\n  l: makeSize(sizeTokens[360]),\n};\n\nconst getVariantStyles = (variant: AccordionProps['variant']): BoxProps => {\n  if (variant === 'transparent') {\n    return {};\n  }\n\n  return {\n    backgroundColor: 'surface.background.gray.intense',\n    borderRadius: 'medium',\n    borderWidth: 'thinner',\n    borderColor: 'surface.border.gray.subtle',\n  };\n};\n\n/**\n * # Accordion\n *\n * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.\n *\n * ## Usage\n *\n * ```jsx\n * <Accordion>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *        Hello this is accordion body content\n *        </Text>\n *     </AccordionItemBody>\n *  </AccordionItem>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *         Hello this is accordion body content\n *      </Text>\n *    </AccordionItemBody>\n *  </AccordionItem>\n * </Accordion>\n * ```\n *\n * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs\n *\n */\nconst Accordion = ({\n  defaultExpandedIndex,\n  expandedIndex,\n  onExpandChange,\n  showNumberPrefix = false,\n  children,\n  variant = 'transparent',\n  size = 'large',\n  testID,\n  ...styledProps\n}: AccordionProps): ReactElement => {\n  const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number | undefined>(\n    defaultExpandedIndex,\n  );\n\n  const numberOfItems = Children.count(children);\n\n  const handleExpandChange = useCallback(\n    (nextExpandedIndex: number) => {\n      if (typeof expandedIndex !== 'undefined') {\n        // controlled\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      } else {\n        // uncontrolled\n        setExpandedAccordionItemIndex(nextExpandedIndex);\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      }\n    },\n    [onExpandChange, expandedIndex],\n  );\n\n  const accordionContext = useMemo<AccordionContextState>(\n    () => ({\n      expandedIndex: expandedIndex ?? expandedAccordionItemIndex,\n      defaultExpandedIndex,\n      onExpandChange: handleExpandChange,\n      showNumberPrefix,\n      variant,\n      numberOfItems,\n      size,\n    }),\n    [\n      expandedAccordionItemIndex,\n      handleExpandChange,\n      expandedIndex,\n      showNumberPrefix,\n      defaultExpandedIndex,\n      variant,\n      numberOfItems,\n      size,\n    ],\n  );\n\n  return (\n    <AccordionContext.Provider value={accordionContext}>\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <BaseBox\n          {...getVariantStyles(variant)}\n          minWidth={MIN_WIDTH}\n          maxWidth={MAX_WIDTH}\n          width=\"100%\"\n        >\n          {Children.map(children, (child, index) =>\n            cloneElement(child, { _index: index, key: index }),\n          )}\n        </BaseBox>\n      </BaseBox>\n    </AccordionContext.Provider>\n  );\n};\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","Accordion","_ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","getStyledProps","minWidth","maxWidth","MAX_WIDTH","width","map","child","index","cloneElement","_index","key"],"mappings":"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"}

package/build/lib/web/development/components/Accordion/AccordionButton.web.js

@@ -1,11 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { StyledAccordionButton } from './StyledAccordionButton.web.js';
 import { useAccordion } from './AccordionContext.js';
+import { AccordionItemHeader } from './AccordionItemHeader.js';
 import '../Box/BaseBox/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../Typography/index.js';
 import { useCollapsible } from '../Collapsible/CollapsibleContext.js';
-import { CollapsibleChevronIcon } from '../Collapsible/CollapsibleChevronIcon.web.js';
 import '../../utils/makeAccessible/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/logger/index.js';
@@ -23,31 +23,37 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _AccordionButton = function _AccordionButton(_ref) {
   var index = _ref.index,
     Icon = _ref.icon,
-    children = _ref.children;
+    title = _ref.title,
+    isDeprecatedAPI = _ref.isDeprecatedAPI,
+    header = _ref.header,
+    isDisabled = _ref.isDisabled;
   var _useCollapsible = useCollapsible(),
     onExpandChange = _useCollapsible.onExpandChange,
     isExpanded = _useCollapsible.isExpanded,
     collapsibleBodyId = _useCollapsible.collapsibleBodyId;
   var _useAccordion = useAccordion(),
     showNumberPrefix = _useAccordion.showNumberPrefix,
-    expandedIndex = _useAccordion.expandedIndex;
+    expandedIndex = _useAccordion.expandedIndex,
+    size = _useAccordion.size;
   var toggleCollapse = function toggleCollapse() {
     return onExpandChange(!isExpanded);
   };
   var onClick = function onClick() {
     return toggleCollapse();
   };
-  var _index = typeof index === 'number' && showNumberPrefix ? /*#__PURE__*/jsxs(Text, {
-    size: "large",
+  var _index = typeof index === 'number' && showNumberPrefix ?
+  /*#__PURE__*/
+  // we have to add -2px margin to align the number with title of BaseHeader
+  jsxs(Text, {
+    size: size,
     weight: "semibold",
-    marginRight: "spacing.2",
+    marginTop: "-2px",
     as: "span",
     children: [index + 1, "."]
   }) : null;
   var _icon = Icon && /*#__PURE__*/jsx(Icon, {
-    size: "medium",
-    color: "surface.icon.gray.muted",
-    marginRight: "spacing.3",
+    size: size,
+    color: "surface.icon.gray.normal",
     marginY: "spacing.2"
   });
   if (true) {
@@ -66,8 +72,9 @@ var _AccordionButton = function _AccordionButton(_ref) {
     level: 3
   })), {}, {
     width: "100%",
-    children: /*#__PURE__*/jsxs(StyledAccordionButton, _objectSpread(_objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsx(StyledAccordionButton, _objectSpread(_objectSpread(_objectSpread({
       isExpanded: isItemExpanded,
+      disabled: isDisabled,
       onClick: onClick
     }, makeAccessible({
       expanded: isItemExpanded,
@@ -75,21 +82,10 @@ var _AccordionButton = function _AccordionButton(_ref) {
     })), metaAttribute({
       name: MetaConstants.AccordionButton
     })), {}, {
-      children: [/*#__PURE__*/jsxs(BaseBox, {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "flex-start",
-        marginRight: "spacing.4",
-        children: [_index, _icon, /*#__PURE__*/jsx(Text, {
-          size: "large",
-          weight: "semibold",
-          as: "span",
-          children: children
-        })]
-      }), /*#__PURE__*/jsx(CollapsibleChevronIcon, {
-        color: "currentColor",
-        size: "large"
-      })]
+      children: isDeprecatedAPI ? /*#__PURE__*/jsx(AccordionItemHeader, {
+        title: title,
+        leading: _icon !== null && _icon !== void 0 ? _icon : _index
+      }) : header
     }))
   }));
 };

package/build/lib/web/development/components/Accordion/AccordionButton.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst _AccordionButton = ({ index, icon: Icon, children }: AccordionButtonProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n  const { showNumberPrefix, expandedIndex } = useAccordion();\n\n  const toggleCollapse = (): void => onExpandChange(!isExpanded);\n  const onClick = (): void => toggleCollapse();\n\n  const _index =\n    typeof index === 'number' && showNumberPrefix ? (\n      <Text size=\"large\" weight=\"semibold\" marginRight=\"spacing.2\" as=\"span\">\n        {index + 1}.\n      </Text>\n    ) : null;\n\n  const _icon = Icon && (\n    <Icon\n      size=\"medium\"\n      color=\"surface.icon.gray.muted\"\n      marginRight=\"spacing.3\"\n      marginY=\"spacing.2\"\n    />\n  );\n\n  if (__DEV__) {\n    if (_index && _icon) {\n      throwBladeError({\n        message: \"showNumberPrefix and icon shouldn't be used together\",\n        moduleName: 'Accordion',\n      });\n    }\n  }\n\n  const isItemExpanded = expandedIndex === index;\n\n  return (\n    <BaseBox\n      // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n      {...makeAccessible({ role: 'heading', level: 3 })}\n      width=\"100%\"\n    >\n      <StyledAccordionButton\n        isExpanded={isItemExpanded}\n        onClick={onClick}\n        {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n        {...metaAttribute({ name: MetaConstants.AccordionButton })}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"flex-start\" marginRight=\"spacing.4\">\n          {_index}\n          {_icon}\n          <Text size=\"large\" weight=\"semibold\" as=\"span\">\n            {children}\n          </Text>\n        </BaseBox>\n        <CollapsibleChevronIcon color=\"currentColor\" size=\"large\" />\n      </StyledAccordionButton>\n    </BaseBox>\n  );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n  componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","children","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","toggleCollapse","onClick","_index","_jsxs","Text","size","weight","marginRight","as","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","width","StyledAccordionButton","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","display","flexDirection","alignItems","CollapsibleChevronIcon","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { AccordionItemHeader } from './AccordionItemHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst _AccordionButton = ({\n  index,\n  icon: Icon,\n  title,\n  isDeprecatedAPI,\n  header,\n  isDisabled,\n}: AccordionButtonProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n  const { showNumberPrefix, expandedIndex, size } = useAccordion();\n\n  const toggleCollapse = (): void => onExpandChange(!isExpanded);\n  const onClick = (): void => toggleCollapse();\n\n  const _index =\n    typeof index === 'number' && showNumberPrefix ? (\n      // we have to add -2px margin to align the number with title of BaseHeader\n      <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n        {index + 1}.\n      </Text>\n    ) : null;\n\n  const _icon = Icon && <Icon size={size} color=\"surface.icon.gray.normal\" marginY=\"spacing.2\" />;\n\n  if (__DEV__) {\n    if (_index && _icon) {\n      throwBladeError({\n        message: \"showNumberPrefix and icon shouldn't be used together\",\n        moduleName: 'Accordion',\n      });\n    }\n  }\n\n  const isItemExpanded = expandedIndex === index;\n\n  return (\n    <BaseBox\n      // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n      {...makeAccessible({ role: 'heading', level: 3 })}\n      width=\"100%\"\n    >\n      <StyledAccordionButton\n        isExpanded={isItemExpanded}\n        disabled={isDisabled}\n        onClick={onClick}\n        {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n        {...metaAttribute({ name: MetaConstants.AccordionButton })}\n      >\n        {isDeprecatedAPI ? <AccordionItemHeader title={title} leading={_icon ?? _index} /> : header}\n      </StyledAccordionButton>\n    </BaseBox>\n  );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n  componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","title","isDeprecatedAPI","header","isDisabled","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","size","toggleCollapse","onClick","_index","_jsxs","Text","weight","marginTop","as","children","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","width","StyledAccordionButton","disabled","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","AccordionItemHeader","leading","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAOoB;AAAA,EAAA,IANxCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACCC,IAAI,GAAAF,IAAA,CAAVG,IAAI;IACJC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,eAAe,GAAAL,IAAA,CAAfK,eAAe;IACfC,MAAM,GAAAN,IAAA,CAANM,MAAM;IACNC,UAAU,GAAAP,IAAA,CAAVO,UAAU,CAAA;AAEV,EAAA,IAAAC,eAAA,GAA0DC,cAAc,EAAE;IAAlEC,cAAc,GAAAF,eAAA,CAAdE,cAAc;IAAEC,UAAU,GAAAH,eAAA,CAAVG,UAAU;IAAEC,iBAAiB,GAAAJ,eAAA,CAAjBI,iBAAiB,CAAA;AACrD,EAAA,IAAAC,aAAA,GAAkDC,YAAY,EAAE;IAAxDC,gBAAgB,GAAAF,aAAA,CAAhBE,gBAAgB;IAAEC,aAAa,GAAAH,aAAA,CAAbG,aAAa;IAAEC,IAAI,GAAAJ,aAAA,CAAJI,IAAI,CAAA;AAE7C,EAAA,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,GAAA;AAAA,IAAA,OAAeR,cAAc,CAAC,CAACC,UAAU,CAAC,CAAA;AAAA,GAAA,CAAA;AAC9D,EAAA,IAAMQ,OAAO,GAAG,SAAVA,OAAOA,GAAA;IAAA,OAAeD,cAAc,EAAE,CAAA;AAAA,GAAA,CAAA;AAE5C,EAAA,IAAME,MAAM,GACV,OAAOnB,KAAK,KAAK,QAAQ,IAAIc,gBAAgB;AAAA;AAC3C;AACAM,EAAAA,IAAA,CAACC,IAAI,EAAA;AAACL,IAAAA,IAAI,EAAEA,IAAK;AAACM,IAAAA,MAAM,EAAC,UAAU;AAACC,IAAAA,SAAS,EAAC,MAAM;AAACC,IAAAA,EAAE,EAAC,MAAM;AAAAC,IAAAA,QAAA,EAC3DzB,CAAAA,KAAK,GAAG,CAAC,EAAC,GACb,CAAA;GAAM,CAAC,GACL,IAAI,CAAA;AAEV,EAAA,IAAM0B,KAAK,GAAGzB,IAAI,iBAAI0B,GAAA,CAAC1B,IAAI,EAAA;AAACe,IAAAA,IAAI,EAAEA,IAAK;AAACY,IAAAA,KAAK,EAAC,0BAA0B;AAACC,IAAAA,OAAO,EAAC,WAAA;AAAW,GAAE,CAAC,CAAA;AAE/F,EAAA,IAAI,IAAO,EAAE;IACX,IAAIV,MAAM,IAAIO,KAAK,EAAE;AACnBI,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,sDAAsD;AAC/DC,QAAAA,UAAU,EAAE,WAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AAEA,EAAA,IAAMC,cAAc,GAAGlB,aAAa,KAAKf,KAAK,CAAA;AAE9C,EAAA,oBACE2B,GAAA,CAACO,OAAAA;AACC;AAAA,IAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACIC,cAAc,CAAC;AAAEC,IAAAA,IAAI,EAAE,SAAS;AAAEC,IAAAA,KAAK,EAAE,CAAA;AAAE,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACjDC,IAAAA,KAAK,EAAC,MAAM;IAAAd,QAAA,eAEZE,GAAA,CAACa,qBAAqB,EAAAL,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACpBzB,MAAAA,UAAU,EAAEuB,cAAe;AAC3BQ,MAAAA,QAAQ,EAAEnC,UAAW;AACrBY,MAAAA,OAAO,EAAEA,OAAAA;AAAQ,KAAA,EACbkB,cAAc,CAAC;AAAEM,MAAAA,QAAQ,EAAET,cAAc;AAAEU,MAAAA,QAAQ,EAAEhC,iBAAAA;KAAmB,CAAC,CACzEiC,EAAAA,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACC,eAAAA;AAAgB,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAtB,MAAAA,QAAA,EAEzDrB,eAAe,gBAAGuB,GAAA,CAACqB,mBAAmB,EAAA;AAAC7C,QAAAA,KAAK,EAAEA,KAAM;AAAC8C,QAAAA,OAAO,EAAEvB,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIP,MAAAA;AAAO,OAAE,CAAC,GAAGd,MAAAA;KAChE,CAAA,CAAA;AAAC,GAAA,CACjB,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAM0C,eAAe,gBAAGG,wBAAwB,CAACpD,gBAAgB,EAAE;EACjEqD,WAAW,EAAEL,aAAa,CAACC,eAAAA;AAC7B,CAAC;;;;"}

package/build/lib/web/development/components/Accordion/AccordionContext.js

@@ -3,6 +3,9 @@ import '../../utils/logger/index.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 
 var AccordionContext = /*#__PURE__*/createContext(null);
+var AccordionItemContext = /*#__PURE__*/createContext({
+  index: undefined
+});
 var useAccordion = function useAccordion() {
   var accordionContext = useContext(AccordionContext);
   if (true) {
@@ -15,6 +18,18 @@ var useAccordion = function useAccordion() {
   }
   return accordionContext;
 };
+var useAccordionItemIndex = function useAccordionItemIndex() {
+  var accordionItemContext = useContext(AccordionItemContext);
+  if (true) {
+    if (!accordionItemContext) {
+      throwBladeError({
+        message: 'AccordionItem* components should be only used within AccordionItem',
+        moduleName: 'AccordionContext'
+      });
+    }
+  }
+  return accordionItemContext;
+};
 
-export { AccordionContext, useAccordion };
+export { AccordionContext, AccordionItemContext, useAccordion, useAccordionItemIndex };
 //# sourceMappingURL=AccordionContext.js.map

package/build/lib/web/development/components/Accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sources":["../../../../../../src/components/Accordion/AccordionContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { throwBladeError } from '~utils/logger';\n\ntype AccordionContextState = {\n  expandedIndex?: number;\n  defaultExpandedIndex?: number;\n  onExpandChange: (expandedIndex: number) => void;\n  showNumberPrefix: boolean;\n};\n\nconst AccordionContext = createContext<AccordionContextState | null>(null);\n\nconst useAccordion = (): AccordionContextState => {\n  const accordionContext = useContext(AccordionContext);\n  if (__DEV__) {\n    if (!accordionContext) {\n      throwBladeError({\n        message: 'useAccordion should be only used within AccordionContext',\n        moduleName: 'AccordionContext',\n      });\n    }\n  }\n  return accordionContext!;\n};\n\nexport type { AccordionContextState };\nexport { AccordionContext, useAccordion };\n"],"names":["AccordionContext","createContext","useAccordion","accordionContext","useContext","throwBladeError","message","moduleName"],"mappings":";;;;AAUA,IAAMA,gBAAgB,gBAAGC,aAAa,CAA+B,IAAI,EAAC;AAE1E,IAAMC,YAAY,GAAG,SAAfA,YAAYA,GAAgC;AAChD,EAAA,IAAMC,gBAAgB,GAAGC,UAAU,CAACJ,gBAAgB,CAAC,CAAA;AACrD,EAAA,IAAI,IAAO,EAAE;IACX,IAAI,CAACG,gBAAgB,EAAE;AACrBE,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,0DAA0D;AACnEC,QAAAA,UAAU,EAAE,kBAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AACA,EAAA,OAAOJ,gBAAgB,CAAA;AACzB;;;;"}
+{"version":3,"file":"AccordionContext.js","sources":["../../../../../../src/components/Accordion/AccordionContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { AccordionProps } from './types';\nimport { throwBladeError } from '~utils/logger';\n\ntype AccordionContextState = {\n  expandedIndex?: number;\n  defaultExpandedIndex?: number;\n  onExpandChange: (expandedIndex: number) => void;\n  showNumberPrefix: boolean;\n  variant: AccordionProps['variant'];\n  numberOfItems: number;\n  size: NonNullable<AccordionProps['size']>;\n};\n\ntype AccordionItemContextState = {\n  index?: number;\n  isDisabled?: boolean;\n};\n\nconst AccordionContext = createContext<AccordionContextState | null>(null);\nconst AccordionItemContext = createContext<AccordionItemContextState>({\n  index: undefined,\n});\n\nconst useAccordion = (): AccordionContextState => {\n  const accordionContext = useContext(AccordionContext);\n  if (__DEV__) {\n    if (!accordionContext) {\n      throwBladeError({\n        message: 'useAccordion should be only used within AccordionContext',\n        moduleName: 'AccordionContext',\n      });\n    }\n  }\n  return accordionContext!;\n};\n\nconst useAccordionItemIndex = (): AccordionItemContextState => {\n  const accordionItemContext = useContext(AccordionItemContext);\n  if (__DEV__) {\n    if (!accordionItemContext) {\n      throwBladeError({\n        message: 'AccordionItem* components should be only used within AccordionItem',\n        moduleName: 'AccordionContext',\n      });\n    }\n  }\n  return accordionItemContext;\n};\n\nexport type { AccordionContextState };\nexport { AccordionContext, useAccordion, AccordionItemContext, useAccordionItemIndex };\n"],"names":["AccordionContext","createContext","AccordionItemContext","index","undefined","useAccordion","accordionContext","useContext","throwBladeError","message","moduleName","useAccordionItemIndex","accordionItemContext"],"mappings":";;;;AAmBA,IAAMA,gBAAgB,gBAAGC,aAAa,CAA+B,IAAI,EAAC;AACpEC,IAAAA,oBAAoB,gBAAGD,aAAa,CAA4B;AACpEE,EAAAA,KAAK,EAAEC,SAAAA;AACT,CAAC,EAAC;AAEF,IAAMC,YAAY,GAAG,SAAfA,YAAYA,GAAgC;AAChD,EAAA,IAAMC,gBAAgB,GAAGC,UAAU,CAACP,gBAAgB,CAAC,CAAA;AACrD,EAAA,IAAI,IAAO,EAAE;IACX,IAAI,CAACM,gBAAgB,EAAE;AACrBE,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,0DAA0D;AACnEC,QAAAA,UAAU,EAAE,kBAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AACA,EAAA,OAAOJ,gBAAgB,CAAA;AACzB,EAAC;AAED,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAqBA,GAAoC;AAC7D,EAAA,IAAMC,oBAAoB,GAAGL,UAAU,CAACL,oBAAoB,CAAC,CAAA;AAC7D,EAAA,IAAI,IAAO,EAAE;IACX,IAAI,CAACU,oBAAoB,EAAE;AACzBJ,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,oEAAoE;AAC7EC,QAAAA,UAAU,EAAE,kBAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AACA,EAAA,OAAOE,oBAAoB,CAAA;AAC7B;;;;"}

package/build/lib/web/development/components/Accordion/AccordionItem.js

@@ -1,62 +1,63 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
 import { AccordionButton } from './AccordionButton.web.js';
-import { useAccordion } from './AccordionContext.js';
+import { useAccordion, AccordionItemContext } from './AccordionContext.js';
+import { AccordionItemBody } from './AccordionItemBody.js';
+import { componentIds } from './componentIds.js';
 import '../Divider/index.js';
 import '../Box/BaseBox/index.js';
-import '../Typography/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/index.js';
 import { Collapsible } from '../Collapsible/Collapsible.js';
 import '../Collapsible/index.js';
-import '../../utils/makeAccessible/index.js';
+import '../../utils/isValidAllowedChildren/index.js';
+import '../../utils/logger/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
-import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
-import { Text } from '../Typography/Text/Text.js';
-import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { CollapsibleBody } from '../Collapsible/CollapsibleBody.js';
+import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { Divider } from '../Divider/Divider.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var BLANK_SPACE = ' ';
-
-/**
- * On React Native if the `AccordionItem` has a lengthy description which renders a `Text` spanning multiple lines,
- * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).
- * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.
- *
- * Rendering a blank `Text` at the end seems to fix all this 🤯
- */
-var reactNativeMultilineTextOverflowFix =
-/*#__PURE__*/
-// make this hidden from screen readers
-jsx(BaseBox, _objectSpread(_objectSpread({}, makeAccessible({
-  hidden: true
-})), {}, {
-  children: /*#__PURE__*/jsx(Text, {
-    children: BLANK_SPACE
-  })
-}));
 var AccordionItem = function AccordionItem(_ref) {
   var title = _ref.title,
     description = _ref.description,
     icon = _ref.icon,
     children = _ref.children,
+    isDisabled = _ref.isDisabled,
     _index = _ref._index,
     testID = _ref.testID;
   var _useAccordion = useAccordion(),
     expandedIndex = _useAccordion.expandedIndex,
     onExpandChange = _useAccordion.onExpandChange,
-    defaultExpandedIndex = _useAccordion.defaultExpandedIndex;
+    defaultExpandedIndex = _useAccordion.defaultExpandedIndex,
+    variant = _useAccordion.variant,
+    numberOfItems = _useAccordion.numberOfItems;
   var isExpanded = expandedIndex === _index;
   var isDefaultExpanded = defaultExpandedIndex === _index;
-  var _description = description && /*#__PURE__*/jsx(Text, {
-    color: "interactive.text.gray.subtle",
-    children: description
-  });
+  var isDeprecatedAPI = Boolean(title) || Boolean(description) || Boolean(icon);
+  var _React$Children$toArr = React__default.Children.toArray(children),
+    _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
+    header = _React$Children$toArr2[0],
+    body = _React$Children$toArr2[1];
+  if (!isDeprecatedAPI) {
+    // Only doing validation in new API. Deprecated API allows everything as AccordionItem children
+    var headerComponentId = getComponentId(header);
+    var bodyComponentId = getComponentId(body);
+    if (headerComponentId !== componentIds.AccordionItemHeader && bodyComponentId !== componentIds.AccordionItemBody) {
+      throwBladeError({
+        message: 'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',
+        moduleName: 'AccordionItem'
+      });
+    }
+  }
+  var isLastItem = _index !== undefined && _index < numberOfItems - 1;
   var handleExpandChange = function handleExpandChange(_ref2) {
     var isExpanded = _ref2.isExpanded;
     if (isExpanded && typeof _index !== 'undefined') {
@@ -65,43 +66,42 @@ var AccordionItem = function AccordionItem(_ref) {
       onExpandChange(-1);
     }
   };
-  var collapsibleBodyContent = isReactNative() ? /*#__PURE__*/jsxs(BaseBox, {
-    marginX: "spacing.5",
-    children: [_description, /*#__PURE__*/jsx(BaseBox, {
-      marginTop: description && children ? 'spacing.5' : 'spacing.0',
-      children: children
-    }), reactNativeMultilineTextOverflowFix]
-  }) : /*#__PURE__*/jsxs(BaseBox, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "spacing.5",
-    marginBottom: "spacing.5",
-    marginX: "spacing.5",
-    children: [_description, children]
+  return /*#__PURE__*/jsx(AccordionItemContext.Provider, {
+    value: {
+      index: _index,
+      isDisabled: isDisabled
+    },
+    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
+      name: MetaConstants.AccordionItem,
+      testID: testID
+    })), {}, {
+      children: [/*#__PURE__*/jsxs(Collapsible, {
+        isExpanded: isExpanded,
+        defaultIsExpanded: isDefaultExpanded,
+        onExpandChange: handleExpandChange
+        // Accordion has its own width restrictions
+        ,
+        _shouldApplyWidthRestrictions: false,
+        children: [/*#__PURE__*/jsx(AccordionButton, {
+          index: _index,
+          icon: icon,
+          title: title,
+          header: header,
+          isDisabled: isDisabled,
+          isDeprecatedAPI: isDeprecatedAPI
+        }), /*#__PURE__*/jsx(CollapsibleBody
+        // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion
+        // In new API, AccordionItemBody takes 100% width to avoid issues like this - https://github.com/razorpay/blade/pull/1814
+        , {
+          width: isReactNative() || !isDeprecatedAPI ? '100%' : undefined,
+          children: isDeprecatedAPI ? /*#__PURE__*/jsx(AccordionItemBody, {
+            _description: description,
+            children: children
+          }) : body
+        })]
+      }), isLastItem || variant === 'transparent' ? /*#__PURE__*/jsx(Divider, {}) : null]
+    }))
   });
-  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
-    name: MetaConstants.AccordionItem,
-    testID: testID
-  })), {}, {
-    children: [/*#__PURE__*/jsxs(Collapsible, {
-      isExpanded: isExpanded,
-      defaultIsExpanded: isDefaultExpanded,
-      onExpandChange: handleExpandChange
-      // Accordion has its own width restrictions
-      ,
-      _shouldApplyWidthRestrictions: false,
-      children: [/*#__PURE__*/jsx(AccordionButton, {
-        index: _index,
-        icon: icon,
-        children: title
-      }), /*#__PURE__*/jsx(CollapsibleBody
-      // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion
-      , {
-        width: isReactNative() ? '100%' : undefined,
-        children: collapsibleBodyContent
-      })]
-    }), /*#__PURE__*/jsx(Divider, {})]
-  }));
 };
 
 export { AccordionItem };

package/build/lib/web/development/components/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { useAccordion } from './AccordionContext';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   */\n  title: string;\n\n  /**\n   * Body text content\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst BLANK_SPACE = ' ';\n\n/**\n * On React Native if the `AccordionItem` has a lengthy description which renders a `Text` spanning multiple lines,\n * it sometimes messes up the layout calculation (it thinks of multiline as a single line before flowing in the UI).\n * And during the expanding / collapsing animation, text reflows causing words to jump around across lines.\n *\n * Rendering a blank `Text` at the end seems to fix all this 🤯\n */\nconst reactNativeMultilineTextOverflowFix = (\n  // make this hidden from screen readers\n  <BaseBox {...makeAccessible({ hidden: true })}>\n    <Text>{BLANK_SPACE}</Text>\n  </BaseBox>\n);\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const { expandedIndex, onExpandChange, defaultExpandedIndex } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n\n  const _description = description && (\n    <Text color=\"interactive.text.gray.subtle\">{description}</Text>\n  );\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  const collapsibleBodyContent = isReactNative() ? (\n    <BaseBox marginX=\"spacing.5\">\n      {_description}\n      <BaseBox marginTop={description && children ? 'spacing.5' : 'spacing.0'}>{children}</BaseBox>\n      {reactNativeMultilineTextOverflowFix}\n    </BaseBox>\n  ) : (\n    <BaseBox\n      display=\"flex\"\n      flexDirection=\"column\"\n      gap=\"spacing.5\"\n      marginBottom=\"spacing.5\"\n      marginX=\"spacing.5\"\n    >\n      {_description}\n      {children}\n    </BaseBox>\n  );\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n      <Collapsible\n        isExpanded={isExpanded}\n        defaultIsExpanded={isDefaultExpanded}\n        onExpandChange={handleExpandChange}\n        // Accordion has its own width restrictions\n        _shouldApplyWidthRestrictions={false}\n      >\n        <AccordionButton index={_index} icon={icon}>\n          {title}\n        </AccordionButton>\n        <CollapsibleBody\n          // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n          width={isReactNative() ? '100%' : undefined}\n        >\n          {collapsibleBodyContent}\n        </CollapsibleBody>\n      </Collapsible>\n      <Divider />\n    </BaseBox>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["BLANK_SPACE","reactNativeMultilineTextOverflowFix","_jsx","BaseBox","_objectSpread","makeAccessible","hidden","children","Text","AccordionItem","_ref","title","description","icon","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","isExpanded","isDefaultExpanded","_description","color","handleExpandChange","_ref2","collapsibleBodyContent","isReactNative","_jsxs","marginX","marginTop","display","flexDirection","gap","marginBottom","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","AccordionButton","index","CollapsibleBody","width","undefined","Divider"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { AccordionItemContext, useAccordion } from './AccordionContext';\nimport { AccordionItemBody } from './AccordionItemBody';\nimport { componentIds } from './componentIds';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   *\n   * @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  title?: string;\n\n  /**\n   * Body text content\n   *\n   *  @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   *\n   * @deprecated Use `leading={<StarIcon size=\"large\" />}` on AccordionItemHeader instead\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode | ReactNode[];\n\n  /**\n   * Disabled state of the item\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  isDisabled,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const {\n    expandedIndex,\n    onExpandChange,\n    defaultExpandedIndex,\n    variant,\n    numberOfItems,\n  } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n  const isDeprecatedAPI = Boolean(title) || Boolean(description) || Boolean(icon);\n  const [header, body] = React.Children.toArray(children);\n\n  if (!isDeprecatedAPI) {\n    // Only doing validation in new API. Deprecated API allows everything as AccordionItem children\n    const headerComponentId = getComponentId(header);\n    const bodyComponentId = getComponentId(body);\n\n    if (\n      headerComponentId !== componentIds.AccordionItemHeader &&\n      bodyComponentId !== componentIds.AccordionItemBody\n    ) {\n      throwBladeError({\n        message:\n          'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',\n        moduleName: 'AccordionItem',\n      });\n    }\n  }\n\n  const isLastItem = _index !== undefined && _index < numberOfItems - 1;\n\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  return (\n    <AccordionItemContext.Provider\n      value={{\n        index: _index,\n        isDisabled,\n      }}\n    >\n      <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n        <Collapsible\n          isExpanded={isExpanded}\n          defaultIsExpanded={isDefaultExpanded}\n          onExpandChange={handleExpandChange}\n          // Accordion has its own width restrictions\n          _shouldApplyWidthRestrictions={false}\n        >\n          <AccordionButton\n            index={_index}\n            icon={icon}\n            title={title}\n            header={header}\n            isDisabled={isDisabled}\n            isDeprecatedAPI={isDeprecatedAPI}\n          />\n          <CollapsibleBody\n            // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n            // In new API, AccordionItemBody takes 100% width to avoid issues like this - https://github.com/razorpay/blade/pull/1814\n            width={isReactNative() || !isDeprecatedAPI ? '100%' : undefined}\n          >\n            {isDeprecatedAPI ? (\n              <AccordionItemBody _description={description}>{children}</AccordionItemBody>\n            ) : (\n              body\n            )}\n          </CollapsibleBody>\n        </Collapsible>\n        {isLastItem || variant === 'transparent' ? <Divider /> : null}\n      </BaseBox>\n    </AccordionItemContext.Provider>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["AccordionItem","_ref","title","description","icon","children","isDisabled","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","variant","numberOfItems","isExpanded","isDefaultExpanded","isDeprecatedAPI","Boolean","_React$Children$toArr","React","Children","toArray","_React$Children$toArr2","_slicedToArray","header","body","headerComponentId","getComponentId","bodyComponentId","componentIds","AccordionItemHeader","AccordionItemBody","throwBladeError","message","moduleName","isLastItem","undefined","handleExpandChange","_ref2","_jsx","AccordionItemContext","Provider","value","index","_jsxs","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","AccordionButton","CollapsibleBody","width","isReactNative","_description","Divider"],"mappings":"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"}