botframework-webchat-fluent-theme 4.17.0-main.20240411.ff34969 → 4.17.0-main.20240416.e3f5401

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+declare const _default: React.MemoExoticComponent<({ children }: Readonly<{
+    children?: React.ReactNode;
+}>) => React.JSX.Element>;
+
+declare const testIds: {
+    sendBoxDropZone: string;
+    sendBoxSendButton: string;
+    sendBoxTextBox: string;
+    sendBoxTelephoneKeypadButton1: string;
+    sendBoxTelephoneKeypadButton2: string;
+    sendBoxTelephoneKeypadButton3: string;
+    sendBoxTelephoneKeypadButton4: string;
+    sendBoxTelephoneKeypadButton5: string;
+    sendBoxTelephoneKeypadButton6: string;
+    sendBoxTelephoneKeypadButton7: string;
+    sendBoxTelephoneKeypadButton8: string;
+    sendBoxTelephoneKeypadButton9: string;
+    sendBoxTelephoneKeypadButton0: string;
+    sendBoxTelephoneKeypadButtonStar: string;
+    sendBoxTelephoneKeypadButtonPound: string;
+    sendBoxTelephoneKeypadToolbarButton: string;
+    sendBoxUploadButton: string;
+};
+
+export { _default as FluentThemeProvider, testIds };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+declare const _default: React.MemoExoticComponent<({ children }: Readonly<{
+    children?: React.ReactNode;
+}>) => React.JSX.Element>;
+
+declare const testIds: {
+    sendBoxDropZone: string;
+    sendBoxSendButton: string;
+    sendBoxTextBox: string;
+    sendBoxTelephoneKeypadButton1: string;
+    sendBoxTelephoneKeypadButton2: string;
+    sendBoxTelephoneKeypadButton3: string;
+    sendBoxTelephoneKeypadButton4: string;
+    sendBoxTelephoneKeypadButton5: string;
+    sendBoxTelephoneKeypadButton6: string;
+    sendBoxTelephoneKeypadButton7: string;
+    sendBoxTelephoneKeypadButton8: string;
+    sendBoxTelephoneKeypadButton9: string;
+    sendBoxTelephoneKeypadButton0: string;
+    sendBoxTelephoneKeypadButtonStar: string;
+    sendBoxTelephoneKeypadButtonPound: string;
+    sendBoxTelephoneKeypadToolbarButton: string;
+    sendBoxUploadButton: string;
+};
+
+export { _default as FluentThemeProvider, testIds };

package/dist/index.js

@@ -124,7 +124,7 @@ var styles = {
     // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
     // color: 'inherit',
     border: "solid 1px var(--webchat-colorNeutralStroke1)",
-    color: "var(--webchat-colorNeutralForeground1)",
+    color: "var(--webchat-colorGray200)",
     fontWeight: "var(--webchat-fontWeightSemibold)",
     cursor: "pointer",
     display: "flex",
@@ -143,7 +143,7 @@ var styles = {
   },
   "webchat__telephone-keypad__button__ruby": {
     // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
-    color: "var(--webchat-colorGray160)",
+    color: "var(--webchat-colorGray190)",
     fontSize: 10
   },
   "webchat__telephone-keypad__button__text": {
@@ -403,9 +403,10 @@ var styles3 = {
     "--webchat-colorCompoundBrandForeground1Hover": "var(--colorCompoundBrandForeground1Hover, #02729c)",
     "--webchat-colorCompoundBrandForeground1Pressed": "var(--colorCompoundBrandForeground1Pressed, #01678c)",
     "--webchat-colorStatusDangerForeground1": "var(--colorStatusDangerForeground1, #b10e1c)",
-    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts
+    // https://github.com/microsoft/fluentui/blob/master/packages/theme/src/colors/FluentColors.ts
     "--webchat-colorGray30": "var(--colorGray30, #edebe9)",
     "--webchat-colorGray160": "var(--colorGray160, #323130)",
+    "--webchat-colorGray190": "var(--colorGray190, #201f1e)",
     "--webchat-colorGray200": "var(--colorGray200, #1b1a19)",
     // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts
     "--webchat-borderRadiusSmall": "var(--borderRadiusSmall, 2px)",
@@ -589,20 +590,6 @@ var import_botframework_webchat_component2 = require("botframework-webchat-compo
 var import_classnames3 = __toESM(require("classnames"));
 var import_react15 = __toESM(require("react"));
 
-// src/components/suggestedActions/private/computeSuggestedActionText.ts
-function computeSuggestedActionText(cardAction) {
-  const { title } = cardAction;
-  const { type, value } = cardAction;
-  if (type === "messageBack") {
-    return title || cardAction.displayText;
-  } else if (title) {
-    return title;
-  } else if (typeof value === "string") {
-    return value;
-  }
-  return JSON.stringify(value);
-}
-
 // src/components/suggestedActions/SuggestedAction.tsx
 var import_botframework_webchat_component = require("botframework-webchat-component");
 var import_classnames2 = __toESM(require("classnames"));
@@ -637,20 +624,19 @@ var AccessibleButton = (0, import_react13.forwardRef)(
 var AccessibleButton_default = (0, import_react13.memo)(AccessibleButton);
 
 // src/components/suggestedActions/SuggestedAction.tsx
-var { useScrollToEnd, useStyleSet, usePerformCardAction, useFocus, useSuggestedActions, useDisabled } = import_botframework_webchat_component.hooks;
+var { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = import_botframework_webchat_component.hooks;
 var styles5 = {
   "webchat-fluent__suggested-action": {
+    alignItems: "center",
     background: "transparent",
     border: "1px solid var(--webchat-colorBrandStroke2)",
     borderRadius: "8px",
     cursor: "pointer",
-    fontSize: "12px",
-    lineHeight: "14px",
-    padding: "6px 8px 4px",
-    textAlign: "start",
     display: "flex",
+    fontSize: "12px",
     gap: "4px",
-    alignItems: "center",
+    padding: "4px 8px 4px",
+    textAlign: "start",
     transition: "all .15s ease-out",
     "@media (hover: hover)": {
       '&:not([aria-disabled="true"]):hover': {
@@ -663,15 +649,12 @@ var styles5 = {
       color: "var(--webchat-colorBrandForeground2Pressed)"
     },
     '&[aria-disabled="true"]': {
-      color: " var(--webchat-colorNeutralForegroundDisabled)",
+      color: "var(--webchat-colorNeutralForegroundDisabled)",
       cursor: "not-allowed"
     }
   },
   "webchat-fluent__suggested-action__image": {
-    width: "1em",
-    height: "1em",
-    fontSize: "20px",
-    translate: "0 -1px"
+    height: "12px"
   }
 };
 function SuggestedAction({
@@ -722,22 +705,44 @@ function SuggestedAction({
 }
 var SuggestedAction_default = (0, import_react14.memo)(SuggestedAction);
 
+// src/components/suggestedActions/private/computeSuggestedActionText.ts
+function computeSuggestedActionText(cardAction) {
+  const { title } = cardAction;
+  const { type, value } = cardAction;
+  if (type === "messageBack") {
+    return title || cardAction.displayText;
+  } else if (title) {
+    return title;
+  } else if (typeof value === "string") {
+    return value;
+  }
+  return JSON.stringify(value);
+}
+
 // src/components/suggestedActions/index.tsx
-var { useLocalizer: useLocalizer2, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component2.hooks;
+var { useLocalizer: useLocalizer2, useStyleOptions, useStyleSet: useStyleSet2, useSuggestedActions: useSuggestedActions2 } = import_botframework_webchat_component2.hooks;
 var styles6 = {
   "webchat-fluent__suggested-actions": {
     alignItems: "flex-end",
     alignSelf: "flex-end",
     display: "flex",
-    flexDirection: "column",
     gap: "8px",
     "&:not(:empty)": {
       paddingBlockEnd: "8px",
       paddingInlineStart: "4px"
+    },
+    "&.webchat-fluent__suggested-actions--flow": {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "flex-end"
+    },
+    "&.webchat-fluent__suggested-actions--stacked": {
+      flexDirection: "column"
     }
   }
 };
-function SuggestedActionStackedContainer(props) {
+function SuggestedActionStackedOrFlowContainer(props) {
+  const [{ suggestedActionLayout }] = useStyleOptions();
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet2();
   const classNames = useStyles(styles6);
   return /* @__PURE__ */ import_react15.default.createElement(
@@ -746,7 +751,15 @@ function SuggestedActionStackedContainer(props) {
       "aria-label": props["aria-label"],
       "aria-live": "polite",
       "aria-orientation": "vertical",
-      className: (0, import_classnames3.default)(classNames["webchat-fluent__suggested-actions"], suggestedActionsStyleSet + "", props.className),
+      className: (0, import_classnames3.default)(
+        classNames["webchat-fluent__suggested-actions"],
+        suggestedActionsStyleSet + "",
+        {
+          "webchat-fluent__suggested-actions--flow": suggestedActionLayout === "flow",
+          "webchat-fluent__suggested-actions--stacked": suggestedActionLayout !== "flow"
+        },
+        props.className
+      ),
       role: "toolbar"
     },
     !!props.children && !!import_react15.default.Children.count(props.children) && props.children
@@ -777,7 +790,7 @@ function SuggestedActions() {
     );
   });
   return /* @__PURE__ */ import_react15.default.createElement(
-    SuggestedActionStackedContainer,
+    SuggestedActionStackedOrFlowContainer,
     {
       "aria-label": localize("SUGGESTED_ACTIONS_LABEL_ALT"),
       className: classNames["webchat-fluent__suggested-actions"]
@@ -855,7 +868,7 @@ var styles7 = {
       color: "var(--webchat-colorCompoundBrandForeground1Pressed)"
     },
     '&[aria-disabled="true"]': {
-      color: " var(--webchat-colorNeutralForegroundDisabled)",
+      color: "var(--webchat-colorNeutralForegroundDisabled)",
       cursor: "not-allowed"
     }
   },
@@ -911,7 +924,7 @@ var ToolbarSeparator = (0, import_react17.memo)(
 ToolbarSeparator.displayName = "ToolbarSeparator";
 
 // src/components/sendbox/AddAttachmentButton.tsx
-var { useLocalizer: useLocalizer3, useStyleOptions } = import_botframework_webchat_api2.hooks;
+var { useLocalizer: useLocalizer3, useStyleOptions: useStyleOptions2 } = import_botframework_webchat_api2.hooks;
 var styles8 = {
   "webchat-fluent__sendbox__add-attachment": {
     display: "grid"
@@ -927,7 +940,7 @@ function AddAttachmentButton(props) {
   const inputRef = (0, import_react18.useRef)(null);
   const classNames = useStyles(styles8);
   const localize = useLocalizer3();
-  const [{ uploadAccept, uploadMultiple }] = useStyleOptions();
+  const [{ uploadAccept, uploadMultiple }] = useStyleOptions2();
   const onFilesAddedRef = (0, import_use_ref_from4.useRefFrom)(props.onFilesAdded);
   const handleClick = (0, import_react18.useCallback)(() => inputRef.current?.click(), [inputRef]);
   const handleFileChange = (0, import_react18.useCallback)(
@@ -1108,7 +1121,7 @@ var styles11 = {
       width: "8px"
     },
     "&::-webkit-scrollbar-track": {
-      backgroundColor: " var(--webchat-colorNeutralBackground5)",
+      backgroundColor: "var(--webchat-colorNeutralBackground5)",
       borderRadius: "16px"
     },
     "&::-webkit-scrollbar-thumb": {
@@ -1214,7 +1227,7 @@ function useUniqueId(prefix) {
 }
 
 // src/components/sendbox/index.tsx
-var { useStyleOptions: useStyleOptions2, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component4.hooks;
+var { useStyleOptions: useStyleOptions3, useMakeThumbnail, useLocalizer: useLocalizer7, useSendBoxAttachments, useSendMessage } = import_botframework_webchat_component4.hooks;
 var styles12 = {
   "webchat-fluent__sendbox": {
     color: "var(--webchat-colorNeutralForeground1)",
@@ -1273,7 +1286,7 @@ function SendBox(props) {
   const inputRef = (0, import_react26.useRef)(null);
   const [message, setMessage] = (0, import_react26.useState)("");
   const [attachments, setAttachments] = useSendBoxAttachments();
-  const [{ maxMessageLength }] = useStyleOptions2();
+  const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions3();
   const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
   const classNames = useStyles(styles12);
   const localize = useLocalizer7();
@@ -1281,7 +1294,7 @@ function SendBox(props) {
   const makeThumbnail = useMakeThumbnail();
   const errorMessageId = useUniqueId("webchat-fluent__sendbox__error-message-id");
   const [errorRef, errorMessage] = useSubmitError_default({ message, attachments });
-  const [telephoneKeypadShown, setTelephoneKeypadShown] = useShown();
+  const [telephoneKeypadShown] = useShown();
   const attachmentsRef = (0, import_use_ref_from6.useRefFrom)(attachments);
   const messageRef = (0, import_use_ref_from6.useRefFrom)(message);
   const handleSendBoxClick = (0, import_react26.useCallback)(
@@ -1328,11 +1341,9 @@ function SendBox(props) {
     [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
   );
   const handleTelephoneKeypadButtonClick = (0, import_react26.useCallback)(
-    (dtmf) => {
-      sendMessage(`/DTMF ${dtmf}`);
-      setTelephoneKeypadShown(false);
-    },
-    [sendMessage, setTelephoneKeypadShown]
+    // TODO: We need more official way of sending DTMF.
+    (dtmf) => sendMessage(`/DTMF ${dtmf}`),
+    [sendMessage]
   );
   const aria = {
     "aria-invalid": "false",
@@ -1368,7 +1379,7 @@ function SendBox(props) {
       })
     },
     `${message.length}/${maxMessageLength}`
-  ), /* @__PURE__ */ import_react26.default.createElement(Toolbar, null, /* @__PURE__ */ import_react26.default.createElement(TelephoneKeypadToolbarButton_default, null), /* @__PURE__ */ import_react26.default.createElement(AddAttachmentButton_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react26.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react26.default.createElement(
+  ), /* @__PURE__ */ import_react26.default.createElement(Toolbar, null, !hideTelephoneKeypadButton && /* @__PURE__ */ import_react26.default.createElement(TelephoneKeypadToolbarButton_default, null), !hideUploadButton && /* @__PURE__ */ import_react26.default.createElement(AddAttachmentButton_default, { onFilesAdded: handleAddFiles }), /* @__PURE__ */ import_react26.default.createElement(ToolbarSeparator, null), /* @__PURE__ */ import_react26.default.createElement(
     ToolbarButton,
     {
       "aria-label": localize("TEXT_INPUT_SEND_BUTTON_ALT"),
@@ -1391,7 +1402,7 @@ var FluentThemeProvider = ({ children }) => /* @__PURE__ */ import_react27.defau
 var FluentThemeProvider_default = (0, import_react27.memo)(FluentThemeProvider);
 
 // src/index.ts
-(0, import_inject_meta_tag.injectMetaTag)("botframework-webchat-fluent-theme:version", "4.17.0-main.20240411.ff34969");
+(0, import_inject_meta_tag.injectMetaTag)("botframework-webchat-fluent-theme:version", "4.17.0-main.20240416.e3f5401");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FluentThemeProvider,