@basic-ui/material 0.1.5 → 0.1.8

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
-  "private": false,
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",
   "jsnext:main": "./build/esm/index.js",
@@ -15,7 +14,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "start": "start-storybook -p 9001 -c ./scripts/storybook",
+    "start": "yarn run -T start-storybook -p 9001 -c ./scripts/storybook",
     "build": "concurrently \"yarn:build:*\"",
     "build:dts": "tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
     "build:cjs": "rollup -c ../../rollup.config.js",
@@ -26,7 +25,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.32",
+    "@basic-ui/core": "^0.0.33",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -36,8 +35,7 @@
   "devDependencies": {
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
-    "polished": "^4.1.1",
-    "react-spring": "9.0.0-rc.3"
+    "polished": "^4.1.1"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.0.0",
@@ -50,5 +48,5 @@
     "react-dom": ">=16.14.0 || >=17.0.0",
     "react-spring": "^9.0.0"
   },
-  "gitHead": "5d730ab4bfea19ceb7fb52d09139c81cb4c3863f"
+  "gitHead": "486ad33485c30932cff8417516369094bed8db70"
 }

package/src/List/List.tsx

@@ -4,6 +4,7 @@ import { Paper, PaperProps } from '../Paper';
 
 export interface ListProps extends PaperProps {
   as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
   children?: React.ReactNode;
 }
 
@@ -13,6 +14,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(function List(
 ) {
   const {
     as = 'div',
+    innerAs,
     elevation = 0,
     py = 2,
     px = 0,
@@ -24,7 +26,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(function List(
 
   return (
     <Paper
-      as={as}
+      as={innerAs || as}
       ref={forwardedRef}
       py={py}
       px={px}

package/src/ListItem/ListItem.tsx

@@ -10,6 +10,7 @@ import { alpha } from '../color';
 
 export interface ListItemProps extends BoxProps {
   as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
   children?: React.ReactNode;
   disabled?: boolean;
   selected?: boolean;
@@ -21,6 +22,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
   function ListItem(props, forwardedRef) {
     const {
       as = 'div',
+      innerAs,
       children,
       selected: selectedProp = false,
       'aria-selected': ariaSelectedProp = false,
@@ -38,7 +40,7 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       <ListItemProvider value={{ color, disabled }}>
         <RippleBox
           ref={forwardedRef}
-          as={as}
+          as={innerAs || as}
           theme={theme}
           display="flex"
           data-disabled={disabled ? '' : undefined}

package/src/Menu/Menu.story.tsx

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 // import './styles.css';
 
-const MenuControlled = ({ disabled }) => {
+const MenuUncontrolled = ({ disabled }) => {
   return (
     <Box px={5}>
       <Menu>
@@ -23,7 +23,31 @@ const MenuControlled = ({ disabled }) => {
   );
 };
 
+const MenuUncontrolledWithLinks = ({ disabled }) => {
+  return (
+    <Box px={5}>
+      <Menu>
+        <MenuButton disabled={disabled}> Click me</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem as="a" href="/">
+              Dog
+            </MenuItem>
+            <MenuItem>Lion</MenuItem>
+            <MenuItem disabled={true}>Cat</MenuItem>
+            <Divider />
+            <MenuItem>Bear</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Box>
+  );
+};
+
 const stories = storiesOf('Components/Menu', module);
 
-stories.add('controlled', () => <MenuControlled disabled={undefined} />);
-stories.add('disabled', () => <MenuControlled disabled={true} />);
+stories.add('uncontrolled', () => <MenuUncontrolled disabled={undefined} />);
+stories.add('uncontrolled, with links', () => (
+  <MenuUncontrolledWithLinks disabled={undefined} />
+));
+stories.add('disabled', () => <MenuUncontrolled disabled={true} />);

package/src/Select/Select.story.tsx

@@ -12,7 +12,7 @@ const Example = ({ variant, native = false }) => {
 
   /* eslint-disable react/no-children-prop */
   const children = [
-    <SelectItem key={0} disabled aria-label="None" value="" />,
+    <SelectItem key={0} aria-label="None" value=""></SelectItem>,
     <SelectItem key={1} value={10}>
       Ten
     </SelectItem>,
@@ -67,13 +67,55 @@ const Example = ({ variant, native = false }) => {
       <Box width={230} display="inline-block">
         <Select
           value={color}
-          onChange={(e, value: 'primary' | 'secondary') => setColor(value)}
+          onChange={(e, value) => setColor(value as 'primary' | 'secondary')}
           label="Color"
         >
           <SelectItem value="primary">Primary</SelectItem>
           <SelectItem value="secondary">Secondary</SelectItem>
         </Select>
       </Box>
+      <select defaultValue="">
+        <option key={0} aria-label="None" value="" disabled />
+        <option key={1} value={10}>
+          Ten
+        </option>
+        <option key={2} value={20}>
+          Twenty
+        </option>
+        <option key={3} value={30}>
+          Thirty
+        </option>
+        <option key={4} value={40}>
+          Fourty
+        </option>
+        <option key={5} value={50}>
+          Fifty
+        </option>
+        <option key={6} value={60}>
+          Sixty
+        </option>
+        <option key={7} value={70}>
+          Seventy
+        </option>
+        <option key={8} value={80}>
+          Eighty
+        </option>
+        <option key={9} value={90}>
+          Ninety
+        </option>
+        <option key={10} value={100}>
+          One Hundred
+        </option>
+        <option key={11} value={110}>
+          One Hundred Ten
+        </option>
+        <option key={12} value={120}>
+          One Hundred Twenty
+        </option>
+        <option key={13} value={130}>
+          One Hundred Thirty
+        </option>
+      </select>
       <Box m={3} bg="surface">
         <Box mb={3} width={230}>
           <Select
@@ -84,6 +126,7 @@ const Example = ({ variant, native = false }) => {
             label="Standard"
             helperText="Helper text"
             children={children}
+            placeholder="Empty"
           />
         </Box>
         <Box mb={3} width={230}>

package/src/Select/Select.tsx

@@ -50,7 +50,7 @@ export interface SelectProps
   theme?: Theme;
   error?: boolean | string;
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
-  renderValue?: (value?: string) => string;
+  renderValue?: (value?: string) => string | undefined;
   leadingIcon?: React.ReactNode;
 }
 
@@ -118,11 +118,10 @@ export const Select = forwardRef<
   const inputId = `${id}-text-field`;
   const helperTextId = helperText ? `${id}-helper-text` : undefined;
 
-  const labelIsFloating =
-    hasFocus || open || (typeof value === 'string' && value.length > 0);
-
   const renderValue = renderValueProp || makeDefaultRender(children);
 
+  const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
+
   const Comp: ForwardRefExoticComponent<
     BaseSelectProps & RefAttributes<HTMLSelectElement | HTMLButtonElement>
   > = native ? SelectComp : (SelectButton as any);

package/src/Select/defaultRender.ts

@@ -2,7 +2,7 @@ import { Children, isValidElement } from 'react';
 
 export const makeDefaultRender = (children?: React.ReactNode) => (
   val?: string
-): string => {
+): string | undefined => {
   if (children && val !== undefined) {
     const allChildren = Children.toArray(children);
     for (let i = 0; i < allChildren.length; i++) {
@@ -14,5 +14,5 @@ export const makeDefaultRender = (children?: React.ReactNode) => (
       }
     }
   }
-  return val || '';
+  return val || undefined;
 };

package/src/SelectItem/SelectItem.tsx

@@ -5,6 +5,7 @@ import { wrapEvent } from '@basic-ui/core';
 
 export type SelectItemProps = MenuItemProps;
 
+const ZERO_WIDTH_SPACE = '\u200b';
 export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
   function SelectItem(props, forwardedRef) {
     const {
@@ -17,7 +18,9 @@ export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
     } = props;
     const { native, onSelect, value: selectedValue } = useSelectContext();
     const value =
-      valueProp !== undefined ? String(valueProp) : (children as string);
+      valueProp !== undefined && valueProp !== null
+        ? String(valueProp)
+        : (children as string);
 
     if (native) {
       return (
@@ -32,12 +35,11 @@ export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
       );
     }
 
-    if (!children && disabled) {
+    if (children === undefined && disabled) {
       return null;
     }
 
     const selected = value === String(selectedValue);
-
     return (
       <Comp
         as={MenuItem}
@@ -49,7 +51,7 @@ export const SelectItem = forwardRef<HTMLLIElement, MenuItemProps>(
         selected={selected}
         {...otherProps}
       >
-        {children}
+        {children || ZERO_WIDTH_SPACE}
       </Comp>
     );
   }