@elliemae/ds-accordion 2.2.0-next.6 → 2.2.1

package/cjs/parts/accordionItem/DSAccordionItem.js

@@ -18,13 +18,13 @@ var reactDesc = require('react-desc');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var DSButton = require('@elliemae/ds-button');
 var dsPopperjs = require('@elliemae/ds-popperjs');
-var dsUtilities = require('@elliemae/ds-utilities');
 var defaultProps = require('../../defaultProps.js');
 var styles = require('./styles.js');
 var propTypes = require('../../propTypes.js');
 var useAccordionItem = require('./useAccordionItem.js');
 var DSAccordionCTX = require('../../DSAccordionCTX.js');
 var DSAccordionDatatestid = require('../../DSAccordionDatatestid.js');
+var useIsShowingEllipsis = require('./useIsShowingEllipsis.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -100,11 +100,11 @@ const DSAccordionItem = props => {
   const {
     isShowingEllipsis: isPrimaryShowingEllipsis,
     setElement: setPrimaryElement
-  } = dsUtilities.useIsShowingEllipsis();
+  } = useIsShowingEllipsis.useIsShowingEllipsis();
   const {
     isShowingEllipsis: isSecondaryShowingEllipsis,
     setElement: setSecondaryElement
-  } = dsUtilities.useIsShowingEllipsis();
+  } = useIsShowingEllipsis.useIsShowingEllipsis();
   const handleOnFocus = React.useCallback(() => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis), [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis]);
   const handleOnBlur = React.useCallback(() => setShowPopover(false), []);
   const Titles = React.useMemo(() => {

package/cjs/parts/accordionItem/styles.js

@@ -18,53 +18,54 @@ const StyledItemContainer = /*#__PURE__*/styled__default["default"].div.withConf
 });
 const StyledItemHeader = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-fnpjby-1"
-})(["display:grid;height:", ";grid-template-columns:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
+})(["display:flex;height:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
   let {
+    theme,
     withSecondaryTitle
   } = _ref2;
-  return withSecondaryTitle ? '48px' : '32px';
+  return withSecondaryTitle ? theme.space.m : theme.space.s;
 }, _ref3 => {
   let {
-    withCustomActions,
-    isDSMobile
+    disabled
   } = _ref3;
-  return withCustomActions ? '32px auto' : "".concat(isDSMobile ? "auto 32px" : "32px auto");
+  return disabled ? 'not-allowed' : 'pointer';
 }, _ref4 => {
   let {
-    disabled
+    isDSMobile
   } = _ref4;
-  return disabled ? 'not-allowed' : 'pointer';
+  return isDSMobile ? "0 16px" : "0";
 }, _ref5 => {
   let {
     isDSMobile
   } = _ref5;
-  return isDSMobile ? "0 16px" : "0";
+  return isDSMobile ? "flex-direction: row-reverse;" : "";
 }, _ref6 => {
-  let {
-    isDSMobile
-  } = _ref6;
-  return isDSMobile ? "grid-template-areas: 'title addon';" : "";
-}, _ref7 => {
   let {
     theme
-  } = _ref7;
+  } = _ref6;
   return theme.colors.brand[700];
 });
 const StyledItemContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fnpjby-2"
-})(["margin:", ";grid-column:1/2;"], _ref8 => {
+})(["margin:", ";grid-column:1/2;"], _ref7 => {
   let {
     isDSMobile
-  } = _ref8;
+  } = _ref7;
   return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
 });
 const StyledItemAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fnpjby-3"
-})(["", " height:100%;display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref9 => {
+})(["", " height:100%;width:", ";display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref8 => {
   let {
+    theme,
     isDSMobile
+  } = _ref8;
+  return !isDSMobile ? "padding: 0 ".concat(theme.space.xxs, ";") : "";
+}, _ref9 => {
+  let {
+    theme
   } = _ref9;
-  return !isDSMobile ? "  padding: 0 8px;\n          \n" : "\n      grid-area: addon;\n      ";
+  return theme.space.s;
 }, _ref10 => {
   let {
     disabled,
@@ -74,30 +75,30 @@ const StyledItemAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
 });
 const StyledItemTitles = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fnpjby-4"
-})(["display:grid;grid-template-columns:100%;align-content:center;", ""], _ref11 => {
-  let {
-    isDSMobile
-  } = _ref11;
-  return isDSMobile ? "grid-area: title;" : "";
-});
+})(["display:grid;grid-template-columns:100%;width:100%;align-content:center;"]);
 const StyledPrimaryTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fnpjby-5"
-})(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref12 => {
+})(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref11 => {
   let {
     disabled,
     theme
-  } = _ref12;
+  } = _ref11;
   return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
-}, _ref13 => {
+}, _ref12 => {
   let {
     theme,
     isDSMobile
-  } = _ref13;
+  } = _ref12;
   return isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xs;
 });
 const StyledSecondaryTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-fnpjby-6"
-})(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
+})(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
   let {
     theme
   } = _ref14;
@@ -108,18 +109,33 @@ const StyledSecondaryTitle = /*#__PURE__*/styled__default["default"].span.withCo
     theme
   } = _ref15;
   return disabled ? theme.colors.neutral[200] : theme.colors.neutral[500];
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space.xs;
 });
 const StyledItemCustomActions = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fnpjby-7"
-})(["display:grid;grid-auto-flow:column;grid-gap:8px;margin:0 16px;justify-content:flex-end;"]);
+})(["display:grid;grid-auto-flow:column;grid-gap:", ";margin:0 ", ";justify-content:flex-end;"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.space.xxs;
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xs;
+});
 const StyledItemHeaderContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fnpjby-8"
-})(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", ";}"], _ref16 => {
+})(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", "}"], _ref19 => {
   let {
     disabled,
     theme
-  } = _ref16;
-  return !disabled ? "background: ".concat(theme.colors.brand[200]) : "";
+  } = _ref19;
+  return !disabled ? "background: ".concat(theme.colors.brand[200], ";") : "";
 });
 
 exports.StyledItemAddon = StyledItemAddon;

package/cjs/parts/accordionItem/useIsShowingEllipsis.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+
+const useIsShowingEllipsis = () => {
+  const [element, setElement] = React.useState();
+  const [isShowingEllipsis, setIsShowingEllipsis] = React.useState(false); // const isShowingEllipsis = element?.scrollWidth > primaryTitleWrapperEl?.clientWidth;
+
+  const resizeObserver = React.useMemo(() => new ResizeObserver(entries => {
+    if (entries.length) {
+      const [textWrapperEntry] = entries;
+      const el = textWrapperEntry.target;
+      setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
+    }
+  }), []);
+  React.useEffect(() => {
+    if (element) {
+      setIsShowingEllipsis((element === null || element === void 0 ? void 0 : element.scrollWidth) > (element === null || element === void 0 ? void 0 : element.clientWidth));
+      resizeObserver.observe(element);
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
+  }, [resizeObserver, element]);
+  return {
+    setElement,
+    isShowingEllipsis
+  };
+};
+
+exports.useIsShowingEllipsis = useIsShowingEllipsis;

package/esm/parts/accordionItem/DSAccordionItem.js

@@ -14,13 +14,13 @@ import { describe } from 'react-desc';
 import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
 import DSButton, { BUTTON_TYPE } from '@elliemae/ds-button';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
-import { useIsShowingEllipsis } from '@elliemae/ds-utilities';
 import { accordionItemDefaultProps } from '../../defaultProps.js';
 import { StyledItemCustomActions, StyledPrimaryTitle, StyledSecondaryTitle, StyledItemContainer, StyledItemHeaderContainer, StyledItemHeader, StyledItemAddon, StyledItemTitles, StyledItemContent } from './styles.js';
 import { accordionItemPropTypes } from '../../propTypes.js';
 import { useAccordionItem } from './useAccordionItem.js';
 import { DSAccordionContext } from '../../DSAccordionCTX.js';
 import { DSAccordionDataTestid } from '../../DSAccordionDatatestid.js';
+import { useIsShowingEllipsis } from './useIsShowingEllipsis.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const _excluded = ["onClick", "id"];

package/esm/parts/accordionItem/styles.js

@@ -10,53 +10,54 @@ const StyledItemContainer = /*#__PURE__*/styled.div.withConfig({
 });
 const StyledItemHeader = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-fnpjby-1"
-})(["display:grid;height:", ";grid-template-columns:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
+})(["display:flex;height:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
   let {
+    theme,
     withSecondaryTitle
   } = _ref2;
-  return withSecondaryTitle ? '48px' : '32px';
+  return withSecondaryTitle ? theme.space.m : theme.space.s;
 }, _ref3 => {
   let {
-    withCustomActions,
-    isDSMobile
+    disabled
   } = _ref3;
-  return withCustomActions ? '32px auto' : "".concat(isDSMobile ? "auto 32px" : "32px auto");
+  return disabled ? 'not-allowed' : 'pointer';
 }, _ref4 => {
   let {
-    disabled
+    isDSMobile
   } = _ref4;
-  return disabled ? 'not-allowed' : 'pointer';
+  return isDSMobile ? "0 16px" : "0";
 }, _ref5 => {
   let {
     isDSMobile
   } = _ref5;
-  return isDSMobile ? "0 16px" : "0";
+  return isDSMobile ? "flex-direction: row-reverse;" : "";
 }, _ref6 => {
-  let {
-    isDSMobile
-  } = _ref6;
-  return isDSMobile ? "grid-template-areas: 'title addon';" : "";
-}, _ref7 => {
   let {
     theme
-  } = _ref7;
+  } = _ref6;
   return theme.colors.brand[700];
 });
 const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fnpjby-2"
-})(["margin:", ";grid-column:1/2;"], _ref8 => {
+})(["margin:", ";grid-column:1/2;"], _ref7 => {
   let {
     isDSMobile
-  } = _ref8;
+  } = _ref7;
   return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
 });
 const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fnpjby-3"
-})(["", " height:100%;display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref9 => {
+})(["", " height:100%;width:", ";display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref8 => {
   let {
+    theme,
     isDSMobile
+  } = _ref8;
+  return !isDSMobile ? "padding: 0 ".concat(theme.space.xxs, ";") : "";
+}, _ref9 => {
+  let {
+    theme
   } = _ref9;
-  return !isDSMobile ? "  padding: 0 8px;\n          \n" : "\n      grid-area: addon;\n      ";
+  return theme.space.s;
 }, _ref10 => {
   let {
     disabled,
@@ -66,30 +67,30 @@ const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
 });
 const StyledItemTitles = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fnpjby-4"
-})(["display:grid;grid-template-columns:100%;align-content:center;", ""], _ref11 => {
-  let {
-    isDSMobile
-  } = _ref11;
-  return isDSMobile ? "grid-area: title;" : "";
-});
+})(["display:grid;grid-template-columns:100%;width:100%;align-content:center;"]);
 const StyledPrimaryTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fnpjby-5"
-})(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref12 => {
+})(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref11 => {
   let {
     disabled,
     theme
-  } = _ref12;
+  } = _ref11;
   return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
-}, _ref13 => {
+}, _ref12 => {
   let {
     theme,
     isDSMobile
-  } = _ref13;
+  } = _ref12;
   return isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xs;
 });
 const StyledSecondaryTitle = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-fnpjby-6"
-})(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
+})(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
   let {
     theme
   } = _ref14;
@@ -100,18 +101,33 @@ const StyledSecondaryTitle = /*#__PURE__*/styled.span.withConfig({
     theme
   } = _ref15;
   return disabled ? theme.colors.neutral[200] : theme.colors.neutral[500];
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space.xs;
 });
 const StyledItemCustomActions = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fnpjby-7"
-})(["display:grid;grid-auto-flow:column;grid-gap:8px;margin:0 16px;justify-content:flex-end;"]);
+})(["display:grid;grid-auto-flow:column;grid-gap:", ";margin:0 ", ";justify-content:flex-end;"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.space.xxs;
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.space.xs;
+});
 const StyledItemHeaderContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fnpjby-8"
-})(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", ";}"], _ref16 => {
+})(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", "}"], _ref19 => {
   let {
     disabled,
     theme
-  } = _ref16;
-  return !disabled ? "background: ".concat(theme.colors.brand[200]) : "";
+  } = _ref19;
+  return !disabled ? "background: ".concat(theme.colors.brand[200], ";") : "";
 });
 
 export { StyledItemAddon, StyledItemContainer, StyledItemContent, StyledItemCustomActions, StyledItemHeader, StyledItemHeaderContainer, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle };

package/esm/parts/accordionItem/useIsShowingEllipsis.js

@@ -0,0 +1,33 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useMemo, useEffect } from 'react';
+
+const useIsShowingEllipsis = () => {
+  const [element, setElement] = useState();
+  const [isShowingEllipsis, setIsShowingEllipsis] = useState(false); // const isShowingEllipsis = element?.scrollWidth > primaryTitleWrapperEl?.clientWidth;
+
+  const resizeObserver = useMemo(() => new ResizeObserver(entries => {
+    if (entries.length) {
+      const [textWrapperEntry] = entries;
+      const el = textWrapperEntry.target;
+      setIsShowingEllipsis((el === null || el === void 0 ? void 0 : el.scrollWidth) > (el === null || el === void 0 ? void 0 : el.clientWidth));
+    }
+  }), []);
+  useEffect(() => {
+    if (element) {
+      setIsShowingEllipsis((element === null || element === void 0 ? void 0 : element.scrollWidth) > (element === null || element === void 0 ? void 0 : element.clientWidth));
+      resizeObserver.observe(element);
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
+  }, [resizeObserver, element]);
+  return {
+    setElement,
+    isShowingEllipsis
+  };
+};
+
+export { useIsShowingEllipsis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-accordion",
-  "version": "2.2.0-next.6",
+  "version": "2.2.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Accordion",
   "module": "./esm/index.js",
@@ -15,6 +15,10 @@
       "import": "./esm/propTypes.js",
       "require": "./cjs/propTypes.js"
     },
+    "./parts/accordionItem/useIsShowingEllipsis": {
+      "import": "./esm/parts/accordionItem/useIsShowingEllipsis.js",
+      "require": "./cjs/parts/accordionItem/useIsShowingEllipsis.js"
+    },
     "./parts/accordionItem/useAccordionItem": {
       "import": "./esm/parts/accordionItem/useAccordionItem.js",
       "require": "./cjs/parts/accordionItem/useAccordionItem.js"
@@ -80,12 +84,12 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-next.6",
-    "@elliemae/ds-classnames": "2.2.0-next.6",
-    "@elliemae/ds-icons": "2.2.0-next.6",
-    "@elliemae/ds-shared": "2.2.0-next.6",
-    "@elliemae/ds-system": "2.2.0-next.6",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.6",
+    "@elliemae/ds-button": "2.2.1",
+    "@elliemae/ds-classnames": "2.2.1",
+    "@elliemae/ds-icons": "2.2.1",
+    "@elliemae/ds-shared": "2.2.1",
+    "@elliemae/ds-system": "2.2.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.1",
     "react-desc": "^4.1.3"
   },
   "devDependencies": {

package/types/DSAccordion.d.ts

@@ -37,7 +37,7 @@ declare const DSAccordion: {
     };
 };
 declare const DSAccordionWithSchema: {
-    (props?: DSAccordionPropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/DSAccordionTypes.d.ts

@@ -132,3 +132,6 @@ export interface StyledItemAddonPropsT {
     disabled: boolean;
     isDSMobile: boolean;
 }
+export interface StyledItemHeaderContainerPropsT {
+    disabled: boolean;
+}

package/types/parts/accordionItem/DSAccordionItem.d.ts

@@ -45,7 +45,7 @@ declare const DSAccordionItem: {
     };
 };
 declare const DSAccordionItemWithSchema: {
-    (props?: DSAccordionItemPropsT | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };

package/types/parts/accordionItem/styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyledItemAddonPropsT, StyledItemHeaderPropsT, StyledItemTitlesPropsT, StyledPrimaryTitlePropsT, StyledSecondaryTitlePropsT, StyledItemContentPropsT } from '../../DSAccordionTypes';
+import type { StyledItemAddonPropsT, StyledItemHeaderPropsT, StyledItemTitlesPropsT, StyledPrimaryTitlePropsT, StyledSecondaryTitlePropsT, StyledItemContentPropsT, StyledItemHeaderContainerPropsT } from '../../DSAccordionTypes';
 export declare const StyledItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledItemHeader: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledItemHeaderPropsT, never>;
 export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledItemContentPropsT, never>;
@@ -7,4 +7,4 @@ export declare const StyledItemTitles: import("styled-components").StyledCompone
 export declare const StyledPrimaryTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledPrimaryTitlePropsT, never>;
 export declare const StyledSecondaryTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StyledSecondaryTitlePropsT, never>;
 export declare const StyledItemCustomActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledItemHeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledItemHeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledItemHeaderContainerPropsT, never>;

package/types/parts/accordionItem/useIsShowingEllipsis.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const useIsShowingEllipsis: () => {
+    setElement: React.Dispatch<React.SetStateAction<HTMLSpanElement | undefined>>;
+    isShowingEllipsis: boolean;
+};