@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.50

package/src/Dialog/Dialog.story.tsx

@@ -1,53 +1,53 @@
-import { useState } from 'react';
-
-import type { DialogAnimationModes } from './';
-import { Dialog } from './';
-import { Button } from '../Button';
-import { LoremIpsum } from '../Text/LoremIpsum';
-import { Box } from '../Box';
-import { Switch } from '../Switch';
-import { Select } from '../Select';
-import { SelectItem } from '../SelectItem';
-
-export default {
-  title: 'components/Dialog',
-};
-
-const Example = ({ animationMode = 'slide' as DialogAnimationModes }) => {
-  const [open, setOpen] = useState(false);
-  const [long, setLong] = useState(false);
-
-  return (
-    <Box bg="surface">
-      <Button id="open-button" onClick={() => setOpen(true)}>
-        Open dialog
-      </Button>
-      <Switch checked={long} onChange={(e) => setLong(e.target.checked)}>
-        Long content
-      </Switch>
-      <Dialog
-        open={open}
-        onClose={() => setOpen(false)}
-        animationMode={animationMode}
-        m={3}
-      >
-        <LoremIpsum count={long ? 10 : 1} />
-        <Select>
-          <SelectItem>Hello 1</SelectItem>
-          <SelectItem>Hello 2</SelectItem>
-        </Select>
-        <Button id="dialog-close-button" onClick={() => setOpen(false)}>
-          Close
-        </Button>
-      </Dialog>
-      <LoremIpsum />
-      <Button id="close-button" onClick={() => setOpen(false)}>
-        Close dialog
-      </Button>
-    </Box>
-  );
-};
-
-export const DialogSlide = () => <Example />;
-export const DialogGrow = () => <Example animationMode={'grow'} />;
-export const DialogSlideGrow = () => <Example animationMode={'slide-grow'} />;
+import { useState } from 'react';
+
+import type { DialogAnimationModes } from './';
+import { Dialog } from './';
+import { Button } from '../Button';
+import { LoremIpsum } from '../Text/LoremIpsum';
+import { Box } from '../Box';
+import { Switch } from '../Switch';
+import { Select } from '../Select';
+import { SelectItem } from '../SelectItem';
+
+export default {
+  title: 'components/Dialog',
+};
+
+const Example = ({ animationMode = 'slide' as DialogAnimationModes }) => {
+  const [open, setOpen] = useState(false);
+  const [long, setLong] = useState(false);
+
+  return (
+    <Box bg="surface">
+      <Button id="open-button" onClick={() => setOpen(true)}>
+        Open dialog
+      </Button>
+      <Switch checked={long} onChange={(e) => setLong(e.target.checked)}>
+        Long content
+      </Switch>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        animationMode={animationMode}
+        m={3}
+      >
+        <LoremIpsum count={long ? 10 : 1} />
+        <Select>
+          <SelectItem>Hello 1</SelectItem>
+          <SelectItem>Hello 2</SelectItem>
+        </Select>
+        <Button id="dialog-close-button" onClick={() => setOpen(false)}>
+          Close
+        </Button>
+      </Dialog>
+      <LoremIpsum />
+      <Button id="close-button" onClick={() => setOpen(false)}>
+        Close dialog
+      </Button>
+    </Box>
+  );
+};
+
+export const DialogSlide = () => <Example />;
+export const DialogGrow = () => <Example animationMode={'grow'} />;
+export const DialogSlideGrow = () => <Example animationMode={'slide-grow'} />;

package/src/Dialog/Dialog.tsx

@@ -1,73 +1,73 @@
-import { forwardRef } from 'react';
-import { Portal } from '@basic-ui/core';
-
-import type { ScrimProps } from './Scrim';
-import { Scrim } from './Scrim';
-import type { DialogContainerProps } from './DialogContainer';
-import { DialogContainer } from './DialogContainer';
-import type { DialogSurfaceProps } from './DialogSurface';
-import { DialogSurface } from './DialogSurface';
-import { useDialogAnimation } from './useDialogAnimation';
-import type { DialogBackdropProps } from './DialogBackdrop';
-import { DialogBackdrop } from './DialogBackdrop';
-import type { DialogAnimationModes } from './useDialogAnimation';
-export type { DialogAnimationModes } from './useDialogAnimation';
-
-export interface DialogProps extends DialogSurfaceProps {
-  open?: boolean;
-  onClose: () => void;
-  disableBackdropClick?: boolean;
-  disableEscapeKeyDown?: boolean;
-  animationMode?: DialogAnimationModes;
-  openTimeoutInMilliseconds?: number;
-  closeTimeoutInMilliseconds?: number;
-  backdropProps?: DialogBackdropProps;
-  containerProps?: DialogContainerProps;
-  scrimProps?: ScrimProps;
-}
-
-export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
-  props,
-  forwardedRef
-) {
-  const {
-    open: openProp = false,
-    animationMode = 'grow',
-    onClose,
-    disableBackdropClick,
-    disableEscapeKeyDown,
-    backdropProps,
-    containerProps,
-    scrimProps,
-    openTimeoutInMilliseconds,
-    closeTimeoutInMilliseconds,
-    ...otherProps
-  } = props;
-  const { containerStyle, scrimStyle, open } = useDialogAnimation({
-    open: openProp,
-    mode: animationMode,
-    openTimeoutInMilliseconds,
-    closeTimeoutInMilliseconds,
-  });
-
-  if (!open) {
-    return null;
-  }
-
-  return (
-    <Portal>
-      <DialogBackdrop
-        onClose={onClose}
-        open={openProp}
-        disableCloseOnClick={disableBackdropClick}
-        disableEscapeKeyDown={disableEscapeKeyDown}
-        {...backdropProps}
-      >
-        <Scrim __css={scrimStyle} {...scrimProps} />
-        <DialogContainer __css={containerStyle} {...containerProps}>
-          <DialogSurface ref={forwardedRef} {...otherProps} />
-        </DialogContainer>
-      </DialogBackdrop>
-    </Portal>
-  );
-});
+import { forwardRef } from 'react';
+import { Portal } from '@basic-ui/core';
+
+import type { ScrimProps } from './Scrim';
+import { Scrim } from './Scrim';
+import type { DialogContainerProps } from './DialogContainer';
+import { DialogContainer } from './DialogContainer';
+import type { DialogSurfaceProps } from './DialogSurface';
+import { DialogSurface } from './DialogSurface';
+import { useDialogAnimation } from './useDialogAnimation';
+import type { DialogBackdropProps } from './DialogBackdrop';
+import { DialogBackdrop } from './DialogBackdrop';
+import type { DialogAnimationModes } from './useDialogAnimation';
+export type { DialogAnimationModes } from './useDialogAnimation';
+
+export interface DialogProps extends DialogSurfaceProps {
+  open?: boolean;
+  onClose: () => void;
+  disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;
+  animationMode?: DialogAnimationModes;
+  openTimeoutInMilliseconds?: number;
+  closeTimeoutInMilliseconds?: number;
+  backdropProps?: DialogBackdropProps;
+  containerProps?: DialogContainerProps;
+  scrimProps?: ScrimProps;
+}
+
+export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
+  props,
+  forwardedRef
+) {
+  const {
+    open: openProp = false,
+    animationMode = 'grow',
+    onClose,
+    disableBackdropClick,
+    disableEscapeKeyDown,
+    backdropProps,
+    containerProps,
+    scrimProps,
+    openTimeoutInMilliseconds,
+    closeTimeoutInMilliseconds,
+    ...otherProps
+  } = props;
+  const { containerStyle, scrimStyle, open } = useDialogAnimation({
+    open: openProp,
+    mode: animationMode,
+    openTimeoutInMilliseconds,
+    closeTimeoutInMilliseconds,
+  });
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <DialogBackdrop
+        onClose={onClose}
+        open={openProp}
+        disableCloseOnClick={disableBackdropClick}
+        disableEscapeKeyDown={disableEscapeKeyDown}
+        {...backdropProps}
+      >
+        <Scrim __css={scrimStyle} {...scrimProps} />
+        <DialogContainer __css={containerStyle} {...containerProps}>
+          <DialogSurface ref={forwardedRef} {...otherProps} />
+        </DialogContainer>
+      </DialogBackdrop>
+    </Portal>
+  );
+});

package/src/Dialog/DialogBackdrop.tsx

@@ -1,42 +1,42 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import type { ModalBackdropProps } from '@basic-ui/core';
-import { ModalBackdrop as _ModalBackdrop } from '@basic-ui/core';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-const ModalBackdrop = _ModalBackdrop as React.FC<
-  DialogBackdropProps & { ref?: React.Ref<HTMLDivElement> }
->;
-
-export type DialogBackdropProps = ModalBackdropProps &
-  BoxProps & { open?: boolean };
-
-export const DialogBackdrop = forwardRef<HTMLDivElement, DialogBackdropProps>(
-  function DialogBackdrop(props, forwardedRef) {
-    const { open, onClose, __css, ...otherProps } = props;
-
-    const pointerEvents = open ? undefined : 'none';
-
-    return (
-      <ModalBackdrop
-        as={Box}
-        ref={forwardedRef}
-        onClose={onClose}
-        style={{ pointerEvents }}
-        __css={{
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          right: '0',
-          bottom: '0',
-          zIndex: 'dialog',
-          // Can't set overflow auto here otherwise slide animation
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { FC, Ref } from 'react';
+import { forwardRef } from 'react';
+import type { ModalBackdropProps } from '@basic-ui/core';
+import { ModalBackdrop as _ModalBackdrop } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+const ModalBackdrop = _ModalBackdrop as FC<
+  DialogBackdropProps & { ref?: Ref<HTMLDivElement> }
+>;
+
+export type DialogBackdropProps = ModalBackdropProps &
+  BoxProps & { open?: boolean };
+
+export const DialogBackdrop = forwardRef<HTMLDivElement, DialogBackdropProps>(
+  function DialogBackdrop(props, forwardedRef) {
+    const { open, onClose, __css, ...otherProps } = props;
+
+    const pointerEvents = open ? undefined : 'none';
+
+    return (
+      <ModalBackdrop
+        as={Box}
+        ref={forwardedRef}
+        onClose={onClose}
+        style={{ pointerEvents }}
+        __css={{
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          zIndex: 'dialog',
+          // Can't set overflow auto here otherwise slide animation
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Dialog/DialogContainer.tsx

@@ -1,31 +1,31 @@
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export type DialogContainerProps = BoxProps;
-
-export const DialogContainer = forwardRef<HTMLDivElement, BoxProps>(
-  function DialogContainer(props, forwardedRef) {
-    const { __css, ...otherProps } = props;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        __css={{
-          position: 'absolute',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '100%',
-          height: '100%',
-          willChange: 'transform,opacity',
-          transformOrigin: 'center center',
-          pointerEvents: 'none',
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type DialogContainerProps = BoxProps;
+
+export const DialogContainer = forwardRef<HTMLDivElement, BoxProps>(
+  function DialogContainer(props, forwardedRef) {
+    const { __css, ...otherProps } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        __css={{
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          willChange: 'transform,opacity',
+          transformOrigin: 'center center',
+          pointerEvents: 'none',
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Dialog/DialogSurface.tsx

@@ -1,57 +1,55 @@
-import { forwardRef } from 'react';
-import * as React from 'react';
-import type { ModalProps } from '@basic-ui/core';
-import { Modal as _Modal } from '@basic-ui/core';
-import { rem } from 'polished';
-import { get, variant } from 'styled-system';
-
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-import { useTheme } from '../theme';
-
-const Modal = _Modal as React.FC<
-  DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
->;
-
-export type DialogSurfaceProps = ModalProps &
-  PaperProps & {
-    variant?: 'base';
-  };
-
-export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
-  function DialogSurface(props, forwardedRef) {
-    const { __css, variant: variantProp = 'base', ...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: 'small',
-          width: '100%',
-          maxWidth: rem(600),
-          maxHeight: '100%',
-          overflow: 'auto',
-          pointerEvents: 'auto',
-          ...variant({
-            scale: 'dialogs.variants',
-            prop: 'variant',
-            variants: {
-              base: {},
-            },
-          })({ variant: variantProp, theme }),
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+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 { rem } from 'polished';
+import { get, variant } from 'styled-system';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
+
+const Modal = _Modal as FC<DialogSurfaceProps & { ref?: Ref<HTMLDivElement> }>;
+
+export type DialogSurfaceProps = ModalProps &
+  PaperProps & {
+    variant?: 'base';
+  };
+
+export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
+  function DialogSurface(props, forwardedRef) {
+    const { __css, variant: variantProp = 'base', ...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: 'small',
+          width: '100%',
+          maxWidth: rem(600),
+          maxHeight: '100%',
+          overflow: 'auto',
+          pointerEvents: 'auto',
+          ...variant({
+            scale: 'dialogs.variants',
+            prop: 'variant',
+            variants: {
+              base: {},
+            },
+          })({ variant: variantProp, theme }),
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Dialog/Scrim.tsx

@@ -1,35 +1,35 @@
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { alpha } from '../color';
-
-export type ScrimProps = BoxProps;
-
-export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
-  props,
-  forwardedRef
-) {
-  const { __css, ...otherProps } = props;
-
-  return (
-    <Box
-      ref={forwardedRef}
-      __css={{
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        right: '0',
-        bottom: '0',
-        width: '100%',
-        height: '100%',
-        backgroundColor: alpha('#000', 0.32),
-        willChange: 'opacity',
-        zIndex: -1,
-        pointerEvents: 'none',
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { alpha } from '../color';
+
+export type ScrimProps = BoxProps;
+
+export const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(
+  props,
+  forwardedRef
+) {
+  const { __css, ...otherProps } = props;
+
+  return (
+    <Box
+      ref={forwardedRef}
+      __css={{
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        right: '0',
+        bottom: '0',
+        width: '100%',
+        height: '100%',
+        backgroundColor: alpha('#000', 0.32),
+        willChange: 'opacity',
+        zIndex: -1,
+        pointerEvents: 'none',
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/Dialog/index.ts

@@ -1,2 +1,2 @@
-export * from './Dialog';
-export type { DialogBackdropProps } from './DialogBackdrop';
+export * from './Dialog';
+export type { DialogBackdropProps } from './DialogBackdrop';