ish-ui 1.3.7 → 1.3.9

package/dist/colorPicker/ColorPicker.js

@@ -8,7 +8,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ButtonBase from '@mui/material/ButtonBase';
 import Popper from '@mui/material/Popper';
-import { AlphaPicker, HuePicker } from 'react-color';
+import { AlphaPicker, HuePicker, MaterialPicker } from 'react-color';
 import { ClickAwayListener } from '@mui/material';
 import Paper from '@mui/material/Paper';
 import Grow from '@mui/material/Grow';
@@ -20,41 +20,7 @@ const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p,
         width: 200,
         padding: spacing(2),
         position: 'relative',
-        bottom: '12px',
-        background: palette.background.paper,
-        '&:after': {
-            bottom: '0px',
-            left: '50%',
-            width: '22px',
-            height: '10px',
-            position: 'absolute',
-            transform: 'translateX(-50%)',
-            background: palette.background.paper,
-            content: '\'\'',
-            zIndex: 1
-        },
-        '&:before': {
-            content: '\'\'',
-            bottom: '-6px',
-            left: '50%',
-            width: '12px',
-            height: '12px',
-            position: 'absolute',
-            transform: 'translateX(-50%) rotate(45deg)',
-            background: palette.background.paper,
-            boxShadow: '1px 1px 2px 0px rgba(0,0,0,0.2), 2px 1px 2px -1px rgba(0,0,0,0.12), 1px 1px 1px 0px rgba(0,0,0,0.12);'
-        }
-    },
-    paperPlaceBottom: {
-        marginTop: spacing(3),
-        '&:after': {
-            bottom: 'unset',
-            top: '0px'
-        },
-        '&:before': {
-            bottom: 'unset',
-            top: '-6px',
-        }
+        background: palette.background.paper
     },
     colorPickerButton: {
         width: '14px',
@@ -71,7 +37,59 @@ const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p,
         }
     },
     popper: {
-        zIndex: zIndex.tooltip
+        zIndex: zIndex.tooltip,
+        [`&[data-popper-placement*="bottom"] .${classes.arrow}`]: {
+            top: 0,
+            marginTop: '-0.71em',
+            '&::before': {
+                transformOrigin: '0 100%'
+            }
+        },
+        [`&[data-popper-placement*="top"] .${classes.arrow}`]: {
+            bottom: 0,
+            marginBottom: '-0.71em',
+            '&::before': {
+                transformOrigin: '100% 0'
+            }
+        },
+        [`&[data-popper-placement*="right"] .${classes.arrow}`]: {
+            left: 0,
+            marginLeft: '-0.71em',
+            width: '0.71em',
+            height: '1em',
+            '&::before': {
+                transformOrigin: '100% 100%'
+            }
+        },
+        [`&[data-popper-placement*="left"] .${classes.arrow}`]: {
+            right: 0,
+            marginRight: '-0.71em',
+            width: '0.71em',
+            height: '1em',
+            '&::before': {
+                transformOrigin: '0 0'
+            }
+        }
+    },
+    // Positioned by Popper's `arrow` modifier; a rotated square clipped to a
+    // triangle by the overflow, so it follows the paper on every placement.
+    arrow: {
+        position: 'absolute',
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        fontSize: 12,
+        width: '1em',
+        height: '0.71em', // = width / sqrt(2)
+        color: palette.background.paper,
+        '&::before': {
+            content: '""',
+            display: 'block',
+            margin: 'auto',
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'currentColor',
+            transform: 'rotate(45deg)'
+        }
     },
     bottomOffset: {
         marginBottom: spacing(1.25)
@@ -81,23 +99,33 @@ const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p,
             background: 'none !important'
         }
     },
-    opened: {}
+    opened: {},
+    material: {
+        '& > div > div': {
+            boxShadow: 'none !important'
+        }
+    }
 }));
-const ColorPickerBase = React.memo(({ color, input: { value, onChange }, TransitionProps, setAnchorEl, placement }) => {
-    const { classes, cx } = useStyles();
+// Gap between the anchor and the paper, leaving room for the arrow.
+const popperModifiers = [{ name: 'offset', options: { offset: [0, 12] } }];
+const ColorPickerBase = React.memo(({ color, input: { value, onChange }, TransitionProps, setAnchorEl }) => {
+    const { classes } = useStyles();
     const [hueColor, setHueColor] = useState(color);
     const [alfaColor, setAlfaColor] = useState(color);
     const hueRef = useRef(undefined);
-    const onHueChange = useCallback(color => {
-        setHueColor(color.hsv);
-        setAlfaColor(color.hsv);
-    }, []);
-    const onAlfaChange = useCallback(color => {
+    const onColorChange = useCallback(color => {
         setHueColor({
             h: color.hsv.h, s: color.hsv.a, v: color.hsv.v, a: 1
         });
         setAlfaColor(color.hsv);
     }, []);
+    const onChangeComplete = (color) => {
+        var _a, _b;
+        const hex = ((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex) || (color === null || color === void 0 ? void 0 : color.hex);
+        if (hex) {
+            onChange(hex.replace('#', ''));
+        }
+    };
     const handleClickAway = useCallback(() => {
         setAnchorEl(null);
     }, []);
@@ -107,20 +135,27 @@ const ColorPickerBase = React.memo(({ color, input: { value, onChange }, Transit
         }
     }, [value, hueColor]);
     useEffect(() => {
-        const hueHsv = hueRef.current.state.hsv;
+        var _a, _b;
+        const hueHsv = (_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hsv;
+        if (!hueHsv) {
+            return;
+        }
         setAlfaColor({
             h: hueHsv.h, s: 1, v: hueHsv.v, a: hueHsv.s
         });
     }, [hueRef.current]);
-    const onChangeComplete = () => {
-        onChange(hueRef.current.state.hex.replace('#', ''));
-    };
     return (React.createElement(ClickAwayListener, { onClickAway: handleClickAway },
         React.createElement(Grow, Object.assign({}, TransitionProps, { timeout: 200 }),
-            React.createElement("div", null,
-                React.createElement(Paper, { className: cx(classes.paper, placement === 'bottom' && classes.paperPlaceBottom) },
-                    React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onHueChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
-                    React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onAlfaChange, onChangeComplete: onChangeComplete }))))));
+            React.createElement(Paper, { className: classes.paper },
+                React.createElement("span", { className: classes.arrow, "data-popper-arrow": true }),
+                React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
+                React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onColorChange, onChangeComplete: onChangeComplete }),
+                React.createElement("div", { className: classes.material },
+                    React.createElement(MaterialPicker, { styles: {
+                            default: {
+                                material: { width: '100%', height: 'unset', padding: 0, fontFamily: 'inherit' }
+                            }
+                        }, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete }))))));
 });
 const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
     const { classes, cx } = useStyles();
@@ -132,6 +167,6 @@ const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
     const color = useMemo(() => (input.value ? '#' + input.value : theme.palette.primary.main), [theme, input.value]);
     return (React.createElement("div", { className: "d-flex", onClick: stopEventPropagation },
         React.createElement(ButtonBase, { onClick: handleClick, className: cx(classes.colorPickerButton, anchorEl && classes.opened), style: { backgroundColor: color, width, height: width } }),
-        React.createElement(Popper, { open: Boolean(anchorEl), anchorEl: anchorEl, placement: placement, className: classes.popper, transition: true }, ({ TransitionProps }) => (React.createElement(ColorPickerBase, { color: color, input: input, TransitionProps: TransitionProps, setAnchorEl: setAnchorEl, placement: placement })))));
+        React.createElement(Popper, { open: Boolean(anchorEl), anchorEl: anchorEl, placement: placement, className: classes.popper, modifiers: popperModifiers, transition: true }, ({ TransitionProps }) => React.createElement(ColorPickerBase, { color: color, input: input, TransitionProps: TransitionProps, setAnchorEl: setAnchorEl }))));
 });
 export default ColorPickerWrapper;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {