@atom-learning/components 2.38.0 → 2.38.1
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/CHANGELOG.md +4 -3
- package/dist/components/action-icon/ActionIcon.js +1 -1
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/popover/PopoverContent.js +1 -1
- package/dist/components/popover/PopoverContent.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
## [2.38.1](https://github.com/Atom-Learning/components/compare/v2.38.0...v2.38.1) (2023-02-28)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* remove extra span around returned children ([864da8b](https://github.com/Atom-Learning/components/commit/864da8be971a2fa59eb6b34bde2e8edf7b37b894))
|
|
7
|
+
* remove tooltip in dialog close and popover ([069c63a](https://github.com/Atom-Learning/components/commit/069c63a25fdea1a6806b69c15b71d2a5c9916d8f))
|
|
7
8
|
|
|
8
9
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
10
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{darken as o}from"color2k";import
|
|
1
|
+
import{darken as o}from"color2k";import b from"invariant";import*as e from"react";import{styled as v,theme as n}from"../../stitches.js";import{ActionIconSizeMap as M}from"./ActionIcon.constants.js";import{Tooltip as $}from"../tooltip/Tooltip.js";import{Icon as u}from"../icon/Icon.js";const l=(r,a,s)=>({bg:"transparent",color:r,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:s},"&[disabled]":{color:"$tonal400",cursor:"not-allowed"}}),c=(r,a,s)=>({bg:r,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:a,color:"white"},"&:not(:disabled):active":{bg:s},"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"}}),p=(r,a,s)=>({border:"1px solid",borderColor:"currentColor",color:r,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:s},"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"}}),C=v("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",transition:"all 100ms ease-out",variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"neutral",appearance:"simple",css:l("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:l("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"simple",css:l("$primaryDark",o(n.colors.primaryDark.value,.1),o(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"simple",css:l("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:l("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:l("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:c("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"solid",css:c("$primaryDark",o(n.colors.primaryDark.value,.1),o(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:c("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:c("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:c("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"outline",css:p("$primaryDark",o(n.colors.primaryDark.value,.1),o(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"outline",css:p("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:p("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:p("$danger","$dangerMid","$dangerDark")}]}),z=({hasTooltip:r,label:a,tooltipSide:s,children:t})=>r?e.createElement($,null,e.createElement($.Trigger,{asChild:!0},t),e.createElement($.Content,{side:s},a)):e.createElement(e.Fragment,null,t),d=e.forwardRef(({children:r,theme:a="primary",appearance:s="simple",size:t="sm",label:y,href:h,disabled:m,hasTooltip:k=!0,tooltipSide:D,...w},f)=>{const g=`A single ${u.displayName} component is permitted as a child of ${d.displayName}`;return b(e.Children.count(r)===1,g),e.createElement(z,{hasTooltip:k,label:y,tooltipSide:D},e.createElement(C,{...w,...h?{as:"a",href:m?null:h,onClick:void 0,"aria-disabled":!!m}:{type:"button"},"aria-label":y,theme:a,appearance:s,size:t,ref:f,disabled:m},e.Children.map(r,i=>{if(!e.isValidElement(i))throw new Error(g);return b(i.type===u,`Children of type ${i==null?void 0:i.type} aren't permitted. Only an ${u.displayName} component is allowed in ${d.displayName}`),e.cloneElement(i,{size:M[t],css:{...i.props.css?i.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
|
|
2
2
|
//# sourceMappingURL=ActionIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken } from 'color2k'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nimport { Icon } from '../icon/Icon'\n\nconst getSimpleVariant = (base: string, interact: string, active: string) => ({\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getSolidVariant = (base: string, interact: string, active: string) => ({\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': {\n bg: active\n },\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\nconst getOutlineVariant = (base: string, interact: string, active: string) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n compoundVariants: [\n // Appearance Simple\n {\n theme: 'neutral',\n appearance: 'simple',\n css: getSimpleVariant('$tonal300', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primary',\n appearance: 'simple',\n css: getSimpleVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'simple',\n css: getSimpleVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'simple',\n css: getSimpleVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'simple',\n css: getSimpleVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'simple',\n css: getSimpleVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Solid\n {\n theme: 'primary',\n appearance: 'solid',\n css: getSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'solid',\n css: getSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getSolidVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Outline\n {\n theme: 'primary',\n appearance: 'outline',\n css: getOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'outline',\n css: getOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'outline',\n css: getOutlineVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'outline',\n css: getOutlineVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'outline',\n css: getOutlineVariant('$danger', '$dangerMid', '$dangerDark')\n }\n ]\n})\n\ntype ConditionallyWrapWithTooltipProps = {\n hasTooltip: boolean\n label: string\n tooltipSide?: 'bottom' | 'left' | 'right' | 'top'\n children: React.ReactNode\n}\n\nconst ConditionallyWrapWithTooltip: React.FC<\n ConditionallyWrapWithTooltipProps\n> = ({ hasTooltip, label, tooltipSide, children }) => {\n if (hasTooltip) {\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>\n <Tooltip.Content side={tooltipSide}>{label}</Tooltip.Content>\n </Tooltip>\n )\n }\n\n return <span>{children}</span>\n}\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n hasTooltip?: boolean\n tooltipSide?: 'bottom' | 'left' | 'right' | 'top'\n } & NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <ConditionallyWrapWithTooltip\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...remainingProps}\n {...optionalLinkProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(child, {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n })\n })}\n </StyledButton>\n </ConditionallyWrapWithTooltip>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","darken","theme","ConditionallyWrapWithTooltip","hasTooltip","label","tooltipSide","children","React","Tooltip","ActionIcon","appearance","size","href","disabled","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","child","ActionIconSizeMap"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { darken } from 'color2k'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { Override } from '~/utilities'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nimport { Icon } from '../icon/Icon'\n\nconst getSimpleVariant = (base: string, interact: string, active: string) => ({\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getSolidVariant = (base: string, interact: string, active: string) => ({\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': {\n bg: active\n },\n '&[disabled]': {\n bg: '$tonal100',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst getOutlineVariant = (base: string, interact: string, active: string) => ({\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n color: interact\n },\n '&:not(:disabled):active': {\n color: active\n },\n '&[disabled]': {\n borderColor: '$tonal400',\n color: '$tonal400',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$0',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n compoundVariants: [\n // Appearance Simple\n {\n theme: 'neutral',\n appearance: 'simple',\n css: getSimpleVariant('$tonal300', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primary',\n appearance: 'simple',\n css: getSimpleVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'simple',\n css: getSimpleVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'simple',\n css: getSimpleVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'simple',\n css: getSimpleVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'simple',\n css: getSimpleVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Solid\n {\n theme: 'primary',\n appearance: 'solid',\n css: getSolidVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'solid',\n css: getSolidVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'solid',\n css: getSolidVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'solid',\n css: getSolidVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'solid',\n css: getSolidVariant('$danger', '$dangerMid', '$dangerDark')\n },\n\n // Appearance Outline\n {\n theme: 'primary',\n appearance: 'outline',\n css: getOutlineVariant('$primary', '$primaryMid', '$primaryDark')\n },\n {\n theme: 'primaryDark',\n appearance: 'outline',\n css: getOutlineVariant(\n '$primaryDark',\n darken(theme.colors.primaryDark.value, 0.1),\n darken(theme.colors.primaryDark.value, 0.15)\n )\n },\n {\n theme: 'success',\n appearance: 'outline',\n css: getOutlineVariant('$success', '$successMid', '$successDark')\n },\n {\n theme: 'warning',\n appearance: 'outline',\n css: getOutlineVariant('$warning', '$warningMid', '$warningDark')\n },\n {\n theme: 'danger',\n appearance: 'outline',\n css: getOutlineVariant('$danger', '$dangerMid', '$dangerDark')\n }\n ]\n})\n\ntype ConditionallyWrapWithTooltipProps = {\n hasTooltip: boolean\n label: string\n tooltipSide?: 'bottom' | 'left' | 'right' | 'top'\n children: React.ReactNode\n}\n\nconst ConditionallyWrapWithTooltip: React.FC<\n ConditionallyWrapWithTooltipProps\n> = ({ hasTooltip, label, tooltipSide, children }) => {\n if (hasTooltip) {\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>\n <Tooltip.Content side={tooltipSide}>{label}</Tooltip.Content>\n </Tooltip>\n )\n }\n\n // Ignore fragment error as this is the one place we will allow it\n // eslint-disable-next-line\n return <>{children}</>\n}\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n hasTooltip?: boolean\n tooltipSide?: 'bottom' | 'left' | 'right' | 'top'\n } & NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <ConditionallyWrapWithTooltip\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...remainingProps}\n {...optionalLinkProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(child, {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n })\n })}\n </StyledButton>\n </ConditionallyWrapWithTooltip>\n )\n }\n)\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","darken","theme","ConditionallyWrapWithTooltip","hasTooltip","label","tooltipSide","children","React","Tooltip","ActionIcon","appearance","size","href","disabled","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","child","ActionIconSizeMap"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Close as
|
|
1
|
+
import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as g,Close as w}from"@radix-ui/react-dialog";import*as t from"react";import{DIALOG_Z_INDEX as r}from"../../constants/zIndices.js";import{keyframes as n,styled as l}from"../../stitches.js";import{ActionIcon as v}from"../action-icon/ActionIcon.js";import{Icon as $}from"../icon/Icon.js";import{DialogBackground as s}from"./DialogBackground.js";import{fadeIn as C,fadeOut as z}from"../../utilities/style/keyframe-animations.js";const e="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=n({"0%":{transform:m},"100%":{transform:e}}),I=n({"0%":{transform:e},"100%":{transform:m}}),y=l(x,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${C} 250ms ease-out`},'&[data-state="closed"]':{animation:`${z} 550ms ease-out`}}}),E=l(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),O=({size:p="sm",children:a,closeDialogText:f="Close dialog",showCloseButton:c=!0,...h})=>t.createElement(g,null,t.createElement(y,{id:d},t.Children.map(a,o=>(o==null?void 0:o.type)===s&&o),t.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:o=>{const i=o.target;(i==null?void 0:i.id)!==d&&o.preventDefault()},...h},c&&t.createElement(v,{as:w,css:{position:"absolute",right:"$4",top:"$4"},label:f,hasTooltip:!1,size:"md",theme:"neutral"},t.createElement($,{is:u})),t.Children.map(a,o=>(o==null?void 0:o.type)!==s&&o))));export{O as DialogContent};
|
|
2
2
|
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","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 { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n overflowY: 'auto',\n zIndex: DIALOG_Z_INDEX,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n maxHeight: '90vh',\n overflowY: 'auto',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n zIndex: DIALOG_Z_INDEX,\n '&:focus': {\n outline: 'none'\n },\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n xs: { width: '380px' },\n sm: { width: '480px' },\n md: { width: '600px' },\n lg: { width: '800px' },\n xl: { width: '1100px' }\n }\n }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}) => (\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 css={{ position: 'absolute', right: '$4', top: '$4' }}\n label={closeDialogText}\n size=\"md\"\n theme=\"neutral\"\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"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"8fAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,CACtBkB,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,
|
|
1
|
+
{"version":3,"file":"DialogContent.js","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 { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n overflowY: 'auto',\n zIndex: DIALOG_Z_INDEX,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n maxHeight: '90vh',\n overflowY: 'auto',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n zIndex: DIALOG_Z_INDEX,\n '&:focus': {\n outline: 'none'\n },\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n xs: { width: '380px' },\n sm: { width: '480px' },\n md: { width: '600px' },\n lg: { width: '800px' },\n xl: { width: '1100px' }\n }\n }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}) => (\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 css={{ position: 'absolute', right: '$4', top: '$4' }}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\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"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"8fAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,CACtBkB,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAAe,CAEzB,EACC,GAAGL,GAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAAA,EAENG,EAAA,cAACQ,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Close as r}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{POPOVER_Z_INDEX as c}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import{ActionIcon as f}from"../action-icon/ActionIcon.js";import{Icon as $}from"../icon/Icon.js";import{slideDownAndFade as x,slideLeftAndFade as g,slideUpAndFade as w,slideRightAndFade as z}from"../../utilities/style/keyframe-animations.js";const b=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:c,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:x},'&[data-side="right"]':{animationName:g},'&[data-side="bottom"]':{animationName:w},'&[data-side="left"]':{animationName:z}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),C=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...d})=>e.createElement(b,{size:m,side:o,sideOffset:a,...d},n&&e.createElement(f,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",theme:"neutral"},e.createElement($,{is:r})),i,e.createElement(C,{width:16,height:8}));export{u as PopoverContent};
|
|
1
|
+
import{Close as r}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{POPOVER_Z_INDEX as c}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import{ActionIcon as f}from"../action-icon/ActionIcon.js";import{Icon as $}from"../icon/Icon.js";import{slideDownAndFade as x,slideLeftAndFade as g,slideUpAndFade as w,slideRightAndFade as z}from"../../utilities/style/keyframe-animations.js";const b=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:c,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:x},'&[data-side="right"]':{animationName:g},'&[data-side="bottom"]':{animationName:w},'&[data-side="left"]':{animationName:z}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),C=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...d})=>e.createElement(b,{size:m,side:o,sideOffset:a,...d},n&&e.createElement(f,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},e.createElement($,{is:r})),i,e.createElement(C,{width:16,height:8}));export{u as PopoverContent};
|
|
2
2
|
//# sourceMappingURL=PopoverContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { POPOVER_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$2',\n maxWidth: '90vw',\n p: '$sizes$2',\n pr: '$6',\n position: 'relative',\n zIndex: POPOVER_Z_INDEX,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '200px' },\n md: { maxWidth: '400px' },\n lg: { maxWidth: '600px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: 'white',\n zIndex: 1,\n '[data-align=\"end\"] &': { mr: '$sizes$2' },\n '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content> & {\n closePopoverText?: string\n showCloseButton?: boolean\n }\n\nexport const PopoverContent: React.FC<PopoverContentProps> = ({\n children,\n side = 'top',\n sideOffset = 8,\n closePopoverText = 'Close popover',\n showCloseButton = true,\n size = 'md',\n ...remainingProps\n}) => (\n <StyledContent\n size={size}\n side={side}\n sideOffset={sideOffset}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$0', top: '$0' }}\n label={closePopoverText}\n size=\"md\"\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {children}\n <StyledArrow width={16} height={8} />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","POPOVER_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"weAgBA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,OAAQC,EACR,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcP,EAAOQ,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAgD,CAAC,CAC5D,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAAClB,EAAA,CACC,KAAMgB,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,CAAAA,EAEHF,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}
|
|
1
|
+
{"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { POPOVER_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$2',\n maxWidth: '90vw',\n p: '$sizes$2',\n pr: '$6',\n position: 'relative',\n zIndex: POPOVER_Z_INDEX,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '200px' },\n md: { maxWidth: '400px' },\n lg: { maxWidth: '600px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: 'white',\n zIndex: 1,\n '[data-align=\"end\"] &': { mr: '$sizes$2' },\n '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content> & {\n closePopoverText?: string\n showCloseButton?: boolean\n }\n\nexport const PopoverContent: React.FC<PopoverContentProps> = ({\n children,\n side = 'top',\n sideOffset = 8,\n closePopoverText = 'Close popover',\n showCloseButton = true,\n size = 'md',\n ...remainingProps\n}) => (\n <StyledContent\n size={size}\n side={side}\n sideOffset={sideOffset}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$0', top: '$0' }}\n label={closePopoverText}\n size=\"md\"\n hasTooltip={false}\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {children}\n <StyledArrow width={16} height={8} />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","POPOVER_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"weAgBA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,OAAQC,EACR,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcP,EAAOQ,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAgD,CAAC,CAC5D,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAAClB,EAAA,CACC,KAAMgB,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,CAAAA,EAEHF,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,WAAY,GACZ,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}
|