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

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,170 +1,170 @@
-import type { CSSProperties, MutableRefObject } from 'react';
-import { useEffect } from 'react';
-
-import { EASING_STANDARD } from '../motion';
-import { useStackItem } from './Stack';
-
-const TRANSITION_TIME = 150;
-const slideFromBottom = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(${x}, calc(${y} + 100%))`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, calc(${y} - 100%))`,
-  }),
-};
-
-const slideFromTop = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(${x}, calc(${y} - 100%))`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, calc(${y} + 100%))`,
-  }),
-};
-
-const slideFromRight = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} + 100%), ${y})`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} + 100%), ${y})`,
-  }),
-};
-
-const slideFromLeft = {
-  entering: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} - 100%), ${y})`,
-  }),
-  entered: (x: string, y: string) => ({
-    opacity: 1,
-    transform: `translate(${x}, ${y})`,
-  }),
-  exiting: (x: string, y: string) => ({
-    opacity: 0.6,
-    transform: `translate(calc(${x} - 100%), ${y})`,
-  }),
-};
-
-type AnimationState = 'entering' | 'entered' | 'exiting';
-const placements = {
-  'top-right': {
-    style: { top: 3, right: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromRight[state]('0px', `${translateY}px`),
-  },
-  'top-center': {
-    style: { top: 3, left: '50%' },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromBottom[state]('-50%', `${translateY}px`),
-  },
-  'top-left': {
-    style: { top: 3, left: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromLeft[state]('0px', `${translateY}px`),
-  },
-  'bottom-right': {
-    style: { bottom: 3, right: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromRight[state]('0px', `${-translateY}px`),
-  },
-  'bottom-center': {
-    style: { bottom: 3, left: '50%' },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromTop[state]('-50%', `${-translateY}px`),
-  },
-  'bottom-left': {
-    style: { bottom: 3, left: 3 },
-    animate: (state: AnimationState, translateY: number) =>
-      slideFromLeft[state]('0px', `${-translateY}px`),
-  },
-};
-const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
-
-function getTransition(timems: number) {
-  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
-}
-
-const defaultAnimation = {
-  style: {},
-  placementStyle: {},
-  onClose: undefined,
-};
-
-export function useSnackbarAnimation(
-  ref: MutableRefObject<HTMLDivElement | null>,
-  timeout: number
-): {
-  style: CSSProperties;
-  placementStyle: CSSProperties;
-  onClose?: () => void;
-} {
-  const stackItem = useStackItem({
-    ref,
-    closeTimeoutInMilliseconds: TRANSITION_TIME,
-  });
-  if (!stackItem) {
-    return defaultAnimation;
-  }
-
-  const { onClose, state, translateY = 0, placement } = stackItem;
-  const placementStyle = placements[placement].style;
-  const animateFn = placements[placement].animate;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      onClose();
-    }, timeout);
-    return () => {
-      clearTimeout(handler);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timeout]);
-
-  switch (state) {
-    case 'entering':
-      return {
-        style: { ...animateFn('entering', translateY), visibility: 'hidden' },
-        placementStyle: { ...(placementStyle as any), ...commonStyle },
-        onClose,
-      };
-    case 'entered':
-      return {
-        style: {
-          ...animateFn('entered', translateY),
-          transition: getTransition(TRANSITION_TIME),
-        },
-        placementStyle: { ...(placementStyle as any), ...commonStyle },
-        onClose,
-      };
-    case 'exiting':
-      return {
-        style: {
-          ...animateFn('exiting', translateY),
-          transition: getTransition(TRANSITION_TIME),
-        },
-        placementStyle: { ...(placementStyle as any), ...commonStyle },
-        onClose,
-      };
-  }
-}
+import type { CSSProperties, MutableRefObject } from 'react';
+import { useEffect } from 'react';
+
+import { EASING_STANDARD } from '../motion';
+import { useStackItem } from './Stack';
+
+const TRANSITION_TIME = 150;
+const slideFromBottom = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(${x}, calc(${y} + 100%))`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, calc(${y} - 100%))`,
+  }),
+};
+
+const slideFromTop = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(${x}, calc(${y} - 100%))`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, calc(${y} + 100%))`,
+  }),
+};
+
+const slideFromRight = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} + 100%), ${y})`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} + 100%), ${y})`,
+  }),
+};
+
+const slideFromLeft = {
+  entering: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} - 100%), ${y})`,
+  }),
+  entered: (x: string, y: string) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`,
+  }),
+  exiting: (x: string, y: string) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} - 100%), ${y})`,
+  }),
+};
+
+type AnimationState = 'entering' | 'entered' | 'exiting';
+const placements = {
+  'top-right': {
+    style: { top: 3, right: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromRight[state]('0px', `${translateY}px`),
+  },
+  'top-center': {
+    style: { top: 3, left: '50%' },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromBottom[state]('-50%', `${translateY}px`),
+  },
+  'top-left': {
+    style: { top: 3, left: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromLeft[state]('0px', `${translateY}px`),
+  },
+  'bottom-right': {
+    style: { bottom: 3, right: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromRight[state]('0px', `${-translateY}px`),
+  },
+  'bottom-center': {
+    style: { bottom: 3, left: '50%' },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromTop[state]('-50%', `${-translateY}px`),
+  },
+  'bottom-left': {
+    style: { bottom: 3, left: 3 },
+    animate: (state: AnimationState, translateY: number) =>
+      slideFromLeft[state]('0px', `${-translateY}px`),
+  },
+};
+const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
+
+function getTransition(timems: number) {
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
+}
+
+const defaultAnimation = {
+  style: {},
+  placementStyle: {},
+  onClose: undefined,
+};
+
+export function useSnackbarAnimation(
+  ref: MutableRefObject<HTMLDivElement | null>,
+  timeout: number
+): {
+  style: CSSProperties;
+  placementStyle: CSSProperties;
+  onClose?: () => void;
+} {
+  const stackItem = useStackItem({
+    ref,
+    closeTimeoutInMilliseconds: TRANSITION_TIME,
+  });
+  if (!stackItem) {
+    return defaultAnimation;
+  }
+
+  const { onClose, state, translateY = 0, placement } = stackItem;
+  const placementStyle = placements[placement].style;
+  const animateFn = placements[placement].animate;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      onClose();
+    }, timeout);
+    return () => {
+      clearTimeout(handler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeout]);
+
+  switch (state) {
+    case 'entering':
+      return {
+        style: { ...animateFn('entering', translateY), visibility: 'hidden' },
+        placementStyle: { ...(placementStyle as any), ...commonStyle },
+        onClose,
+      };
+    case 'entered':
+      return {
+        style: {
+          ...animateFn('entered', translateY),
+          transition: getTransition(TRANSITION_TIME),
+        },
+        placementStyle: { ...(placementStyle as any), ...commonStyle },
+        onClose,
+      };
+    case 'exiting':
+      return {
+        style: {
+          ...animateFn('exiting', translateY),
+          transition: getTransition(TRANSITION_TIME),
+        },
+        placementStyle: { ...(placementStyle as any), ...commonStyle },
+        onClose,
+      };
+  }
+}

package/src/Switch/Switch.story.tsx

@@ -1,98 +1,98 @@
-import type { ReactElement } from 'react';
-import { forwardRef } from 'react';
-
-import { Switch } from './';
-import { Box } from '../';
-import type { CheckBoxIconProps } from '../CheckBox/CheckBoxIcon';
-
-export default {
-  title: 'components/Switch',
-};
-
-const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
-  function CheckBoxIcon(
-    {
-      __css = {},
-      indeterminate,
-      checked,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      disabled,
-      backgroundColor,
-      borderColor,
-      opacity,
-      ...otherProps
-    },
-    forwardedRef
-  ) {
-    return (
-      <Box
-        as="span"
-        ref={forwardedRef}
-        __css={{
-          display: 'inline-flex',
-          pointerEvents: 'none',
-          '& svg': {
-            width: 'var(--switch-icon-size)',
-            height: 'var(--switch-icon-size)',
-          },
-          __css,
-        }}
-        {...otherProps}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
-          {checked ? (
-            <path
-              d="M378 810 154 586l43-43 181 181 384-384 43 43-427 427Z"
-              fill="currentColor"
-            />
-          ) : (
-            <path
-              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
-              fill="currentColor"
-            />
-          )}
-        </svg>
-      </Box>
-    );
-  }
-);
-
-const Example = ({ icon }: { icon?: ReactElement<any> }) => {
-  return (
-    <>
-      <Box>
-        <Switch icon={icon}>off/on</Switch>
-        <Switch icon={icon} disabled>
-          off/on
-        </Switch>
-        <Switch icon={icon} disabled defaultChecked={true}>
-          off/on
-        </Switch>
-      </Box>
-      <Box>
-        <Switch icon={icon} />
-        <Switch icon={icon} disabled />
-        <Switch icon={icon} disabled defaultChecked={true} />
-      </Box>
-      <Box>
-        <Switch icon={icon} size="small">
-          off/on
-        </Switch>
-        <Switch icon={icon} disabled size="small">
-          off/on
-        </Switch>
-        <Switch icon={icon} disabled defaultChecked={true} size="small">
-          off/on
-        </Switch>
-      </Box>
-      <Box>
-        <Switch icon={icon} size="small" />
-        <Switch icon={icon} disabled size="small" />
-        <Switch icon={icon} disabled defaultChecked={true} size="small" />
-      </Box>
-    </>
-  );
-};
-
-export const Default = () => <Example />;
-export const WithIcon = () => <Example icon={<CheckBoxIcon />} />;
+import type { ReactElement } from 'react';
+import { forwardRef } from 'react';
+
+import { Switch } from './';
+import { Box } from '../';
+import type { CheckBoxIconProps } from '../CheckBox/CheckBoxIcon';
+
+export default {
+  title: 'components/Switch',
+};
+
+const CheckBoxIcon = forwardRef<HTMLDivElement, CheckBoxIconProps>(
+  function CheckBoxIcon(
+    {
+      __css = {},
+      indeterminate,
+      checked,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      disabled,
+      backgroundColor,
+      borderColor,
+      opacity,
+      ...otherProps
+    },
+    forwardedRef
+  ) {
+    return (
+      <Box
+        as="span"
+        ref={forwardedRef}
+        __css={{
+          display: 'inline-flex',
+          pointerEvents: 'none',
+          '& svg': {
+            width: 'var(--switch-icon-size)',
+            height: 'var(--switch-icon-size)',
+          },
+          __css,
+        }}
+        {...otherProps}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
+          {checked ? (
+            <path
+              d="M378 810 154 586l43-43 181 181 384-384 43 43-427 427Z"
+              fill="currentColor"
+            />
+          ) : (
+            <path
+              d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"
+              fill="currentColor"
+            />
+          )}
+        </svg>
+      </Box>
+    );
+  }
+);
+
+const Example = ({ icon }: { icon?: ReactElement<any> }) => {
+  return (
+    <>
+      <Box>
+        <Switch icon={icon}>off/on</Switch>
+        <Switch icon={icon} disabled>
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true}>
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch icon={icon} />
+        <Switch icon={icon} disabled />
+        <Switch icon={icon} disabled defaultChecked={true} />
+      </Box>
+      <Box>
+        <Switch icon={icon} size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled size="small">
+          off/on
+        </Switch>
+        <Switch icon={icon} disabled defaultChecked={true} size="small">
+          off/on
+        </Switch>
+      </Box>
+      <Box>
+        <Switch icon={icon} size="small" />
+        <Switch icon={icon} disabled size="small" />
+        <Switch icon={icon} disabled defaultChecked={true} size="small" />
+      </Box>
+    </>
+  );
+};
+
+export const Default = () => <Example />;
+export const WithIcon = () => <Example icon={<CheckBoxIcon />} />;