@razorpay/blade 12.56.1 → 12.57.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/native/components/Accordion/Accordion.js +1 -1
- package/build/lib/native/components/Accordion/Accordion.js.map +1 -1
- package/build/lib/web/development/components/Accordion/Accordion.js +5 -4
- package/build/lib/web/development/components/Accordion/Accordion.js.map +1 -1
- package/build/lib/web/production/components/Accordion/Accordion.js +5 -4
- package/build/lib/web/production/components/Accordion/Accordion.js.map +1 -1
- package/build/types/components/index.d.ts +747 -283
- package/build/types/components/index.native.d.ts +543 -205
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
|
16
16
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
17
17
|
import { jsx } from 'react/jsx-runtime';
|
|
18
18
|
|
|
19
|
-
var _excluded=["defaultExpandedIndex","expandedIndex","onExpandChange","showNumberPrefix","children","variant","size","maxWidth","testID"];var MIN_WIDTH={s:makeSize(size[200]),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'};};var _Accordion=function _Accordion(_ref,ref){var defaultExpandedIndex=_ref.defaultExpandedIndex,expandedIndex=_ref.expandedIndex,onExpandChange=_ref.onExpandChange,_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,maxWidth=_ref.maxWidth,testID=_ref.testID,rest=_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'){onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}else {setExpandedAccordionItemIndex(nextExpandedIndex);onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}},[onExpandChange,expandedIndex]);var accordionContext=useMemo(function(){return {expandedIndex:expandedIndex!=null?expandedIndex:expandedAccordionItemIndex,defaultExpandedIndex:defaultExpandedIndex,onExpandChange:handleExpandChange,showNumberPrefix:showNumberPrefix,variant:variant,numberOfItems:numberOfItems,size:size};},[expandedAccordionItemIndex,handleExpandChange,expandedIndex,showNumberPrefix,defaultExpandedIndex,variant,numberOfItems,size]);return jsx(AccordionContext.Provider,{value:accordionContext,children:jsx(BaseBox,Object.assign({ref:ref},metaAttribute({name:MetaConstants.Accordion,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsx(BaseBox,Object.assign({},getVariantStyles(variant),{
|
|
19
|
+
var _excluded=["defaultExpandedIndex","expandedIndex","onExpandChange","showNumberPrefix","children","variant","size","maxWidth","minWidth","testID"];var MIN_WIDTH={s:makeSize(size[200]),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'};};var _Accordion=function _Accordion(_ref,ref){var defaultExpandedIndex=_ref.defaultExpandedIndex,expandedIndex=_ref.expandedIndex,onExpandChange=_ref.onExpandChange,_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,maxWidth=_ref.maxWidth,minWidth=_ref.minWidth,testID=_ref.testID,rest=_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'){onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}else {setExpandedAccordionItemIndex(nextExpandedIndex);onExpandChange==null?void 0:onExpandChange({expandedIndex:nextExpandedIndex});}},[onExpandChange,expandedIndex]);var accordionContext=useMemo(function(){return {expandedIndex:expandedIndex!=null?expandedIndex:expandedAccordionItemIndex,defaultExpandedIndex:defaultExpandedIndex,onExpandChange:handleExpandChange,showNumberPrefix:showNumberPrefix,variant:variant,numberOfItems:numberOfItems,size:size};},[expandedAccordionItemIndex,handleExpandChange,expandedIndex,showNumberPrefix,defaultExpandedIndex,variant,numberOfItems,size]);return jsx(AccordionContext.Provider,{value:accordionContext,children:jsx(BaseBox,Object.assign({ref:ref,minWidth:minWidth!=null?minWidth:MIN_WIDTH,maxWidth:maxWidth!=null?maxWidth:MAX_WIDTH},metaAttribute({name:MetaConstants.Accordion,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsx(BaseBox,Object.assign({},getVariantStyles(variant),{width:"100%",children:Children.map(children,function(child,index){return cloneElement(child,{_index:index,key:index});})}))}))});};var Accordion=React__default.forwardRef(_Accordion);
|
|
20
20
|
|
|
21
21
|
export { Accordion };
|
|
22
22
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { 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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 {\n defaultExpandedIndex,\n expandedIndex,\n onExpandChange,\n showNumberPrefix = false,\n children,\n variant = 'transparent',\n size = 'large',\n maxWidth,\n testID,\n ...rest\n }: AccordionProps,\n ref: React.Ref<BladeElementRef>,\n): 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 ref={ref as never}\n {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { 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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 {\n defaultExpandedIndex,\n expandedIndex,\n onExpandChange,\n showNumberPrefix = false,\n children,\n variant = 'transparent',\n size = 'large',\n maxWidth,\n minWidth,\n testID,\n ...rest\n }: AccordionProps,\n ref: React.Ref<BladeElementRef>,\n): 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 ref={ref as never}\n minWidth={minWidth ?? MIN_WIDTH}\n maxWidth={maxWidth ?? MAX_WIDTH}\n {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox {...getVariantStyles(variant)} 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\nconst Accordion = React.forwardRef(_Accordion);\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","_Accordion","_ref","ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","maxWidth","minWidth","testID","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","Object","assign","MAX_WIDTH","metaAttribute","name","MetaConstants","Accordion","getStyledProps","makeAnalyticsAttribute","width","map","child","index","cloneElement","_index","key","React","forwardRef"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
|
19
19
|
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
|
|
20
20
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
21
21
|
|
|
22
|
-
var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "variant", "size", "maxWidth", "testID"];
|
|
22
|
+
var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "variant", "size", "maxWidth", "minWidth", "testID"];
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
24
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
25
|
var MIN_WIDTH = {
|
|
@@ -82,6 +82,7 @@ var _Accordion = function _Accordion(_ref, ref) {
|
|
|
82
82
|
_ref$size = _ref.size,
|
|
83
83
|
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
84
84
|
maxWidth = _ref.maxWidth,
|
|
85
|
+
minWidth = _ref.minWidth,
|
|
85
86
|
testID = _ref.testID,
|
|
86
87
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
87
88
|
var _useState = useState(defaultExpandedIndex),
|
|
@@ -117,14 +118,14 @@ var _Accordion = function _Accordion(_ref, ref) {
|
|
|
117
118
|
return /*#__PURE__*/jsx(AccordionContext.Provider, {
|
|
118
119
|
value: accordionContext,
|
|
119
120
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
120
|
-
ref: ref
|
|
121
|
+
ref: ref,
|
|
122
|
+
minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : MIN_WIDTH,
|
|
123
|
+
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : MAX_WIDTH
|
|
121
124
|
}, metaAttribute({
|
|
122
125
|
name: MetaConstants.Accordion,
|
|
123
126
|
testID: testID
|
|
124
127
|
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
|
|
125
128
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getVariantStyles(variant)), {}, {
|
|
126
|
-
minWidth: MIN_WIDTH,
|
|
127
|
-
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : MAX_WIDTH,
|
|
128
129
|
width: "100%",
|
|
129
130
|
children: Children.map(children, function (child, index) {
|
|
130
131
|
return /*#__PURE__*/cloneElement(child, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { 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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 {\n defaultExpandedIndex,\n expandedIndex,\n onExpandChange,\n showNumberPrefix = false,\n children,\n variant = 'transparent',\n size = 'large',\n maxWidth,\n testID,\n ...rest\n }: AccordionProps,\n ref: React.Ref<BladeElementRef>,\n): 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 ref={ref as never}\n {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { 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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 {\n defaultExpandedIndex,\n expandedIndex,\n onExpandChange,\n showNumberPrefix = false,\n children,\n variant = 'transparent',\n size = 'large',\n maxWidth,\n minWidth,\n testID,\n ...rest\n }: AccordionProps,\n ref: React.Ref<BladeElementRef>,\n): 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 ref={ref as never}\n minWidth={minWidth ?? MIN_WIDTH}\n maxWidth={maxWidth ?? MAX_WIDTH}\n {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox {...getVariantStyles(variant)} 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\nconst Accordion = React.forwardRef(_Accordion);\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","_Accordion","_ref","ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","maxWidth","minWidth","testID","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","MAX_WIDTH","metaAttribute","name","MetaConstants","Accordion","getStyledProps","makeAnalyticsAttribute","width","map","child","index","cloneElement","_index","key","React","forwardRef"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
|
|
|
19
19
|
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
|
|
20
20
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
21
21
|
|
|
22
|
-
var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "variant", "size", "maxWidth", "testID"];
|
|
22
|
+
var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "variant", "size", "maxWidth", "minWidth", "testID"];
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
24
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
25
|
var MIN_WIDTH = {
|
|
@@ -82,6 +82,7 @@ var _Accordion = function _Accordion(_ref, ref) {
|
|
|
82
82
|
_ref$size = _ref.size,
|
|
83
83
|
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
84
84
|
maxWidth = _ref.maxWidth,
|
|
85
|
+
minWidth = _ref.minWidth,
|
|
85
86
|
testID = _ref.testID,
|
|
86
87
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
87
88
|
var _useState = useState(defaultExpandedIndex),
|
|
@@ -117,14 +118,14 @@ var _Accordion = function _Accordion(_ref, ref) {
|
|
|
117
118
|
return /*#__PURE__*/jsx(AccordionContext.Provider, {
|
|
118
119
|
value: accordionContext,
|
|
119
120
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
120
|
-
ref: ref
|
|
121
|
+
ref: ref,
|
|
122
|
+
minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : MIN_WIDTH,
|
|
123
|
+
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : MAX_WIDTH
|
|
121
124
|
}, metaAttribute({
|
|
122
125
|
name: MetaConstants.Accordion,
|
|
123
126
|
testID: testID
|
|
124
127
|
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
|
|
125
128
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getVariantStyles(variant)), {}, {
|
|
126
|
-
minWidth: MIN_WIDTH,
|
|
127
|
-
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : MAX_WIDTH,
|
|
128
129
|
width: "100%",
|
|
129
130
|
children: Children.map(children, function (child, index) {
|
|
130
131
|
return /*#__PURE__*/cloneElement(child, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { 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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 {\n defaultExpandedIndex,\n expandedIndex,\n onExpandChange,\n showNumberPrefix = false,\n children,\n variant = 'transparent',\n size = 'large',\n maxWidth,\n testID,\n ...rest\n }: AccordionProps,\n ref: React.Ref<BladeElementRef>,\n): 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 ref={ref as never}\n {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { 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';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 {\n defaultExpandedIndex,\n expandedIndex,\n onExpandChange,\n showNumberPrefix = false,\n children,\n variant = 'transparent',\n size = 'large',\n maxWidth,\n minWidth,\n testID,\n ...rest\n }: AccordionProps,\n ref: React.Ref<BladeElementRef>,\n): 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 ref={ref as never}\n minWidth={minWidth ?? MIN_WIDTH}\n maxWidth={maxWidth ?? MAX_WIDTH}\n {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox {...getVariantStyles(variant)} 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\nconst Accordion = React.forwardRef(_Accordion);\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","_Accordion","_ref","ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","maxWidth","minWidth","testID","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","MAX_WIDTH","metaAttribute","name","MetaConstants","Accordion","getStyledProps","makeAnalyticsAttribute","width","map","child","index","cloneElement","_index","key","React","forwardRef"],"mappings":"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"}
|