@economic/taco 1.13.1 → 1.13.2
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/dist/esm/packages/taco/src/components/Dialog/components/Content.js +2 -2
- package/dist/esm/packages/taco/src/components/Dialog/components/Content.js.map +1 -1
- package/dist/taco.cjs.development.js +1 -1
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { forwardRef, createElement } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { Backdrop } from '../../Backdrop/Backdrop.js';
|
|
4
|
-
import { getDialogPositionClassnames,
|
|
4
|
+
import { getDialogPositionClassnames, getDialogSizeClassnames } from '../util.js';
|
|
5
5
|
import { IconButton } from '../../IconButton/IconButton.js';
|
|
6
6
|
import { useLocalization } from '../../Provider/Provider.js';
|
|
7
7
|
import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
|
|
@@ -56,7 +56,7 @@ const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
|
|
|
56
56
|
const {
|
|
57
57
|
texts
|
|
58
58
|
} = useLocalization();
|
|
59
|
-
const className = cn('relative', getDialogPositionClassnames(),
|
|
59
|
+
const className = cn('relative bg-white animate-[fade-in_150ms]', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size));
|
|
60
60
|
const containerClassName = cn('bg-white p-6 rounded relative z-10', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
|
|
61
61
|
'rounded-b-none': !!dialog.elements.extra
|
|
62
62
|
}, props.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames
|
|
1
|
+
{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { DialogContext, useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { getDialogPositionClassnames, getDialogSizeClassnames } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n close: () => void;\n drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n const className = cn('text-center', props.className);\n return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn('mt-8 flex justify-end', props.className);\n return (\n <div {...props} className={className} ref={ref}>\n {props.children}\n </div>\n );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n const dialog = useCurrentDialog();\n\n return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('close'));\n };\n\n return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n /** An accessible label to be announced when the dialog is opened */\n 'aria-label': string;\n children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n const dialog = useCurrentDialog();\n const internalRef = useProxiedRef<HTMLDivElement>(ref);\n const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n const { texts } = useLocalization();\n\n const className = cn(\n 'relative bg-white animate-[fade-in_150ms]',\n getDialogPositionClassnames(),\n getDialogSizeClassnames(dialog.size)\n );\n\n const containerClassName = cn(\n 'bg-white p-6 rounded relative z-10',\n 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n {\n 'rounded-b-none': !!dialog.elements.extra,\n },\n props.className\n );\n\n const handleEscapeKeyDown = (event: KeyboardEvent) => {\n if (!dialog.closeOnEscape) {\n event.preventDefault();\n } else if (dialog.onClose) {\n dialog.onClose();\n }\n };\n\n // the chosen behaviour in taco is that outside clicks do not close the dialog\n const handleInteractOutside = event => event.preventDefault();\n\n let output;\n\n if (typeof props.children === 'function') {\n output = (\n <DialogPrimitive.Close asChild>\n <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n </DialogPrimitive.Close>\n );\n } else {\n output = props.children;\n }\n\n return (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay asChild>\n <Backdrop>\n <DialogPrimitive.Content\n {...props}\n className={className}\n onEscapeKeyDown={handleEscapeKeyDown}\n onInteractOutside={handleInteractOutside}\n ref={internalRef}\n style={{\n ...props.style,\n left: dialog.draggable ? `${position.x}px` : undefined,\n top: dialog.draggable ? `${position.y}px` : undefined,\n }}>\n <div className={containerClassName} data-taco=\"dialog\">\n {output}\n {dialog.draggable && (\n <div\n {...dragHandleProps}\n aria-label={texts.dialog.drag}\n className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n />\n )}\n {dialog.showCloseButton ? (\n <DialogPrimitive.Close onClick={dialog.onClose} asChild>\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.dialog.close}\n className=\"absolute top-0 right-0 mt-2 mr-2\"\n icon=\"close\"\n />\n </DialogPrimitive.Close>\n ) : null}\n </div>\n {dialog.elements.drawer}\n {dialog.elements.extra}\n </DialogPrimitive.Content>\n </Backdrop>\n </DialogPrimitive.Overlay>\n </DialogPrimitive.Portal>\n );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useProxiedRef","position","handleProps","dragHandleProps","useDraggable","texts","useLocalization","getDialogPositionClassnames","getDialogSizeClassnames","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","style","left","draggable","x","undefined","top","y","drag","showCloseButton","IconButton","appearance","icon"],"mappings":";;;;;;;;;;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASC,WAAW,CAACC,KAAuB,EAAEC,GAAkC;EAClH,MAAMC,SAAS,GAAGC,EAAE,CAAC,aAAa,EAAEH,KAAK,CAACE,SAAS,CAAC;EACpD,oBAAOJ,cAACM,OAAqB,oBAAKJ,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAC/E,CAAC;MAGYI,MAAM,gBAAGP,UAAgB,CAAC,SAASQ,YAAY,CAACN,KAAwB,EAAEC,GAA8B;EACjH,MAAMC,SAAS,GAAGC,EAAE,CAAC,uBAAuB,EAAEH,KAAK,CAACE,SAAS,CAAC;EAC9D,oBACIJ,uCAASE,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;MACtCD,KAAK,CAACO,QAAQ,CACb;AAEd,CAAC;MAIYC,KAAK,gBAAGV,UAAgB,CAAC,SAASW,WAAW,CAACT,KAAuB,EAAEC,GAAiC;EACjH,MAAMS,MAAM,GAAGC,gBAAgB,EAAE;EAEjC,oBAAOb,cAACM,OAAqB;IAACQ,OAAO,EAAEF,MAAM,CAACG;KAAab,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEa,OAAO;KAAG;AAC1F,CAAC;AAED,MAAMC,iBAAiB,gBAAGjB,UAAgB,CAAC,SAASiB,iBAAiB,CAAC;EAAER,QAAQ;EAAEK,OAAO;EAAEI;CAAkB,EAAEf,GAAG;EAC9G,MAAMgB,KAAK,GAAG;IACVL,OAAO,CAAC,IAAIM,WAAW,CAAC,OAAO,CAAC,CAAC;GACpC;EAED,OAAOX,QAAQ,CAAC;IAAEU,KAAK;IAAEhB,GAAG;IAAE,GAAGe;GAAa,CAAC;AACnD,CAAC,CAAC;MAOWG,OAAO,gBAAGrB,UAAgB,CAAC,SAASsB,aAAa,CAACpB,KAAyB,EAAEC,GAA8B;EACpH,MAAMS,MAAM,GAAGC,gBAAgB,EAAE;EACjC,MAAMU,WAAW,GAAGC,aAAa,CAAiBrB,GAAG,CAAC;EACtD,MAAM;IAAEsB,QAAQ;IAAEC,WAAW,EAAEC;GAAiB,GAAGC,YAAY,CAACL,WAAW,CAAC;EAC5E,MAAM;IAAEM;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAM1B,SAAS,GAAGC,EAAE,CAChB,2CAA2C,EAC3C0B,2BAA2B,EAAE,EAC7BC,uBAAuB,CAACpB,MAAM,CAACqB,IAAI,CAAC,CACvC;EAED,MAAMC,kBAAkB,GAAG7B,EAAE,CACzB,oCAAoC,EACpC,sEAAsE,EACtE;IACI,gBAAgB,EAAE,CAAC,CAACO,MAAM,CAACuB,QAAQ,CAACC;GACvC,EACDlC,KAAK,CAACE,SAAS,CAClB;EAED,MAAMiC,mBAAmB,GAAIC,KAAoB;IAC7C,IAAI,CAAC1B,MAAM,CAAC2B,aAAa,EAAE;MACvBD,KAAK,CAACE,cAAc,EAAE;KACzB,MAAM,IAAI5B,MAAM,CAACG,OAAO,EAAE;MACvBH,MAAM,CAACG,OAAO,EAAE;;GAEvB;;EAGD,MAAM0B,qBAAqB,GAAGH,KAAK,IAAIA,KAAK,CAACE,cAAc,EAAE;EAE7D,IAAIE,MAAM;EAEV,IAAI,OAAOxC,KAAK,CAACO,QAAQ,KAAK,UAAU,EAAE;IACtCiC,MAAM,gBACF1C,cAACM,OAAqB;MAACU,OAAO;oBAC1BhB,cAACiB,iBAAiB;MAACC,WAAW,EAAE;QAAEyB,MAAM,EAAE/B,MAAM,CAAC+B;;OAAWzC,KAAK,CAACO,QAAQ,CAAqB,CAEtG;GACJ,MAAM;IACHiC,MAAM,GAAGxC,KAAK,CAACO,QAAQ;;EAG3B,oBACIT,cAACM,MAAsB,qBACnBN,cAACM,OAAuB;IAACU,OAAO;kBAC5BhB,cAAC4C,QAAQ,qBACL5C,cAACM,SAAuB,oBAChBJ,KAAK;IACTE,SAAS,EAAEA,SAAS;IACpByC,eAAe,EAAER,mBAAmB;IACpCS,iBAAiB,EAAEL,qBAAqB;IACxCtC,GAAG,EAAEoB,WAAW;IAChBwB,KAAK,EAAE;MACH,GAAG7C,KAAK,CAAC6C,KAAK;MACdC,IAAI,EAAEpC,MAAM,CAACqC,SAAS,MAAMxB,QAAQ,CAACyB,KAAK,GAAGC,SAAS;MACtDC,GAAG,EAAExC,MAAM,CAACqC,SAAS,MAAMxB,QAAQ,CAAC4B,KAAK,GAAGF;;mBAEhDnD;IAAKI,SAAS,EAAE8B,kBAAkB;iBAAY;KACzCQ,MAAM,EACN9B,MAAM,CAACqC,SAAS,iBACbjD,uCACQ2B,eAAe;kBACPE,KAAK,CAACjB,MAAM,CAAC0C,IAAI;IAC7BlD,SAAS,EAAC;KAEjB,EACAQ,MAAM,CAAC2C,eAAe,gBACnBvD,cAACM,OAAqB;IAACQ,OAAO,EAAEF,MAAM,CAACG,OAAO;IAAEC,OAAO;kBACnDhB,cAACwD,UAAU;IACPC,UAAU,EAAC,UAAU;kBACT5B,KAAK,CAACjB,MAAM,CAACO,KAAK;IAC9Bf,SAAS,EAAC,kCAAkC;IAC5CsD,IAAI,EAAC;IACP,CACkB,GACxB,IAAI,CACN,EACL9C,MAAM,CAACuB,QAAQ,CAACQ,MAAM,EACtB/B,MAAM,CAACuB,QAAQ,CAACC,KAAK,CACA,CACnB,CACW,CACL;AAEjC,CAAC;;;;"}
|
|
@@ -5424,7 +5424,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
|
|
|
5424
5424
|
const {
|
|
5425
5425
|
texts
|
|
5426
5426
|
} = useLocalization();
|
|
5427
|
-
const className = cn('relative', getDialogPositionClassnames(),
|
|
5427
|
+
const className = cn('relative bg-white animate-[fade-in_150ms]', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size));
|
|
5428
5428
|
const containerClassName = cn('bg-white p-6 rounded relative z-10', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
|
|
5429
5429
|
'rounded-b-none': !!dialog.elements.extra
|
|
5430
5430
|
}, props.className);
|