fix: Position component (#217)

packages/fuselage/src/components/Box/Position/index.js

@@ -15,7 +15,8 @@ const left = (left) => ({ left });
 const right = (right) => ({ right });
 
 function getOffset(el) {
-  return el.getBoundingClientRect();
+  const { top, right, bottom, left, width, height, x, y } = el.getBoundingClientRect();
+  return { top, right, bottom, left, width, height, x, y };
 }
 
 const getVertical = (anchorPosition, elementPosition, placement = 'bottom') => {
@@ -33,9 +34,9 @@ const getVertical = (anchorPosition, elementPosition, placement = 'bottom') => {
 const getHorizontal = (anchorPosition, elementPosition, placement = 'right') => {
   switch (placement) {
   case 'right':
-    return anchorPosition.right + elementPosition.width > window.innerWidth ? right(0) : left(anchorPosition.right);
+    return anchorPosition.left + elementPosition.width > window.innerWidth ? right(0) : left(anchorPosition.left);
   case 'left':
-    return anchorPosition.left - elementPosition.width > 0 ? left(anchorPosition.left - elementPosition.width) : left(0);
+    return anchorPosition.right - elementPosition.width > 0 ? left(anchorPosition.right - elementPosition.width) : left(0);
   case 'center':
     return left(anchorPosition.left + anchorPosition.width / 2 - elementPosition.width / 2 >= 0 ? anchorPosition.left + anchorPosition.width / 2 - elementPosition.width / 2 : 0);
   default:
@@ -58,7 +59,6 @@ const throttle = (func, limit) => {
 export const Position = ({ anchor, width = 'stretch', style, className, children, placement = 'bottom center'/* , offset*/ }) => {
   const [position, setPosition] = useState();
   const ref = useRef();
-
   const resizer = useRef();
 
   const { offsetWidth } = anchor.current || {};

packages/fuselage/src/components/Menu/index.js

@@ -16,7 +16,7 @@ const mapOptions = (options) => Object.entries(options).map(([value, { label }])
 
 export const Menu = ({
   options,
-  optionWidth = '240px',
+  optionWidth,
   placement = 'bottom right',
   ...props }) => {
   const mappedOptions = mapOptions(options);
@@ -27,7 +27,10 @@ export const Menu = ({
   });
 
   const ref = useRef();
-  const onClick = useCallback(() => ref.current.focus() & show(), [show]);
+  const onClick = useCallback(() => {
+    ref.current.focus() & show();
+    ref.current.classList.add('focus-visible');
+  }, [show]);
 
   const handleSelection = useCallback((args) => {
     menuAction(args, options);

packages/fuselage/src/components/Options/index.js

@@ -42,7 +42,6 @@ export const OptionAvatar = React.memo(({ id, value, children: label, focus, sel
 
 export const Options = React.forwardRef(({
   maxHeight = '144px',
-  width = '240px',
   multiple,
   renderEmpty: EmptyComponent = Empty,
   options,
@@ -67,7 +66,7 @@ export const Options = React.forwardRef(({
     <Tile padding='x8' elevation='2'>
       <Scrollable vertical smooth>
         <Margins blockStart='x4'>
-          <Tile ref={ref} elevation='0' padding='none' width={width} maxHeight={maxHeight} onMouseDown={prevent} onClick={prevent} is='ol' aria-multiselectable={multiple} role='listbox' aria-multiselectable='true' aria-activedescendant={options && options[cursor] && options[cursor][0]}>
+          <Tile ref={ref} elevation='0' padding='none' maxHeight={maxHeight} onMouseDown={prevent} onClick={prevent} is='ol' aria-multiselectable={multiple} role='listbox' aria-multiselectable='true' aria-activedescendant={options && options[cursor] && options[cursor][0]}>
             {!options.length && <EmptyComponent/>}
             {optionsMemoized}
           </Tile>