npm - @razorpay/blade - Versions diffs - 12.49.7 → 12.50.0 - Mend

@razorpay/blade 12.49.7 → 12.50.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.

Files changed (26) hide show

package/build/lib/web/production/components/Box/Box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Box.js","sources":["../../../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React from 'react';\nimport BaseBox from './BaseBox';\nimport type { BoxProps, BoxRefType, MakeValueResponsive } from './BaseBox/types';\nimport { validBoxAsValues } from './BaseBox/types/propsTypes';\nimport type { KeysRequired } from '~utils/types';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n if (__DEV__) {\n if (\n !stringBackgroundColorValue.startsWith('surface.background') &&\n !stringBackgroundColorValue.startsWith('overlay.') &&\n !stringBackgroundColorValue.startsWith('feedback.background') &&\n stringBackgroundColorValue !== 'transparent'\n ) {\n throwBladeError({\n message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.\\`, and \\`overlay.\\` tokens with backgroundColor property but we received \\`${stringBackgroundColorValue}\\` instead.\\n\\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,\n moduleName: 'Box',\n });\n }\n }\n};\n\nconst validateBackgroundProp = (\n responsiveBackgroundColor: MakeValueResponsive<string \| undefined>,\n): void => {\n if (__DEV__) {\n if (responsiveBackgroundColor) {\n if (typeof responsiveBackgroundColor === 'string') {\n validateBackgroundString(responsiveBackgroundColor);\n return;\n }\n\n Object.values(responsiveBackgroundColor).forEach((backgroundColor) => {\n if (typeof backgroundColor === 'string') {\n validateBackgroundString(backgroundColor);\n }\n });\n }\n }\n};\n\n/*\n This function is to filter out any unexpected props passed by the user\n /\nconst makeBoxProps = (\n props: BoxProps,\n): KeysRequired<Omit<BoxProps, 'testID' \| 'id' \| '__brand__'>> => {\n return {\n // Layout\n display: props.display,\n overflow: props.overflow,\n overflowX: props.overflowX,\n overflowY: props.overflowY,\n whiteSpace: props.whiteSpace,\n height: props.height,\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n width: props.width,\n minWidth: props.minWidth,\n maxWidth: props.maxWidth,\n textAlign: props.textAlign,\n\n // Flex\n flex: props.flex,\n flexWrap: props.flexWrap,\n flexDirection: props.flexDirection,\n flexGrow: props.flexGrow,\n flexShrink: props.flexShrink,\n flexBasis: props.flexBasis,\n alignItems: props.alignItems,\n alignContent: props.alignContent,\n alignSelf: props.alignSelf,\n justifyItems: props.justifyItems,\n justifyContent: props.justifyContent,\n justifySelf: props.justifySelf,\n placeSelf: props.placeSelf,\n placeItems: props.placeItems,\n order: props.order,\n\n // Grid\n grid: props.grid,\n gridColumn: props.gridColumn,\n gridRow: props.gridRow,\n gridRowStart: props.gridRowStart,\n gridRowEnd: props.gridRowEnd,\n gridColumnStart: props.gridColumnStart,\n gridColumnEnd: props.gridColumnEnd,\n gridArea: props.gridArea,\n gridAutoFlow: props.gridAutoFlow,\n gridAutoRows: props.gridAutoRows,\n gridAutoColumns: props.gridAutoColumns,\n gridTemplate: props.gridTemplate,\n gridTemplateAreas: props.gridTemplateAreas,\n gridTemplateColumns: props.gridTemplateColumns,\n gridTemplateRows: props.gridTemplateRows,\n\n // Spacing\n padding: props.padding,\n paddingTop: props.paddingTop,\n paddingBottom: props.paddingBottom,\n paddingRight: props.paddingRight,\n paddingLeft: props.paddingLeft,\n paddingX: props.paddingX,\n paddingY: props.paddingY,\n margin: props.margin,\n marginBottom: props.marginBottom,\n marginTop: props.marginTop,\n marginRight: props.marginRight,\n marginLeft: props.marginLeft,\n marginX: props.marginX,\n marginY: props.marginY,\n gap: props.gap,\n rowGap: props.rowGap,\n columnGap: props.columnGap,\n\n // Position\n position: props.position,\n zIndex: props.zIndex,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n left: props.left,\n\n // Visual\n backgroundColor: props.backgroundColor,\n backgroundImage: props.backgroundImage,\n backgroundSize: props.backgroundSize,\n backgroundPosition: props.backgroundPosition,\n backgroundOrigin: props.backgroundOrigin,\n backgroundRepeat: props.backgroundRepeat,\n elevation: props.elevation,\n opacity: props.opacity,\n visibility: props.visibility,\n\n // Border\n borderWidth: props.borderWidth,\n borderColor: props.borderColor,\n borderStyle: props.borderStyle,\n borderTopWidth: props.borderTopWidth,\n borderTopColor: props.borderTopColor,\n borderTopStyle: props.borderTopStyle,\n borderRightWidth: props.borderRightWidth,\n borderRightColor: props.borderRightColor,\n borderRightStyle: props.borderRightStyle,\n borderBottomWidth: props.borderBottomWidth,\n borderBottomColor: props.borderBottomColor,\n borderBottomStyle: props.borderBottomStyle,\n borderLeftWidth: props.borderLeftWidth,\n borderLeftColor: props.borderLeftColor,\n borderLeftStyle: props.borderLeftStyle,\n borderRadius: props.borderRadius,\n borderTopLeftRadius: props.borderTopLeftRadius,\n borderTopRightRadius: props.borderTopRightRadius,\n borderBottomRightRadius: props.borderBottomRightRadius,\n borderBottomLeftRadius: props.borderBottomLeftRadius,\n\n // Polygon Support\n transform: props.transform,\n transformOrigin: props.transformOrigin,\n clipPath: props.clipPath,\n\n // callbacks\n onMouseEnter: props.onMouseEnter,\n onMouseLeave: props.onMouseLeave,\n onMouseOver: props.onMouseOver,\n onScroll: props.onScroll,\n\n // Drag and Drop\n draggable: props.draggable,\n onDragStart: props.onDragStart,\n onDragEnd: props.onDragEnd,\n onDragEnter: props.onDragEnter,\n onDragLeave: props.onDragLeave,\n onDragOver: props.onDragOver,\n onDrop: props.onDrop,\n\n pointerEvents: props.pointerEvents,\n children: props.children,\n tabIndex: props.tabIndex,\n as: isReactNative() ? undefined : props.as, // as is not supported on react-native\n };\n};\n\n/\n ## Box\n * \n * Box is the basic Layout component.\n \n \n * Box components supports most spacing CSS properties like `display`, `padding`, `flex`, `height`, `width`, etc.\n \n Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.\n * \n * ----\n * \n * ### Usage\n * \n * ```jsx\n * <Box display=\"flex\">\n * ```\n\n * #### Responsive Props\n \n ```jsx\n * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />\n * ```\n * \n * #### Margin and Padding Shorthands\n * \n * ```jsx\n * <Box padding={[\"spacing.3\", \"spacing.10\"]} />\n * ```\n \n ---\n * \n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}\n * \n */\nconst _Box: React.ForwardRefRenderFunction<BoxRefType, BoxProps> = (props, ref) => {\n React.useEffect(() => {\n if (__DEV__) {\n validateBackgroundProp(props.backgroundColor);\n }\n }, [props.backgroundColor]);\n\n React.useEffect(() => {\n if (__DEV__) {\n if (props.as) {\n if (isReactNative()) {\n throwBladeError({\n message: '`as` prop is not supported on React Native',\n moduleName: 'Box',\n });\n }\n\n if (!validBoxAsValues.includes(props.as)) {\n throwBladeError({\n message: `Invalid \\`as\\` prop value - ${props.as}. Only ${validBoxAsValues.join(\n ', ',\n )} are valid values`,\n moduleName: 'Box',\n });\n }\n }\n }\n }, [props.as]);\n\n return (\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={ref as any}\n id={props.id}\n {...metaAttribute({ name: MetaConstants.Box, testID: props.testID })}\n {...makeBoxProps(props)}\n {...makeAnalyticsAttribute(props)}\n />\n );\n};\n\nconst Box = assignWithoutSideEffects(React.forwardRef(_Box), {\n displayName: 'Box',\n componentId: 'Box',\n});\n\nexport { Box, makeBoxProps };\n"],"names":["validateBackgroundString","stringBackgroundColorValue","startsWith","throwBladeError","message","concat","moduleName","validateBackgroundProp","responsiveBackgroundColor","Object","values","forEach","backgroundColor","makeBoxProps","props","display","overflow","overflowX","overflowY","whiteSpace","height","minHeight","maxHeight","width","minWidth","maxWidth","textAlign","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingBottom","paddingRight","paddingLeft","paddingX","paddingY","margin","marginBottom","marginTop","marginRight","marginLeft","marginX","marginY","gap","rowGap","columnGap","position","zIndex","top","right","bottom","left","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","elevation","opacity","visibility","borderWidth","borderColor","borderStyle","borderTopWidth","borderTopColor","borderTopStyle","borderRightWidth","borderRightColor","borderRightStyle","borderBottomWidth","borderBottomColor","borderBottomStyle","borderLeftWidth","borderLeftColor","borderLeftStyle","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","transform","transformOrigin","clipPath","onMouseEnter","onMouseLeave","onMouseOver","onScroll","draggable","onDragStart","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDrop","pointerEvents","children","tabIndex","as","isReactNative","undefined","_Box","ref","React","useEffect","validBoxAsValues","includes","join","_jsx","BaseBox","_objectSpread","id","metaAttribute","name","MetaConstants","Box","testID","makeAnalyticsAttribute","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}
1	+ {"version":3,"file":"Box.js","sources":["../../../../../../src/components/Box/Box.tsx"],"sourcesContent":["import React from 'react';\nimport BaseBox from './BaseBox';\nimport type { BoxProps, BoxRefType, MakeValueResponsive } from './BaseBox/types';\nimport { validBoxAsValues } from './BaseBox/types/propsTypes';\nimport type { KeysRequired } from '~utils/types';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst validateBackgroundString = (stringBackgroundColorValue: string): void => {\n if (__DEV__) {\n if (\n !stringBackgroundColorValue.startsWith('surface.background') &&\n !stringBackgroundColorValue.startsWith('overlay.') &&\n !stringBackgroundColorValue.startsWith('feedback.background') &&\n stringBackgroundColorValue !== 'transparent'\n ) {\n throwBladeError({\n message: `Oops! Currently you can only use \\`transparent\\`, \\`surface.background.\\`, and \\`overlay.\\` tokens with backgroundColor property but we received \\`${stringBackgroundColorValue}\\` instead.\\n\\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss ✨`,\n moduleName: 'Box',\n });\n }\n }\n};\n\nconst validateBackgroundProp = (\n responsiveBackgroundColor: MakeValueResponsive<string \| undefined>,\n): void => {\n if (__DEV__) {\n if (responsiveBackgroundColor) {\n if (typeof responsiveBackgroundColor === 'string') {\n validateBackgroundString(responsiveBackgroundColor);\n return;\n }\n\n Object.values(responsiveBackgroundColor).forEach((backgroundColor) => {\n if (typeof backgroundColor === 'string') {\n validateBackgroundString(backgroundColor);\n }\n });\n }\n }\n};\n\n/*\n This function is to filter out any unexpected props passed by the user\n /\nconst makeBoxProps = (\n props: BoxProps,\n): KeysRequired<Omit<BoxProps, 'testID' \| 'id' \| '__brand__'>> => {\n return {\n // Layout\n display: props.display,\n overflow: props.overflow,\n overflowX: props.overflowX,\n overflowY: props.overflowY,\n whiteSpace: props.whiteSpace,\n height: props.height,\n minHeight: props.minHeight,\n maxHeight: props.maxHeight,\n width: props.width,\n minWidth: props.minWidth,\n maxWidth: props.maxWidth,\n textAlign: props.textAlign,\n\n // Flex\n flex: props.flex,\n flexWrap: props.flexWrap,\n flexDirection: props.flexDirection,\n flexGrow: props.flexGrow,\n flexShrink: props.flexShrink,\n flexBasis: props.flexBasis,\n alignItems: props.alignItems,\n alignContent: props.alignContent,\n alignSelf: props.alignSelf,\n justifyItems: props.justifyItems,\n justifyContent: props.justifyContent,\n justifySelf: props.justifySelf,\n placeSelf: props.placeSelf,\n placeItems: props.placeItems,\n order: props.order,\n\n // Grid\n grid: props.grid,\n gridColumn: props.gridColumn,\n gridRow: props.gridRow,\n gridRowStart: props.gridRowStart,\n gridRowEnd: props.gridRowEnd,\n gridColumnStart: props.gridColumnStart,\n gridColumnEnd: props.gridColumnEnd,\n gridArea: props.gridArea,\n gridAutoFlow: props.gridAutoFlow,\n gridAutoRows: props.gridAutoRows,\n gridAutoColumns: props.gridAutoColumns,\n gridTemplate: props.gridTemplate,\n gridTemplateAreas: props.gridTemplateAreas,\n gridTemplateColumns: props.gridTemplateColumns,\n gridTemplateRows: props.gridTemplateRows,\n\n // Spacing\n padding: props.padding,\n paddingTop: props.paddingTop,\n paddingBottom: props.paddingBottom,\n paddingRight: props.paddingRight,\n paddingLeft: props.paddingLeft,\n paddingX: props.paddingX,\n paddingY: props.paddingY,\n margin: props.margin,\n marginBottom: props.marginBottom,\n marginTop: props.marginTop,\n marginRight: props.marginRight,\n marginLeft: props.marginLeft,\n marginX: props.marginX,\n marginY: props.marginY,\n gap: props.gap,\n rowGap: props.rowGap,\n columnGap: props.columnGap,\n\n // Position\n position: props.position,\n zIndex: props.zIndex,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n left: props.left,\n\n // Visual\n backgroundColor: props.backgroundColor,\n backgroundImage: props.backgroundImage,\n backgroundSize: props.backgroundSize,\n backgroundPosition: props.backgroundPosition,\n backgroundOrigin: props.backgroundOrigin,\n backgroundRepeat: props.backgroundRepeat,\n elevation: props.elevation,\n opacity: props.opacity,\n visibility: props.visibility,\n backdropFilter: props.backdropFilter,\n\n // Border\n borderWidth: props.borderWidth,\n borderColor: props.borderColor,\n borderStyle: props.borderStyle,\n borderTopWidth: props.borderTopWidth,\n borderTopColor: props.borderTopColor,\n borderTopStyle: props.borderTopStyle,\n borderRightWidth: props.borderRightWidth,\n borderRightColor: props.borderRightColor,\n borderRightStyle: props.borderRightStyle,\n borderBottomWidth: props.borderBottomWidth,\n borderBottomColor: props.borderBottomColor,\n borderBottomStyle: props.borderBottomStyle,\n borderLeftWidth: props.borderLeftWidth,\n borderLeftColor: props.borderLeftColor,\n borderLeftStyle: props.borderLeftStyle,\n borderRadius: props.borderRadius,\n borderTopLeftRadius: props.borderTopLeftRadius,\n borderTopRightRadius: props.borderTopRightRadius,\n borderBottomRightRadius: props.borderBottomRightRadius,\n borderBottomLeftRadius: props.borderBottomLeftRadius,\n\n // Polygon Support\n transform: props.transform,\n transformOrigin: props.transformOrigin,\n clipPath: props.clipPath,\n\n // Animation\n transition: props.transition,\n\n // callbacks\n onMouseEnter: props.onMouseEnter,\n onMouseLeave: props.onMouseLeave,\n onMouseOver: props.onMouseOver,\n onScroll: props.onScroll,\n\n // Drag and Drop\n draggable: props.draggable,\n onDragStart: props.onDragStart,\n onDragEnd: props.onDragEnd,\n onDragEnter: props.onDragEnter,\n onDragLeave: props.onDragLeave,\n onDragOver: props.onDragOver,\n onDrop: props.onDrop,\n\n pointerEvents: props.pointerEvents,\n children: props.children,\n tabIndex: props.tabIndex,\n as: isReactNative() ? undefined : props.as, // as is not supported on react-native\n };\n};\n\n/\n ## Box\n * \n * Box is the basic Layout component.\n \n \n * Box components supports most spacing CSS properties like `display`, `padding`, `flex`, `height`, `width`, etc.\n \n Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.\n * \n * ----\n * \n * ### Usage\n * \n * ```jsx\n * <Box display=\"flex\">\n * ```\n\n * #### Responsive Props\n \n ```jsx\n * <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />\n * ```\n * \n * #### Margin and Padding Shorthands\n * \n * ```jsx\n * <Box padding={[\"spacing.3\", \"spacing.10\"]} />\n * ```\n \n ---\n * \n * Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}\n * \n */\nconst _Box: React.ForwardRefRenderFunction<BoxRefType, BoxProps> = (props, ref) => {\n React.useEffect(() => {\n if (__DEV__) {\n validateBackgroundProp(props.backgroundColor);\n }\n }, [props.backgroundColor]);\n\n React.useEffect(() => {\n if (__DEV__) {\n if (props.as) {\n if (isReactNative()) {\n throwBladeError({\n message: '`as` prop is not supported on React Native',\n moduleName: 'Box',\n });\n }\n\n if (!validBoxAsValues.includes(props.as)) {\n throwBladeError({\n message: `Invalid \\`as\\` prop value - ${props.as}. Only ${validBoxAsValues.join(\n ', ',\n )} are valid values`,\n moduleName: 'Box',\n });\n }\n }\n }\n }, [props.as]);\n\n return (\n <BaseBox\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={ref as any}\n id={props.id}\n {...metaAttribute({ name: MetaConstants.Box, testID: props.testID })}\n {...makeBoxProps(props)}\n {...makeAnalyticsAttribute(props)}\n />\n );\n};\n\nconst Box = assignWithoutSideEffects(React.forwardRef(_Box), {\n displayName: 'Box',\n componentId: 'Box',\n});\n\nexport { Box, makeBoxProps };\n"],"names":["validateBackgroundString","stringBackgroundColorValue","startsWith","throwBladeError","message","concat","moduleName","validateBackgroundProp","responsiveBackgroundColor","Object","values","forEach","backgroundColor","makeBoxProps","props","display","overflow","overflowX","overflowY","whiteSpace","height","minHeight","maxHeight","width","minWidth","maxWidth","textAlign","flex","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","grid","gridColumn","gridRow","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea","gridAutoFlow","gridAutoRows","gridAutoColumns","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","padding","paddingTop","paddingBottom","paddingRight","paddingLeft","paddingX","paddingY","margin","marginBottom","marginTop","marginRight","marginLeft","marginX","marginY","gap","rowGap","columnGap","position","zIndex","top","right","bottom","left","backgroundImage","backgroundSize","backgroundPosition","backgroundOrigin","backgroundRepeat","elevation","opacity","visibility","backdropFilter","borderWidth","borderColor","borderStyle","borderTopWidth","borderTopColor","borderTopStyle","borderRightWidth","borderRightColor","borderRightStyle","borderBottomWidth","borderBottomColor","borderBottomStyle","borderLeftWidth","borderLeftColor","borderLeftStyle","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","transform","transformOrigin","clipPath","transition","onMouseEnter","onMouseLeave","onMouseOver","onScroll","draggable","onDragStart","onDragEnd","onDragEnter","onDragLeave","onDragOver","onDrop","pointerEvents","children","tabIndex","as","isReactNative","undefined","_Box","ref","React","useEffect","validBoxAsValues","includes","join","_jsx","BaseBox","_objectSpread","id","metaAttribute","name","MetaConstants","Box","testID","makeAnalyticsAttribute","assignWithoutSideEffects","forwardRef","displayName","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js CHANGED Viewed

@@ -62,7 +62,7 @@ var StyledAnimatedBaseInputWrapper = /*#__PURE__*/styled(StyledBaseInputWrapper)
   displayName: "AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper",
   componentId: "e1vobd-1"
 })(function (props) {
-  return props.isDropdownTrigger && !props.isTableInputCell ? css(["", ";max-height:", ";"], props.transition, makeSize(getAnimatedBaseInputWrapperMaxHeight({
+  return props.isDropdownTrigger && !props.isTableInputCell ? css(["", ";max-height:", ";"], props.animationProps, makeSize(getAnimatedBaseInputWrapperMaxHeight({
     maxTagRows: props.maxTagRows,
     showAllTags: props.showAllTags,
     size: props.size
@@ -78,15 +78,15 @@ var _AnimatedBaseInputWrapper = function _AnimatedBaseInputWrapper(_ref, ref) {
   // Define the animation keyframes
   var expandAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(baseInputHeight[rest.size]), makeSize(baseInputWrapperMaxHeight[rest.size]));
   var collapseAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(baseInputWrapperMaxHeight[rest.size]), makeSize(baseInputHeight[rest.size]));
-  var expandTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], expandAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.entrance));
-  var collapseTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], collapseAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.exit));
-  var noTransition = /*#__PURE__*/css(["animation:none;"]);
+  var expandAnimationProps = /*#__PURE__*/css(["animation:", " ", " ", ";"], expandAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.entrance));
+  var collapseAnimationProps = /*#__PURE__*/css(["animation:", " ", " ", ";"], collapseAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.exit));
+  var noAnimationProps = /*#__PURE__*/css(["animation:none;"]);
   return /*#__PURE__*/jsx(StyledAnimatedBaseInputWrapper
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _objectSpread(_objectSpread({
     ref: ref
   }, rest), {}, {
-    transition: maxTagRows !== 'expandable' ? noTransition : showAllTags ? expandTransition : collapseTransition,
+    animationProps: maxTagRows !== 'expandable' ? noAnimationProps : showAllTags ? expandAnimationProps : collapseAnimationProps,
     height: rest.isTextArea && isDropdownTrigger ? makeSpace(((_rest$numberOfLines = rest.numberOfLines) !== null && _rest$numberOfLines !== void 0 ? _rest$numberOfLines : 0) * baseInputHeight[rest.size]) : undefined,
     cursor: rest.isTextArea && isDropdownTrigger ? 'text' : undefined,
     isDropdownTrigger: isDropdownTrigger,

package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnimatedBaseInputWrapper.web.js","sources":["../../../../../../../src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { BaseInputWrapperProps } from './types';\nimport {\n getAnimatedBaseInputWrapperMaxHeight,\n getInputBackgroundAndBorderStyles,\n} from './baseInputStyles';\nimport { baseInputHeight, baseInputWrapperMaxHeight } from './baseInputTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { motion } from '~tokens/global';\nimport { castWebType, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledBaseInputWrapper = styled(BaseBox)<\n Pick<\n BaseInputWrapperProps,\n \| 'currentInteraction'\n \| 'isDisabled'\n \| 'validationState'\n \| 'isTextArea'\n \| 'isDropdownTrigger'\n \| 'maxTagRows'\n \| 'isTableInputCell'\n >\n>((props) => ({\n ...getInputBackgroundAndBorderStyles({\n theme: props.theme,\n isFocused: props.currentInteraction === 'focus',\n isDisabled: props.isDisabled,\n validationState: props.validationState,\n isTextArea: props.isTextArea,\n isDropdownTrigger: props.isDropdownTrigger,\n isTableInputCell: props.isTableInputCell,\n }),\n '&:hover': {\n ...getInputBackgroundAndBorderStyles({\n theme: props.theme,\n isHovered: true,\n isFocused: props.currentInteraction === 'focus',\n isDisabled: props.isDisabled,\n validationState: props.validationState,\n isDropdownTrigger: props.isDropdownTrigger,\n isTextArea: props.isTextArea,\n isTableInputCell: props.isTableInputCell,\n }),\n transitionProperty: 'background-color',\n transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),\n transitionTimingFunction: castWebType(props.theme.motion.easing.standard),\n },\n ':focus-within': {\n ...getInputBackgroundAndBorderStyles({\n theme: props.theme,\n isFocused: props.currentInteraction === 'focus',\n isDisabled: props.isDisabled,\n validationState: props.validationState,\n isDropdownTrigger: props.isDropdownTrigger,\n isTextArea: props.isTextArea,\n isTableInputCell: props.isTableInputCell,\n }),\n },\n}));\n\n// Styled component with animation\nconst StyledAnimatedBaseInputWrapper = styled(StyledBaseInputWrapper)<{\n transition?: FlattenSimpleInterpolation;\n maxTagRows: BaseInputWrapperProps['maxTagRows'];\n showAllTags: BaseInputWrapperProps['showAllTags'];\n isDropdownTrigger: BaseInputWrapperProps['isDropdownTrigger'];\n size: NonNullable<BaseInputWrapperProps['size']>;\n}>((props) =>\n props.isDropdownTrigger && !props.isTableInputCell\n ? css`\n ${props.transition};\n max-height: ${makeSize(\n getAnimatedBaseInputWrapperMaxHeight({\n maxTagRows: props.maxTagRows,\n showAllTags: props.showAllTags,\n size: props.size,\n }),\n )};\n `\n : undefined,\n);\n\nconst _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<\n BladeElementRef,\n BaseInputWrapperProps & {\n showAllTags?: boolean;\n }\n> = (\n { showAllTags, setShowAllTagsWithAnimation, maxTagRows, isDropdownTrigger, ...rest },\n ref,\n): React.ReactElement => {\n // Define the animation keyframes\n const expandAnimation = keyframes`\nfrom {\n max-height: ${makeSize(baseInputHeight[rest.size])};\n}\nto {\n max-height: ${makeSize(baseInputWrapperMaxHeight[rest.size])};\n}\n`;\n\n const collapseAnimation = keyframes`\nfrom {\n max-height: ${makeSize(baseInputWrapperMaxHeight[rest.size])};\n}\nto {\n max-height: ${makeSize(baseInputHeight[rest.size])};\n}\n`;\n\n const expandTransition = css`\n animation: ${expandAnimation} ${makeMotionTime(motion.duration.quick)}\n ${String(motion.easing.entrance)};\n `;\n\n const collapseTransition = css`\n animation: ${collapseAnimation} ${makeMotionTime(motion.duration.quick)}\n ${String(motion.easing.exit)};\n `;\n\n const noTransition = css`\n animation: none;\n `;\n return (\n <StyledAnimatedBaseInputWrapper\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={ref as any}\n {...rest}\n transition={\n maxTagRows !== 'expandable'\n ? noTransition\n : showAllTags\n ? expandTransition\n : collapseTransition\n }\n height={\n rest.isTextArea && isDropdownTrigger\n ? makeSpace((rest.numberOfLines ?? 0) * baseInputHeight[rest.size])\n : undefined\n }\n cursor={rest.isTextArea && isDropdownTrigger ? 'text' : undefined}\n isDropdownTrigger={isDropdownTrigger}\n showAllTags={showAllTags}\n maxTagRows={maxTagRows}\n onAnimationEnd={(e) => {\n if (!showAllTags && e.animationName === collapseAnimation.getName()) {\n // Triggered for the collapse animation\n setShowAllTagsWithAnimation?.(false);\n }\n }}\n isTableInputCell={rest.isTableInputCell}\n className=\"__blade-base-input-wrapper\"\n />\n );\n};\n\nconst AnimatedBaseInputWrapper = React.forwardRef(_AnimatedBaseInputWrapper);\n\nexport { AnimatedBaseInputWrapper };\n"],"names":["StyledBaseInputWrapper","styled","BaseBox","withConfig","displayName","componentId","props","_objectSpread","getInputBackgroundAndBorderStyles","theme","isFocused","currentInteraction","isDisabled","validationState","isTextArea","isDropdownTrigger","isTableInputCell","isHovered","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","StyledAnimatedBaseInputWrapper","css","transition","makeSize","getAnimatedBaseInputWrapperMaxHeight","maxTagRows","showAllTags","size","undefined","_AnimatedBaseInputWrapper","_ref","ref","_rest$numberOfLines","setShowAllTagsWithAnimation","rest","_objectWithoutProperties","_excluded","expandAnimation","keyframes","baseInputHeight","baseInputWrapperMaxHeight","collapseAnimation","expandTransition","quick","String","entrance","collapseTransition","exit","noTransition","_jsx","height","makeSpace","numberOfLines","cursor","onAnimationEnd","e","animationName","getName","className","AnimatedBaseInputWrapper","React","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"AnimatedBaseInputWrapper.web.js","sources":["../../../../../../../src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { BaseInputWrapperProps } from './types';\nimport {\n getAnimatedBaseInputWrapperMaxHeight,\n getInputBackgroundAndBorderStyles,\n} from './baseInputStyles';\nimport { baseInputHeight, baseInputWrapperMaxHeight } from './baseInputTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { motion } from '~tokens/global';\nimport { castWebType, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledBaseInputWrapper = styled(BaseBox)<\n Pick<\n BaseInputWrapperProps,\n \| 'currentInteraction'\n \| 'isDisabled'\n \| 'validationState'\n \| 'isTextArea'\n \| 'isDropdownTrigger'\n \| 'maxTagRows'\n \| 'isTableInputCell'\n >\n>((props) => ({\n ...getInputBackgroundAndBorderStyles({\n theme: props.theme,\n isFocused: props.currentInteraction === 'focus',\n isDisabled: props.isDisabled,\n validationState: props.validationState,\n isTextArea: props.isTextArea,\n isDropdownTrigger: props.isDropdownTrigger,\n isTableInputCell: props.isTableInputCell,\n }),\n '&:hover': {\n ...getInputBackgroundAndBorderStyles({\n theme: props.theme,\n isHovered: true,\n isFocused: props.currentInteraction === 'focus',\n isDisabled: props.isDisabled,\n validationState: props.validationState,\n isDropdownTrigger: props.isDropdownTrigger,\n isTextArea: props.isTextArea,\n isTableInputCell: props.isTableInputCell,\n }),\n transitionProperty: 'background-color',\n transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),\n transitionTimingFunction: castWebType(props.theme.motion.easing.standard),\n },\n ':focus-within': {\n ...getInputBackgroundAndBorderStyles({\n theme: props.theme,\n isFocused: props.currentInteraction === 'focus',\n isDisabled: props.isDisabled,\n validationState: props.validationState,\n isDropdownTrigger: props.isDropdownTrigger,\n isTextArea: props.isTextArea,\n isTableInputCell: props.isTableInputCell,\n }),\n },\n}));\n\n// Styled component with animation\nconst StyledAnimatedBaseInputWrapper = styled(StyledBaseInputWrapper)<{\n animationProps?: FlattenSimpleInterpolation;\n maxTagRows: BaseInputWrapperProps['maxTagRows'];\n showAllTags: BaseInputWrapperProps['showAllTags'];\n isDropdownTrigger: BaseInputWrapperProps['isDropdownTrigger'];\n size: NonNullable<BaseInputWrapperProps['size']>;\n}>((props) =>\n props.isDropdownTrigger && !props.isTableInputCell\n ? css`\n ${props.animationProps};\n max-height: ${makeSize(\n getAnimatedBaseInputWrapperMaxHeight({\n maxTagRows: props.maxTagRows,\n showAllTags: props.showAllTags,\n size: props.size,\n }),\n )};\n `\n : undefined,\n);\n\nconst _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<\n BladeElementRef,\n BaseInputWrapperProps & {\n showAllTags?: boolean;\n }\n> = (\n { showAllTags, setShowAllTagsWithAnimation, maxTagRows, isDropdownTrigger, ...rest },\n ref,\n): React.ReactElement => {\n // Define the animation keyframes\n const expandAnimation = keyframes`\nfrom {\n max-height: ${makeSize(baseInputHeight[rest.size])};\n}\nto {\n max-height: ${makeSize(baseInputWrapperMaxHeight[rest.size])};\n}\n`;\n\n const collapseAnimation = keyframes`\nfrom {\n max-height: ${makeSize(baseInputWrapperMaxHeight[rest.size])};\n}\nto {\n max-height: ${makeSize(baseInputHeight[rest.size])};\n}\n`;\n\n const expandAnimationProps = css`\n animation: ${expandAnimation} ${makeMotionTime(motion.duration.quick)}\n ${String(motion.easing.entrance)};\n `;\n\n const collapseAnimationProps = css`\n animation: ${collapseAnimation} ${makeMotionTime(motion.duration.quick)}\n ${String(motion.easing.exit)};\n `;\n\n const noAnimationProps = css`\n animation: none;\n `;\n return (\n <StyledAnimatedBaseInputWrapper\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={ref as any}\n {...rest}\n animationProps={\n maxTagRows !== 'expandable'\n ? noAnimationProps\n : showAllTags\n ? expandAnimationProps\n : collapseAnimationProps\n }\n height={\n rest.isTextArea && isDropdownTrigger\n ? makeSpace((rest.numberOfLines ?? 0) * baseInputHeight[rest.size])\n : undefined\n }\n cursor={rest.isTextArea && isDropdownTrigger ? 'text' : undefined}\n isDropdownTrigger={isDropdownTrigger}\n showAllTags={showAllTags}\n maxTagRows={maxTagRows}\n onAnimationEnd={(e) => {\n if (!showAllTags && e.animationName === collapseAnimation.getName()) {\n // Triggered for the collapse animation\n setShowAllTagsWithAnimation?.(false);\n }\n }}\n isTableInputCell={rest.isTableInputCell}\n className=\"__blade-base-input-wrapper\"\n />\n );\n};\n\nconst AnimatedBaseInputWrapper = React.forwardRef(_AnimatedBaseInputWrapper);\n\nexport { AnimatedBaseInputWrapper };\n"],"names":["StyledBaseInputWrapper","styled","BaseBox","withConfig","displayName","componentId","props","_objectSpread","getInputBackgroundAndBorderStyles","theme","isFocused","currentInteraction","isDisabled","validationState","isTextArea","isDropdownTrigger","isTableInputCell","isHovered","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","StyledAnimatedBaseInputWrapper","css","animationProps","makeSize","getAnimatedBaseInputWrapperMaxHeight","maxTagRows","showAllTags","size","undefined","_AnimatedBaseInputWrapper","_ref","ref","_rest$numberOfLines","setShowAllTagsWithAnimation","rest","_objectWithoutProperties","_excluded","expandAnimation","keyframes","baseInputHeight","baseInputWrapperMaxHeight","collapseAnimation","expandAnimationProps","quick","String","entrance","collapseAnimationProps","exit","noAnimationProps","_jsx","height","makeSpace","numberOfLines","cursor","onAnimationEnd","e","animationName","getName","className","AnimatedBaseInputWrapper","React","forwardRef"],"mappings":"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"}

package/build/lib/web/production/components/Tag/AnimatedTag.web.js CHANGED Viewed

@@ -17,7 +17,7 @@ var AnimatedTagContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "AnimatedTagweb__AnimatedTagContainer",
   componentId: "sc-1ypkpkt-0"
 })(function (props) {
-  return css(["", ";display:inline-block;opacity:", ";max-width:", ";flex-shrink:0;"], props.transition, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END);
+  return css(["", ";display:inline-block;opacity:", ";max-width:", ";flex-shrink:0;"], props.animationProps, props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END, props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END);
 });
 var AnimatedTag = function AnimatedTag(_ref) {
   var children = _ref.children,
@@ -33,8 +33,8 @@ var AnimatedTag = function AnimatedTag(_ref) {
     setIsTagVisible = _React$useState2[1];
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var hideTagTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagDissappearKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.exit));
-  var showTagTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagShowKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.entrance));
+  var hideTagAnimationProps = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagDissappearKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.exit));
+  var showTagAnimationProps = /*#__PURE__*/css(["animation:", " ", " ", ";"], tagShowKeyframe, makeMotionTime(theme.motion.duration.xquick), String(theme.motion.easing.entrance));
   return /*#__PURE__*/jsx(AnimatedTagContainer, {
     isVisible: isTagVisible,
     onAnimationEnd: function onAnimationEnd() {
@@ -45,7 +45,7 @@ var AnimatedTag = function AnimatedTag(_ref) {
         });
       }
     },
-    transition: isTagVisible ? showTagTransition : hideTagTransition,
+    animationProps: isTagVisible ? showTagAnimationProps : hideTagAnimationProps,
     children: /*#__PURE__*/jsx(Tag, {
       _isVirtuallyFocused: currentTagIndex === activeTagIndex,
       _isTagInsideInput: true,

package/build/lib/web/production/components/Tag/AnimatedTag.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n TAG_MAX_WIDTH_END,\n TAG_MAX_WIDTH_START,\n TAG_OPACITY_END,\n TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n 0% {\n opacity: ${TAG_OPACITY_START};\n max-width: ${TAG_MAX_WIDTH_START}\n }\n\n 100% {\n opacity: ${TAG_OPACITY_END};\n max-width: ${TAG_MAX_WIDTH_END};\n }\n`;\n\nconst tagShowKeyframe = keyframes`\n 0% {\n opacity: ${TAG_OPACITY_END};\n }\n\n 100% {\n opacity: ${TAG_OPACITY_START};\n }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n ~~transition~~: FlattenSimpleInterpolation;\n isVisible: boolean;\n}>(\n (props) => css`\n ${props.~~transition~~};\n display: inline-block;\n opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n max-width: ${props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END};\n flex-shrink: 0;\n `,\n);\n\nconst AnimatedTag = ({\n children,\n currentTagIndex,\n isDisabled,\n activeTagIndex,\n onDismiss,\n size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n const [isTagVisible, setIsTagVisible] = React.useState(true);\n const { theme } = useTheme();\n\n const ~~hideTagTransition~~ = css`\n animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n ${String(theme.motion.easing.exit)};\n `;\n\n const ~~showTagTransition~~ = css`\n animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n ${String(theme.motion.easing.entrance)};\n `;\n\n return (\n <AnimatedTagContainer\n isVisible={isTagVisible}\n onAnimationEnd={() => {\n if (!isTagVisible) {\n onDismiss({ tagIndex: currentTagIndex, tagName: children });\n }\n }}\n ~~transition~~={isTagVisible ? ~~showTagTransition~~ : ~~hideTagTransition~~}\n >\n <Tag\n _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n _isTagInsideInput={true}\n onDismiss={() => {\n setIsTagVisible(false);\n }}\n marginRight=\"spacing.3\"\n marginY=\"spacing.2\"\n isDisabled={isDisabled}\n size={size}\n >\n {children}\n </Tag>\n </AnimatedTagContainer>\n );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","~~transition~~","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","~~hideTagTransition~~","makeMotionTime","motion","duration","xquick","String","easing","exit","~~showTagTransition~~","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":";;;;;;;;;;;;;AAeA,IAAMA,qBAAqB,gBAAGC,SAAS,CAExBC,CAAAA,aAAAA,EAAAA,aAAAA,EAAAA,gBAAAA,EAAAA,aAAAA,EAAAA,IAAAA,CAAAA,EAAAA,iBAAiB,EACfC,mBAAmB,EAIrBC,eAAe,EACbC,iBAAiB,CAEjC,CAAA;AAED,IAAMC,eAAe,gBAAGL,SAAS,2CAElBG,eAAe,EAIfF,iBAAiB,CAE/B,CAAA;AAED,IAAMK,oBAAoB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAI1C,UAACC,KAAK,EAAA;EAAA,OAAKC,GAAG,2EACVD,KAAK,CAACE,~~UAAU~~,~~EAEPF~~,KAAK,CAACG,SAAS,GAAGd,iBAAiB,GAAGE,eAAe,EACnDS,KAAK,CAACG,SAAS,GAAGb,mBAAmB,GAAGE,iBAAiB,CAAA,CAAA;AAAA,CAEvE,CACF,CAAA;AAED,IAAMY,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAO2B;AAAA,EAAA,IAN1CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAAC,SAAA,GAAAN,IAAA,CACTO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAEf,EAAA,IAAAE,eAAA,GAAwCC,cAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAArDK,IAAAA,YAAY,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,gBAAA,CAAA,CAAA,CAAA,CAAA;AACpC,EAAA,IAAAI,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EAEb,IAAMC,~~iBAAiB~~,gBAAGtB,GAAG,~~CACdd~~,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAAA,qBAAqB,EAAIqC,cAAc,CAACF,KAAK,CAACG,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EAC9EC,MAAM,CAACN,KAAK,CAACG,MAAM,CAACI,MAAM,CAACC,IAAI,CAAC,CACrC,CAAA;EAED,IAAMC,~~iBAAiB~~,gBAAG9B,GAAG,~~CACdR~~,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,EAAAA,eAAe,EAAI+B,cAAc,CAACF,KAAK,CAACG,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EACxEC,MAAM,CAACN,KAAK,CAACG,MAAM,CAACI,MAAM,CAACG,QAAQ,CAAC,CACzC,CAAA;EAED,oBACEC,GAAA,CAACvC,oBAAoB,EAAA;AACnBS,IAAAA,SAAS,EAAEe,YAAa;AACxBgB,IAAAA,cAAc,EAAE,SAAhBA,cAAcA,GAAQ;MACpB,IAAI,CAAChB,YAAY,EAAE;AACjBR,QAAAA,SAAS,CAAC;AAAEyB,UAAAA,QAAQ,EAAE5B,eAAe;AAAE6B,UAAAA,OAAO,EAAE9B,QAAAA;AAAS,SAAC,CAAC,CAAA;AAC7D,OAAA;KACA;AACFJ,IAAAA,~~UAAU~~,EAAEgB,YAAY,GAAGa,~~iBAAiB~~,GAAGR,~~iBAAkB~~;IAAAjB,QAAA,~~eAEjE2B~~,GAAA,CAACI,GAAG,EAAA;MACFC,mBAAmB,EAAE/B,eAAe,KAAKE,cAAe;AACxD8B,MAAAA,iBAAiB,EAAE,IAAK;AACxB7B,MAAAA,SAAS,EAAE,SAAXA,SAASA,GAAQ;QACfS,eAAe,CAAC,KAAK,CAAC,CAAA;OACtB;AACFqB,MAAAA,WAAW,EAAC,WAAW;AACvBC,MAAAA,OAAO,EAAC,WAAW;AACnBjC,MAAAA,UAAU,EAAEA,UAAW;AACvBI,MAAAA,IAAI,EAAEA,IAAK;AAAAN,MAAAA,QAAA,EAEVA,QAAAA;KACE,CAAA;AAAC,GACc,CAAC,CAAA;AAE3B;;;;"}
1	+ {"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n TAG_MAX_WIDTH_END,\n TAG_MAX_WIDTH_START,\n TAG_OPACITY_END,\n TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n 0% {\n opacity: ${TAG_OPACITY_START};\n max-width: ${TAG_MAX_WIDTH_START}\n }\n\n 100% {\n opacity: ${TAG_OPACITY_END};\n max-width: ${TAG_MAX_WIDTH_END};\n }\n`;\n\nconst tagShowKeyframe = keyframes`\n 0% {\n opacity: ${TAG_OPACITY_END};\n }\n\n 100% {\n opacity: ${TAG_OPACITY_START};\n }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n animationProps: FlattenSimpleInterpolation;\n isVisible: boolean;\n}>(\n (props) => css`\n ${props.animationProps};\n display: inline-block;\n opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n max-width: ${props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END};\n flex-shrink: 0;\n `,\n);\n\nconst AnimatedTag = ({\n children,\n currentTagIndex,\n isDisabled,\n activeTagIndex,\n onDismiss,\n size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n const [isTagVisible, setIsTagVisible] = React.useState(true);\n const { theme } = useTheme();\n\n const hideTagAnimationProps = css`\n animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n ${String(theme.motion.easing.exit)};\n `;\n\n const showTagAnimationProps = css`\n animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n ${String(theme.motion.easing.entrance)};\n `;\n\n return (\n <AnimatedTagContainer\n isVisible={isTagVisible}\n onAnimationEnd={() => {\n if (!isTagVisible) {\n onDismiss({ tagIndex: currentTagIndex, tagName: children });\n }\n }}\n animationProps={isTagVisible ? showTagAnimationProps : hideTagAnimationProps}\n >\n <Tag\n _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n _isTagInsideInput={true}\n onDismiss={() => {\n setIsTagVisible(false);\n }}\n marginRight=\"spacing.3\"\n marginY=\"spacing.2\"\n isDisabled={isDisabled}\n size={size}\n >\n {children}\n </Tag>\n </AnimatedTagContainer>\n );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","animationProps","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagAnimationProps","makeMotionTime","motion","duration","xquick","String","easing","exit","showTagAnimationProps","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}