@atom-learning/components 6.16.0 → 6.16.1-beta.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/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/toast/ToastProvider.js +2 -1
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +3 -2
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -1
- package/src/index.css +2 -0
|
@@ -106,7 +106,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
|
|
|
106
106
|
hasTooltip: false,
|
|
107
107
|
size: "md",
|
|
108
108
|
theme: "neutral",
|
|
109
|
-
className: "
|
|
109
|
+
className: "top-safe-offset-4 right-safe-offset-4 absolute size-12"
|
|
110
110
|
}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), React$1.Children.map(children, (child) => child?.type !== DialogBackground && child))));
|
|
111
111
|
//#endregion
|
|
112
112
|
export { DialogContent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n },\n layout: {\n panel: ['flex', 'flex-col', 'p-0']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"
|
|
1
|
+
{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n },\n layout: {\n panel: ['flex', 'flex-col', 'p-0']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"top-safe-offset-4 right-safe-offset-4 absolute size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;GAAM,EACnC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n base: ['fixed'
|
|
1
|
+
{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n base: [\n 'fixed',\n 'z-2147483647',\n 'inset-2',\n 'pointer-events-none',\n 'top-safe-or-2',\n 'sm:top-safe-or-3'\n ]\n})\n\nconst ToastWrapper = styled('div', {\n base: [\n 'absolute',\n 'w-full',\n 'flex',\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'box-border',\n 'min-h-12',\n '[--slide-opacity-out:0]',\n '[--slide-direction-out-y:-100%]'\n ],\n variants: {\n visible: {\n true: ['motion-safe:animate-slide-direction-in'],\n false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n }\n }\n})\n\nexport const ToastProvider = ({\n children,\n className\n}: React.PropsWithChildren<{ className?: string }>) => {\n const { toasts, handlers } = useToaster()\n const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n return (\n <>\n <ToastProviderBase\n onMouseEnter={startPause}\n onMouseLeave={endPause}\n className={className}\n >\n {toasts.map((toast) => {\n const { message: children } = toast\n\n const offset = calculateOffset(toast.id, {\n reverseOrder: true,\n margin: 8\n })\n\n const ref = (el: HTMLDivElement | null) => {\n if (el && toast.height === undefined) {\n updateHeight(toast.id, el.getBoundingClientRect().height)\n }\n }\n\n return (\n <ToastWrapper\n key={toast.id}\n ref={ref}\n visible={toast.visible}\n role={toast.role}\n aria-live={toast.ariaLive}\n style={{ '--offset': `${offset}px` }}\n className=\"top-(--offset)\"\n >\n <ToastContext.Provider value={toast}>\n {typeof children === 'function' ? (\n children(toast)\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <Toast className=\"w-100\">\n {toast.type === 'error' && <Toast.Icon is={Error} />}\n <Text>{children}</Text>\n <Spacer />\n <Toast.Close />\n </Toast>\n )}\n </ToastContext.Provider>\n </ToastWrapper>\n )\n })}\n </ToastProviderBase>\n {children}\n </>\n )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;AAcA,IAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC;AAEF,IAAa,iBAAiB,EAC5B,UACA,gBACqD;CACrD,MAAM,EAAE,QAAQ,aAAa,YAAY;CACzC,MAAM,EAAE,YAAY,UAAU,iBAAiB,iBAAiB;AAEhE,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,mBAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,OAAO,KAAK,UAAU;EACrB,MAAM,EAAE,SAAS,aAAa;EAE9B,MAAM,SAAS,gBAAgB,MAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;EAEF,MAAM,OAAO,OAA8B;AACzC,OAAI,MAAM,MAAM,WAAW,KAAA,EACzB,cAAa,MAAM,IAAI,GAAG,uBAAuB,CAAC,OAAO;;AAI7D,SACE,wBAAA,cAAC,cAAD;GACE,KAAK,MAAM;GACN;GACL,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,aAAW,MAAM;GACjB,OAAO,EAAE,YAAY,GAAG,OAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,wBAAA,cAAC,aAAa,UAAd,EAAuB,OAAO,OAaN,EAZrB,OAAO,aAAa,aACnB,SAAS,MAAM,GACb,QAAM,eAAe,SAAS,GAChC,WAEA,wBAAA,cAAC,OAAD,EAAO,WAAU,SAKT,EAJL,MAAM,SAAS,WAAW,wBAAA,cAAC,MAAM,MAAP,EAAY,IAAI,OAAS,CAAA,EACpD,wBAAA,cAAC,MAAA,MAAM,SAAgB,EACvB,wBAAA,cAAC,QAAA,KAAS,EACV,wBAAA,cAAC,MAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,SACA;;AAIP,cAAc,cAAc"}
|