@basic-ui/material 1.0.0-alpha.37 → 1.0.0-alpha.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.37",
+  "version": "1.0.0-alpha.38",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -62,5 +62,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "dea98ab1375f561badcbecb1de996d25d0ba0ee2"
+  "gitHead": "58116e5c2f4f369e96b5b61b382a49d017632970"
 }

package/src/Menu/index.ts

@@ -1 +1,2 @@
 export * from './Menu';
+export * from './animation';

package/src/Popover/Popover.story.tsx

@@ -0,0 +1,29 @@
+import { useRef, useState } from 'react';
+
+import { Button } from '../Button';
+import { Box } from '../Box';
+import { TextField } from '../TextField';
+import { Popover } from './Popover';
+
+export default {
+  title: 'components/Popover',
+};
+
+const Example = () => {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <Box bg="surface" display="flex" justifyContent="center">
+      <Button id="open-button" onClick={() => setOpen(true)} ref={buttonRef}>
+        Open dialog
+      </Button>
+      <Popover open={open} onClose={() => setOpen(false)} anchorEl={buttonRef}>
+        Hello hello
+        <TextField placeholder="Hello" />
+      </Popover>
+    </Box>
+  );
+};
+
+export const Simple = () => <Example />;

package/src/Popover/Popover.tsx

@@ -0,0 +1,95 @@
+import {
+  Popper,
+  type PopperProps,
+  assignMultipleRefs,
+  Portal,
+} from '@basic-ui/core';
+import { forwardRef, useEffect, useRef } from 'react';
+
+import { Box } from '../';
+import type { DialogBackdropProps } from '../Dialog/DialogBackdrop';
+import { DialogBackdrop } from '../Dialog/DialogBackdrop';
+import { PopoverSurface } from './PopoverSurface';
+import type { PopoverContainerProps } from './PopoverContainer';
+import { PopoverContainer } from './PopoverContainer';
+
+export type PopoverProps = Omit<PopperProps, 'usePortal'> & {
+  open: boolean;
+  onClose: () => void;
+  disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;
+  backdropProps?: DialogBackdropProps;
+  containerProps?: PopoverContainerProps;
+};
+
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+  function Popover(
+    {
+      portalSelector,
+      open,
+      anchorEl,
+      placement = 'bottom',
+      strategy = 'fixed',
+      modifiers,
+      skidding,
+      distance = 0,
+      offsetFn,
+      arrowPadding,
+      onClose,
+      children,
+      backdropProps,
+      containerProps,
+      disableBackdropClick,
+      disableEscapeKeyDown,
+      ...otherProps
+    },
+    forwardedRef
+  ) {
+    const ref = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      if (!anchorEl || !anchorEl.current) {
+        console.warn(
+          '<Popover /> will not open because it does not have an anchor element defined'
+        );
+      }
+    }, [anchorEl]);
+
+    if (!open || !anchorEl || !anchorEl.current) {
+      return null;
+    }
+
+    return (
+      <Portal selector={portalSelector}>
+        <DialogBackdrop
+          onClose={onClose}
+          open={open}
+          disableCloseOnClick={disableBackdropClick}
+          disableEscapeKeyDown={disableEscapeKeyDown}
+          {...backdropProps}
+        >
+          <Popper
+            as={Box}
+            innerAs="div"
+            anchorEl={anchorEl}
+            placement={placement}
+            strategy={strategy}
+            modifiers={modifiers}
+            skidding={skidding}
+            distance={distance}
+            offsetFn={offsetFn}
+            arrowPadding={arrowPadding}
+          >
+            <PopoverContainer {...containerProps}>
+              <PopoverSurface
+                ref={assignMultipleRefs(forwardedRef, ref)}
+                {...otherProps}
+              >
+                {children}
+              </PopoverSurface>
+            </PopoverContainer>
+          </Popper>
+        </DialogBackdrop>
+      </Portal>
+    );
+  }
+);

package/src/Popover/PopoverContainer.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type PopoverContainerProps = BoxProps;
+
+export const PopoverContainer = forwardRef<HTMLDivElement, BoxProps>(
+  function PopoverContainer(props, forwardedRef) {
+    const { __css, ...otherProps } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        __css={{
+          minWidth: ['100vw', 'auto'],
+          px: [3, 0],
+          pointerEvents: 'none',
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Popover/PopoverSurface.tsx

@@ -0,0 +1,51 @@
+import type { FC, Ref } from 'react';
+import { forwardRef } from 'react';
+import type { ModalProps } from '@basic-ui/core';
+import { Modal as _Modal } from '@basic-ui/core';
+import { get } from 'styled-system';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+import { growAnimation } from '../Menu';
+import { EASING_STANDARD } from '../motion';
+
+const Modal = _Modal as FC<PopoverSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
+
+export type PopoverSurfaceProps = ModalProps & PaperProps;
+
+export const PopoverSurface = forwardRef<HTMLDivElement, PopoverSurfaceProps>(
+  function PopoverSurface(props, forwardedRef) {
+    const { __css, ...otherProps } = props;
+    const theme = useTheme();
+
+    const overlayValue =
+      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
+
+    return (
+      <Modal
+        ref={forwardedRef}
+        as={Paper}
+        theme={theme}
+        elevation={3}
+        darkThemeBackgroundOverlay={overlayValue}
+        __css={{
+          position: 'relative',
+          borderRadius: 'extra-small',
+          overflow: 'auto',
+          pointerEvents: 'auto',
+          willChange: 'transform,opacity',
+          '[data-popper-placement="top"] &': {
+            transformOrigin: 'bottom center',
+          },
+          '[data-popper-placement="bottom"] &': {
+            transformOrigin: 'top center',
+          },
+          animation: `${growAnimation} .12s ${EASING_STANDARD}`,
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Popover/index.ts

@@ -0,0 +1 @@
+export * from './Popover';

package/src/Tooltip/Tooltip.tsx

@@ -22,7 +22,21 @@ const BaseTooltip: FC<
 
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   function Tooltip(props, forwardedRef) {
-    const { placement = 'bottom', __css, ...otherProps } = props;
+    const { placement = 'bottom', children, __css, ...otherProps } = props;
+    const cssStyle = {
+      variant: ['text.body-medium', 'text.body-small'],
+      bg: alpha('#616161', 0.9),
+      color: '#fff',
+      px: 2,
+      py: 1,
+      borderRadius: 'extra-small',
+      zIndex: 'tooltip',
+      ...__css,
+    };
+
+    if (!children) {
+      return <Box ref={forwardedRef} __css={cssStyle} {...otherProps} />;
+    }
 
     return (
       <BaseTooltip
@@ -31,18 +45,11 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         ref={forwardedRef}
         placement={placement}
         distance={8}
-        __css={{
-          variant: ['text.body-medium', 'text.body-small'],
-          bg: alpha('#616161', 0.9),
-          color: '#fff',
-          px: 2,
-          py: 1,
-          borderRadius: 'extra-small',
-          zIndex: 'tooltip',
-          ...__css,
-        }}
+        __css={cssStyle}
         {...otherProps}
-      />
+      >
+        {children}
+      </BaseTooltip>
     );
   }
 );

package/src/index.ts

@@ -19,6 +19,7 @@ export * from './Menu';
 export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
+export * from './Popover';
 export * from './ProgressSpinner';
 export * from './RadioButton';
 export * from './Ripple';

package/build/esm/ThemeExplorer/importGoogleFont.d.ts

@@ -1,4 +0,0 @@
-export declare function importGoogleFont(fonts: {
-    family: string;
-    weights?: number[];
-}[]): void;

package/build/esm/ThemeExplorer/importGoogleFont.js

@@ -1,25 +0,0 @@
-export function importGoogleFont(fonts) {
-  function addStylesheetURL(url) {
-    var link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = url;
-    document.getElementsByTagName('head')[0].appendChild(link);
-  }
-
-  var fontStr = fonts.map(function (f) {
-    var family = f.family.split(/ +/).join('+');
-
-    if (f.weights && f.weights.length > 0) {
-      return family + ':' + f.weights.join(',');
-    }
-
-    return family;
-  }).join('|');
-
-  if (!fontStr) {
-    return;
-  }
-
-  addStylesheetURL("https://fonts.googleapis.com/css?family=".concat(fontStr, "&display=swap"));
-}
-//# sourceMappingURL=importGoogleFont.js.map

package/build/esm/ThemeExplorer/importGoogleFont.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"importGoogleFont.js","names":["importGoogleFont","fonts","addStylesheetURL","url","link","document","createElement","rel","href","getElementsByTagName","appendChild","fontStr","map","f","family","split","join","weights","length"],"sources":["../../../src/ThemeExplorer/importGoogleFont.ts"],"sourcesContent":["export function importGoogleFont(\n  fonts: { family: string; weights?: number[] }[]\n) {\n  function addStylesheetURL(url: string) {\n    const link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = url;\n    document.getElementsByTagName('head')[0].appendChild(link);\n  }\n\n  const fontStr = fonts\n    .map((f) => {\n      const family = f.family.split(/ +/).join('+');\n      if (f.weights && f.weights.length > 0) {\n        return family + ':' + f.weights.join(',');\n      }\n      return family;\n    })\n    .join('|');\n\n  if (!fontStr) {\n    return;\n  }\n\n  addStylesheetURL(\n    `https://fonts.googleapis.com/css?family=${fontStr}&display=swap`\n  );\n}\n"],"mappings":"AAAA,OAAO,SAASA,gBAAT,CACLC,KADK,EAEL;EACA,SAASC,gBAAT,CAA0BC,GAA1B,EAAuC;IACrC,IAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAT,CAAuB,MAAvB,CAAb;IACAF,IAAI,CAACG,GAAL,GAAW,YAAX;IACAH,IAAI,CAACI,IAAL,GAAYL,GAAZ;IACAE,QAAQ,CAACI,oBAAT,CAA8B,MAA9B,EAAsC,CAAtC,EAAyCC,WAAzC,CAAqDN,IAArD;EACD;;EAED,IAAMO,OAAO,GAAGV,KAAK,CAClBW,GADa,CACT,UAACC,CAAD,EAAO;IACV,IAAMC,MAAM,GAAGD,CAAC,CAACC,MAAF,CAASC,KAAT,CAAe,IAAf,EAAqBC,IAArB,CAA0B,GAA1B,CAAf;;IACA,IAAIH,CAAC,CAACI,OAAF,IAAaJ,CAAC,CAACI,OAAF,CAAUC,MAAV,GAAmB,CAApC,EAAuC;MACrC,OAAOJ,MAAM,GAAG,GAAT,GAAeD,CAAC,CAACI,OAAF,CAAUD,IAAV,CAAe,GAAf,CAAtB;IACD;;IACD,OAAOF,MAAP;EACD,CAPa,EAQbE,IARa,CAQR,GARQ,CAAhB;;EAUA,IAAI,CAACL,OAAL,EAAc;IACZ;EACD;;EAEDT,gBAAgB,mDAC6BS,OAD7B,mBAAhB;AAGD"}

package/build/esm/tailwind/makeTailwindTheme.d.ts

@@ -1,5 +0,0 @@
-import type { Theme } from '../theme/theme';
-export declare type ColorsObject = {
-    [key: string]: string | ColorsObject;
-};
-export declare function extendColors(theme: Theme): ColorsObject;

package/build/esm/tailwind/makeTailwindTheme.js

@@ -1,32 +0,0 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-export function extendColors(theme) {
-  var modifiedColors = {};
-
-  function extractColors(colors, arr) {
-    var root = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
-    for (var _i = 0, _Object$keys = Object.keys(colors); _i < _Object$keys.length; _i++) {
-      var _key = _Object$keys[_i];
-
-      if (_key === 'modes') {
-        continue;
-      }
-
-      var c = colors[_key];
-
-      if (typeof c === 'string') {
-        var varName = "--".concat(root + _key, "--rgb"); // arr[key.replace(/-/g, '_')] = `rgba(var(${varName}), <alpha-value>)`;
-
-        arr[_key] = "rgba(var(".concat(varName, "), <alpha-value>)");
-      } else if (_typeof(c) === 'object') {
-        var subColors = {};
-        extractColors(c, subColors, root + _key + '-');
-        arr[_key] = subColors;
-      }
-    }
-  }
-
-  extractColors(theme.colors, modifiedColors);
-  return modifiedColors;
-}
-//# sourceMappingURL=makeTailwindTheme.js.map

package/build/esm/tailwind/makeTailwindTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"makeTailwindTheme.js","names":["extendColors","theme","modifiedColors","extractColors","colors","arr","root","Object","keys","key","c","varName","subColors"],"sources":["../../../src/tailwind/makeTailwindTheme.ts"],"sourcesContent":["import type { Theme } from '../theme/theme';\n\nexport type ColorsObject = { [key: string]: string | ColorsObject };\nexport function extendColors(theme: Theme): ColorsObject {\n  const modifiedColors: ColorsObject = {};\n  function extractColors(colors: ColorsObject, arr: ColorsObject, root = '') {\n    for (const key of Object.keys(colors)) {\n      if (key === 'modes') {\n        continue;\n      }\n\n      const c = colors[key];\n      if (typeof c === 'string') {\n        const varName = `--${root + key}--rgb`;\n        // arr[key.replace(/-/g, '_')] = `rgba(var(${varName}), <alpha-value>)`;\n        arr[key] = `rgba(var(${varName}), <alpha-value>)`;\n      } else if (typeof c === 'object') {\n        const subColors: ColorsObject = {};\n        extractColors(c, subColors, root + key + '-');\n        arr[key] = subColors;\n      }\n    }\n  }\n\n  extractColors(theme.colors as any, modifiedColors);\n  return modifiedColors;\n}\n"],"mappings":";AAGA,OAAO,SAASA,YAAT,CAAsBC,KAAtB,EAAkD;EACvD,IAAMC,cAA4B,GAAG,EAArC;;EACA,SAASC,aAAT,CAAuBC,MAAvB,EAA6CC,GAA7C,EAA2E;IAAA,IAAXC,IAAW,uEAAJ,EAAI;;IACzE,gCAAkBC,MAAM,CAACC,IAAP,CAAYJ,MAAZ,CAAlB,kCAAuC;MAAlC,IAAMK,IAAG,mBAAT;;MACH,IAAIA,IAAG,KAAK,OAAZ,EAAqB;QACnB;MACD;;MAED,IAAMC,CAAC,GAAGN,MAAM,CAACK,IAAD,CAAhB;;MACA,IAAI,OAAOC,CAAP,KAAa,QAAjB,EAA2B;QACzB,IAAMC,OAAO,eAAQL,IAAI,GAAGG,IAAf,UAAb,CADyB,CAEzB;;QACAJ,GAAG,CAACI,IAAD,CAAH,sBAAuBE,OAAvB;MACD,CAJD,MAIO,IAAI,QAAOD,CAAP,MAAa,QAAjB,EAA2B;QAChC,IAAME,SAAuB,GAAG,EAAhC;QACAT,aAAa,CAACO,CAAD,EAAIE,SAAJ,EAAeN,IAAI,GAAGG,IAAP,GAAa,GAA5B,CAAb;QACAJ,GAAG,CAACI,IAAD,CAAH,GAAWG,SAAX;MACD;IACF;EACF;;EAEDT,aAAa,CAACF,KAAK,CAACG,MAAP,EAAsBF,cAAtB,CAAb;EACA,OAAOA,cAAP;AACD"}