@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee
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/common/closeButton/CloseButton.messages.js +2 -2
- package/build/common/closeButton/CloseButton.messages.js.map +1 -1
- package/build/common/closeButton/CloseButton.messages.mjs +2 -2
- package/build/common/closeButton/CloseButton.messages.mjs.map +1 -1
- package/build/common/closeButton/CloseButton.mjs +2 -2
- package/build/common/closeButton/CloseButton.mjs.map +1 -1
- package/build/drawer/Drawer.js +9 -18
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +9 -18
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/main.css +476 -223
- package/build/modal/Modal.js +21 -20
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs +21 -20
- package/build/modal/Modal.mjs.map +1 -1
- package/build/select/Select.js +1 -2
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +1 -2
- package/build/select/Select.mjs.map +1 -1
- package/build/styles/accordion/Accordion.css +2 -6
- package/build/styles/actionButton/ActionButton.css +12 -4
- package/build/styles/avatar/Avatar.css +13 -10
- package/build/styles/avatarView/AvatarView.css +5 -3
- package/build/styles/avatarView/Dot.css +2 -1
- package/build/styles/button/Button.css +1 -0
- package/build/styles/card/Card.css +2 -2
- package/build/styles/carousel/Carousel.css +5 -2
- package/build/styles/checkboxButton/CheckboxButton.css +0 -1
- package/build/styles/chips/Chip.css +31 -12
- package/build/styles/circularButton/CircularButton.css +6 -0
- package/build/styles/common/Option/Option.css +2 -2
- package/build/styles/common/RadioButton/RadioButton.css +1 -1
- package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
- package/build/styles/common/card/Card.css +1 -1
- package/build/styles/common/closeButton/CloseButton.css +7 -2
- package/build/styles/criticalBanner/CriticalCommsBanner.css +4 -0
- package/build/styles/dateLookup/DateLookup.css +5 -3
- package/build/styles/definitionList/DefinitionList.css +1 -1
- package/build/styles/divider/Divider.css +1 -1
- package/build/styles/drawer/Drawer.css +58 -11
- package/build/styles/emphasis/Emphasis.css +4 -5
- package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
- package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +1 -0
- package/build/styles/expressiveMoneyInput/chevron/Chevron.css +1 -0
- package/build/styles/flowNavigation/FlowNavigation.css +2 -1
- package/build/styles/header/Header.css +2 -2
- package/build/styles/iconButton/IconButton.css +27 -4
- package/build/styles/inputs/Input.css +5 -5
- package/build/styles/inputs/InputGroup.css +3 -2
- package/build/styles/inputs/SelectInput.css +14 -13
- package/build/styles/inputs/TextArea.css +5 -5
- package/build/styles/instructionsList/InstructionsList.css +2 -0
- package/build/styles/listItem/ListItem.css +22 -8
- package/build/styles/logo/Logo.css +2 -0
- package/build/styles/main.css +476 -223
- package/build/styles/modal/Modal.css +68 -6
- package/build/styles/moneyInput/MoneyInput.css +2 -2
- package/build/styles/navigationOption/NavigationOption.css +1 -3
- package/build/styles/nudge/Nudge.css +1 -1
- package/build/styles/overlayHeader/OverlayHeader.css +2 -1
- package/build/styles/popover/Popover.css +2 -2
- package/build/styles/progress/Progress.css +3 -3
- package/build/styles/progressBar/ProgressBar.css +2 -2
- package/build/styles/promoCard/PromoCard.css +3 -3
- package/build/styles/prompt/InlinePrompt/InlinePrompt.css +39 -3
- package/build/styles/segmentedControl/SegmentedControl.css +6 -2
- package/build/styles/select/Select.css +25 -41
- package/build/styles/slidingPanel/SlidingPanel.css +4 -4
- package/build/styles/snackbar/Snackbar.css +4 -4
- package/build/styles/statusIcon/StatusIcon.css +10 -2
- package/build/styles/stepper/Stepper.css +4 -4
- package/build/styles/summary/Summary.css +5 -2
- package/build/styles/switch/Switch.css +3 -2
- package/build/styles/table/Table.css +13 -5
- package/build/styles/tabs/Tabs.css +10 -9
- package/build/styles/tile/Tile.css +8 -5
- package/build/styles/typeahead/Typeahead.css +2 -1
- package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -4
- package/build/styles/upload/Upload.css +1 -1
- package/build/styles/uploadInput/uploadButton/UploadButton.css +4 -2
- package/build/styles/uploadInput/uploadItem/UploadItem.css +8 -4
- package/build/types/drawer/Drawer.d.ts.map +1 -1
- package/build/types/modal/Modal.d.ts.map +1 -1
- package/build/types/select/Select.d.ts +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/package.json +12 -7
- package/src/accordion/Accordion.css +2 -6
- package/src/accordion/Accordion.less +0 -7
- package/src/accordion/Accordion.story.tsx +1 -1
- package/src/actionButton/ActionButton.css +12 -4
- package/src/avatar/Avatar.css +13 -10
- package/src/avatarLayout/AvatarLayout.story.tsx +0 -1
- package/src/avatarView/AvatarView.css +5 -3
- package/src/avatarView/AvatarView.story.tsx +0 -1
- package/src/avatarView/Dot.css +2 -1
- package/src/button/Button.css +1 -0
- package/src/card/Card.css +2 -2
- package/src/carousel/Carousel.css +5 -2
- package/src/checkboxButton/CheckboxButton.css +0 -1
- package/src/chips/Chip.css +31 -12
- package/src/circularButton/CircularButton.css +6 -0
- package/src/common/Option/Option.css +2 -2
- package/src/common/RadioButton/RadioButton.css +1 -1
- package/src/common/bottomSheet/BottomSheet.css +1 -1
- package/src/common/card/Card.css +1 -1
- package/src/common/closeButton/CloseButton.css +7 -2
- package/src/criticalBanner/CriticalCommsBanner.css +4 -0
- package/src/dateLookup/DateLookup.css +5 -3
- package/src/definitionList/DefinitionList.css +1 -1
- package/src/display/Display.story.tsx +0 -1
- package/src/divider/Divider.css +1 -1
- package/src/drawer/Drawer.css +58 -11
- package/src/drawer/Drawer.less +70 -14
- package/src/drawer/Drawer.story.tsx +100 -158
- package/src/drawer/Drawer.tsx +7 -26
- package/src/emphasis/Emphasis.css +4 -5
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -0
- package/src/expressiveMoneyInput/amountInput/AmountInput.css +1 -0
- package/src/expressiveMoneyInput/chevron/Chevron.css +1 -0
- package/src/flowNavigation/FlowNavigation.css +2 -1
- package/src/header/Header.css +2 -2
- package/src/iconButton/IconButton.css +27 -4
- package/src/iconButton/IconButton.story.tsx +0 -1
- package/src/inputs/Input.css +5 -5
- package/src/inputs/InputGroup.css +3 -2
- package/src/inputs/SelectInput.css +14 -13
- package/src/inputs/TextArea.css +5 -5
- package/src/instructionsList/InstructionsList.css +2 -0
- package/src/listItem/ListItem.css +22 -8
- package/src/logo/Logo.css +2 -0
- package/src/main.css +476 -223
- package/src/modal/Modal.css +68 -6
- package/src/modal/Modal.less +76 -6
- package/src/modal/Modal.tsx +23 -23
- package/src/moneyInput/MoneyInput.css +2 -2
- package/src/navigationOption/NavigationOption.css +1 -3
- package/src/nudge/Nudge.css +1 -1
- package/src/overlayHeader/OverlayHeader.css +2 -1
- package/src/popover/Popover.css +2 -2
- package/src/progress/Progress.css +3 -3
- package/src/progressBar/ProgressBar.css +2 -2
- package/src/promoCard/PromoCard.css +3 -3
- package/src/prompt/InlinePrompt/InlinePrompt.css +39 -3
- package/src/segmentedControl/SegmentedControl.css +6 -2
- package/src/select/Select.css +25 -41
- package/src/select/Select.less +0 -25
- package/src/select/Select.tsx +1 -6
- package/src/slidingPanel/SlidingPanel.css +4 -4
- package/src/snackbar/Snackbar.css +4 -4
- package/src/snackbar/Snackbar.less +2 -4
- package/src/statusIcon/StatusIcon.css +10 -2
- package/src/stepper/Stepper.css +4 -4
- package/src/summary/Summary.css +5 -2
- package/src/switch/Switch.css +3 -2
- package/src/table/Table.css +13 -5
- package/src/tabs/Tabs.css +10 -9
- package/src/tile/Tile.css +8 -5
- package/src/typeahead/Typeahead.css +2 -1
- package/src/typeahead/typeaheadOption/TypeaheadOption.css +1 -4
- package/src/typeahead/typeaheadOption/TypeaheadOption.less +0 -6
- package/src/upload/Upload.css +1 -1
- package/src/uploadInput/uploadButton/UploadButton.css +4 -2
- package/src/uploadInput/uploadItem/UploadItem.css +8 -4
|
@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var reactIntl = require('react-intl');
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var messages = reactIntl.defineMessages({
|
|
8
8
|
ariaLabel: {
|
|
9
9
|
id: "neptune.CloseButton.ariaLabel"
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
|
|
13
|
-
exports.default =
|
|
13
|
+
exports.default = messages;
|
|
14
14
|
//# sourceMappingURL=CloseButton.messages.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,
|
|
1
|
+
{"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { defineMessages } from 'react-intl';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var messages = defineMessages({
|
|
4
4
|
ariaLabel: {
|
|
5
5
|
id: "neptune.CloseButton.ariaLabel"
|
|
6
6
|
}
|
|
7
7
|
});
|
|
8
8
|
|
|
9
|
-
export {
|
|
9
|
+
export { messages as default };
|
|
10
10
|
//# sourceMappingURL=CloseButton.messages.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,
|
|
1
|
+
{"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.CloseButton.ariaLabel',\n defaultMessage: 'Close',\n description: 'Description of close button',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { useIntl } from 'react-intl';
|
|
5
5
|
import { Size } from '../propsValues/size.mjs';
|
|
6
|
-
import
|
|
6
|
+
import messages from './CloseButton.messages.mjs';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
|
|
@@ -17,7 +17,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
|
|
|
17
17
|
tabIndex
|
|
18
18
|
}, reference) {
|
|
19
19
|
const intl = useIntl();
|
|
20
|
-
ariaLabel ??= intl.formatMessage(
|
|
20
|
+
ariaLabel ??= intl.formatMessage(messages.ariaLabel);
|
|
21
21
|
const Icon = filled ? CrossCircleFill : Cross;
|
|
22
22
|
return /*#__PURE__*/jsx("button", {
|
|
23
23
|
ref: reference,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'aria-label' | 'className' | 'onClick'\n> & {\n size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n filled?: boolean;\n isDisabled?: boolean;\n testId?: string;\n tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n {\n 'aria-label': ariaLabel,\n size = Size.MEDIUM,\n filled = false,\n className,\n onClick,\n isDisabled,\n testId,\n tabIndex,\n }: CloseButtonProps,\n reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n const intl = useIntl();\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const Icon = filled ? CrossCircleFill : Cross;\n\n return (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-close-button',\n 'close btn-link',\n 'text-no-decoration',\n {\n 'np-close-button--x-small': size === Size.EXTRA_SMALL,\n 'np-close-button--large': size === Size.MEDIUM,\n 'np-close-button--x-large': size === Size.LARGE,\n },\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-testid={testId}\n tabIndex={tabIndex}\n onClick={onClick}\n >\n <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n </button>\n );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAuBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,
|
|
1
|
+
{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'aria-label' | 'className' | 'onClick'\n> & {\n size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n filled?: boolean;\n isDisabled?: boolean;\n testId?: string;\n tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n {\n 'aria-label': ariaLabel,\n size = Size.MEDIUM,\n filled = false,\n className,\n onClick,\n isDisabled,\n testId,\n tabIndex,\n }: CloseButtonProps,\n reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n const intl = useIntl();\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const Icon = filled ? CrossCircleFill : Cross;\n\n return (\n <button\n ref={reference}\n type=\"button\"\n className={clsx(\n 'np-close-button',\n 'close btn-link',\n 'text-no-decoration',\n {\n 'np-close-button--x-small': size === Size.EXTRA_SMALL,\n 'np-close-button--large': size === Size.MEDIUM,\n 'np-close-button--x-large': size === Size.LARGE,\n },\n className,\n )}\n aria-label={ariaLabel}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n data-testid={testId}\n tabIndex={tabIndex}\n onClick={onClick}\n >\n <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n </button>\n );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAuBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,QAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,eAAe,GAAGC,KAAK;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,IAAI,KAAKC,IAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACqB;KAC3C,EACDlB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,GAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACwB,KAAK,IAAIzB,IAAI,KAAKC,IAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAG;AACzE,GAAQ,CAAC;AAEb,CAAC;;;;"}
|
package/build/drawer/Drawer.js
CHANGED
|
@@ -23,10 +23,7 @@ require('../common/propsValues/variant.js');
|
|
|
23
23
|
require('../common/propsValues/scroll.js');
|
|
24
24
|
require('../common/propsValues/markdownNodeType.js');
|
|
25
25
|
require('../common/fileType.js');
|
|
26
|
-
var
|
|
27
|
-
var reactIntl = require('react-intl');
|
|
28
|
-
var CloseButton_messages = require('../common/closeButton/CloseButton.messages.js');
|
|
29
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
26
|
+
var CloseButton = require('../common/closeButton/CloseButton.js');
|
|
30
27
|
require('@transferwise/neptune-validation');
|
|
31
28
|
require('../provider/direction/DirectionProvider.js');
|
|
32
29
|
var useLayout = require('../common/hooks/useLayout/useLayout.js');
|
|
@@ -35,7 +32,7 @@ var OverlayIdProvider = require('../provider/overlay/OverlayIdProvider.js');
|
|
|
35
32
|
var SlidingPanel = require('../slidingPanel/SlidingPanel.js');
|
|
36
33
|
var Title = require('../title/Title.js');
|
|
37
34
|
var logActionRequired = require('../utilities/logActionRequired.js');
|
|
38
|
-
var
|
|
35
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
39
36
|
|
|
40
37
|
function Drawer({
|
|
41
38
|
children,
|
|
@@ -49,7 +46,6 @@ function Drawer({
|
|
|
49
46
|
role = 'dialog',
|
|
50
47
|
'aria-labelledby': ariaLabelledBy
|
|
51
48
|
}) {
|
|
52
|
-
const intl = reactIntl.useIntl();
|
|
53
49
|
logActionRequired.logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
|
|
54
50
|
const {
|
|
55
51
|
isMobile
|
|
@@ -70,27 +66,22 @@ function Drawer({
|
|
|
70
66
|
"aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
|
|
71
67
|
className: clsx.clsx('np-drawer', className),
|
|
72
68
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
73
|
-
className: clsx.clsx('np-drawer-header',
|
|
69
|
+
className: clsx.clsx('np-drawer-header', {
|
|
70
|
+
'np-drawer-header--withborder': headerTitle
|
|
71
|
+
}),
|
|
74
72
|
children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title.default, {
|
|
75
73
|
id: titleId,
|
|
76
|
-
type: typography.Typography.
|
|
77
|
-
className: "np-drawer-title",
|
|
74
|
+
type: typography.Typography.TITLE_BODY,
|
|
78
75
|
children: headerTitle
|
|
79
|
-
}), /*#__PURE__*/jsxRuntime.jsx(
|
|
80
|
-
|
|
81
|
-
priority: "tertiary",
|
|
82
|
-
"aria-label": intl.formatMessage(CloseButton_messages.default.ariaLabel),
|
|
83
|
-
onClick: onClose,
|
|
84
|
-
children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
|
|
76
|
+
}), /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
|
|
77
|
+
onClick: onClose
|
|
85
78
|
})]
|
|
86
79
|
}), children && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
87
80
|
className: clsx.clsx('np-drawer-content'),
|
|
88
81
|
children: children
|
|
89
|
-
}), footerContent
|
|
82
|
+
}), footerContent && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
90
83
|
className: clsx.clsx('np-drawer-footer'),
|
|
91
84
|
children: footerContent
|
|
92
|
-
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
93
|
-
className: "m-t-3"
|
|
94
85
|
})]
|
|
95
86
|
})
|
|
96
87
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Bc,SAAUA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AAAc,CACrB,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACN,OAAO,CACT;EAED,MAAM;AAAEO,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACgB,IAAAA,QAAQ,EAAEf,SAAU;IAAAL,QAAA,eACxDkB,cAAA,CAACG,oBAAY,EAAA;AAACf,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGW,iBAAQ,CAACC,MAAM,GAAGhB,UAAS;AAAAP,MAAAA,QAAA,eACxEwB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGU,OAAO,GAAGa,SAAS,CAAE;AACvEzB,QAAAA,SAAS,EAAE0B,SAAI,CAAC,WAAW,EAAE1B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCwB,eAAA,CAAA,KAAA,EAAA;AACEvB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAExB;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAAA,CAEFG,WAAW,iBACVe,cAAA,CAACU,aAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA/B,YAAAA,QAAA,EAC7CG;AAAW,WACP,CACR,eACDe,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE7B;AAAQ,WAAA,CAChC;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIkB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,mBAAmB,CAAE;AAAA3B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIgB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,CAAE;AAAA3B,UAAAA,QAAA,EAAEE;AAAa,SAAM,CAAC;OAC9E;KACO;AAChB,GAAQ,CAAC;AAEb;;;;"}
|
package/build/drawer/Drawer.mjs
CHANGED
|
@@ -19,10 +19,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
19
19
|
import '../common/propsValues/scroll.mjs';
|
|
20
20
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
21
21
|
import '../common/fileType.mjs';
|
|
22
|
-
import {
|
|
23
|
-
import { useIntl } from 'react-intl';
|
|
24
|
-
import closeBtnMessages from '../common/closeButton/CloseButton.messages.mjs';
|
|
25
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
22
|
+
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
|
|
26
23
|
import '@transferwise/neptune-validation';
|
|
27
24
|
import '../provider/direction/DirectionProvider.mjs';
|
|
28
25
|
import { useLayout } from '../common/hooks/useLayout/useLayout.mjs';
|
|
@@ -31,7 +28,7 @@ import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider.mjs';
|
|
|
31
28
|
import SlidingPanel from '../slidingPanel/SlidingPanel.mjs';
|
|
32
29
|
import Title from '../title/Title.mjs';
|
|
33
30
|
import { logActionRequiredIf } from '../utilities/logActionRequired.mjs';
|
|
34
|
-
import
|
|
31
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
35
32
|
|
|
36
33
|
function Drawer({
|
|
37
34
|
children,
|
|
@@ -45,7 +42,6 @@ function Drawer({
|
|
|
45
42
|
role = 'dialog',
|
|
46
43
|
'aria-labelledby': ariaLabelledBy
|
|
47
44
|
}) {
|
|
48
|
-
const intl = useIntl();
|
|
49
45
|
logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
|
|
50
46
|
const {
|
|
51
47
|
isMobile
|
|
@@ -66,27 +62,22 @@ function Drawer({
|
|
|
66
62
|
"aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
|
|
67
63
|
className: clsx('np-drawer', className),
|
|
68
64
|
children: [/*#__PURE__*/jsxs("div", {
|
|
69
|
-
className: clsx('np-drawer-header',
|
|
65
|
+
className: clsx('np-drawer-header', {
|
|
66
|
+
'np-drawer-header--withborder': headerTitle
|
|
67
|
+
}),
|
|
70
68
|
children: [headerTitle && /*#__PURE__*/jsx(Title, {
|
|
71
69
|
id: titleId,
|
|
72
|
-
type: Typography.
|
|
73
|
-
className: "np-drawer-title",
|
|
70
|
+
type: Typography.TITLE_BODY,
|
|
74
71
|
children: headerTitle
|
|
75
|
-
}), /*#__PURE__*/jsx(
|
|
76
|
-
|
|
77
|
-
priority: "tertiary",
|
|
78
|
-
"aria-label": intl.formatMessage(closeBtnMessages.ariaLabel),
|
|
79
|
-
onClick: onClose,
|
|
80
|
-
children: /*#__PURE__*/jsx(Cross, {})
|
|
72
|
+
}), /*#__PURE__*/jsx(CloseButton, {
|
|
73
|
+
onClick: onClose
|
|
81
74
|
})]
|
|
82
75
|
}), children && /*#__PURE__*/jsx("div", {
|
|
83
76
|
className: clsx('np-drawer-content'),
|
|
84
77
|
children: children
|
|
85
|
-
}), footerContent
|
|
78
|
+
}), footerContent && /*#__PURE__*/jsx("div", {
|
|
86
79
|
className: clsx('np-drawer-footer'),
|
|
87
80
|
children: footerContent
|
|
88
|
-
}) : /*#__PURE__*/jsx("div", {
|
|
89
|
-
className: "m-t-3"
|
|
90
81
|
})]
|
|
91
82
|
})
|
|
92
83
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\
|
|
1
|
+
{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Bc,SAAUA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC;AAAc,CACrB,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACN,OAAO,CACT;EAED,MAAM;AAAEO,IAAAA;GAAU,GAAGC,SAAS,EAAE;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACgB,IAAAA,QAAQ,EAAEf,SAAU;IAAAL,QAAA,eACxDkB,GAAA,CAACG,YAAY,EAAA;AAACf,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGW,QAAQ,CAACC,MAAM,GAAGhB,QAAS;AAAAP,MAAAA,QAAA,eACxEwB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAA,EAAA,IAAU;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGU,OAAO,GAAGa,SAAS,CAAE;AACvEzB,QAAAA,SAAS,EAAE0B,IAAI,CAAC,WAAW,EAAE1B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCwB,IAAA,CAAA,KAAA,EAAA;AACEvB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAExB;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAAA,CAEFG,WAAW,iBACVe,GAAA,CAACU,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA/B,YAAAA,QAAA,EAC7CG;AAAW,WACP,CACR,eACDe,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE7B;AAAQ,WAAA,CAChC;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIkB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,mBAAmB,CAAE;AAAA3B,UAAAA,QAAA,EAAEA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIgB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,IAAI,CAAC,kBAAkB,CAAE;AAAA3B,UAAAA,QAAA,EAAEE;AAAa,SAAM,CAAC;OAC9E;KACO;AAChB,GAAQ,CAAC;AAEb;;;;"}
|