react-science 0.33.0 → 0.34.0

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.d.ts

@@ -1,5 +1,8 @@
+import { PopoverProps } from '@blueprintjs/core';
 import { ColorPickerProps } from '../react-color/ColorPicker';
-type ColorPickerDropdownProps = Pick<ColorPickerProps, 'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'>;
+interface ColorPickerDropdownProps extends Pick<ColorPickerProps, 'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'> {
+    popoverProps?: Omit<PopoverProps, 'content'>;
+}
 export declare function ColorPickerDropdown(props: ColorPickerDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ColorPickerDropdown.d.ts.map

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAe,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG3E,KAAK,wBAAwB,GAAG,IAAI,CAClC,gBAAgB,EAChB,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,kBAAkB,CAC5E,CAAC;AAiBF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAsClE"}
+{"version":3,"file":"ColorPickerDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,EAAe,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG3E,UAAU,wBACR,SAAQ,IAAI,CACV,gBAAgB,EAChB,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,kBAAkB,CAC5E;IACD,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;CAC9C;AAiBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAmBlE"}

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js

@@ -28,12 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPickerDropdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@blueprintjs/core");
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = require("react");
-const useModifiedPopper_1 = require("../../hooks/useModifiedPopper");
-const useOnClickOutside_1 = require("../../hooks/useOnClickOutside");
-const useOnOff_1 = require("../../hooks/useOnOff");
-const Portal_1 = require("../../root-layout/Portal");
 const FixedColorPreview_1 = __importDefault(require("../preview/FixedColorPreview"));
 const ColorPicker_1 = require("../react-color/ColorPicker");
 const colorHelper = __importStar(require("../react-color/helpers/color"));
@@ -51,19 +47,9 @@ const ColorPickerPreview = styled_1.default.div `
   border-radius: 0.125rem;
 `;
 function ColorPickerDropdown(props) {
-    const { color, ...otherProps } = props;
-    const ref = (0, react_1.useRef)(null);
-    const [isOpened, , close, toggle] = (0, useOnOff_1.useOnOff)(false);
+    const { color, popoverProps, ...otherProps } = props;
     const { hex } = colorHelper.toState(color || 'white');
-    const { setReferenceElement, setPopperElement, popperProps } = (0, useModifiedPopper_1.useModifiedPopper)({
-        placement: 'bottom-start',
-        offset: 6,
-    });
-    (0, useOnClickOutside_1.useOnClickOutside)(ref, close);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorPickerRoot, { type: "button", ref: setReferenceElement, onClick: toggle, children: (0, jsx_runtime_1.jsx)(ColorPickerPreview, { children: (0, jsx_runtime_1.jsx)(FixedColorPreview_1.default, { color: hex }) }) }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: (div) => {
-                        setPopperElement(div);
-                        ref.current = div;
-                    }, ...popperProps, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { color: color, ...otherProps }) }) }))] }));
+    return ((0, jsx_runtime_1.jsx)(core_1.Popover, { targetProps: { style: { width: '100%' } }, content: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { color: color, ...otherProps }), minimal: true, ...popoverProps, children: (0, jsx_runtime_1.jsx)(ColorPickerRoot, { type: "button", children: (0, jsx_runtime_1.jsx)(ColorPickerPreview, { children: (0, jsx_runtime_1.jsx)(FixedColorPreview_1.default, { color: hex }) }) }) }));
 }
 exports.ColorPickerDropdown = ColorPickerDropdown;
 //# sourceMappingURL=ColorPickerDropdown.js.map

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDropdown.js","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAAqC;AACrC,iCAA+B;AAE/B,qEAAkE;AAClE,qEAAkE;AAClE,mDAAgD;AAChD,qDAAkD;AAClD,qFAA6D;AAC7D,4DAA2E;AAC3E,0EAA4D;AAO5D,MAAM,eAAe,GAAG,gBAAM,CAAC,MAAM,CAAA;;;;;;;CAOpC,CAAC;AAEF,MAAM,kBAAkB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEvC,MAAM,GAAG,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,AAAD,EAAG,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,mBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEtD,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,GAC1D,IAAA,qCAAiB,EAAoB;QACnC,SAAS,EAAE,cAAc;QACzB,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;IAEL,IAAA,qCAAiB,EAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAE9B,OAAO,CACL,6DACE,uBAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,YACtE,uBAAC,kBAAkB,cACjB,uBAAC,2BAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,GACd,GACL,EACjB,QAAQ,IAAI,CACX,uBAAC,eAAM,cACL,gCACE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;wBACX,gBAAgB,CAAC,GAAG,CAAC,CAAC;wBACtB,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC;oBACpB,CAAC,KACG,WAAW,YAEf,uBAAC,yBAAW,IAAC,KAAK,EAAE,KAAK,KAAM,UAAU,GAAI,GACzC,GACC,CACV,IACA,CACJ,CAAC;AACJ,CAAC;AAtCD,kDAsCC"}
+{"version":3,"file":"ColorPickerDropdown.js","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAA0D;AAC1D,6DAAqC;AAErC,qFAA6D;AAC7D,4DAA2E;AAC3E,0EAA4D;AAU5D,MAAM,eAAe,GAAG,gBAAM,CAAC,MAAM,CAAA;;;;;;;CAOpC,CAAC;AAEF,MAAM,kBAAkB,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAErD,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEtD,OAAO,CACL,uBAAC,cAAO,IACN,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EACzC,OAAO,EAAE,uBAAC,yBAAW,IAAC,KAAK,EAAE,KAAK,KAAM,UAAU,GAAI,EACtD,OAAO,WACH,YAAY,YAEhB,uBAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,YAC5B,uBAAC,kBAAkB,cACjB,uBAAC,2BAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,GACd,GACL,GACV,CACX,CAAC;AACJ,CAAC;AAnBD,kDAmBC"}

package/lib-esm/components/color-picker/color-picker-dropdown/ColorPickerDropdown.d.ts

@@ -1,5 +1,8 @@
+import { PopoverProps } from '@blueprintjs/core';
 import { ColorPickerProps } from '../react-color/ColorPicker';
-type ColorPickerDropdownProps = Pick<ColorPickerProps, 'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'>;
+interface ColorPickerDropdownProps extends Pick<ColorPickerProps, 'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'> {
+    popoverProps?: Omit<PopoverProps, 'content'>;
+}
 export declare function ColorPickerDropdown(props: ColorPickerDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ColorPickerDropdown.d.ts.map

package/lib-esm/components/color-picker/color-picker-dropdown/ColorPickerDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAe,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG3E,KAAK,wBAAwB,GAAG,IAAI,CAClC,gBAAgB,EAChB,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,kBAAkB,CAC5E,CAAC;AAiBF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAsClE"}
+{"version":3,"file":"ColorPickerDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,EAAe,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG3E,UAAU,wBACR,SAAQ,IAAI,CACV,gBAAgB,EAChB,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,kBAAkB,CAC5E;IACD,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;CAC9C;AAiBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAmBlE"}

package/lib-esm/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js

@@ -1,10 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import { useRef } from 'react';
-import { useModifiedPopper } from '../../hooks/useModifiedPopper';
-import { useOnClickOutside } from '../../hooks/useOnClickOutside';
-import { useOnOff } from '../../hooks/useOnOff';
-import { Portal } from '../../root-layout/Portal';
 import FixedColorPreview from '../preview/FixedColorPreview';
 import { ColorPicker } from '../react-color/ColorPicker';
 import * as colorHelper from '../react-color/helpers/color';
@@ -22,18 +18,8 @@ const ColorPickerPreview = styled.div `
   border-radius: 0.125rem;
 `;
 export function ColorPickerDropdown(props) {
-    const { color, ...otherProps } = props;
-    const ref = useRef(null);
-    const [isOpened, , close, toggle] = useOnOff(false);
+    const { color, popoverProps, ...otherProps } = props;
     const { hex } = colorHelper.toState(color || 'white');
-    const { setReferenceElement, setPopperElement, popperProps } = useModifiedPopper({
-        placement: 'bottom-start',
-        offset: 6,
-    });
-    useOnClickOutside(ref, close);
-    return (_jsxs(_Fragment, { children: [_jsx(ColorPickerRoot, { type: "button", ref: setReferenceElement, onClick: toggle, children: _jsx(ColorPickerPreview, { children: _jsx(FixedColorPreview, { color: hex }) }) }), isOpened && (_jsx(Portal, { children: _jsx("div", { ref: (div) => {
-                        setPopperElement(div);
-                        ref.current = div;
-                    }, ...popperProps, children: _jsx(ColorPicker, { color: color, ...otherProps }) }) }))] }));
+    return (_jsx(Popover, { targetProps: { style: { width: '100%' } }, content: _jsx(ColorPicker, { color: color, ...otherProps }), minimal: true, ...popoverProps, children: _jsx(ColorPickerRoot, { type: "button", children: _jsx(ColorPickerPreview, { children: _jsx(FixedColorPreview, { color: hex }) }) }) }));
 }
 //# sourceMappingURL=ColorPickerDropdown.js.map

package/lib-esm/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDropdown.js","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAoB,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,WAAW,MAAM,8BAA8B,CAAC;AAO5D,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;CAOpC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEvC,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,AAAD,EAAG,KAAK,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEtD,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,WAAW,EAAE,GAC1D,iBAAiB,CAAoB;QACnC,SAAS,EAAE,cAAc;QACzB,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;IAEL,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAE9B,OAAO,CACL,8BACE,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,YACtE,KAAC,kBAAkB,cACjB,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,GACd,GACL,EACjB,QAAQ,IAAI,CACX,KAAC,MAAM,cACL,cACE,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;wBACX,gBAAgB,CAAC,GAAG,CAAC,CAAC;wBACtB,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC;oBACpB,CAAC,KACG,WAAW,YAEf,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,KAAM,UAAU,GAAI,GACzC,GACC,CACV,IACA,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ColorPickerDropdown.js","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAgB,MAAM,mBAAmB,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAoB,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,WAAW,MAAM,8BAA8B,CAAC;AAU5D,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;CAOpC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAErD,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEtD,OAAO,CACL,KAAC,OAAO,IACN,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EACzC,OAAO,EAAE,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,KAAM,UAAU,GAAI,EACtD,OAAO,WACH,YAAY,YAEhB,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,YAC5B,KAAC,kBAAkB,cACjB,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,GACd,GACL,GACV,CACX,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -1,18 +1,17 @@
+import { Popover, PopoverProps } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import { useRef } from 'react';
 
-import { useModifiedPopper } from '../../hooks/useModifiedPopper';
-import { useOnClickOutside } from '../../hooks/useOnClickOutside';
-import { useOnOff } from '../../hooks/useOnOff';
-import { Portal } from '../../root-layout/Portal';
 import FixedColorPreview from '../preview/FixedColorPreview';
 import { ColorPicker, ColorPickerProps } from '../react-color/ColorPicker';
 import * as colorHelper from '../react-color/helpers/color';
 
-type ColorPickerDropdownProps = Pick<
-  ColorPickerProps,
-  'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
->;
+interface ColorPickerDropdownProps
+  extends Pick<
+    ColorPickerProps,
+    'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
+  > {
+  popoverProps?: Omit<PopoverProps, 'content'>;
+}
 
 const ColorPickerRoot = styled.button`
   position: relative;
@@ -30,41 +29,22 @@ const ColorPickerPreview = styled.div`
 `;
 
 export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
-  const { color, ...otherProps } = props;
-
-  const ref = useRef<HTMLDivElement | null>(null);
-  const [isOpened, , close, toggle] = useOnOff(false);
+  const { color, popoverProps, ...otherProps } = props;
 
   const { hex } = colorHelper.toState(color || 'white');
 
-  const { setReferenceElement, setPopperElement, popperProps } =
-    useModifiedPopper<HTMLButtonElement>({
-      placement: 'bottom-start',
-      offset: 6,
-    });
-
-  useOnClickOutside(ref, close);
-
   return (
-    <>
-      <ColorPickerRoot type="button" ref={setReferenceElement} onClick={toggle}>
+    <Popover
+      targetProps={{ style: { width: '100%' } }}
+      content={<ColorPicker color={color} {...otherProps} />}
+      minimal
+      {...popoverProps}
+    >
+      <ColorPickerRoot type="button">
         <ColorPickerPreview>
           <FixedColorPreview color={hex} />
         </ColorPickerPreview>
       </ColorPickerRoot>
-      {isOpened && (
-        <Portal>
-          <div
-            ref={(div) => {
-              setPopperElement(div);
-              ref.current = div;
-            }}
-            {...popperProps}
-          >
-            <ColorPicker color={color} {...otherProps} />
-          </div>
-        </Portal>
-      )}
-    </>
+    </Popover>
   );
 }