@helpdice/ui 2.0.9 → 2.1.3

package/dist/use-toasts/index.js

@@ -0,0 +1,204 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var defaultToastLayout = {
+  padding: '12px 16px',
+  margin: '8px 0',
+  width: '420px',
+  maxWidth: '90vw',
+  maxHeight: '75px',
+  placement: 'bottomRight'
+};
+var defaultParams = {
+  toasts: [],
+  toastLayout: defaultToastLayout,
+  updateToastLayout: function updateToastLayout(t) {
+    return t;
+  },
+  updateToasts: function updateToasts(t) {
+    return t;
+  },
+  lastUpdateToastId: null,
+  updateLastToastId: function updateLastToastId() {
+    return null;
+  }
+};
+var HUIContent = /*#__PURE__*/React.createContext(defaultParams);
+var useHUIContext = function useHUIContext() {
+  return React.useContext(HUIContent);
+};
+
+/* "use client" */
+
+var getId = function getId() {
+  return Math.random().toString(32).slice(2, 10);
+};
+
+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;
+  React.useEffect(function () {
+    if (!layout) return;
+    updateToastLayout(function () {
+      return layout ? _objectSpread2(_objectSpread2({}, defaultToastLayout), layout) : defaultToastLayout;
+    });
+  }, []);
+  var _cancel = function cancel(internalId) {
+    updateToasts(function (currentToasts) {
+      return currentToasts.map(function (item) {
+        if (item._internalIdent !== internalId) return item;
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          visible: false
+        });
+      });
+    });
+    updateLastToastId(function () {
+      return internalId;
+    });
+  };
+  var removeAll = function removeAll() {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        return _objectSpread2(_objectSpread2({}, 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 _objectSpread2(_objectSpread2({}, 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
+  };
+};
+
+exports.default = useToasts;

package/dist/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/dist/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/dist/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;

package/esm/AutoComplete/auto-complete.d.ts

@@ -27,7 +27,7 @@ interface Props {
 }
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
 export type AutoCompleteProps = Props & NativeAttrs & ReactElement;
-declare const AutoComplete: React.ForwardRefExoticComponent<Omit<Props & NativeAttrs & React.ReactElement<any, string | React.JSXElementConstructor<any>> & {
+declare const AutoComplete: React.ForwardRefExoticComponent<Omit<Props & NativeAttrs & React.ReactElement<unknown, string | React.JSXElementConstructor<any>> & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLInputElement> & {
     width?: string | number;

package/esm/Carousal/component/Indicator.d.ts

@@ -4,6 +4,7 @@ interface IndicatorProps {
     isSelected: boolean;
     index: number;
     label: string;
+    type: string;
 }
 declare const Indicator: React.FC<IndicatorProps>;
 export default Indicator;

package/esm/Carousal/component/Indicator.js

@@ -6,18 +6,61 @@ var Indicator = function Indicator(_ref) {
   var onClickHandler = _ref.onClickHandler,
     isSelected = _ref.isSelected,
     index = _ref.index,
-    label = _ref.label;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-    onClick: onClickHandler,
-    onKeyDown: onClickHandler,
-    value: index,
-    key: index,
-    role: "button",
-    tabIndex: 0,
-    "aria-label": "".concat(label, " ").concat(index + 1),
-    className: "jsx-3056554148" + " " + (klass.DOT(isSelected) || "")
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3056554148"
-  }, ".dot.jsx-3056554148{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-3056554148,.dot.jsx-3056554148:hover{opacity:1;}"));
+    label = _ref.label,
+    type = _ref.type;
+  switch (type) {
+    case 'line':
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
+        onClick: onClickHandler,
+        onKeyDown: onClickHandler,
+        value: index,
+        key: index,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "".concat(label, " ").concat(index + 1),
+        className: "jsx-110677664" + " " + (klass.DOT(isSelected) || "")
+      }), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "110677664"
+      }, ".dot.jsx-110677664{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:14px;height:2px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-110677664,.dot.jsx-110677664:hover{opacity:1;}"));
+    case 'square':
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
+        onClick: onClickHandler,
+        onKeyDown: onClickHandler,
+        value: index,
+        key: index,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "".concat(label, " ").concat(index + 1),
+        className: "jsx-157344968" + " " + (klass.DOT(isSelected) || "")
+      }), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "157344968"
+      }, ".dot.jsx-157344968{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-157344968,.dot.jsx-157344968:hover{opacity:1;}"));
+    case 'pill':
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
+        onClick: onClickHandler,
+        onKeyDown: onClickHandler,
+        value: index,
+        key: index,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "".concat(label, " ").concat(index + 1),
+        className: "jsx-2836895747" + " " + (klass.DOT(isSelected) || "")
+      }), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "2836895747"
+      }, ".dot.jsx-2836895747{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:25px;width:20px;height:5px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-2836895747,.dot.jsx-2836895747:hover{opacity:1;}"));
+    default:
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
+        onClick: onClickHandler,
+        onKeyDown: onClickHandler,
+        value: index,
+        key: index,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "".concat(label, " ").concat(index + 1),
+        className: "jsx-3056554148" + " " + (klass.DOT(isSelected) || "")
+      }), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "3056554148"
+      }, ".dot.jsx-3056554148{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-3056554148,.dot.jsx-3056554148:hover{opacity:1;}"));
+  }
 };
 export default Indicator;

package/esm/Carousal/component/Thumbs.d.ts

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 export interface Props {
     axis: 'horizontal' | 'vertical';
-    children: React.ReactChild[];
+    children: React.ReactNode[];
     labels: {
         leftArrow: string;
         rightArrow: string;

package/esm/Carousal/component/Thumbs.js

@@ -215,10 +215,10 @@ var Thumbs = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/React.createElement("li", _extends({}, thumbProps, {
           role: "button",
           tabIndex: 0,
-          className: "jsx-2129274269" + " " + (thumbProps && thumbProps.className != null && thumbProps.className || "")
+          className: "jsx-2625056898" + " " + (thumbProps && thumbProps.className != null && thumbProps.className || "")
         }), img, /*#__PURE__*/React.createElement(_JSXStyle, {
-          id: "2129274269"
-        }, ".thumb.jsx-2129274269{-webkit-transition:border 0.15s ease-in;transition:border 0.15s ease-in;display:inline-block;margin-right:6px;margin-bottom:0 !important;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px;}.thumb.jsx-2129274269:focus{border:3px solid #ccc;outline:none;}.thumb.selected.jsx-2129274269,.thumb.jsx-2129274269:hover{border:3px solid #0099ff;}.thumb.jsx-2129274269 img.jsx-2129274269{vertical-align:top;}"));
+          id: "2625056898"
+        }, ".thumb.jsx-2625056898{-webkit-transition:border 0.15s ease-in;transition:border 0.15s ease-in;display:inline-block;margin-right:6px;margin-bottom:0 !important;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px;}.thumb.jsx-2625056898:focus{border:3px solid #ccc;outline:none;}.thumb.selected.jsx-2625056898,.thumb.jsx-2625056898:hover{border:3px solid #0099ff;}.thumb.jsx-2625056898 img.jsx-2625056898{vertical-align:top;}"));
       });
     }
   }, {

package/esm/Carousal/component/index.d.ts

@@ -79,7 +79,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     selectItem: (state: Pick<CarouselState, "selectedItem" | "swiping">) => void;
     getInitialImage: () => HTMLImageElement;
     getVariableItemHeight: (position: number) => number | null;
-    renderItems(isClone?: boolean): React.JSX.Element[];
+    renderItems(isClone?: boolean): React.JSX.Element[] | null | undefined;
     renderControls(): React.JSX.Element | null;
     renderStatus(): React.JSX.Element | null;
     renderThumbs(): React.JSX.Element | null;

package/esm/Carousal/component/index.js

@@ -311,7 +311,8 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
       itemListStyle: {},
       slideStyle: {},
       selectedStyle: {},
-      prevStyle: {}
+      prevStyle: {},
+      indicator: 'dot'
     };
     _this.animationHandler = typeof props.animationHandler === 'function' && props.animationHandler || props.animationHandler === 'fade' && fadeAnimationHandler || slideAnimationHandler;
     _this.state = _extends({}, initState, _this.animationHandler(props, initState));
@@ -474,13 +475,13 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
           style: style
         };
         return /*#__PURE__*/React.createElement("li", _extends({}, slideProps, {
-          className: "jsx-2755164558" + " " + (slideProps && slideProps.className != null && slideProps.className || "")
+          className: "jsx-4120978495" + " " + (slideProps && slideProps.className != null && slideProps.className || "")
         }), _this3.props.renderItem(item, {
           isSelected: index === _this3.state.selectedItem,
           isPrevious: index === _this3.state.previousItem
         }), /*#__PURE__*/React.createElement(_JSXStyle, {
-          id: "2755164558"
-        }, ".slide.jsx-2755164558{min-width:100%;margin:0;position:relative;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}img.jsx-2755164558{width:100%;vertical-align:top;border:0;}iframe.jsx-2755164558{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0;}.legend.jsx-2755164558{-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;}.slide.jsx-2755164558 .legend.jsx-2755164558{opacity:1;}"));
+          id: "4120978495"
+        }, ".slide.jsx-4120978495{min-width:100%;margin:0;position:relative;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}img.jsx-4120978495{width:100%;vertical-align:top;border:0;}iframe.jsx-4120978495{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0;}.legend.jsx-4120978495{-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;}.slide.jsx-4120978495 .legend.jsx-4120978495{opacity:1;}"));
       });
     }
   }, {
@@ -491,14 +492,15 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
         showIndicators = _this$props.showIndicators,
         labels = _this$props.labels,
         renderIndicator = _this$props.renderIndicator,
-        children = _this$props.children;
+        children = _this$props.children,
+        indicator = _this$props.indicator;
       if (!showIndicators) {
         return null;
       }
       return /*#__PURE__*/React.createElement("ul", {
         className: "jsx-4140983776" + " " + "control-dots"
       }, Children.map(children, function (_, index) {
-        return renderIndicator && renderIndicator(_this4.changeItem(index), index === _this4.state.selectedItem, index, labels.item);
+        return renderIndicator && renderIndicator(_this4.changeItem(index), index === _this4.state.selectedItem, index, labels.item, indicator);
       }), /*#__PURE__*/React.createElement(_JSXStyle, {
         id: "4140983776"
       }, ".control-dots.jsx-4140983776{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1;}"));
@@ -547,8 +549,9 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
       // show right arrow
       var hasNext = canShowArrows && (this.state.selectedItem < Children.count(this.props.children) - 1 || this.props.infiniteLoop) || false;
       var itemsClone = this.renderItems(true);
-      var firstClone = itemsClone.shift();
-      var lastClone = itemsClone.pop();
+      var firstClone = itemsClone.shift(); // added not null
+      var lastClone = itemsClone.pop(); // added not null
+
       var swiperProps = {
         className: klass.SLIDER(true, this.state.swiping),
         onSwipeMove: this.onSwipeMove,
@@ -645,8 +648,9 @@ _defineProperty(Carousel, "defaultProps", {
       label: label
     });
   },
-  renderIndicator: function renderIndicator(onClickHandler, isSelected, index, label) {
+  renderIndicator: function renderIndicator(onClickHandler, isSelected, index, label, type) {
     return /*#__PURE__*/React.createElement(Indicator, {
+      type: type,
       onClickHandler: onClickHandler,
       isSelected: isSelected,
       index: index,
@@ -658,26 +662,28 @@ _defineProperty(Carousel, "defaultProps", {
   },
   renderThumbs: function renderThumbs(children) {
     var images = Children.map(children, function (item) {
-      var img = item;
+      var _item = item;
+      if (! /*#__PURE__*/React.isValidElement(_item)) return undefined;
 
-      // if the item is not an image, try to find the first image in the item's children.
-      if (item.type !== 'img') {
-        img = Children.toArray(item.props.children).find(function (children) {
-          return children.type === 'img';
-        });
-      }
-      if (!img) {
-        return undefined;
+      // Directly an <img> element
+      if (_item.type === 'img') {
+        return item;
       }
-      return img;
+
+      // If not <img>, search its children
+      var childArray = Children.toArray(_item.props.children);
+      var foundImg = childArray.find(function (child) {
+        return /*#__PURE__*/React.isValidElement(child) && child.type === 'img';
+      });
+      return foundImg !== null && foundImg !== void 0 ? foundImg : undefined;
     });
-    if (images.filter(function (image) {
+    if ((images === null || images === void 0 ? void 0 : images.filter(function (image) {
       return image;
-    }).length === 0) {
+    }).length) === 0) {
       console.warn("No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md");
       return [];
     }
-    return images;
+    return images !== null && images !== void 0 ? images : [];
   },
   statusFormatter: defaultStatusFormatter,
   selectedItem: 0,
@@ -691,6 +697,7 @@ _defineProperty(Carousel, "defaultProps", {
   transitionTime: 350,
   verticalSwipe: 'standard',
   width: '100%',
+  indicator: 'dot',
   animationHandler: 'slide',
   swipeAnimationHandler: slideSwipeAnimationHandler,
   stopSwipingHandler: slideStopSwipingHandler

package/esm/Carousal/component/types.d.ts

@@ -17,7 +17,7 @@ export interface CarouselProps {
     autoPlay?: boolean;
     centerMode?: boolean;
     centerSlidePercentage: number;
-    children?: React.ReactChild[];
+    children?: React.ReactNode[];
     className?: string;
     dynamicHeight?: boolean;
     emulateTouch?: boolean;
@@ -37,16 +37,17 @@ export interface CarouselProps {
     preventMovementUntilSwipeScrollTolerance: boolean;
     renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
     renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;
-    renderIndicator: (clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void, isSelected: boolean, index: number, label: string) => React.ReactNode;
+    renderIndicator: (clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void, isSelected: boolean, index: number, label: string, type: string) => React.ReactNode;
     renderItem: (item: React.ReactNode, options?: {
         isSelected: boolean;
         isPrevious: boolean;
     }) => React.ReactNode;
-    renderThumbs: (children: React.ReactChild[]) => React.ReactChild[];
+    renderThumbs: (children: React.ReactNode[]) => React.ReactNode[];
     selectedItem: number;
     showArrows: boolean;
     showStatus: boolean;
     showIndicators: boolean;
+    indicator: string;
     showThumbs: boolean;
     statusFormatter: (currentItem: number, total: number) => string;
     stopOnHover: boolean;

package/esm/Carousal/main.js

@@ -1,59 +1,42 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import(/* webpackChunkName: "carousel-component" */'./component').then(function (_ref) {
-  var Carousel = _ref["default"];
-  var DemoCarousel = function DemoCarousel() {
-    return /*#__PURE__*/React.createElement(Carousel, {
-      showArrows: true,
-      infiniteLoop: true,
-      autoPlay: true,
-      emulateTouch: true,
-      onClickItem: function onClickItem() {
-        var _console;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return (_console = console).log.apply(_console, ['onClickItem'].concat(args));
-      },
-      onChange: function onChange() {
-        var _console2;
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-        return (_console2 = console).log.apply(_console2, ['onChange'].concat(args));
-      },
-      onClickThumb: function onClickThumb() {
-        var _console3;
-        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-          args[_key3] = arguments[_key3];
-        }
-        return (_console3 = console).log.apply(_console3, ['onClickThumb'].concat(args));
-      }
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: "assets/1.jpeg"
-    }), /*#__PURE__*/React.createElement("p", {
-      className: "legend"
-    }, "Legend 1")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: "assets/2.jpeg"
-    }), /*#__PURE__*/React.createElement("p", {
-      className: "legend"
-    }, "Legend 2")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: "assets/3.jpeg"
-    }), /*#__PURE__*/React.createElement("p", {
-      className: "legend"
-    }, "Legend 3")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: "assets/4.jpeg"
-    }), /*#__PURE__*/React.createElement("p", {
-      className: "legend"
-    }, "Legend 4")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: "assets/5.jpeg"
-    }), /*#__PURE__*/React.createElement("p", {
-      className: "legend"
-    }, "Legend 5")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
-      src: "assets/6.jpeg"
-    }), /*#__PURE__*/React.createElement("p", {
-      className: "legend"
-    }, "Legend 6")));
-  };
-  ReactDOM.render(/*#__PURE__*/React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
-});
+// import React from 'react';
+// import ReactDOM from 'react-dom';
+
+// import(/* webpackChunkName: "carousel-component" */ './component').then(({ default: Carousel }) => {
+//     const DemoCarousel = () => (
+//         <Carousel
+//             showArrows
+//             infiniteLoop
+//             autoPlay
+//             emulateTouch
+//             onClickItem={(...args) => console.log('onClickItem', ...args)}
+//             onChange={(...args) => console.log('onChange', ...args)}
+//             onClickThumb={(...args) => console.log('onClickThumb', ...args)}
+//         >
+//             <div>
+//                 <img src="assets/1.jpeg" />
+//                 <p className="legend">Legend 1</p>
+//             </div>
+//             <div>
+//                 <img src="assets/2.jpeg" />
+//                 <p className="legend">Legend 2</p>
+//             </div>
+//             <div>
+//                 <img src="assets/3.jpeg" />
+//                 <p className="legend">Legend 3</p>
+//             </div>
+//             <div>
+//                 <img src="assets/4.jpeg" />
+//                 <p className="legend">Legend 4</p>
+//             </div>
+//             <div>
+//                 <img src="assets/5.jpeg" />
+//                 <p className="legend">Legend 5</p>
+//             </div>
+//             <div>
+//                 <img src="assets/6.jpeg" />
+//                 <p className="legend">Legend 6</p>
+//             </div>
+//         </Carousel>
+//     );
+//     ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
+// });