@basic-ui/material 1.0.0-alpha.52 → 1.0.0-alpha.54

package/src/Combobox/Combobox.tsx

@@ -1,274 +1,274 @@
-import type { FC, HTMLAttributes, RefAttributes } from 'react';
-import { forwardRef } from 'react';
-import type {
-  ComboboxProps as ComboboxPropsCore,
-  ComboboxInputProps as ComboboxInputPropsCore,
-  ComboboxLabelProps as ComboboxLabelPropsCore,
-  ComboboxListProps as ComboboxListPropsCore,
-  ComboboxOptionProps as ComboboxOptionPropsCore,
-  ComboboxPopoverProps as ComboboxPopoverPropsCore,
-  ComboboxButtonProps as ComboboxButtonPropsCore,
-  PopperProps as PopperCoreProps,
-} from '@basic-ui/core';
-import {
-  Combobox as _ComboboxCore,
-  ComboboxInput as _ComboboxInputCore,
-  ComboboxLabel as _ComboboxLabelCore,
-  ComboboxList as _ComboboxListCore,
-  ComboboxOption as _ComboboxOptionCore,
-  ComboboxPopover as _ComboboxPopoverCore,
-  ComboboxButton as _ComboboxButtonCore,
-  Popper as _PopperCore,
-  useComboBoxContext,
-} from '@basic-ui/core';
-import { rem } from 'polished';
-
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import type { TextFieldProps } from '../TextField';
-import { TextField } from '../TextField';
-import type { ListProps } from '../List';
-import { List } from '../List';
-import type { ListItemProps } from '../ListItem';
-import { listItemStyle } from '../ListItem';
-import type { TextProps } from '../Text';
-import { Text } from '../Text';
-import type { ButtonProps } from '../Button';
-import { Button } from '../Button';
-import { alpha } from '../color';
-import { EASING_STANDARD } from '../motion';
-
-export { useComboBoxContext } from '@basic-ui/core';
-
-/////////////////////////////////////////////////////
-// Combobox
-
-export type ComboboxProps = Omit<
-  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
-  'onSelect'
-> &
-  ComboboxPropsCore;
-
-const ComboboxCore: FC<ComboboxProps> = _ComboboxCore as any;
-
-export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
-  (props, forwardedRef) => {
-    const { as = 'div', __css, ...otherProps } = props;
-    return (
-      <ComboboxCore
-        as={Box}
-        ref={forwardedRef}
-        innerAs={as}
-        __css={{ position: 'relative', ...__css }}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-/////////////////////////////////////////////////////
-// ComboboxInput
-
-export type ComboboxInputProps = Omit<
-  ComboboxInputPropsCore & TextFieldProps,
-  'ref'
-> &
-  RefAttributes<HTMLInputElement>;
-
-const ComboboxInputCore: FC<ComboboxInputProps> = _ComboboxInputCore as any;
-
-export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
-  (props, forwardedRef) => {
-    const { as = 'input', ...otherProps } = props;
-    return (
-      <ComboboxInputCore
-        as={TextField as any}
-        ref={forwardedRef}
-        innerAs={as}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-/////////////////////////////////////////////////////
-// ComboboxList
-
-export type ComboboxListProps = Omit<ComboboxListPropsCore & ListProps, 'ref'> &
-  RefAttributes<HTMLUListElement>;
-
-const ComboboxListCore: FC<ComboboxListProps> = _ComboboxListCore as any;
-
-export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
-  (props, forwardedRef) => {
-    const { as = 'ul', __css, ...otherProps } = props;
-    return (
-      <ComboboxListCore
-        as={List}
-        ref={forwardedRef}
-        innerAs={as}
-        outlined={false}
-        elevation={2}
-        darkThemeBackgroundOverlay={2}
-        __css={{
-          maxHeight: rem(300),
-          overflowY: 'auto',
-          borderRadius: 'extra-small',
-          '[data-popper-placement="top"] &': {
-            transformOrigin: 'bottom center',
-          },
-          '[data-popper-placement="bottom"] &': {
-            transformOrigin: 'top center',
-          },
-          '& [data-reach-combobox-option=""]': {
-            ...listItemStyle('primary'),
-          },
-          ...__css,
-        }}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-/////////////////////////////////////////////////////
-// ComboboxPopperBox
-
-type PopperProps = BoxProps & PopperCoreProps;
-
-const PopperCore: FC<PopperProps> = _PopperCore as any;
-
-const ComboboxPopperBox = forwardRef<HTMLDivElement, PopperProps>(
-  ({ __css, anchorEl, as = 'div', ...props }, forwardedRef) => {
-    const ctx = useComboBoxContext();
-    return (
-      <PopperCore
-        as={Box}
-        innerAs={as}
-        ref={forwardedRef}
-        anchorEl={anchorEl || ctx.inputRef}
-        __css={{ zIndex: 1, width: '100%', ...__css }}
-        {...props}
-      />
-    );
-  }
-);
-
-/////////////////////////////////////////////////////
-// ComboboxPopover
-
-export type ComboboxPopoverProps = ComboboxPopoverPropsCore & ListProps;
-
-const ComboboxPopoverCore: FC<ComboboxPopoverProps> =
-  _ComboboxPopoverCore as any;
-
-export const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(
-  (props, forwardedRef) => {
-    const { as = 'div', ...otherProps } = props;
-    return (
-      <ComboboxPopoverCore
-        as={ComboboxPopperBox}
-        ref={forwardedRef}
-        innerAs={as}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-/////////////////////////////////////////////////////
-// ComboboxOption
-
-export type ComboboxOptionProps = Omit<
-  ComboboxOptionPropsCore & ListItemProps,
-  'ref'
-> &
-  RefAttributes<HTMLLIElement>;
-
-const ComboboxOptionCore: FC<ComboboxOptionProps> = _ComboboxOptionCore as any;
-
-export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
-  (props, forwardedRef) => {
-    const { as = 'li', ...otherProps } = props;
-    return (
-      <ComboboxOptionCore
-        as={Box}
-        ref={forwardedRef}
-        innerAs={as}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-/////////////////////////////////////////////////////
-// ComboboxLabel
-
-export type ComboboxLabelProps = Omit<
-  ComboboxLabelPropsCore & TextProps,
-  'ref'
-> &
-  RefAttributes<HTMLLabelElement>;
-
-const ComboboxLabelCore: FC<ComboboxLabelProps> = _ComboboxLabelCore as any;
-
-export const ComboboxLabel = forwardRef<HTMLLabelElement, ComboboxLabelProps>(
-  (props, forwardedRef) => {
-    const { as = 'label', ...otherProps } = props;
-    return (
-      <ComboboxLabelCore
-        as={Text}
-        ref={forwardedRef}
-        innerAs={as}
-        {...otherProps}
-      />
-    );
-  }
-);
-
-/////////////////////////////////////////////////////
-// ComboboxButton
-
-export type ComboboxButtonProps = ComboboxButtonPropsCore & ButtonProps;
-
-const ComboboxButtonCore: FC<ComboboxButtonProps> = _ComboboxButtonCore as any;
-
-export const ComboboxButton = forwardRef<
-  HTMLButtonElement,
-  ComboboxButtonProps
->((props, forwardedRef) => {
-  const { as = 'button', __css, children, ...otherProps } = props;
-  return (
-    <ComboboxButtonCore
-      as={Button}
-      ref={forwardedRef}
-      innerAs={as}
-      tabIndex={-1}
-      variant="icon"
-      __css={{
-        zIndex: 1,
-        width: rem(40),
-        height: rem(40),
-        px: 0,
-        '& > svg': {
-          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
-        },
-        '&[aria-expanded="false"] > svg': {
-          color: alpha('on.surface', 0.54),
-        },
-        '&[aria-expanded="true"] > svg': {
-          transform: 'rotate(180deg)',
-          color: 'currentColor',
-        },
-        ...__css,
-      }}
-      {...otherProps}
-    >
-      {children || (
-        <svg aria-hidden={true} viewBox="0 0 24 24" width={24}>
-          <path fill="currentColor" d="M7 10l5 5 5-5z" />
-        </svg>
-      )}
-    </ComboboxButtonCore>
-  );
-});
+import type { FC, HTMLAttributes, RefAttributes } from 'react';
+import { forwardRef } from 'react';
+import type {
+  ComboboxProps as ComboboxPropsCore,
+  ComboboxInputProps as ComboboxInputPropsCore,
+  ComboboxLabelProps as ComboboxLabelPropsCore,
+  ComboboxListProps as ComboboxListPropsCore,
+  ComboboxOptionProps as ComboboxOptionPropsCore,
+  ComboboxPopoverProps as ComboboxPopoverPropsCore,
+  ComboboxButtonProps as ComboboxButtonPropsCore,
+  PopperProps as PopperCoreProps,
+} from '@basic-ui/core';
+import {
+  Combobox as _ComboboxCore,
+  ComboboxInput as _ComboboxInputCore,
+  ComboboxLabel as _ComboboxLabelCore,
+  ComboboxList as _ComboboxListCore,
+  ComboboxOption as _ComboboxOptionCore,
+  ComboboxPopover as _ComboboxPopoverCore,
+  ComboboxButton as _ComboboxButtonCore,
+  Popper as _PopperCore,
+  useComboBoxContext,
+} from '@basic-ui/core';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { TextFieldProps } from '../TextField';
+import { TextField } from '../TextField';
+import type { ListProps } from '../List';
+import { List } from '../List';
+import type { ListItemProps } from '../ListItem';
+import { listItemStyle } from '../ListItem';
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
+import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
+
+export { useComboBoxContext } from '@basic-ui/core';
+
+/////////////////////////////////////////////////////
+// Combobox
+
+export type ComboboxProps = Omit<
+  BoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>,
+  'onSelect'
+> &
+  ComboboxPropsCore;
+
+const ComboboxCore: FC<ComboboxProps> = _ComboboxCore as any;
+
+export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
+  (props, forwardedRef) => {
+    const { as = 'div', __css, ...otherProps } = props;
+    return (
+      <ComboboxCore
+        as={Box}
+        ref={forwardedRef}
+        innerAs={as}
+        __css={{ position: 'relative', ...__css }}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+/////////////////////////////////////////////////////
+// ComboboxInput
+
+export type ComboboxInputProps = Omit<
+  ComboboxInputPropsCore & TextFieldProps,
+  'ref'
+> &
+  RefAttributes<HTMLInputElement>;
+
+const ComboboxInputCore: FC<ComboboxInputProps> = _ComboboxInputCore as any;
+
+export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
+  (props, forwardedRef) => {
+    const { as = 'input', ...otherProps } = props;
+    return (
+      <ComboboxInputCore
+        as={TextField as any}
+        ref={forwardedRef}
+        innerAs={as}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+/////////////////////////////////////////////////////
+// ComboboxList
+
+export type ComboboxListProps = Omit<ComboboxListPropsCore & ListProps, 'ref'> &
+  RefAttributes<HTMLUListElement>;
+
+const ComboboxListCore: FC<ComboboxListProps> = _ComboboxListCore as any;
+
+export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
+  (props, forwardedRef) => {
+    const { as = 'ul', __css, ...otherProps } = props;
+    return (
+      <ComboboxListCore
+        as={List}
+        ref={forwardedRef}
+        innerAs={as}
+        outlined={false}
+        elevation={2}
+        darkThemeBackgroundOverlay={2}
+        __css={{
+          maxHeight: rem(300),
+          overflowY: 'auto',
+          borderRadius: 'extra-small',
+          '[data-popper-placement="top"] &': {
+            transformOrigin: 'bottom center',
+          },
+          '[data-popper-placement="bottom"] &': {
+            transformOrigin: 'top center',
+          },
+          '& [data-reach-combobox-option=""]': {
+            ...listItemStyle('primary'),
+          },
+          ...__css,
+        }}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+/////////////////////////////////////////////////////
+// ComboboxPopperBox
+
+type PopperProps = BoxProps & PopperCoreProps;
+
+const PopperCore: FC<PopperProps> = _PopperCore as any;
+
+const ComboboxPopperBox = forwardRef<HTMLDivElement, PopperProps>(
+  ({ __css, anchorEl, as = 'div', ...props }, forwardedRef) => {
+    const ctx = useComboBoxContext();
+    return (
+      <PopperCore
+        as={Box}
+        innerAs={as}
+        ref={forwardedRef}
+        anchorEl={anchorEl || ctx.inputRef}
+        __css={{ zIndex: 1, width: '100%', ...__css }}
+        {...props}
+      />
+    );
+  }
+);
+
+/////////////////////////////////////////////////////
+// ComboboxPopover
+
+export type ComboboxPopoverProps = ComboboxPopoverPropsCore & ListProps;
+
+const ComboboxPopoverCore: FC<ComboboxPopoverProps> =
+  _ComboboxPopoverCore as any;
+
+export const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(
+  (props, forwardedRef) => {
+    const { as = 'div', ...otherProps } = props;
+    return (
+      <ComboboxPopoverCore
+        as={ComboboxPopperBox}
+        ref={forwardedRef}
+        innerAs={as}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+/////////////////////////////////////////////////////
+// ComboboxOption
+
+export type ComboboxOptionProps = Omit<
+  ComboboxOptionPropsCore & ListItemProps,
+  'ref'
+> &
+  RefAttributes<HTMLLIElement>;
+
+const ComboboxOptionCore: FC<ComboboxOptionProps> = _ComboboxOptionCore as any;
+
+export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(
+  (props, forwardedRef) => {
+    const { as = 'li', ...otherProps } = props;
+    return (
+      <ComboboxOptionCore
+        as={Box}
+        ref={forwardedRef}
+        innerAs={as}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+/////////////////////////////////////////////////////
+// ComboboxLabel
+
+export type ComboboxLabelProps = Omit<
+  ComboboxLabelPropsCore & TextProps,
+  'ref'
+> &
+  RefAttributes<HTMLLabelElement>;
+
+const ComboboxLabelCore: FC<ComboboxLabelProps> = _ComboboxLabelCore as any;
+
+export const ComboboxLabel = forwardRef<HTMLLabelElement, ComboboxLabelProps>(
+  (props, forwardedRef) => {
+    const { as = 'label', ...otherProps } = props;
+    return (
+      <ComboboxLabelCore
+        as={Text}
+        ref={forwardedRef}
+        innerAs={as}
+        {...otherProps}
+      />
+    );
+  }
+);
+
+/////////////////////////////////////////////////////
+// ComboboxButton
+
+export type ComboboxButtonProps = ComboboxButtonPropsCore & ButtonProps;
+
+const ComboboxButtonCore: FC<ComboboxButtonProps> = _ComboboxButtonCore as any;
+
+export const ComboboxButton = forwardRef<
+  HTMLButtonElement,
+  ComboboxButtonProps
+>((props, forwardedRef) => {
+  const { as = 'button', __css, children, ...otherProps } = props;
+  return (
+    <ComboboxButtonCore
+      as={Button}
+      ref={forwardedRef}
+      innerAs={as}
+      tabIndex={-1}
+      variant="icon"
+      __css={{
+        zIndex: 1,
+        width: rem(40),
+        height: rem(40),
+        px: 0,
+        '& > svg': {
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
+        },
+        '&[aria-expanded="false"] > svg': {
+          color: alpha('on.surface', 0.54),
+        },
+        '&[aria-expanded="true"] > svg': {
+          transform: 'rotate(180deg)',
+          color: 'currentColor',
+        },
+        ...__css,
+      }}
+      {...otherProps}
+    >
+      {children || (
+        <svg aria-hidden={true} viewBox="0 0 24 24" width={24}>
+          <path fill="currentColor" d="M7 10l5 5 5-5z" />
+        </svg>
+      )}
+    </ComboboxButtonCore>
+  );
+});

package/src/Combobox/index.ts

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

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 value="hello-1">Hello 1</SelectItem>
+          <SelectItem value="hello-2">Hello 2</SelectItem>
+        </Select>
+        <Button id="dialog-close-button" onClick={() => setOpen(false)}>
+          Close
+        </Button>
+      </Dialog>
+      <LoremIpsum count={50} />
+      <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'} />;