init: the first public commit for AFFiNE

libs/components/ui/src/select/OptionGroup.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type ForwardedRef } from 'react';
+/* eslint-disable no-restricted-imports */
+import OptionGroupUnstyled, {
+    OptionGroupUnstyledProps,
+} from '@mui/base/OptionGroupUnstyled';
+import { styled } from '../styled';
+
+const StyledGroupRoot = styled('li')`
+    list-style: none;
+`;
+
+const StyledGroupHeader = styled('span')`
+    display: block;
+    padding: 15px 0 5px 10px;
+    font-size: 0.75em;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+    color: #6f7e8c;
+`;
+
+const StyledGroupOptions = styled('ul')`
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+
+    > li {
+        padding-left: 20px;
+    }
+`;
+
+/**
+ * TODO: The designer has not yet given a style for OptionGroup, the sample style is used here
+ * **/
+export const OptionGroup = forwardRef(function CustomOptionGroup(
+    props: OptionGroupUnstyledProps,
+    ref: ForwardedRef<HTMLLIElement>
+) {
+    const components: OptionGroupUnstyledProps['components'] = {
+        Root: StyledGroupRoot,
+        Label: StyledGroupHeader,
+        List: StyledGroupOptions,
+        ...props.components,
+    };
+
+    return <OptionGroupUnstyled {...props} ref={ref} components={components} />;
+});