@basic-ui/material 1.0.0-alpha.43 → 1.0.0-alpha.45

package/src/Snackbar/Snackbar.story.tsx

@@ -1,99 +1,99 @@
-import { useState } from 'react';
-
-import { Snackbar } from './';
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Select } from '../Select';
-import { SelectItem } from '../SelectItem';
-import { Link } from '../Link';
-import { StackProvider, useStack } from './Stack';
-// import './styles.css';
-
-export default {
-  title: 'components/Snackbar',
-};
-
-const Example = () => {
-  return (
-    <>
-      <Box m={4}>
-        <Snackbar>Marked as favorite.</Snackbar>
-      </Box>
-      <Box m={4}>
-        <Snackbar action={<Button>Action</Button>}>
-          This item already has the label{' '}
-          <Link href="https://booking.com" target="__blank">
-            &quot;travel&quot;
-          </Link>
-          . You can add a new label.
-        </Snackbar>
-      </Box>
-      <Box m={4}>
-        <Snackbar action={<Button>Add new label</Button>} flexWrap="wrap">
-          This item already has the label{' '}
-          <Link href="https://booking.com" target="__blank">
-            &quot;travel&quot;
-          </Link>
-          . You can add a new label.
-        </Snackbar>
-      </Box>
-    </>
-  );
-};
-
-const ControlledExample = () => {
-  const [placement, setPlacement] = useState<any>('top-right');
-
-  return (
-    <>
-      <Box width="240px" m={4}>
-        <Select value={placement} onChange={(e, val) => setPlacement(val)}>
-          <SelectItem value="top-right">Top Right</SelectItem>
-          <SelectItem value="top-center">Top Center</SelectItem>
-          <SelectItem value="top-left">Top Left</SelectItem>
-          <SelectItem value="bottom-right">Bottom Right</SelectItem>
-          <SelectItem value="bottom-center">Bottom Center</SelectItem>
-          <SelectItem value="bottom-left">Bottom Left</SelectItem>
-        </Select>
-      </Box>
-      <Box m={4}>
-        <StackProvider placement={placement}>
-          <SnackbarButton />
-        </StackProvider>
-      </Box>
-    </>
-  );
-};
-
-function SnackbarButton() {
-  const { addItem } = useStack();
-  return (
-    <Button
-      onClick={() =>
-        addItem(
-          <Snackbar action={<Button>Dismiss</Button>} dismissible>
-            This item already has the label{' '}
-            <Link href="https://booking.com" target="__blank">
-              &quot;travel&quot;
-            </Link>
-            . You can add a new label.
-          </Snackbar>
-        )
-      }
-    >
-      Add snackbar
-    </Button>
-  );
-}
-
-const SnackbarStackExample = () => {
-  return (
-    <StackProvider>
-      <SnackbarButton />
-    </StackProvider>
-  );
-};
-
-export const Default = () => <Example />;
-export const Controlled = () => <ControlledExample />;
-export const SnackbarStack = () => <SnackbarStackExample />;
+import { useState } from 'react';
+
+import { Snackbar } from './';
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { Select } from '../Select';
+import { SelectItem } from '../SelectItem';
+import { Link } from '../Link';
+import { StackProvider, useStack } from './Stack';
+// import './styles.css';
+
+export default {
+  title: 'components/Snackbar',
+};
+
+const Example = () => {
+  return (
+    <>
+      <Box m={4}>
+        <Snackbar>Marked as favorite.</Snackbar>
+      </Box>
+      <Box m={4}>
+        <Snackbar action={<Button>Action</Button>}>
+          This item already has the label{' '}
+          <Link href="https://booking.com" target="__blank">
+            &quot;travel&quot;
+          </Link>
+          . You can add a new label.
+        </Snackbar>
+      </Box>
+      <Box m={4}>
+        <Snackbar action={<Button>Add new label</Button>} flexWrap="wrap">
+          This item already has the label{' '}
+          <Link href="https://booking.com" target="__blank">
+            &quot;travel&quot;
+          </Link>
+          . You can add a new label.
+        </Snackbar>
+      </Box>
+    </>
+  );
+};
+
+const ControlledExample = () => {
+  const [placement, setPlacement] = useState<any>('top-right');
+
+  return (
+    <>
+      <Box width="240px" m={4}>
+        <Select value={placement} onChange={(e, val) => setPlacement(val)}>
+          <SelectItem value="top-right">Top Right</SelectItem>
+          <SelectItem value="top-center">Top Center</SelectItem>
+          <SelectItem value="top-left">Top Left</SelectItem>
+          <SelectItem value="bottom-right">Bottom Right</SelectItem>
+          <SelectItem value="bottom-center">Bottom Center</SelectItem>
+          <SelectItem value="bottom-left">Bottom Left</SelectItem>
+        </Select>
+      </Box>
+      <Box m={4}>
+        <StackProvider placement={placement}>
+          <SnackbarButton />
+        </StackProvider>
+      </Box>
+    </>
+  );
+};
+
+function SnackbarButton() {
+  const { addItem } = useStack();
+  return (
+    <Button
+      onClick={() =>
+        addItem(
+          <Snackbar action={<Button>Dismiss</Button>} dismissible>
+            This item already has the label{' '}
+            <Link href="https://booking.com" target="__blank">
+              &quot;travel&quot;
+            </Link>
+            . You can add a new label.
+          </Snackbar>
+        )
+      }
+    >
+      Add snackbar
+    </Button>
+  );
+}
+
+const SnackbarStackExample = () => {
+  return (
+    <StackProvider>
+      <SnackbarButton />
+    </StackProvider>
+  );
+};
+
+export const Default = () => <Example />;
+export const Controlled = () => <ControlledExample />;
+export const SnackbarStack = () => <SnackbarStackExample />;

package/src/Snackbar/Snackbar.tsx

@@ -1,82 +1,82 @@
-import { assignMultipleRefs } from '@basic-ui/core';
-import { rem } from 'polished';
-import type { ReactElement } from 'react';
-import { cloneElement, forwardRef, useRef } from 'react';
-import {
-  DARK_SCHEME_CLASS,
-  LIGHT_SCHEME_CLASS,
-  useColorScheme,
-} from '@basic-ui/dynamic-theme';
-
-import { Box } from '../Box';
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-import { Text } from '../Text';
-import { useSnackbarAnimation } from './useSnackbarAnimation';
-
-export interface SnackbarProps extends PaperProps {
-  action?: ReactElement;
-  timeout?: number;
-  dismissible?: boolean;
-}
-
-export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
-  function Snackbar(props, forwardedRef) {
-    const { colorScheme } = useColorScheme();
-    const ref = useRef<HTMLDivElement | null>(null);
-    const {
-      __css,
-      action,
-      children,
-      style: styleProp,
-      timeout = 5000,
-      dismissible,
-      ...otherProps
-    } = props;
-
-    const { onClose, placementStyle, style } = useSnackbarAnimation(
-      ref,
-      timeout
-    );
-
-    return (
-      <Paper
-        elevation={4}
-        darkThemeBackgroundOverlay={4}
-        className={
-          colorScheme === 'light' ? DARK_SCHEME_CLASS : LIGHT_SCHEME_CLASS
-        }
-        ref={assignMultipleRefs(forwardedRef, ref)}
-        __css={{
-          boxShadow: 4,
-          py: rem(6),
-          pl: 3,
-          pr: 3,
-          display: 'inline-flex',
-          minWidth: `min(100%, ${rem(344)})`,
-          maxWidth: ['100%', 'unset'],
-          borderRadius: 'extra-small',
-          color: 'on.surface',
-          flexDirection: 'row',
-          willChange: 'transform,opacity',
-          ...placementStyle,
-          ...__css,
-        }}
-        style={{
-          ...style,
-          ...styleProp,
-        }}
-        {...otherProps}
-      >
-        <Text variant="body-medium" as="span" py={2}>
-          {children}
-        </Text>
-        {action && (
-          <Box as="span" pl={2} mr={-2} ml="auto" minWidth="auto">
-            {dismissible ? cloneElement(action, { onClick: onClose }) : action}
-          </Box>
-        )}
-      </Paper>
-    );
-  }
-);
+import { assignMultipleRefs } from '@basic-ui/core';
+import { rem } from 'polished';
+import type { ReactElement } from 'react';
+import { cloneElement, forwardRef, useRef } from 'react';
+import {
+  DARK_SCHEME_CLASS,
+  LIGHT_SCHEME_CLASS,
+  useColorScheme,
+} from '@basic-ui/dynamic-theme';
+
+import { Box } from '../Box';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { Text } from '../Text';
+import { useSnackbarAnimation } from './useSnackbarAnimation';
+
+export interface SnackbarProps extends PaperProps {
+  action?: ReactElement;
+  timeout?: number;
+  dismissible?: boolean;
+}
+
+export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
+  function Snackbar(props, forwardedRef) {
+    const { colorScheme } = useColorScheme();
+    const ref = useRef<HTMLDivElement | null>(null);
+    const {
+      __css,
+      action,
+      children,
+      style: styleProp,
+      timeout = 5000,
+      dismissible,
+      ...otherProps
+    } = props;
+
+    const { onClose, placementStyle, style } = useSnackbarAnimation(
+      ref,
+      timeout
+    );
+
+    return (
+      <Paper
+        elevation={4}
+        darkThemeBackgroundOverlay={4}
+        className={
+          colorScheme === 'light' ? DARK_SCHEME_CLASS : LIGHT_SCHEME_CLASS
+        }
+        ref={assignMultipleRefs(forwardedRef, ref)}
+        __css={{
+          boxShadow: 4,
+          py: rem(6),
+          pl: 3,
+          pr: 3,
+          display: 'inline-flex',
+          minWidth: `min(100%, ${rem(344)})`,
+          maxWidth: ['100%', 'unset'],
+          borderRadius: 'extra-small',
+          color: 'on.surface',
+          flexDirection: 'row',
+          willChange: 'transform,opacity',
+          ...placementStyle,
+          ...__css,
+        }}
+        style={{
+          ...style,
+          ...styleProp,
+        }}
+        {...otherProps}
+      >
+        <Text variant="body-medium" as="span" py={2}>
+          {children}
+        </Text>
+        {action && (
+          <Box as="span" pl={2} mr={-2} ml="auto" minWidth="auto">
+            {dismissible ? cloneElement(action, { onClick: onClose }) : action}
+          </Box>
+        )}
+      </Paper>
+    );
+  }
+);