@elliemae/ds-chat-sidebar 3.70.0-next.1 → 3.70.0-next.11

package/dist/esm/DSChatSidebarDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSChatSidebarDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSChatSidebarName = 'DSChatsidebar';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,oBAAoB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// Legacy file \u2014 preserved as a shim. Source of truth is now `./constants/index.ts`.\nexport { DSChatSidebarName } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,yBAAyB;",
   "names": []
 }

package/dist/esm/SideBarChat.js

@@ -1,19 +1,27 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
-import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import {
+  describe,
+  useValidateTypescriptPropTypes,
+  useMemoMergePropsWithDefault,
+  useOwnerProps,
+  useGetGlobalAttributes,
+  useGetXstyledProps
+} from "@elliemae/ds-props-helpers";
 import { MenuCollapse, MenuExpand } from "@elliemae/ds-icons";
 import { TileButton } from "@elliemae/ds-chat-tile";
 import { StyledSideBarContainer, StyledSideBarButtonsContainer } from "./styled.js";
 import { SidebarButton } from "./sidebar-button/SidebarButton.js";
 import { defaultProps, chatSidebarProps } from "./react-desc-prop-types.js";
-import { DSChatSidebarName } from "./DSChatSidebarDefinitions.js";
-import { DSChatSidebarDataTestIds } from "./DSChatSidebarDataTestIds.js";
+import { CHAT_SIDEBAR_DATA_TESTID, DSChatSidebarName } from "./constants/index.js";
 const FooterChat = ({
   expanded,
   onFooterClose,
   onFooterExpand,
-  footerButtonExtraProps
+  footerButtonExtraProps,
+  getOwnerProps,
+  getOwnerPropsArguments
 }) => /* @__PURE__ */ jsx(
   SidebarButton,
   {
@@ -21,12 +29,18 @@ const FooterChat = ({
     Icon: !expanded ? MenuCollapse : MenuExpand,
     onClick: expanded ? onFooterClose : onFooterExpand,
     "aria-pressed": expanded,
-    "aria-label": footerButtonExtraProps["aria-label"]
+    "aria-label": footerButtonExtraProps["aria-label"],
+    getOwnerProps,
+    getOwnerPropsArguments
   }
 );
 const SideBarChat = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, chatSidebarProps, DSChatSidebarName);
+  const globalAttrs = useGetGlobalAttributes(propsWithDefault);
+  const { wrap: wrapStripped, ...globalProps } = globalAttrs;
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
   const {
     sidebarItems,
     expanded,
@@ -50,33 +64,50 @@ const SideBarChat = (props) => {
       actionRef.current.listRef = listRef;
     }
   }, [sidebarItems, expanded, actionRef, listRef]);
-  return /* @__PURE__ */ jsxs(StyledSideBarContainer, { rows: ["1fr", "auto"], "data-testid": DSChatSidebarDataTestIds.ROOT, children: [
-    /* @__PURE__ */ jsx(StyledSideBarButtonsContainer, { children: sidebarItems.map((p) => /* @__PURE__ */ jsx(
-      TileButton,
-      {
-        innerRef: registerReference,
-        ...p,
-        selected: selectedItem === p.dsId,
-        tooltipPlacement,
-        disableTooltip: enableTooltipWhenIsClosed ? false : !expanded
-      },
-      p.dsId
-    )) }),
-    /* @__PURE__ */ jsx(
-      FooterChat,
-      {
-        expanded,
-        onFooterClose,
-        onFooterExpand,
-        footerButtonExtraProps
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    StyledSideBarContainer,
+    {
+      ...globalProps,
+      ...xstyledProps,
+      rows: ["1fr", "auto"],
+      "data-testid": CHAT_SIDEBAR_DATA_TESTID.ROOT,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsx(StyledSideBarButtonsContainer, { getOwnerProps, getOwnerPropsArguments, children: sidebarItems.map((p) => /* @__PURE__ */ jsx(
+          TileButton,
+          {
+            innerRef: registerReference,
+            ...p,
+            selected: selectedItem === p.dsId,
+            tooltipPlacement,
+            disableTooltip: enableTooltipWhenIsClosed ? false : !expanded
+          },
+          p.dsId
+        )) }),
+        /* @__PURE__ */ jsx(
+          FooterChat,
+          {
+            expanded,
+            onFooterClose,
+            onFooterExpand,
+            footerButtonExtraProps,
+            getOwnerProps,
+            getOwnerPropsArguments
+          }
+        )
+      ]
+    }
+  );
 };
 SideBarChat.displayName = DSChatSidebarName;
 const SideBarChatWithSchema = describe(SideBarChat);
 SideBarChatWithSchema.propTypes = chatSidebarProps;
+const DSChatSidebar = SideBarChat;
+const DSChatSidebarWithSchema = SideBarChatWithSchema;
 export {
+  DSChatSidebar,
+  DSChatSidebarWithSchema,
   SideBarChat,
   SideBarChatWithSchema
 };

package/dist/esm/SideBarChat.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/SideBarChat.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { TileButton } from '@elliemae/ds-chat-tile';\nimport { StyledSideBarContainer, StyledSideBarButtonsContainer } from './styled.js';\nimport { SidebarButton } from './sidebar-button/SidebarButton.js';\nimport type { DSChatSidebarT } from './react-desc-prop-types.js';\nimport { defaultProps, chatSidebarProps } from './react-desc-prop-types.js';\nimport { DSChatSidebarName } from './DSChatSidebarDefinitions.js';\nimport { DSChatSidebarDataTestIds } from './DSChatSidebarDataTestIds.js';\n\nconst FooterChat = ({\n  expanded,\n  onFooterClose,\n  onFooterExpand,\n  footerButtonExtraProps,\n}: Pick<DSChatSidebarT.DefaultProps, 'expanded' | 'onFooterClose' | 'onFooterExpand' | 'footerButtonExtraProps'>) => (\n  <SidebarButton\n    dsId=\"sidebar_footer\"\n    Icon={!expanded ? MenuCollapse : MenuExpand}\n    onClick={expanded ? onFooterClose : onFooterExpand}\n    aria-pressed={expanded}\n    aria-label={footerButtonExtraProps['aria-label']}\n  />\n);\n\nconst SideBarChat: React.ComponentType<DSChatSidebarT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatSidebarT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, chatSidebarProps, DSChatSidebarName);\n  const {\n    sidebarItems,\n    expanded,\n    onFooterClose,\n    onFooterExpand,\n    selectedItem,\n    footerButtonExtraProps,\n    tooltipPlacement,\n    enableTooltipWhenIsClosed,\n    actionRef,\n  } = propsWithDefault;\n  const { current: listRef } = React.useRef<{ [key: string]: HTMLElement }>({});\n  const registerReference = React.useCallback(\n    (ref: HTMLElement) => {\n      if (ref?.dataset?.key) listRef[ref.dataset.key] = ref;\n    },\n    [listRef],\n  );\n  React.useEffect(() => {\n    if (actionRef?.current?.listRef) {\n      actionRef.current.listRef = listRef;\n    }\n  }, [sidebarItems, expanded, actionRef, listRef]);\n\n  return (\n    <StyledSideBarContainer rows={['1fr', 'auto']} data-testid={DSChatSidebarDataTestIds.ROOT}>\n      <StyledSideBarButtonsContainer>\n        {sidebarItems.map((p) => (\n          <TileButton\n            key={p.dsId}\n            innerRef={registerReference}\n            {...p}\n            selected={selectedItem === p.dsId}\n            tooltipPlacement={tooltipPlacement}\n            disableTooltip={enableTooltipWhenIsClosed ? false : !expanded}\n          />\n        ))}\n      </StyledSideBarButtonsContainer>\n      <FooterChat\n        expanded={expanded}\n        onFooterClose={onFooterClose}\n        onFooterExpand={onFooterExpand}\n        footerButtonExtraProps={footerButtonExtraProps}\n      />\n    </StyledSideBarContainer>\n  );\n};\n\nSideBarChat.displayName = DSChatSidebarName;\nconst SideBarChatWithSchema = describe(SideBarChat);\nSideBarChatWithSchema.propTypes = chatSidebarProps as WeakValidationMap<unknown>;\n\nexport { SideBarChat, SideBarChatWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkBrB,cAqCE,YArCF;AAjBF,OAAOA,YAAW;AAClB,SAAS,UAAU,gCAAgC,oCAAoC;AACvF,SAAS,cAAc,kBAAkB;AACzC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB,qCAAqC;AACtE,SAAS,qBAAqB;AAE9B,SAAS,cAAc,wBAAwB;AAC/C,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AAEzC,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,CAAC,WAAW,eAAe;AAAA,IACjC,SAAS,WAAW,gBAAgB;AAAA,IACpC,gBAAc;AAAA,IACd,cAAY,uBAAuB,YAAY;AAAA;AACjD;AAGF,MAAM,cAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA2D,OAAO,YAAY;AACvG,iCAA+B,kBAAkB,kBAAkB,iBAAiB;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,QAAQ,IAAIA,OAAM,OAAuC,CAAC,CAAC;AAC5E,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,QAAqB;AACpB,UAAI,KAAK,SAAS,IAAK,SAAQ,IAAI,QAAQ,GAAG,IAAI;AAAA,IACpD;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACA,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,WAAW,SAAS,SAAS;AAC/B,gBAAU,QAAQ,UAAU;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,cAAc,UAAU,WAAW,OAAO,CAAC;AAE/C,SACE,qBAAC,0BAAuB,MAAM,CAAC,OAAO,MAAM,GAAG,eAAa,yBAAyB,MACnF;AAAA,wBAAC,iCACE,uBAAa,IAAI,CAAC,MACjB;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,UAAU,iBAAiB,EAAE;AAAA,QAC7B;AAAA,QACA,gBAAgB,4BAA4B,QAAQ,CAAC;AAAA;AAAA,MALhD,EAAE;AAAA,IAMT,CACD,GACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport {\n  describe,\n  useValidateTypescriptPropTypes,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { MenuCollapse, MenuExpand } from '@elliemae/ds-icons';\nimport { TileButton } from '@elliemae/ds-chat-tile';\nimport { StyledSideBarContainer, StyledSideBarButtonsContainer } from './styled.js';\nimport { SidebarButton } from './sidebar-button/SidebarButton.js';\nimport type { DSChatSidebarT } from './react-desc-prop-types.js';\nimport { defaultProps, chatSidebarProps } from './react-desc-prop-types.js';\nimport { CHAT_SIDEBAR_DATA_TESTID, DSChatSidebarName } from './constants/index.js';\n\nconst FooterChat = ({\n  expanded,\n  onFooterClose,\n  onFooterExpand,\n  footerButtonExtraProps,\n  getOwnerProps,\n  getOwnerPropsArguments,\n}: Pick<DSChatSidebarT.DefaultProps, 'expanded' | 'onFooterClose' | 'onFooterExpand' | 'footerButtonExtraProps'> & {\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}) => (\n  <SidebarButton\n    dsId=\"sidebar_footer\"\n    Icon={!expanded ? MenuCollapse : MenuExpand}\n    onClick={expanded ? onFooterClose : onFooterExpand}\n    aria-pressed={expanded}\n    aria-label={footerButtonExtraProps['aria-label']}\n    getOwnerProps={getOwnerProps}\n    getOwnerPropsArguments={getOwnerPropsArguments}\n  />\n);\n\nconst SideBarChat: React.ComponentType<DSChatSidebarT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSChatSidebarT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, chatSidebarProps, DSChatSidebarName);\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefault);\n  // strip `wrap` \u2014 Grid uses a strict literal type (`Wrap`) that collides with the generic string from globalAttributes.\n  // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars\n  const { wrap: wrapStripped, ...globalProps } = globalAttrs as typeof globalAttrs & { wrap?: unknown };\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps<DSChatSidebarT.Props>(propsWithDefault);\n\n  const {\n    sidebarItems,\n    expanded,\n    onFooterClose,\n    onFooterExpand,\n    selectedItem,\n    footerButtonExtraProps,\n    tooltipPlacement,\n    enableTooltipWhenIsClosed,\n    actionRef,\n  } = propsWithDefault;\n  const { current: listRef } = React.useRef<{ [key: string]: HTMLElement }>({});\n  const registerReference = React.useCallback(\n    (ref: HTMLElement) => {\n      if (ref?.dataset?.key) listRef[ref.dataset.key] = ref;\n    },\n    [listRef],\n  );\n  React.useEffect(() => {\n    if (actionRef?.current?.listRef) {\n      actionRef.current.listRef = listRef;\n    }\n  }, [sidebarItems, expanded, actionRef, listRef]);\n\n  return (\n    <StyledSideBarContainer\n      {...globalProps}\n      {...xstyledProps}\n      rows={['1fr', 'auto']}\n      // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n      data-testid={CHAT_SIDEBAR_DATA_TESTID.ROOT}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSideBarButtonsContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {sidebarItems.map((p) => (\n          <TileButton\n            key={p.dsId}\n            innerRef={registerReference}\n            {...p}\n            selected={selectedItem === p.dsId}\n            tooltipPlacement={tooltipPlacement}\n            disableTooltip={enableTooltipWhenIsClosed ? false : !expanded}\n          />\n        ))}\n      </StyledSideBarButtonsContainer>\n      <FooterChat\n        expanded={expanded}\n        onFooterClose={onFooterClose}\n        onFooterExpand={onFooterExpand}\n        footerButtonExtraProps={footerButtonExtraProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      />\n    </StyledSideBarContainer>\n  );\n};\n\nSideBarChat.displayName = DSChatSidebarName;\nconst SideBarChatWithSchema = describe(SideBarChat);\nSideBarChatWithSchema.propTypes = chatSidebarProps as WeakValidationMap<unknown>;\n\n// DS-prefixed canonical names (modern Dimsum convention) \u2014 SideBarChat kept as alias for backwards compat\nconst DSChatSidebar = SideBarChat;\nconst DSChatSidebarWithSchema = SideBarChatWithSchema;\n\nexport { SideBarChat, SideBarChatWithSchema, DSChatSidebar, DSChatSidebarWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BrB,cA+CE,YA/CF;AA5BF,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc,kBAAkB;AACzC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB,qCAAqC;AACtE,SAAS,qBAAqB;AAE9B,SAAS,cAAc,wBAAwB;AAC/C,SAAS,0BAA0B,yBAAyB;AAE5D,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAIE;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,CAAC,WAAW,eAAe;AAAA,IACjC,SAAS,WAAW,gBAAgB;AAAA,IACpC,gBAAc;AAAA,IACd,cAAY,uBAAuB,YAAY;AAAA,IAC/C;AAAA,IACA;AAAA;AACF;AAGF,MAAM,cAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA2D,OAAO,YAAY;AACvG,iCAA+B,kBAAkB,kBAAkB,iBAAiB;AAEpF,QAAM,cAAc,uBAAuB,gBAAgB;AAG3D,QAAM,EAAE,MAAM,cAAc,GAAG,YAAY,IAAI;AAC/C,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAoC,gBAAgB;AAEtG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,SAAS,QAAQ,IAAIA,OAAM,OAAuC,CAAC,CAAC;AAC5E,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,QAAqB;AACpB,UAAI,KAAK,SAAS,IAAK,SAAQ,IAAI,QAAQ,GAAG,IAAI;AAAA,IACpD;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AACA,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,WAAW,SAAS,SAAS;AAC/B,gBAAU,QAAQ,UAAU;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,cAAc,UAAU,WAAW,OAAO,CAAC;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,OAAO,MAAM;AAAA,MAEpB,eAAa,yBAAyB;AAAA,MACtC;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,iCAA8B,eAA8B,wBAC1D,uBAAa,IAAI,CAAC,MACjB;AAAA,UAAC;AAAA;AAAA,YAEC,UAAU;AAAA,YACT,GAAG;AAAA,YACJ,UAAU,iBAAiB,EAAE;AAAA,YAC7B;AAAA,YACA,gBAAgB,4BAA4B,QAAQ,CAAC;AAAA;AAAA,UALhD,EAAE;AAAA,QAMT,CACD,GACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAGlC,MAAM,gBAAgB;AACtB,MAAM,0BAA0B;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSChatSidebarName = "DSChatsidebar";
+const CHAT_SIDEBAR_SLOTS = {
+  ROOT: "root",
+  // legacy ones...
+  BUTTONS_CONTAINER: "buttons-container",
+  SIDEBAR_BUTTON: "sidebar-button",
+  SIDEBAR_BUTTON_ICON: "sidebar-button-icon",
+  SIDEBAR_BUTTON_LABEL: "sidebar-button-label"
+};
+const CHAT_SIDEBAR_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSChatSidebarName, CHAT_SIDEBAR_SLOTS),
+  ROOT: "ds-chat-sidebar"
+  // legacy value — breaking change if removed
+};
+export {
+  CHAT_SIDEBAR_DATA_TESTID,
+  CHAT_SIDEBAR_SLOTS,
+  DSChatSidebarName
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSChatSidebarName = 'DSChatsidebar';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CHAT_SIDEBAR_SLOTS = {\n  ROOT: 'root', // legacy ones...\n  BUTTONS_CONTAINER: 'buttons-container',\n  SIDEBAR_BUTTON: 'sidebar-button',\n  SIDEBAR_BUTTON_ICON: 'sidebar-button-icon',\n  SIDEBAR_BUTTON_LABEL: 'sidebar-button-label',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\n// Note: ROOT legacy value is `ds-chat-sidebar` \u2014 preserved at three layers (constants + preserveLegacyDataTestId + inline JSX) \u2014 breaking change if removed.\n// Note: the dynamic `sidebar-button-${dsId}` testid rendered by SidebarButton.tsx is preserved inline at the JSX level only; it cannot be expressed in this static map.\nexport const CHAT_SIDEBAR_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSChatSidebarName, CHAT_SIDEBAR_SLOTS),\n  ROOT: 'ds-chat-sidebar', // legacy value \u2014 breaking change if removed\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,oBAAoB;AAG1B,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA;AAAA,EACN,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,qBAAqB;AAAA,EACrB,sBAAsB;AACxB;AAKO,MAAM,2BAA2B;AAAA,EACtC,GAAG,wBAAwB,mBAAmB,kBAAkB;AAAA,EAChE,MAAM;AAAA;AACR;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,7 +1,17 @@
 import * as React from "react";
-import { SideBarChat, SideBarChatWithSchema } from "./SideBarChat.js";
+import { SideBarChat, SideBarChatWithSchema, DSChatSidebar, DSChatSidebarWithSchema } from "./SideBarChat.js";
+import { DSChatSidebarDataTestIds } from "./DSChatSidebarDataTestIds.js";
+import { chatSidebarProps } from "./react-desc-prop-types.js";
+import { CHAT_SIDEBAR_DATA_TESTID, CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from "./constants/index.js";
 export {
+  CHAT_SIDEBAR_DATA_TESTID,
+  CHAT_SIDEBAR_SLOTS,
+  DSChatSidebar,
+  DSChatSidebarDataTestIds,
+  DSChatSidebarName,
+  DSChatSidebarWithSchema,
   SideBarChat,
-  SideBarChatWithSchema
+  SideBarChatWithSchema,
+  chatSidebarProps
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { SideBarChat, SideBarChatWithSchema } from './SideBarChat.js';\nexport type { DSChatSidebarT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,6BAA6B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { SideBarChat, SideBarChatWithSchema, DSChatSidebar, DSChatSidebarWithSchema } from './SideBarChat.js';\nexport { DSChatSidebarDataTestIds } from './DSChatSidebarDataTestIds.js'; // LEGACY EXPORT\nexport type { DSChatSidebarT } from './react-desc-prop-types.js';\nexport { chatSidebarProps } from './react-desc-prop-types.js';\nexport { CHAT_SIDEBAR_DATA_TESTID, CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,uBAAuB,eAAe,+BAA+B;AAC3F,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B,oBAAoB,yBAAyB;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -1,6 +1,12 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-props-helpers";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
 import { noop } from "lodash-es";
+import { CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from "./constants/index.js";
 const defaultProps = {
   expanded: false,
   sidebarItems: [],
@@ -13,6 +19,9 @@ const defaultProps = {
   enableTooltipWhenIsClosed: false
 };
 const chatSidebarProps = {
+  ...getPropsPerSlotPropTypes(DSChatSidebarName, CHAT_SIDEBAR_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
   sidebarItems: PropTypes.arrayOf(PropTypes.object).description("The array of out-of-the-box items you want to render inside the sidebar nav of the chat").defaultValue(defaultProps.sidebarItems),
   expanded: PropTypes.bool.description("Whether to show the chat expanded or collapsed").defaultValue(defaultProps.expanded),
   selectedItem: PropTypes.string.description("The id of the chat item you want to be opened"),
@@ -30,7 +39,7 @@ const chatSidebarProps = {
     "left",
     "left-start"
   ]).description("start placement preferences, as per popperjs placement option").defaultValue("'right'"),
-  enableTooltipWhenIsClosed: PropTypes.bool.description("Enable tooltip when is closed").defaultValue(defaultProps.onFooterExpand),
+  enableTooltipWhenIsClosed: PropTypes.bool.description("Enable tooltip when is closed").defaultValue(defaultProps.enableTooltipWhenIsClosed),
   onFooterExpand: PropTypes.func.description("The function to call when the chat is opened via the footer").defaultValue(defaultProps.onFooterExpand),
   onFooterClose: PropTypes.func.description("The function to call when the chat is closed via the footer").defaultValue(defaultProps.onFooterClose),
   onHeaderExpand: PropTypes.func.description("The function to call when the chat is opened via the header").defaultValue(defaultProps.onHeaderExpand),

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSChatTileT } from '@elliemae/ds-chat-tile';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash-es';\n\nexport declare namespace DSChatSidebarT {\n  type TooltipPlacementT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    sidebarItems: DSChatTileT.Props[];\n    expanded: boolean;\n    onFooterClose: () => void;\n    onFooterExpand: () => void;\n    onHeaderExpand: () => void;\n    onHeaderClose: () => void;\n    footerButtonExtraProps: Record<string, string>;\n    tooltipPlacement: TooltipPlacementT;\n    enableTooltipWhenIsClosed: boolean;\n  }\n\n  export interface OptionalProps {\n    selectedItem?: string | number;\n    actionRef?: React.MutableRefObject<{\n      listRef: { [key: string]: HTMLElement };\n    }>;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChatSidebarT.DefaultProps = {\n  expanded: false,\n  sidebarItems: [],\n  onFooterExpand: noop,\n  onFooterClose: noop,\n  onHeaderExpand: noop,\n  onHeaderClose: noop,\n  footerButtonExtraProps: { 'aria-label': 'expand or collapse button' },\n  tooltipPlacement: 'right',\n  enableTooltipWhenIsClosed: false,\n};\n\nexport const chatSidebarProps = {\n  sidebarItems: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of out-of-the-box items you want to render inside the sidebar nav of the chat')\n    .defaultValue(defaultProps.sidebarItems),\n  expanded: PropTypes.bool\n    .description('Whether to show the chat expanded or collapsed')\n    .defaultValue(defaultProps.expanded),\n  selectedItem: PropTypes.string.description('The id of the chat item you want to be opened'),\n  tooltipPlacement: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'right'\"),\n  enableTooltipWhenIsClosed: PropTypes.bool\n    .description('Enable tooltip when is closed')\n    .defaultValue(defaultProps.onFooterExpand),\n  onFooterExpand: PropTypes.func\n    .description('The function to call when the chat is opened via the footer')\n    .defaultValue(defaultProps.onFooterExpand),\n  onFooterClose: PropTypes.func\n    .description('The function to call when the chat is closed via the footer')\n    .defaultValue(defaultProps.onFooterClose),\n  onHeaderExpand: PropTypes.func\n    .description('The function to call when the chat is opened via the header')\n    .defaultValue(defaultProps.onHeaderExpand),\n  onHeaderClose: PropTypes.func\n    .description('The function to call when the chat is closed via the header')\n    .defaultValue(defaultProps.onHeaderClose),\n  footerButtonExtraProps: PropTypes.object\n    .description('Expand/collapse footer button extra props')\n    .defaultValue(defaultProps.footerButtonExtraProps),\n  actionRef: PropTypes.object.description(\n    `Action ref for sidebar\n  {\n    listRef: references to Tiles\n  }\n  `,\n  ),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AA2Cd,MAAM,eAA4C;AAAA,EACvD,UAAU;AAAA,EACV,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,wBAAwB,EAAE,cAAc,4BAA4B;AAAA,EACpE,kBAAkB;AAAA,EAClB,2BAA2B;AAC7B;AAEO,MAAM,mBAAmB;AAAA,EAC9B,cAAc,UAAU,QAAQ,UAAU,MAAM,EAC7C,YAAY,yFAAyF,EACrG,aAAa,aAAa,YAAY;AAAA,EACzC,UAAU,UAAU,KACjB,YAAY,gDAAgD,EAC5D,aAAa,aAAa,QAAQ;AAAA,EACrC,cAAc,UAAU,OAAO,YAAY,+CAA+C;AAAA,EAC1F,kBAAkB,UAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,2BAA2B,UAAU,KAClC,YAAY,+BAA+B,EAC3C,aAAa,aAAa,cAAc;AAAA,EAC3C,gBAAgB,UAAU,KACvB,YAAY,6DAA6D,EACzE,aAAa,aAAa,cAAc;AAAA,EAC3C,eAAe,UAAU,KACtB,YAAY,6DAA6D,EACzE,aAAa,aAAa,aAAa;AAAA,EAC1C,gBAAgB,UAAU,KACvB,YAAY,6DAA6D,EACzE,aAAa,aAAa,cAAc;AAAA,EAC3C,eAAe,UAAU,KACtB,YAAY,6DAA6D,EACzE,aAAa,aAAa,aAAa;AAAA,EAC1C,wBAAwB,UAAU,OAC/B,YAAY,2CAA2C,EACvD,aAAa,aAAa,sBAAsB;AAAA,EACnD,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport type { DSChatTileT } from '@elliemae/ds-chat-tile';\nimport type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { noop } from 'lodash-es';\nimport { CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from './constants/index.js';\n\nexport declare namespace DSChatSidebarT {\n  type TooltipPlacementT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n\n  // hand-written per-slot function argument map \u2014 one entry per slot in CHAT_SIDEBAR_SLOTS\n  export type SlotFunctionArguments = {\n    dsChatsidebarRoot: () => object;\n    dsChatsidebarButtonsContainer: () => object;\n    dsChatsidebarSidebarButton: () => object;\n    dsChatsidebarSidebarButtonIcon: () => object;\n    dsChatsidebarSidebarButtonLabel: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    sidebarItems: DSChatTileT.Props[];\n    expanded: boolean;\n    onFooterClose: () => void;\n    onFooterExpand: () => void;\n    onHeaderExpand: () => void;\n    onHeaderClose: () => void;\n    footerButtonExtraProps: Record<string, string>;\n    tooltipPlacement: TooltipPlacementT;\n    enableTooltipWhenIsClosed: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChatSidebarName, typeof CHAT_SIDEBAR_SLOTS> {\n    selectedItem?: string | number;\n    actionRef?: React.MutableRefObject<{\n      listRef: { [key: string]: HTMLElement };\n    }>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSChatSidebarT.DefaultProps = {\n  expanded: false,\n  sidebarItems: [],\n  onFooterExpand: noop,\n  onFooterClose: noop,\n  onHeaderExpand: noop,\n  onHeaderClose: noop,\n  footerButtonExtraProps: { 'aria-label': 'expand or collapse button' },\n  tooltipPlacement: 'right',\n  enableTooltipWhenIsClosed: false,\n};\n\nexport const chatSidebarProps: DSPropTypesSchema<DSChatSidebarT.Props> = {\n  ...getPropsPerSlotPropTypes(DSChatSidebarName, CHAT_SIDEBAR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  sidebarItems: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of out-of-the-box items you want to render inside the sidebar nav of the chat')\n    .defaultValue(defaultProps.sidebarItems),\n  expanded: PropTypes.bool\n    .description('Whether to show the chat expanded or collapsed')\n    .defaultValue(defaultProps.expanded),\n  selectedItem: PropTypes.string.description('The id of the chat item you want to be opened'),\n  tooltipPlacement: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'right'\"),\n  enableTooltipWhenIsClosed: PropTypes.bool\n    .description('Enable tooltip when is closed')\n    .defaultValue(defaultProps.enableTooltipWhenIsClosed),\n  onFooterExpand: PropTypes.func\n    .description('The function to call when the chat is opened via the footer')\n    .defaultValue(defaultProps.onFooterExpand),\n  onFooterClose: PropTypes.func\n    .description('The function to call when the chat is closed via the footer')\n    .defaultValue(defaultProps.onFooterClose),\n  onHeaderExpand: PropTypes.func\n    .description('The function to call when the chat is opened via the header')\n    .defaultValue(defaultProps.onHeaderExpand),\n  onHeaderClose: PropTypes.func\n    .description('The function to call when the chat is closed via the header')\n    .defaultValue(defaultProps.onHeaderClose),\n  footerButtonExtraProps: PropTypes.object\n    .description('Expand/collapse footer button extra props')\n    .defaultValue(defaultProps.footerButtonExtraProps),\n  actionRef: PropTypes.object.description(\n    `Action ref for sidebar\n  {\n    listRef: references to Tiles\n  }\n  `,\n  ),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,oBAAoB,yBAAyB;AA+D/C,MAAM,eAA4C;AAAA,EACvD,UAAU;AAAA,EACV,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,wBAAwB,EAAE,cAAc,4BAA4B;AAAA,EACpE,kBAAkB;AAAA,EAClB,2BAA2B;AAC7B;AAEO,MAAM,mBAA4D;AAAA,EACvE,GAAG,yBAAyB,mBAAmB,kBAAkB;AAAA,EACjE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,cAAc,UAAU,QAAQ,UAAU,MAAM,EAC7C,YAAY,yFAAyF,EACrG,aAAa,aAAa,YAAY;AAAA,EACzC,UAAU,UAAU,KACjB,YAAY,gDAAgD,EAC5D,aAAa,aAAa,QAAQ;AAAA,EACrC,cAAc,UAAU,OAAO,YAAY,+CAA+C;AAAA,EAC1F,kBAAkB,UAAU,MAAM;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,SAAS;AAAA,EACzB,2BAA2B,UAAU,KAClC,YAAY,+BAA+B,EAC3C,aAAa,aAAa,yBAAyB;AAAA,EACtD,gBAAgB,UAAU,KACvB,YAAY,6DAA6D,EACzE,aAAa,aAAa,cAAc;AAAA,EAC3C,eAAe,UAAU,KACtB,YAAY,6DAA6D,EACzE,aAAa,aAAa,aAAa;AAAA,EAC1C,gBAAgB,UAAU,KACvB,YAAY,6DAA6D,EACzE,aAAa,aAAa,cAAc;AAAA,EAC3C,eAAe,UAAU,KACtB,YAAY,6DAA6D,EACzE,aAAa,aAAa,aAAa;AAAA,EAC1C,wBAAwB,UAAU,OAC/B,YAAY,2CAA2C,EACvD,aAAa,aAAa,sBAAsB;AAAA,EACnD,WAAW,UAAU,OAAO;AAAA,IAC1B;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF;AACF;",
   "names": []
 }

package/dist/esm/sidebar-button/SidebarButton.js

@@ -1,19 +1,39 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
-import { describe } from "@elliemae/ds-props-helpers";
+import { describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { StyledSidebarButton, StyledSidebarButtonLabel, StyledSidebarButtonIcon } from "./styled.js";
 import { sidebarButtonPropsSchema, defaultSidebarButton } from "./props.js";
 const SidebarButton = (props) => {
-  const propsWithDefaultsTemporary = { ...defaultSidebarButton, ...props };
-  const { dsId, onClick, Icon, label, ...rest } = propsWithDefaultsTemporary;
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultSidebarButton);
+  const { dsId, onClick, Icon, label, getOwnerProps, getOwnerPropsArguments, ...rest } = propsWithDefault;
   const handleClick = React2.useCallback(() => {
     if (dsId) onClick(dsId);
   }, [onClick, dsId]);
-  return /* @__PURE__ */ jsxs(StyledSidebarButton, { "data-testid": `sidebar-button-${dsId}`, onClick: handleClick, ...rest, children: [
-    /* @__PURE__ */ jsx(StyledSidebarButtonIcon, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(Icon, { size: "m" }) }),
-    label && /* @__PURE__ */ jsx(StyledSidebarButtonLabel, { children: label })
-  ] }, dsId);
+  return /* @__PURE__ */ jsxs(
+    StyledSidebarButton,
+    {
+      "data-testid": `sidebar-button-${dsId}`,
+      onClick: handleClick,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledSidebarButtonIcon,
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(Icon, { size: "m" })
+          }
+        ),
+        label && /* @__PURE__ */ jsx(StyledSidebarButtonLabel, { getOwnerProps, getOwnerPropsArguments, children: label })
+      ]
+    },
+    dsId
+  );
 };
 SidebarButton.displayName = "SidebarButton";
 const SidebarButtonWithSchema = describe(SidebarButton);

package/dist/esm/sidebar-button/SidebarButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/sidebar-button/SidebarButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { StyledSidebarButton, StyledSidebarButtonLabel, StyledSidebarButtonIcon } from './styled.js';\nimport type { SidebarButtonProps } from './props.js';\nimport { sidebarButtonPropsSchema, defaultSidebarButton } from './props.js';\n\nconst SidebarButton = (props: SidebarButtonProps): JSX.Element => {\n  const propsWithDefaultsTemporary = { ...defaultSidebarButton, ...props };\n  const { dsId, onClick, Icon, label, ...rest } = propsWithDefaultsTemporary;\n  const handleClick = React.useCallback(() => {\n    if (dsId) onClick(dsId);\n  }, [onClick, dsId]);\n\n  return (\n    <StyledSidebarButton key={dsId} data-testid={`sidebar-button-${dsId}`} onClick={handleClick} {...rest}>\n      <StyledSidebarButtonIcon alignItems=\"center\" justifyContent=\"center\">\n        <Icon size=\"m\" />\n      </StyledSidebarButtonIcon>\n      {label && <StyledSidebarButtonLabel>{label}</StyledSidebarButtonLabel>}\n    </StyledSidebarButton>\n  );\n};\n\nSidebarButton.displayName = 'SidebarButton';\nconst SidebarButtonWithSchema = describe(SidebarButton);\nSidebarButtonWithSchema.propTypes = sidebarButtonPropsSchema;\n\nexport { SidebarButtonWithSchema as SidebarButton };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcnB,SAEI,KAFJ;AAdJ,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB,0BAA0B,+BAA+B;AAEvF,SAAS,0BAA0B,4BAA4B;AAE/D,MAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAM,6BAA6B,EAAE,GAAG,sBAAsB,GAAG,MAAM;AACvE,QAAM,EAAE,MAAM,SAAS,MAAM,OAAO,GAAG,KAAK,IAAI;AAChD,QAAM,cAAcA,OAAM,YAAY,MAAM;AAC1C,QAAI,KAAM,SAAQ,IAAI;AAAA,EACxB,GAAG,CAAC,SAAS,IAAI,CAAC;AAElB,SACE,qBAAC,uBAA+B,eAAa,kBAAkB,IAAI,IAAI,SAAS,aAAc,GAAG,MAC/F;AAAA,wBAAC,2BAAwB,YAAW,UAAS,gBAAe,UAC1D,8BAAC,QAAK,MAAK,KAAI,GACjB;AAAA,IACC,SAAS,oBAAC,4BAA0B,iBAAM;AAAA,OAJnB,IAK1B;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { StyledSidebarButton, StyledSidebarButtonLabel, StyledSidebarButtonIcon } from './styled.js';\nimport type { SidebarButtonProps } from './props.js';\nimport { sidebarButtonPropsSchema, defaultSidebarButton } from './props.js';\n\n// Internal sub-component \u2014 not consumer-facing. Schema validation is deliberately skipped here\n// because SidebarButton intentionally accepts forwarded `...rest` (aria-pressed, aria-label, etc.)\n// from its parent SideBarChat. Validation would reject those passthrough props.\nconst SidebarButton = (props: SidebarButtonProps): JSX.Element => {\n  const propsWithDefault = useMemoMergePropsWithDefault<SidebarButtonProps>(props, defaultSidebarButton);\n\n  const { dsId, onClick, Icon, label, getOwnerProps, getOwnerPropsArguments, ...rest } = propsWithDefault;\n  const handleClick = React.useCallback(() => {\n    if (dsId) onClick(dsId);\n  }, [onClick, dsId]);\n\n  return (\n    <StyledSidebarButton\n      key={dsId}\n      // legacy dynamic data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n      data-testid={`sidebar-button-${dsId}`}\n      onClick={handleClick}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...rest}\n    >\n      <StyledSidebarButtonIcon\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <Icon size=\"m\" />\n      </StyledSidebarButtonIcon>\n      {label && (\n        <StyledSidebarButtonLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {label}\n        </StyledSidebarButtonLabel>\n      )}\n    </StyledSidebarButton>\n  );\n};\n\nSidebarButton.displayName = 'SidebarButton';\nconst SidebarButtonWithSchema = describe(SidebarButton);\nSidebarButtonWithSchema.propTypes = sidebarButtonPropsSchema;\n\nexport { SidebarButtonWithSchema as SidebarButton };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBnB,SAeI,KAfJ;AAlBJ,OAAOA,YAAW;AAClB,SAAS,UAAU,oCAAoC;AACvD,SAAS,qBAAqB,0BAA0B,+BAA+B;AAEvF,SAAS,0BAA0B,4BAA4B;AAK/D,MAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAM,mBAAmB,6BAAiD,OAAO,oBAAoB;AAErG,QAAM,EAAE,MAAM,SAAS,MAAM,OAAO,eAAe,wBAAwB,GAAG,KAAK,IAAI;AACvF,QAAM,cAAcA,OAAM,YAAY,MAAM;AAC1C,QAAI,KAAM,SAAQ,IAAI;AAAA,EACxB,GAAG,CAAC,SAAS,IAAI,CAAC;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MAGC,eAAa,kBAAkB,IAAI;AAAA,MACnC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,gBAAe;AAAA,YACf;AAAA,YACA;AAAA,YAEA,8BAAC,QAAK,MAAK,KAAI;AAAA;AAAA,QACjB;AAAA,QACC,SACC,oBAAC,4BAAyB,eAA8B,wBACrD,iBACH;AAAA;AAAA;AAAA,IAnBG;AAAA,EAqBP;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
   "names": ["React"]
 }

package/dist/esm/sidebar-button/props.js

@@ -10,11 +10,15 @@ const defaultSidebarButton = {
   title: ""
 };
 const propsSidebarButton = {
-  Icon: PropTypes.element.description("Icon component").defaultValue(defaultSidebarButton.Icon),
+  Icon: PropTypes.func.description("Icon component").defaultValue(defaultSidebarButton.Icon),
   dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description("Unique id for the button").defaultValue(defaultSidebarButton.dsId),
   label: PropTypes.string.description("It will display under the icon").defaultValue(defaultSidebarButton.label),
   title: PropTypes.string.description("Tooltip").defaultValue(defaultSidebarButton.title),
-  onClick: PropTypes.func.description("The function to call when the is clicked").defaultValue(defaultSidebarButton.onClick)
+  onClick: PropTypes.func.description("The function to call when the is clicked").defaultValue(defaultSidebarButton.onClick),
+  getOwnerProps: PropTypes.func.description("Slot system getter \u2014 forwarded from the parent SideBarChat"),
+  getOwnerPropsArguments: PropTypes.func.description(
+    "Slot system getOwnerPropsArguments \u2014 forwarded from the parent SideBarChat"
+  )
 };
 const sidebarButtonPropsSchema = propsSidebarButton;
 export {

package/dist/esm/sidebar-button/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/sidebar-button/props.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { Comments } from '@elliemae/ds-icons';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash-es';\nimport type React from 'react';\n\nexport interface SidebarButtonProps {\n  Icon: React.FC<SvgIconT.Props>;\n  dsId: string | number;\n  onClick: (dsId: string | number) => void;\n  label?: string;\n  title?: string;\n}\n\nexport const defaultSidebarButton: SidebarButtonProps = {\n  Icon: Comments,\n  dsId: '',\n  label: '',\n  onClick: noop,\n  title: '',\n};\n\nexport const propsSidebarButton: DSPropTypesSchema<SidebarButtonProps> = {\n  Icon: PropTypes.element.description('Icon component').defaultValue(defaultSidebarButton.Icon),\n  dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Unique id for the button')\n    .defaultValue(defaultSidebarButton.dsId),\n  label: PropTypes.string.description('It will display under the icon').defaultValue(defaultSidebarButton.label),\n  title: PropTypes.string.description('Tooltip').defaultValue(defaultSidebarButton.title),\n  onClick: PropTypes.func\n    .description('The function to call when the is clicked')\n    .defaultValue(defaultSidebarButton.onClick),\n};\n\nexport const sidebarButtonPropsSchema = propsSidebarButton as unknown as ValidationMap<SidebarButtonProps>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAWd,MAAM,uBAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,qBAA4D;AAAA,EACvE,MAAM,UAAU,QAAQ,YAAY,gBAAgB,EAAE,aAAa,qBAAqB,IAAI;AAAA,EAC5F,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,qBAAqB,IAAI;AAAA,EACzC,OAAO,UAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,qBAAqB,KAAK;AAAA,EAC7G,OAAO,UAAU,OAAO,YAAY,SAAS,EAAE,aAAa,qBAAqB,KAAK;AAAA,EACtF,SAAS,UAAU,KAChB,YAAY,0CAA0C,EACtD,aAAa,qBAAqB,OAAO;AAC9C;AAEO,MAAM,2BAA2B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { Comments } from '@elliemae/ds-icons';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport { noop } from 'lodash-es';\nimport type React from 'react';\n\nexport interface SidebarButtonProps {\n  Icon: React.FC<SvgIconT.Props>;\n  dsId: string | number;\n  onClick: (dsId: string | number) => void;\n  label?: string;\n  title?: string;\n  // forwarded from SideBarChat so the styled children participate in the slot system; optional for backwards compat.\n  getOwnerProps?: () => object;\n  getOwnerPropsArguments?: () => object;\n}\n\nexport const defaultSidebarButton: SidebarButtonProps = {\n  Icon: Comments,\n  dsId: '',\n  label: '',\n  onClick: noop,\n  title: '',\n};\n\nexport const propsSidebarButton: DSPropTypesSchema<SidebarButtonProps> = {\n  Icon: PropTypes.func.description('Icon component').defaultValue(defaultSidebarButton.Icon),\n  dsId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n    .description('Unique id for the button')\n    .defaultValue(defaultSidebarButton.dsId),\n  label: PropTypes.string.description('It will display under the icon').defaultValue(defaultSidebarButton.label),\n  title: PropTypes.string.description('Tooltip').defaultValue(defaultSidebarButton.title),\n  onClick: PropTypes.func\n    .description('The function to call when the is clicked')\n    .defaultValue(defaultSidebarButton.onClick),\n  getOwnerProps: PropTypes.func.description('Slot system getter \u2014 forwarded from the parent SideBarChat'),\n  getOwnerPropsArguments: PropTypes.func.description(\n    'Slot system getOwnerPropsArguments \u2014 forwarded from the parent SideBarChat',\n  ),\n};\n\nexport const sidebarButtonPropsSchema = propsSidebarButton as unknown as ValidationMap<SidebarButtonProps>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAcd,MAAM,uBAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,qBAA4D;AAAA,EACvE,MAAM,UAAU,KAAK,YAAY,gBAAgB,EAAE,aAAa,qBAAqB,IAAI;AAAA,EACzF,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAC3D,YAAY,0BAA0B,EACtC,aAAa,qBAAqB,IAAI;AAAA,EACzC,OAAO,UAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,qBAAqB,KAAK;AAAA,EAC7G,OAAO,UAAU,OAAO,YAAY,SAAS,EAAE,aAAa,qBAAqB,KAAK;AAAA,EACtF,SAAS,UAAU,KAChB,YAAY,0CAA0C,EACtD,aAAa,qBAAqB,OAAO;AAAA,EAC5C,eAAe,UAAU,KAAK,YAAY,iEAA4D;AAAA,EACtG,wBAAwB,UAAU,KAAK;AAAA,IACrC;AAAA,EACF;AACF;AAEO,MAAM,2BAA2B;",
   "names": []
 }

package/dist/esm/sidebar-button/styled.js

@@ -1,9 +1,15 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
+import { CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from "../constants/index.js";
 const MIN_WIDTH_SIDEBAR = 48;
 const BUTTON_SIDEBAR_HEIGHT = 48;
-const StyledSidebarButton = styled.button`
+const StyledSidebarButton = styled("button", {
+  name: DSChatSidebarName,
+  slot: CHAT_SIDEBAR_SLOTS.SIDEBAR_BUTTON,
+  // legacy dynamic data-testid `sidebar-button-${dsId}` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
+})`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,10 +30,16 @@ const StyledSidebarButton = styled.button`
     fill: ${(props) => props.theme.colors.neutral[500]};
   }
 `;
-const StyledSidebarButtonIcon = styled(Grid)`
+const StyledSidebarButtonIcon = styled(Grid, {
+  name: DSChatSidebarName,
+  slot: CHAT_SIDEBAR_SLOTS.SIDEBAR_BUTTON_ICON
+})`
   position: relative;
 `;
-const StyledSidebarButtonLabel = styled.div`
+const StyledSidebarButtonLabel = styled("div", {
+  name: DSChatSidebarName,
+  slot: CHAT_SIDEBAR_SLOTS.SIDEBAR_BUTTON_LABEL
+})`
   width: 30px;
   text-transform: uppercase;
   overflow: hidden;

package/dist/esm/sidebar-button/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/sidebar-button/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n// Buttons\nexport const StyledSidebarButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  position: relative;\n  border: 0;\n  background: transparent;\n  &:focus,\n  &:hover {\n    background: ${(props) => props.theme.colors.neutral['080']};\n  }\n  cursor: pointer;\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['200']};\n\n  svg {\n    fill: ${(props) => props.theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledSidebarButtonIcon = styled(Grid)`\n  position: relative;\n`;\n\nexport const StyledSidebarButtonLabel = styled.div`\n  width: 30px;\n  text-transform: uppercase;\n  overflow: hidden;\n  text-align: center;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAEvB,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK9B,qBAAqB;AAAA,WACtB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,6BAGjC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,YAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI/C,MAAM,0BAA0B,OAAO,IAAI;AAAA;AAAA;AAI3C,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from '../constants/index.js';\n\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n// Buttons\nexport const StyledSidebarButton = styled('button', {\n  name: DSChatSidebarName,\n  slot: CHAT_SIDEBAR_SLOTS.SIDEBAR_BUTTON,\n  // legacy dynamic data-testid `sidebar-button-${dsId}` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\n})`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  height: ${BUTTON_SIDEBAR_HEIGHT}px;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  position: relative;\n  border: 0;\n  background: transparent;\n  &:focus,\n  &:hover {\n    background: ${(props) => props.theme.colors.neutral['080']};\n  }\n  cursor: pointer;\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['200']};\n\n  svg {\n    fill: ${(props) => props.theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledSidebarButtonIcon = styled(Grid, {\n  name: DSChatSidebarName,\n  slot: CHAT_SIDEBAR_SLOTS.SIDEBAR_BUTTON_ICON,\n})`\n  position: relative;\n`;\n\nexport const StyledSidebarButtonLabel = styled('div', {\n  name: DSChatSidebarName,\n  slot: CHAT_SIDEBAR_SLOTS.SIDEBAR_BUTTON_LABEL,\n})`\n  width: 30px;\n  text-transform: uppercase;\n  overflow: hidden;\n  text-align: center;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,yBAAyB;AAEtD,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAEvB,MAAM,sBAAsB,OAAO,UAAU;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAAA;AAAA,EAEzB,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKW,qBAAqB;AAAA,WACtB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMV,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,6BAGjC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,YAG7D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI/C,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAC3B,CAAC;AAAA;AAAA;AAIM,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAC3B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/styled.js

@@ -1,16 +1,25 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
+import { CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from "./constants/index.js";
 const MIN_WIDTH_SIDEBAR = 48;
 const BUTTON_SIDEBAR_HEIGHT = 48;
-const StyledSideBarContainer = styled(Grid)`
+const StyledSideBarContainer = styled(Grid, {
+  name: DSChatSidebarName,
+  slot: CHAT_SIDEBAR_SLOTS.ROOT,
+  // legacy data-testid `ds-chat-sidebar` is preserved via inline JSX data-testid
+  preserveLegacyDataTestId: true
+})`
   height: 100%;
   width: ${MIN_WIDTH_SIDEBAR}px;
   background: ${(props) => props.theme.colors.neutral["050"]};
   border-right: 1px solid ${(props) => props.theme.colors.neutral["100"]};
   overflow: hidden;
 `;
-const StyledSideBarButtonsContainer = styled(Grid)`
+const StyledSideBarButtonsContainer = styled(Grid, {
+  name: DSChatSidebarName,
+  slot: CHAT_SIDEBAR_SLOTS.BUTTONS_CONTAINER
+})`
   overflow-y: auto;
   align-items: flex-start;
   justify-content: flex-start;

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n// Sidebar\nexport const StyledSideBarContainer = styled(Grid)`\n  height: 100%;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['100']};\n  overflow: hidden;\n`;\n\nexport const StyledSideBarButtonsContainer = styled(Grid)`\n  overflow-y: auto;\n  align-items: flex-start;\n  justify-content: flex-start;\n  grid-template-rows: repeat(auto-fill, ${BUTTON_SIDEBAR_HEIGHT}px);\n  overflow-x: hidden;\n\n  scrollbar-width: thin;\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAEvB,MAAM,yBAAyB,OAAO,IAAI;AAAA;AAAA,WAEtC,iBAAiB;AAAA,gBACZ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAChC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIjE,MAAM,gCAAgC,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,0CAId,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from './constants/index.js';\n\nconst MIN_WIDTH_SIDEBAR = 48;\nconst BUTTON_SIDEBAR_HEIGHT = 48;\n// Sidebar\nexport const StyledSideBarContainer = styled(Grid, {\n  name: DSChatSidebarName,\n  slot: CHAT_SIDEBAR_SLOTS.ROOT,\n  // legacy data-testid `ds-chat-sidebar` is preserved via inline JSX data-testid\n  preserveLegacyDataTestId: true,\n})`\n  height: 100%;\n  width: ${MIN_WIDTH_SIDEBAR}px;\n  background: ${(props) => props.theme.colors.neutral['050']};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['100']};\n  overflow: hidden;\n`;\n\nexport const StyledSideBarButtonsContainer = styled(Grid, {\n  name: DSChatSidebarName,\n  slot: CHAT_SIDEBAR_SLOTS.BUTTONS_CONTAINER,\n})`\n  overflow-y: auto;\n  align-items: flex-start;\n  justify-content: flex-start;\n  grid-template-rows: repeat(auto-fill, ${BUTTON_SIDEBAR_HEIGHT}px);\n  overflow-x: hidden;\n\n  scrollbar-width: thin;\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,yBAAyB;AAEtD,MAAM,oBAAoB;AAC1B,MAAM,wBAAwB;AAEvB,MAAM,yBAAyB,OAAO,MAAM;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAAA;AAAA,EAEzB,0BAA0B;AAC5B,CAAC;AAAA;AAAA,WAEU,iBAAiB;AAAA,gBACZ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAChC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIjE,MAAM,gCAAgC,OAAO,MAAM;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,mBAAmB;AAC3B,CAAC;AAAA;AAAA;AAAA;AAAA,0CAIyC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/types/DSChatSidebarDefinitions.d.ts

@@ -1 +1 @@
-export declare const DSChatSidebarName = "DSChatsidebar";
+export { DSChatSidebarName } from './constants/index.js';

package/dist/types/SideBarChat.d.ts

@@ -2,4 +2,6 @@ import React from 'react';
 import type { DSChatSidebarT } from './react-desc-prop-types.js';
 declare const SideBarChat: React.ComponentType<DSChatSidebarT.Props>;
 declare const SideBarChatWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChatSidebarT.Props>;
-export { SideBarChat, SideBarChatWithSchema };
+declare const DSChatSidebar: React.FunctionComponent<DSChatSidebarT.Props>;
+declare const DSChatSidebarWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChatSidebarT.Props>;
+export { SideBarChat, SideBarChatWithSchema, DSChatSidebar, DSChatSidebarWithSchema };

package/dist/types/constants/index.d.ts

@@ -0,0 +1,15 @@
+export declare const DSChatSidebarName = "DSChatsidebar";
+export declare const CHAT_SIDEBAR_SLOTS: {
+    readonly ROOT: "root";
+    readonly BUTTONS_CONTAINER: "buttons-container";
+    readonly SIDEBAR_BUTTON: "sidebar-button";
+    readonly SIDEBAR_BUTTON_ICON: "sidebar-button-icon";
+    readonly SIDEBAR_BUTTON_LABEL: "sidebar-button-label";
+};
+export declare const CHAT_SIDEBAR_DATA_TESTID: {
+    ROOT: string;
+    BUTTONS_CONTAINER: "ds-chatsidebar-buttons-container";
+    SIDEBAR_BUTTON: "ds-chatsidebar-sidebar-button";
+    SIDEBAR_BUTTON_ICON: "ds-chatsidebar-sidebar-button-icon";
+    SIDEBAR_BUTTON_LABEL: "ds-chatsidebar-sidebar-button-label";
+};

package/dist/types/index.d.ts

@@ -1,2 +1,5 @@
-export { SideBarChat, SideBarChatWithSchema } from './SideBarChat.js';
+export { SideBarChat, SideBarChatWithSchema, DSChatSidebar, DSChatSidebarWithSchema } from './SideBarChat.js';
+export { DSChatSidebarDataTestIds } from './DSChatSidebarDataTestIds.js';
 export type { DSChatSidebarT } from './react-desc-prop-types.js';
+export { chatSidebarProps } from './react-desc-prop-types.js';
+export { CHAT_SIDEBAR_DATA_TESTID, CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from './constants/index.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -1,6 +1,17 @@
+import type React from 'react';
 import type { DSChatTileT } from '@elliemae/ds-chat-tile';
+import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { CHAT_SIDEBAR_SLOTS, DSChatSidebarName } from './constants/index.js';
 export declare namespace DSChatSidebarT {
     type TooltipPlacementT = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+    type SlotFunctionArguments = {
+        dsChatsidebarRoot: () => object;
+        dsChatsidebarButtonsContainer: () => object;
+        dsChatsidebarSidebarButton: () => object;
+        dsChatsidebarSidebarButtonIcon: () => object;
+        dsChatsidebarSidebarButtonLabel: () => object;
+    };
     interface RequiredProps {
     }
     interface DefaultProps {
@@ -14,7 +25,7 @@ export declare namespace DSChatSidebarT {
         tooltipPlacement: TooltipPlacementT;
         enableTooltipWhenIsClosed: boolean;
     }
-    interface OptionalProps {
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSChatSidebarName, typeof CHAT_SIDEBAR_SLOTS> {
         selectedItem?: string | number;
         actionRef?: React.MutableRefObject<{
             listRef: {
@@ -22,22 +33,10 @@ export declare namespace DSChatSidebarT {
             };
         }>;
     }
-    interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>, XstyledProps, RequiredProps {
     }
-    interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps>, XstyledProps, RequiredProps {
     }
 }
 export declare const defaultProps: DSChatSidebarT.DefaultProps;
-export declare const chatSidebarProps: {
-    sidebarItems: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    expanded: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    selectedItem: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    tooltipPlacement: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    enableTooltipWhenIsClosed: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    onFooterExpand: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    onFooterClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    onHeaderExpand: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    onHeaderClose: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    footerButtonExtraProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-    actionRef: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
-};
+export declare const chatSidebarProps: DSPropTypesSchema<DSChatSidebarT.Props>;