@transferwise/components 0.0.0-experimental-a90d366 → 0.0.0-experimental-9a8e986
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/drawer/Drawer.js
CHANGED
|
@@ -40,7 +40,7 @@ function Drawer({
|
|
|
40
40
|
id: overlayId,
|
|
41
41
|
role: role,
|
|
42
42
|
"aria-modal": true,
|
|
43
|
-
"aria-labelledby": ariaLabelledBy
|
|
43
|
+
"aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
|
|
44
44
|
className: clsx.clsx('np-drawer', className),
|
|
45
45
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
46
46
|
className: clsx.clsx('np-drawer-header', {
|
|
@@ -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 { 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} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\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}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={
|
|
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} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\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}>\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","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,cAAA,CAACE,oBAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGf,UAAS;AAAAN,MAAAA,QAAA,eACxEsB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,SAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,eAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,cAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,cAAA,CAACa,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
package/build/drawer/Drawer.mjs
CHANGED
|
@@ -38,7 +38,7 @@ function Drawer({
|
|
|
38
38
|
id: overlayId,
|
|
39
39
|
role: role,
|
|
40
40
|
"aria-modal": true,
|
|
41
|
-
"aria-labelledby": ariaLabelledBy
|
|
41
|
+
"aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
|
|
42
42
|
className: clsx('np-drawer', className),
|
|
43
43
|
children: [/*#__PURE__*/jsxs("div", {
|
|
44
44
|
className: clsx('np-drawer-header', {
|
|
@@ -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 { 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} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\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}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={
|
|
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} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\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}>\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","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,GAAA,CAACE,YAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGf,QAAS;AAAAN,MAAAA,QAAA,eACxEsB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,IAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,IAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,GAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,GAAA,CAACa,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-9a8e986",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
"rollup-preserve-directives": "^1.1.1",
|
|
94
94
|
"storybook": "^8.2.2",
|
|
95
95
|
"@transferwise/less-config": "3.1.0",
|
|
96
|
-
"@
|
|
97
|
-
"@
|
|
96
|
+
"@transferwise/neptune-css": "14.15.0",
|
|
97
|
+
"@wise/components-theming": "1.6.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
package/src/drawer/Drawer.tsx
CHANGED
|
@@ -54,7 +54,7 @@ export default function Drawer({
|
|
|
54
54
|
id={overlayId}
|
|
55
55
|
role={role}
|
|
56
56
|
aria-modal
|
|
57
|
-
aria-labelledby={
|
|
57
|
+
aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}
|
|
58
58
|
className={clsx('np-drawer', className)}
|
|
59
59
|
>
|
|
60
60
|
<div
|