@razorpay/blade 12.38.0 → 12.40.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/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.js +1 -1
- package/build/lib/native/components/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.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/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.js +1 -3
- package/build/lib/web/development/components/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.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/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.js +1 -3
- package/build/lib/web/production/components/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.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":"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"}
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,MAAA,CAAA,OAAA,CAAA,QAAA,CAAA,aAAA,CAAA,OAAA,CAAA,UAAA,CAAA,UAAA,CAAA,CAwCA,IAAMA,KAAiE,CAAG,SAApEA,KAAiEA,CAAAC,IAAA,CAcrEC,GAAG,CACA,CAAAC,IAAAA,iBAAA,CAAAC,qBAAA,CAAAC,KAAA,CAAA,IAbDC,UAAU,CAAAL,IAAA,CAAVK,UAAU,CACVC,KAAK,CAAAN,IAAA,CAALM,KAAK,CACLC,QAAQ,CAAAP,IAAA,CAARO,QAAQ,CACFC,IAAI,CAAAR,IAAA,CAAVS,IAAI,CACJC,KAAK,CAAAV,IAAA,CAALU,KAAK,CACLC,MAAM,CAAAX,IAAA,CAANW,MAAM,CACNC,WAAW,CAAAZ,IAAA,CAAXY,WAAW,CACXC,KAAK,CAAAb,IAAA,CAALa,KAAK,CACLC,QAAQ,CAAAd,IAAA,CAARc,QAAQ,CACRC,QAAQ,CAAAf,IAAA,CAARe,QAAQ,CACLC,IAAI,CAAAC,wBAAA,CAAAjB,IAAA,CAAAkB,SAAA,CAAA,CAIT,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAAC,cAAA,CAA8BC,aAAa,CAAC,CAAEC,WAAW,CAAEH,KAAK,CAACG,WAAY,CAAC,CAAC,CAAvEC,iBAAiB,CAAAH,cAAA,CAAjBG,iBAAiB,CACzB,IAAMC,UAAU,CAAGC,mBAAmB,EAAE,CACxC,IAAMC,aAAa,CAAG,CAACC,OAAO,CAACH,UAAU,CAAC,CAC1C,IAAAI,eAAA,CAAkCC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC,CAAAC,gBAAA,CAAAC,cAAA,CAAAJ,eAAA,IAAhDK,SAAS,CAAAF,gBAAA,CAAA,CAAA,CAAA,CAAEG,YAAY,CAAAH,gBAAA,CAE9B,CAAA,CAAA,CAAA,GAAII,OAAO,CAAE,CACX,GAAI,CAACT,aAAa,CAAE,CAClBU,eAAe,CAAC,CACdC,UAAU,CAAE,MAAM,CAClBC,OAAO,CACL,wFACJ,CAAC,CAAC,CACJ,CACF,CAEA,IAAMC,QAAQ,CAAG,CAAAf,UAAU,EAAA,IAAA,CAAA,KAAA,CAAA,CAAVA,UAAU,CAAEgB,eAAe,IAAK,OAAO,CACxD,IAAMC,WAAW,CAAGtC,UAAU,EAAVA,IAAAA,CAAAA,UAAU,CAAIqB,UAAU,cAAVA,UAAU,CAAErB,UAAU,CACxD,IAAMuC,WAAW,CAAG,CAAAlB,UAAU,EAAVA,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,UAAU,CAAEmB,UAAU,GAAI,CAAAnB,UAAU,EAAA,IAAA,CAAA,KAAA,CAAA,CAAVA,UAAU,CAAEoB,kBAAkB,IAAK,UAAU,CAC3F,IAAMC,KAAK,CAAGrB,UAAU,EAAVA,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,UAAU,CAAEsB,IAAI,CAE9B,IAAMC,UAAU,CAAGvB,UAAU,EAAAxB,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,iBAAA,CAAVwB,UAAU,CAAEwB,KAAK,GAAA,IAAA,CAAA,KAAA,CAAA,CAAjBhD,iBAAA,CAAmBiD,SAAS,CAAC7C,KAAM,CAAC,CAEvD,IAAM8C,cAAc,CAClB,OAAO1B,UAAU,EAAA,IAAA,CAAA,KAAA,CAAA,CAAVA,UAAU,CAAE2B,YAAY,CAAK,GAAA,WAAW,CAC3CC,SAAS,CACT5B,UAAU,EAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAAvB,qBAAA,CAAVuB,UAAU,CAAE2B,YAAY,GAAxBlD,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,qBAAA,CAA0BoD,QAAQ,CAACjD,KAAe,CAAC,CACzD,IAAMkD,OAAO,CAAG,CAAA9B,UAAU,EAAA,IAAA,CAAA,KAAA,CAAA,CAAVA,UAAU,CAAE+B,aAAa,IAAK,QAAQ,CAAGC,QAAQ,CAAGC,WAAW,CAC/E,IAAMC,KAAK,CAAG,CAAAlC,UAAU,cAAVA,UAAU,CAAEmC,IAAI,GAAI,OAAO,CACzC,IAAMC,SAAS,EAAA1D,KAAA,CAAGM,KAAK,EAAA,IAAA,CAALA,KAAK,CAAIgB,UAAU,EAAVA,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,UAAU,CAAEhB,KAAK,GAAA,IAAA,CAAAN,KAAA,CAAI,SAAS,CACzD,IAAM2D,YAAsB,CAAG,SAAzBA,YAAsBA,CAAAC,KAAA,CAA6B,CAAA,IAAvBb,SAAS,CAAAa,KAAA,CAATb,SAAS,CAAE7C,KAAK,CAAA0D,KAAA,CAAL1D,KAAK,CAChD,GAAI6C,SAAS,CAAE,CAAA,IAAAc,kBAAA,CACbvC,UAAU,EAAAuC,IAAAA,CAAAA,KAAAA,CAAAA,CAAAA,CAAAA,kBAAA,CAAVvC,UAAU,CAAEwB,KAAK,GAAA,IAAA,CAAA,KAAA,CAAA,CAAjBe,kBAAA,CAAmBC,QAAQ,CAAC5D,KAAM,CAAC,CACrC,CAAC,KAAM,KAAA6D,kBAAA,CACLzC,UAAU,EAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAAyC,kBAAA,CAAVzC,UAAU,CAAEwB,KAAK,eAAjBiB,kBAAA,CAAmBC,WAAW,CAAC9D,KAAM,CAAC,CACxC,CACF,CAAC,CAED,IAAA+D,QAAA,CAA8Bb,OAAO,CAAC,CACpCJ,cAAc,CAAdA,cAAc,CACdD,SAAS,CAAEF,UAAU,CACrB5C,UAAU,CAAEsC,WAAW,CACvBE,UAAU,CAAED,WAAW,CACvBH,QAAQ,CAARA,QAAQ,CACRO,IAAI,CAAED,KAAK,CACXzC,KAAK,CAALA,KAAK,CACLgE,QAAQ,CAAEP,YACZ,CAAC,CAAC,CATMb,KAAK,CAAAmB,QAAA,CAALnB,KAAK,CAAEqB,UAAU,CAAAF,QAAA,CAAVE,UAAU,CAWzB,IAAMC,sBAAsB,CAAGzC,cAAK,CAAC0C,WAAW,CAAC,UAAM,CACrD,GAAI9B,WAAW,CAAE,OACjBP,YAAY,CAAC,IAAI,CAAC,CACpB,CAAC,CAAE,CAACO,WAAW,CAAC,CAAC,CAEjB,IAAM+B,uBAAuB,CAAG3C,cAAK,CAAC0C,WAAW,CAAC,UAAM,CACtD,GAAI9B,WAAW,CAAE,OACjBP,YAAY,CAAC,KAAK,CAAC,CACrB,CAAC,CAAE,CAACO,WAAW,CAAC,CAAC,CAEjB,IAAMgC,uBAAuB,CAAG5C,cAAK,CAAC0C,WAAW,CAC/C,SAACG,CAAsB,CAAK,CAC1B,GAAIjC,WAAW,CAAE,OACjB,GAAIiC,CAAC,CAACC,GAAG,GAAK,GAAG,CAAE,CACjBzC,YAAY,CAAC,IAAI,CAAC,CACpB,CACF,CAAC,CACD,CAACO,WAAW,CACd,CAAC,CAED,IAAMmC,wBAAwB,CAAG/C,cAAK,CAAC0C,WAAW,CAChD,SAACG,CAAsB,CAAK,CAC1B,GAAIjC,WAAW,CAAE,OACjB,GAAIiC,CAAC,CAACC,GAAG,GAAK,GAAG,CAAE,CACjBzC,YAAY,CAAC,KAAK,CAAC,CACrB,CACF,CAAC,CACD,CAACO,WAAW,CACd,CAAC,CAED,IAAIoC,WAAW,CAAG,WAAW,CAC7B,GAAI9B,UAAU,EAAIa,SAAS,CAAE,CAC3BiB,WAAW,CAAGjB,SAAS,CACzB,CACA,GAAInB,WAAW,CAAE,CACfoC,WAAW,CAAG,UAAU,CAC1B,CACA,IAAMC,aAAa,CAAGC,eAAe,CAACC,IAAI,CAACH,WAAW,CAAC,CACvD,IAAMI,aAAa,CAAGF,eAAe,CAACxE,IAAI,CAACsE,WAAW,CAAC,CAEvD,IAAIK,YAAY,CAAG,WAAW,CAC9B,IAAMC,YAAY,CAAG1C,WAAW,CAAG,UAAU,CAAG,SAAS,CACzD,GAAIM,UAAU,EAAIa,SAAS,CAAE,CAC3BsB,YAAY,CAAGtB,SAAS,CAC1B,CACA,IAAMwB,mBAAmB,CAAGL,eAAe,CAACM,UAAU,CAACH,YAAY,CAAC,CAACC,YAAY,CAAC,CAClF,IAAMG,eAAe,CAAGP,eAAe,CAACQ,MAAM,CAACL,YAAY,CAAC,CAACC,YAAY,CAAC,CAE1E,OACEK,GAAA,CAACC,OAAO,CAAAC,MAAA,CAAAC,MAAA,CACFC,EAAAA,CAAAA,aAAa,CAAC,CAAE9C,IAAI,CAAE+C,aAAa,CAACC,IAAI,CAAErF,MAAM,CAANA,MAAO,CAAC,CAAC,CACnDsF,cAAc,CAACjF,IAAI,CAAC,CACxBkF,CAAAA,OAAO,CAAGC,aAAa,EAAE,CAAG,MAAM,CAAG,aAAwB,CAC7DlG,GAAG,CAAEmG,iBAAiB,CAAC,CAAExF,WAAW,CAAXA,WAAW,CAAEX,GAAG,CAAHA,GAAI,CAAC,CAAE,CAC7CY,KAAK,CAAEA,KAAM,CACbC,QAAQ,CAAEA,QAAS,CACnBC,QAAQ,CAAEA,QAAS,CAAAR,QAAA,CAEnBmF,GAAA,CAACW,aAAa,CAAA,CACZC,aAAa,CAAEP,aAAa,CAACQ,SAAU,CACvCC,YAAY,CAAEhC,sBAAuB,CACrCiC,UAAU,CAAE/B,uBAAwB,CACpCgC,WAAW,CAAElC,sBAAuB,CACpCmC,SAAS,CAAEjC,uBAAwB,CACnCkC,UAAU,CAAElC,uBAAwB,CACpCmC,SAAS,CAAElC,uBAAwB,CACnCmC,OAAO,CAAEhC,wBAAyB,CAClCP,UAAU,CAAE4B,aAAa,EAAE,CAAG5B,UAAU,CAAG,EAAG,CAC9CwC,KAAK,CAAE,CACLC,MAAM,CAAErE,WAAW,CAAG,aAAa,CAAG,SAAS,CAC/C9B,KAAK,CAAE,MACT,CAAE,CAAAN,QAAA,CAEFmF,GAAA,CAACC,OAAO,CAAA,CAACO,OAAO,CAAC,MAAM,CAACe,aAAa,CAAC,QAAQ,CAACpG,KAAK,CAAC,MAAM,CAAAN,QAAA,CACzD2G,IAAA,CAACvB,OAAO,EAACO,OAAO,CAAC,MAAM,CAACiB,UAAU,CAAC,QAAQ,CAACF,aAAa,CAAC,KAAK,CAAA1G,QAAA,EAC7DmF,GAAA,CAAC0B,aAAa,CAAAxB,MAAA,CAAAC,MAAA,CACZwB,CAAAA,WAAW,CAAEC,uBAAuB,CAACxD,SAAS,CAAE,CAChDX,SAAS,CAAED,KAAK,CAACC,SAAU,CAC3B9C,UAAU,CAAEsC,WAAY,CACxB4B,UAAU,CAAEA,UAAW,CACvB9B,QAAQ,CAAEA,QAAS,CACnBxC,GAAG,CAAEsH,iBAAiB,CAAC,CAAE3G,WAAW,CAAXA,WAAW,CAAEX,GAAG,CAAHA,GAAI,CAAC,CAAE,CAAA,CACzCuH,sBAAsB,CAACxG,IAAI,CAAC,CACjC,CAAC,CACF0E,GAAA,CAAC+B,YAAY,EACXC,WAAW,CAAElC,eAAgB,CAC7BnF,UAAU,CAAEsC,WAAY,CACxBR,SAAS,CAAEA,SAAU,CACrBwF,SAAS,CAAElG,iBAAiB,GAAK,SAAU,CAAAlB,QAAA,CAE3C2G,IAAA,CAACU,iBAAiB,EAChBF,WAAW,CAAElC,eAAgB,CAC7BrC,SAAS,CAAEF,UAAW,CACtB5C,UAAU,CAAEsC,WAAY,CACxBjC,KAAK,CAAEoD,SAAU,CACjBoC,OAAO,CAAC,MAAM,CACde,aAAa,CAAC,KAAK,CACnBY,cAAc,CAAC,QAAQ,CACvBV,UAAU,CAAC,QAAQ,CACnBW,QAAQ,CAAC,QAAQ,CACjBC,eAAe,CAAEzC,mBAAoB,CACrC0C,YAAY,CAAC,KAAK,CAClBC,WAAW,CAAE,CAAC,QAAQ,CAAE,OAAO,CAAC,CAAC1E,QAAQ,CAACK,KAAK,CAAC,CAAG,SAAS,CAAG,MAAO,CACtEsE,WAAW,CACTC,2BAA2B,CAACC,OAAO,CAAC5H,IAAI,CAAC,CAAG,UAAU,CAAG,aAAa,CAAC,CAAC6H,IAAI,CAC1EzE,KAAK,CAER,CACD0E,YAAY,CACVH,2BAA2B,CAACC,OAAO,CAAC5H,IAAI,CAAC,CAAG,UAAU,CAAG,aAAa,CAAC,CAAC+H,KAAK,CAC3E3E,KAAK,CAER,CACD4E,MAAM,CAAEC,QAAQ,CAACC,gBAAgB,CAAC9E,KAAK,CAAC,CAAE,CAC1C+E,GAAG,CAAC,WAAW,CACf9H,KAAK,CAAC,MAAM,CAAAN,QAAA,EAEXC,IAAI,CACHkF,GAAA,CAACC,OAAO,CAACO,CAAAA,OAAO,CAAC,MAAM,CAAA3F,QAAA,CACrBmF,GAAA,CAAClF,IAAI,CAACE,CAAAA,KAAK,CAAEyE,aAAc,CAACtB,IAAI,CAAE+E,aAAa,CAAChF,KAAK,CAAE,CAAE,CAAC,CACnD,CAAC,CACR,IAAI,CACPrD,QAAQ,CACPmF,GAAA,CAACmD,IAAI,CAAAjD,MAAA,CAAAC,MAAA,CAAA,EAAA,CAAKiD,aAAa,CAAClF,KAAK,CAAC,CAAA,CAAEmF,kBAAkB,CAAE,CAAE,CAACrI,KAAK,CAAEsE,aAAc,CAAAzE,QAAA,CACzEA,QAAQ,CACL,CAAA,CAAC,CACL,IAAI,EACS,CAAC,CACR,CAAC,CAAA,CACR,CAAC,CACH,CAAC,CACG,CAAC,EACT,CAAC,CAEd,CAAC,CAEK,IAAAyF,IAAI,CAAGgD,wBAAwB,CAACjH,cAAK,CAACkH,UAAU,CAAClJ,KAAK,CAAC,CAAE,CAC7DmJ,WAAW,CAAE,MACf,CAAC;;;;"}
|
|
@@ -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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"}
|
package/build/lib/native/components/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.js
CHANGED
|
@@ -6,7 +6,7 @@ import Path from '../_Svg/Path/Path.native.js';
|
|
|
6
6
|
import Svg from '../_Svg/Svg/Svg.native.js';
|
|
7
7
|
import useIconProps from '../useIconProps/useIconProps.js';
|
|
8
8
|
|
|
9
|
-
var _excluded=["size","color"];var CompanyRegistrationIcon=function CompanyRegistrationIcon(_ref){var size=_ref.size,color=_ref.color,styledProps=_objectWithoutProperties(_ref,_excluded);var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsx(Svg,Object.assign({},styledProps,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:jsx(Path,{
|
|
9
|
+
var _excluded=["size","color"];var CompanyRegistrationIcon=function CompanyRegistrationIcon(_ref){var size=_ref.size,color=_ref.color,styledProps=_objectWithoutProperties(_ref,_excluded);var _useIconProps=useIconProps({size:size,color:color}),height=_useIconProps.height,width=_useIconProps.width,iconColor=_useIconProps.iconColor;return jsx(Svg,Object.assign({},styledProps,{width:width,height:height,viewBox:"0 0 24 24",fill:"none",children:jsx(Path,{d:"M10.9854 1.28303C12.3188 0.492859 14.0053 1.45378 14.0049 3.00372L14.0039 6.99979H19C20.1044 6.99985 20.9997 7.89548 21 8.99978V9.84157C20.9998 10.3937 20.5522 10.8416 20 10.8416C19.4478 10.8416 19.0002 10.3937 19 9.84157V8.99978H14.0029L14 20.9997H22L22.1025 21.0046C22.6066 21.0559 22.9999 21.4821 23 21.9997C23 22.5174 22.6067 22.9435 22.1025 22.9948L22 22.9997H12.0186C12.0124 22.9998 12.0062 23.0007 12 23.0007H4C3.99381 23.0007 3.98762 22.9998 3.98145 22.9997H2C1.44772 22.9997 1 22.552 1 21.9997C1.00011 21.4475 1.44778 20.9997 2 20.9997V7.74686C2.00002 7.04054 2.37287 6.38632 2.98047 6.02616L10.9854 1.28303ZM4 7.74686V20.9997H12L12.0029 8.07303C12.0012 8.0489 12 8.02436 12 7.99979C12 7.97482 12.0011 7.95008 12.0029 7.92557L12.0049 3.00274L4 7.74686ZM9 16.9997C9.55222 16.9997 9.99989 17.4475 10 17.9997C10 18.552 9.55228 18.9997 9 18.9997H7L6.89746 18.9948C6.39334 18.9435 6 18.5174 6 17.9997C6.0001 17.4821 6.3934 17.0559 6.89746 17.0046L7 16.9997H9ZM21.2637 12.5544C21.6375 12.1481 22.2703 12.1221 22.6768 12.4959C23.0831 12.8697 23.1101 13.5025 22.7363 13.9089L18.6943 18.3015L18.6221 18.3728C18.4453 18.5295 18.2178 18.6198 17.9795 18.6247C17.7072 18.6304 17.4446 18.5243 17.252 18.3318L15.4355 16.5163C15.045 16.1258 15.045 15.4918 15.4355 15.1013C15.8259 14.711 16.4591 14.7112 16.8496 15.1013L17.9287 16.1804L21.2637 12.5544ZM9 12.9998C9.55222 12.9998 9.99989 13.4476 10 13.9998C10 14.552 9.55228 14.9997 9 14.9997H7L6.89746 14.9949C6.39334 14.9435 6 14.5174 6 13.9998C6.0001 13.4822 6.3934 13.056 6.89746 13.0046L7 12.9998H9ZM9 8.99978C9.55222 8.99978 9.99989 9.44758 10 9.99978C10 10.5521 9.55228 10.9998 9 10.9998H7L6.89746 10.9949C6.39334 10.9435 6 10.5174 6 9.99978C6.0001 9.48219 6.3934 9.05599 6.89746 9.00466L7 8.99978H9Z",fill:iconColor})}));};
|
|
10
10
|
|
|
11
11
|
export { CompanyRegistrationIcon as default };
|
|
12
12
|
//# sourceMappingURL=CompanyRegistrationIcon.js.map
|
package/build/lib/native/components/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompanyRegistrationIcon.js","sources":["../../../../../../src/components/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.tsx"],"sourcesContent":["import { Svg, Path } from '../_Svg';\nimport type { IconComponent } from '..';\nimport useIconProps from '../useIconProps';\n\nconst CompanyRegistrationIcon: IconComponent = ({ size, color, ...styledProps }) => {\n const { height, width, iconColor } = useIconProps({ size, color });\n\n return (\n <Svg {...styledProps} width={width} height={height} viewBox=\"0 0 24 24\" fill=\"none\">\n <Path\n
|
|
1
|
+
{"version":3,"file":"CompanyRegistrationIcon.js","sources":["../../../../../../src/components/Icons/CompanyRegistrationIcon/CompanyRegistrationIcon.tsx"],"sourcesContent":["import { Svg, Path } from '../_Svg';\nimport type { IconComponent } from '..';\nimport useIconProps from '../useIconProps';\n\nconst CompanyRegistrationIcon: IconComponent = ({ size, color, ...styledProps }) => {\n const { height, width, iconColor } = useIconProps({ size, color });\n\n return (\n <Svg {...styledProps} width={width} height={height} viewBox=\"0 0 24 24\" fill=\"none\">\n <Path\n d=\"M10.9854 1.28303C12.3188 0.492859 14.0053 1.45378 14.0049 3.00372L14.0039 6.99979H19C20.1044 6.99985 20.9997 7.89548 21 8.99978V9.84157C20.9998 10.3937 20.5522 10.8416 20 10.8416C19.4478 10.8416 19.0002 10.3937 19 9.84157V8.99978H14.0029L14 20.9997H22L22.1025 21.0046C22.6066 21.0559 22.9999 21.4821 23 21.9997C23 22.5174 22.6067 22.9435 22.1025 22.9948L22 22.9997H12.0186C12.0124 22.9998 12.0062 23.0007 12 23.0007H4C3.99381 23.0007 3.98762 22.9998 3.98145 22.9997H2C1.44772 22.9997 1 22.552 1 21.9997C1.00011 21.4475 1.44778 20.9997 2 20.9997V7.74686C2.00002 7.04054 2.37287 6.38632 2.98047 6.02616L10.9854 1.28303ZM4 7.74686V20.9997H12L12.0029 8.07303C12.0012 8.0489 12 8.02436 12 7.99979C12 7.97482 12.0011 7.95008 12.0029 7.92557L12.0049 3.00274L4 7.74686ZM9 16.9997C9.55222 16.9997 9.99989 17.4475 10 17.9997C10 18.552 9.55228 18.9997 9 18.9997H7L6.89746 18.9948C6.39334 18.9435 6 18.5174 6 17.9997C6.0001 17.4821 6.3934 17.0559 6.89746 17.0046L7 16.9997H9ZM21.2637 12.5544C21.6375 12.1481 22.2703 12.1221 22.6768 12.4959C23.0831 12.8697 23.1101 13.5025 22.7363 13.9089L18.6943 18.3015L18.6221 18.3728C18.4453 18.5295 18.2178 18.6198 17.9795 18.6247C17.7072 18.6304 17.4446 18.5243 17.252 18.3318L15.4355 16.5163C15.045 16.1258 15.045 15.4918 15.4355 15.1013C15.8259 14.711 16.4591 14.7112 16.8496 15.1013L17.9287 16.1804L21.2637 12.5544ZM9 12.9998C9.55222 12.9998 9.99989 13.4476 10 13.9998C10 14.552 9.55228 14.9997 9 14.9997H7L6.89746 14.9949C6.39334 14.9435 6 14.5174 6 13.9998C6.0001 13.4822 6.3934 13.056 6.89746 13.0046L7 12.9998H9ZM9 8.99978C9.55222 8.99978 9.99989 9.44758 10 9.99978C10 10.5521 9.55228 10.9998 9 10.9998H7L6.89746 10.9949C6.39334 10.9435 6 10.5174 6 9.99978C6.0001 9.48219 6.3934 9.05599 6.89746 9.00466L7 8.99978H9Z\"\n fill={iconColor}\n />\n </Svg>\n );\n};\n\nexport default CompanyRegistrationIcon;\n"],"names":["CompanyRegistrationIcon","_ref","size","color","styledProps","_objectWithoutProperties","_excluded","_useIconProps","useIconProps","height","width","iconColor","_jsx","Svg","Object","assign","viewBox","fill","children","Path","d"],"mappings":";;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,MAAA,CAAA,OAAA,CAAA,CAIM,IAAAA,uBAAsC,CAAG,SAAzCA,uBAAsCA,CAAAC,IAAA,CAAwC,CAAA,IAAlCC,IAAI,CAAAD,IAAA,CAAJC,IAAI,CAAEC,KAAK,CAAAF,IAAA,CAALE,KAAK,CAAKC,WAAW,CAAAC,wBAAA,CAAAJ,IAAA,CAAAK,SAAA,CAAA,CAC3E,IAAAC,aAAA,CAAqCC,YAAY,CAAC,CAAEN,IAAI,CAAJA,IAAI,CAAEC,KAAK,CAALA,KAAM,CAAC,CAAC,CAA1DM,MAAM,CAAAF,aAAA,CAANE,MAAM,CAAEC,KAAK,CAAAH,aAAA,CAALG,KAAK,CAAEC,SAAS,CAAAJ,aAAA,CAATI,SAAS,CAEhC,OACEC,GAAA,CAACC,GAAG,CAAAC,MAAA,CAAAC,MAAA,CAAKX,EAAAA,CAAAA,WAAW,CAAEM,CAAAA,KAAK,CAAEA,KAAM,CAACD,MAAM,CAAEA,MAAO,CAACO,OAAO,CAAC,WAAW,CAACC,IAAI,CAAC,MAAM,CAAAC,QAAA,CACjFN,GAAA,CAACO,IAAI,CACHC,CAAAA,CAAC,CAAC,stDAAstD,CACxtDH,IAAI,CAAEN,SAAU,CACjB,CAAC,CACC,CAAA,CAAC,CAEV;;;;"}
|