@spaced-out/ui-design-system 0.1.26 → 0.1.27

package/lib/components/Tooltip/Tooltip.js.flow

@@ -1,14 +1,14 @@
 // @flow strict
 
 import * as React from 'react';
-// $FlowFixMe[untyped-import]
-import {createPortal} from 'react-dom';
 import {
   // $FlowFixMe[untyped-import]
   autoUpdate,
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   shift,
@@ -23,14 +23,15 @@ import {
   // $FlowFixMe[untyped-import]
   useInteractions,
   // $FlowFixMe[untyped-import]
+  useMergeRefs,
+  // $FlowFixMe[untyped-import]
   useRole,
-} from '@floating-ui/react-dom-interactions';
+} from '@floating-ui/react';
 
 import * as ELEVATION from '../../styles/variables/_elevation';
 import * as MOTION from '../../styles/variables/_motion';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
-import {mergeRefs} from '../../utils/merge-refs';
 import {capitalize} from '../../utils/string';
 import {Truncate} from '../Truncate';
 
@@ -93,14 +94,20 @@ export const Tooltip = ({
   elevation = ELEVATION['elevationTooltip'],
   hidden,
 }: TooltipProps): React.Node => {
-  const bodyRef = React.useRef(document.querySelector('body'));
-  const [open, setOpen] = React.useState(false);
-  const {x, y, reference, floating, strategy, context} = useFloating({
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {refs, floatingStyles, context, strategy} = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
     placement,
-    open,
-    onOpenChange: setOpen,
-    middleware: [offset(parseInt(spaceXXSmall)), flip(), shift()],
+    // Make sure the tooltip stays on the screen
     whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(parseInt(spaceXXSmall)),
+      flip({
+        fallbackAxisSideDirection: 'start',
+      }),
+      shift(),
+    ],
   });
 
   const motionDurationToken =
@@ -123,10 +130,7 @@ export const Tooltip = ({
   ]);
 
   // Note(Nishant) Preserve the consumer's ref
-  const ref = React.useMemo(
-    () => mergeRefs([reference, children.ref]),
-    [reference, children],
-  );
+  const ref = useMergeRefs([refs.setReference, children.ref]);
 
   return (
     <>
@@ -137,17 +141,16 @@ export const Tooltip = ({
           ...children.props,
         }),
       )}
-      {open &&
-        createPortal(
+      <FloatingPortal>
+        {isOpen && (
           <>
             {!hidden && (
               <div
-                ref={floating}
+                ref={refs.setFloating}
                 className={classify(css.tooltip, classNames?.tooltip)}
                 style={{
                   position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
+                  ...floatingStyles,
                   '--tooltip-elevation': elevation,
                 }}
                 {...getFloatingProps()}
@@ -177,9 +180,9 @@ export const Tooltip = ({
                 )}
               </div>
             )}
-          </>,
-          bodyRef.current,
+          </>
         )}
+      </FloatingPortal>
     </>
   );
 };

package/lib/components/Typeahead/Typeahead.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Typeahead = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactDom = require("@floating-ui/react-dom");
+var _react2 = require("@floating-ui/react");
 var _color = require("../../styles/variables/_color");
 var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
@@ -39,14 +39,14 @@ const Typeahead = _ref => {
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     strategy
-  } = (0, _reactDom.useFloating)({
+  } = (0, _react2.useFloating)({
+    open: true,
     strategy: 'absolute',
     placement: 'bottom-start',
-    whileElementsMounted: _reactDom.autoUpdate,
-    middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
@@ -76,7 +76,7 @@ const Typeahead = _ref => {
       ref: typeaheadRef,
       onClickCapture: cancelNext
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
-      boxRef: reference,
+      boxRef: refs.setReference,
       size: size,
       placeholder: placeholder,
       value: typeaheadInputText,
@@ -105,7 +105,7 @@ const Typeahead = _ref => {
       }
     })), isOpen && !isLoading && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
-      ref: floating,
+      ref: refs.setFloating,
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,
@@ -121,7 +121,8 @@ const Typeahead = _ref => {
           clickAway();
         }
       },
-      size: menu.size || size
+      size: menu.size || size,
+      onTabOut: clickAway
     }))));
   });
 };

package/lib/components/Typeahead/Typeahead.js.flow

@@ -10,7 +10,7 @@ import {
   offset,
   // $FlowFixMe[untyped-import]
   useFloating,
-} from '@floating-ui/react-dom';
+} from '@floating-ui/react';
 
 import {colorBackgroundTertiary} from '../../styles/variables/_color';
 import {sizeFluid} from '../../styles/variables/_size';
@@ -60,7 +60,8 @@ export const Typeahead = ({
   const typeaheadRef = React.useRef();
   const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
 
-  const {x, y, reference, floating, strategy} = useFloating({
+  const {x, y, refs, strategy} = useFloating({
+    open: true,
     strategy: 'absolute',
     placement: 'bottom-start',
     whileElementsMounted: autoUpdate,
@@ -99,7 +100,7 @@ export const Typeahead = ({
         >
           <SearchInput
             {...inputProps}
-            boxRef={reference}
+            boxRef={refs.setReference}
             size={size}
             placeholder={placeholder}
             value={typeaheadInputText}
@@ -132,7 +133,7 @@ export const Typeahead = ({
             !!filteredOptions.length && (
             <div
               onClickCapture={cancelNext}
-              ref={floating}
+              ref={refs.setFloating}
               style={{
                 position: strategy,
                 top: y ?? spaceNone,
@@ -154,6 +155,7 @@ export const Typeahead = ({
                   }
                 }}
                 size={menu.size || size}
+                onTabOut={clickAway}
               />
             </div>
           )}

package/lib/hooks/index.js

@@ -3,6 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _useCopyToClipboard = require("./useCopyToClipboard");
+Object.keys(_useCopyToClipboard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useCopyToClipboard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useCopyToClipboard[key];
+    }
+  });
+});
+var _useInputState = require("./useInputState");
+Object.keys(_useInputState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInputState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useInputState[key];
+    }
+  });
+});
+var _useLockedBody = require("./useLockedBody");
+Object.keys(_useLockedBody).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useLockedBody[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useLockedBody[key];
+    }
+  });
+});
 var _useMountTransition = require("./useMountTransition");
 Object.keys(_useMountTransition).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -35,4 +68,26 @@ Object.keys(_useToastPortal).forEach(function (key) {
       return _useToastPortal[key];
     }
   });
+});
+var _useToggle = require("./useToggle");
+Object.keys(_useToggle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useToggle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useToggle[key];
+    }
+  });
+});
+var _useWindowSize = require("./useWindowSize");
+Object.keys(_useWindowSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useWindowSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useWindowSize[key];
+    }
+  });
 });

package/lib/hooks/index.js.flow

@@ -1,5 +1,10 @@
 // @flow strict
 
+export * from './useCopyToClipboard';
+export * from './useInputState';
+export * from './useLockedBody';
 export * from './useMountTransition';
 export * from './usePagination';
 export * from './useToastPortal';
+export * from './useToggle';
+export * from './useWindowSize';

package/lib/hooks/useCopyToClipboard.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCopyToClipboard = useCopyToClipboard;
+var _react = require("react");
+
+// Return success
+
+function useCopyToClipboard() {
+  const [copiedText, setCopiedText] = (0, _react.useState)(null);
+  const copy = async text => {
+    if (!navigator.clipboard) {
+      console.warn('Clipboard not supported');
+      return false;
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn('Copy failed', error);
+      setCopiedText(null);
+      return false;
+    }
+  };
+  return [copiedText, copy];
+}

package/lib/hooks/useCopyToClipboard.js.flow

@@ -0,0 +1,31 @@
+// @flow strict
+
+import {useState} from 'react';
+
+
+type CopiedValue = string | null;
+type CopyFn = (text: string) => Promise<boolean>; // Return success
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = async (text) => {
+    if (!navigator.clipboard) {
+      console.warn('Clipboard not supported');
+      return false;
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn('Copy failed', error);
+      setCopiedText(null);
+      return false;
+    }
+  };
+
+  return [copiedText, copy];
+}

package/lib/hooks/useInputState.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInputState = void 0;
+var _react = require("react");
+
+/**
+ * Simple Hook to use with input tag. The primary purpose is an abstraction over input onChange property.
+ * () => {
+ *   const [value, onChange] = useInputState("");
+ *
+ *   return <Input type="text" value={value} onChange={onChange} />;
+ * }
+ */
+const useInputState = function () {
+  let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const [state, setState] = (0, _react.useState)(initialState);
+  const setInputState = (0, _react.useCallback)(event => setState(event && event.target.value), []);
+  return [state, setInputState];
+};
+exports.useInputState = useInputState;

package/lib/hooks/useInputState.js.flow

@@ -0,0 +1,28 @@
+// @flow strict
+
+import {useCallback, useState} from 'react';
+
+
+type ReturnType = [
+  string,
+  (event: SyntheticInputEvent<HTMLInputElement>) => void,
+];
+
+/**
+ * Simple Hook to use with input tag. The primary purpose is an abstraction over input onChange property.
+ * () => {
+ *   const [value, onChange] = useInputState("");
+ *
+ *   return <Input type="text" value={value} onChange={onChange} />;
+ * }
+ */
+export const useInputState = (initialState: string = ''): ReturnType => {
+  const [state, setState] = useState(initialState);
+
+  const setInputState = useCallback(
+    (event) => setState(event && event.target.value),
+    [],
+  );
+
+  return [state, setInputState];
+};

package/lib/hooks/useLockedBody.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLockedBody = useLockedBody;
+var _react = require("react");
+
+function useLockedBody() {
+  let initialLocked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const [locked, setLocked] = (0, _react.useState)(initialLocked);
+
+  // Do the side effect before render
+  (0, _react.useLayoutEffect)(() => {
+    if (!locked) {
+      return;
+    }
+
+    // Save initial body style
+    const originalOverflow = document.body?.style.overflow || '';
+    const originalPaddingRight = document.body?.style.paddingRight || '';
+
+    // Lock body scroll
+    if (document.body) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Get the scrollBar width
+    // TODO(Nishant): Fetch the scrollBar width from the browser
+    const scrollBarWidth = 0;
+
+    // Avoid width reflow
+    if (!!scrollBarWidth && document.body) {
+      document.body.style.paddingRight = `${scrollBarWidth}px`;
+    }
+    return () => {
+      if (document.body) {
+        document.body.style.overflow = originalOverflow;
+      }
+      if (!!scrollBarWidth && document.body) {
+        document.body.style.paddingRight = originalPaddingRight;
+      }
+    };
+  }, [locked]);
+
+  // Update state if initialValue changes
+  (0, _react.useEffect)(() => {
+    if (locked !== initialLocked) {
+      setLocked(initialLocked);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialLocked]);
+  return [locked, setLocked];
+}

package/lib/hooks/useLockedBody.js.flow

@@ -0,0 +1,55 @@
+// @flow strict
+
+import {useEffect, useLayoutEffect, useState} from 'react';
+
+
+type ReturnType = [boolean, (locked: boolean) => void];
+
+export function useLockedBody(initialLocked: boolean = false): ReturnType {
+  const [locked, setLocked] = useState(initialLocked);
+
+  // Do the side effect before render
+  useLayoutEffect(() => {
+    if (!locked) {
+      return;
+    }
+
+    // Save initial body style
+    const originalOverflow = document.body?.style.overflow || '';
+    const originalPaddingRight = document.body?.style.paddingRight || '';
+
+    // Lock body scroll
+    if (document.body) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Get the scrollBar width
+    // TODO(Nishant): Fetch the scrollBar width from the browser
+    const scrollBarWidth = 0;
+
+    // Avoid width reflow
+    if (!!scrollBarWidth && document.body) {
+      document.body.style.paddingRight = `${scrollBarWidth}px`;
+    }
+
+    return () => {
+      if (document.body) {
+        document.body.style.overflow = originalOverflow;
+      }
+
+      if (!!scrollBarWidth && document.body) {
+        document.body.style.paddingRight = originalPaddingRight;
+      }
+    };
+  }, [locked]);
+
+  // Update state if initialValue changes
+  useEffect(() => {
+    if (locked !== initialLocked) {
+      setLocked(initialLocked);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialLocked]);
+
+  return [locked, setLocked];
+}

package/lib/hooks/useToggle.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToggle = useToggle;
+var _react = require("react");
+
+function useToggle() {
+  let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  // Initialize the state
+  const [stateValue, setStateValue] = (0, _react.useState)(initialState);
+
+  // Define and memorize toggle function in case we pass down the component,
+  // This function change the boolean value to it's opposite value
+  const toggle = (0, _react.useCallback)(() => setStateValue(state => !state), []);
+  return [stateValue, toggle];
+}

package/lib/hooks/useToggle.js.flow

@@ -0,0 +1,17 @@
+// @flow strict
+
+import {useCallback, useState} from 'react';
+
+
+export function useToggle(
+  initialState: boolean = false,
+): [boolean, (newValue: boolean) => void] {
+  // Initialize the state
+  const [stateValue, setStateValue] = useState(initialState);
+
+  // Define and memorize toggle function in case we pass down the component,
+  // This function change the boolean value to it's opposite value
+  const toggle = useCallback(() => setStateValue((state) => !state), []);
+
+  return [stateValue, toggle];
+}

package/lib/hooks/useWindowSize.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWindowSize = useWindowSize;
+var _react = require("react");
+
+function useWindowSize() {
+  const [windowSize, setWindowSize] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
+  (0, _react.useEffect)(() => {
+    const handler = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+
+    // Set size at the first client-side load
+    handler();
+    window.addEventListener('resize', handler);
+
+    // Remove event listener on cleanup
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, []);
+  return windowSize;
+}

package/lib/hooks/useWindowSize.js.flow

@@ -0,0 +1,37 @@
+// @flow strict
+
+import {useEffect, useState} from 'react';
+
+
+type WindowSize = {
+  width: number,
+  height: number,
+};
+
+export function useWindowSize(): WindowSize {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const handler = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    // Set size at the first client-side load
+    handler();
+
+    window.addEventListener('resize', handler);
+
+    // Remove event listener on cleanup
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, []);
+
+  return windowSize;
+}

package/lib/styles/typography.module.css

@@ -253,6 +253,7 @@
 .link {
   border-radius: calc(borderRadiusXSmall / 2);
   cursor: pointer;
+  width: fit-content;
 }
 
 .underline {

package/lib/types/common.js

@@ -1 +0,0 @@
-"use strict";

package/lib/utils/index.js

@@ -90,4 +90,15 @@ Object.keys(_string).forEach(function (key) {
       return _string[key];
     }
   });
+});
+var _tokens = require("./tokens");
+Object.keys(_tokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tokens[key];
+    }
+  });
 });

package/lib/utils/index.js.flow

@@ -8,3 +8,4 @@ export * from './makeClassNameComponent';
 export * from './menu';
 export * from './merge-refs';
 export * from './string';
+export * from './tokens';