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

package/src/Select/SelectMultiple.story.tsx

@@ -1,215 +1,214 @@
-import { useState } from 'react';
-
-import { Select } from './';
-import { SelectItem } from '../SelectItem';
-import { Box } from '../Box';
-import { CheckBox } from '../CheckBox';
-
-export default {
-  title: 'components/Select/Multiple',
-};
-
-const SearchIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height={24}
-    width={24}
-    viewBox="0 0 48 48"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
-  </svg>
-);
-
-type OptionType =
-  | ''
-  | '10'
-  | '20'
-  | '30'
-  | '40'
-  | '50'
-  | '60'
-  | '70'
-  | '80'
-  | '90'
-  | '100'
-  | '110'
-  | '120'
-  | '130';
-
-const Example = ({
-  variant,
-  native = false,
-}: {
-  variant?: 'outlined' | 'filled';
-  native?: boolean;
-}) => {
-  const [error, setError] = useState<boolean | string>(false);
-  const [color, setColor] = useState<'primary' | 'secondary'>('primary');
-
-  /* eslint-disable react/no-children-prop */
-  const children = [
-    <SelectItem<OptionType> key={1} value={'10'}>
-      Ten
-    </SelectItem>,
-    <SelectItem<OptionType> key={2} value={'20'}>
-      Twenty
-    </SelectItem>,
-    <SelectItem<OptionType> key={3} value={'30'}>
-      Thirty
-    </SelectItem>,
-    <SelectItem<OptionType> key={4} value={'40'}>
-      Fourty
-    </SelectItem>,
-    <SelectItem<OptionType> key={5} value={'50'}>
-      Fifty
-    </SelectItem>,
-    <SelectItem<OptionType> key={6} value={'60'}>
-      Sixty
-    </SelectItem>,
-    <SelectItem<OptionType> key={7} value={'70'}>
-      Seventy
-    </SelectItem>,
-    <SelectItem<OptionType> key={8} value={'80'}>
-      Eighty
-    </SelectItem>,
-    <SelectItem<OptionType> key={9} value={'90'}>
-      Ninety
-    </SelectItem>,
-    <SelectItem<OptionType> key={10} value={'100'}>
-      One Hundred
-    </SelectItem>,
-    <SelectItem<OptionType> key={11} value={'110'}>
-      One Hundred Ten
-    </SelectItem>,
-    <SelectItem<OptionType> key={12} value={'120'}>
-      One Hundred Twenty
-    </SelectItem>,
-    <SelectItem<OptionType> key={13} value={'130'}>
-      One Hundred Thirty
-    </SelectItem>,
-  ];
-
-  return (
-    <Box p={3}>
-      {/* <CheckBox
-        checked={Boolean(error)}
-        onChange={(e) =>
-          setError(e.target.checked ? 'This field is required' : false)
-        }
-      >
-        Has Error
-      </CheckBox>
-      <Box width={230} display="inline-block">
-        <Select<'primary' | 'secondary'>
-          value={color}
-          onChange={(e, value) => setColor(value)}
-          label="Color"
-        >
-          <SelectItem<'primary' | 'secondary'> value="primary">
-            Primary
-          </SelectItem>
-          <SelectItem<'primary' | 'secondary'> value="secondary">
-            Secondary
-          </SelectItem>
-        </Select>
-      </Box> */}
-      <Box m={3} bg="surface">
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            multiple
-            variant={variant}
-            label="Standard"
-            helperText="Helper text"
-            children={children}
-            placeholder="Empty"
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            multiple
-            variant={variant}
-            label="Standard"
-            defaultValue={['20']}
-            helperText="Helper text"
-            children={children}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            multiple
-            variant={variant}
-            label="Standard"
-            children={children}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            multiple
-            variant={variant}
-            label="Disabled"
-            helperText="Helper text"
-            disabled
-            children={children}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            multiple
-            variant={variant}
-            label=""
-            helperText="Helper text"
-            children={children}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            multiple
-            variant={variant}
-            label=""
-            helperText="Helper text"
-            children={children}
-            leadingIcon={<SearchIcon />}
-          />
-        </Box>
-        <Box mb={3} width={230}>
-          <Select<OptionType>
-            error={error}
-            color={color}
-            native={native}
-            multiple
-            variant={variant}
-            label="Standard"
-            helperText="Helper text"
-            children={children}
-            leadingIcon={<SearchIcon />}
-          />
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export const Filled = () => <Example variant="filled" />;
-export const Outlined = () => <Example variant="outlined" />;
-export const FilledNative = () => <Example variant="filled" native />;
-export const OutlinedNative = () => <Example variant="outlined" native />;
+import { useState } from 'react';
+
+import { Select } from './';
+import { SelectItem } from '../SelectItem';
+import { Box } from '../Box';
+
+export default {
+  title: 'components/Select/Multiple',
+};
+
+const SearchIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
+
+type OptionType =
+  | ''
+  | '10'
+  | '20'
+  | '30'
+  | '40'
+  | '50'
+  | '60'
+  | '70'
+  | '80'
+  | '90'
+  | '100'
+  | '110'
+  | '120'
+  | '130';
+
+const Example = ({
+  variant,
+  native = false,
+}: {
+  variant?: 'outlined' | 'filled';
+  native?: boolean;
+}) => {
+  const [error] = useState<boolean | string>(false);
+  const [color] = useState<'primary' | 'secondary'>('primary');
+
+  /* eslint-disable react/no-children-prop */
+  const children = [
+    <SelectItem<OptionType> key={1} value={'10'}>
+      Ten
+    </SelectItem>,
+    <SelectItem<OptionType> key={2} value={'20'}>
+      Twenty
+    </SelectItem>,
+    <SelectItem<OptionType> key={3} value={'30'}>
+      Thirty
+    </SelectItem>,
+    <SelectItem<OptionType> key={4} value={'40'}>
+      Fourty
+    </SelectItem>,
+    <SelectItem<OptionType> key={5} value={'50'}>
+      Fifty
+    </SelectItem>,
+    <SelectItem<OptionType> key={6} value={'60'}>
+      Sixty
+    </SelectItem>,
+    <SelectItem<OptionType> key={7} value={'70'}>
+      Seventy
+    </SelectItem>,
+    <SelectItem<OptionType> key={8} value={'80'}>
+      Eighty
+    </SelectItem>,
+    <SelectItem<OptionType> key={9} value={'90'}>
+      Ninety
+    </SelectItem>,
+    <SelectItem<OptionType> key={10} value={'100'}>
+      One Hundred
+    </SelectItem>,
+    <SelectItem<OptionType> key={11} value={'110'}>
+      One Hundred Ten
+    </SelectItem>,
+    <SelectItem<OptionType> key={12} value={'120'}>
+      One Hundred Twenty
+    </SelectItem>,
+    <SelectItem<OptionType> key={13} value={'130'}>
+      One Hundred Thirty
+    </SelectItem>,
+  ];
+
+  return (
+    <Box p={3}>
+      {/* <CheckBox
+        checked={Boolean(error)}
+        onChange={(e) =>
+          setError(e.target.checked ? 'This field is required' : false)
+        }
+      >
+        Has Error
+      </CheckBox>
+      <Box width={230} display="inline-block">
+        <Select<'primary' | 'secondary'>
+          value={color}
+          onChange={(e, value) => setColor(value)}
+          label="Color"
+        >
+          <SelectItem<'primary' | 'secondary'> value="primary">
+            Primary
+          </SelectItem>
+          <SelectItem<'primary' | 'secondary'> value="secondary">
+            Secondary
+          </SelectItem>
+        </Select>
+      </Box> */}
+      <Box m={3} bg="surface">
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            placeholder="Empty"
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            defaultValue={['20']}
+            helperText="Helper text"
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Disabled"
+            helperText="Helper text"
+            disabled
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label=""
+            helperText="Helper text"
+            children={children}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label=""
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+        <Box mb={3} width={230}>
+          <Select<OptionType>
+            error={error}
+            color={color}
+            native={native}
+            multiple
+            variant={variant}
+            label="Standard"
+            helperText="Helper text"
+            children={children}
+            leadingIcon={<SearchIcon />}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;
+export const FilledNative = () => <Example variant="filled" native />;
+export const OutlinedNative = () => <Example variant="outlined" native />;

package/src/Select/context.ts

@@ -1,22 +1,22 @@
-import type { MouseEvent, KeyboardEvent } from 'react';
-import { useContext, createContext } from 'react';
-
-// Select Component
-export interface SelectContextProps<ValueType extends string> {
-  native: boolean;
-  value?: ValueType | ValueType[];
-  onSelect: (
-    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
-  ) => void;
-  multiple: boolean;
-}
-
-const selectContext = createContext<SelectContextProps<string>>({
-  native: false,
-  onSelect: () => {
-    // noop
-  },
-  multiple: false,
-});
-export const { Provider: SelectProvider } = selectContext;
-export const useSelectContext = () => useContext(selectContext);
+import type { MouseEvent, KeyboardEvent } from 'react';
+import { useContext, createContext } from 'react';
+
+// Select Component
+export interface SelectContextProps<ValueType extends string> {
+  native: boolean;
+  value?: ValueType | ValueType[];
+  onSelect: (
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
+  ) => void;
+  multiple: boolean;
+}
+
+const selectContext = createContext<SelectContextProps<string>>({
+  native: false,
+  onSelect: () => {
+    // noop
+  },
+  multiple: false,
+});
+export const { Provider: SelectProvider } = selectContext;
+export const useSelectContext = () => useContext(selectContext);

package/src/Select/defaultRender.tsx

@@ -1,49 +1,60 @@
-import type { ReactNode } from 'react';
-import { Children, isValidElement } from 'react';
-
-import { Box } from '../Box';
-
-export const makeDefaultRender =
-  <T extends string>(children?: ReactNode) =>
-  (val: T | '' | undefined): ReactNode => {
-    if (children && val !== undefined) {
-      const allChildren = Children.toArray(children);
-      for (let i = 0; i < allChildren.length; i++) {
-        const child = allChildren[i];
-        if (isValidElement(child) && String(child.props.value) === val) {
-          return child.props.children;
-        }
-      }
-    }
-    return val || undefined;
-  };
-
-export const makeDefaultMultipleRender =
-  <T extends string>(children?: ReactNode) =>
-  (val: T[] | undefined): ReactNode => {
-    const ret = [];
-    if (children && val !== undefined && val.length > 0) {
-      const set = new Set<string>(val);
-      const allChildren = Children.toArray(children);
-      for (let i = 0; i < allChildren.length; i++) {
-        const child = allChildren[i];
-        if (isValidElement(child) && set.has(String(child.props.value))) {
-          ret.push(child.props.children);
-        }
-      }
-    }
-
-    return (
-      <Box
-        as="span"
-        sx={{
-          maxWidth: '100%',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {ret.join(', ')}
-      </Box>
-    );
-  };
+import type { ReactElement, ReactNode } from 'react';
+import { Children, isValidElement } from 'react';
+
+import { Box } from '../Box';
+
+type SelectItemElement = ReactElement<{
+  children?: ReactNode;
+  value?: string;
+}>;
+
+export const makeDefaultRender =
+  <T extends string>(children?: ReactNode) =>
+  (val: T | '' | undefined): ReactNode => {
+    if (children && val !== undefined) {
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child)) {
+          const element = child as SelectItemElement;
+          if (String(element.props.value) === val) {
+            return element.props.children;
+          }
+        }
+      }
+    }
+    return val || undefined;
+  };
+
+export const makeDefaultMultipleRender =
+  <T extends string>(children?: ReactNode) =>
+  (val: T[] | undefined): ReactNode => {
+    const ret = [];
+    if (children && val !== undefined && val.length > 0) {
+      const set = new Set<string>(val);
+      const allChildren = Children.toArray(children);
+      for (let i = 0; i < allChildren.length; i++) {
+        const child = allChildren[i];
+        if (isValidElement(child)) {
+          const element = child as SelectItemElement;
+          if (set.has(String(element.props.value))) {
+            ret.push(element.props.children);
+          }
+        }
+      }
+    }
+
+    return (
+      <Box
+        as="span"
+        sx={{
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {ret.join(', ')}
+      </Box>
+    );
+  };

package/src/Select/index.ts

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