@livechat/design-system-react-components 1.0.0-alpha.23 → 1.0.0-alpha.25

package/dist/dsrc.es.js

@@ -686,62 +686,58 @@ const Button = (_g) => {
     className: styles$t[`${baseClass$D}__content`]
   }, children));
 };
-const btn = "lc-ButtonGroup-module__btn___bXPrU";
+const btn = "lc-SegmentedControl-module__btn___tfsvL";
 var styles$s = {
-  "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
+  "segmented-control": "lc-SegmentedControl-module__segmented-control___LHWSk",
   btn,
-  "btn--active": "lc-ButtonGroup-module__btn--active___VAc37",
-  "btn--compact": "lc-ButtonGroup-module__btn--compact___t1whe",
-  "btn--medium": "lc-ButtonGroup-module__btn--medium___XFRBP",
-  "btn--large": "lc-ButtonGroup-module__btn--large___OtNUz"
+  "btn--active": "lc-SegmentedControl-module__btn--active___Za-th",
+  "btn--compact": "lc-SegmentedControl-module__btn--compact___gcSwq",
+  "btn--medium": "lc-SegmentedControl-module__btn--medium___w3UzC",
+  "btn--large": "lc-SegmentedControl-module__btn--large___yHPw4"
 };
 function noop() {
 }
-const baseClass$C = "btn-group";
-const ButtonGroup = (_i) => {
-  var _j = _i, {
-    size = "medium",
-    fullWidth = false,
-    onIndexChange = noop,
-    className,
-    children,
-    currentIndex,
-    initialIndex = -1
-  } = _j, restProps = __objRest(_j, [
-    "size",
-    "fullWidth",
-    "onIndexChange",
-    "className",
-    "children",
-    "currentIndex",
-    "initialIndex"
-  ]);
+const baseClass$C = "segmented-control";
+const SegmentedControl = ({
+  size = "medium",
+  buttons,
+  className,
+  initialId,
+  currentId,
+  fullWidth = false,
+  onButtonClick = noop
+}) => {
   const mergedClassName = cx(styles$s[baseClass$C], className);
-  const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
-  const isControlled = typeof currentIndex === "number";
-  const _currentIndex = isControlled ? currentIndex : currentStateIndex;
-  const handleClick = (index2, event) => {
+  const [currentStateId, setCurrentStateId] = React.useState(() => initialId);
+  const isControlled = typeof currentId === "string";
+  React.useEffect(() => {
+    isControlled && setCurrentStateId(currentId);
+  }, [currentId]);
+  const handleClick = (id, event) => {
     if (!isControlled) {
-      setCurrentStateIndex(index2);
+      setCurrentStateId(id);
     }
-    onIndexChange(index2, event);
+    onButtonClick(id, event);
   };
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+  const buttonSet = buttons.map(({ id, label, loading, disabled }) => {
+    const activityStyles = id === currentStateId ? styles$s["btn--active"] : "";
+    const loadingStatus = id === currentStateId ? false : loading;
+    return /* @__PURE__ */ React.createElement(Button, {
+      key: id,
+      fullWidth,
+      loading: loadingStatus,
+      disabled,
+      kind: "secondary",
+      className: cx(styles$s["btn"], styles$s[`btn--${size}`], activityStyles),
+      onClick: (event) => {
+        handleClick(id, event);
+      }
+    }, label);
+  });
+  return /* @__PURE__ */ React.createElement("div", {
     role: "group",
     className: mergedClassName
-  }, restProps), React.Children.map(children, (child, i) => React.cloneElement(child, {
-    fullWidth,
-    size,
-    kind: "secondary",
-    type: "button",
-    onClick: (event) => {
-      handleClick(i, event);
-      if (child.props.onClick) {
-        child.props.onClick(event);
-      }
-    },
-    className: cx(styles$s["btn"], styles$s[`btn--${size}`], i === _currentIndex && styles$s["btn--active"])
-  })));
+  }, buttonSet);
 };
 const card = "lc-Card-module__card___GqMm2";
 const card__header = "lc-Card-module__card__header___0ptfD";
@@ -771,8 +767,8 @@ const baseClass$B = "card";
 const headerClass = `${baseClass$B}__header`;
 const headingClass = `${headerClass}__heading`;
 const actionsClass = `${baseClass$B}__actions`;
-const Card = (_k) => {
-  var _l = _k, {
+const Card = (_i) => {
+  var _j = _i, {
     alt,
     buttonsOptions = [],
     children,
@@ -781,7 +777,7 @@ const Card = (_k) => {
     expandableContent,
     src,
     title
-  } = _l, divProps = __objRest(_l, [
+  } = _j, divProps = __objRest(_j, [
     "alt",
     "buttonsOptions",
     "children",
@@ -845,11 +841,11 @@ var styles$q = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
 const baseClass$A = "field-description";
-const FieldDescription = (_m) => {
-  var _n = _m, {
+const FieldDescription = (_k) => {
+  var _l = _k, {
     children,
     className = ""
-  } = _n, props = __objRest(_n, [
+  } = _l, props = __objRest(_l, [
     "children",
     "className"
   ]);
@@ -880,8 +876,8 @@ var styles$p = {
   checkbox__helper
 };
 const baseClass$z = "checkbox";
-const Checkbox = React.forwardRef((_o, ref) => {
-  var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
+const Checkbox = React.forwardRef((_m, ref) => {
+  var _n = _m, { checked, disabled, children, description, className } = _n, restInputProps = __objRest(_n, ["checked", "disabled", "children", "description", "className"]);
   return /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$p[baseClass$z], className, {
       [styles$p[`${baseClass$z}--selected`]]: checked,
@@ -1476,11 +1472,11 @@ var styles$n = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
 const baseClass$v = "field-error";
-const FieldError = (_q) => {
-  var _r = _q, {
+const FieldError = (_o) => {
+  var _p = _o, {
     children,
     className = ""
-  } = _r, props = __objRest(_r, [
+  } = _p, props = __objRest(_p, [
     "children",
     "className"
   ]);
@@ -1498,15 +1494,15 @@ var styles$m = {
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
 };
 const baseClass$u = "field-group";
-const FieldGroup = (_s) => {
-  var _t = _s, {
+const FieldGroup = (_q) => {
+  var _r = _q, {
     className = "",
     children,
     description,
     error,
     inline,
     stretch
-  } = _t, props = __objRest(_t, [
+  } = _r, props = __objRest(_r, [
     "className",
     "children",
     "description",
@@ -1535,14 +1531,14 @@ var styles$l = {
   form__helper
 };
 const baseClass$t = "form";
-const Form = (_u) => {
-  var _v = _u, {
+const Form = (_s) => {
+  var _t = _s, {
     className,
     children,
     labelText,
     helperText,
     formFooter
-  } = _v, restProps = __objRest(_v, [
+  } = _t, restProps = __objRest(_t, [
     "className",
     "children",
     "labelText",
@@ -1627,13 +1623,13 @@ var styles$j = {
   "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
 };
 const baseClass$r = "form-group";
-const FormGroup = (_w) => {
-  var _x = _w, {
+const FormGroup = (_u) => {
+  var _v = _u, {
     className = "",
     children,
     labelText,
     helperText
-  } = _x, props = __objRest(_x, [
+  } = _v, props = __objRest(_v, [
     "className",
     "children",
     "labelText",
@@ -1666,8 +1662,8 @@ var styles$i = {
   "input--large": "lc-Input-module__input--large___jX5RW"
 };
 const baseClass$q = "input";
-const Input = React.forwardRef((_y, ref) => {
-  var _z = _y, { size = "medium", error = false, className } = _z, inputProps = __objRest(_z, ["size", "error", "className"]);
+const Input = React.forwardRef((_w, ref) => {
+  var _x = _w, { size = "medium", error = false, className } = _x, inputProps = __objRest(_x, ["size", "error", "className"]);
   return /* @__PURE__ */ React.createElement("input", __spreadValues({
     className: cx(className, styles$i[baseClass$q], styles$i[`${baseClass$q}--${size}`], {
       [styles$i[`${baseClass$q}--error`]]: error
@@ -1682,11 +1678,11 @@ var styles$h = {
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
 const baseClass$p = "link";
-const Link = (_A) => {
-  var _B = _A, {
+const Link = (_y) => {
+  var _z = _y, {
     bold = false,
     className = ""
-  } = _B, rest = __objRest(_B, [
+  } = _z, rest = __objRest(_z, [
     "bold",
     "className"
   ]);
@@ -1737,17 +1733,19 @@ const KeyCodes = {
   arrowDown: "ArrowDown"
 };
 const baseClass$o = "modal-base";
-const ModalBase = (_C) => {
-  var _D = _C, {
+const ModalBase = (_A) => {
+  var _B = _A, {
     children,
     className = "",
     onClose,
-    closeOnEscPress = true
-  } = _D, props = __objRest(_D, [
+    closeOnEscPress = true,
+    closeOnOverlayPress = true
+  } = _B, props = __objRest(_B, [
     "children",
     "className",
     "onClose",
-    "closeOnEscPress"
+    "closeOnEscPress",
+    "closeOnOverlayPress"
   ]);
   const mergedClassNames = cx(styles$g[baseClass$o], className);
   React.useEffect(() => {
@@ -1763,7 +1761,7 @@ const ModalBase = (_C) => {
     return () => document.removeEventListener("keyup", onKeyUp, true);
   }, [closeOnEscPress]);
   const onOverlayClick = (event) => {
-    if (event.target === event.currentTarget) {
+    if (closeOnOverlayPress && event.target === event.currentTarget) {
       onClose();
     }
   };
@@ -1783,14 +1781,14 @@ const ModalBase = (_C) => {
   }), children));
 };
 const baseClass$n = "action-modal";
-const ActionModal = (_E) => {
-  var _F = _E, {
+const ActionModal = (_C) => {
+  var _D = _C, {
     children,
     className = "",
     icon: icon2,
     heading,
     actions
-  } = _F, props = __objRest(_F, [
+  } = _D, props = __objRest(_D, [
     "children",
     "className",
     "icon",
@@ -1811,13 +1809,13 @@ const ActionModal = (_E) => {
   }, actions));
 };
 const baseClass$m = "modal";
-const Modal = (_G) => {
-  var _H = _G, {
+const Modal = (_E) => {
+  var _F = _E, {
     children,
     className = "",
     heading,
     footer
-  } = _H, props = __objRest(_H, [
+  } = _F, props = __objRest(_F, [
     "children",
     "className",
     "heading",
@@ -1870,8 +1868,8 @@ var styles$f = {
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
 const baseClass$l = "numeric-input";
-const NumericInput = (_I) => {
-  var _J = _I, {
+const NumericInput = (_G) => {
+  var _H = _G, {
     className,
     error,
     value,
@@ -1881,7 +1879,7 @@ const NumericInput = (_I) => {
     noControls,
     style,
     onChange
-  } = _J, restProps = __objRest(_J, [
+  } = _H, restProps = __objRest(_H, [
     "className",
     "error",
     "value",
@@ -2327,6 +2325,7 @@ const Popover = (props) => {
     children,
     className,
     placement,
+    flipOptions,
     isVisible = false
   } = props;
   const [visible, setVisibility] = React.useState(false);
@@ -2340,7 +2339,7 @@ const Popover = (props) => {
     update,
     placement: updatedPlacement
   } = useFloating({
-    middleware: [offset(4), flip()],
+    middleware: [offset(4), flip(flipOptions)],
     placement
   });
   React.useEffect(() => {
@@ -2435,13 +2434,13 @@ const SIZE_VALUE_FROM_SIZE = {
   large: 56
 };
 const baseClass$h = "progress-circle";
-const ProgressCircle = React.forwardRef((_K, ref) => {
-  var _L = _K, {
+const ProgressCircle = React.forwardRef((_I, ref) => {
+  var _J = _I, {
     status = "normal",
     progressValue,
     className,
     size = "medium"
-  } = _L, restProps = __objRest(_L, [
+  } = _J, restProps = __objRest(_J, [
     "status",
     "progressValue",
     "className",
@@ -2496,13 +2495,13 @@ var styles$a = {
   "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
 };
 const baseClass$g = "progress-bar";
-const ProgressBar = React.forwardRef((_M, ref) => {
-  var _N = _M, {
+const ProgressBar = React.forwardRef((_K, ref) => {
+  var _L = _K, {
     status = "normal",
     percent,
     size = "medium",
     className = ""
-  } = _N, restProps = __objRest(_N, [
+  } = _L, restProps = __objRest(_L, [
     "status",
     "percent",
     "size",
@@ -2622,8 +2621,8 @@ var styles$8 = {
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
 const baseClass$e = "radio-button";
-const RadioButton = React.forwardRef((_O, ref) => {
-  var _P = _O, { children, className = "", description, checked, disabled } = _P, props = __objRest(_P, ["children", "className", "description", "checked", "disabled"]);
+const RadioButton = React.forwardRef((_M, ref) => {
+  var _N = _M, { children, className = "", description, checked, disabled } = _N, props = __objRest(_N, ["children", "className", "description", "checked", "disabled"]);
   const mergedClassNames = cx(styles$8[baseClass$e], className, {
     [styles$8[`${baseClass$e}--selected`]]: checked,
     [styles$8[`${baseClass$e}--disabled`]]: disabled
@@ -2672,13 +2671,14 @@ const SearchInput = ({
   placeholder = "Search ...",
   size = "medium",
   value,
+  className,
   onChange
 }) => {
   const [searchValue, setSearchValue] = React.useState(value || "");
   const [isCollapsed, setIsCollapsed] = React.useState(true);
   const inputRef = React.useRef(null);
   const isCloseIconVisible = !!searchValue && !isDisabled && !isLoading;
-  const mergedClassNames = cx(styles$7[`${inputBaseClass}`], styles$7[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$7[`${inputBaseClass}--disabled`], isCollapsable && styles$7[`${inputBaseClass}--collapsable`], !isCollapsed && styles$7[`${inputBaseClass}--collapsable--open`]);
+  const mergedClassNames = cx(className, styles$7[`${inputBaseClass}`], styles$7[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$7[`${inputBaseClass}--disabled`], isCollapsable && styles$7[`${inputBaseClass}--collapsable`], !isCollapsed && styles$7[`${inputBaseClass}--collapsable--open`]);
   React.useEffect(() => {
     if (typeof value === "string") {
       setSearchValue(value);
@@ -2782,8 +2782,8 @@ var styles$6 = {
   switch__icon
 };
 const baseClass$c = "switch";
-const Switch = (_Q) => {
-  var _R = _Q, {
+const Switch = (_O) => {
+  var _P = _O, {
     className = "",
     defaultOn = false,
     disabled = false,
@@ -2792,8 +2792,9 @@ const Switch = (_Q) => {
     onChange = noop,
     size = "large",
     state = "regular",
-    innerRef
-  } = _R, props = __objRest(_R, [
+    innerRef,
+    ariaLabel
+  } = _P, props = __objRest(_P, [
     "className",
     "defaultOn",
     "disabled",
@@ -2802,7 +2803,8 @@ const Switch = (_Q) => {
     "onChange",
     "size",
     "state",
-    "innerRef"
+    "innerRef",
+    "ariaLabel"
   ]);
   const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
   React.useEffect(() => {
@@ -2836,7 +2838,7 @@ const Switch = (_Q) => {
     name,
     ref: innerRef,
     disabled: shouldBehaveAsDisabled,
-    "test-id": "foo"
+    "aria-label": ariaLabel
   }, props)), /* @__PURE__ */ React.createElement("span", {
     className: styles$6[`${baseClass$c}__container`]
   }, /* @__PURE__ */ React.createElement("span", {
@@ -2861,13 +2863,13 @@ var styles$5 = {
   "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
 };
 const baseClass$b = "tab";
-const Tab = (_S) => {
-  var _T = _S, {
+const Tab = (_Q) => {
+  var _R = _Q, {
     children,
     className,
     description,
     isSelected
-  } = _T, restProps = __objRest(_T, [
+  } = _R, restProps = __objRest(_R, [
     "children",
     "className",
     "description",
@@ -2937,8 +2939,8 @@ const getCustomTextClass = (customColor) => {
   }
   return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
 };
-const Tag = (_U) => {
-  var _V = _U, {
+const Tag = (_S) => {
+  var _T = _S, {
     className = "",
     children,
     dismissible = false,
@@ -2949,7 +2951,7 @@ const Tag = (_U) => {
     icon: icon2,
     avatar: avatar2,
     customColor
-  } = _V, restProps = __objRest(_V, [
+  } = _T, restProps = __objRest(_T, [
     "className",
     "children",
     "dismissible",
@@ -3123,6 +3125,7 @@ const tagSeparatorKeys = [
 ];
 const tagRemoveKeys = [KeyCodes.backspace, KeyCodes.delete];
 const TagInput = ({
+  id,
   tags,
   onChange,
   validator,
@@ -3187,6 +3190,7 @@ const TagInput = ({
     validator,
     size
   }, tag2)), /* @__PURE__ */ React.createElement("input", {
+    id,
     ref: inputRef,
     className: inputClassNames,
     placeholder,
@@ -3202,6 +3206,7 @@ const emailValidator = (value) => {
   return emailRegex.test(value);
 };
 const EmailTagInput = ({
+  id,
   tags,
   onChange,
   error,
@@ -3209,6 +3214,7 @@ const EmailTagInput = ({
   size
 }) => {
   return /* @__PURE__ */ React.createElement(TagInput, {
+    id,
     tags,
     error,
     onChange,
@@ -3265,15 +3271,15 @@ const iconConfig = {
   }
 };
 const baseClass$6 = "toast";
-const Toast = (_W) => {
-  var _X = _W, {
+const Toast = (_U) => {
+  var _V = _U, {
     action,
     className,
     children,
     removable,
     kind = "info",
     onClose
-  } = _X, divProps = __objRest(_X, [
+  } = _V, divProps = __objRest(_V, [
     "action",
     "className",
     "children",
@@ -3817,4 +3823,4 @@ const UserGuide = (props) => {
     })
   }), props.children)) : null;
 };
-export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };
+export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };