@elliemae/ds-chat 3.0.0-next.2 → 3.0.0-next.3

package/dist/esm/exported-related/tile-button/styled.js

@@ -0,0 +1,218 @@
+import * as React from "react";
+import styled from "styled-components";
+import { css } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+const MIN_WIDTH_SIDEBAR = 48;
+const BUTTON_SIDEBAR_HEIGHT = 48;
+const StyledWrapperLeftBorder = styled(Grid)`
+  height: 100%;
+  width: 4px;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const StyledStatusBadge = styled.div`
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  top: 0;
+  background: ${(props) => {
+  switch (props.badgeColor) {
+    case "blue":
+      return props.theme.colors.brand[600];
+    case "green":
+      return props.theme.colors.success[900];
+    default:
+      return props.theme.colors.brand[600];
+  }
+}};
+  ${(props) => {
+  switch (props.badgePosition) {
+    case "left":
+      return "left: -4px;";
+    case "right":
+      return "right: -4px;";
+    default:
+      return "left: -4px;";
+  }
+}};
+  border-radius: 50%;
+  box-sizing: content-box;
+`;
+const StyledWrapperCentralContent = styled(Grid)`
+  width: 24px;
+  height: 40px;
+`;
+const StyledTileButtonIcon = styled(Grid)`
+  position: relative;
+  height: 24px;
+  width: 24px;
+  svg {
+    fill: ${(props) => props.theme.colors.neutral[500]};
+  }
+
+  &:focus {
+    svg {
+      fill: ${(props) => props.theme.colors.brand[800]};
+    }
+  }
+`;
+const StyledTileButtonLabel = styled.div`
+  width: 24px;
+  height: ${(props) => props.theme.space.xs};
+  text-transform: uppercase;
+  overflow: hidden;
+  text-align: center;
+  font-size: 13px;
+  color: ${(props) => props.theme.colors.neutral[600]};
+  line-height: 17px;
+`;
+const CloseButton = styled.button`
+  outline: none;
+  background: none;
+  height: 9px;
+  width: 9px;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  overflow: hidden;
+  padding: 0;
+  border: none;
+  span {
+    position: absolute;
+    left: -3px;
+    top: -4px;
+  }
+
+  &:focus,
+  &:hover {
+    svg {
+      fill: ${(props) => props.theme.colors.brand[600]};
+    }
+    &:after {
+      display: block;
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: solid 1px ${(props) => props.theme.colors.brand[600]};
+      border-radius: 2px;
+    }
+  }
+  cursor: pointer;
+`;
+const StyledTooltipV3ButtonWrapper = styled.div`
+  height: ${BUTTON_SIDEBAR_HEIGHT}px;
+  width: ${MIN_WIDTH_SIDEBAR}px;
+`;
+const StyledTileButton = styled.button`
+  outline: none;
+  background: transparent;
+  height: ${BUTTON_SIDEBAR_HEIGHT}px;
+  width: ${MIN_WIDTH_SIDEBAR}px;
+  position: relative;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  border-bottom: ${(props) => props.isHeader ? `1px solid  ${props.theme.colors.neutral["200"]}` : "none"};
+  &:focus,
+  &:hover,
+  &:active,
+  &:disabled {
+    background: ${(props) => props.theme.colors.neutral["080"]};
+    & ${StyledStatusBadge} {
+      border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
+      margin-top: -2px;
+      ${(props) => {
+  switch (props.badgePosition) {
+    case "left":
+      return "margin-left: -2px;";
+    case "right":
+      return "margin-right: -2px;";
+    default:
+      return "margin-left: -2px;";
+  }
+}};
+    }
+  }
+
+  &:focus,
+  &:hover {
+    & ${StyledWrapperLeftBorder} {
+      background: ${(props) => props.theme.colors.brand[800]};
+    }
+    & ${StyledTileButtonLabel} {
+      color: ${(props) => props.theme.colors.neutral[600]};
+    }
+
+    & svg {
+      fill: ${(props) => props.theme.colors.brand[800]};
+    }
+  }
+
+  &:active:not(:disabled) {
+    background: ${(props) => props.theme.colors.neutral["050"]};
+    & ${StyledWrapperLeftBorder} {
+      background: ${(props) => props.theme.colors.brand[600]};
+    }
+    & ${StyledTileButtonLabel} {
+      color: ${(props) => props.theme.colors.neutral[600]};
+      font-weight: 600;
+    }
+    & svg {
+      fill: ${(props) => props.theme.colors.brand[600]};
+    }
+    & ${StyledStatusBadge} {
+      border: 2px solid ${(props) => props.theme.colors.neutral["050"]};
+    }
+  }
+
+  &:disabled {
+    background: ${(props) => props.theme.colors.neutral["080"]};
+    ${StyledWrapperLeftBorder} {
+      background: ${(props) => props.theme.colors.neutral["400"]};
+    }
+    & ${StyledStatusBadge} {
+      background: ${(props) => props.theme.colors.neutral["500"]};
+      border: 2px solid ${(props) => props.theme.colors.neutral["080"]};
+    }
+    ${StyledTileButtonIcon} {
+      svg {
+        fill: ${(props) => props.theme.colors.neutral[400]};
+      }
+    }
+    ${StyledTileButtonLabel} {
+      color: ${(props) => props.theme.colors.neutral[400]};
+    }
+  }
+
+  ${(props) => {
+  if (props.selected) {
+    return css`
+        & ${StyledWrapperLeftBorder} {
+          background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};
+        }
+      `;
+  }
+  return "";
+}}
+`;
+const StyledWrapper = styled(Grid)`
+  height: 100%;
+  width: 100%;
+  position: relative;
+`;
+export {
+  CloseButton,
+  StyledStatusBadge,
+  StyledTileButton,
+  StyledTileButtonIcon,
+  StyledTileButtonLabel,
+  StyledTooltipV3ButtonWrapper,
+  StyledWrapper,
+  StyledWrapperCentralContent,
+  StyledWrapperLeftBorder
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/exported-related/tile-button/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/tile-button/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { TileButtonProps } from './props';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n\n// Buttons\nexport const StyledWrapperLeftBorder = styled(Grid)`\n  height: 100%;\n  width: 4px;\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\n\nexport const StyledStatusBadge = styled.div<Partial<TileButtonProps>>`\n  height: 8px;\n  width: 8px;\n  position: absolute;\n  top: 0;\n  background: ${(props) => {\n    switch (props.badgeColor) {\n      case 'blue':\n        return props.theme.colors.brand[600];\n      case 'green':\n        return props.theme.colors.success[900];\n      default:\n        return props.theme.colors.brand[600];\n    }\n  }};\n  ${(props) => {\n    switch (props.badgePosition) {\n      case 'left':\n        return 'left: -4px;';\n      case 'right':\n        return 'right: -4px;';\n      default:\n        return 'left: -4px;';\n    }\n  }};\n  border-radius: 50%;\n  box-sizing: content-box;\n`;\n\nexport const StyledWrapperCentralContent = styled(Grid)`\n  width: 24px;\n  height: 40px;\n`;\n\nexport const StyledTileButtonIcon = styled(Grid)`\n  position: relative;\n  height: 24px;\n  width: 24px;\n  svg {\n    fill: ${(props) => props.theme.colors.neutral[500]};\n  }\n\n  &:focus {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledTileButtonLabel = styled.div`\n  width: 24px;\n  height: ${(props) => props.theme.space.xs};\n  text-transform: uppercase;\n  overflow: hidden;\n  text-align: center;\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[600]};\n  line-height: 17px;\n`;\n\nexport const CloseButton = styled.button`\n  outline: none;\n  background: none;\n  height: 9px;\n  width: 9px;\n  position: absolute;\n  top: 1px;\n  right: 1px;\n  overflow: hidden;\n  padding: 0;\n  border: none;\n  span {\n    position: absolute;\n    left: -3px;\n    top: -4px;\n  }\n\n  &:focus,\n  &:hover {\n    svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    &:after {\n      display: block;\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: solid 1px ${(props) => props.theme.colors.brand[600]};\n      border-radius: 2px;\n    }\n  }\n  cursor: pointer;\n`;\n\n// MAIN WRAPPER\nexport const StyledTooltipV3ButtonWrapper = styled.div`\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n`;\nexport const StyledTileButton = styled.button<Partial<TileButtonProps>>`\n  outline: none;\n  background: transparent;\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  position: relative;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  border-bottom: ${(props) => (props.isHeader ? `1px solid  ${props.theme.colors.neutral['200']}` : 'none')};\n  &:focus,\n  &:hover,\n  &:active,\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n      margin-top: -2px;\n      ${(props) => {\n        switch (props.badgePosition) {\n          case 'left':\n            return 'margin-left: -2px;';\n          case 'right':\n            return 'margin-right: -2px;';\n          default:\n            return 'margin-left: -2px;';\n        }\n      }};\n    }\n  }\n\n  &:focus,\n  &:hover {\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[800]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n    }\n\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[800]};\n    }\n  }\n\n  &:active:not(:disabled) {\n    background: ${(props) => props.theme.colors.neutral['050']};\n    & ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[600]};\n      font-weight: 600;\n    }\n    & svg {\n      fill: ${(props) => props.theme.colors.brand[600]};\n    }\n    & ${StyledStatusBadge} {\n      border: 2px solid ${(props) => props.theme.colors.neutral['050']};\n    }\n  }\n\n  &:disabled {\n    background: ${(props) => props.theme.colors.neutral['080']};\n    ${StyledWrapperLeftBorder} {\n      background: ${(props) => props.theme.colors.neutral['400']};\n    }\n    & ${StyledStatusBadge} {\n      background: ${(props) => props.theme.colors.neutral['500']};\n      border: 2px solid ${(props) => props.theme.colors.neutral['080']};\n    }\n    ${StyledTileButtonIcon} {\n      svg {\n        fill: ${(props) => props.theme.colors.neutral[400]};\n      }\n    }\n    ${StyledTileButtonLabel} {\n      color: ${(props) => props.theme.colors.neutral[400]};\n    }\n  }\n\n  ${(props) => {\n    if (props.selected) {\n      return css`\n        & ${StyledWrapperLeftBorder} {\n          background: ${(nestedProps) => nestedProps.theme.colors.brand[600]};\n        }\n      `;\n    }\n    return '';\n  }}\n`;\n\nexport const StyledWrapper = styled(Grid)`\n  height: 100%;\n  width: 100%;\n  position: relative;\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+export * from "./exported-related";
+export * from "./react-desc-prop-types";
+export * from "./parts";
+export * from "./ChatDataTestids";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exported-related';\nexport * from './react-desc-prop-types';\nexport * from './parts';\nexport * from './ChatDataTestids';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/esm/parts/chat-composer/ChatContainerComposer.js

@@ -0,0 +1,150 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { PaperAirplane } from "@elliemae/ds-icons";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from "@elliemae/ds-props-helpers";
+import {
+  StyledChatContainerContentComposer,
+  StyledComposerInput,
+  StyledComposerButton,
+  StyledCounterArea,
+  StyledCounterErrorA11y
+} from "./styled";
+import { ChatComposerPropTypes, defaultPropsComposer } from "../../react-desc-prop-types";
+const ChatComposer = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsComposer);
+  useValidateTypescriptPropTypes(propsWithDefault, ChatComposerPropTypes);
+  const {
+    inputValue,
+    onChange,
+    onResize,
+    onSend,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    maxHeight = 300,
+    placeholder,
+    inputMaxLength,
+    maxLengthMessage,
+    ariaMaxLengthMessage,
+    buttonDisabled,
+    dataTestid,
+    actionRef
+  } = propsWithDefault;
+  const COMPOSER_MIN_HEIGHT = 32;
+  const input = React2.useRef();
+  const inputSize = React2.useRef();
+  const inputSend = React2.useRef();
+  const [height, setHeight] = React2.useState(32);
+  const internalMaxHeight = React2.useMemo(() => maxHeight - 24, [maxHeight]);
+  const [showScroll, setShowScroll] = React2.useState(true);
+  React2.useEffect(() => {
+    const newHeight = inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
+    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT)
+      onResize(newHeight);
+    setHeight(newHeight);
+    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);
+  }, [inputValue, internalMaxHeight, height, onResize]);
+  React2.useEffect(() => {
+    if (actionRef && actionRef.current) {
+      actionRef.current.focusToComposer = () => {
+        input.current.focus();
+      };
+      actionRef.current.focusToSend = () => {
+        inputSend.current.focus();
+      };
+    }
+  }, [actionRef]);
+  const handleChange = React2.useCallback((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
+  const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
+  const inputLength = String(inputValue || "").length;
+  const hasError = React2.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);
+  return /* @__PURE__ */ React2.createElement(StyledChatContainerContentComposer, {
+    rows: ["auto", "15px"],
+    maxHeight: `${maxHeight}px`,
+    "data-testid": dataTestid
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    cols: ["1fr", "24px"],
+    style: { height: heightProps.height },
+    justifyContent: "center",
+    alignItems: "flex-end",
+    gutter: "xxs"
+  }, /* @__PURE__ */ React2.createElement(StyledComposerInput, {
+    ref: input,
+    onChange: handleChange,
+    style: __spreadValues({}, heightProps),
+    value: inputValue,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    placeholder,
+    "aria-label": "Message to send",
+    "data-testid": "chat-composer-textarea",
+    name: "chat-composer-textarea",
+    id: "chat-composer-textarea"
+  }), /* @__PURE__ */ React2.createElement(Grid, {
+    height: "32px",
+    alignItems: "center"
+  }, /* @__PURE__ */ React2.createElement(StyledComposerButton, {
+    buttonType: "text",
+    icon: /* @__PURE__ */ React2.createElement(PaperAirplane, {
+      width: 18,
+      height: 18
+    }),
+    onClick: onSend,
+    size: "s",
+    disabled: !inputValue || buttonDisabled || hasError,
+    "data-testid": "chat-composer-send-button",
+    "aria-label": "Send",
+    innerRef: inputSend
+  }))), /* @__PURE__ */ React2.createElement(StyledComposerInput, {
+    ref: inputSize,
+    style: {
+      height: 32,
+      visibility: "hidden",
+      pointerEvents: "none",
+      position: "absolute",
+      top: 0,
+      width: input.current?.clientWidth
+    },
+    onChange: handleChange,
+    value: inputValue
+  }), /* @__PURE__ */ React2.createElement(Grid, {
+    cols: ["1fr", "24px"],
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gutter: "xxs",
+    pb: "xxs"
+  }, /* @__PURE__ */ React2.createElement(StyledCounterArea, {
+    hasError,
+    "data-testid": "composer-counter-area"
+  }, inputMaxLength && hasError ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledCounterErrorA11y, {
+    role: "alert"
+  }, ariaMaxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. `), maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `) : "", inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ""), /* @__PURE__ */ React2.createElement(Grid, null)));
+};
+ChatComposer.propTypes = ChatComposerPropTypes;
+const ChatComposerWithSchema = describe(ChatComposer);
+ChatComposerWithSchema.propTypes = ChatComposerPropTypes;
+export {
+  ChatComposer,
+  ChatComposerWithSchema
+};
+//# sourceMappingURL=ChatContainerComposer.js.map

package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-props-helpers';\nimport {\n  StyledChatContainerContentComposer,\n  StyledComposerInput,\n  StyledComposerButton,\n  StyledCounterArea,\n  StyledCounterErrorA11y,\n} from './styled';\n\nimport { DSChatT, ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n  useValidateTypescriptPropTypes<DSChatT.ComposerProps>(propsWithDefault, ChatComposerPropTypes);\n  const {\n    inputValue,\n    onChange,\n    onResize,\n    onSend,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    maxHeight = 300,\n    placeholder,\n    inputMaxLength,\n    maxLengthMessage,\n    ariaMaxLengthMessage,\n    buttonDisabled,\n    dataTestid,\n    actionRef,\n  } = propsWithDefault;\n\n  const COMPOSER_MIN_HEIGHT = 32;\n  const input = React.useRef<HTMLTextAreaElement>();\n  const inputSize = React.useRef<HTMLTextAreaElement>();\n  const inputSend = React.useRef<HTMLButtonElement>();\n  const [height, setHeight] = React.useState(32);\n  const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n  const [showScroll, setShowScroll] = React.useState(true);\n\n  React.useEffect(() => {\n    const newHeight =\n      inputSize.current?.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n    if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT) onResize(newHeight);\n    setHeight(newHeight);\n    setShowScroll(inputSize.current?.scrollHeight - inputSize.current?.clientHeight > 5);\n  }, [inputValue, internalMaxHeight, height, onResize]);\n\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.focusToComposer = () => {\n        input.current.focus();\n      };\n      actionRef.current.focusToSend = () => {\n        inputSend.current.focus();\n      };\n    }\n  }, [actionRef]);\n\n  const handleChange = React.useCallback(\n    (e) => {\n      onChange(e.target.value);\n    },\n    [onChange],\n  );\n  const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n  const inputLength = String(inputValue || '').length;\n  const hasError = React.useMemo(() => inputLength > inputMaxLength, [inputLength, inputMaxLength]);\n  return (\n    <StyledChatContainerContentComposer rows={['auto', '15px']} maxHeight={`${maxHeight}px`} data-testid={dataTestid}>\n      <Grid\n        cols={['1fr', '24px']}\n        style={{ height: heightProps.height }}\n        justifyContent=\"center\"\n        alignItems=\"flex-end\"\n        gutter=\"xxs\"\n      >\n        <StyledComposerInput\n          ref={input}\n          onChange={handleChange}\n          style={{ ...heightProps }}\n          value={inputValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          aria-label=\"Message to send\"\n          data-testid=\"chat-composer-textarea\"\n          name=\"chat-composer-textarea\"\n          id=\"chat-composer-textarea\"\n        />\n\n        <Grid height=\"32px\" alignItems=\"center\">\n          <StyledComposerButton\n            buttonType=\"text\"\n            icon={<PaperAirplane width={18} height={18} />}\n            onClick={onSend}\n            size=\"s\"\n            disabled={!inputValue || buttonDisabled || hasError}\n            data-testid=\"chat-composer-send-button\"\n            aria-label=\"Send\"\n            innerRef={inputSend}\n          />\n        </Grid>\n      </Grid>\n      <StyledComposerInput\n        ref={inputSize}\n        style={{\n          height: 32,\n          visibility: 'hidden',\n          pointerEvents: 'none',\n          position: 'absolute',\n          top: 0,\n          width: input.current?.clientWidth,\n        }}\n        onChange={handleChange}\n        value={inputValue}\n      />\n      <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n        <StyledCounterArea hasError={hasError} data-testid=\"composer-counter-area\">\n          {inputMaxLength && hasError ? (\n            <>\n              <StyledCounterErrorA11y role=\"alert\">\n                {ariaMaxLengthMessage ||\n                  `You have entered ${inputLength} characters and have exceeded the limit by ${\n                    inputLength - inputMaxLength\n                  }. Please limit to less than ${inputMaxLength} characters. `}\n              </StyledCounterErrorA11y>\n              {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n            </>\n          ) : (\n            ''\n          )}\n          {inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ''}\n        </StyledCounterArea>\n        <Grid />\n      </Grid>\n    </StyledChatContainerContentComposer>\n  );\n};\n\nChatComposer.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatComposer, ChatComposerWithSchema };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/parts/chat-composer/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { ChatComposer, ChatComposerWithSchema } from "./ChatContainerComposer";
+export {
+  ChatComposer,
+  ChatComposerWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/chat-composer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/parts/chat-composer/styled.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import styled from "styled-components";
+import { Grid } from "@elliemae/ds-grid";
+import { DSButton } from "@elliemae/ds-button";
+const StyledChatContainerContentComposer = styled(Grid)`
+  width: 100%;
+  min-height: 56px;
+  background: ${(props) => props.theme.colors.neutral["050"]};
+  padding: ${(props) => props.theme.space.xxs};
+  padding-bottom: 3px;
+  padding-top: 6px;
+  padding-left: ${(props) => props.theme.space.xs};
+  max-height: ${(props) => props.maxHeight};
+  border-top: 1px solid #cbcfd7;
+`;
+const StyledComposerInput = styled.textarea`
+  padding: ${(props) => props.theme.space.xxs};
+  resize: none;
+  min-height: 32px;
+  border-radius: 2px;
+  border: solid 1px #cbcfd7;
+  color: #25292f;
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height};
+  min-width: 244px;
+  overflow-y: auto;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+  transition: height 0.05s;
+  &:focus {
+    outline: none;
+    border: 1px solid ${(props) => props.theme.colors.brand[600]};
+    box-shadow: inset 0 0 0 1px #8cc2ed;
+    border-radius: 2px;
+  }
+`;
+const StyledComposerButton = styled(DSButton)`
+  &:disabled {
+    background: none;
+    svg {
+      fill: #5d6775;
+    }
+  }
+  svg {
+    fill: ${(props) => props.theme.colors.brand[600]};
+  }
+  &:focus {
+    background: ${(props) => props.theme.colors.brand[200]};
+  }
+`;
+const StyledCounterArea = styled(Grid)`
+  text-align: right;
+  font-size: 11px;
+  height: 15px;
+  align-items: center;
+  font-style: italic;
+  ${(props) => props.hasError ? `color:${props.theme.colors.danger[900]};` : ""}
+  position:relative;
+`;
+const StyledCounterErrorA11y = styled.span`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+export {
+  StyledChatContainerContentComposer,
+  StyledComposerButton,
+  StyledComposerInput,
+  StyledCounterArea,
+  StyledCounterErrorA11y
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/parts/chat-composer/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/styled.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButton } from '@elliemae/ds-button';\nimport { TextAreaProps } from './props';\n\n// Composer\nexport const StyledChatContainerContentComposer = styled(Grid)`\n  width: 100%;\n  min-height: 56px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  padding: ${(props) => props.theme.space.xxs};\n  padding-bottom: 3px;\n  padding-top: 6px;\n  padding-left: ${(props) => props.theme.space.xs};\n  max-height: ${(props) => props.maxHeight};\n  border-top: 1px solid #cbcfd7;\n`;\n\nexport const StyledComposerInput = styled.textarea<any>`\n  padding: ${(props) => props.theme.space.xxs};\n  resize: none;\n  min-height: 32px;\n  border-radius: 2px;\n  border: solid 1px #cbcfd7;\n  color: #25292f;\n  height: ${(props: TextAreaProps) => (typeof props.height === 'number' ? `${props.height}px` : props.height)};\n  min-width: 244px;\n  overflow-y: auto;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1;\n  transition: height 0.05s;\n  &:focus {\n    outline: none;\n    border: 1px solid ${(props) => props.theme.colors.brand[600]};\n    box-shadow: inset 0 0 0 1px #8cc2ed;\n    border-radius: 2px;\n  }\n`;\nexport const StyledComposerButton = styled(DSButton)`\n  &:disabled {\n    background: none;\n    svg {\n      fill: #5d6775;\n    }\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand[600]};\n  }\n  &:focus {\n    background: ${(props) => props.theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledCounterArea = styled(Grid)`\n  text-align: right;\n  font-size: 11px;\n  height: 15px;\n  align-items: center;\n  font-style: italic;\n  ${(props) => (props.hasError ? `color:${props.theme.colors.danger[900]};` : '')}\n  position:relative;\n`;\n\nexport const StyledCounterErrorA11y = styled.span`\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAIO,MAAM,qCAAqC,OAAO;AAAA;AAAA;AAAA,gBAGzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,aACzC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,kBAGxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,gBAC/B,CAAC,UAAU,MAAM;AAAA;AAAA;AAI1B,MAAM,sBAAsB,OAAO;AAAA,aAC7B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,CAAC,UAA0B,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAS9E,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKrD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,kBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,UAAW,MAAM,WAAW,SAAS,MAAM,MAAM,OAAO,OAAO,UAAU;AAAA;AAAA;AAIvE,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}