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

package/src/ThemeExplorer/TextFieldColorPicker.tsx

@@ -1,115 +1,112 @@
-import type { Color } from '@basic-ui/color-picker';
-import { toColor } from '@basic-ui/color-picker';
-import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
-import { useRef, useState, memo, useCallback } from 'react';
-
-import type { TextFieldProps } from '../';
-import { alpha, Box, TextField, Button } from '../';
-import { ColorPicker } from './ColorPicker';
-
-export interface TextFieldColorPickerProps
-  extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {
-  value?: Color;
-  defaultValue?: Color;
-  onChange?: (color: Color) => void;
-}
-
-export const TextFieldColorPicker = memo<TextFieldColorPickerProps>((props) => {
-  const {
-    value: valueProp,
-    defaultValue = toColor('hex', '#33ff33'),
-    onChange: onChangeProp,
-    disabled,
-    ...otherProps
-  } = props;
-
-  const [popoverOpen, setPopoverOpen] = useState(false);
-  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);
-  const [value, _onChange] = useControlledState<Color, any, []>(
-    valueProp,
-    onChangeProp as any,
-    defaultValue,
-    (setState) => (v: any) => {
-      setState(v);
-      setText(v.hex);
-    }
-  );
-
-  const onChange = useCallback(
-    (color: Color) => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _onChange!(color);
-      setText(color.hex.replace('#', ''));
-    },
-    [_onChange]
-  );
-
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  useOnClickOutside(popoverRef, (e) => {
-    if (e.target === buttonRef?.current) {
-      return;
-    }
-    setPopoverOpen(false);
-  });
-
-  return (
-    <>
-      <TextField
-        disabled={disabled}
-        value={text.replace('#', '')}
-        leadingIcon={'#'}
-        trailingIcon={
-          <Button
-            style={{ backgroundColor: value.hex }}
-            color="on.surface"
-            ref={buttonRef}
-            onClick={() => setPopoverOpen((open) => !open)}
-            disabled={disabled}
-            sx={{
-              pointerEvents: 'all',
-              cursor: 'pointer',
-              width: 32,
-              height: 32,
-              borderRadius: 'extra-small',
-              borderWidth: '1px',
-              borderColor: alpha('on.surface', 0.38),
-              borderStyle: 'solid',
-              outlineColor: 'transparent',
-            }}
-          />
-        }
-        maxLength={6}
-        hideCharacterCounter
-        onChange={(e) => {
-          if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            onChange!(toColor('hex', '#' + e.target.value));
-            return;
-          }
-          setText(e.target.value);
-        }}
-        {...otherProps}
-      />
-      {popoverOpen && (
-        <Popper
-          anchorEl={buttonRef}
-          placement="bottom-end"
-          style={{ zIndex: 2 }}
-        >
-          <Box ref={popoverRef} py={2}>
-            <Box boxShadow={4}>
-              <ColorPicker
-                color={value}
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                onChange={onChange!}
-                width={220}
-                height={220}
-              />
-            </Box>
-          </Box>
-        </Popper>
-      )}
-    </>
-  );
-});
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
+import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
+import { useRef, useState, memo, useCallback } from 'react';
+
+import type { TextFieldProps } from '../';
+import { alpha, Box, TextField, Button } from '../';
+import { ColorPicker } from './ColorPicker';
+
+export interface TextFieldColorPickerProps
+  extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {
+  value?: Color;
+  defaultValue?: Color;
+  onChange?: (color: Color) => void;
+}
+
+export const TextFieldColorPicker = memo<TextFieldColorPickerProps>((props) => {
+  const {
+    value: valueProp,
+    defaultValue = toColor('hex', '#33ff33'),
+    onChange: onChangeProp,
+    disabled,
+    ...otherProps
+  } = props;
+
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);
+  const [value, _onChange] = useControlledState<Color, any, []>(
+    valueProp,
+    onChangeProp as any,
+    defaultValue,
+    (setState) => (v: any) => {
+      setState(v);
+      setText(v.hex);
+    }
+  );
+
+  const onChange = useCallback(
+    (color: Color) => {
+      _onChange!(color);
+      setText(color.hex.replace('#', ''));
+    },
+    [_onChange]
+  );
+
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useOnClickOutside(popoverRef, (e) => {
+    if (e.target === buttonRef?.current) {
+      return;
+    }
+    setPopoverOpen(false);
+  });
+
+  return (
+    <>
+      <TextField
+        disabled={disabled}
+        value={text.replace('#', '')}
+        leadingIcon={'#'}
+        trailingIcon={
+          <Button
+            style={{ backgroundColor: value.hex }}
+            color="on.surface"
+            ref={buttonRef}
+            onClick={() => setPopoverOpen((open) => !open)}
+            disabled={disabled}
+            sx={{
+              pointerEvents: 'all',
+              cursor: 'pointer',
+              width: 32,
+              height: 32,
+              borderRadius: 'extra-small',
+              borderWidth: '1px',
+              borderColor: alpha('on.surface', 0.38),
+              borderStyle: 'solid',
+              outlineColor: 'transparent',
+            }}
+          />
+        }
+        maxLength={6}
+        hideCharacterCounter
+        onChange={(e) => {
+          if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {
+            onChange!(toColor('hex', '#' + e.target.value));
+            return;
+          }
+          setText(e.target.value);
+        }}
+        {...otherProps}
+      />
+      {popoverOpen && (
+        <Popper
+          anchorEl={buttonRef}
+          placement="bottom-end"
+          style={{ zIndex: 2 }}
+        >
+          <Box ref={popoverRef} py={2}>
+            <Box boxShadow={4}>
+              <ColorPicker
+                color={value}
+                onChange={onChange!}
+                width={220}
+                height={220}
+              />
+            </Box>
+          </Box>
+        </Popper>
+      )}
+    </>
+  );
+});

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -1,8 +1,8 @@
-import { theme } from '../theme/theme';
-import { ThemeBuilder } from './ThemeBuilder';
-
-export default {
-  title: 'components/ThemeExplorer',
-};
-
-export const Builder = () => <ThemeBuilder baseTheme={theme} />;
+import { theme } from '../theme/theme';
+import { ThemeBuilder } from './ThemeBuilder';
+
+export default {
+  title: 'components/ThemeExplorer',
+};
+
+export const Builder = () => <ThemeBuilder baseTheme={theme} />;