@helpdice/ui 2.0.7 → 2.1.3

package/esm/Form/types.d.ts

@@ -196,7 +196,7 @@ export interface SharedRenderProps<T> {
     /**
      * Field component to render. Can either be a string like 'select' or a component.
      */
-    component?: keyof JSX.IntrinsicElements | React.ComponentType<T | void>;
+    component?: keyof React.JSX.IntrinsicElements | React.ComponentType<T | void>;
     /**
      * Render prop (works like React router's <Route render={props =>} />)
      */
@@ -206,7 +206,7 @@ export interface SharedRenderProps<T> {
      */
     children?: (props: T) => React.ReactNode;
 }
-export type GenericFieldHTMLAttributes = JSX.IntrinsicElements['input'] | JSX.IntrinsicElements['select'] | JSX.IntrinsicElements['textarea'];
+export type GenericFieldHTMLAttributes = React.JSX.IntrinsicElements['input'] | React.JSX.IntrinsicElements['select'] | React.JSX.IntrinsicElements['textarea'];
 /** Field metadata */
 export interface FieldMetaProps<Value> {
     /** Value of the field */

package/esm/Grid/grid-container.d.ts

@@ -57,6 +57,10 @@ declare const GridContainer: React.ForwardRefExoticComponent<Props & import("./b
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -263,6 +267,8 @@ declare const GridContainer: React.ForwardRefExoticComponent<Props & import("./b
     onLostPointerCaptureCapture?: React.PointerEventHandler<any> | undefined;
     onScroll?: React.UIEventHandler<any> | undefined;
     onScrollCapture?: React.UIEventHandler<any> | undefined;
+    onScrollEnd?: React.UIEventHandler<any> | undefined;
+    onScrollEndCapture?: React.UIEventHandler<any> | undefined;
     onWheel?: React.WheelEventHandler<any> | undefined;
     onWheelCapture?: React.WheelEventHandler<any> | undefined;
     onAnimationStart?: React.AnimationEventHandler<any> | undefined;
@@ -271,8 +277,16 @@ declare const GridContainer: React.ForwardRefExoticComponent<Props & import("./b
     onAnimationEndCapture?: React.AnimationEventHandler<any> | undefined;
     onAnimationIteration?: React.AnimationEventHandler<any> | undefined;
     onAnimationIterationCapture?: React.AnimationEventHandler<any> | undefined;
+    onToggle?: React.ToggleEventHandler<any> | undefined;
+    onBeforeToggle?: React.ToggleEventHandler<any> | undefined;
+    onTransitionCancel?: React.TransitionEventHandler<any> | undefined;
+    onTransitionCancelCapture?: React.TransitionEventHandler<any> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<any> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<any> | undefined;
+    onTransitionRun?: React.TransitionEventHandler<any> | undefined;
+    onTransitionRunCapture?: React.TransitionEventHandler<any> | undefined;
+    onTransitionStart?: React.TransitionEventHandler<any> | undefined;
+    onTransitionStartCapture?: React.TransitionEventHandler<any> | undefined;
 } & {
     width?: string | number;
     height?: string | number;

package/esm/Grid/grid.d.ts

@@ -54,6 +54,10 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./basic-item
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -260,6 +264,8 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./basic-item
     onLostPointerCaptureCapture?: React.PointerEventHandler<any> | undefined;
     onScroll?: React.UIEventHandler<any> | undefined;
     onScrollCapture?: React.UIEventHandler<any> | undefined;
+    onScrollEnd?: React.UIEventHandler<any> | undefined;
+    onScrollEndCapture?: React.UIEventHandler<any> | undefined;
     onWheel?: React.WheelEventHandler<any> | undefined;
     onWheelCapture?: React.WheelEventHandler<any> | undefined;
     onAnimationStart?: React.AnimationEventHandler<any> | undefined;
@@ -268,8 +274,16 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./basic-item
     onAnimationEndCapture?: React.AnimationEventHandler<any> | undefined;
     onAnimationIteration?: React.AnimationEventHandler<any> | undefined;
     onAnimationIterationCapture?: React.AnimationEventHandler<any> | undefined;
+    onToggle?: React.ToggleEventHandler<any> | undefined;
+    onBeforeToggle?: React.ToggleEventHandler<any> | undefined;
+    onTransitionCancel?: React.TransitionEventHandler<any> | undefined;
+    onTransitionCancelCapture?: React.TransitionEventHandler<any> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<any> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<any> | undefined;
+    onTransitionRun?: React.TransitionEventHandler<any> | undefined;
+    onTransitionRunCapture?: React.TransitionEventHandler<any> | undefined;
+    onTransitionStart?: React.TransitionEventHandler<any> | undefined;
+    onTransitionStartCapture?: React.TransitionEventHandler<any> | undefined;
 } & {
     width?: string | number;
     height?: string | number;

package/esm/Rating/rating.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { NormalTypes } from '../utils/prop-types';
 export type RatingTypes = NormalTypes;
 declare const ratingCountTuple: [2, 3, 4, 5, 6, 7, 8, 9, 10];

package/esm/Select/select.js

@@ -146,13 +146,14 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
       _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
       optionChildren = _pickChildByProps2[1];
     return React.Children.map(optionChildren, function (child) {
-      if (! /*#__PURE__*/React.isValidElement(child)) return null;
-      var el = /*#__PURE__*/React.cloneElement(child); // { preventAllEvents: true }
+      var _child = child;
+      if (! /*#__PURE__*/React.isValidElement(_child)) return null;
+      var el = /*#__PURE__*/React.cloneElement(_child); // { preventAllEvents: true }
       if (!multiple) return el;
       return /*#__PURE__*/React.createElement(SelectMultipleValue, {
         disabled: disabled,
         onClear: clearable ? function () {
-          return updateValue(child.props.value);
+          return updateValue(_child.props.value);
         } : null
       }, el);
     });

package/esm/Table/table-types.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, JSX } from 'react';
 export type TableDataItemBase = Record<string, any>;
 export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
 export type TableAbstractColumn<TableDataItem> = {

package/esm/Text/child.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { NormalTypes } from '../utils/prop-types';
 export interface Props {
     tag: keyof JSX.IntrinsicElements;

package/esm/Textarea/textarea.js

@@ -36,7 +36,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var textareaRef = useRef(null);
   useImperativeHandle(ref, function () {
     return textareaRef.current;
-  });
+  }); // added not null
   var isControlledComponent = useMemo(function () {
     return value !== undefined;
   }, [value]);

package/esm/Tooltip/tooltip.js

@@ -38,7 +38,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
     customVisible = _ref.visible,
     props = _objectWithoutProperties(_ref, _excluded);
-  var timer = useRef();
+  var timer = useRef(undefined);
   var ref = useRef(null);
   var _useState = useState(initialVisible),
     _useState2 = _slicedToArray(_useState, 2),

package/esm/Tree/tree-help.d.ts

@@ -1,4 +1,4 @@
 import React, { ReactNode } from 'react';
-export declare const sortChildren: (children: ReactNode | undefined, folderComponentType: React.ElementType) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+export declare const sortChildren: (children: ReactNode | undefined, folderComponentType: React.ElementType) => (string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>)[];
 export declare const makeChildPath: (name: string, parentPath?: string) => string;
 export declare const stopPropagation: (event: React.MouseEvent) => void;

package/esm/Tree/tree-help.js

@@ -1,6 +1,8 @@
 import React from 'react';
 export var sortChildren = function sortChildren(children, folderComponentType) {
-  return React.Children.toArray(children).sort(function (a, b) {
+  return React.Children.toArray(children).sort(function (_a, _b) {
+    var a = _a;
+    var b = _b;
     if (! /*#__PURE__*/React.isValidElement(a) || ! /*#__PURE__*/React.isValidElement(b)) return 0;
     if (a.type !== b.type) return a.type !== folderComponentType ? 1 : -1;
     return "".concat(a.props.name).charCodeAt(0) - "".concat(b.props.name).charCodeAt(0);

package/esm/index.d.ts

@@ -128,3 +128,5 @@ export { Carousel } from './Carousal';
 export type { CarouselProps } from './Carousal';
 export { default as CurrencyInput } from './CurrencyInput';
 export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './CurrencyInput';
+export { default as useToasts } from './use-toasts';
+export type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts';

package/esm/index.js

@@ -86,4 +86,5 @@ export { default as Swipe } from './Swipe';
 // Carousel
 export { Carousel } from './Carousal';
 // Currency Input
-export { default as CurrencyInput } from './CurrencyInput';
+export { default as CurrencyInput } from './CurrencyInput';
+export { default as useToasts } from './use-toasts';

package/esm/use-toasts/helpers.d.ts

@@ -0,0 +1,17 @@
+import { Toast } from './use-toast';
+import React from 'react';
+import { NormalTypes } from '../utils/prop-types';
+export declare const makeToastActions: (actions: Toast["actions"], cancelHandle: () => void) => React.JSX.Element[] | null;
+export declare const getColors: (palette: any, type?: NormalTypes) => {
+    bgColor: string;
+    color: any;
+};
+declare const toastPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+export type ToastPlacement = typeof toastPlacement[number];
+export declare const isTopPlacement: (placement: ToastPlacement) => boolean;
+export declare const isLeftPlacement: (placement: ToastPlacement) => boolean;
+export declare const getTranslateByPlacement: (placement: ToastPlacement) => {
+    enter: string;
+    leave: string;
+};
+export {};

package/esm/use-toasts/helpers.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import Button from '../Button';
+// import { } from '@helpdice/theme'
+import { tuple } from '../utils/prop-types';
+export var makeToastActions = function makeToastActions(actions, cancelHandle) {
+  var handler = function handler(event, userHandler) {
+    userHandler && userHandler(event, cancelHandle);
+  };
+  if (!actions || !actions.length) return null;
+  return actions.map(function (action, index) {
+    return /*#__PURE__*/React.createElement(Button, {
+      auto: true,
+      scale: 1 / 3,
+      font: "13px",
+      color: action.passive ? 'default' : 'secondary',
+      key: "action-".concat(index),
+      onClick: function onClick(event) {
+        return handler(event, action.handler);
+      }
+    }, action.name);
+  });
+};
+export var getColors = function getColors(palette, type) {
+  var colors = {
+    "default": palette.background,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  var isDefault = !type || type === 'default';
+  if (isDefault) return {
+    bgColor: colors["default"],
+    color: palette.foreground
+  };
+  /**
+   * Prevent main color change in special types.
+   * The color will only follow the theme when it is in the default type.
+   */
+  return {
+    bgColor: colors[type],
+    color: 'white'
+  };
+};
+var toastPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+export var isTopPlacement = function isTopPlacement(placement) {
+  return "".concat(placement).toLowerCase().startsWith('top');
+};
+export var isLeftPlacement = function isLeftPlacement(placement) {
+  return "".concat(placement).toLowerCase().endsWith('left');
+};
+export var getTranslateByPlacement = function getTranslateByPlacement(placement) {
+  var translateInByPlacement = {
+    topLeft: 'translate(-60px, -60px)',
+    topRight: 'translate(60px, -60px)',
+    bottomLeft: 'translate(-60px, 60px)',
+    bottomRight: 'translate(60px, 60px)'
+  };
+  var translateOutByPlacement = {
+    topLeft: 'translate(-50px, 15px) scale(0.85)',
+    topRight: 'translate(50px, 15px) scale(0.85)',
+    bottomLeft: 'translate(-50px, -15px) scale(0.85)',
+    bottomRight: 'translate(50px, -15px) scale(0.85)'
+  };
+  return {
+    enter: translateInByPlacement[placement],
+    leave: translateOutByPlacement[placement]
+  };
+};

package/esm/use-toasts/index.d.ts

@@ -0,0 +1,3 @@
+import useToasts from './use-toast';
+export type { ToastAction, Toast, ToastTypes, ToastInput, ToastLayout } from './use-toast';
+export default useToasts;

package/esm/use-toasts/index.js

@@ -0,0 +1,2 @@
+import useToasts from './use-toast';
+export default useToasts;

package/esm/use-toasts/toast-container.js

@@ -0,0 +1,118 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import usePortal from '../utils/use-portal';
+import { useTheme, useClasses, useCurrentState } from '@helpdice/theme';
+import { useHUIContext } from '../utils/use-hd-ui-context';
+import ToastItem from './toast-item';
+import { isLeftPlacement, isTopPlacement } from './helpers';
+var ToastContainer = function ToastContainer() {
+  var theme = useTheme();
+  var portal = usePortal('toast');
+  var _useCurrentState = useCurrentState(false),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setHovering = _useCurrentState2[1],
+    hoveringRef = _useCurrentState2[2];
+  var _useHUIContext = useHUIContext(),
+    toasts = _useHUIContext.toasts,
+    updateToasts = _useHUIContext.updateToasts,
+    toastLayout = _useHUIContext.toastLayout,
+    lastUpdateToastId = _useHUIContext.lastUpdateToastId;
+  var memoizedLayout = useMemo(function () {
+    return toastLayout;
+  }, [toastLayout]);
+  var toastElements = useMemo(function () {
+    return toasts.map(function (toast) {
+      return /*#__PURE__*/React.createElement(ToastItem, {
+        toast: toast,
+        layout: memoizedLayout,
+        key: toast._internalIdent
+      });
+    });
+  }, [toasts, memoizedLayout]);
+  var classNames = useMemo(function () {
+    return useClasses('toasts', {
+      top: isTopPlacement(toastLayout.placement),
+      left: isLeftPlacement(toastLayout.placement)
+    });
+  }, [memoizedLayout]);
+  var hoverHandler = function hoverHandler(isHovering) {
+    setHovering(isHovering);
+    if (isHovering) {
+      return updateToasts(function (last) {
+        return last.map(function (toast) {
+          if (!toast.visible) return toast;
+          toast._timeout && window.clearTimeout(toast._timeout);
+          return _extends({}, toast, {
+            timeout: null
+          });
+        });
+      });
+    }
+    updateToasts(function (last) {
+      return last.map(function (toast, index) {
+        if (!toast.visible) return toast;
+        toast._timeout && window.clearTimeout(toast._timeout);
+        return _extends({}, toast, {
+          _timeout: function () {
+            var timer = window.setTimeout(function () {
+              toast.cancel();
+              window.clearTimeout(timer);
+            }, toast.delay + index * 100);
+            return timer;
+          }()
+        });
+      });
+    });
+  };
+  useEffect(function () {
+    var index = toasts.findIndex(function (r) {
+      return r._internalIdent === lastUpdateToastId;
+    });
+    var toast = toasts[index];
+    if (!toast || toast.visible || !hoveringRef.current) return;
+    var hasVisible = toasts.find(function (r, i) {
+      return i < index && r.visible;
+    });
+    if (hasVisible || !hoveringRef.current) return;
+    hoverHandler(false);
+  }, [toasts, lastUpdateToastId]);
+  useEffect(function () {
+    var timeout = null;
+    var timer = window.setInterval(function () {
+      if (toasts.length === 0) return;
+      timeout = window.setTimeout(function () {
+        var allInvisible = !toasts.find(function (r) {
+          return r.visible;
+        });
+        allInvisible && updateToasts(function () {
+          return [];
+        });
+        timeout && clearTimeout(timeout);
+      }, 350);
+    }, 5000);
+    return function () {
+      timer && clearInterval(timer);
+      timeout && clearTimeout(timeout);
+    };
+  }, [toasts]);
+  if (!portal) return null;
+  if (!toasts || toasts.length === 0) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    onMouseEnter: function onMouseEnter() {
+      return hoverHandler(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return hoverHandler(false);
+    },
+    className: _JSXStyle.dynamic([["622610754", [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (classNames || "")
+  }, toastElements, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "622610754",
+    dynamic: [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]
+  }, ".toasts.__jsx-style-dynamic-selector{position:fixed;width:auto;max-width:100%;right:".concat(theme.layout.gap, ";bottom:").concat(theme.layout.gap, ";z-index:2000;-webkit-transition:all 400ms ease;transition:all 400ms ease;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.top.__jsx-style-dynamic-selector{bottom:unset;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:").concat(theme.layout.gap, ";}.left.__jsx-style-dynamic-selector{right:unset;left:").concat(theme.layout.gap, ";}"))), portal);
+};
+export default ToastContainer;

package/esm/use-toasts/toast-item.js

@@ -0,0 +1,42 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import { useTheme, CssTransition } from '@helpdice/theme';
+import { makeToastActions, getColors, getTranslateByPlacement } from './helpers';
+var ToastItem = /*#__PURE__*/React.memo(function (_ref) {
+  var toast = _ref.toast,
+    layout = _ref.layout;
+  var theme = useTheme();
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, toast.type);
+    }, [theme.palette, toast.type]),
+    color = _useMemo.color,
+    bgColor = _useMemo.bgColor;
+  var isReactNode = typeof toast.text !== 'string';
+  var padding = layout.padding,
+    margin = layout.margin,
+    maxHeight = layout.maxHeight,
+    maxWidth = layout.maxWidth,
+    width = layout.width,
+    placement = layout.placement;
+  var _useMemo2 = useMemo(function () {
+      return getTranslateByPlacement(placement);
+    }, [placement]),
+    enter = _useMemo2.enter,
+    leave = _useMemo2.leave;
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "toast",
+    visible: toast.visible,
+    clearTime: 350
+  }, /*#__PURE__*/React.createElement("div", {
+    key: toast.id,
+    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "toast"
+  }, isReactNode ? toast.text : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "message"
+  }, toast.text), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "action"
+  }, makeToastActions(toast.actions, toast.cancel))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1407001838",
+    dynamic: [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]
+  }, ".toast.__jsx-style-dynamic-selector{width:".concat(width, ";max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";background-color:").concat(bgColor, ";color:").concat(color, ";border:0;border-radius:").concat(theme.layout.radius, ";opacity:1;box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);overflow:hidden;}.message.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;font-size:0.875em;display:-webkit-box;word-break:break-all;padding-right:").concat(theme.layout.gapHalf, ";overflow:hidden;max-height:100%;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1rem;}.toast-enter.__jsx-style-dynamic-selector{opacity:0;height:0;padding:0;margin:0;-webkit-transform:").concat(enter, ";-ms-transform:").concat(enter, ";transform:").concat(enter, ";}.toast-enter-active.__jsx-style-dynamic-selector{opacity:1;height:auto;margin:").concat(margin, ";padding:").concat(padding, ";-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}.toast-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);height:auto;margin:").concat(margin, ";padding:").concat(padding, ";}.toast-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(leave, ";-ms-transform:").concat(leave, ";transform:").concat(leave, ";}"))));
+});
+export default ToastItem;

package/esm/use-toasts/use-toast.d.ts

@@ -0,0 +1,40 @@
+import React, { CSSProperties } from 'react';
+import type { NormalTypes } from '../utils/prop-types';
+import { ToastPlacement } from '../use-toasts/helpers';
+export interface ToastAction {
+    name: string;
+    handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void;
+    passive?: boolean;
+}
+export type ToastTypes = NormalTypes;
+export type ToastLayout = {
+    padding?: CSSProperties['padding'];
+    margin?: CSSProperties['margin'];
+    width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
+    maxHeight?: CSSProperties['maxHeight'];
+    placement?: ToastPlacement;
+};
+export interface ToastInput {
+    text: string | React.ReactNode;
+    type?: ToastTypes;
+    id?: string;
+    delay?: number;
+    actions?: Array<ToastAction>;
+}
+export type ToastInstance = {
+    visible: boolean;
+    cancel: () => void;
+    _timeout: null | number;
+    _internalIdent: string;
+};
+export type Toast = Required<ToastInput> & ToastInstance;
+export type ToastHooksResult = {
+    toasts: Array<Toast>;
+    setToast: (toast: ToastInput) => void;
+    removeAll: () => void;
+    findToastOneByID: (ident: string) => Toast | undefined;
+    removeToastOneByID: (ident: string) => void;
+};
+declare const useToasts: (layout?: ToastLayout) => ToastHooksResult;
+export default useToasts;

package/esm/use-toasts/use-toast.js

@@ -0,0 +1,103 @@
+"use client";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useEffect } from 'react';
+import { defaultToastLayout, useHUIContext } from '../utils/use-hd-ui-context';
+import { getId } from '../utils/collections';
+var defaultToast = {
+  delay: 2000,
+  type: 'default'
+};
+var useToasts = function useToasts(layout) {
+  var _useHUIContext = useHUIContext(),
+    updateToasts = _useHUIContext.updateToasts,
+    toasts = _useHUIContext.toasts,
+    updateToastLayout = _useHUIContext.updateToastLayout,
+    updateLastToastId = _useHUIContext.updateLastToastId;
+  useEffect(function () {
+    if (!layout) return;
+    updateToastLayout(function () {
+      return layout ? _extends({}, defaultToastLayout, layout) : defaultToastLayout;
+    });
+  }, []);
+  var _cancel = function cancel(internalId) {
+    updateToasts(function (currentToasts) {
+      return currentToasts.map(function (item) {
+        if (item._internalIdent !== internalId) return item;
+        return _extends({}, item, {
+          visible: false
+        });
+      });
+    });
+    updateLastToastId(function () {
+      return internalId;
+    });
+  };
+  var removeAll = function removeAll() {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        return _extends({}, toast, {
+          visible: false
+        });
+      });
+    });
+  };
+  var findToastOneByID = function findToastOneByID(id) {
+    return toasts.find(function (t) {
+      return t.id === id;
+    });
+  };
+  var removeToastOneByID = function removeToastOneByID(id) {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        if (toast.id !== id) return toast;
+        return _extends({}, toast, {
+          visible: false
+        });
+      });
+    });
+  };
+  var setToast = function setToast(toast) {
+    var internalIdent = "toast-".concat(getId());
+    var delay = toast.delay || defaultToast.delay;
+    if (toast.id) {
+      var hasIdent = toasts.find(function (t) {
+        return t.id === toast.id;
+      });
+      if (hasIdent) {
+        throw new Error('Toast: Already have the same key: "ident"');
+      }
+    }
+    updateToasts(function (last) {
+      var newToast = {
+        delay: delay,
+        text: toast.text,
+        visible: true,
+        type: toast.type || defaultToast.type,
+        id: toast.id || internalIdent,
+        actions: toast.actions || [],
+        _internalIdent: internalIdent,
+        _timeout: window.setTimeout(function () {
+          _cancel(internalIdent);
+          if (newToast._timeout) {
+            window.clearTimeout(newToast._timeout);
+            newToast._timeout = null;
+          }
+        }, delay),
+        cancel: function cancel() {
+          return _cancel(internalIdent);
+        }
+      };
+      return [].concat(_toConsumableArray(last), [newToast]);
+    });
+  };
+  return {
+    toasts: toasts,
+    setToast: setToast,
+    removeAll: removeAll,
+    findToastOneByID: findToastOneByID,
+    removeToastOneByID: removeToastOneByID
+  };
+};
+export default useToasts;

package/esm/utils/collections.js

@@ -31,7 +31,8 @@ export var pickChild = function pickChild(children, targetChild) {
 export var pickChildByProps = function pickChildByProps(children, key, value) {
   var target = [];
   var isArray = Array.isArray(value);
-  var withoutPropChildren = React.Children.map(children, function (item) {
+  var withoutPropChildren = React.Children.map(children, function (_item) {
+    var item = _item;
     if (! /*#__PURE__*/React.isValidElement(item)) return null;
     if (!item.props) return item;
     if (isArray) {

package/esm/utils/use-drag.d.ts

@@ -4,5 +4,5 @@ export type DraggingEvent = {
     currentX: number;
 };
 export type DraggingHandler = (event: DraggingEvent) => void;
-declare const useDrag: (elementRef: RefObject<HTMLElement> | null, draggingHandler?: DraggingHandler, dragStartHandler?: DraggingHandler, dragEndHandler?: DraggingHandler) => void;
+declare const useDrag: (elementRef: RefObject<HTMLElement | null>, draggingHandler?: DraggingHandler, dragStartHandler?: DraggingHandler, dragEndHandler?: DraggingHandler) => void;
 export default useDrag;

package/esm/utils/use-hd-ui-context.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ToastLayout, Toast } from '@helpdice/theme';
+export declare const defaultToastLayout: Required<ToastLayout>;
+export type UpdateToastsFunction = (fn: (toasts: Array<Toast>) => Array<Toast>) => any;
+export type UpdateToastsLayoutFunction = (fn: (layout: Required<ToastLayout>) => Required<ToastLayout>) => any;
+export type UpdateToastsIDFunction = (fn: () => string | null) => any;
+export interface HUIContextParams {
+    toasts: Array<Toast>;
+    updateToasts: UpdateToastsFunction;
+    toastLayout: Required<ToastLayout>;
+    updateToastLayout: UpdateToastsLayoutFunction;
+    lastUpdateToastId: string | null;
+    updateLastToastId: UpdateToastsIDFunction;
+}
+export declare const HUIContent: React.Context<HUIContextParams>;
+export declare const useHUIContext: () => HUIContextParams;