@elliemae/ds-accordion 2.2.1 → 2.3.0-alpha.4

package/esm/parts/accordionItem/DSAccordionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/DSAccordionItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n  StyledItemAddon,\n  StyledItemContainer,\n  StyledItemContent,\n  StyledItemCustomActions,\n  StyledItemHeader,\n  StyledItemHeaderContainer,\n  StyledItemTitles,\n  StyledPrimaryTitle,\n  StyledSecondaryTitle,\n} from './styles';\nimport { accordionItemPropTypes } from '../../propTypes';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../DSAccordionDatatestid';\nimport type { DSAccordionItemPropsT, DSAccordionItemPropsWithDefaultsT } from '../../DSAccordionTypes';\n\nconst DSAccordionItem = (props: DSAccordionItemPropsT): JSX.Element => {\n  const propsWithDefaults = useMemoMergePropsWithDefault(\n    props,\n    accordionItemDefaultProps,\n  ) as DSAccordionItemPropsWithDefaultsT;\n\n  const {\n    children,\n    title,\n    secondaryTitle,\n    customActions,\n    iconOpened: IconOpened,\n    iconClosed: IconClosed,\n    value,\n    disabled,\n    dsIndex,\n    renderCustomActions,\n  } = propsWithDefaults;\n\n  const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n  const {\n    allChildrenReferences,\n    actualActiveValue,\n    props: { isDSMobile },\n  } = useContext(DSAccordionContext);\n\n  const onKeyDownWithIndex = useCallback(\n    (e: React.KeyboardEvent) => {\n      handleOnKeyDown(e, dsIndex);\n    },\n    [dsIndex, handleOnKeyDown],\n  );\n\n  const [showPopover, setShowPopover] = useState(false);\n  const [referenceElement, setReferenceElement] = useState();\n\n  const CustomActionsContent = useMemo(() => {\n    if (!isDSMobile && customActions?.length > 0)\n      return (\n        <StyledItemCustomActions>\n          {customActions?.map(({ onClick, id, ...rest }) => (\n            <DSButton\n              key={id}\n              onClick={(e: React.MouseEvent) => {\n                e.stopPropagation();\n                if (onClick) onClick(e);\n              }}\n              {...rest}\n              buttonType={BUTTON_TYPE.SECONDARY}\n            />\n          ))}\n        </StyledItemCustomActions>\n      );\n\n    if (!isDSMobile && renderCustomActions)\n      return (\n        <StyledItemCustomActions>\n          {renderCustomActions({ allRefs: allChildrenReferences, actualActiveValue })}\n        </StyledItemCustomActions>\n      );\n    return null;\n  }, [actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n  const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n  const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n  const handleOnFocus = useCallback(\n    () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n    [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n  );\n\n  const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n  const Titles = useMemo(() => {\n    if (isPrimaryShowingEllipsis || isSecondaryShowingEllipsis)\n      return (\n        <>\n          <StyledPrimaryTitle\n            ref={setPrimaryElement}\n            id={`accordion_${title}id`}\n            disabled={disabled}\n            isDSMobile={isDSMobile}\n          >\n            {title}\n          </StyledPrimaryTitle>\n          {!isDSMobile && secondaryTitle && (\n            <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n              {secondaryTitle}\n            </StyledSecondaryTitle>\n          )}\n          <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n            <div style={{ maxWidth: 260, padding: 8, background: 'white', display: 'grid', gap: 8 }}>\n              <p style={{ margin: 0 }}>{title}</p>\n              <p style={{ margin: 0 }}> {secondaryTitle}</p>\n            </div>\n          </DSPopperJS>\n        </>\n      );\n\n    return (\n      <>\n        <StyledPrimaryTitle\n          ref={setPrimaryElement}\n          id={`accordion_${title}id`}\n          disabled={disabled}\n          isDSMobile={isDSMobile}\n        >\n          {title}\n        </StyledPrimaryTitle>\n        {!isDSMobile && secondaryTitle && (\n          <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled}>\n            {secondaryTitle}\n          </StyledSecondaryTitle>\n        )}\n      </>\n    );\n  }, [\n    disabled,\n    isDSMobile,\n    isPrimaryShowingEllipsis,\n    isSecondaryShowingEllipsis,\n    referenceElement,\n    secondaryTitle,\n    setPrimaryElement,\n    setSecondaryElement,\n    showPopover,\n    title,\n  ]);\n\n  return (\n    <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER}>\n      <StyledItemHeaderContainer disabled={disabled}>\n        <StyledItemHeader\n          withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n          withSecondaryTitle={secondaryTitle}\n          onClick={handleOnClick}\n          tabIndex={!disabled ? 0 : undefined}\n          disabled={disabled}\n          data-disabled={disabled}\n          ref={allChildrenReferences[dsIndex]}\n          onKeyDown={onKeyDownWithIndex}\n          isDSMobile={isDSMobile}\n          data-testid={DSAccordionDataTestid.ITEM.HEADER}\n          id={`ds-accordion-header-${value}`}\n          aria-expanded={selected}\n          aria-disabled={disabled}\n          aria-controls={`ds-accordion-content-${value}`}\n          onFocus={handleOnFocus}\n          onBlur={handleOnBlur}\n        >\n          <StyledItemAddon disabled={disabled} isDSMobile={isDSMobile}>\n            {selected ? <IconOpened isDSMobile={isDSMobile} /> : <IconClosed isDSMobile={isDSMobile} />}\n          </StyledItemAddon>\n          <StyledItemTitles\n            onMouseEnter={handleOnFocus}\n            onMouseLeave={handleOnBlur}\n            isDSMobile={isDSMobile}\n            ref={setReferenceElement}\n          >\n            {Titles}\n          </StyledItemTitles>\n        </StyledItemHeader>\n        {CustomActionsContent}\n      </StyledItemHeaderContainer>\n      {selected && (\n        <StyledItemContent\n          data-testid={DSAccordionDataTestid.ITEM.CONTENT}\n          aria-labelledby={`ds-accordion-header-${value}`}\n          role=\"region\"\n          isDSMobile={isDSMobile}\n          id={`ds-accordion-content-${value}`}\n        >\n          {children}\n        </StyledItemContent>\n      )}\n    </StyledItemContainer>\n  );\n};\n\nDSAccordionItem.propTypes = accordionItemPropTypes;\n\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/parts/accordionItem/styles.js

@@ -1,133 +1,114 @@
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
+const StyledItemContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto auto;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};
+  align-items: center;
+`;
+const StyledItemHeader = styled.button`
+  display: flex;
+  height: ${({ theme, withSecondaryTitle }) => withSecondaryTitle ? theme.space.m : theme.space.s};
+  width: 100%;
+  align-items: center;
+  border: none;
+  outline: none;
+  background: none;
 
-const StyledItemContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-0"
-})(["display:grid;grid-template-rows:auto auto;border-bottom:1px solid ", ";align-items:center;"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral[200];
-});
-const StyledItemHeader = /*#__PURE__*/styled.button.withConfig({
-  componentId: "sc-fnpjby-1"
-})(["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 ? theme.space.m : theme.space.s;
-}, _ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled ? 'not-allowed' : 'pointer';
-}, _ref4 => {
-  let {
-    isDSMobile
-  } = _ref4;
-  return isDSMobile ? "0 16px" : "0";
-}, _ref5 => {
-  let {
-    isDSMobile
-  } = _ref5;
-  return isDSMobile ? "flex-direction: row-reverse;" : "";
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.brand[700];
-});
-const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-2"
-})(["margin:", ";grid-column:1/2;"], _ref7 => {
-  let {
-    isDSMobile
-  } = _ref7;
-  return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
-});
-const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-3"
-})(["", " 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 theme.space.s;
-}, _ref10 => {
-  let {
-    disabled,
-    theme
-  } = _ref10;
-  return disabled ? theme.colors.neutral[200] : theme.colors.brand[800];
-});
-const StyledItemTitles = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fnpjby-4"
-})(["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:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref11 => {
-  let {
-    disabled,
-    theme
-  } = _ref11;
-  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
-}, _ref12 => {
-  let {
-    theme,
-    isDSMobile
-  } = _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:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.fontSizes.label[200];
-}, _ref15 => {
-  let {
-    disabled,
-    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:", ";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{", "}"], _ref19 => {
-  let {
-    disabled,
-    theme
-  } = _ref19;
-  return !disabled ? "background: ".concat(theme.colors.brand[200], ";") : "";
-});
+  &:hover {
+    cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  }
 
-export { StyledItemAddon, StyledItemContainer, StyledItemContent, StyledItemCustomActions, StyledItemHeader, StyledItemHeaderContainer, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle };
+  padding: ${({ isDSMobile }) => isDSMobile ? `0 16px` : `0`};
+
+  ${({ isDSMobile }) => isDSMobile ? `flex-direction: row-reverse;` : ``}
+
+  &:focus {
+    &:after {
+      position: absolute;
+      content: '';
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+      pointer-events: none;
+    }
+  }
+`;
+const StyledItemContent = styled.div`
+  margin: ${({ isDSMobile }) => isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`};
+  grid-column: 1/2;
+`;
+const StyledItemAddon = styled.div`
+  ${({ theme, isDSMobile }) => !isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``}
+  height: 100%;
+  width: ${({ theme }) => theme.space.s};
+  display: grid;
+  place-items: center;
+
+  & .em-ds-icon svg {
+    fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
+  }
+`;
+const StyledItemTitles = styled.div`
+  display: grid;
+  grid-template-columns: 100%;
+  width: 100%;
+  align-content: center;
+`;
+const StyledPrimaryTitle = styled.div`
+  margin: 0;
+  font-size: 16px;
+  color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[700]};
+  font-weight: ${({ theme, isDSMobile }) => isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: ${({ theme }) => theme.space.xs};
+  width: 100%;
+  text-align: left;
+  display: block;
+  white-space: nowrap;
+`;
+const StyledSecondaryTitle = styled.span`
+  margin: 0;
+  font-size: ${({ theme }) => theme.fontSizes.label[200]};
+  text-align: left;
+  color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.neutral[500]};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: ${({ theme }) => theme.space.xs};
+  width: 100%;
+  text-align: left;
+  display: block;
+  white-space: nowrap;
+`;
+const StyledItemCustomActions = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: ${({ theme }) => theme.space.xxs};
+  margin: 0 ${({ theme }) => theme.space.xs};
+  justify-content: flex-end;
+`;
+const StyledItemHeaderContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto max-content;
+  place-items: center;
+  position: relative;
+  &:hover {
+    ${({ disabled, theme }) => !disabled ? `background: ${theme.colors.brand[200]};` : ``}
+  }
+`;
+export {
+  StyledItemAddon,
+  StyledItemContainer,
+  StyledItemContent,
+  StyledItemCustomActions,
+  StyledItemHeader,
+  StyledItemHeaderContainer,
+  StyledItemTitles,
+  StyledPrimaryTitle,
+  StyledSecondaryTitle
+};
+//# sourceMappingURL=styles.js.map

package/esm/parts/accordionItem/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport type {\n  StyledItemAddonPropsT,\n  StyledItemHeaderPropsT,\n  StyledItemTitlesPropsT,\n  StyledPrimaryTitlePropsT,\n  StyledSecondaryTitlePropsT,\n  StyledItemContentPropsT,\n  StyledItemHeaderContainerPropsT,\n} from '../../DSAccordionTypes';\n\nexport const StyledItemContainer = styled.div`\n  display: grid;\n  grid-template-rows: auto auto;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  align-items: center;\n`;\n\nexport const StyledItemHeader = styled.button<StyledItemHeaderPropsT>`\n  display: flex;\n  height: ${({ theme, withSecondaryTitle }) => (withSecondaryTitle ? theme.space.m : theme.space.s)};\n  width: 100%;\n  align-items: center;\n  border: none;\n  outline: none;\n  background: none;\n\n  &:hover {\n    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n  }\n\n  padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n\n  ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\n\n  &:focus {\n    &:after {\n      position: absolute;\n      content: '';\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledItemContent = styled.div<StyledItemContentPropsT>`\n  margin: ${({ isDSMobile }) => (isDSMobile ? `16px 16px 24px 16px` : `16px 16px 16px 32px`)};\n  grid-column: 1/2;\n`;\n\nexport const StyledItemAddon = styled.div<StyledItemAddonPropsT>`\n  ${({ theme, isDSMobile }) => (!isDSMobile ? `padding: 0 ${theme.space.xxs};` : ``)}\n  height: 100%;\n  width: ${({ theme }) => theme.space.s};\n  display: grid;\n  place-items: center;\n\n  & .em-ds-icon svg {\n    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.brand[800])};\n  }\n`;\n\nexport const StyledItemTitles = styled.div<StyledItemTitlesPropsT>`\n  display: grid;\n  grid-template-columns: 100%;\n  width: 100%;\n  align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled.div<StyledPrimaryTitlePropsT>`\n  margin: 0;\n  font-size: 16px;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[700])};\n  font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular)};\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: ${({ theme }) => theme.space.xs};\n  width: 100%;\n  text-align: left;\n  display: block;\n  white-space: nowrap;\n`;\n\nexport const StyledSecondaryTitle = styled.span<StyledSecondaryTitlePropsT>`\n  margin: 0;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  text-align: left;\n  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[200] : theme.colors.neutral[500])};\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: ${({ theme }) => theme.space.xs};\n  width: 100%;\n  text-align: left;\n  display: block;\n  white-space: nowrap;\n`;\n\nexport const StyledItemCustomActions = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  margin: 0 ${({ theme }) => theme.space.xs};\n  justify-content: flex-end;\n`;\n\nexport const StyledItemHeaderContainer = styled.div<StyledItemHeaderContainerPropsT>`\n  display: grid;\n  grid-template-columns: auto max-content;\n  place-items: center;\n  position: relative;\n  &:hover {\n    ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AAWO,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA,6BAGb,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,mBAAmB,OAAO;AAAA;AAAA,YAE3B,CAAC,EAAE,OAAO,yBAA0B,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQnF,CAAC,EAAE,eAAgB,WAAW,gBAAgB;AAAA;AAAA;AAAA,aAG/C,CAAC,EAAE,iBAAkB,aAAa,WAAW;AAAA;AAAA,IAEtD,CAAC,EAAE,iBAAkB,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAW7C,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,OAAO;AAAA,YAC5B,CAAC,EAAE,iBAAkB,aAAa,wBAAwB;AAAA;AAAA;AAI/D,MAAM,kBAAkB,OAAO;AAAA,IAClC,CAAC,EAAE,OAAO,iBAAkB,CAAC,aAAa,cAAc,MAAM,MAAM,SAAS;AAAA;AAAA,WAEtE,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA,WAG9B,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,iBAChF,CAAC,EAAE,OAAO,iBAAkB,aAAa,MAAM,YAAY,UAAU,MAAM,YAAY;AAAA;AAAA;AAAA,YAG5F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,uBAAuB,OAAO;AAAA;AAAA,eAE5B,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA,WAEzC,CAAC,EAAE,UAAU,YAAa,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,YAGrF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA,cAGhC,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,cAC3B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAIlC,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM1C,CAAC,EAAE,UAAU,YAAa,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA;",
+  "names": []
+}

package/esm/parts/accordionItem/useAccordionItem.js

@@ -1,42 +1,28 @@
-import 'core-js/modules/esnext.async-iterator.some.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.some.js';
-import { useContext, useMemo, useCallback } from 'react';
-import { DSAccordionContext } from '../../DSAccordionCTX.js';
-
-const useAccordionItem = _ref => {
-  let {
-    value,
-    disabled
-  } = _ref;
-  const {
-    actualActiveValue,
-    setActiveValues,
-    focusableChildrenReferences
-  } = useContext(DSAccordionContext);
+import * as React from "react";
+import { useCallback, useContext, useMemo } from "react";
+import { DSAccordionContext } from "../../DSAccordionCTX";
+const useAccordionItem = ({ value, disabled }) => {
+  const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);
   const selected = useMemo(() => {
     if (Array.isArray(actualActiveValue)) {
-      return actualActiveValue.some(currentValue => currentValue === value);
+      return actualActiveValue.some((currentValue) => currentValue === value);
     }
-
     return value === actualActiveValue;
   }, [actualActiveValue, value]);
-  const handleOnClick = useCallback(e => {
-    if (!disabled) setActiveValues(value, e);
+  const handleOnClick = useCallback((e) => {
+    if (!disabled)
+      setActiveValues(value, e);
   }, [disabled, setActiveValues, value]);
   const handleOnKeyDown = useCallback((e, _dsIndex) => {
-    if (!disabled && e.key === 'ArrowDown') {
-      var _focusableChildrenRef, _focusableChildrenRef2, _focusableChildrenRef3, _focusableChildrenRef4, _focusableChildrenRef5;
-
-      const currentIndex = focusableChildrenReferences.findIndex(item => item.index === _dsIndex);
-      if ((_focusableChildrenRef = focusableChildrenReferences[currentIndex + 1]) !== null && _focusableChildrenRef !== void 0 && (_focusableChildrenRef2 = _focusableChildrenRef.ref) !== null && _focusableChildrenRef2 !== void 0 && _focusableChildrenRef2.current) (_focusableChildrenRef3 = focusableChildrenReferences[currentIndex + 1]) === null || _focusableChildrenRef3 === void 0 ? void 0 : (_focusableChildrenRef4 = _focusableChildrenRef3.ref) === null || _focusableChildrenRef4 === void 0 ? void 0 : (_focusableChildrenRef5 = _focusableChildrenRef4.current) === null || _focusableChildrenRef5 === void 0 ? void 0 : _focusableChildrenRef5.focus();
+    if (!disabled && e.key === "ArrowDown") {
+      const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
+      if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)
+        focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();
     }
-
-    if (!disabled && e.key === 'ArrowUp') {
-      var _focusableChildrenRef6, _focusableChildrenRef7, _focusableChildrenRef8, _focusableChildrenRef9, _focusableChildrenRef10;
-
-      const currentIndex = focusableChildrenReferences.findIndex(item => item.index === _dsIndex);
-      if ((_focusableChildrenRef6 = focusableChildrenReferences[currentIndex - 1]) !== null && _focusableChildrenRef6 !== void 0 && (_focusableChildrenRef7 = _focusableChildrenRef6.ref) !== null && _focusableChildrenRef7 !== void 0 && _focusableChildrenRef7.current) (_focusableChildrenRef8 = focusableChildrenReferences[currentIndex - 1]) === null || _focusableChildrenRef8 === void 0 ? void 0 : (_focusableChildrenRef9 = _focusableChildrenRef8.ref) === null || _focusableChildrenRef9 === void 0 ? void 0 : (_focusableChildrenRef10 = _focusableChildrenRef9.current) === null || _focusableChildrenRef10 === void 0 ? void 0 : _focusableChildrenRef10.focus();
+    if (!disabled && e.key === "ArrowUp") {
+      const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);
+      if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)
+        focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();
     }
   }, [disabled, focusableChildrenReferences]);
   return {
@@ -45,5 +31,7 @@ const useAccordionItem = _ref => {
     selected
   };
 };
-
-export { useAccordionItem };
+export {
+  useAccordionItem
+};
+//# sourceMappingURL=useAccordionItem.js.map

package/esm/parts/accordionItem/useAccordionItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/useAccordionItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport type { UseAccordionPropsT, UseAccordionItemReturnTypeT } from '../../DSAccordionTypes';\n\nexport const useAccordionItem = ({ value, disabled }: UseAccordionPropsT): UseAccordionItemReturnTypeT => {\n  const { actualActiveValue, setActiveValues, focusableChildrenReferences } = useContext(DSAccordionContext);\n\n  const selected = useMemo(() => {\n    if (Array.isArray(actualActiveValue)) {\n      return actualActiveValue.some((currentValue) => currentValue === value);\n    }\n    return value === actualActiveValue;\n  }, [actualActiveValue, value]);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (!disabled) setActiveValues(value, e);\n    },\n    [disabled, setActiveValues, value],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent, _dsIndex: number) => {\n      if (!disabled && e.key === 'ArrowDown') {\n        const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n        if (focusableChildrenReferences[currentIndex + 1]?.ref?.current)\n          focusableChildrenReferences[currentIndex + 1]?.ref?.current?.focus();\n      }\n\n      if (!disabled && e.key === 'ArrowUp') {\n        const currentIndex = focusableChildrenReferences.findIndex((item) => item.index === _dsIndex);\n        if (focusableChildrenReferences[currentIndex - 1]?.ref?.current)\n          focusableChildrenReferences[currentIndex - 1]?.ref?.current?.focus();\n      }\n    },\n    [disabled, focusableChildrenReferences],\n  );\n\n  return {\n    handleOnClick,\n    handleOnKeyDown,\n    selected,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGO,MAAM,mBAAmB,CAAC,EAAE,OAAO,eAAgE;AACxG,QAAM,EAAE,mBAAmB,iBAAiB,gCAAgC,WAAW;AAEvF,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,MAAM,QAAQ,oBAAoB;AACpC,aAAO,kBAAkB,KAAK,CAAC,iBAAiB,iBAAiB;AAAA;AAEnE,WAAO,UAAU;AAAA,KAChB,CAAC,mBAAmB;AAEvB,QAAM,gBAAgB,YACpB,CAAC,MAAwB;AACvB,QAAI,CAAC;AAAU,sBAAgB,OAAO;AAAA,KAExC,CAAC,UAAU,iBAAiB;AAG9B,QAAM,kBAAkB,YACtB,CAAC,GAAwB,aAAqB;AAC5C,QAAI,CAAC,YAAY,EAAE,QAAQ,aAAa;AACtC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAGjE,QAAI,CAAC,YAAY,EAAE,QAAQ,WAAW;AACpC,YAAM,eAAe,4BAA4B,UAAU,CAAC,SAAS,KAAK,UAAU;AACpF,UAAI,4BAA4B,eAAe,IAAI,KAAK;AACtD,oCAA4B,eAAe,IAAI,KAAK,SAAS;AAAA;AAAA,KAGnE,CAAC,UAAU;AAGb,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/esm/propTypes.js

@@ -1,21 +1,28 @@
-import { PropTypes } from 'react-desc';
-
+import * as React from "react";
+import { PropTypes } from "react-desc";
 const accordionItemPropTypes = {
-  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,
-  title: PropTypes.string.description('Set a primary title.'),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Dimsum AccordionItem value, this value should be unique.').isRequired,
-  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),
-  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),
-  secondaryTitle: PropTypes.string.description('Set a secondary title'),
-  customActions: PropTypes.arrayOf(PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),
-  renderCustomActions: PropTypes.func.description('This property will render any JSX in the custom actions area. You can access to all references and active values within the props.')
+  children: PropTypes.node.description("Dimsum AccordionItem content.").isRequired,
+  title: PropTypes.string.description("Set a primary title."),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Dimsum AccordionItem value, this value should be unique.").isRequired,
+  iconClosed: PropTypes.node.description("Custom Dimsum Icon when it is closed."),
+  iconOpened: PropTypes.node.description("Custom Dimsum Icon when it is open."),
+  secondaryTitle: PropTypes.string.description("Set a secondary title"),
+  customActions: PropTypes.arrayOf(PropTypes.object).description("Set Dimsum AccordionItem custom actions."),
+  renderCustomActions: PropTypes.func.description("This property will render any JSX in the custom actions area. You can access to all references and active values within the props.")
 };
 const accordionPropTypes = {
-  containerProps: PropTypes.object.description('Adds props to the container.'),
-  activeValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.string, PropTypes.number]).description('Selected active value. This property makes the component a controlled one.'),
-  children: PropTypes.node.description('Dimsum AccordionItems to show.'),
-  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),
-  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.')
+  containerProps: PropTypes.object.description("Adds props to the container."),
+  activeValue: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    PropTypes.string,
+    PropTypes.number
+  ]).description("Selected active value. This property makes the component a controlled one."),
+  children: PropTypes.node.description("Dimsum AccordionItems to show."),
+  allowMultipleOpen: PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
+  onChange: PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
 };
-
-export { accordionItemPropTypes, accordionPropTypes };
+export {
+  accordionItemPropTypes,
+  accordionPropTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const accordionItemPropTypes = {\n  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,\n  title: PropTypes.string.description('Set a primary title.'),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Dimsum AccordionItem value, this value should be unique.',\n  ).isRequired,\n  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),\n  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),\n  secondaryTitle: PropTypes.string.description('Set a secondary title'),\n  customActions: PropTypes.arrayOf(PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),\n  renderCustomActions: PropTypes.func.description(\n    'This property will render any JSX in the custom actions area. You can access to all references and active values within the props.',\n  ),\n};\n\nexport const accordionPropTypes = {\n  containerProps: PropTypes.object.description('Adds props to the container.'),\n  activeValue: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.string,\n    PropTypes.number,\n  ]).description('Selected active value. This property makes the component a controlled one.'),\n  children: PropTypes.node.description('Dimsum AccordionItems to show.'),\n  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),\n  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.'),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,yBAAyB;AAAA,EACpC,UAAU,UAAU,KAAK,YAAY,iCAAiC;AAAA,EACtE,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D,4DACA;AAAA,EACF,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,eAAe,UAAU,QAAQ,UAAU,QAAQ,YAAY;AAAA,EAC/D,qBAAqB,UAAU,KAAK,YAClC;AAAA;AAIG,MAAM,qBAAqB;AAAA,EAChC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,aAAa,UAAU,UAAU;AAAA,IAC/B,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACnE,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YAAY;AAAA,EACf,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,mBAAmB,UAAU,KAAK,YAAY;AAAA,EAC9C,UAAU,UAAU,KAAK,YAAY;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-accordion",
-  "version": "2.2.1",
+  "version": "2.3.0-alpha.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Accordion",
   "module": "./esm/index.js",
@@ -15,10 +15,6 @@
       "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"
@@ -84,12 +80,12 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@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",
+    "@elliemae/ds-button": "2.3.0-alpha.4",
+    "@elliemae/ds-classnames": "2.3.0-alpha.4",
+    "@elliemae/ds-icons": "2.3.0-alpha.4",
+    "@elliemae/ds-shared": "2.3.0-alpha.4",
+    "@elliemae/ds-system": "2.3.0-alpha.4",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.4",
     "react-desc": "^4.1.3"
   },
   "devDependencies": {

package/cjs/parts/accordionItem/useIsShowingEllipsis.js

@@ -1,37 +0,0 @@
-'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/useIsShowingEllipsis.js

@@ -1,33 +0,0 @@
-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/types/parts/accordionItem/useIsShowingEllipsis.d.ts

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