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

package/src/SelectItem/SelectItem.tsx

@@ -1,92 +1,92 @@
-import type { ForwardedRef, ReactElement, Ref } from 'react';
-import { forwardRef } from 'react';
-import { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';
-import type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';
-
-import { useSelectContext } from '../Select/context';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-type MenuItemProps = MenuItemPropsCore & BoxProps;
-
-const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
-  ({ as = 'li', ...props }, ref) => (
-    <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />
-  )
-);
-
-export interface SelectItemProps<ValueType extends string>
-  extends MenuItemProps {
-  value: ValueType;
-}
-
-const ZERO_WIDTH_SPACE = '\u200b';
-export const SelectItem = forwardRef(function SelectItem<
-  ValueType extends string
->(
-  props: SelectItemProps<ValueType>,
-  forwardedRef: ForwardedRef<HTMLLIElement>
-) {
-  const {
-    as: Comp = MenuItem,
-    onSelect: onSelectProp,
-    children,
-    value: valueProp,
-    disabled,
-    onKeyDown,
-    ...otherProps
-  } = props;
-  const {
-    native,
-    onSelect,
-    value: selectedValue,
-    multiple,
-  } = useSelectContext();
-  const value =
-    valueProp !== undefined && valueProp !== null
-      ? String(valueProp)
-      : (children as string);
-
-  if (native) {
-    return (
-      <option
-        ref={forwardedRef}
-        value={value}
-        disabled={disabled}
-        {...(otherProps as any)}
-      >
-        {children}
-      </option>
-    );
-  }
-
-  if (children === undefined && disabled) {
-    return null;
-  }
-
-  let selected = false;
-  if (multiple && Array.isArray(selectedValue)) {
-    selected = Boolean(selectedValue.find((v) => v === value));
-  } else {
-    selected = value === String(selectedValue);
-  }
-  return (
-    <Comp
-      as={MenuItem}
-      onSelect={wrapEvent(onSelectProp, onSelect as any)}
-      data-value={value}
-      disabled={disabled}
-      ref={forwardedRef}
-      role="option"
-      aria-selected={selected ? 'true' : undefined}
-      selected={selected}
-      {...otherProps}
-    >
-      {children || ZERO_WIDTH_SPACE}
-    </Comp>
-  );
-}) as <ValueType extends string>(
-  p: SelectItemProps<ValueType> & {
-    ref?: Ref<HTMLLIElement>;
-  }
-) => ReactElement;
+import type { ForwardedRef, ReactElement, Ref } from 'react';
+import { forwardRef } from 'react';
+import { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';
+import type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';
+
+import { useSelectContext } from '../Select/context';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+type MenuItemProps = MenuItemPropsCore & BoxProps;
+
+const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ as = 'li', ...props }, ref) => (
+    <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />
+  )
+);
+
+export interface SelectItemProps<ValueType extends string>
+  extends MenuItemProps {
+  value: ValueType;
+}
+
+const ZERO_WIDTH_SPACE = '\u200b';
+export const SelectItem = forwardRef(function SelectItem<
+  ValueType extends string
+>(
+  props: SelectItemProps<ValueType>,
+  forwardedRef: ForwardedRef<HTMLLIElement>
+) {
+  const {
+    as: Comp = MenuItem,
+    onSelect: onSelectProp,
+    children,
+    value: valueProp,
+    disabled,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const {
+    native,
+    onSelect,
+    value: selectedValue,
+    multiple,
+  } = useSelectContext();
+  const value =
+    valueProp !== undefined && valueProp !== null
+      ? String(valueProp)
+      : (children as string);
+
+  if (native) {
+    return (
+      <option
+        ref={forwardedRef}
+        value={value}
+        disabled={disabled}
+        {...(otherProps as any)}
+      >
+        {children}
+      </option>
+    );
+  }
+
+  if (children === undefined && disabled) {
+    return null;
+  }
+
+  let selected = false;
+  if (multiple && Array.isArray(selectedValue)) {
+    selected = Boolean(selectedValue.find((v) => v === value));
+  } else {
+    selected = value === String(selectedValue);
+  }
+  return (
+    <Comp
+      as={MenuItem}
+      onSelect={wrapEvent(onSelectProp, onSelect as any)}
+      data-value={value}
+      disabled={disabled}
+      ref={forwardedRef}
+      role="option"
+      aria-selected={selected ? 'true' : undefined}
+      selected={selected}
+      {...otherProps}
+    >
+      {children || ZERO_WIDTH_SPACE}
+    </Comp>
+  );
+}) as <ValueType extends string>(
+  p: SelectItemProps<ValueType> & {
+    ref?: Ref<HTMLLIElement>;
+  }
+) => ReactElement;

package/src/SelectItem/index.ts

@@ -1 +1 @@
-export * from './SelectItem';
+export * from './SelectItem';

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,34 +1,34 @@
-import type { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export interface SelectionControlLabelProps
-  extends BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>> {
-  as?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const SelectionControlLabel = forwardRef<
-  HTMLLabelElement,
-  SelectionControlLabelProps
->(function SelectionControlLabel(props, forwardedRef) {
-  const { as = 'label', __css, ...otherProps } = props;
-
-  return (
-    <Box<BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>>
-      ref={forwardedRef}
-      as={as}
-      __css={{
-        display: 'inline-flex',
-        position: 'relative',
-        alignItems: 'center',
-        WebkitTapHighlightColor: 'transparent',
-        gap: 1,
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export interface SelectionControlLabelProps
+  extends BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>> {
+  as?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const SelectionControlLabel = forwardRef<
+  HTMLLabelElement,
+  SelectionControlLabelProps
+>(function SelectionControlLabel(props, forwardedRef) {
+  const { as = 'label', __css, ...otherProps } = props;
+
+  return (
+    <Box<BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>>
+      ref={forwardedRef}
+      as={as}
+      __css={{
+        display: 'inline-flex',
+        position: 'relative',
+        alignItems: 'center',
+        WebkitTapHighlightColor: 'transparent',
+        gap: 1,
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,37 +1,37 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { TextProps } from '../Text';
-import { Text } from '../Text';
-import { alpha } from '../color';
-
-export interface SelectionControlTextProps extends TextProps {
-  as?: ElementType<any>;
-  children?: ReactNode;
-  disabled?: boolean;
-}
-
-export const SelectionControlText = forwardRef<
-  HTMLSpanElement,
-  SelectionControlTextProps
->(function SelectionControlText(props, forwardedRef) {
-  const { as = 'span', disabled, __css, ...otherProps } = props;
-
-  return (
-    <Text
-      ref={forwardedRef as any}
-      as={as}
-      __css={{
-        p: 1,
-        ...(disabled
-          ? { color: alpha('on.surface', 0.38) }
-          : {
-              cursor: 'pointer',
-              color: alpha('on.surface', 0.87),
-            }),
-        ...__css,
-      }}
-      {...otherProps}
-    />
-  );
-});
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+import { alpha } from '../color';
+
+export interface SelectionControlTextProps extends TextProps {
+  as?: ElementType<any>;
+  children?: ReactNode;
+  disabled?: boolean;
+}
+
+export const SelectionControlText = forwardRef<
+  HTMLSpanElement,
+  SelectionControlTextProps
+>(function SelectionControlText(props, forwardedRef) {
+  const { as = 'span', disabled, __css, ...otherProps } = props;
+
+  return (
+    <Text
+      ref={forwardedRef as any}
+      as={as}
+      __css={{
+        p: 1,
+        ...(disabled
+          ? { color: alpha('on.surface', 0.38) }
+          : {
+              cursor: 'pointer',
+              color: alpha('on.surface', 0.87),
+            }),
+        ...__css,
+      }}
+      {...otherProps}
+    />
+  );
+});

package/src/SelectionControl/index.ts

@@ -1,2 +1,2 @@
-export * from './SelectionControlLabel';
-export * from './SelectionControlText';
+export * from './SelectionControlLabel';
+export * from './SelectionControlText';

package/src/Skeleton/DelayAppearance.tsx

@@ -1,41 +1,41 @@
-import type { ReactNode } from 'react';
-import { forwardRef } from 'react';
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-
-export const appearAnimation: Keyframes = keyframes({
-  to: {
-    visibility: 'visible',
-  },
-});
-
-export interface DelayAppearanceProps extends BoxProps {
-  timeoutInMilliseconds?: number;
-  children?: ReactNode;
-}
-
-/**
- * Helper component to prevent an Skeleton component from appearing too fast.
- * https://reactjs.org/docs/concurrent-mode-patterns.html#delaying-a-pending-indicator
- */
-export const DelayAppearance = forwardRef<HTMLDivElement, DelayAppearanceProps>(
-  function DelayAppearance(props, forwardedRef) {
-    const { timeoutInMilliseconds = 500, __css, ...otherProps } = props;
-
-    return (
-      <Box
-        ref={forwardedRef}
-        timeoutInMilliseconds={timeoutInMilliseconds}
-        __css={{
-          animation: `0s linear ${timeoutInMilliseconds}ms forwards ${appearAnimation}`,
-          visibility: 'hidden',
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+import { keyframes } from '@emotion/react';
+import type { Keyframes } from '@emotion/serialize';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export const appearAnimation: Keyframes = keyframes({
+  to: {
+    visibility: 'visible',
+  },
+});
+
+export interface DelayAppearanceProps extends BoxProps {
+  timeoutInMilliseconds?: number;
+  children?: ReactNode;
+}
+
+/**
+ * Helper component to prevent an Skeleton component from appearing too fast.
+ * https://reactjs.org/docs/concurrent-mode-patterns.html#delaying-a-pending-indicator
+ */
+export const DelayAppearance = forwardRef<HTMLDivElement, DelayAppearanceProps>(
+  function DelayAppearance(props, forwardedRef) {
+    const { timeoutInMilliseconds = 500, __css, ...otherProps } = props;
+
+    return (
+      <Box
+        ref={forwardedRef}
+        timeoutInMilliseconds={timeoutInMilliseconds}
+        __css={{
+          animation: `0s linear ${timeoutInMilliseconds}ms forwards ${appearAnimation}`,
+          visibility: 'hidden',
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Skeleton/Skeleton.story.tsx

@@ -1,57 +1,57 @@
-import { Skeleton } from './';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { DelayAppearance } from './DelayAppearance';
-
-export default {
-  title: 'components/Skeleton',
-};
-
-const Skeletons = ({
-  animation = 'pulse',
-}: {
-  animation?: 'pulse' | 'wave';
-}) => {
-  return (
-    <Box>
-      <Skeleton animation={animation} width={200} height={200} m={2} />
-      <Skeleton animation={animation} width={200} m={2} />
-      <Skeleton
-        animation={animation}
-        width={60}
-        height={60}
-        borderRadius="full"
-        m={2}
-      />
-      <Skeleton animation={animation} m={2}>
-        <Box width={60} height={60} borderRadius="full" />
-      </Skeleton>
-    </Box>
-  );
-};
-
-const Example = () => {
-  return (
-    <>
-      <Box>
-        <Text variant="title-large" px={2}>
-          Pulse
-        </Text>
-        <Skeletons animation="pulse" />
-      </Box>
-      <Box>
-        <Text variant="title-large" px={2}>
-          Wave
-        </Text>
-        <Skeletons animation="wave" />
-      </Box>
-    </>
-  );
-};
-
-export const Default = () => <Example />;
-export const DelayedAppearance = () => (
-  <DelayAppearance>
-    <Example />
-  </DelayAppearance>
-);
+import { Skeleton } from './';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { DelayAppearance } from './DelayAppearance';
+
+export default {
+  title: 'components/Skeleton',
+};
+
+const Skeletons = ({
+  animation = 'pulse',
+}: {
+  animation?: 'pulse' | 'wave';
+}) => {
+  return (
+    <Box>
+      <Skeleton animation={animation} width={200} height={200} m={2} />
+      <Skeleton animation={animation} width={200} m={2} />
+      <Skeleton
+        animation={animation}
+        width={60}
+        height={60}
+        borderRadius="full"
+        m={2}
+      />
+      <Skeleton animation={animation} m={2}>
+        <Box width={60} height={60} borderRadius="full" />
+      </Skeleton>
+    </Box>
+  );
+};
+
+const Example = () => {
+  return (
+    <>
+      <Box>
+        <Text variant="title-large" px={2}>
+          Pulse
+        </Text>
+        <Skeletons animation="pulse" />
+      </Box>
+      <Box>
+        <Text variant="title-large" px={2}>
+          Wave
+        </Text>
+        <Skeletons animation="wave" />
+      </Box>
+    </>
+  );
+};
+
+export const Default = () => <Example />;
+export const DelayedAppearance = () => (
+  <DelayAppearance>
+    <Example />
+  </DelayAppearance>
+);

package/src/Skeleton/Skeleton.tsx

@@ -1,40 +1,40 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { alpha } from '../color';
-import { useTheme } from '../theme';
-import { pulseAnimationStyle, waveAnimationStyle } from './animation';
-
-export interface SkeletonProps
-  extends BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  animation?: 'pulse' | 'wave';
-}
-
-export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
-  function Skeleton(props, forwardedRef) {
-    const { as = 'span', __css, animation = 'pulse', ...otherProps } = props;
-    const theme = useTheme();
-
-    return (
-      <Box<BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>>
-        ref={forwardedRef}
-        as={as}
-        __css={{
-          height: '1.2em',
-          display: 'inline-block',
-          backgroundColor: alpha('on.surface', 0.11),
-          ...(animation === 'pulse'
-            ? pulseAnimationStyle()
-            : waveAnimationStyle({ theme })),
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { alpha } from '../color';
+import { useTheme } from '../theme';
+import { pulseAnimationStyle, waveAnimationStyle } from './animation';
+
+export interface SkeletonProps
+  extends BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  animation?: 'pulse' | 'wave';
+}
+
+export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
+  function Skeleton(props, forwardedRef) {
+    const { as = 'span', __css, animation = 'pulse', ...otherProps } = props;
+    const theme = useTheme();
+
+    return (
+      <Box<BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>>
+        ref={forwardedRef}
+        as={as}
+        __css={{
+          height: '1.2em',
+          display: 'inline-block',
+          backgroundColor: alpha('on.surface', 0.11),
+          ...(animation === 'pulse'
+            ? pulseAnimationStyle()
+            : waveAnimationStyle({ theme })),
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);