@razorpay/blade 12.38.0 → 12.39.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/AccordionItem.js +1 -1
- package/build/lib/native/components/Accordion/AccordionItem.js.map +1 -1
- package/build/lib/native/components/Alert/Alert.js +2 -1
- package/build/lib/native/components/Alert/Alert.js.map +1 -1
- package/build/lib/native/components/Card/CardFooter.js +2 -1
- package/build/lib/native/components/Card/CardFooter.js.map +1 -1
- package/build/lib/native/components/Chip/Chip.js +1 -1
- package/build/lib/native/components/Chip/Chip.js.map +1 -1
- package/build/lib/native/components/Form/FormLabel.js +1 -1
- package/build/lib/native/components/Form/FormLabel.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInput.js +1 -1
- package/build/lib/native/components/Input/BaseInput/BaseInput.js.map +1 -1
- package/build/lib/native/components/Input/OTPInput/OTPInput.js +1 -1
- package/build/lib/native/components/Input/OTPInput/OTPInput.js.map +1 -1
- package/build/lib/native/components/Input/PasswordInput/PasswordInput.js +1 -1
- package/build/lib/native/components/Input/PasswordInput/PasswordInput.js.map +1 -1
- package/build/lib/native/components/Input/SearchInput/SearchInput.js +1 -1
- package/build/lib/native/components/Input/SearchInput/SearchInput.js.map +1 -1
- package/build/lib/native/components/Input/TextArea/TextArea.js +1 -1
- package/build/lib/native/components/Input/TextArea/TextArea.js.map +1 -1
- package/build/lib/native/components/Input/TextInput/TextInput.js +1 -1
- package/build/lib/native/components/Input/TextInput/TextInput.js.map +1 -1
- package/build/lib/native/components/QuickFilters/QuickFilter.js +1 -1
- package/build/lib/native/components/QuickFilters/QuickFilter.js.map +1 -1
- package/build/lib/native/utils/makeAnalyticsAttribute/makeAnalyticsConstants.js +4 -0
- package/build/lib/native/utils/makeAnalyticsAttribute/makeAnalyticsConstants.js.map +1 -0
- package/build/lib/web/development/components/Accordion/AccordionButton.web.js +5 -7
- package/build/lib/web/development/components/Accordion/AccordionButton.web.js.map +1 -1
- package/build/lib/web/development/components/Accordion/AccordionItem.js +7 -5
- package/build/lib/web/development/components/Accordion/AccordionItem.js.map +1 -1
- package/build/lib/web/development/components/Alert/Alert.js +2 -0
- package/build/lib/web/development/components/Alert/Alert.js.map +1 -1
- package/build/lib/web/development/components/Avatar/AvatarButton.js +3 -0
- package/build/lib/web/development/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/development/components/Card/CardFooter.js +3 -0
- package/build/lib/web/development/components/Card/CardFooter.js.map +1 -1
- package/build/lib/web/development/components/Chip/Chip.js +5 -5
- package/build/lib/web/development/components/Chip/Chip.js.map +1 -1
- package/build/lib/web/development/components/DatePicker/BaseDatePicker.web.js +6 -2
- package/build/lib/web/development/components/DatePicker/BaseDatePicker.web.js.map +1 -1
- package/build/lib/web/development/components/DatePicker/Calendar.web.js +4 -2
- package/build/lib/web/development/components/DatePicker/Calendar.web.js.map +1 -1
- package/build/lib/web/development/components/DatePicker/CalendarFooter.web.js +4 -0
- package/build/lib/web/development/components/DatePicker/CalendarFooter.web.js.map +1 -1
- package/build/lib/web/development/components/DatePicker/DateInput.web.js +10 -4
- package/build/lib/web/development/components/DatePicker/DateInput.web.js.map +1 -1
- package/build/lib/web/development/components/DatePicker/QuickSelection/PresetSideBar.web.js +1 -0
- package/build/lib/web/development/components/DatePicker/QuickSelection/PresetSideBar.web.js.map +1 -1
- package/build/lib/web/development/components/DatePicker/QuickSelection/QuickSelectionItem.web.js +2 -1
- package/build/lib/web/development/components/DatePicker/QuickSelection/QuickSelectionItem.web.js.map +1 -1
- package/build/lib/web/development/components/FileUpload/FileUploadItem.js +3 -0
- package/build/lib/web/development/components/FileUpload/FileUploadItem.js.map +1 -1
- package/build/lib/web/development/components/Form/FormLabel.js +24 -4
- package/build/lib/web/development/components/Form/FormLabel.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/BaseInput.js +6 -2
- package/build/lib/web/development/components/Input/BaseInput/BaseInput.js.map +1 -1
- package/build/lib/web/development/components/Input/OTPInput/OTPInput.js +5 -1
- package/build/lib/web/development/components/Input/OTPInput/OTPInput.js.map +1 -1
- package/build/lib/web/development/components/Input/PasswordInput/PasswordInput.js +5 -1
- package/build/lib/web/development/components/Input/PasswordInput/PasswordInput.js.map +1 -1
- package/build/lib/web/development/components/Input/PhoneNumberInput/PhoneNumberInput.web.js +5 -1
- package/build/lib/web/development/components/Input/PhoneNumberInput/PhoneNumberInput.web.js.map +1 -1
- package/build/lib/web/development/components/Input/SearchInput/SearchInput.js +5 -1
- package/build/lib/web/development/components/Input/SearchInput/SearchInput.js.map +1 -1
- package/build/lib/web/development/components/Input/TextArea/TextArea.js +5 -1
- package/build/lib/web/development/components/Input/TextArea/TextArea.js.map +1 -1
- package/build/lib/web/development/components/Input/TextInput/TextInput.js +5 -1
- package/build/lib/web/development/components/Input/TextInput/TextInput.js.map +1 -1
- package/build/lib/web/development/components/Modal/Modal.web.js +6 -7
- package/build/lib/web/development/components/Modal/Modal.web.js.map +1 -1
- package/build/lib/web/development/components/Preview/Preview.web.js +8 -7
- package/build/lib/web/development/components/Preview/Preview.web.js.map +1 -1
- package/build/lib/web/development/components/QuickFilters/QuickFilter.js +9 -7
- package/build/lib/web/development/components/QuickFilters/QuickFilter.js.map +1 -1
- package/build/lib/web/development/components/SpotlightPopoverTour/TourFooter.web.js +12 -2
- package/build/lib/web/development/components/SpotlightPopoverTour/TourFooter.web.js.map +1 -1
- package/build/lib/web/development/components/Table/Table.web.js +6 -3
- package/build/lib/web/development/components/Table/Table.web.js.map +1 -1
- package/build/lib/web/development/components/Table/TableBody.web.js +5 -3
- package/build/lib/web/development/components/Table/TableBody.web.js.map +1 -1
- package/build/lib/web/development/components/Table/TableHeader.web.js +4 -2
- package/build/lib/web/development/components/Table/TableHeader.web.js.map +1 -1
- package/build/lib/web/development/components/Table/TablePagination.web.js +12 -6
- package/build/lib/web/development/components/Table/TablePagination.web.js.map +1 -1
- package/build/lib/web/development/components/Table/TableToolbar.web.js +5 -8
- package/build/lib/web/development/components/Table/TableToolbar.web.js.map +1 -1
- package/build/lib/web/development/components/Toast/Toast.web.js +2 -0
- package/build/lib/web/development/components/Toast/Toast.web.js.map +1 -1
- package/build/lib/web/development/utils/makeAnalyticsAttribute/index.js +1 -0
- package/build/lib/web/development/utils/makeAnalyticsAttribute/index.js.map +1 -1
- package/build/lib/web/development/utils/makeAnalyticsAttribute/makeAnalyticsConstants.js +32 -0
- package/build/lib/web/development/utils/makeAnalyticsAttribute/makeAnalyticsConstants.js.map +1 -0
- package/build/lib/web/production/components/Accordion/AccordionButton.web.js +5 -7
- package/build/lib/web/production/components/Accordion/AccordionButton.web.js.map +1 -1
- package/build/lib/web/production/components/Accordion/AccordionItem.js +7 -5
- package/build/lib/web/production/components/Accordion/AccordionItem.js.map +1 -1
- package/build/lib/web/production/components/Alert/Alert.js +2 -0
- package/build/lib/web/production/components/Alert/Alert.js.map +1 -1
- package/build/lib/web/production/components/Avatar/AvatarButton.js +3 -0
- package/build/lib/web/production/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/production/components/Card/CardFooter.js +3 -0
- package/build/lib/web/production/components/Card/CardFooter.js.map +1 -1
- package/build/lib/web/production/components/Chip/Chip.js +5 -5
- package/build/lib/web/production/components/Chip/Chip.js.map +1 -1
- package/build/lib/web/production/components/DatePicker/BaseDatePicker.web.js +6 -2
- package/build/lib/web/production/components/DatePicker/BaseDatePicker.web.js.map +1 -1
- package/build/lib/web/production/components/DatePicker/Calendar.web.js +4 -2
- package/build/lib/web/production/components/DatePicker/Calendar.web.js.map +1 -1
- package/build/lib/web/production/components/DatePicker/CalendarFooter.web.js +4 -0
- package/build/lib/web/production/components/DatePicker/CalendarFooter.web.js.map +1 -1
- package/build/lib/web/production/components/DatePicker/DateInput.web.js +10 -4
- package/build/lib/web/production/components/DatePicker/DateInput.web.js.map +1 -1
- package/build/lib/web/production/components/DatePicker/QuickSelection/PresetSideBar.web.js +1 -0
- package/build/lib/web/production/components/DatePicker/QuickSelection/PresetSideBar.web.js.map +1 -1
- package/build/lib/web/production/components/DatePicker/QuickSelection/QuickSelectionItem.web.js +2 -1
- package/build/lib/web/production/components/DatePicker/QuickSelection/QuickSelectionItem.web.js.map +1 -1
- package/build/lib/web/production/components/FileUpload/FileUploadItem.js +3 -0
- package/build/lib/web/production/components/FileUpload/FileUploadItem.js.map +1 -1
- package/build/lib/web/production/components/Form/FormLabel.js +24 -4
- package/build/lib/web/production/components/Form/FormLabel.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/BaseInput.js +6 -2
- package/build/lib/web/production/components/Input/BaseInput/BaseInput.js.map +1 -1
- package/build/lib/web/production/components/Input/OTPInput/OTPInput.js +5 -1
- package/build/lib/web/production/components/Input/OTPInput/OTPInput.js.map +1 -1
- package/build/lib/web/production/components/Input/PasswordInput/PasswordInput.js +5 -1
- package/build/lib/web/production/components/Input/PasswordInput/PasswordInput.js.map +1 -1
- package/build/lib/web/production/components/Input/PhoneNumberInput/PhoneNumberInput.web.js +5 -1
- package/build/lib/web/production/components/Input/PhoneNumberInput/PhoneNumberInput.web.js.map +1 -1
- package/build/lib/web/production/components/Input/SearchInput/SearchInput.js +5 -1
- package/build/lib/web/production/components/Input/SearchInput/SearchInput.js.map +1 -1
- package/build/lib/web/production/components/Input/TextArea/TextArea.js +5 -1
- package/build/lib/web/production/components/Input/TextArea/TextArea.js.map +1 -1
- package/build/lib/web/production/components/Input/TextInput/TextInput.js +5 -1
- package/build/lib/web/production/components/Input/TextInput/TextInput.js.map +1 -1
- package/build/lib/web/production/components/Modal/Modal.web.js +6 -7
- package/build/lib/web/production/components/Modal/Modal.web.js.map +1 -1
- package/build/lib/web/production/components/Preview/Preview.web.js +8 -7
- package/build/lib/web/production/components/Preview/Preview.web.js.map +1 -1
- package/build/lib/web/production/components/QuickFilters/QuickFilter.js +9 -7
- package/build/lib/web/production/components/QuickFilters/QuickFilter.js.map +1 -1
- package/build/lib/web/production/components/SpotlightPopoverTour/TourFooter.web.js +12 -2
- package/build/lib/web/production/components/SpotlightPopoverTour/TourFooter.web.js.map +1 -1
- package/build/lib/web/production/components/Table/Table.web.js +6 -3
- package/build/lib/web/production/components/Table/Table.web.js.map +1 -1
- package/build/lib/web/production/components/Table/TableBody.web.js +5 -3
- package/build/lib/web/production/components/Table/TableBody.web.js.map +1 -1
- package/build/lib/web/production/components/Table/TableHeader.web.js +4 -2
- package/build/lib/web/production/components/Table/TableHeader.web.js.map +1 -1
- package/build/lib/web/production/components/Table/TablePagination.web.js +12 -6
- package/build/lib/web/production/components/Table/TablePagination.web.js.map +1 -1
- package/build/lib/web/production/components/Table/TableToolbar.web.js +5 -8
- package/build/lib/web/production/components/Table/TableToolbar.web.js.map +1 -1
- package/build/lib/web/production/components/Toast/Toast.web.js +2 -0
- package/build/lib/web/production/components/Toast/Toast.web.js.map +1 -1
- package/build/lib/web/production/utils/makeAnalyticsAttribute/index.js +1 -0
- package/build/lib/web/production/utils/makeAnalyticsAttribute/index.js.map +1 -1
- package/build/lib/web/production/utils/makeAnalyticsAttribute/makeAnalyticsConstants.js +32 -0
- package/build/lib/web/production/utils/makeAnalyticsAttribute/makeAnalyticsConstants.js.map +1 -0
- package/build/types/components/index.d.ts +29 -8
- package/build/types/components/index.native.d.ts +26 -7
- package/package.json +1 -1
|
@@ -21,7 +21,7 @@ import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowe
|
|
|
21
21
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
22
22
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
23
23
|
|
|
24
|
-
var _excluded=["title","description","icon","children","isDisabled","_index","testID"];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,rest=_objectWithoutProperties(_ref,_excluded);var _useAccordion=useAccordion(),expandedIndex=_useAccordion.expandedIndex,onExpandChange=_useAccordion.onExpandChange,defaultExpandedIndex=_useAccordion.defaultExpandedIndex,variant=_useAccordion.variant,numberOfItems=_useAccordion.numberOfItems;var isExpanded=expandedIndex===_index;var isDefaultExpanded=defaultExpandedIndex===_index;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){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'){onExpandChange(_index);}else {onExpandChange(-1);}};return jsx(AccordionItemContext.Provider,{value:{index:_index,isDisabled:isDisabled},children:jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItem,testID:testID}),
|
|
24
|
+
var _excluded=["title","description","icon","children","isDisabled","_index","testID"];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,rest=_objectWithoutProperties(_ref,_excluded);var _useAccordion=useAccordion(),expandedIndex=_useAccordion.expandedIndex,onExpandChange=_useAccordion.onExpandChange,defaultExpandedIndex=_useAccordion.defaultExpandedIndex,variant=_useAccordion.variant,numberOfItems=_useAccordion.numberOfItems;var isExpanded=expandedIndex===_index;var isDefaultExpanded=defaultExpandedIndex===_index;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){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'){onExpandChange(_index);}else {onExpandChange(-1);}};return jsx(AccordionItemContext.Provider,{value:{index:_index,isDisabled:isDisabled},children:jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItem,testID:testID}),{children:[jsxs(Collapsible,Object.assign({isExpanded:isExpanded,defaultIsExpanded:isDefaultExpanded,onExpandChange:handleExpandChange,_shouldApplyWidthRestrictions:false,_dangerouslyDisableValidations:true},makeAnalyticsAttribute(rest),{children:[jsx(AccordionButton,{index:_index,icon:icon,title:title,header:header,isDisabled:isDisabled,isDeprecatedAPI:isDeprecatedAPI}),jsx(CollapsibleBody,{width:isReactNative()||!isDeprecatedAPI?'100%':undefined,children:isDeprecatedAPI?jsx(AccordionItemBody,{_description:description,children:children}):body})]})),isLastItem||variant==='transparent'?jsx(Divider,{}):null]}))});};
|
|
25
25
|
|
|
26
26
|
export { AccordionItem };
|
|
27
27
|
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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, DataAnalyticsAttribute } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 DataAnalyticsAttribute;\n\nconst AccordionItem = ({\n title,\n description,\n icon,\n children,\n isDisabled,\n _index,\n testID,\n ...rest\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
|
|
1
|
+
{"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, DataAnalyticsAttribute } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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 DataAnalyticsAttribute;\n\nconst AccordionItem = ({\n title,\n description,\n icon,\n children,\n isDisabled,\n _index,\n testID,\n ...rest\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 _dangerouslyDisableValidations={true}\n // adding analytics attributes to Collapsible section\n {...makeAnalyticsAttribute(rest)}\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","rest","_objectWithoutProperties","_excluded","_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","Object","assign","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","_dangerouslyDisableValidations","makeAnalyticsAttribute","AccordionButton","CollapsibleBody","width","isReactNative","_description","Divider"],"mappings":"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"}
|
|
@@ -34,8 +34,9 @@ import BaseButton from '../Button/BaseButton/BaseButton.js';
|
|
|
34
34
|
import BaseLink from '../Link/BaseLink/BaseLink.js';
|
|
35
35
|
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
|
|
36
36
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
37
|
+
import { MAKE_ANALYTICS_CONSTANTS } from '../../utils/makeAnalyticsAttribute/makeAnalyticsConstants.js';
|
|
37
38
|
|
|
38
|
-
var _excluded=["description","title","isDismissible","onDismiss","emphasis","isFullWidth","color","actions","testID","icon"];var isReactNative=getPlatformType()==='react-native';var CloseButtonWrapper=isReactNative?BaseBox:Fragment;var intentIconMap={positive:CheckCircleIcon,negative:AlertOctagonIcon,information:InfoIcon,neutral:InfoIcon,notice:AlertTriangleIcon};var _Alert=function _Alert(_ref,ref){var description=_ref.description,title=_ref.title,_ref$isDismissible=_ref.isDismissible,isDismissible=_ref$isDismissible===void 0?true:_ref$isDismissible,onDismiss=_ref.onDismiss,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,actions=_ref.actions,testID=_ref.testID,icon=_ref.icon,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var isDesktop=matchedDeviceType==='desktop';var isMobile=!isDesktop;var Icon=icon!=null?icon:intentIconMap[color];var iconOffset='spacing.1';if(isReactNative){if(isFullWidth&&!title){iconOffset='spacing.1';}else if(!isFullWidth&&!title){iconOffset='spacing.0';}else if(!isFullWidth&&title){iconOffset='spacing.2';}}else if(isMobile){if(!isFullWidth&&title){iconOffset='spacing.2';}else if(isFullWidth&&!title){iconOffset='spacing.2';}}else if(isFullWidth){iconOffset='spacing.1';}var shouldCenterAlign=isFullWidth&&!title;var alignment='flex-start';if(!isFullWidth)alignment='flex-start';if(shouldCenterAlign)alignment='center';var leadingIcon=jsx(BaseBox,{display:"flex",alignSelf:alignment,marginTop:iconOffset,children:jsx(Icon,{color:emphasis==='intense'?'surface.icon.staticWhite.normal':`feedback.icon.${color}.${emphasis==='subtle'?'intense':'subtle'}`,size:"medium"})});var textColor=emphasis==='intense'?'surface.text.staticWhite.normal':'surface.text.gray.subtle';var _title=title?jsx(BaseBox,{marginBottom:"spacing.2",children:jsx(Text,{color:textColor,size:"medium",weight:"semibold",children:title})}):null;var _description=jsx(BaseBox,{marginTop:title||isReactNative?'spacing.0':'spacing.1',children:jsx(Text,{color:textColor,size:"small",children:description})});var primaryAction=actions!=null&&actions.primary?jsx(BaseBox,{marginRight:"spacing.5",display:isReactNative?castNativeType('flex'):castWebType('inline-flex'),children:jsx(BaseButton,{size:"small",onClick:actions.primary.onClick,color:emphasis==='intense'?'white':color,variant:"secondary",children:actions.primary.text})}):null;var secondaryActionParams=actions!=null&&actions.secondary?{onClick:actions.secondary.onClick}:null;if(actions!=null&&actions.secondary&&secondaryActionParams&&'href'in actions.secondary){secondaryActionParams.href=actions.secondary.href;secondaryActionParams.target=actions.secondary.target;secondaryActionParams.rel=actions.secondary.rel;}var secondaryAction=actions!=null&&actions.secondary?jsx(BaseBox,{marginRight:"spacing.4",display:isReactNative?'flex':'inline-flex',children:jsx(BaseLink,Object.assign({size:"small",color:emphasis==='intense'?'white':color},secondaryActionParams,{children:actions.secondary.text}))}):null;var showActionsHorizontal=isFullWidth&&isDesktop;var actionsHorizontal=showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(BaseBox,{flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var actionsVertical=!showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(BaseBox,{marginTop:"spacing.4",flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var onClickDismiss=function onClickDismiss(){if(onDismiss){onDismiss();}setIsVisible(false);};var closeButton=isDismissible?jsx(CloseButtonWrapper,{children:jsx(IconButton,{accessibilityLabel:"Dismiss alert",onClick:onClickDismiss,emphasis:emphasis==='intense'?'subtle':'intense',size:"large",icon:CloseIcon})}):null;var a11yProps=makeAccessible(Object.assign({role:isReactNative||color==='negative'||color==='notice'?'alert':'status'},color==='notice'&&{liveRegion:'polite'}));if(!isVisible){return null;}return jsx(BaseBox,Object.assign({ref:ref},a11yProps,metaAttribute({name:MetaConstants.Alert,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(StyledAlert,{color:color,emphasis:emphasis,isFullWidth:isFullWidth,isDesktop:isDesktop,textAlign:'left',children:[leadingIcon,jsxs(BaseBox,{flex:1,paddingLeft:isFullWidth?'spacing.4':'spacing.3',paddingRight:showActionsHorizontal?'spacing.4':'spacing.2',children:[_title,_description,actionsVertical]}),actionsHorizontal,closeButton]})}));};var Alert=forwardRef(_Alert);
|
|
39
|
+
var _excluded=["description","title","isDismissible","onDismiss","emphasis","isFullWidth","color","actions","testID","icon"];var isReactNative=getPlatformType()==='react-native';var CloseButtonWrapper=isReactNative?BaseBox:Fragment;var intentIconMap={positive:CheckCircleIcon,negative:AlertOctagonIcon,information:InfoIcon,neutral:InfoIcon,notice:AlertTriangleIcon};var _Alert=function _Alert(_ref,ref){var description=_ref.description,title=_ref.title,_ref$isDismissible=_ref.isDismissible,isDismissible=_ref$isDismissible===void 0?true:_ref$isDismissible,onDismiss=_ref.onDismiss,_ref$emphasis=_ref.emphasis,emphasis=_ref$emphasis===void 0?'subtle':_ref$emphasis,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,actions=_ref.actions,testID=_ref.testID,icon=_ref.icon,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var isDesktop=matchedDeviceType==='desktop';var isMobile=!isDesktop;var Icon=icon!=null?icon:intentIconMap[color];var iconOffset='spacing.1';if(isReactNative){if(isFullWidth&&!title){iconOffset='spacing.1';}else if(!isFullWidth&&!title){iconOffset='spacing.0';}else if(!isFullWidth&&title){iconOffset='spacing.2';}}else if(isMobile){if(!isFullWidth&&title){iconOffset='spacing.2';}else if(isFullWidth&&!title){iconOffset='spacing.2';}}else if(isFullWidth){iconOffset='spacing.1';}var shouldCenterAlign=isFullWidth&&!title;var alignment='flex-start';if(!isFullWidth)alignment='flex-start';if(shouldCenterAlign)alignment='center';var leadingIcon=jsx(BaseBox,{display:"flex",alignSelf:alignment,marginTop:iconOffset,children:jsx(Icon,{color:emphasis==='intense'?'surface.icon.staticWhite.normal':`feedback.icon.${color}.${emphasis==='subtle'?'intense':'subtle'}`,size:"medium"})});var textColor=emphasis==='intense'?'surface.text.staticWhite.normal':'surface.text.gray.subtle';var _title=title?jsx(BaseBox,{marginBottom:"spacing.2",children:jsx(Text,{color:textColor,size:"medium",weight:"semibold",children:title})}):null;var _description=jsx(BaseBox,{marginTop:title||isReactNative?'spacing.0':'spacing.1',children:jsx(Text,{color:textColor,size:"small",children:description})});var primaryAction=actions!=null&&actions.primary?jsx(BaseBox,{marginRight:"spacing.5",display:isReactNative?castNativeType('flex'):castWebType('inline-flex'),children:jsx(BaseButton,{size:"small",onClick:actions.primary.onClick,color:emphasis==='intense'?'white':color,variant:"secondary","data-analytics-name":MAKE_ANALYTICS_CONSTANTS.ALERT.PRIMARY_ACTION_BUTTON,children:actions.primary.text})}):null;var secondaryActionParams=actions!=null&&actions.secondary?{onClick:actions.secondary.onClick}:null;if(actions!=null&&actions.secondary&&secondaryActionParams&&'href'in actions.secondary){secondaryActionParams.href=actions.secondary.href;secondaryActionParams.target=actions.secondary.target;secondaryActionParams.rel=actions.secondary.rel;}var secondaryAction=actions!=null&&actions.secondary?jsx(BaseBox,{marginRight:"spacing.4",display:isReactNative?'flex':'inline-flex',children:jsx(BaseLink,Object.assign({size:"small",color:emphasis==='intense'?'white':color},secondaryActionParams,{children:actions.secondary.text}))}):null;var showActionsHorizontal=isFullWidth&&isDesktop;var actionsHorizontal=showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(BaseBox,{flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var actionsVertical=!showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(BaseBox,{marginTop:"spacing.4",flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var onClickDismiss=function onClickDismiss(){if(onDismiss){onDismiss();}setIsVisible(false);};var closeButton=isDismissible?jsx(CloseButtonWrapper,{children:jsx(IconButton,{accessibilityLabel:"Dismiss alert",onClick:onClickDismiss,emphasis:emphasis==='intense'?'subtle':'intense',size:"large",icon:CloseIcon})}):null;var a11yProps=makeAccessible(Object.assign({role:isReactNative||color==='negative'||color==='notice'?'alert':'status'},color==='notice'&&{liveRegion:'polite'}));if(!isVisible){return null;}return jsx(BaseBox,Object.assign({ref:ref},a11yProps,metaAttribute({name:MetaConstants.Alert,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(StyledAlert,{color:color,emphasis:emphasis,isFullWidth:isFullWidth,isDesktop:isDesktop,textAlign:'left',children:[leadingIcon,jsxs(BaseBox,{flex:1,paddingLeft:isFullWidth?'spacing.4':'spacing.3',paddingRight:showActionsHorizontal?'spacing.4':'spacing.2',children:[_title,_description,actionsVertical]}),actionsHorizontal,closeButton]})}));};var Alert=forwardRef(_Alert);
|
|
39
40
|
|
|
40
41
|
export { Alert };
|
|
41
42
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ReactChild, ReactElement } from 'react';\nimport React, { Fragment, useState, forwardRef } from 'react';\n\nimport { StyledAlert } from './StyledAlert';\nimport type { IconComponent } from '~components/Icons';\nimport {\n AlertOctagonIcon,\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoIcon,\n} from '~components/Icons';\nimport { castNativeType, castWebType, useBreakpoint, getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport BaseButton from '~components/Button/BaseButton';\nimport { BaseLink } from '~components/Link/BaseLink';\nimport type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';\nimport { useTheme } from '~components/BladeProvider';\nimport type {\n DataAnalyticsAttribute,\n BladeElementRef,\n DotNotationSpacingStringToken,\n TestID,\n} from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype PrimaryAction = {\n text: string;\n onClick: () => void;\n};\n\ntype SecondaryActionButton = {\n text: string;\n onClick: () => void;\n};\n\ntype SecondaryActionLinkButton = {\n text: string;\n href: string;\n onClick?: () => void;\n target?: string;\n /**\n * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`\n */\n rel?: string;\n};\n\ntype SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;\n\ntype AlertProps = {\n /**\n * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.\n */\n description: ReactChild;\n\n /**\n * A brief heading\n */\n title?: string;\n\n /**\n * Shows a dismiss button\n *\n * @default true\n */\n isDismissible?: boolean;\n\n /**\n * A callback when the dismiss button is clicked\n */\n onDismiss?: () => void;\n\n /**\n * Can be used to render custom icon\n */\n icon?: IconComponent;\n\n /**\n * Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.\n *\n * @default subtle\n */\n emphasis?: SubtleOrIntense;\n\n /**\n * Makes the Alert span the entire container width, instead of the default max width of `584px`.\n * This also makes the alert borderless, useful for creating full bleed layouts.\n *\n * @default false\n */\n isFullWidth?: boolean;\n\n /**\n * Sets the color tone\n */\n color?: FeedbackColors;\n\n /**\n * Renders a primary action button and a secondary action link button\n */\n actions?: {\n /**\n * Renders a button (should **always** be present if `secondary` action is being used)\n */\n primary?: PrimaryAction;\n /**\n * Renders a Link button\n */\n secondary?: SecondaryAction;\n };\n} & TestID &\n StyledPropsBlade &\n DataAnalyticsAttribute;\n\nconst isReactNative = getPlatformType() === 'react-native';\n\n// Need extra wrappers on React Native only for alignment\nconst CloseButtonWrapper = isReactNative ? BaseBox : Fragment;\n\nconst intentIconMap = {\n positive: CheckCircleIcon,\n negative: AlertOctagonIcon,\n information: InfoIcon,\n neutral: InfoIcon,\n notice: AlertTriangleIcon,\n};\n\nconst _Alert = (\n {\n description,\n title,\n isDismissible = true,\n onDismiss,\n emphasis = 'subtle',\n isFullWidth = false,\n color = 'neutral',\n actions,\n testID,\n icon,\n ...rest\n }: AlertProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement | null => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const [isVisible, setIsVisible] = useState(true);\n\n const isDesktop = matchedDeviceType === 'desktop';\n const isMobile = !isDesktop;\n\n const Icon = icon ?? intentIconMap[color];\n let iconOffset: DotNotationSpacingStringToken = 'spacing.1';\n\n // certain special cases below needs special care for near perfect alignment\n if (isReactNative) {\n if (isFullWidth && !title) {\n iconOffset = 'spacing.1';\n } else if (!isFullWidth && !title) {\n iconOffset = 'spacing.0';\n } else if (!isFullWidth && title) {\n iconOffset = 'spacing.2';\n }\n } else if (isMobile) {\n if (!isFullWidth && title) {\n iconOffset = 'spacing.2';\n } else if (isFullWidth && !title) {\n iconOffset = 'spacing.2';\n }\n } else if (isFullWidth) {\n iconOffset = 'spacing.1';\n }\n\n const shouldCenterAlign = isFullWidth && !title;\n let alignment: 'center' | 'flex-start' = 'flex-start';\n if (!isFullWidth) alignment = 'flex-start';\n if (shouldCenterAlign) alignment = 'center';\n\n const leadingIcon = (\n <BaseBox display=\"flex\" alignSelf={alignment} marginTop={iconOffset}>\n <Icon\n color={\n emphasis === 'intense'\n ? 'surface.icon.staticWhite.normal'\n : `feedback.icon.${color}.${emphasis === 'subtle' ? 'intense' : 'subtle'}`\n }\n size=\"medium\"\n />\n </BaseBox>\n );\n\n const textColor =\n emphasis === 'intense' ? 'surface.text.staticWhite.normal' : 'surface.text.gray.subtle';\n const _title = title ? (\n <BaseBox marginBottom=\"spacing.2\">\n <Text color={textColor} size=\"medium\" weight=\"semibold\">\n {title}\n </Text>\n </BaseBox>\n ) : null;\n\n const _description = (\n <BaseBox marginTop={title || isReactNative ? 'spacing.0' : 'spacing.1'}>\n <Text color={textColor} size=\"small\">\n {description}\n </Text>\n </BaseBox>\n );\n\n const primaryAction = actions?.primary ? (\n <BaseBox\n marginRight=\"spacing.5\"\n display={isReactNative ? castNativeType('flex') : castWebType('inline-flex')}\n >\n <BaseButton\n size=\"small\"\n onClick={actions.primary.onClick}\n color={emphasis === 'intense' ? 'white' : color}\n variant=\"secondary\"\n >\n {actions.primary.text}\n </BaseButton>\n </BaseBox>\n ) : null;\n\n const secondaryActionParams: Partial<SecondaryActionLinkButton> | null = actions?.secondary\n ? {\n onClick: actions.secondary.onClick,\n }\n : null;\n\n /**\n * TS assumes only common properties to be present for `SecondaryAction` union type\n * We add a type guard that checks if href is present on secondary action:\n * - If yes, then TS can assume it to be `SecondaryActionLinkButton` (href being a required property)\n * - If no, then it would be `SecondaryActionButton` (and link properties wouldn't be needed)\n */\n if (actions?.secondary && secondaryActionParams && 'href' in actions.secondary) {\n secondaryActionParams.href = actions.secondary.href;\n secondaryActionParams.target = actions.secondary.target;\n secondaryActionParams.rel = actions.secondary.rel;\n }\n\n const secondaryAction = actions?.secondary ? (\n <BaseBox marginRight=\"spacing.4\" display={(isReactNative ? 'flex' : 'inline-flex') as never}>\n <BaseLink\n size=\"small\"\n color={emphasis === 'intense' ? 'white' : color}\n {...secondaryActionParams}\n >\n {actions.secondary.text}\n </BaseLink>\n </BaseBox>\n ) : null;\n\n // For certain cases we wish to render actions inline with text content\n const showActionsHorizontal = isFullWidth && isDesktop;\n\n const actionsHorizontal =\n showActionsHorizontal && (primaryAction || secondaryAction) ? (\n <BaseBox flexDirection=\"row\" alignItems=\"center\">\n {primaryAction}\n {secondaryAction}\n </BaseBox>\n ) : null;\n\n const actionsVertical =\n !showActionsHorizontal && (primaryAction || secondaryAction) ? (\n <BaseBox marginTop=\"spacing.4\" flexDirection=\"row\" alignItems=\"center\">\n {primaryAction}\n {secondaryAction}\n </BaseBox>\n ) : null;\n\n const onClickDismiss = (): void => {\n if (onDismiss) {\n onDismiss();\n }\n setIsVisible(false);\n };\n const closeButton = isDismissible ? (\n <CloseButtonWrapper>\n <IconButton\n accessibilityLabel=\"Dismiss alert\"\n onClick={onClickDismiss}\n emphasis={emphasis === 'intense' ? 'subtle' : 'intense'}\n size=\"large\"\n icon={CloseIcon}\n />\n </CloseButtonWrapper>\n ) : null;\n\n const a11yProps = makeAccessible({\n // React Native doesn't has status as role\n role: isReactNative || color === 'negative' || color === 'notice' ? 'alert' : 'status',\n // override the implicit live region of role `alert`\n ...(color === 'notice' && { liveRegion: 'polite' }),\n });\n\n if (!isVisible) {\n return null;\n }\n\n return (\n <BaseBox\n ref={ref as never}\n {...a11yProps}\n {...metaAttribute({ name: MetaConstants.Alert, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <StyledAlert\n color={color}\n emphasis={emphasis}\n isFullWidth={isFullWidth}\n isDesktop={isDesktop}\n textAlign={'left' as never}\n >\n {leadingIcon}\n <BaseBox\n flex={1}\n paddingLeft={isFullWidth ? 'spacing.4' : 'spacing.3'}\n paddingRight={showActionsHorizontal ? 'spacing.4' : 'spacing.2'}\n >\n {_title}\n {_description}\n {actionsVertical}\n </BaseBox>\n {actionsHorizontal}\n {closeButton}\n </StyledAlert>\n </BaseBox>\n );\n};\n\nconst Alert = forwardRef(_Alert);\n\nexport type { AlertProps };\nexport { Alert };\n"],"names":["isReactNative","getPlatformType","CloseButtonWrapper","BaseBox","Fragment","intentIconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","_Alert","_ref","ref","description","title","_ref$isDismissible","isDismissible","onDismiss","_ref$emphasis","emphasis","_ref$isFullWidth","isFullWidth","_ref$color","color","actions","testID","icon","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","_useState","useState","_useState2","_slicedToArray","isVisible","setIsVisible","isDesktop","isMobile","Icon","iconOffset","shouldCenterAlign","alignment","leadingIcon","_jsx","display","alignSelf","marginTop","children","size","textColor","_title","marginBottom","Text","weight","_description","primaryAction","primary","marginRight","castNativeType","castWebType","BaseButton","onClick","variant","text","secondaryActionParams","secondary","href","target","rel","secondaryAction","BaseLink","Object","assign","showActionsHorizontal","actionsHorizontal","_jsxs","flexDirection","alignItems","actionsVertical","onClickDismiss","closeButton","IconButton","accessibilityLabel","CloseIcon","a11yProps","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","Alert","getStyledProps","makeAnalyticsAttribute","StyledAlert","textAlign","flex","paddingLeft","paddingRight","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ReactChild, ReactElement } from 'react';\nimport React, { Fragment, useState, forwardRef } from 'react';\n\nimport { StyledAlert } from './StyledAlert';\nimport type { IconComponent } from '~components/Icons';\nimport {\n AlertOctagonIcon,\n AlertTriangleIcon,\n CheckCircleIcon,\n CloseIcon,\n InfoIcon,\n} from '~components/Icons';\nimport { castNativeType, castWebType, useBreakpoint, getPlatformType } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport BaseButton from '~components/Button/BaseButton';\nimport { BaseLink } from '~components/Link/BaseLink';\nimport type { FeedbackColors, SubtleOrIntense } from '~tokens/theme/theme';\nimport { useTheme } from '~components/BladeProvider';\nimport type {\n DataAnalyticsAttribute,\n BladeElementRef,\n DotNotationSpacingStringToken,\n TestID,\n} from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { MAKE_ANALYTICS_CONSTANTS, makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype PrimaryAction = {\n text: string;\n onClick: () => void;\n};\n\ntype SecondaryActionButton = {\n text: string;\n onClick: () => void;\n};\n\ntype SecondaryActionLinkButton = {\n text: string;\n href: string;\n onClick?: () => void;\n target?: string;\n /**\n * When `target` is set to `_blank` this is automatically set to `noopener noreferrer`\n */\n rel?: string;\n};\n\ntype SecondaryAction = SecondaryActionButton | SecondaryActionLinkButton;\n\ntype AlertProps = {\n /**\n * Body content, pass text or JSX. Avoid passing components except `Link` to customize the content.\n */\n description: ReactChild;\n\n /**\n * A brief heading\n */\n title?: string;\n\n /**\n * Shows a dismiss button\n *\n * @default true\n */\n isDismissible?: boolean;\n\n /**\n * A callback when the dismiss button is clicked\n */\n onDismiss?: () => void;\n\n /**\n * Can be used to render custom icon\n */\n icon?: IconComponent;\n\n /**\n * Can be set to `high` for a more prominent look. Not to be confused with a11y emphasis.\n *\n * @default subtle\n */\n emphasis?: SubtleOrIntense;\n\n /**\n * Makes the Alert span the entire container width, instead of the default max width of `584px`.\n * This also makes the alert borderless, useful for creating full bleed layouts.\n *\n * @default false\n */\n isFullWidth?: boolean;\n\n /**\n * Sets the color tone\n */\n color?: FeedbackColors;\n\n /**\n * Renders a primary action button and a secondary action link button\n */\n actions?: {\n /**\n * Renders a button (should **always** be present if `secondary` action is being used)\n */\n primary?: PrimaryAction;\n /**\n * Renders a Link button\n */\n secondary?: SecondaryAction;\n };\n} & TestID &\n StyledPropsBlade &\n DataAnalyticsAttribute;\n\nconst isReactNative = getPlatformType() === 'react-native';\n\n// Need extra wrappers on React Native only for alignment\nconst CloseButtonWrapper = isReactNative ? BaseBox : Fragment;\n\nconst intentIconMap = {\n positive: CheckCircleIcon,\n negative: AlertOctagonIcon,\n information: InfoIcon,\n neutral: InfoIcon,\n notice: AlertTriangleIcon,\n};\n\nconst _Alert = (\n {\n description,\n title,\n isDismissible = true,\n onDismiss,\n emphasis = 'subtle',\n isFullWidth = false,\n color = 'neutral',\n actions,\n testID,\n icon,\n ...rest\n }: AlertProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement | null => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const [isVisible, setIsVisible] = useState(true);\n\n const isDesktop = matchedDeviceType === 'desktop';\n const isMobile = !isDesktop;\n\n const Icon = icon ?? intentIconMap[color];\n let iconOffset: DotNotationSpacingStringToken = 'spacing.1';\n\n // certain special cases below needs special care for near perfect alignment\n if (isReactNative) {\n if (isFullWidth && !title) {\n iconOffset = 'spacing.1';\n } else if (!isFullWidth && !title) {\n iconOffset = 'spacing.0';\n } else if (!isFullWidth && title) {\n iconOffset = 'spacing.2';\n }\n } else if (isMobile) {\n if (!isFullWidth && title) {\n iconOffset = 'spacing.2';\n } else if (isFullWidth && !title) {\n iconOffset = 'spacing.2';\n }\n } else if (isFullWidth) {\n iconOffset = 'spacing.1';\n }\n\n const shouldCenterAlign = isFullWidth && !title;\n let alignment: 'center' | 'flex-start' = 'flex-start';\n if (!isFullWidth) alignment = 'flex-start';\n if (shouldCenterAlign) alignment = 'center';\n\n const leadingIcon = (\n <BaseBox display=\"flex\" alignSelf={alignment} marginTop={iconOffset}>\n <Icon\n color={\n emphasis === 'intense'\n ? 'surface.icon.staticWhite.normal'\n : `feedback.icon.${color}.${emphasis === 'subtle' ? 'intense' : 'subtle'}`\n }\n size=\"medium\"\n />\n </BaseBox>\n );\n\n const textColor =\n emphasis === 'intense' ? 'surface.text.staticWhite.normal' : 'surface.text.gray.subtle';\n const _title = title ? (\n <BaseBox marginBottom=\"spacing.2\">\n <Text color={textColor} size=\"medium\" weight=\"semibold\">\n {title}\n </Text>\n </BaseBox>\n ) : null;\n\n const _description = (\n <BaseBox marginTop={title || isReactNative ? 'spacing.0' : 'spacing.1'}>\n <Text color={textColor} size=\"small\">\n {description}\n </Text>\n </BaseBox>\n );\n\n const primaryAction = actions?.primary ? (\n <BaseBox\n marginRight=\"spacing.5\"\n display={isReactNative ? castNativeType('flex') : castWebType('inline-flex')}\n >\n <BaseButton\n size=\"small\"\n onClick={actions.primary.onClick}\n color={emphasis === 'intense' ? 'white' : color}\n variant=\"secondary\"\n data-analytics-name={MAKE_ANALYTICS_CONSTANTS.ALERT.PRIMARY_ACTION_BUTTON}\n >\n {actions.primary.text}\n </BaseButton>\n </BaseBox>\n ) : null;\n\n const secondaryActionParams: Partial<SecondaryActionLinkButton> | null = actions?.secondary\n ? {\n onClick: actions.secondary.onClick,\n }\n : null;\n\n /**\n * TS assumes only common properties to be present for `SecondaryAction` union type\n * We add a type guard that checks if href is present on secondary action:\n * - If yes, then TS can assume it to be `SecondaryActionLinkButton` (href being a required property)\n * - If no, then it would be `SecondaryActionButton` (and link properties wouldn't be needed)\n */\n if (actions?.secondary && secondaryActionParams && 'href' in actions.secondary) {\n secondaryActionParams.href = actions.secondary.href;\n secondaryActionParams.target = actions.secondary.target;\n secondaryActionParams.rel = actions.secondary.rel;\n }\n\n const secondaryAction = actions?.secondary ? (\n <BaseBox marginRight=\"spacing.4\" display={(isReactNative ? 'flex' : 'inline-flex') as never}>\n <BaseLink\n size=\"small\"\n color={emphasis === 'intense' ? 'white' : color}\n {...secondaryActionParams}\n >\n {actions.secondary.text}\n </BaseLink>\n </BaseBox>\n ) : null;\n\n // For certain cases we wish to render actions inline with text content\n const showActionsHorizontal = isFullWidth && isDesktop;\n\n const actionsHorizontal =\n showActionsHorizontal && (primaryAction || secondaryAction) ? (\n <BaseBox flexDirection=\"row\" alignItems=\"center\">\n {primaryAction}\n {secondaryAction}\n </BaseBox>\n ) : null;\n\n const actionsVertical =\n !showActionsHorizontal && (primaryAction || secondaryAction) ? (\n <BaseBox marginTop=\"spacing.4\" flexDirection=\"row\" alignItems=\"center\">\n {primaryAction}\n {secondaryAction}\n </BaseBox>\n ) : null;\n\n const onClickDismiss = (): void => {\n if (onDismiss) {\n onDismiss();\n }\n setIsVisible(false);\n };\n const closeButton = isDismissible ? (\n <CloseButtonWrapper>\n <IconButton\n accessibilityLabel=\"Dismiss alert\"\n onClick={onClickDismiss}\n emphasis={emphasis === 'intense' ? 'subtle' : 'intense'}\n size=\"large\"\n icon={CloseIcon}\n />\n </CloseButtonWrapper>\n ) : null;\n\n const a11yProps = makeAccessible({\n // React Native doesn't has status as role\n role: isReactNative || color === 'negative' || color === 'notice' ? 'alert' : 'status',\n // override the implicit live region of role `alert`\n ...(color === 'notice' && { liveRegion: 'polite' }),\n });\n\n if (!isVisible) {\n return null;\n }\n\n return (\n <BaseBox\n ref={ref as never}\n {...a11yProps}\n {...metaAttribute({ name: MetaConstants.Alert, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <StyledAlert\n color={color}\n emphasis={emphasis}\n isFullWidth={isFullWidth}\n isDesktop={isDesktop}\n textAlign={'left' as never}\n >\n {leadingIcon}\n <BaseBox\n flex={1}\n paddingLeft={isFullWidth ? 'spacing.4' : 'spacing.3'}\n paddingRight={showActionsHorizontal ? 'spacing.4' : 'spacing.2'}\n >\n {_title}\n {_description}\n {actionsVertical}\n </BaseBox>\n {actionsHorizontal}\n {closeButton}\n </StyledAlert>\n </BaseBox>\n );\n};\n\nconst Alert = forwardRef(_Alert);\n\nexport type { AlertProps };\nexport { Alert };\n"],"names":["isReactNative","getPlatformType","CloseButtonWrapper","BaseBox","Fragment","intentIconMap","positive","CheckCircleIcon","negative","AlertOctagonIcon","information","InfoIcon","neutral","notice","AlertTriangleIcon","_Alert","_ref","ref","description","title","_ref$isDismissible","isDismissible","onDismiss","_ref$emphasis","emphasis","_ref$isFullWidth","isFullWidth","_ref$color","color","actions","testID","icon","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","_useState","useState","_useState2","_slicedToArray","isVisible","setIsVisible","isDesktop","isMobile","Icon","iconOffset","shouldCenterAlign","alignment","leadingIcon","_jsx","display","alignSelf","marginTop","children","size","textColor","_title","marginBottom","Text","weight","_description","primaryAction","primary","marginRight","castNativeType","castWebType","BaseButton","onClick","variant","MAKE_ANALYTICS_CONSTANTS","ALERT","PRIMARY_ACTION_BUTTON","text","secondaryActionParams","secondary","href","target","rel","secondaryAction","BaseLink","Object","assign","showActionsHorizontal","actionsHorizontal","_jsxs","flexDirection","alignItems","actionsVertical","onClickDismiss","closeButton","IconButton","accessibilityLabel","CloseIcon","a11yProps","makeAccessible","role","liveRegion","metaAttribute","name","MetaConstants","Alert","getStyledProps","makeAnalyticsAttribute","StyledAlert","textAlign","flex","paddingLeft","paddingRight","forwardRef"],"mappings":"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"}
|
|
@@ -16,9 +16,10 @@ import { useIsMobile } from '../../utils/useIsMobile.js';
|
|
|
16
16
|
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
17
17
|
import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
|
|
18
18
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
19
|
+
import { MAKE_ANALYTICS_CONSTANTS } from '../../utils/makeAnalyticsAttribute/makeAnalyticsConstants.js';
|
|
19
20
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
20
21
|
|
|
21
|
-
var _excluded=["children","testID","marginTop","paddingTop","showDivider"],_excluded2=["title","subtitle"],_excluded3=["actions"];var _CardFooter=function _CardFooter(_ref){var _footerChildrensArray,_footerChildrensArray2;var children=_ref.children,testID=_ref.testID,_ref$marginTop=_ref.marginTop,marginTop=_ref$marginTop===void 0?'spacing.4':_ref$marginTop,_ref$paddingTop=_ref.paddingTop,paddingTop=_ref$paddingTop===void 0?'spacing.4':_ref$paddingTop,_ref$showDivider=_ref.showDivider,showDivider=_ref$showDivider===void 0?true:_ref$showDivider,props=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();useVerifyInsideCard('CardFooter');useVerifyAllowedChildren({children:children,componentName:'CardFooter',allowedComponents:[ComponentIds.CardFooterLeading,ComponentIds.CardFooterTrailing]});var footerChildrensArray=React__default.Children.toArray(children);if(__DEV__){if(!React__default.isValidElement(footerChildrensArray[0])){throwBladeError({message:`Invalid React Element ${footerChildrensArray}`,moduleName:'CardFooter'});}}var baseBoxJustifyContent=footerChildrensArray.length===2||!((_footerChildrensArray=footerChildrensArray[0])!=null&&(_footerChildrensArray2=_footerChildrensArray.props)!=null&&_footerChildrensArray2.actions)?'space-between':'flex-end';return jsxs(BaseBox,Object.assign({marginTop:marginTop},metaAttribute({name:MetaConstants.CardFooter,testID:testID}),makeAnalyticsAttribute(props),{children:[showDivider?jsx(Divider,{}):null,jsx(BaseBox,{paddingTop:paddingTop,display:"flex",flexDirection:isMobile?'column':'row',justifyContent:baseBoxJustifyContent,alignItems:isMobile?'stretch':'center',children:children})]}));};var CardFooter=assignWithoutSideEffects(_CardFooter,{componentId:ComponentIds.CardFooter});var _CardFooterLeading=function _CardFooterLeading(_ref2){var title=_ref2.title,subtitle=_ref2.subtitle,rest=_objectWithoutProperties(_ref2,_excluded2);useVerifyInsideCard('CardFooterLeading');return jsxs(BaseBox,Object.assign({textAlign:'left'},makeAnalyticsAttribute(rest),{children:[title&&jsx(Text,{color:"surface.text.gray.normal",size:"medium",weight:"semibold",children:title}),subtitle&&jsx(Text,{color:"surface.text.gray.subtle",size:"small",weight:"regular",children:subtitle})]}));};var CardFooterLeading=assignWithoutSideEffects(_CardFooterLeading,{componentId:ComponentIds.CardFooterLeading});var _CardFooterTrailing=function _CardFooterTrailing(_ref3){var actions=_ref3.actions,rest=_objectWithoutProperties(_ref3,_excluded3);var isMobile=useIsMobile();useVerifyInsideCard('CardFooterTrailing');return jsxs(BaseBox,Object.assign({display:"flex",flexDirection:"row",alignSelf:isMobile?'auto':'center',marginTop:isMobile?'spacing.5':'spacing.0',marginLeft:isMobile?'spacing.0':'spacing.5'},makeAnalyticsAttribute(rest),{children:[jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.secondary?jsx(Button,Object.assign({isFullWidth:true,size:"medium",variant:"secondary"},actions.secondary,{children:actions.secondary.text})):null}),jsx(BaseBox,{marginLeft:"spacing.5"}),jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.primary?jsx(Button,Object.assign({isFullWidth:true,size:"medium"},actions.primary,{children:actions.primary.text})):null})]}));};var CardFooterTrailing=assignWithoutSideEffects(_CardFooterTrailing,{componentId:ComponentIds.CardFooterTrailing});
|
|
22
|
+
var _excluded=["children","testID","marginTop","paddingTop","showDivider"],_excluded2=["title","subtitle"],_excluded3=["actions"];var _CardFooter=function _CardFooter(_ref){var _footerChildrensArray,_footerChildrensArray2;var children=_ref.children,testID=_ref.testID,_ref$marginTop=_ref.marginTop,marginTop=_ref$marginTop===void 0?'spacing.4':_ref$marginTop,_ref$paddingTop=_ref.paddingTop,paddingTop=_ref$paddingTop===void 0?'spacing.4':_ref$paddingTop,_ref$showDivider=_ref.showDivider,showDivider=_ref$showDivider===void 0?true:_ref$showDivider,props=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();useVerifyInsideCard('CardFooter');useVerifyAllowedChildren({children:children,componentName:'CardFooter',allowedComponents:[ComponentIds.CardFooterLeading,ComponentIds.CardFooterTrailing]});var footerChildrensArray=React__default.Children.toArray(children);if(__DEV__){if(!React__default.isValidElement(footerChildrensArray[0])){throwBladeError({message:`Invalid React Element ${footerChildrensArray}`,moduleName:'CardFooter'});}}var baseBoxJustifyContent=footerChildrensArray.length===2||!((_footerChildrensArray=footerChildrensArray[0])!=null&&(_footerChildrensArray2=_footerChildrensArray.props)!=null&&_footerChildrensArray2.actions)?'space-between':'flex-end';return jsxs(BaseBox,Object.assign({marginTop:marginTop},metaAttribute({name:MetaConstants.CardFooter,testID:testID}),makeAnalyticsAttribute(props),{children:[showDivider?jsx(Divider,{}):null,jsx(BaseBox,{paddingTop:paddingTop,display:"flex",flexDirection:isMobile?'column':'row',justifyContent:baseBoxJustifyContent,alignItems:isMobile?'stretch':'center',children:children})]}));};var CardFooter=assignWithoutSideEffects(_CardFooter,{componentId:ComponentIds.CardFooter});var _CardFooterLeading=function _CardFooterLeading(_ref2){var title=_ref2.title,subtitle=_ref2.subtitle,rest=_objectWithoutProperties(_ref2,_excluded2);useVerifyInsideCard('CardFooterLeading');return jsxs(BaseBox,Object.assign({textAlign:'left'},makeAnalyticsAttribute(rest),{children:[title&&jsx(Text,{color:"surface.text.gray.normal",size:"medium",weight:"semibold",children:title}),subtitle&&jsx(Text,{color:"surface.text.gray.subtle",size:"small",weight:"regular",children:subtitle})]}));};var CardFooterLeading=assignWithoutSideEffects(_CardFooterLeading,{componentId:ComponentIds.CardFooterLeading});var _CardFooterTrailing=function _CardFooterTrailing(_ref3){var actions=_ref3.actions,rest=_objectWithoutProperties(_ref3,_excluded3);var isMobile=useIsMobile();useVerifyInsideCard('CardFooterTrailing');return jsxs(BaseBox,Object.assign({display:"flex",flexDirection:"row",alignSelf:isMobile?'auto':'center',marginTop:isMobile?'spacing.5':'spacing.0',marginLeft:isMobile?'spacing.0':'spacing.5'},makeAnalyticsAttribute(rest),{children:[jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.secondary?jsx(Button,Object.assign({isFullWidth:true,size:"medium",variant:"secondary"},actions.secondary,{"data-analytics-name":MAKE_ANALYTICS_CONSTANTS.CARD.FOOTER_SECONDARY_ACTION_BUTTON,children:actions.secondary.text})):null}),jsx(BaseBox,{marginLeft:"spacing.5"}),jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.primary?jsx(Button,Object.assign({isFullWidth:true,size:"medium"},actions.primary,{"data-analytics-name":MAKE_ANALYTICS_CONSTANTS.CARD.FOOTER_PRIMARY_ACTION_BUTTON,children:actions.primary.text})):null})]}));};var CardFooterTrailing=assignWithoutSideEffects(_CardFooterTrailing,{componentId:ComponentIds.CardFooterTrailing});
|
|
22
23
|
|
|
23
24
|
export { CardFooter, CardFooterLeading, CardFooterTrailing };
|
|
24
25
|
//# sourceMappingURL=CardFooter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardFooter.js","sources":["../../../../../src/components/Card/CardFooter.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { useVerifyInsideCard } from './CardContext';\nimport { ComponentIds } from './Card';\nimport type { CardSpacingValueType } from './types';\nimport type { ButtonProps } from '~components/Button';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { throwBladeError } from '~utils/logger';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport type CardFooterAction = Pick<\n ButtonProps,\n 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'\n> & {\n text: ButtonProps['children'];\n};\n\ntype CardFooterProps = {\n children?: React.ReactNode;\n /**\n * For spacing between divider and footer title\n */\n paddingTop?: CardSpacingValueType;\n /**\n * For spacing between body content and divider\n */\n marginTop?: CardSpacingValueType;\n /**\n * @default true\n */\n showDivider?: boolean;\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardFooter = ({\n children,\n testID,\n marginTop = 'spacing.4',\n paddingTop = 'spacing.4',\n showDivider = true,\n ...props\n}: CardFooterProps): React.ReactElement => {\n const isMobile = useIsMobile();\n useVerifyInsideCard('CardFooter');\n useVerifyAllowedChildren({\n children,\n componentName: 'CardFooter',\n allowedComponents: [ComponentIds.CardFooterLeading, ComponentIds.CardFooterTrailing],\n });\n\n const footerChildrensArray = React.Children.toArray(children);\n if (__DEV__) {\n if (!React.isValidElement(footerChildrensArray[0])) {\n throwBladeError({\n message: `Invalid React Element ${footerChildrensArray}`,\n moduleName: 'CardFooter',\n });\n }\n }\n\n // the reason why we are checking for actions here is, because we want the footerTrailing\n // to always be aligned to the right\n // if we don't check for action here, and if we do not have footerTrailing and only footerLeading\n // then the content of footerLeading will be justified to the end.\n const baseBoxJustifyContent =\n footerChildrensArray.length === 2 || !(footerChildrensArray[0] as ReactElement)?.props?.actions\n ? 'space-between'\n : 'flex-end';\n\n return (\n <BaseBox\n marginTop={marginTop}\n {...metaAttribute({ name: MetaConstants.CardFooter, testID })}\n {...makeAnalyticsAttribute(props)}\n >\n {showDivider ? <Divider /> : null}\n <BaseBox\n paddingTop={paddingTop}\n display=\"flex\"\n flexDirection={isMobile ? 'column' : 'row'}\n justifyContent={baseBoxJustifyContent}\n alignItems={isMobile ? 'stretch' : 'center'}\n >\n {children}\n </BaseBox>\n </BaseBox>\n );\n};\nconst CardFooter = assignWithoutSideEffects(_CardFooter, { componentId: ComponentIds.CardFooter });\n\ntype CardFooterLeadingProps = {\n title?: string;\n subtitle?: string;\n} & DataAnalyticsAttribute;\nconst _CardFooterLeading = ({\n title,\n subtitle,\n ...rest\n}: CardFooterLeadingProps): React.ReactElement => {\n useVerifyInsideCard('CardFooterLeading');\n\n return (\n <BaseBox textAlign={'left' as never} {...makeAnalyticsAttribute(rest)}>\n {title && (\n <Text color=\"surface.text.gray.normal\" size=\"medium\" weight=\"semibold\">\n {title}\n </Text>\n )}\n {subtitle && (\n <Text color=\"surface.text.gray.subtle\" size=\"small\" weight=\"regular\">\n {subtitle}\n </Text>\n )}\n </BaseBox>\n );\n};\nconst CardFooterLeading = assignWithoutSideEffects(_CardFooterLeading, {\n componentId: ComponentIds.CardFooterLeading,\n});\n\ntype CardFooterTrailingProps = {\n actions?: {\n primary?: CardFooterAction;\n secondary?: CardFooterAction;\n };\n} & DataAnalyticsAttribute;\nconst _CardFooterTrailing = ({ actions, ...rest }: CardFooterTrailingProps): React.ReactElement => {\n const isMobile = useIsMobile();\n useVerifyInsideCard('CardFooterTrailing');\n\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n alignSelf={isMobile ? 'auto' : 'center'}\n marginTop={isMobile ? 'spacing.5' : 'spacing.0'}\n marginLeft={isMobile ? 'spacing.0' : 'spacing.5'}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox flexGrow={1}>\n {actions?.secondary ? (\n <Button isFullWidth size=\"medium\" variant=\"secondary\" {...actions.secondary}>\n {actions.secondary.text!}\n </Button>\n ) : null}\n </BaseBox>\n <BaseBox marginLeft=\"spacing.5\" />\n <BaseBox flexGrow={1}>\n {actions?.primary ? (\n <Button isFullWidth size=\"medium\" {...actions.primary}>\n {actions.primary.text!}\n </Button>\n ) : null}\n </BaseBox>\n </BaseBox>\n );\n};\nconst CardFooterTrailing = assignWithoutSideEffects(_CardFooterTrailing, {\n componentId: ComponentIds.CardFooterTrailing,\n});\n\nexport { CardFooter, CardFooterLeading, CardFooterTrailing };\n"],"names":["_CardFooter","_ref","_footerChildrensArray","_footerChildrensArray2","children","testID","_ref$marginTop","marginTop","_ref$paddingTop","paddingTop","_ref$showDivider","showDivider","props","_objectWithoutProperties","_excluded","isMobile","useIsMobile","useVerifyInsideCard","useVerifyAllowedChildren","componentName","allowedComponents","ComponentIds","CardFooterLeading","CardFooterTrailing","footerChildrensArray","React","Children","toArray","__DEV__","isValidElement","throwBladeError","message","moduleName","baseBoxJustifyContent","length","actions","_jsxs","BaseBox","Object","assign","metaAttribute","name","MetaConstants","CardFooter","makeAnalyticsAttribute","_jsx","Divider","display","flexDirection","justifyContent","alignItems","assignWithoutSideEffects","componentId","_CardFooterLeading","_ref2","title","subtitle","rest","_excluded2","textAlign","Text","color","size","weight","_CardFooterTrailing","_ref3","_excluded3","alignSelf","marginLeft","flexGrow","secondary","Button","isFullWidth","variant","text","primary"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA,IAAA,SAAA,CAAA,CAAA,UAAA,CAAA,QAAA,CAAA,WAAA,CAAA,YAAA,CAAA,aAAA,CAAA,CAAA,UAAA,CAAA,CAAA,OAAA,CAAA,UAAA,CAAA,CAAA,UAAA,CAAA,CAAA,SAAA,CAAA,CAyCA,IAAMA,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,CAO0B,CAAA,IAAAC,qBAAA,CAAAC,sBAAA,CANzC,IAAAC,QAAQ,CAAAH,IAAA,CAARG,QAAQ,CACRC,MAAM,CAAAJ,IAAA,CAANI,MAAM,CAAAC,cAAA,CAAAL,IAAA,CACNM,SAAS,CAATA,SAAS,CAAAD,cAAA,GAAA,KAAA,CAAA,CAAG,WAAW,CAAAA,cAAA,CAAAE,eAAA,CAAAP,IAAA,CACvBQ,UAAU,CAAVA,UAAU,CAAAD,eAAA,GAAA,KAAA,CAAA,CAAG,WAAW,CAAAA,eAAA,CAAAE,gBAAA,CAAAT,IAAA,CACxBU,WAAW,CAAXA,WAAW,CAAAD,gBAAA,GAAA,KAAA,CAAA,CAAG,IAAI,CAAAA,gBAAA,CACfE,KAAK,CAAAC,wBAAA,CAAAZ,IAAA,CAAAa,SAAA,CAER,CAAA,IAAMC,QAAQ,CAAGC,WAAW,EAAE,CAC9BC,mBAAmB,CAAC,YAAY,CAAC,CACjCC,wBAAwB,CAAC,CACvBd,QAAQ,CAARA,QAAQ,CACRe,aAAa,CAAE,YAAY,CAC3BC,iBAAiB,CAAE,CAACC,YAAY,CAACC,iBAAiB,CAAED,YAAY,CAACE,kBAAkB,CACrF,CAAC,CAAC,CAEF,IAAMC,oBAAoB,CAAGC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACvB,QAAQ,CAAC,CAC7D,GAAIwB,OAAO,CAAE,CACX,GAAI,CAACH,cAAK,CAACI,cAAc,CAACL,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAE,CAClDM,eAAe,CAAC,CACdC,OAAO,CAAG,CAAA,sBAAA,EAAwBP,oBAAqB,CAAC,CAAA,CACxDQ,UAAU,CAAE,YACd,CAAC,CAAC,CACJ,CACF,CAMA,IAAMC,qBAAqB,CACzBT,oBAAoB,CAACU,MAAM,GAAK,CAAC,EAAI,EAAA,CAAAhC,qBAAA,CAAEsB,oBAAoB,CAAC,CAAC,CAAC,GAAArB,IAAAA,EAAAA,CAAAA,sBAAA,CAAxBD,qBAAA,CAA2CU,KAAK,GAAhDT,IAAAA,EAAAA,sBAAA,CAAkDgC,OAAO,EAC3F,eAAe,CACf,UAAU,CAEhB,OACEC,IAAA,CAACC,OAAO,CAAAC,MAAA,CAAAC,MAAA,EACNhC,SAAS,CAAEA,SAAU,CACjBiC,CAAAA,aAAa,CAAC,CAAEC,IAAI,CAAEC,aAAa,CAACC,UAAU,CAAEtC,MAAM,CAANA,MAAO,CAAC,CAAC,CACzDuC,sBAAsB,CAAChC,KAAK,CAAC,CAAA,CAAAR,QAAA,CAEhCO,CAAAA,WAAW,CAAGkC,GAAA,CAACC,OAAO,CAAA,EAAE,CAAC,CAAG,IAAI,CACjCD,GAAA,CAACR,OAAO,CAAA,CACN5B,UAAU,CAAEA,UAAW,CACvBsC,OAAO,CAAC,MAAM,CACdC,aAAa,CAAEjC,QAAQ,CAAG,QAAQ,CAAG,KAAM,CAC3CkC,cAAc,CAAEhB,qBAAsB,CACtCiB,UAAU,CAAEnC,QAAQ,CAAG,SAAS,CAAG,QAAS,CAAAX,QAAA,CAE3CA,QAAQ,CACF,CAAC,GACH,CAAC,CAEd,CAAC,CACK,IAAAuC,UAAU,CAAGQ,wBAAwB,CAACnD,WAAW,CAAE,CAAEoD,WAAW,CAAE/B,YAAY,CAACsB,UAAW,CAAC,EAMjG,IAAMU,kBAAkB,CAAG,SAArBA,kBAAkBA,CAAAC,KAAA,CAI0B,CAHhD,IAAAC,KAAK,CAAAD,KAAA,CAALC,KAAK,CACLC,QAAQ,CAAAF,KAAA,CAARE,QAAQ,CACLC,IAAI,CAAA5C,wBAAA,CAAAyC,KAAA,CAAAI,UAAA,CAAA,CAEPzC,mBAAmB,CAAC,mBAAmB,CAAC,CAExC,OACEmB,IAAA,CAACC,OAAO,CAAAC,MAAA,CAAAC,MAAA,CAACoB,CAAAA,SAAS,CAAE,MAAgB,CAAA,CAAKf,sBAAsB,CAACa,IAAI,CAAC,CAAA,CAAArD,QAAA,CAClEmD,CAAAA,KAAK,EACJV,GAAA,CAACe,IAAI,CAACC,CAAAA,KAAK,CAAC,0BAA0B,CAACC,IAAI,CAAC,QAAQ,CAACC,MAAM,CAAC,UAAU,CAAA3D,QAAA,CACnEmD,KAAK,CACF,CACP,CACAC,QAAQ,EACPX,GAAA,CAACe,IAAI,CAACC,CAAAA,KAAK,CAAC,0BAA0B,CAACC,IAAI,CAAC,OAAO,CAACC,MAAM,CAAC,SAAS,CAAA3D,QAAA,CACjEoD,QAAQ,CACL,CACP,CAAA,CAAA,CACM,CAAC,CAEd,CAAC,CACK,IAAAlC,iBAAiB,CAAG6B,wBAAwB,CAACE,kBAAkB,CAAE,CACrED,WAAW,CAAE/B,YAAY,CAACC,iBAC5B,CAAC,EAQD,IAAM0C,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAAC,KAAA,CAA0E,CAApE,IAAA9B,OAAO,CAAA8B,KAAA,CAAP9B,OAAO,CAAKsB,IAAI,CAAA5C,wBAAA,CAAAoD,KAAA,CAAAC,UAAA,CAAA,CAC7C,IAAMnD,QAAQ,CAAGC,WAAW,EAAE,CAC9BC,mBAAmB,CAAC,oBAAoB,CAAC,CAEzC,OACEmB,IAAA,CAACC,OAAO,CAAAC,MAAA,CAAAC,MAAA,CAAA,CACNQ,OAAO,CAAC,MAAM,CACdC,aAAa,CAAC,KAAK,CACnBmB,SAAS,CAAEpD,QAAQ,CAAG,MAAM,CAAG,QAAS,CACxCR,SAAS,CAAEQ,QAAQ,CAAG,WAAW,CAAG,WAAY,CAChDqD,UAAU,CAAErD,QAAQ,CAAG,WAAW,CAAG,WAAY,CAC7C6B,CAAAA,sBAAsB,CAACa,IAAI,CAAC,CAAArD,CAAAA,QAAA,EAEhCyC,GAAA,CAACR,OAAO,CAACgC,CAAAA,QAAQ,CAAE,CAAE,CAAAjE,QAAA,CAClB+B,OAAO,EAAPA,IAAAA,EAAAA,OAAO,CAAEmC,SAAS,CACjBzB,GAAA,CAAC0B,MAAM,CAAAjC,MAAA,CAAAC,MAAA,CAAA,CAACiC,WAAW,CAACV,IAAAA,CAAAA,IAAI,CAAC,QAAQ,CAACW,OAAO,CAAC,WAAW,CAAKtC,CAAAA,OAAO,CAACmC,SAAS,CAAA,CAAAlE,QAAA,CACxE+B,OAAO,CAACmC,SAAS,CAACI,IAAI,CAAA,CACjB,CAAC,CACP,IAAI,CACD,CAAC,CACV7B,GAAA,CAACR,OAAO,CAAC+B,CAAAA,UAAU,CAAC,WAAW,CAAE,CAAC,CAClCvB,GAAA,CAACR,OAAO,EAACgC,QAAQ,CAAE,CAAE,CAAAjE,QAAA,CAClB+B,OAAO,QAAPA,OAAO,CAAEwC,OAAO,CACf9B,GAAA,CAAC0B,MAAM,CAAAjC,MAAA,CAAAC,MAAA,CAACiC,CAAAA,WAAW,MAACV,IAAI,CAAC,QAAQ,CAAK3B,CAAAA,OAAO,CAACwC,OAAO,EAAAvE,QAAA,CAClD+B,OAAO,CAACwC,OAAO,CAACD,IAAI,CAAA,CACf,CAAC,CACP,IAAI,CACD,CAAC,GACH,CAAC,CAEd,CAAC,CACK,IAAAnD,kBAAkB,CAAG4B,wBAAwB,CAACa,mBAAmB,CAAE,CACvEZ,WAAW,CAAE/B,YAAY,CAACE,kBAC5B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"CardFooter.js","sources":["../../../../../src/components/Card/CardFooter.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { useVerifyInsideCard } from './CardContext';\nimport { ComponentIds } from './Card';\nimport type { CardSpacingValueType } from './types';\nimport type { ButtonProps } from '~components/Button';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { throwBladeError } from '~utils/logger';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport { MAKE_ANALYTICS_CONSTANTS, makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport type CardFooterAction = Pick<\n ButtonProps,\n 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'\n> & {\n text: ButtonProps['children'];\n};\n\ntype CardFooterProps = {\n children?: React.ReactNode;\n /**\n * For spacing between divider and footer title\n */\n paddingTop?: CardSpacingValueType;\n /**\n * For spacing between body content and divider\n */\n marginTop?: CardSpacingValueType;\n /**\n * @default true\n */\n showDivider?: boolean;\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardFooter = ({\n children,\n testID,\n marginTop = 'spacing.4',\n paddingTop = 'spacing.4',\n showDivider = true,\n ...props\n}: CardFooterProps): React.ReactElement => {\n const isMobile = useIsMobile();\n useVerifyInsideCard('CardFooter');\n useVerifyAllowedChildren({\n children,\n componentName: 'CardFooter',\n allowedComponents: [ComponentIds.CardFooterLeading, ComponentIds.CardFooterTrailing],\n });\n\n const footerChildrensArray = React.Children.toArray(children);\n if (__DEV__) {\n if (!React.isValidElement(footerChildrensArray[0])) {\n throwBladeError({\n message: `Invalid React Element ${footerChildrensArray}`,\n moduleName: 'CardFooter',\n });\n }\n }\n\n // the reason why we are checking for actions here is, because we want the footerTrailing\n // to always be aligned to the right\n // if we don't check for action here, and if we do not have footerTrailing and only footerLeading\n // then the content of footerLeading will be justified to the end.\n const baseBoxJustifyContent =\n footerChildrensArray.length === 2 || !(footerChildrensArray[0] as ReactElement)?.props?.actions\n ? 'space-between'\n : 'flex-end';\n\n return (\n <BaseBox\n marginTop={marginTop}\n {...metaAttribute({ name: MetaConstants.CardFooter, testID })}\n {...makeAnalyticsAttribute(props)}\n >\n {showDivider ? <Divider /> : null}\n <BaseBox\n paddingTop={paddingTop}\n display=\"flex\"\n flexDirection={isMobile ? 'column' : 'row'}\n justifyContent={baseBoxJustifyContent}\n alignItems={isMobile ? 'stretch' : 'center'}\n >\n {children}\n </BaseBox>\n </BaseBox>\n );\n};\nconst CardFooter = assignWithoutSideEffects(_CardFooter, { componentId: ComponentIds.CardFooter });\n\ntype CardFooterLeadingProps = {\n title?: string;\n subtitle?: string;\n} & DataAnalyticsAttribute;\nconst _CardFooterLeading = ({\n title,\n subtitle,\n ...rest\n}: CardFooterLeadingProps): React.ReactElement => {\n useVerifyInsideCard('CardFooterLeading');\n\n return (\n <BaseBox textAlign={'left' as never} {...makeAnalyticsAttribute(rest)}>\n {title && (\n <Text color=\"surface.text.gray.normal\" size=\"medium\" weight=\"semibold\">\n {title}\n </Text>\n )}\n {subtitle && (\n <Text color=\"surface.text.gray.subtle\" size=\"small\" weight=\"regular\">\n {subtitle}\n </Text>\n )}\n </BaseBox>\n );\n};\nconst CardFooterLeading = assignWithoutSideEffects(_CardFooterLeading, {\n componentId: ComponentIds.CardFooterLeading,\n});\n\ntype CardFooterTrailingProps = {\n actions?: {\n primary?: CardFooterAction;\n secondary?: CardFooterAction;\n };\n} & DataAnalyticsAttribute;\nconst _CardFooterTrailing = ({ actions, ...rest }: CardFooterTrailingProps): React.ReactElement => {\n const isMobile = useIsMobile();\n useVerifyInsideCard('CardFooterTrailing');\n\n return (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n alignSelf={isMobile ? 'auto' : 'center'}\n marginTop={isMobile ? 'spacing.5' : 'spacing.0'}\n marginLeft={isMobile ? 'spacing.0' : 'spacing.5'}\n {...makeAnalyticsAttribute(rest)}\n >\n <BaseBox flexGrow={1}>\n {actions?.secondary ? (\n <Button\n isFullWidth\n size=\"medium\"\n variant=\"secondary\"\n {...actions.secondary}\n data-analytics-name={MAKE_ANALYTICS_CONSTANTS.CARD.FOOTER_SECONDARY_ACTION_BUTTON}\n >\n {actions.secondary.text!}\n </Button>\n ) : null}\n </BaseBox>\n <BaseBox marginLeft=\"spacing.5\" />\n <BaseBox flexGrow={1}>\n {actions?.primary ? (\n <Button\n isFullWidth\n size=\"medium\"\n {...actions.primary}\n data-analytics-name={MAKE_ANALYTICS_CONSTANTS.CARD.FOOTER_PRIMARY_ACTION_BUTTON}\n >\n {actions.primary.text!}\n </Button>\n ) : null}\n </BaseBox>\n </BaseBox>\n );\n};\nconst CardFooterTrailing = assignWithoutSideEffects(_CardFooterTrailing, {\n componentId: ComponentIds.CardFooterTrailing,\n});\n\nexport { CardFooter, CardFooterLeading, CardFooterTrailing };\n"],"names":["_CardFooter","_ref","_footerChildrensArray","_footerChildrensArray2","children","testID","_ref$marginTop","marginTop","_ref$paddingTop","paddingTop","_ref$showDivider","showDivider","props","_objectWithoutProperties","_excluded","isMobile","useIsMobile","useVerifyInsideCard","useVerifyAllowedChildren","componentName","allowedComponents","ComponentIds","CardFooterLeading","CardFooterTrailing","footerChildrensArray","React","Children","toArray","__DEV__","isValidElement","throwBladeError","message","moduleName","baseBoxJustifyContent","length","actions","_jsxs","BaseBox","Object","assign","metaAttribute","name","MetaConstants","CardFooter","makeAnalyticsAttribute","_jsx","Divider","display","flexDirection","justifyContent","alignItems","assignWithoutSideEffects","componentId","_CardFooterLeading","_ref2","title","subtitle","rest","_excluded2","textAlign","Text","color","size","weight","_CardFooterTrailing","_ref3","_excluded3","alignSelf","marginLeft","flexGrow","secondary","Button","isFullWidth","variant","MAKE_ANALYTICS_CONSTANTS","CARD","FOOTER_SECONDARY_ACTION_BUTTON","text","primary","FOOTER_PRIMARY_ACTION_BUTTON"],"mappings":"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"}
|
|
@@ -35,7 +35,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
35
35
|
import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
|
|
36
36
|
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
37
37
|
|
|
38
|
-
var _excluded=["isDisabled","value","children","icon","color","testID","_motionMeta","width","maxWidth","minWidth"];var _Chip=function _Chip(_ref,ref){var _groupProps$state,_groupProps$defaultVa,_ref2;var isDisabled=_ref.isDisabled,value=_ref.value,children=_ref.children,Icon=_ref.icon,color=_ref.color,testID=_ref.testID,_motionMeta=_ref._motionMeta,width=_ref.width,maxWidth=_ref.maxWidth,minWidth=_ref.minWidth,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var groupProps=useChipGroupContext();var isInsideGroup=!isEmpty(groupProps);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];if(__DEV__){if(!isInsideGroup){throwBladeError({moduleName:'Chip',message:'<Chip /> component should only be used within the context of a <ChipGroup /> component'});}}var hasError=(groupProps==null?void 0:groupProps.validationState)==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required';var _name=groupProps==null?void 0:groupProps.name;var _isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=typeof(groupProps==null?void 0:groupProps.defaultValue)==='undefined'?undefined:groupProps==null?void 0:(_groupProps$defaultVa=groupProps.defaultValue)==null?void 0:_groupProps$defaultVa.includes(value);var useChip=(groupProps==null?void 0:groupProps.selectionType)==='single'?useRadio:useCheckbox;var _size=(groupProps==null?void 0:groupProps.size)||'small';var chipColor=(_ref2=color!=null?color:groupProps==null?void 0:groupProps.color)!=null?_ref2:'primary';var handleChange=function handleChange(_ref3){var isChecked=_ref3.isChecked,value=_ref3.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}};var _useChip=useChip({defaultChecked:defaultChecked,isChecked:_isChecked,isDisabled:_isDisabled,isRequired:_isRequired,hasError:hasError,name:_name,value:value,onChange:handleChange}),state=_useChip.state,inputProps=_useChip.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(true);},[_isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(false);},[_isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(true);}},[_isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(false);}},[_isDisabled]);var textVariant='unchecked';if(_isChecked&&chipColor){textVariant=chipColor;}if(_isDisabled){textVariant='disabled';}var chipTextColor=chipColorTokens.text[textVariant];var chipIconColor=chipColorTokens.icon[textVariant];var colorVariant='unchecked';var stateVariant=_isDisabled?'disabled':'default';if(_isChecked&&chipColor){colorVariant=chipColor;}var chipBackgroundColor=chipColorTokens.background[colorVariant][stateVariant];var chipBorderColor=chipColorTokens.border[colorVariant][stateVariant];return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Chip,testID:testID}),getStyledProps(rest),
|
|
38
|
+
var _excluded=["isDisabled","value","children","icon","color","testID","_motionMeta","width","maxWidth","minWidth"];var _Chip=function _Chip(_ref,ref){var _groupProps$state,_groupProps$defaultVa,_ref2;var isDisabled=_ref.isDisabled,value=_ref.value,children=_ref.children,Icon=_ref.icon,color=_ref.color,testID=_ref.testID,_motionMeta=_ref._motionMeta,width=_ref.width,maxWidth=_ref.maxWidth,minWidth=_ref.minWidth,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var groupProps=useChipGroupContext();var isInsideGroup=!isEmpty(groupProps);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];if(__DEV__){if(!isInsideGroup){throwBladeError({moduleName:'Chip',message:'<Chip /> component should only be used within the context of a <ChipGroup /> component'});}}var hasError=(groupProps==null?void 0:groupProps.validationState)==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required';var _name=groupProps==null?void 0:groupProps.name;var _isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=typeof(groupProps==null?void 0:groupProps.defaultValue)==='undefined'?undefined:groupProps==null?void 0:(_groupProps$defaultVa=groupProps.defaultValue)==null?void 0:_groupProps$defaultVa.includes(value);var useChip=(groupProps==null?void 0:groupProps.selectionType)==='single'?useRadio:useCheckbox;var _size=(groupProps==null?void 0:groupProps.size)||'small';var chipColor=(_ref2=color!=null?color:groupProps==null?void 0:groupProps.color)!=null?_ref2:'primary';var handleChange=function handleChange(_ref3){var isChecked=_ref3.isChecked,value=_ref3.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}};var _useChip=useChip({defaultChecked:defaultChecked,isChecked:_isChecked,isDisabled:_isDisabled,isRequired:_isRequired,hasError:hasError,name:_name,value:value,onChange:handleChange}),state=_useChip.state,inputProps=_useChip.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(true);},[_isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(false);},[_isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(true);}},[_isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(false);}},[_isDisabled]);var textVariant='unchecked';if(_isChecked&&chipColor){textVariant=chipColor;}if(_isDisabled){textVariant='disabled';}var chipTextColor=chipColorTokens.text[textVariant];var chipIconColor=chipColorTokens.icon[textVariant];var colorVariant='unchecked';var stateVariant=_isDisabled?'disabled':'default';if(_isChecked&&chipColor){colorVariant=chipColor;}var chipBackgroundColor=chipColorTokens.background[colorVariant][stateVariant];var chipBorderColor=chipColorTokens.border[colorVariant][stateVariant];return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Chip,testID:testID}),getStyledProps(rest),{display:isReactNative()?'flex':'inline-flex',ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref}),width:width,maxWidth:maxWidth,minWidth:minWidth,children:jsx(SelectorLabel,{componentName:MetaConstants.ChipLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,inputProps:isReactNative()?inputProps:{},style:{cursor:_isDisabled?'not-allowed':'pointer',width:'100%'},children:jsx(BaseBox,{display:"flex",flexDirection:"column",width:"100%",children:jsxs(BaseBox,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,Object.assign({hoverTokens:getChipInputHoverTokens(chipColor),isChecked:state.isChecked,isDisabled:_isDisabled,inputProps:inputProps,hasError:hasError,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:ref})},makeAnalyticsAttribute(rest))),jsx(AnimatedChip,{borderColor:chipBorderColor,isDisabled:_isDisabled,isPressed:isPressed,isDesktop:matchedDeviceType==='desktop',children:jsxs(StyledChipWrapper,{borderColor:chipBorderColor,isChecked:_isChecked,isDisabled:_isDisabled,color:chipColor,display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",backgroundColor:chipBackgroundColor,borderRadius:"max",borderWidth:['xsmall','small'].includes(_size)?'thinner':'thin',paddingLeft:chipHorizontalPaddingTokens[Boolean(Icon)?'withIcon':'withoutIcon'].left[_size],paddingRight:chipHorizontalPaddingTokens[Boolean(Icon)?'withIcon':'withoutIcon'].right[_size],height:makeSize(chipHeightTokens[_size]),gap:"spacing.3",width:"100%",children:[Icon?jsx(BaseBox,{display:"flex",children:jsx(Icon,{color:chipIconColor,size:chipIconSizes[_size]})}):null,children?jsx(Text,Object.assign({},chipTextSizes[_size],{truncateAfterLines:1,color:chipTextColor,children:children})):null]})})]})})})}));};var Chip=assignWithoutSideEffects(React__default.forwardRef(_Chip),{displayName:'Chip'});
|
|
39
39
|
|
|
40
40
|
export { Chip };
|
|
41
41
|
//# sourceMappingURL=Chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { useChipGroupContext } from './ChipGroupContext';\nimport {\n chipIconSizes,\n chipTextSizes,\n chipColorTokens,\n getChipInputHoverTokens,\n chipHeightTokens,\n chipHorizontalPaddingTokens,\n} from './chipTokens';\nimport type { ChipProps } from './types';\nimport { AnimatedChip } from './AnimatedChip';\nimport { StyledChipWrapper } from './StyledChipWrapper';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { useCheckbox } from '~components/Checkbox/useCheckbox';\nimport { useRadio } from '~components/Radio/useRadio';\nimport { isReactNative, makeSize, useBreakpoint } from '~utils';\nimport { Text } from '~components/Typography';\nimport { useTheme } from '~components/BladeProvider';\nimport { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype OnChange = ({\n isChecked,\n event,\n value,\n}: {\n isChecked: boolean;\n event?: React.ChangeEvent;\n value?: string;\n}) => void;\n\nconst _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (\n {\n isDisabled,\n value,\n children,\n icon: Icon,\n color,\n testID,\n _motionMeta,\n width,\n maxWidth,\n minWidth,\n ...rest\n },\n ref,\n) => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const groupProps = useChipGroupContext();\n const isInsideGroup = !isEmpty(groupProps);\n const [isPressed, setIsPressed] = React.useState(false);\n\n if (__DEV__) {\n if (!isInsideGroup) {\n throwBladeError({\n moduleName: 'Chip',\n message:\n '<Chip /> component should only be used within the context of a <ChipGroup /> component',\n });\n }\n }\n\n const hasError = groupProps?.validationState === 'error';\n const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n const _name = groupProps?.name;\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n const _isChecked = groupProps?.state?.isChecked(value!);\n // Check if the defaultValue property of groupProps is undefined\n const defaultChecked =\n typeof groupProps?.defaultValue === 'undefined'\n ? undefined // If undefined, defaultChecked is also undefined\n : groupProps?.defaultValue?.includes(value as string); // If multiple selection, check if value is in defaultValue array\n const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;\n const _size = groupProps?.size || 'small';\n const chipColor = color ?? groupProps?.color ?? 'primary';\n const handleChange: OnChange = ({ isChecked, value }) => {\n if (isChecked) {\n groupProps?.state?.addValue(value!);\n } else {\n groupProps?.state?.removeValue(value!);\n }\n };\n\n const { state, inputProps } = useChip({\n defaultChecked,\n isChecked: _isChecked,\n isDisabled: _isDisabled,\n isRequired: _isRequired,\n hasError,\n name: _name,\n value,\n onChange: handleChange,\n });\n\n const handlePointerPressedIn = React.useCallback(() => {\n if (_isDisabled) return;\n setIsPressed(true);\n }, [_isDisabled]);\n\n const handlePointerPressedOut = React.useCallback(() => {\n if (_isDisabled) return;\n setIsPressed(false);\n }, [_isDisabled]);\n\n const handleKeyboardPressedIn = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (_isDisabled) return;\n if (e.key === ' ') {\n setIsPressed(true);\n }\n },\n [_isDisabled],\n );\n\n const handleKeyboardPressedOut = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (_isDisabled) return;\n if (e.key === ' ') {\n setIsPressed(false);\n }\n },\n [_isDisabled],\n );\n\n let textVariant = 'unchecked';\n if (_isChecked && chipColor) {\n textVariant = chipColor;\n }\n if (_isDisabled) {\n textVariant = 'disabled';\n }\n const chipTextColor = chipColorTokens.text[textVariant];\n const chipIconColor = chipColorTokens.icon[textVariant];\n\n let colorVariant = 'unchecked';\n const stateVariant = _isDisabled ? 'disabled' : 'default';\n if (_isChecked && chipColor) {\n colorVariant = chipColor;\n }\n const chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant];\n const chipBorderColor = chipColorTokens.border[colorVariant][stateVariant];\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.Chip, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n ref={getOuterMotionRef({ _motionMeta, ref })}\n width={width}\n maxWidth={maxWidth}\n minWidth={minWidth}\n >\n <SelectorLabel\n componentName={MetaConstants.ChipLabel}\n onTouchStart={handlePointerPressedIn}\n onTouchEnd={handlePointerPressedOut}\n onMouseDown={handlePointerPressedIn}\n onMouseUp={handlePointerPressedOut}\n onMouseOut={handlePointerPressedOut}\n onKeyDown={handleKeyboardPressedIn}\n onKeyUp={handleKeyboardPressedOut}\n inputProps={isReactNative() ? inputProps : {}}\n style={{\n cursor: _isDisabled ? 'not-allowed' : 'pointer',\n width: '100%',\n }}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n <SelectorInput\n hoverTokens={getChipInputHoverTokens(chipColor)}\n isChecked={state.isChecked}\n isDisabled={_isDisabled}\n inputProps={inputProps}\n hasError={hasError}\n ref={getInnerMotionRef({ _motionMeta, ref })}\n />\n <AnimatedChip\n borderColor={chipBorderColor}\n isDisabled={_isDisabled}\n isPressed={isPressed}\n isDesktop={matchedDeviceType === 'desktop'}\n >\n <StyledChipWrapper\n borderColor={chipBorderColor}\n isChecked={_isChecked}\n isDisabled={_isDisabled}\n color={chipColor}\n display=\"flex\"\n flexDirection=\"row\"\n justifyContent=\"center\"\n alignItems=\"center\"\n overflow=\"hidden\"\n backgroundColor={chipBackgroundColor}\n borderRadius=\"max\"\n borderWidth={['xsmall', 'small'].includes(_size) ? 'thinner' : 'thin'}\n paddingLeft={\n chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].left[\n _size\n ]\n }\n paddingRight={\n chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].right[\n _size\n ]\n }\n height={makeSize(chipHeightTokens[_size])}\n gap=\"spacing.3\"\n width=\"100%\"\n >\n {Icon ? (\n <BaseBox display=\"flex\">\n <Icon color={chipIconColor} size={chipIconSizes[_size]} />\n </BaseBox>\n ) : null}\n {children ? (\n <Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>\n {children}\n </Text>\n ) : null}\n </StyledChipWrapper>\n </AnimatedChip>\n </BaseBox>\n </BaseBox>\n </SelectorLabel>\n </BaseBox>\n );\n};\n\nconst Chip = assignWithoutSideEffects(React.forwardRef(_Chip), {\n displayName: 'Chip',\n});\n\nexport { Chip };\nexport type { ChipProps };\n"],"names":["_Chip","_ref","ref","_groupProps$state","_groupProps$defaultVa","_ref2","isDisabled","value","children","Icon","icon","color","testID","_motionMeta","width","maxWidth","minWidth","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","groupProps","useChipGroupContext","isInsideGroup","isEmpty","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","__DEV__","throwBladeError","moduleName","message","hasError","validationState","_isDisabled","_isRequired","isRequired","necessityIndicator","_name","name","_isChecked","state","isChecked","defaultChecked","defaultValue","undefined","includes","useChip","selectionType","useRadio","useCheckbox","_size","size","chipColor","handleChange","_ref3","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useChip","onChange","inputProps","handlePointerPressedIn","useCallback","handlePointerPressedOut","handleKeyboardPressedIn","e","key","handleKeyboardPressedOut","textVariant","chipTextColor","chipColorTokens","text","chipIconColor","colorVariant","stateVariant","chipBackgroundColor","background","chipBorderColor","border","_jsx","BaseBox","Object","assign","metaAttribute","MetaConstants","Chip","getStyledProps","makeAnalyticsAttribute","display","isReactNative","getOuterMotionRef","SelectorLabel","componentName","ChipLabel","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","onMouseOut","onKeyDown","onKeyUp","style","cursor","flexDirection","_jsxs","alignItems","SelectorInput","hoverTokens","getChipInputHoverTokens","getInnerMotionRef","AnimatedChip","borderColor","isDesktop","StyledChipWrapper","justifyContent","overflow","backgroundColor","borderRadius","borderWidth","paddingLeft","chipHorizontalPaddingTokens","Boolean","left","paddingRight","right","height","makeSize","chipHeightTokens","gap","chipIconSizes","Text","chipTextSizes","truncateAfterLines","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { useChipGroupContext } from './ChipGroupContext';\nimport {\n chipIconSizes,\n chipTextSizes,\n chipColorTokens,\n getChipInputHoverTokens,\n chipHeightTokens,\n chipHorizontalPaddingTokens,\n} from './chipTokens';\nimport type { ChipProps } from './types';\nimport { AnimatedChip } from './AnimatedChip';\nimport { StyledChipWrapper } from './StyledChipWrapper';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { useCheckbox } from '~components/Checkbox/useCheckbox';\nimport { useRadio } from '~components/Radio/useRadio';\nimport { isReactNative, makeSize, useBreakpoint } from '~utils';\nimport { Text } from '~components/Typography';\nimport { useTheme } from '~components/BladeProvider';\nimport { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype OnChange = ({\n isChecked,\n event,\n value,\n}: {\n isChecked: boolean;\n event?: React.ChangeEvent;\n value?: string;\n}) => void;\n\nconst _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (\n {\n isDisabled,\n value,\n children,\n icon: Icon,\n color,\n testID,\n _motionMeta,\n width,\n maxWidth,\n minWidth,\n ...rest\n },\n ref,\n) => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const groupProps = useChipGroupContext();\n const isInsideGroup = !isEmpty(groupProps);\n const [isPressed, setIsPressed] = React.useState(false);\n\n if (__DEV__) {\n if (!isInsideGroup) {\n throwBladeError({\n moduleName: 'Chip',\n message:\n '<Chip /> component should only be used within the context of a <ChipGroup /> component',\n });\n }\n }\n\n const hasError = groupProps?.validationState === 'error';\n const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n const _name = groupProps?.name;\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n const _isChecked = groupProps?.state?.isChecked(value!);\n // Check if the defaultValue property of groupProps is undefined\n const defaultChecked =\n typeof groupProps?.defaultValue === 'undefined'\n ? undefined // If undefined, defaultChecked is also undefined\n : groupProps?.defaultValue?.includes(value as string); // If multiple selection, check if value is in defaultValue array\n const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;\n const _size = groupProps?.size || 'small';\n const chipColor = color ?? groupProps?.color ?? 'primary';\n const handleChange: OnChange = ({ isChecked, value }) => {\n if (isChecked) {\n groupProps?.state?.addValue(value!);\n } else {\n groupProps?.state?.removeValue(value!);\n }\n };\n\n const { state, inputProps } = useChip({\n defaultChecked,\n isChecked: _isChecked,\n isDisabled: _isDisabled,\n isRequired: _isRequired,\n hasError,\n name: _name,\n value,\n onChange: handleChange,\n });\n\n const handlePointerPressedIn = React.useCallback(() => {\n if (_isDisabled) return;\n setIsPressed(true);\n }, [_isDisabled]);\n\n const handlePointerPressedOut = React.useCallback(() => {\n if (_isDisabled) return;\n setIsPressed(false);\n }, [_isDisabled]);\n\n const handleKeyboardPressedIn = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (_isDisabled) return;\n if (e.key === ' ') {\n setIsPressed(true);\n }\n },\n [_isDisabled],\n );\n\n const handleKeyboardPressedOut = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (_isDisabled) return;\n if (e.key === ' ') {\n setIsPressed(false);\n }\n },\n [_isDisabled],\n );\n\n let textVariant = 'unchecked';\n if (_isChecked && chipColor) {\n textVariant = chipColor;\n }\n if (_isDisabled) {\n textVariant = 'disabled';\n }\n const chipTextColor = chipColorTokens.text[textVariant];\n const chipIconColor = chipColorTokens.icon[textVariant];\n\n let colorVariant = 'unchecked';\n const stateVariant = _isDisabled ? 'disabled' : 'default';\n if (_isChecked && chipColor) {\n colorVariant = chipColor;\n }\n const chipBackgroundColor = chipColorTokens.background[colorVariant][stateVariant];\n const chipBorderColor = chipColorTokens.border[colorVariant][stateVariant];\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.Chip, testID })}\n {...getStyledProps(rest)}\n display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n ref={getOuterMotionRef({ _motionMeta, ref })}\n width={width}\n maxWidth={maxWidth}\n minWidth={minWidth}\n >\n <SelectorLabel\n componentName={MetaConstants.ChipLabel}\n onTouchStart={handlePointerPressedIn}\n onTouchEnd={handlePointerPressedOut}\n onMouseDown={handlePointerPressedIn}\n onMouseUp={handlePointerPressedOut}\n onMouseOut={handlePointerPressedOut}\n onKeyDown={handleKeyboardPressedIn}\n onKeyUp={handleKeyboardPressedOut}\n inputProps={isReactNative() ? inputProps : {}}\n style={{\n cursor: _isDisabled ? 'not-allowed' : 'pointer',\n width: '100%',\n }}\n >\n <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n <SelectorInput\n hoverTokens={getChipInputHoverTokens(chipColor)}\n isChecked={state.isChecked}\n isDisabled={_isDisabled}\n inputProps={inputProps}\n hasError={hasError}\n ref={getInnerMotionRef({ _motionMeta, ref })}\n {...makeAnalyticsAttribute(rest)}\n />\n <AnimatedChip\n borderColor={chipBorderColor}\n isDisabled={_isDisabled}\n isPressed={isPressed}\n isDesktop={matchedDeviceType === 'desktop'}\n >\n <StyledChipWrapper\n borderColor={chipBorderColor}\n isChecked={_isChecked}\n isDisabled={_isDisabled}\n color={chipColor}\n display=\"flex\"\n flexDirection=\"row\"\n justifyContent=\"center\"\n alignItems=\"center\"\n overflow=\"hidden\"\n backgroundColor={chipBackgroundColor}\n borderRadius=\"max\"\n borderWidth={['xsmall', 'small'].includes(_size) ? 'thinner' : 'thin'}\n paddingLeft={\n chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].left[\n _size\n ]\n }\n paddingRight={\n chipHorizontalPaddingTokens[Boolean(Icon) ? 'withIcon' : 'withoutIcon'].right[\n _size\n ]\n }\n height={makeSize(chipHeightTokens[_size])}\n gap=\"spacing.3\"\n width=\"100%\"\n >\n {Icon ? (\n <BaseBox display=\"flex\">\n <Icon color={chipIconColor} size={chipIconSizes[_size]} />\n </BaseBox>\n ) : null}\n {children ? (\n <Text {...chipTextSizes[_size]} truncateAfterLines={1} color={chipTextColor}>\n {children}\n </Text>\n ) : null}\n </StyledChipWrapper>\n </AnimatedChip>\n </BaseBox>\n </BaseBox>\n </SelectorLabel>\n </BaseBox>\n );\n};\n\nconst Chip = assignWithoutSideEffects(React.forwardRef(_Chip), {\n displayName: 'Chip',\n});\n\nexport { Chip };\nexport type { ChipProps };\n"],"names":["_Chip","_ref","ref","_groupProps$state","_groupProps$defaultVa","_ref2","isDisabled","value","children","Icon","icon","color","testID","_motionMeta","width","maxWidth","minWidth","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","groupProps","useChipGroupContext","isInsideGroup","isEmpty","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","__DEV__","throwBladeError","moduleName","message","hasError","validationState","_isDisabled","_isRequired","isRequired","necessityIndicator","_name","name","_isChecked","state","isChecked","defaultChecked","defaultValue","undefined","includes","useChip","selectionType","useRadio","useCheckbox","_size","size","chipColor","handleChange","_ref3","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useChip","onChange","inputProps","handlePointerPressedIn","useCallback","handlePointerPressedOut","handleKeyboardPressedIn","e","key","handleKeyboardPressedOut","textVariant","chipTextColor","chipColorTokens","text","chipIconColor","colorVariant","stateVariant","chipBackgroundColor","background","chipBorderColor","border","_jsx","BaseBox","Object","assign","metaAttribute","MetaConstants","Chip","getStyledProps","display","isReactNative","getOuterMotionRef","SelectorLabel","componentName","ChipLabel","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","onMouseOut","onKeyDown","onKeyUp","style","cursor","flexDirection","_jsxs","alignItems","SelectorInput","hoverTokens","getChipInputHoverTokens","getInnerMotionRef","makeAnalyticsAttribute","AnimatedChip","borderColor","isDesktop","StyledChipWrapper","justifyContent","overflow","backgroundColor","borderRadius","borderWidth","paddingLeft","chipHorizontalPaddingTokens","Boolean","left","paddingRight","right","height","makeSize","chipHeightTokens","gap","chipIconSizes","Text","chipTextSizes","truncateAfterLines","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
|
|
@@ -25,7 +25,7 @@ import '../../tokens/global/motion.js';
|
|
|
25
25
|
import { size } from '../../tokens/global/size.js';
|
|
26
26
|
import getIn from '../../utils/lodashButBetter/get.js';
|
|
27
27
|
|
|
28
|
-
var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",size:labelOptionalIndicatorTextSize[size$1],color:"surface.text.gray.muted",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"feedback.text.negative.intense",alignSelf:"flex-start",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",maxHeight:makeSpace(size[36]),children:[jsx(Text,{variant:"body",size:labelTextSize[isLabelLeftPositioned?'left':'top'][size$1],color:isLabelLeftPositioned?'surface.text.gray.subtle':'surface.text.gray.muted',truncateAfterLines:2,weight:"semibold",wordBreak:isLabelLeftPositioned?'break-word':undefined,children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(BaseBox,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?makeSize(labelWidth[size$1]):'
|
|
28
|
+
var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,labelSuffix=_ref.labelSuffix,labelTrailing=_ref.labelTrailing;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",size:labelOptionalIndicatorTextSize[size$1],color:"surface.text.gray.muted",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"feedback.text.negative.intense",alignSelf:"flex-start",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",maxHeight:makeSpace(size[36]),children:[jsx(Text,{variant:"body",size:labelTextSize[isLabelLeftPositioned?'left':'top'][size$1],color:isLabelLeftPositioned?'surface.text.gray.subtle':'surface.text.gray.muted',truncateAfterLines:2,weight:"semibold",wordBreak:isLabelLeftPositioned?'break-word':undefined,children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(BaseBox,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?makeSize(labelWidth[size$1]):'100%';return jsx(Component,Object.assign({htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:isLabelLeftPositioned?makeSpace(getIn(theme,labelLeftMarginRight[size$1])):makeSpace(getIn(theme,'spacing.0'))},id:id},metaAttribute({name:MetaConstants.FormLabel}),{children:jsxs(BaseBox,{width:"100%",display:"flex",flexDirection:isLabelLeftPositioned?'column':'row',alignItems:isLabelLeftPositioned?'flex-start':'center',marginBottom:isLabelLeftPositioned?'spacing.0':labelMarginBottom[size$1],children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",gap:"spacing.2",children:[jsx(BaseBox,{children:textNode}),labelSuffix?jsx(BaseBox,{display:"flex",children:labelSuffix}):null]}),labelTrailing?jsx(BaseBox,{marginLeft:isLabelLeftPositioned?'spacing.0':'auto',children:labelTrailing}):null]})}));};
|
|
29
29
|
|
|
30
30
|
export { FormLabel };
|
|
31
31
|
//# sourceMappingURL=FormLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\n truncateAfterLines={2}\n weight=\"semibold\"\n wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n >\n {children}\n </Text>\n {computedAccessibilityNode}\n {/* TODO: Hide from screen readers to prevent double announcement */}\n {necessityLabel}\n </BaseBox>\n );\n\n // What harm can it do?\n if (isReactNative) {\n return (\n <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n {textNode}\n </BaseBox>\n );\n }\n\n const Component = as;\n // only set 120px label when device is desktop\n const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto';\n\n return (\n <Component\n htmlFor={htmlFor}\n style={{\n width,\n flexShrink: 0,\n marginRight: isLabelLeftPositioned\n ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n : makeSpace(getIn(theme, 'spacing.0')),\n }}\n id={id}\n {...metaAttribute({ name: MetaConstants.FormLabel })}\n >\n <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}>\n {textNode}\n </BaseBox>\n </Component>\n );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","Object","assign","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n labelLeftMarginRight,\n labelMarginBottom,\n labelOptionalIndicatorTextSize,\n labelTextSize,\n labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n as: 'span' | 'label';\n position?: 'top' | 'left';\n necessityIndicator?: 'required' | 'optional' | 'none';\n accessibilityText?: string;\n children: string | undefined;\n id?: string;\n /**\n * Sets the size of the label\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n labelSuffix?: React.ReactNode;\n labelTrailing?: React.ReactNode;\n};\n\ntype LabelProps = CommonProps & {\n htmlFor: string;\n as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n as: 'span';\n htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n /**\n * Label to be shown for the input field\n */\n label?: string;\n /**\n * Desktop only prop. Default value on mobile will be `top`\n */\n labelPosition?: 'left' | 'top';\n /**\n * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n\n /**\n * Suffix element to be shown for the input field\n *\n * @example\n * ```jsx\n * labelSuffix={\n * <Tooltip content=\"This is a tooltip\" placement=\"right\">\n * <TooltipInteractiveWrapper>\n * <InfoIcon size=\"small\" color=\"surface.icon.gray.subtle\" />\n * </TooltipInteractiveWrapper>\n * </Tooltip>\n * }\n * ```\n */\n labelSuffix?: React.ReactNode;\n\n /**\n * Trailing element to be shown for the input field\n */\n labelTrailing?: React.ReactNode;\n};\n\nconst FormLabel = ({\n as = 'span',\n position = 'top',\n necessityIndicator = 'none',\n accessibilityText,\n children,\n id,\n htmlFor,\n size = 'medium',\n labelSuffix,\n labelTrailing,\n}: FormLabelProps): React.ReactElement => {\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const isDesktop = matchedDeviceType === 'desktop';\n const isReactNative = getPlatformType() === 'react-native';\n\n let necessityLabel: React.ReactNode = null;\n\n const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n if (necessityIndicator === 'optional') {\n necessityLabel = (\n <Text\n variant=\"caption\"\n size={labelOptionalIndicatorTextSize[size]}\n color=\"surface.text.gray.muted\"\n >\n (optional)\n </Text>\n );\n }\n if (necessityIndicator === 'required') {\n necessityLabel = (\n <Text\n variant=\"body\"\n size={isLabelLeftPositioned ? 'medium' : 'small'}\n color=\"feedback.text.negative.intense\"\n alignSelf=\"flex-start\"\n >\n *\n </Text>\n );\n }\n\n const computedAccessibilityNode = (\n <VisuallyHidden>\n {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n <Text>{accessibilityText}</Text>\n </VisuallyHidden>\n );\n\n const textNode = (\n <BaseBox\n gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n // flexWrap=\"wrap\"\n maxHeight={makeSpace(sizeToken[36])}\n >\n <Text\n variant=\"body\"\n size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n color={isLabelLeftPositioned ? 'surface.text.gray.subtle' : 'surface.text.gray.muted'}\n truncateAfterLines={2}\n weight=\"semibold\"\n wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n >\n {children}\n </Text>\n {computedAccessibilityNode}\n {/* TODO: Hide from screen readers to prevent double announcement */}\n {necessityLabel}\n </BaseBox>\n );\n\n // What harm can it do?\n if (isReactNative) {\n return (\n <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n {textNode}\n </BaseBox>\n );\n }\n\n const Component = as;\n // only set 120px label when device is desktop\n const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : '100%';\n\n return (\n <Component\n htmlFor={htmlFor}\n style={{\n width,\n flexShrink: 0,\n marginRight: isLabelLeftPositioned\n ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n : makeSpace(getIn(theme, 'spacing.0')),\n }}\n id={id}\n {...metaAttribute({ name: MetaConstants.FormLabel })}\n >\n <BaseBox\n width=\"100%\"\n display=\"flex\"\n flexDirection={isLabelLeftPositioned ? 'column' : 'row'}\n alignItems={isLabelLeftPositioned ? 'flex-start' : 'center'}\n marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}\n >\n <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.2\">\n <BaseBox>{textNode}</BaseBox>\n {labelSuffix ? <BaseBox display=\"flex\">{labelSuffix}</BaseBox> : null}\n </BaseBox>\n {labelTrailing ? (\n <BaseBox marginLeft={isLabelLeftPositioned ? 'spacing.0' : 'auto'}>\n {labelTrailing}\n </BaseBox>\n ) : null}\n </BaseBox>\n </Component>\n );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","labelSuffix","labelTrailing","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","Object","assign","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom","marginLeft"],"mappings":"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"}
|