@doist/reactist 15.2.0 → 16.0.0

package/es/new-components/toast/toast-animation.js

@@ -0,0 +1,175 @@
+import { useMemo, useLayoutEffect, useCallback } from 'react';
+
+/**
+ * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts
+ *
+ * MIT License
+ *
+ * Copyright (c) 2018 SEEK
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const ANIMATION_TIMEOUT = 400;
+const ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease';
+const EXIT_TRANSITION = 'opacity 0.2s ease';
+/**
+ * Applies the "from" value of given CSS properties, and also sets a transition CSS property. Then
+ * it waits an animation frame before setting the same CSS properties to the target "to" value. This
+ * triggers the browser to perform the CSS transition on them.
+ *
+ * At the end of the animation, it cleans up, unsetting all the CSS properties (including the
+ * transition), and calls the "done" callback, if given.
+ */
+
+function animate({
+  element,
+  transforms,
+  transition,
+  done
+}) {
+  const fallbackTimeout = setTimeout(() => {
+    done == null ? void 0 : done();
+  }, ANIMATION_TIMEOUT);
+  transforms.forEach(({
+    property,
+    from = ''
+  }) => {
+    element.style.setProperty(property, from);
+  });
+  element.style.setProperty('transition', '');
+
+  function transitionEndHandler(event) {
+    if (event.target !== element) {
+      return;
+    }
+
+    element.style.setProperty('transition', '');
+    done == null ? void 0 : done();
+    element.removeEventListener('transitionend', transitionEndHandler);
+    clearTimeout(fallbackTimeout);
+  }
+
+  element.addEventListener('transitionend', transitionEndHandler); // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal
+
+  window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(() => {
+      element.style.setProperty('transition', transition);
+      transforms.forEach(({
+        property,
+        to = ''
+      }) => {
+        element.style.setProperty(property, to);
+      });
+    });
+  });
+}
+/**
+ * Provides the functionality of animating the stacked toasts when they appear and before they
+ * disappear.
+ *
+ * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from
+ * toast IDs to their top position. Then, on every single re-render, it compares the new DOM
+ * situation with the previously stored one in these mappings. With this information, it applies
+ * animations that smoothly transitions between both states.
+ */
+
+
+function useToastsAnimation() {
+  const refs = useMemo(() => new Map(), []);
+  const positions = useMemo(() => new Map(), []);
+  useLayoutEffect(() => {
+    const animations = [];
+    Array.from(refs.entries()).forEach(([id, element]) => {
+      if (!element) {
+        refs.delete(id);
+        return;
+      }
+
+      const prevTop = positions.get(id);
+      const {
+        top,
+        height
+      } = element.getBoundingClientRect();
+
+      if (typeof prevTop === 'number' && prevTop !== top) {
+        // Move animation
+        animations.push({
+          element,
+          transition: ENTRANCE_TRANSITION,
+          transforms: [{
+            property: 'transform',
+            from: "translateY(" + (prevTop - top) + "px)"
+          }]
+        });
+      } else if (typeof prevTop !== 'number') {
+        // Enter animation
+        animations.push({
+          element,
+          transition: ENTRANCE_TRANSITION,
+          transforms: [{
+            property: 'transform',
+            from: "translateY(" + height + "px)"
+          }, {
+            property: 'opacity',
+            from: '0'
+          }]
+        });
+      }
+
+      positions.set(id, element.getBoundingClientRect().top);
+    });
+    animations.forEach(({
+      element,
+      transforms,
+      transition
+    }) => {
+      animate({
+        element,
+        transforms,
+        transition
+      });
+    });
+  });
+  const animateRemove = useCallback(function animateRemove(id, onAnimationDone) {
+    const element = refs.get(id);
+
+    if (element) {
+      // Removal animation
+      animate({
+        element,
+        transforms: [{
+          property: 'opacity',
+          to: '0'
+        }],
+        transition: EXIT_TRANSITION,
+        done: onAnimationDone
+      });
+    }
+  }, [refs]);
+  const mappedRef = useCallback(id => ref => {
+    refs.set(id, ref);
+  }, [refs]);
+  return {
+    mappedRef,
+    animateRemove
+  };
+}
+
+export { ANIMATION_TIMEOUT, useToastsAnimation };
+//# sourceMappingURL=toast-animation.js.map

package/es/new-components/toast/toast-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-animation.js","sources":["../../../src/new-components/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["ANIMATION_TIMEOUT","ENTRANCE_TRANSITION","EXIT_TRANSITION","animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","transitionEndHandler","event","target","removeEventListener","clearTimeout","addEventListener","window","requestAnimationFrame","to","useToastsAnimation","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"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"}

package/es/new-components/toast/toast.module.css.js

@@ -0,0 +1,4 @@
+var modules_d11e18f0 = {"stackedToastsView":"_8e9f0a55","toastContainer":"_121b9429","slot":"_6a2a04c5"};
+
+export default modules_d11e18f0;
+//# sourceMappingURL=toast.module.css.js.map

package/es/new-components/toast/toast.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/new-components/toast/use-toasts.js

@@ -0,0 +1,195 @@
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Box } from '../box/box.js';
+import { Stack } from '../stack/stack.js';
+import styles from './toast.module.css.js';
+import { StaticToast } from './static-toast.js';
+import { Portal } from 'ariakit/portal';
+import { generateElementId } from '../common-helpers.js';
+import { useToastsAnimation } from './toast-animation.js';
+
+const _excluded = ["toastId"];
+/** @private */
+
+const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalToast({
+  message,
+  description,
+  icon,
+  action,
+  autoDismissDelay,
+  dismissLabel,
+  showDismissButton = true,
+  toastId,
+  onDismiss,
+  onRemoveToast
+}, ref) {
+  const [timeoutRunning, setTimeoutRunning] = React__default.useState(Boolean(autoDismissDelay));
+  const timeoutRef = React__default.useRef();
+  const startTimeout = React__default.useCallback(function startTimeout() {
+    setTimeoutRunning(true);
+  }, []);
+  const stopTimeout = React__default.useCallback(function stopTimeout() {
+    setTimeoutRunning(false);
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = undefined;
+  }, []);
+  React__default.useEffect(function setupAutoDismiss() {
+    if (!timeoutRunning || !autoDismissDelay) return;
+    timeoutRef.current = window.setTimeout(() => {
+      onRemoveToast(toastId);
+      onDismiss == null ? void 0 : onDismiss();
+    }, autoDismissDelay * 1000);
+    return stopTimeout;
+  }, [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning]);
+  return /*#__PURE__*/React__default.createElement(StaticToast, {
+    ref: ref,
+    message: message,
+    description: description,
+    icon: icon,
+    action: action,
+    onDismiss: showDismissButton ? () => {
+      onDismiss == null ? void 0 : onDismiss();
+      onRemoveToast(toastId);
+    } : undefined,
+    dismissLabel: dismissLabel,
+    // @ts-expect-error
+    onMouseEnter: stopTimeout,
+    onMouseLeave: startTimeout
+  });
+});
+const ToastsContext = /*#__PURE__*/React__default.createContext(() => () => undefined);
+/**
+ * Provides the state management and rendering of the toasts currently active.
+ *
+ * You need to render this near the top of your app components tree, in order to `useToasts`.
+ *
+ * @see useToasts
+ */
+
+function ToastsProvider({
+  children,
+  padding = 'large',
+  defaultAutoDismissDelay = 10
+  /* seconds */
+  ,
+  defaultDismissLabel = 'Close'
+}) {
+  const [toasts, setToasts] = React__default.useState([]);
+  const {
+    mappedRef,
+    animateRemove
+  } = useToastsAnimation();
+  const removeToast = React__default.useCallback(function onRemoveToast(toastId) {
+    animateRemove(toastId, () => {
+      setToasts(list => {
+        const index = list.findIndex(n => n.toastId === toastId);
+        if (index < 0) return list;
+        const copy = [...list];
+        copy.splice(index, 1);
+        return copy;
+      });
+    });
+  }, [animateRemove]);
+  const showToast = React__default.useCallback(function showToast(props) {
+    const toastId = generateElementId('toast');
+
+    const newToast = _objectSpread2(_objectSpread2({
+      autoDismissDelay: defaultAutoDismissDelay,
+      dismissLabel: defaultDismissLabel
+    }, props), {}, {
+      toastId
+    });
+
+    setToasts(list => [...list, newToast]);
+    return () => removeToast(toastId);
+  }, [defaultAutoDismissDelay, defaultDismissLabel, removeToast]);
+  return /*#__PURE__*/React__default.createElement(ToastsContext.Provider, {
+    value: showToast
+  }, children, /*#__PURE__*/React__default.createElement(Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
+    className: styles.stackedToastsView,
+    position: "fixed",
+    width: "full",
+    paddingX: padding,
+    paddingBottom: padding
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    space: "medium"
+  }, toasts.map(_ref => {
+    let {
+      toastId
+    } = _ref,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React__default.createElement(InternalToast, _objectSpread2({
+      key: toastId,
+      ref: mappedRef(toastId),
+      toastId: toastId,
+      onRemoveToast: removeToast
+    }, props));
+  })))));
+}
+/**
+ * Provides a function `showToast` that shows a new toast every time you call it.
+ *
+ * ```jsx
+ * const showToast = useToasts()
+ *
+ * <button onClick={() => showToast({ message: 'Hello' })}>
+ *   Say hello
+ * </button>
+ * ```
+ *
+ * All toasts fired via this function are rendered in a global fixed location, and stacked one on
+ * top of the other.
+ *
+ * When called, `showToast` returns a function that dismisses the toast when called.
+ *
+ * @see ToastsProvider
+ */
+
+
+function useToasts() {
+  return React__default.useContext(ToastsContext);
+}
+/**
+ * Adds a toast to be rendered, stacked alongside any other currently active toasts.
+ *
+ * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.
+ * This component is provided for convenience to render toasts in the markup, but it has some
+ * peculiarities, which are discussed below.
+ *
+ * Internally, this calls `showToast`. It is provided for two reasons:
+ *
+ * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that
+ *    toasts rendered in this way will be removed from view when the context where it is rendered
+ *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either
+ *    by the user or after a delay. They'll still be animated on their way out, though.
+ * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and
+ *    `autoDismissDelay={false}` it provides a way to show "permanent" toasts that only go away when
+ *    the component ceases to be rendered).
+ *
+ * This is useful for cases when the consumer wants to control when a toast is visible, and to keep
+ * it visible based on an app-specific condition.
+ *
+ * Something important to note about this component is that it triggers the toast based on the props
+ * passed when first rendered, and it does not update the toast if these props change on subsequent
+ * renders. In this sense, this is an imperative component, more than a descriptive one. This is
+ * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a
+ * toast imperatively, and you loose control over it. It remains rendered according to the props you
+ * first passed.
+ *
+ * @see useToasts
+ */
+
+
+function Toast(props) {
+  const showToast = useToasts();
+  const propsRef = React__default.useRef(props);
+  React__default.useEffect(() => {
+    const dismissToast = showToast(propsRef.current);
+    return dismissToast;
+  }, [showToast]);
+  return null;
+}
+
+export { Toast, ToastsProvider, useToasts };
+//# sourceMappingURL=use-toasts.js.map

package/es/new-components/toast/use-toasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toasts.js","sources":["../../../src/new-components/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(() => {\n                onRemoveToast(toastId)\n                onDismiss?.()\n            }, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning],\n    )\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={action}\n            onDismiss={\n                showDismissButton\n                    ? () => {\n                          onDismiss?.()\n                          onRemoveToast(toastId)\n                      }\n                    : undefined\n            }\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={styles.stackedToastsView}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","useEffect","setupAutoDismiss","window","setTimeout","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","removeToast","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import './color-picker.less';
 declare type NamedColor = {
     name: string;

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),o=e(require("classnames")),r=require("../tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const c=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],n=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=c}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:n(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:n(r)?r.color:r,colorIndex:l,onClick:a,tooltip:n(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:c,tooltip:n}){const a=t.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==c?void 0:c(o)},t.createElement("span",{className:"color_item--inner_ring"}));return n?t.createElement(r.Tooltip,{content:n},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=c,exports.ColorItem=i,exports.ColorPicker=a;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),o=(e(t),e(require("classnames"))),r=require("../tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const c=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],n=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=c}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:n(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:n(r)?r.color:r,colorIndex:l,onClick:a,tooltip:n(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:c,tooltip:n}){const a=t.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==c?void 0:c(o)},t.createElement("span",{className:"color_item--inner_ring"}));return n?t.createElement(r.Tooltip,{content:n},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=c,exports.ColorItem=i,exports.ColorPicker=a;
 //# sourceMappingURL=color-picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"qRAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,sCACgB,sBACZI,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EAtBnE5B,EAAY+B,YAAc,cAwB1BT,EAAUS,YAAc"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"yRAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,sCACgB,sBACZI,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EAtBnE5B,EAAY+B,YAAc,cAwB1BT,EAAUS,YAAc"}

package/lib/components/deprecated-button/deprecated-button.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import './deprecated-button.less';
 declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 /** @deprecated */

package/lib/components/deprecated-button/deprecated-button.js

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=t(require("react")),i=t(require("classnames")),l=require("../tooltip/tooltip.js");const a=["type","variant","size","loading","disabled","tooltip","onClick","children"],r=o.forwardRef((function(t,r){let{type:n="button",variant:s,size:u="default",loading:d=!1,disabled:c=!1,tooltip:p,onClick:b,children:f}=t,_=e.objectWithoutProperties(t,a);const j=i("reactist_button",s?"reactist_button--"+s:null,"default"!==u?"reactist_button--"+u:null,{"reactist_button--loading":d},_.className),m=o.createElement("button",e.objectSpread2(e.objectSpread2({},_),{},{ref:r,type:n,className:j,"aria-disabled":c||d,onClick:c||d?void 0:b}),f);return p?o.createElement(l.Tooltip,{content:p},m):m}));r.displayName="Button",r.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=r;
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=(t(o),t(require("classnames"))),l=require("../tooltip/tooltip.js");const a=["type","variant","size","loading","disabled","tooltip","onClick","children"],r=o.forwardRef((function(t,r){let{type:n="button",variant:s,size:u="default",loading:d=!1,disabled:c=!1,tooltip:p,onClick:b,children:f}=t,_=e.objectWithoutProperties(t,a);const j=i("reactist_button",s?"reactist_button--"+s:null,"default"!==u?"reactist_button--"+u:null,{"reactist_button--loading":d},_.className),m=o.createElement("button",e.objectSpread2(e.objectSpread2({},_),{},{ref:r,type:n,className:j,"aria-disabled":c||d,onClick:c||d?void 0:b}),f);return p?o.createElement(l.Tooltip,{content:p},m):m}));r.displayName="Button",r.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=r;
 //# sourceMappingURL=deprecated-button.js.map

package/lib/components/deprecated-button/deprecated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","forwardRef","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","reactist_button--loading","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"iXA4CMA,EAASC,EAAMC,YAA2C,WAY5DC,OAXAC,KACIA,EAAO,SADXC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,QAIIA,GAAU,EAJdC,SAKIA,GAAW,UACXC,EANJC,QAOIA,EAPJC,SAQIA,KACGC,iCAIP,MAAMC,EAAYC,EACd,kBACAT,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,CAAES,2BAA4BR,GAC9BK,EAAMC,WAGJG,EACFf,4DACQW,OACJT,IAAKA,EACLC,KAAMA,EACNS,UAAWA,kBACIL,GAAYD,EAC3BG,QAASF,GAAYD,OAAUU,EAAYP,IAE1CC,GAIT,OAAOF,EAAUR,gBAACiB,WAAQC,QAASV,GAAUO,GAAoBA,KAGrEhB,EAAOoB,YAAc,SAErBpB,EAAOqB,aAAe,CAClBf,KAAM,UACNC,SAAS,EACTC,UAAU"}
+{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","reactist_button--loading","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"qXA4CMA,EAASC,cAAiD,WAY5DC,OAXAC,KACIA,EAAO,SADXC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,QAIIA,GAAU,EAJdC,SAKIA,GAAW,UACXC,EANJC,QAOIA,EAPJC,SAQIA,KACGC,iCAIP,MAAMC,EAAYC,EACd,kBACAT,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,CAAES,2BAA4BR,GAC9BK,EAAMC,WAGJG,EACFd,4DACQU,OACJT,IAAKA,EACLC,KAAMA,EACNS,UAAWA,kBACIL,GAAYD,EAC3BG,QAASF,GAAYD,OAAUU,EAAYP,IAE1CC,GAIT,OAAOF,EAAUP,gBAACgB,WAAQC,QAASV,GAAUO,GAAoBA,KAGrEf,EAAOmB,YAAc,SAErBnB,EAAOoB,aAAe,CAClBf,KAAM,UACNC,SAAS,EACTC,UAAU"}

package/lib/components/deprecated-dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import './dropdown.less';
 declare type BoxProps = {
     onShowBody?: () => void;

package/lib/components/deprecated-dropdown/dropdown.js

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=t(require("react")),i=t(require("classnames")),s=t(require("react-dom")),n=require("../deprecated-button/index.js");const r=["children","onClick","tooltip","className"];class d extends o.Component{constructor(t,e){super(t,e),this._timeout=void 0,this._handleClickOutside=t=>{const e=s.findDOMNode(this);e&&!e.contains(t.target)?this._toggleShowBody():this.props.allowBodyInteractions||(this._timeout=setTimeout(()=>{this.state.showBody&&this._toggleShowBody()},100))},this._toggleShowBody=()=>{this.state.showBody?(this.props.onHideBody&&this.props.onHideBody(),document.removeEventListener("click",this._handleClickOutside,!0)):(this.props.onShowBody&&this.props.onShowBody(),document.addEventListener("click",this._handleClickOutside,!0)),this.setState({showBody:!this.state.showBody})},this._setPosition=t=>{if(t){const e=document.getElementById(this.props.scrolling_parent?this.props.scrolling_parent:"");if(e){const o=s.findDOMNode(this);if(!o)return;const i=s.findDOMNode(this).offsetTop,n=o.querySelector(".trigger");if(!n)return;const r=e.clientHeight+e.scrollTop-i-n.clientHeight<t.clientHeight;r!==this.state.top&&this.setState({top:r})}}},this.state={showBody:!1,top:t.top||!1},this._timeout=void 0}componentWillUnmount(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)}_getTriggerComponent(){var t;const e=null==(t=this.props.children)?void 0:t[0];return e?o.cloneElement(e,{onClick:this._toggleShowBody}):void 0}_getBodyComponent(){if(!this.state.showBody)return null;const{top:t}=this.state,{right:e=!1,children:s}=this.props,n={top:t,right:e,setPosition:this._setPosition},r=i({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),d=null==s?void 0:s[1],l="function"==typeof d?d(n):d?o.cloneElement(d,n):void 0;return o.createElement("div",{className:r,style:{position:"relative"}},l)}render(){const t=i("reactist_dropdown",this.props.className),{top:e}=this.state;return o.createElement("div",{style:{display:"inline-block"},className:t,"data-testid":"reactist-dropdown-box"},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())}}d.displayName=void 0,d.displayName="Dropdown.Box";const l=o.forwardRef((function(t,s){let{children:d,onClick:l,tooltip:a,className:c}=t,p=e.objectWithoutProperties(t,r);return o.createElement(n.default,e.objectSpread2(e.objectSpread2({},p),{},{className:i("trigger",c),onClick:function(t){t.preventDefault(),t.stopPropagation(),l&&l(t)},tooltip:a,ref:s}),d)}));function a({top:t,right:e,children:i,setPosition:s}){const n={position:"absolute",right:0,top:0};return t&&(n.top="auto",n.bottom=0),e&&(n.right="auto",n.left=0),o.createElement("div",{ref:s,style:n,className:"body",id:"reactist-dropdown-body","data-testid":"reactist-dropdown-body"},i)}l.displayName="Dropdown.Trigger",a.displayName="Dropdown.Body",exports.Dropdown={Box:d,Trigger:l,Body:a};
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=(t(o),t(require("classnames"))),s=t(require("react-dom")),n=require("../deprecated-button/index.js");const r=["children","onClick","tooltip","className"];class d extends o.Component{constructor(t,e){super(t,e),this._timeout=void 0,this._handleClickOutside=t=>{const e=s.findDOMNode(this);e&&!e.contains(t.target)?this._toggleShowBody():this.props.allowBodyInteractions||(this._timeout=setTimeout(()=>{this.state.showBody&&this._toggleShowBody()},100))},this._toggleShowBody=()=>{this.state.showBody?(this.props.onHideBody&&this.props.onHideBody(),document.removeEventListener("click",this._handleClickOutside,!0)):(this.props.onShowBody&&this.props.onShowBody(),document.addEventListener("click",this._handleClickOutside,!0)),this.setState({showBody:!this.state.showBody})},this._setPosition=t=>{if(t){const e=document.getElementById(this.props.scrolling_parent?this.props.scrolling_parent:"");if(e){const o=s.findDOMNode(this);if(!o)return;const i=s.findDOMNode(this).offsetTop,n=o.querySelector(".trigger");if(!n)return;const r=e.clientHeight+e.scrollTop-i-n.clientHeight<t.clientHeight;r!==this.state.top&&this.setState({top:r})}}},this.state={showBody:!1,top:t.top||!1},this._timeout=void 0}componentWillUnmount(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)}_getTriggerComponent(){var t;const e=null==(t=this.props.children)?void 0:t[0];return e?o.cloneElement(e,{onClick:this._toggleShowBody}):void 0}_getBodyComponent(){if(!this.state.showBody)return null;const{top:t}=this.state,{right:e=!1,children:s}=this.props,n={top:t,right:e,setPosition:this._setPosition},r=i({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),d=null==s?void 0:s[1],l="function"==typeof d?d(n):d?o.cloneElement(d,n):void 0;return o.createElement("div",{className:r,style:{position:"relative"}},l)}render(){const t=i("reactist_dropdown",this.props.className),{top:e}=this.state;return o.createElement("div",{style:{display:"inline-block"},className:t,"data-testid":"reactist-dropdown-box"},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())}}d.displayName=void 0,d.displayName="Dropdown.Box";const l=o.forwardRef((function(t,s){let{children:d,onClick:l,tooltip:a,className:c}=t,p=e.objectWithoutProperties(t,r);return o.createElement(n.default,e.objectSpread2(e.objectSpread2({},p),{},{className:i("trigger",c),onClick:function(t){t.preventDefault(),t.stopPropagation(),l&&l(t)},tooltip:a,ref:s}),d)}));function a({top:t,right:e,children:i,setPosition:s}){const n={position:"absolute",right:0,top:0};return t&&(n.top="auto",n.bottom=0),e&&(n.right="auto",n.left=0),o.createElement("div",{ref:s,style:n,className:"body",id:"reactist-dropdown-body","data-testid":"reactist-dropdown-body"},i)}l.displayName="Dropdown.Trigger",a.displayName="Dropdown.Body",exports.Dropdown={Box:d,Trigger:l,Body:a};
 //# sourceMappingURL=dropdown.js.map

package/lib/components/deprecated-dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n    onShowBody?: () => void\n    onHideBody?: () => void\n    allowBodyInteractions?: boolean\n    top?: boolean\n    right?: boolean\n    scrolling_parent?: string\n    children?: [\n        React.ReactElement<TriggerProps>,\n        React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n    ]\n    className?: string\n}\n\ntype BoxState = {\n    top: boolean\n    showBody: boolean\n}\n\nclass Box extends React.Component<React.PropsWithChildren<BoxProps>, BoxState> {\n    public static displayName: string\n\n    constructor(props: BoxProps, context: React.Context<unknown>) {\n        super(props, context)\n        this.state = {\n            showBody: false,\n            top: props.top || false,\n        }\n\n        this._timeout = undefined\n    }\n\n    componentWillUnmount() {\n        document.removeEventListener('click', this._handleClickOutside, true)\n        if (this._timeout) {\n            clearTimeout(this._timeout)\n        }\n    }\n    _timeout?: ReturnType<typeof setTimeout>\n\n    _handleClickOutside = (event: MouseEvent) => {\n        const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n        if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n            this._toggleShowBody()\n        else if (!this.props.allowBodyInteractions) {\n            // won't close when body interactions are allowed\n            this._timeout = setTimeout(() => {\n                if (this.state.showBody) {\n                    this._toggleShowBody()\n                }\n            }, 100)\n        }\n    }\n\n    _toggleShowBody = () => {\n        if (!this.state.showBody) {\n            // will show\n            if (this.props.onShowBody) this.props.onShowBody()\n            document.addEventListener('click', this._handleClickOutside, true)\n        } else {\n            // will hide\n            if (this.props.onHideBody) this.props.onHideBody()\n            document.removeEventListener('click', this._handleClickOutside, true)\n        }\n\n        this.setState({\n            showBody: !this.state.showBody,\n        })\n    }\n\n    _getTriggerComponent() {\n        const _trigger = this.props.children?.[0]\n        return _trigger\n            ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n            : undefined\n    }\n\n    // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n    _setPosition = (body: HTMLElement | null) => {\n        if (body) {\n            const scrollingParent = document.getElementById(\n                this.props.scrolling_parent ? this.props.scrolling_parent : '',\n            )\n\n            if (scrollingParent) {\n                const dropdown = ReactDOM.findDOMNode(this)\n                if (!dropdown) {\n                    return\n                }\n                const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n                    .offsetTop\n                const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n                if (!dropdownTrigger) {\n                    return\n                }\n                const dropdownTriggerHeight = dropdownTrigger.clientHeight\n                const dropdownBodyHeight = body.clientHeight\n\n                const scrollingParentHeight = scrollingParent.clientHeight\n                const scrollingParentOffset = scrollingParent.scrollTop\n\n                const bottomOffset =\n                    scrollingParentHeight +\n                    scrollingParentOffset -\n                    dropdownVerticalPosition -\n                    dropdownTriggerHeight\n\n                const top = bottomOffset < dropdownBodyHeight\n\n                if (top !== this.state.top) {\n                    this.setState({ top })\n                }\n            }\n        }\n    }\n\n    _getBodyComponent() {\n        if (!this.state.showBody) {\n            return null\n        }\n        const { top } = this.state\n        const { right = false, children } = this.props\n        const props = { top, right, setPosition: this._setPosition }\n\n        const className = classNames({\n            body_wrapper: true,\n            with_arrow: true,\n            top: top,\n            bottom: !top,\n        })\n\n        const body = children?.[1]\n\n        const contentMarkup =\n            typeof body === 'function'\n                ? body(props)\n                : body\n                ? React.cloneElement(body, props)\n                : undefined\n        return (\n            <div className={className} style={{ position: 'relative' }}>\n                {contentMarkup}\n            </div>\n        )\n    }\n\n    render() {\n        const className = classNames('reactist_dropdown', this.props.className)\n        const { top } = this.state\n\n        return (\n            <div\n                style={{ display: 'inline-block' }}\n                className={className}\n                data-testid=\"reactist-dropdown-box\"\n            >\n                {top && this._getBodyComponent()}\n                {this._getTriggerComponent()}\n                {!top && this._getBodyComponent()}\n            </div>\n        )\n    }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {\n    tooltip?: React.ReactNode\n    /**\n     * @private the onClick prop is not to be used externally\n     */\n    onClick?: NativeButtonProps['onClick']\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n    { children, onClick, tooltip, className, ...props },\n    ref,\n) {\n    function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n        event.preventDefault()\n        event.stopPropagation()\n        if (onClick) onClick(event)\n    }\n\n    return (\n        <Button\n            {...props}\n            className={classNames('trigger', className)}\n            onClick={handleClick}\n            tooltip={tooltip}\n            ref={ref}\n        >\n            {children}\n        </Button>\n    )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n    setPosition?: React.Ref<HTMLDivElement>\n    children?: React.ReactNode\n    top?: boolean\n    right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n    const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n    if (top) {\n        style.top = 'auto'\n        style.bottom = 0\n    }\n\n    if (right) {\n        style.right = 'auto'\n        style.left = 0\n    }\n\n    return (\n        <div\n            ref={setPosition}\n            style={style}\n            className=\"body\"\n            id=\"reactist-dropdown-body\"\n            data-testid=\"reactist-dropdown-body\"\n        >\n            {children}\n        </div>\n    )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n    Box,\n    Trigger,\n    Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","Component","constructor","props","context","super","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","this","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onHideBody","document","removeEventListener","onShowBody","addEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","top","clientHeight","scrollTop","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","_this$props$children","cloneElement","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","forwardRef","ref","tooltip","Button","preventDefault","stopPropagation","Body","left","id"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import * as React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n    onShowBody?: () => void\n    onHideBody?: () => void\n    allowBodyInteractions?: boolean\n    top?: boolean\n    right?: boolean\n    scrolling_parent?: string\n    children?: [\n        React.ReactElement<TriggerProps>,\n        React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n    ]\n    className?: string\n}\n\ntype BoxState = {\n    top: boolean\n    showBody: boolean\n}\n\nclass Box extends React.Component<React.PropsWithChildren<BoxProps>, BoxState> {\n    public static displayName: string\n\n    constructor(props: BoxProps, context: React.Context<unknown>) {\n        super(props, context)\n        this.state = {\n            showBody: false,\n            top: props.top || false,\n        }\n\n        this._timeout = undefined\n    }\n\n    componentWillUnmount() {\n        document.removeEventListener('click', this._handleClickOutside, true)\n        if (this._timeout) {\n            clearTimeout(this._timeout)\n        }\n    }\n    _timeout?: ReturnType<typeof setTimeout>\n\n    _handleClickOutside = (event: MouseEvent) => {\n        const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n        if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n            this._toggleShowBody()\n        else if (!this.props.allowBodyInteractions) {\n            // won't close when body interactions are allowed\n            this._timeout = setTimeout(() => {\n                if (this.state.showBody) {\n                    this._toggleShowBody()\n                }\n            }, 100)\n        }\n    }\n\n    _toggleShowBody = () => {\n        if (!this.state.showBody) {\n            // will show\n            if (this.props.onShowBody) this.props.onShowBody()\n            document.addEventListener('click', this._handleClickOutside, true)\n        } else {\n            // will hide\n            if (this.props.onHideBody) this.props.onHideBody()\n            document.removeEventListener('click', this._handleClickOutside, true)\n        }\n\n        this.setState({\n            showBody: !this.state.showBody,\n        })\n    }\n\n    _getTriggerComponent() {\n        const _trigger = this.props.children?.[0]\n        return _trigger\n            ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n            : undefined\n    }\n\n    // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n    _setPosition = (body: HTMLElement | null) => {\n        if (body) {\n            const scrollingParent = document.getElementById(\n                this.props.scrolling_parent ? this.props.scrolling_parent : '',\n            )\n\n            if (scrollingParent) {\n                const dropdown = ReactDOM.findDOMNode(this)\n                if (!dropdown) {\n                    return\n                }\n                const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n                    .offsetTop\n                const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n                if (!dropdownTrigger) {\n                    return\n                }\n                const dropdownTriggerHeight = dropdownTrigger.clientHeight\n                const dropdownBodyHeight = body.clientHeight\n\n                const scrollingParentHeight = scrollingParent.clientHeight\n                const scrollingParentOffset = scrollingParent.scrollTop\n\n                const bottomOffset =\n                    scrollingParentHeight +\n                    scrollingParentOffset -\n                    dropdownVerticalPosition -\n                    dropdownTriggerHeight\n\n                const top = bottomOffset < dropdownBodyHeight\n\n                if (top !== this.state.top) {\n                    this.setState({ top })\n                }\n            }\n        }\n    }\n\n    _getBodyComponent() {\n        if (!this.state.showBody) {\n            return null\n        }\n        const { top } = this.state\n        const { right = false, children } = this.props\n        const props = { top, right, setPosition: this._setPosition }\n\n        const className = classNames({\n            body_wrapper: true,\n            with_arrow: true,\n            top: top,\n            bottom: !top,\n        })\n\n        const body = children?.[1]\n\n        const contentMarkup =\n            typeof body === 'function'\n                ? body(props)\n                : body\n                ? React.cloneElement(body, props)\n                : undefined\n        return (\n            <div className={className} style={{ position: 'relative' }}>\n                {contentMarkup}\n            </div>\n        )\n    }\n\n    render() {\n        const className = classNames('reactist_dropdown', this.props.className)\n        const { top } = this.state\n\n        return (\n            <div\n                style={{ display: 'inline-block' }}\n                className={className}\n                data-testid=\"reactist-dropdown-box\"\n            >\n                {top && this._getBodyComponent()}\n                {this._getTriggerComponent()}\n                {!top && this._getBodyComponent()}\n            </div>\n        )\n    }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {\n    tooltip?: React.ReactNode\n    /**\n     * @private the onClick prop is not to be used externally\n     */\n    onClick?: NativeButtonProps['onClick']\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n    { children, onClick, tooltip, className, ...props },\n    ref,\n) {\n    function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n        event.preventDefault()\n        event.stopPropagation()\n        if (onClick) onClick(event)\n    }\n\n    return (\n        <Button\n            {...props}\n            className={classNames('trigger', className)}\n            onClick={handleClick}\n            tooltip={tooltip}\n            ref={ref}\n        >\n            {children}\n        </Button>\n    )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n    setPosition?: React.Ref<HTMLDivElement>\n    children?: React.ReactNode\n    top?: boolean\n    right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n    const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n    if (top) {\n        style.top = 'auto'\n        style.bottom = 0\n    }\n\n    if (right) {\n        style.right = 'auto'\n        style.left = 0\n    }\n\n    return (\n        <div\n            ref={setPosition}\n            style={style}\n            className=\"body\"\n            id=\"reactist-dropdown-body\"\n            data-testid=\"reactist-dropdown-body\"\n        >\n            {children}\n        </div>\n    )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n    Box,\n    Trigger,\n    Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","constructor","props","context","super","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","this","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onHideBody","document","removeEventListener","onShowBody","addEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","top","clientHeight","scrollTop","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","_this$props$children","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","ref","tooltip","Button","preventDefault","stopPropagation","Body","left","id"],"mappings":"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"}

package/lib/components/deprecated-input/input.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import './input.less';
 declare type InputProps = {
     /** Additional css class applied to the input. */

package/lib/components/deprecated-input/input.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=e(require("react")),a=e(require("classnames"));const s=t.forwardRef((e,s)=>{const u=a("reactist_input",e.className);return t.createElement("input",r.objectSpread2(r.objectSpread2({},e),{},{className:u,ref:s}))});s.displayName="Input",exports.Input=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=(e(t),e(require("classnames")));const s=t.forwardRef((e,s)=>{const u=a("reactist_input",e.className);return t.createElement("input",r.objectSpread2(r.objectSpread2({},e),{},{className:u,ref:s}))});s.displayName="Input",exports.Input=s;
 //# sourceMappingURL=input.js.map