@elliemae/ds-accordion 3.16.0-next.4 → 3.16.0-next.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js +7 -7
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +1 -1
- package/dist/cjs/parts/accordionItem/styles.js +2 -1
- package/dist/cjs/parts/accordionItem/styles.js.map +2 -2
- package/dist/esm/parts/accordionItem/DSAccordionItem.js +7 -7
- package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +1 -1
- package/dist/esm/parts/accordionItem/styles.js +2 -1
- package/dist/esm/parts/accordionItem/styles.js.map +2 -2
- package/package.json +7 -7
- package/dist/cjs/package.json +0 -7
- package/dist/esm/package.json +0 -7
|
@@ -133,17 +133,17 @@ const DSAccordionItem = (props) => {
|
|
|
133
133
|
!isDSMobile && secondaryTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSecondaryTitle, { ref: setSecondaryElement, disabled, selected, children: secondaryTitle })
|
|
134
134
|
] });
|
|
135
135
|
}, [
|
|
136
|
-
disabled,
|
|
137
|
-
isDSMobile,
|
|
138
136
|
isPrimaryShowingEllipsis,
|
|
139
137
|
isSecondaryShowingEllipsis,
|
|
140
|
-
|
|
141
|
-
secondaryTitle,
|
|
138
|
+
isDSMobile,
|
|
142
139
|
setPrimaryElement,
|
|
143
|
-
|
|
144
|
-
|
|
140
|
+
title,
|
|
141
|
+
disabled,
|
|
145
142
|
selected,
|
|
146
|
-
|
|
143
|
+
secondaryTitle,
|
|
144
|
+
setSecondaryElement,
|
|
145
|
+
referenceElement,
|
|
146
|
+
showPopover
|
|
147
147
|
]);
|
|
148
148
|
const onKeyDownWithIndex = (0, import_react.useCallback)(
|
|
149
149
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/accordionItem/DSAccordionItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n accordionItemDefaultProps,\n ) as DSAccordionT.InternalItemProps;\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 CustomActions,\n xStyledPropsContent,\n ...rest\n } = propsWithDefaults;\n\n const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n const {\n allChildrenReferences,\n actualActiveValue,\n props: { isDSMobile },\n } = useContext(DSAccordionContext);\n\n const [showPopover, setShowPopover] = useState(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>();\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {customActions?.map(({ onClick, id, ...otherProps }) => (\n <DSButton\n key={id}\n onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n e.stopPropagation();\n if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n }}\n {...otherProps}\n buttonType={BUTTON_TYPE.SECONDARY}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && (renderCustomActions || CustomActions))\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {CustomActions !== undefined ? (\n <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n ) : (\n renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n )}\n </StyledItemCustomActions>\n );\n return null;\n }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n // eslint-disable-next-line complexity\n const Titles = useMemo(() => {\n if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n <StyledTooltipContent>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\n </>\n );\n\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n </>\n );\n }, [\n
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n accordionItemDefaultProps,\n ) as DSAccordionT.InternalItemProps;\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 CustomActions,\n xStyledPropsContent,\n ...rest\n } = propsWithDefaults;\n\n const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n const {\n allChildrenReferences,\n actualActiveValue,\n props: { isDSMobile },\n } = useContext(DSAccordionContext);\n\n const [showPopover, setShowPopover] = useState(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>();\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {customActions?.map(({ onClick, id, ...otherProps }) => (\n <DSButton\n key={id}\n onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n e.stopPropagation();\n if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n }}\n {...otherProps}\n buttonType={BUTTON_TYPE.SECONDARY}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && (renderCustomActions || CustomActions))\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {CustomActions !== undefined ? (\n <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n ) : (\n renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n )}\n </StyledItemCustomActions>\n );\n return null;\n }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n // eslint-disable-next-line complexity\n const Titles = useMemo(() => {\n if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n <StyledTooltipContent>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\n </>\n );\n\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n </>\n );\n }, [\n isPrimaryShowingEllipsis,\n isSecondaryShowingEllipsis,\n isDSMobile,\n setPrimaryElement,\n title,\n disabled,\n selected,\n secondaryTitle,\n setSecondaryElement,\n referenceElement,\n showPopover,\n ]);\n\n const onKeyDownWithIndex = useCallback(\n (e: React.KeyboardEvent) => {\n handleOnKeyDown(e, dsIndex);\n },\n [dsIndex, handleOnKeyDown],\n );\n const handleOnFocus = useCallback(\n () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n );\n\n const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const handlers = {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n };\n\n return (\n <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER} className={className} {...xstyledAttrs}>\n <StyledItemHeaderContainer disabled={disabled} ref={setReferenceElement}>\n <StyledItemHeader\n type=\"button\"\n withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n withSecondaryTitle={secondaryTitle}\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 {...handlers}\n {...globalAttrs}\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 withSecondaryTitle={secondaryTitle}\n selected={selected}\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 {...xstyledContentAttrs}\n >\n {children}\n </StyledItemContent>\n )}\n </StyledItemContainer>\n );\n};\n\nDSAccordionItem.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -71,7 +71,7 @@ const StyledItemHeader = (0, import_ds_system.styled)("button", {
|
|
|
71
71
|
display: flex;
|
|
72
72
|
min-height: ${({ theme, withSecondaryTitle, isDSMobile }) => isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};
|
|
73
73
|
width: 100%;
|
|
74
|
-
align-items:
|
|
74
|
+
align-items: start;
|
|
75
75
|
border: none;
|
|
76
76
|
outline: none;
|
|
77
77
|
background: none;
|
|
@@ -108,6 +108,7 @@ const StyledItemAddon = (0, import_ds_system.styled)("div", {
|
|
|
108
108
|
height: 100%;
|
|
109
109
|
display: grid;
|
|
110
110
|
place-items: center;
|
|
111
|
+
padding-top: 5px;
|
|
111
112
|
|
|
112
113
|
& .em-ds-icon svg {
|
|
113
114
|
fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/accordionItem/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n isDSMobile: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n isDSMobile: boolean;\n withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n if (isDSMobile)\n return css`\n padding: 13px 0;\n `;\n if (withSecondaryTitle)\n return css`\n padding: 6px 0;\n `;\n return css`\n padding: 7px 0;\n `;\n};\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n display: grid;\n grid-template-rows: auto auto;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n grid-template-columns: 100%;\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAgD;AAChD,8BAAkD;AA+ClD,MAAM,gBAAgB,CAAC,EAAE,YAAY,mBAAmB,MAA8B;AACpF,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,SAAO;AAAA;AAAA;AAGT;AAEO,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK;AAC9B,CAAC;AAAA;AAAA;AAAA,6BAG4B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7D;AAAA;AAGG,MAAM,uBAAmB,yBAAO,UAAU;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,oBAAoB,WAAW,MACrD,aAAa,SAAS,GAAG,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOhE,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA,aAE/C,CAAC,EAAE,WAAW,MAAO,aAAa,WAAW;AAAA,IACtD,CAAC,EAAE,WAAW,MAAO,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,QAAQ;AACtC,CAAC;AAAA,aACY,CAAC,EAAE,WAAW,MAAO,aAAa,uBAAuB;AAAA,IAClE;AAAA;AAGG,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,yCAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n isDSMobile: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n isDSMobile: boolean;\n withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n if (isDSMobile)\n return css`\n padding: 13px 0;\n `;\n if (withSecondaryTitle)\n return css`\n padding: 6px 0;\n `;\n return css`\n padding: 7px 0;\n `;\n};\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n display: grid;\n grid-template-rows: auto auto;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n grid-template-columns: 100%;\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items: start;\n border: none;\n outline: none;\n background: none;\n &:hover {\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n }\n padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\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', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: center;\n padding-top: 5px;\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', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n ${paddingSetter}\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n margin: 0;\n font-size: 16px;\n line-height: 1.125;\n text-align: left;\n text-overflow: ellipsis;\n min-height: ${({ theme }) => theme.space.xs};\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n `};\n width: 100%;\n display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n line-height: 1.273;\n text-align: left;\n min-height: 12px;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n text-overflow: ellipsis;\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n display: block;`}\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n display: grid;\n grid-auto-flow: column;\n place-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : '0 20px 0 16px')};\n justify-content: flex-end;\n height: 28px;\n`;\n\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderContainerPropsT>`\n display: grid;\n grid-template-columns: auto max-content;\n place-items: center;\n position: relative;\n border-radius: 2px;\n &:hover {\n ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n }\n`;\n\nexport const StyledTooltipContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -118,17 +118,17 @@ const DSAccordionItem = (props) => {
|
|
|
118
118
|
!isDSMobile && secondaryTitle && /* @__PURE__ */ jsx(StyledSecondaryTitle, { ref: setSecondaryElement, disabled, selected, children: secondaryTitle })
|
|
119
119
|
] });
|
|
120
120
|
}, [
|
|
121
|
-
disabled,
|
|
122
|
-
isDSMobile,
|
|
123
121
|
isPrimaryShowingEllipsis,
|
|
124
122
|
isSecondaryShowingEllipsis,
|
|
125
|
-
|
|
126
|
-
secondaryTitle,
|
|
123
|
+
isDSMobile,
|
|
127
124
|
setPrimaryElement,
|
|
128
|
-
|
|
129
|
-
|
|
125
|
+
title,
|
|
126
|
+
disabled,
|
|
130
127
|
selected,
|
|
131
|
-
|
|
128
|
+
secondaryTitle,
|
|
129
|
+
setSecondaryElement,
|
|
130
|
+
referenceElement,
|
|
131
|
+
showPopover
|
|
132
132
|
]);
|
|
133
133
|
const onKeyDownWithIndex = useCallback(
|
|
134
134
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/DSAccordionItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n accordionItemDefaultProps,\n ) as DSAccordionT.InternalItemProps;\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 CustomActions,\n xStyledPropsContent,\n ...rest\n } = propsWithDefaults;\n\n const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n const {\n allChildrenReferences,\n actualActiveValue,\n props: { isDSMobile },\n } = useContext(DSAccordionContext);\n\n const [showPopover, setShowPopover] = useState(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>();\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {customActions?.map(({ onClick, id, ...otherProps }) => (\n <DSButton\n key={id}\n onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n e.stopPropagation();\n if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n }}\n {...otherProps}\n buttonType={BUTTON_TYPE.SECONDARY}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && (renderCustomActions || CustomActions))\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {CustomActions !== undefined ? (\n <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n ) : (\n renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n )}\n </StyledItemCustomActions>\n );\n return null;\n }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n // eslint-disable-next-line complexity\n const Titles = useMemo(() => {\n if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n <StyledTooltipContent>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\n </>\n );\n\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n </>\n );\n }, [\n
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useState, useContext, useCallback, useMemo } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n describe,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButton, BUTTON_TYPE } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles';\nimport { useAccordionItem } from './useAccordionItem';\nimport { DSAccordionContext } from '../../DSAccordionCTX';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types';\nimport type { DSAccordionT } from '../../react-desc-prop-types';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n accordionItemDefaultProps,\n ) as DSAccordionT.InternalItemProps;\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 CustomActions,\n xStyledPropsContent,\n ...rest\n } = propsWithDefaults;\n\n const { handleOnClick, handleOnKeyDown, selected } = useAccordionItem({ value, disabled });\n\n const xstyledAttrs = useGetXstyledProps(rest);\n const xstyledContentAttrs = useGetXstyledProps(xStyledPropsContent);\n\n const {\n allChildrenReferences,\n actualActiveValue,\n props: { isDSMobile },\n } = useContext(DSAccordionContext);\n\n const [showPopover, setShowPopover] = useState(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>();\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {customActions?.map(({ onClick, id, ...otherProps }) => (\n <DSButton\n key={id}\n onClick={(e: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>): void => {\n e.stopPropagation();\n if (onClick) onClick(e as React.MouseEvent<HTMLElement, MouseEvent>);\n }}\n {...otherProps}\n buttonType={BUTTON_TYPE.SECONDARY}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && (renderCustomActions || CustomActions))\n return (\n <StyledItemCustomActions isDSMobile={isDSMobile}>\n {CustomActions !== undefined ? (\n <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n ) : (\n renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n )}\n </StyledItemCustomActions>\n );\n return null;\n }, [CustomActions, actualActiveValue, allChildrenReferences, customActions, isDSMobile, renderCustomActions]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\n\n // eslint-disable-next-line complexity\n const Titles = useMemo(() => {\n if ((isPrimaryShowingEllipsis || isSecondaryShowingEllipsis) && !isDSMobile)\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n <DSPopperJS referenceElement={referenceElement} showPopover={showPopover}>\n <StyledTooltipContent>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\n </>\n );\n\n return (\n <>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile={isDSMobile}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n {!isDSMobile && secondaryTitle && (\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n )}\n </>\n );\n }, [\n isPrimaryShowingEllipsis,\n isSecondaryShowingEllipsis,\n isDSMobile,\n setPrimaryElement,\n title,\n disabled,\n selected,\n secondaryTitle,\n setSecondaryElement,\n referenceElement,\n showPopover,\n ]);\n\n const onKeyDownWithIndex = useCallback(\n (e: React.KeyboardEvent) => {\n handleOnKeyDown(e, dsIndex);\n },\n [dsIndex, handleOnKeyDown],\n );\n const handleOnFocus = useCallback(\n () => setShowPopover(isPrimaryShowingEllipsis || isSecondaryShowingEllipsis),\n [isPrimaryShowingEllipsis, isSecondaryShowingEllipsis],\n );\n\n const handleOnBlur = useCallback(() => setShowPopover(false), []);\n\n const { className, ...globalAttrs } = useGetGlobalAttributes(rest, {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const handlers = {\n onClick: handleOnClick,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n };\n\n return (\n <StyledItemContainer data-testid={DSAccordionDataTestid.ITEM.CONTAINER} className={className} {...xstyledAttrs}>\n <StyledItemHeaderContainer disabled={disabled} ref={setReferenceElement}>\n <StyledItemHeader\n type=\"button\"\n withCustomActions={(customActions?.length > 0 || renderCustomActions !== undefined) && !isDSMobile}\n withSecondaryTitle={secondaryTitle}\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 {...handlers}\n {...globalAttrs}\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 withSecondaryTitle={secondaryTitle}\n selected={selected}\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 {...xstyledContentAttrs}\n >\n {children}\n </StyledItemContent>\n )}\n </StyledItemContainer>\n );\n};\n\nDSAccordionItem.displayName = 'DSAccordionItem';\nconst DSAccordionItemWithSchema = describe(DSAccordionItem);\nDSAccordionItemWithSchema.propTypes = accordionItemPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordionItem, DSAccordionItemWithSchema };\nexport default DSAccordionItem;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ const StyledItemHeader = styled("button", {
|
|
|
33
33
|
display: flex;
|
|
34
34
|
min-height: ${({ theme, withSecondaryTitle, isDSMobile }) => isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};
|
|
35
35
|
width: 100%;
|
|
36
|
-
align-items:
|
|
36
|
+
align-items: start;
|
|
37
37
|
border: none;
|
|
38
38
|
outline: none;
|
|
39
39
|
background: none;
|
|
@@ -70,6 +70,7 @@ const StyledItemAddon = styled("div", {
|
|
|
70
70
|
height: 100%;
|
|
71
71
|
display: grid;
|
|
72
72
|
place-items: center;
|
|
73
|
+
padding-top: 5px;
|
|
73
74
|
|
|
74
75
|
& .em-ds-icon svg {
|
|
75
76
|
fill: ${({ disabled, theme }) => disabled ? theme.colors.neutral[200] : theme.colors.brand[800]};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionItem/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n isDSMobile: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n isDSMobile: boolean;\n withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n if (isDSMobile)\n return css`\n padding: 13px 0;\n `;\n if (withSecondaryTitle)\n return css`\n padding: 6px 0;\n `;\n return css`\n padding: 7px 0;\n `;\n};\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n display: grid;\n grid-template-rows: auto auto;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n grid-template-columns: 100%;\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items:
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,iBAAiB,wBAAwB;AA+ClD,MAAM,gBAAgB,CAAC,EAAE,YAAY,mBAAmB,MAA8B;AACpF,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,SAAO;AAAA;AAAA;AAGT;AAEO,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK;AAC9B,CAAC;AAAA;AAAA;AAAA,6BAG4B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7D;AAAA;AAGG,MAAM,mBAAmB,OAAO,UAAU;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,oBAAoB,WAAW,MACrD,aAAa,SAAS,GAAG,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOhE,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA,aAE/C,CAAC,EAAE,WAAW,MAAO,aAAa,WAAW;AAAA,IACtD,CAAC,EAAE,WAAW,MAAO,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,QAAQ;AACtC,CAAC;AAAA,aACY,CAAC,EAAE,WAAW,MAAO,aAAa,uBAAuB;AAAA,IAClE;AAAA;AAGG,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related';\ninterface StyledItemHeaderPropsT {\n withCustomActions: boolean;\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n}\n\ninterface StyledItemTitlesPropsT {\n withSecondaryTitle?: string;\n isDSMobile: boolean;\n selected: boolean;\n}\n\ninterface StyledPrimaryTitlePropsT {\n disabled: boolean;\n isDSMobile: boolean;\n selected: boolean;\n withSecondaryTitle: boolean;\n}\n\ninterface StyledItemContentPropsT {\n isDSMobile: boolean;\n}\n\ninterface StyledSecondaryTitlePropsT {\n disabled: boolean;\n selected: boolean;\n}\n\ninterface StyledItemAddonPropsT {\n disabled: boolean;\n isDSMobile: boolean;\n}\n\ninterface StyledItemHeaderContainerPropsT {\n disabled: boolean;\n}\n\ninterface StyledItemCustomActionsPropsT {\n isDSMobile: boolean;\n}\n\ninterface PaddingSetterT {\n isDSMobile: boolean;\n withSecondaryTitle: boolean;\n}\n\nconst paddingSetter = ({ isDSMobile, withSecondaryTitle }: PaddingSetterT): string => {\n if (isDSMobile)\n return css`\n padding: 13px 0;\n `;\n if (withSecondaryTitle)\n return css`\n padding: 6px 0;\n `;\n return css`\n padding: 7px 0;\n `;\n};\n\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.CONTAINER,\n})`\n display: grid;\n grid-template-rows: auto auto;\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n align-items: center;\n min-width: 240px;\n grid-template-columns: 100%;\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemHeader = styled('button', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderPropsT>`\n display: flex;\n min-height: ${({ theme, withSecondaryTitle, isDSMobile }) =>\n isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};\n width: 100%;\n align-items: start;\n border: none;\n outline: none;\n background: none;\n &:hover {\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};\n }\n padding: ${({ isDSMobile }) => (isDSMobile ? `0 16px` : `0`)};\n ${({ isDSMobile }) => (isDSMobile ? `flex-direction: row-reverse;` : ``)}\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', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.CONTENT.CONTAINER,\n})<StyledItemContentPropsT>`\n padding: ${({ isDSMobile }) => (isDSMobile ? `3px 16px 24px 16px` : '16px 20px')};\n ${xStyledCommonProps};\n`;\n\nexport const StyledItemAddon = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.ADDON,\n})<StyledItemAddonPropsT>`\n height: 100%;\n display: grid;\n place-items: center;\n padding-top: 5px;\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', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.TITLE_CONTAINER,\n})<StyledItemTitlesPropsT>`\n display: grid;\n grid-gap: ${({ theme }) => theme.space.xxxs};\n ${paddingSetter}\n grid-template-columns: 100%;\n width: 100%;\n align-content: center;\n`;\n\nexport const StyledPrimaryTitle = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.PRIMARY_TITLE,\n})<StyledPrimaryTitlePropsT>`\n margin: 0;\n font-size: 16px;\n line-height: 1.125;\n text-align: left;\n text-overflow: ellipsis;\n min-height: ${({ theme }) => theme.space.xs};\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n font-weight: ${({ theme, isDSMobile }) => (isDSMobile ? theme.fontWeights.semibold : theme.fontWeights.regular)};\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n `};\n width: 100%;\n display: block;\n`;\n\nexport const StyledSecondaryTitle = styled('span', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.SECONDARY_TITLE,\n})<StyledSecondaryTitlePropsT>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n line-height: 1.273;\n text-align: left;\n min-height: 12px;\n color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral[500] : theme.colors.neutral[700])};\n text-overflow: ellipsis;\n ${({ selected }) =>\n selected\n ? `word-break: break-word;`\n : `\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n display: block;`}\n`;\n\nexport const StyledItemCustomActions = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CUSTOM_ACTIONS_CONTAINER,\n})<StyledItemCustomActionsPropsT>`\n display: grid;\n grid-auto-flow: column;\n place-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n margin: ${({ theme, isDSMobile }) => (isDSMobile ? `0 ${theme.space.xs}` : '0 20px 0 16px')};\n justify-content: flex-end;\n height: 28px;\n`;\n\nexport const StyledItemHeaderContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.CONTAINER,\n})<StyledItemHeaderContainerPropsT>`\n display: grid;\n grid-template-columns: auto max-content;\n place-items: center;\n position: relative;\n border-radius: 2px;\n &:hover {\n ${({ disabled, theme }) => (!disabled ? `background: ${theme.colors.brand[200]};` : ``)}\n }\n`;\n\nexport const StyledTooltipContent = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.ITEM.HEADER.TOOLTIP,\n})`\n padding: 8px;\n width: 250px;\n background: white;\n display: grid;\n gap: ${({ theme }) => theme.space.xxs};\n\n p {\n margin: 0;\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,iBAAiB,wBAAwB;AA+ClD,MAAM,gBAAgB,CAAC,EAAE,YAAY,mBAAmB,MAA8B;AACpF,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,MAAI;AACF,WAAO;AAAA;AAAA;AAGT,SAAO;AAAA;AAAA;AAGT;AAEO,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK;AAC9B,CAAC;AAAA;AAAA;AAAA,6BAG4B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAI7D;AAAA;AAGG,MAAM,mBAAmB,OAAO,UAAU;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,OAAO,oBAAoB,WAAW,MACrD,aAAa,SAAS,GAAG,qBAAqB,MAAM,MAAM,IAAI,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOhE,CAAC,EAAE,SAAS,MAAO,WAAW,gBAAgB;AAAA;AAAA,aAE/C,CAAC,EAAE,WAAW,MAAO,aAAa,WAAW;AAAA,IACtD,CAAC,EAAE,WAAW,MAAO,aAAa,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAU7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMrD,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,QAAQ;AACtC,CAAC;AAAA,aACY,CAAC,EAAE,WAAW,MAAO,aAAa,uBAAuB;AAAA,IAClE;AAAA;AAGG,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOW,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA;AAAA;AAIzF,MAAM,mBAAmB,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,cAEa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACrC;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMe,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAChC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA,iBAChF,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,MAAM,YAAY,WAAW,MAAM,YAAY;AAAA,IACrG,CAAC,EAAE,SAAS,MACZ,WACI,4BACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQD,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA,eAEc,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA,WAIzC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA,IAE7F,CAAC,EAAE,SAAS,MACZ,WACI,4BACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,0BAA0B,OAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA,cAIa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,YAC7B,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,KAAK,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA;AAKtE,MAAM,4BAA4B,OAAO,OAAO;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOK,CAAC,EAAE,UAAU,MAAM,MAAO,CAAC,WAAW,eAAe,MAAM,OAAO,MAAM,UAAU;AAAA;AAAA;AAIjF,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,iBAAiB,KAAK,OAAO;AACrC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,SAKQ,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-accordion",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Accordion",
|
|
6
6
|
"files": [
|
|
@@ -83,12 +83,12 @@
|
|
|
83
83
|
"indent": 4
|
|
84
84
|
},
|
|
85
85
|
"dependencies": {
|
|
86
|
-
"@elliemae/ds-button": "3.16.0-next.
|
|
87
|
-
"@elliemae/ds-
|
|
88
|
-
"@elliemae/ds-
|
|
89
|
-
"@elliemae/ds-
|
|
90
|
-
"@elliemae/ds-
|
|
91
|
-
"@elliemae/ds-
|
|
86
|
+
"@elliemae/ds-button": "3.16.0-next.6",
|
|
87
|
+
"@elliemae/ds-icons": "3.16.0-next.6",
|
|
88
|
+
"@elliemae/ds-popperjs": "3.16.0-next.6",
|
|
89
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.6",
|
|
90
|
+
"@elliemae/ds-system": "3.16.0-next.6",
|
|
91
|
+
"@elliemae/ds-utilities": "3.16.0-next.6"
|
|
92
92
|
},
|
|
93
93
|
"devDependencies": {
|
|
94
94
|
"@testing-library/jest-dom": "~5.16.4",
|
package/dist/cjs/package.json
DELETED