diff --git a/src/main.js b/src/main.js
index cba808f..5dade87 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,10 +33,12 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
const [innerPath, setInnerPath] = useState('Z')
const div = useRef()
+ const slotWrapper = useRef()
const updateStatesWithArgs = () => {
updateStates({
div,
+ slotWrapper,
style,
setBoxSizing,
setOverflow,
@@ -108,11 +110,10 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
const pathIsEmpty = path.startsWith('Z') || path === ''
const divStyle = {
...style,
- ...(pathIsEmpty ? {
- borderImage: 'none',
- } : {
+ borderImage: 'none',
+ ...(pathIsEmpty ? {} : {
...invisibleBorderStyles,
- borderImage: 'none',
+ padding: '0',
background: 'transparent',
boxShadow: dontConvertShadow
// "box-shadow" must be overridden for the style extraction to work (with nth: 1, and not nth: 0)
@@ -125,13 +126,12 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
}
const shapeComponentStyles = {
- height: boxSizing === 'border-box' ? height : height - (border.width[0] + padding[0] + border.width[2] + padding[2]),
- width: boxSizing === 'border-box' ? width : width - (border.width[1] + padding[1] + border.width[3] + padding[3]),
- padding: padding.map(n => n + 'px').join(' '),
+ height: boxSizing === 'border-box' ? height : height - (border.width[0] + border.width[2]),
+ width: boxSizing === 'border-box' ? width : width - (border.width[1] + border.width[3]),
position: 'fixed',
left: 0,
top: 0,
- transform: `translate(-${padding[3] + border.width[3]}px, -${padding[0] + border.width[0]}px)`,
+ transform: `translate(-${border.width[3]}px, -${border.width[0]}px)`,
zIndex: -1,
}
@@ -142,9 +142,7 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
return
{pathIsEmpty ? null :
-
+
(n * .95) + 'px').join(' '),
borderColor: border.color,
@@ -181,13 +179,14 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
}}/>
n + 'px').join(' '),
clipPath: overflow === 'hidden' ? `path("${innerPath}")` : null,
- }}>
-
+ transform: `translate(-${border.width[3]}px, -${border.width[0]}px)`,
+ boxSizing: 'border-box',
+ }} ref={slotWrapper}>
+
}
diff --git a/src/updateStates.js b/src/updateStates.js
index a68a0a0..d32bb18 100644
--- a/src/updateStates.js
+++ b/src/updateStates.js
@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom'
import {lazySetArrayState, lazySetObjectsState} from './utils/react-utils'
export default function updateStates(args) {
- const {div} = args
+ const {div, slotWrapper} = args
if (!div.current) return
const getNthStyle = (key, n, shorthand) => {
@@ -31,7 +31,7 @@ export default function updateStates(args) {
ReactDOM.unstable_batchedUpdates(() => {
states.setPadding(
['top', 'right', 'bottom', 'left']
- .map(s => getNthStyle('padding-' + s, 0, 'padding'))
+ .map(s => getNthStyle('padding-' + s, oneIfStylesAreOverridden, 'padding'))
.map(n => toNumber(n, div.current) || 0)
)
@@ -82,8 +82,8 @@ export default function updateStates(args) {
border.width = border.width ?? Array(4).fill(0)
lazySetBorder(border)
- const height = div.current?.clientHeight + border.width[0] + border.width[2],
- width = div.current?.clientWidth + border.width[1] + border.width[3]
+ const height = ((slotWrapper.current ?? div.current).clientHeight || 0) + border.width[0] + border.width[2],
+ width = ((slotWrapper.current ?? div.current).clientWidth || 0) + border.width[1] + border.width[3]
states.setHeight(height)
states.setWidth(width)
@@ -104,7 +104,7 @@ export default function updateStates(args) {
'source',
'width',
].map(key =>
- [key, getNthStyle('border-image-' + key, oneIfStylesAreOverridden, 'border-image')]
+ [key, getNthStyle('border-image-' + key, 1, 'border-image')]
))
)