mdlz-prmtz - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/components/ToggleButton.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 };
-export declare const ToggleButtonGroup: ({ children, css, ...props }: ToggleButtonGroupProps) => JSX.Element;
+export declare const ToggleButtonGroup: ({ children, value, onChange, css, ...props }: ToggleButtonGroupProps) => JSX.Element;
 export declare type ToggleButtonProps = React.ComponentPropsWithRef<'button'> & {
@@ -17,2 +17,2 @@ value: string;
 };
-export declare const ToggleButton: React.ForwardRefExoticComponent<Pick<ToggleButtonProps, "children" | "css" | "value" | "onChange" | "form" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "wrapperCss" | "activeCss"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ToggleButton: React.ForwardRefExoticComponent<Pick<ToggleButtonProps, "children" | "value" | "onChange" | "css" | "form" | "style" | "title" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "wrapperCss" | "activeCss"> & React.RefAttributes<HTMLButtonElement>>;

dist/components/Tooltip.d.ts

 import React from 'react';
 import { Side, Align } from '../utils/geometry';
 export declare type TooltipProps = {
-    children: React.ReactNode;
+    children: React.ReactElement;
     label: string;
@@ -6,0 +6,0 @@ ariaLabel?: string;

dist/index.es.js

@@ -6,2 +6,3 @@ import React from 'react';
 import ReactDOM from 'react-dom';
+import ResizeObserver from 'resize-observer-polyfill';
 import pick from 'lodash.pick';
@@ -378,2 +379,30 @@ import omit from 'lodash.omit';
 
+function useSize(_a) {
+    var refToObserve = _a.refToObserve, isObserving = _a.isObserving;
+    var _b = React.useState({ width: 0, height: 0 }), size = _b[0], setSize = _b[1];
+    React.useEffect(function () {
+        if (isObserving && refToObserve.current) {
+            var elementToObserver_1 = refToObserve.current;
+            var resizeObserver_1 = new ResizeObserver(function (entries) {
+                if (!Array.isArray(entries)) {
+                    return;
+                }
+                // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) {
+                    return;
+                }
+                var entry = entries[0];
+                setSize({
+                    width: entry.contentRect.width,
+                    height: entry.contentRect.height,
+                });
+            });
+            resizeObserver_1.observe(elementToObserver_1);
+            return function () { return resizeObserver_1.unobserve(elementToObserver_1); };
+        }
+    }, [isObserving, refToObserve]);
+    return size;
+}
+
 /**
@@ -402,8 +431,8 @@ * Gets collisions for each side of a rect (top, right, bottom, left)
     var _b;
-    var popperRect = _a.popperRect, arrowRect = _a.arrowRect, arrowOffset = _a.arrowOffset, side = _a.side, align = _a.align;
-    var popperCenterX = (popperRect.width - arrowRect.width) / 2;
-    var popperCenterY = (popperRect.height - arrowRect.height) / 2;
+    var popperRect = _a.popperRect, arrowSize = _a.arrowSize, arrowOffset = _a.arrowOffset, side = _a.side, align = _a.align;
+    var popperCenterX = (popperRect.width - arrowSize.width) / 2;
+    var popperCenterY = (popperRect.height - arrowSize.height) / 2;
     var rotationMap = { top: 0, right: 90, bottom: 180, left: -90 };
     var rotation = rotationMap[side];
-    var arrowMaxDimension = Math.max(arrowRect.width, arrowRect.height);
+    var arrowMaxDimension = Math.max(arrowSize.width, arrowSize.height);
     var styles = (_b = {
@@ -466,3 +495,3 @@ // we make sure we put the arrow inside a 1:1 ratio container
 function getPlacementStyles(_a) {
-    var targetRect = _a.targetRect, popperRect = _a.popperRect, arrowRect = _a.arrowRect, _b = _a.arrowOffset, arrowOffset = _b === void 0 ? 20 : _b, side = _a.side, _c = _a.sideOffset, sideOffset = _c === void 0 ? 0 : _c, align = _a.align, _d = _a.alignOffset, alignOffset = _d === void 0 ? 0 : _d, _e = _a.shouldAvoidCollisions, shouldAvoidCollisions = _e === void 0 ? true : _e, _f = _a.collisionTolerance, collisionTolerance = _f === void 0 ? 0 : _f;
+    var targetRect = _a.targetRect, popperRect = _a.popperRect, arrowSize = _a.arrowSize, _b = _a.arrowOffset, arrowOffset = _b === void 0 ? 20 : _b, side = _a.side, _c = _a.sideOffset, sideOffset = _c === void 0 ? 0 : _c, align = _a.align, _d = _a.alignOffset, alignOffset = _d === void 0 ? 0 : _d, _e = _a.shouldAvoidCollisions, shouldAvoidCollisions = _e === void 0 ? true : _e, _f = _a.collisionTolerance, collisionTolerance = _f === void 0 ? 0 : _f;
     // if we're not ready to do all the measurements yet, we return
@@ -479,3 +508,3 @@ // some good default styles
     // pre-compute points for all potential placements
-    var allPlacementPoints = getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, side, arrowRect);
+    var allPlacementPoints = getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, arrowSize);
     // get point based on side / align
@@ -487,4 +516,4 @@ var popperPoint = allPlacementPoints[side][align];
         var arrowStyles_1 = {};
-        if (arrowRect) {
-            arrowStyles_1 = getPopperArrowStyles({ popperRect: popperRect, arrowRect: arrowRect, arrowOffset: arrowOffset, side: side, align: align });
+        if (arrowSize) {
+            arrowStyles_1 = getPopperArrowStyles({ popperRect: popperRect, arrowSize: arrowSize, arrowOffset: arrowOffset, side: side, align: align });
         }
@@ -511,6 +540,6 @@ return { popperStyles: popperStyles_1, arrowStyles: arrowStyles_1 };
     var arrowStyles = {};
-    if (arrowRect) {
+    if (arrowSize) {
         arrowStyles = getPopperArrowStyles({
             popperRect: popperRect,
-            arrowRect: arrowRect,
+            arrowSize: arrowSize,
             arrowOffset: arrowOffset,
@@ -534,9 +563,6 @@ side: adjustedSide,
 }
-function getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, side, arrowRect) {
+function getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, arrowSize) {
     if (sideOffset === void 0) { sideOffset = 0; }
     if (alignOffset === void 0) { alignOffset = 0; }
-    var arrowBaseToTipLength = 0;
-    if (arrowRect) {
-        arrowBaseToTipLength = side === 'top' || side === 'bottom' ? arrowRect.height : arrowRect.width;
-    }
+    var arrowBaseToTipLength = arrowSize ? arrowSize.height : 0;
     var x = getPopperSlotsForAxis(targetRect, popperRect, 'x');
@@ -631,7 +657,7 @@ var y = getPopperSlotsForAxis(targetRect, popperRect, 'y');
     var arrowRef = React.useRef(null);
-    var arrowRect = useRect({ refToObserve: arrowRef, isObserving: isOpen });
+    var arrowSize = useSize({ refToObserve: arrowRef, isObserving: isOpen });
     var _g = getPlacementStyles({
         popperRect: popoverRect,
         targetRect: targetRect,
-        arrowRect: arrowRect,
+        arrowSize: arrowSize,
         side: side,
@@ -745,9 +771,7 @@ align: align,
 var marginPropNames$1 = margin.propNames;
-var ToggleButtonGroupContext = React.createContext(null);
+var ToggleButtonGroupContext = React.createContext({ value: '', onClick: function (value) { } });
 var ToggleButtonGroup = function (_a) {
-    var children = _a.children, css = _a.css, props = __rest(_a, ["children", "css"]);
+    var children = _a.children, value = _a.value, onChange = _a.onChange, css = _a.css, props = __rest(_a, ["children", "value", "onChange", "css"]);
     var systemProps = pick(props, marginPropNames$1);
-    var toggleButtomGroupProps = omit(props, marginPropNames$1);
-    console.log({ toggleButtomGroupProps: toggleButtomGroupProps });
-    return (React.createElement(ToggleButtonGroupContext.Provider, { value: toggleButtomGroupProps },
+    return (React.createElement(ToggleButtonGroupContext.Provider, { value: { value: value, onClick: onChange } },
         React.createElement(Flex, __assign({ width: "100%" }, systemProps, { css: css }), children)));
@@ -757,8 +781,5 @@ };
     var css = props.css, value = props.value;
-    //@ts-ignore
-    var _a = React.useContext(ToggleButtonGroupContext), contextValue = _a.value, contextOnChange = _a.onChange, context = __rest(_a, ["value", "onChange"]);
-    return (React.createElement(StyledButton, __assign({}, props, { ref: ref, css: css, active: contextValue === value, onClick: function () { return contextOnChange(value); } }, context)));
-});
-var StyledButton = React.forwardRef(function (props, ref) {
-    return (React.createElement(Button, __assign({}, props, { ref: ref, css: [
+    var context = React.useContext(ToggleButtonGroupContext);
+    var isActive = context.value === value;
+    return (React.createElement(Button, __assign({ ref: ref, onClick: function () { return context.onClick(props.value); } }, props, { css: [
             {
@@ -776,3 +797,3 @@ display: 'inline-flex',
                 WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-                backgroundColor: props.active ? 'gray' : 'white',
+                backgroundColor: isActive ? 'gray' : 'white',
                 '& + &': {
@@ -790,5 +811,5 @@ marginLeft: -1,
             },
-            props.css,
+            css,
             {
-                '&&': __assign({}, (props.active ? __assign({ zIndex: 3 }, getCss('activeCss')(props)) : {})),
+                '&&': __assign({}, (isActive ? __assign({ zIndex: 3 }, getCss('activeCss')(props)) : {})),
             },
@@ -986,7 +1007,7 @@ ] })));
     var arrowRef = React.useRef(null);
-    var arrowRect = useRect({ refToObserve: arrowRef, isObserving: isVisible });
+    var arrowSize = useSize({ refToObserve: arrowRef, isObserving: isVisible });
     var _k = getPlacementStyles({
         popperRect: popperRect,
         targetRect: targetRect,
-        arrowRect: arrowRect,
+        arrowSize: arrowSize,
         arrowOffset: arrowOffset,
@@ -993,0 +1014,0 @@ side: side,

dist/index.js

@@ -12,2 +12,3 @@ 'use strict';
 var ReactDOM = _interopDefault(require('react-dom'));
+var ResizeObserver = _interopDefault(require('resize-observer-polyfill'));
 var pick = _interopDefault(require('lodash.pick'));
@@ -384,2 +385,30 @@ var omit = _interopDefault(require('lodash.omit'));
 
+function useSize(_a) {
+    var refToObserve = _a.refToObserve, isObserving = _a.isObserving;
+    var _b = React.useState({ width: 0, height: 0 }), size = _b[0], setSize = _b[1];
+    React.useEffect(function () {
+        if (isObserving && refToObserve.current) {
+            var elementToObserver_1 = refToObserve.current;
+            var resizeObserver_1 = new ResizeObserver(function (entries) {
+                if (!Array.isArray(entries)) {
+                    return;
+                }
+                // Since we only observe the one element, we don't need to loop over the
+                // array
+                if (!entries.length) {
+                    return;
+                }
+                var entry = entries[0];
+                setSize({
+                    width: entry.contentRect.width,
+                    height: entry.contentRect.height,
+                });
+            });
+            resizeObserver_1.observe(elementToObserver_1);
+            return function () { return resizeObserver_1.unobserve(elementToObserver_1); };
+        }
+    }, [isObserving, refToObserve]);
+    return size;
+}
+
 /**
@@ -408,8 +437,8 @@ * Gets collisions for each side of a rect (top, right, bottom, left)
     var _b;
-    var popperRect = _a.popperRect, arrowRect = _a.arrowRect, arrowOffset = _a.arrowOffset, side = _a.side, align = _a.align;
-    var popperCenterX = (popperRect.width - arrowRect.width) / 2;
-    var popperCenterY = (popperRect.height - arrowRect.height) / 2;
+    var popperRect = _a.popperRect, arrowSize = _a.arrowSize, arrowOffset = _a.arrowOffset, side = _a.side, align = _a.align;
+    var popperCenterX = (popperRect.width - arrowSize.width) / 2;
+    var popperCenterY = (popperRect.height - arrowSize.height) / 2;
     var rotationMap = { top: 0, right: 90, bottom: 180, left: -90 };
     var rotation = rotationMap[side];
-    var arrowMaxDimension = Math.max(arrowRect.width, arrowRect.height);
+    var arrowMaxDimension = Math.max(arrowSize.width, arrowSize.height);
     var styles = (_b = {
@@ -472,3 +501,3 @@ // we make sure we put the arrow inside a 1:1 ratio container
 function getPlacementStyles(_a) {
-    var targetRect = _a.targetRect, popperRect = _a.popperRect, arrowRect = _a.arrowRect, _b = _a.arrowOffset, arrowOffset = _b === void 0 ? 20 : _b, side = _a.side, _c = _a.sideOffset, sideOffset = _c === void 0 ? 0 : _c, align = _a.align, _d = _a.alignOffset, alignOffset = _d === void 0 ? 0 : _d, _e = _a.shouldAvoidCollisions, shouldAvoidCollisions = _e === void 0 ? true : _e, _f = _a.collisionTolerance, collisionTolerance = _f === void 0 ? 0 : _f;
+    var targetRect = _a.targetRect, popperRect = _a.popperRect, arrowSize = _a.arrowSize, _b = _a.arrowOffset, arrowOffset = _b === void 0 ? 20 : _b, side = _a.side, _c = _a.sideOffset, sideOffset = _c === void 0 ? 0 : _c, align = _a.align, _d = _a.alignOffset, alignOffset = _d === void 0 ? 0 : _d, _e = _a.shouldAvoidCollisions, shouldAvoidCollisions = _e === void 0 ? true : _e, _f = _a.collisionTolerance, collisionTolerance = _f === void 0 ? 0 : _f;
     // if we're not ready to do all the measurements yet, we return
@@ -485,3 +514,3 @@ // some good default styles
     // pre-compute points for all potential placements
-    var allPlacementPoints = getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, side, arrowRect);
+    var allPlacementPoints = getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, arrowSize);
     // get point based on side / align
@@ -493,4 +522,4 @@ var popperPoint = allPlacementPoints[side][align];
         var arrowStyles_1 = {};
-        if (arrowRect) {
-            arrowStyles_1 = getPopperArrowStyles({ popperRect: popperRect, arrowRect: arrowRect, arrowOffset: arrowOffset, side: side, align: align });
+        if (arrowSize) {
+            arrowStyles_1 = getPopperArrowStyles({ popperRect: popperRect, arrowSize: arrowSize, arrowOffset: arrowOffset, side: side, align: align });
         }
@@ -517,6 +546,6 @@ return { popperStyles: popperStyles_1, arrowStyles: arrowStyles_1 };
     var arrowStyles = {};
-    if (arrowRect) {
+    if (arrowSize) {
         arrowStyles = getPopperArrowStyles({
             popperRect: popperRect,
-            arrowRect: arrowRect,
+            arrowSize: arrowSize,
             arrowOffset: arrowOffset,
@@ -540,9 +569,6 @@ side: adjustedSide,
 }
-function getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, side, arrowRect) {
+function getAllPlacementPoints(popperRect, targetRect, sideOffset, alignOffset, arrowSize) {
     if (sideOffset === void 0) { sideOffset = 0; }
     if (alignOffset === void 0) { alignOffset = 0; }
-    var arrowBaseToTipLength = 0;
-    if (arrowRect) {
-        arrowBaseToTipLength = side === 'top' || side === 'bottom' ? arrowRect.height : arrowRect.width;
-    }
+    var arrowBaseToTipLength = arrowSize ? arrowSize.height : 0;
     var x = getPopperSlotsForAxis(targetRect, popperRect, 'x');
@@ -637,7 +663,7 @@ var y = getPopperSlotsForAxis(targetRect, popperRect, 'y');
     var arrowRef = React.useRef(null);
-    var arrowRect = useRect({ refToObserve: arrowRef, isObserving: isOpen });
+    var arrowSize = useSize({ refToObserve: arrowRef, isObserving: isOpen });
     var _g = getPlacementStyles({
         popperRect: popoverRect,
         targetRect: targetRect,
-        arrowRect: arrowRect,
+        arrowSize: arrowSize,
         side: side,
@@ -751,9 +777,7 @@ align: align,
 var marginPropNames$1 = radixSystem.margin.propNames;
-var ToggleButtonGroupContext = React.createContext(null);
+var ToggleButtonGroupContext = React.createContext({ value: '', onClick: function (value) { } });
 var ToggleButtonGroup = function (_a) {
-    var children = _a.children, css = _a.css, props = __rest(_a, ["children", "css"]);
+    var children = _a.children, value = _a.value, onChange = _a.onChange, css = _a.css, props = __rest(_a, ["children", "value", "onChange", "css"]);
     var systemProps = pick(props, marginPropNames$1);
-    var toggleButtomGroupProps = omit(props, marginPropNames$1);
-    console.log({ toggleButtomGroupProps: toggleButtomGroupProps });
-    return (React.createElement(ToggleButtonGroupContext.Provider, { value: toggleButtomGroupProps },
+    return (React.createElement(ToggleButtonGroupContext.Provider, { value: { value: value, onClick: onChange } },
         React.createElement(Flex, __assign({ width: "100%" }, systemProps, { css: css }), children)));
@@ -763,8 +787,5 @@ };
     var css = props.css, value = props.value;
-    //@ts-ignore
-    var _a = React.useContext(ToggleButtonGroupContext), contextValue = _a.value, contextOnChange = _a.onChange, context = __rest(_a, ["value", "onChange"]);
-    return (React.createElement(StyledButton, __assign({}, props, { ref: ref, css: css, active: contextValue === value, onClick: function () { return contextOnChange(value); } }, context)));
-});
-var StyledButton = React.forwardRef(function (props, ref) {
-    return (React.createElement(Button, __assign({}, props, { ref: ref, css: [
+    var context = React.useContext(ToggleButtonGroupContext);
+    var isActive = context.value === value;
+    return (React.createElement(Button, __assign({ ref: ref, onClick: function () { return context.onClick(props.value); } }, props, { css: [
             {
@@ -782,3 +803,3 @@ display: 'inline-flex',
                 WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-                backgroundColor: props.active ? 'gray' : 'white',
+                backgroundColor: isActive ? 'gray' : 'white',
                 '& + &': {
@@ -796,5 +817,5 @@ marginLeft: -1,
             },
-            props.css,
+            css,
             {
-                '&&': __assign({}, (props.active ? __assign({ zIndex: 3 }, getCss('activeCss')(props)) : {})),
+                '&&': __assign({}, (isActive ? __assign({ zIndex: 3 }, getCss('activeCss')(props)) : {})),
             },
@@ -992,7 +1013,7 @@ ] })));
     var arrowRef = React.useRef(null);
-    var arrowRect = useRect({ refToObserve: arrowRef, isObserving: isVisible });
+    var arrowSize = useSize({ refToObserve: arrowRef, isObserving: isVisible });
     var _k = getPlacementStyles({
         popperRect: popperRect,
         targetRect: targetRect,
-        arrowRect: arrowRect,
+        arrowSize: arrowSize,
         arrowOffset: arrowOffset,
@@ -999,0 +1020,0 @@ side: side,

dist/utils/geometry.d.ts

@@ -10,2 +10,6 @@ export declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
 };
+export declare type Size = {
+    width: number;
+    height: number;
+};
 /**
@@ -12,0 +16,0 @@ * Updates a rect (`ClientRect`) to a new position (x, y).

dist/utils/popper.d.ts

 import * as CSS from 'csstype';
 import { Collisions } from './collision';
-import { Side, Align, Point } from './geometry';
+import { Side, Align, Point, Size } from './geometry';
 declare type GetPlacementDataOptions = {
@@ -9,4 +9,4 @@ /** The rect of the target we are placing around */
     popperRect?: ClientRect;
-    /** An optional arrow rect */
-    arrowRect?: ClientRect;
+    /** An optional arrow size */
+    arrowSize?: Size;
     /** An optional arrow offset (along the side, default: 20) */
@@ -31,3 +31,3 @@ arrowOffset?: number;
 };
-export declare function getPlacementStyles({ targetRect, popperRect, arrowRect, arrowOffset, side, sideOffset, align, alignOffset, shouldAvoidCollisions, collisionTolerance, }: GetPlacementDataOptions): PlacementStyles;
+export declare function getPlacementStyles({ targetRect, popperRect, arrowSize, arrowOffset, side, sideOffset, align, alignOffset, shouldAvoidCollisions, collisionTolerance, }: GetPlacementDataOptions): PlacementStyles;
 export declare function getPlacementStylesForPoint(point: Point): CSS.Properties;
@@ -34,0 +34,0 @@ /**

dist/utils/popperArrow.d.ts

 import * as CSS from 'csstype';
-import { Side, Align } from './geometry';
+import { Side, Align, Size } from './geometry';
 declare type GetArrowStylesOptions = {
     /** The rect of the popper to place */
     popperRect: ClientRect;
-    /** The rect of the arrow itself */
-    arrowRect: ClientRect;
+    /** The size of the arrow itself */
+    arrowSize: Size;
     /** An offset for the arrow along the align axis */
@@ -19,3 +19,3 @@ arrowOffset: number;
  */
-export declare function getPopperArrowStyles({ popperRect, arrowRect, arrowOffset, side, align, }: GetArrowStylesOptions): CSS.Properties;
+export declare function getPopperArrowStyles({ popperRect, arrowSize, arrowOffset, side, align, }: GetArrowStylesOptions): CSS.Properties;
 export {};

package.json

 {
   "name": "mdlz-prmtz",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Accessible and customisable primitives for the web",
@@ -36,3 +36,4 @@ "author": "Pedro Duarte <[e-mail]>",
     "lodash.pick": "^4.4.0",
-    "react-focus-on": "^3.0.5"
+    "react-focus-on": "^3.0.5",
+    "resize-observer-polyfill": "^1.5.1"
   },
@@ -39,0 +40,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130000

increased by1.68%

Number of package files

46

increased by2.22%

Lines of code

2566

increased by2.15%

Worsened metrics

Dependency count

11

increased by10%

Number of downloads

4

decreased by-94.44%

Dependency changes

• + Addedresize-observer-polyfill@^1.5.1

• + Addedresize-observer-polyfill@1.5.1(transitive)