@elliemae/ds-accordion 3.22.0-next.2 → 3.22.0-next.21
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/DSAccordion.js +2 -2
- package/dist/cjs/DSAccordion.js.map +2 -2
- package/dist/cjs/defaultProps.js +2 -1
- package/dist/cjs/defaultProps.js.map +2 -2
- package/dist/cjs/exported-related/{theming.js → DSAccordionDefinitions.js} +22 -19
- package/dist/cjs/exported-related/DSAccordionDefinitions.js.map +7 -0
- package/dist/cjs/exported-related/index.js +1 -2
- package/dist/cjs/exported-related/index.js.map +2 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/accordionContent/AccordionContent.js +21 -7
- package/dist/cjs/parts/accordionContent/AccordionContent.js.map +2 -2
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js +185 -75
- package/dist/cjs/parts/accordionItem/DSAccordionItem.js.map +2 -2
- package/dist/cjs/parts/accordionItem/styles.js +15 -10
- package/dist/cjs/parts/accordionItem/styles.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +8 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/DSAccordion.js +1 -1
- package/dist/esm/DSAccordion.js.map +1 -1
- package/dist/esm/defaultProps.js +2 -1
- package/dist/esm/defaultProps.js.map +2 -2
- package/dist/esm/exported-related/DSAccordionDefinitions.js +28 -0
- package/dist/esm/exported-related/DSAccordionDefinitions.js.map +7 -0
- package/dist/esm/exported-related/index.js +1 -2
- package/dist/esm/exported-related/index.js.map +2 -2
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/accordionContent/AccordionContent.js +22 -8
- package/dist/esm/parts/accordionContent/AccordionContent.js.map +2 -2
- package/dist/esm/parts/accordionItem/DSAccordionItem.js +186 -76
- package/dist/esm/parts/accordionItem/DSAccordionItem.js.map +2 -2
- package/dist/esm/parts/accordionItem/styles.js +15 -10
- package/dist/esm/parts/accordionItem/styles.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +14 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/DSAccordion.d.ts +1 -0
- package/dist/types/exported-related/DSAccordionDefinitions.d.ts +19 -0
- package/dist/types/exported-related/index.d.ts +1 -2
- package/dist/types/parts/accordionContent/AccordionContent.d.ts +1 -0
- package/dist/types/parts/accordionContent/styles.d.ts +1 -0
- package/dist/types/parts/accordionItem/DSAccordionItem.d.ts +1 -0
- package/dist/types/parts/accordionItem/styles.d.ts +46 -0
- package/dist/types/react-desc-prop-types.d.ts +3 -0
- package/package.json +12 -10
- package/dist/cjs/exported-related/DSAccordionDatatestid.js +0 -43
- package/dist/cjs/exported-related/DSAccordionDatatestid.js.map +0 -7
- package/dist/cjs/exported-related/theming.js.map +0 -7
- package/dist/esm/exported-related/DSAccordionDatatestid.js +0 -13
- package/dist/esm/exported-related/DSAccordionDatatestid.js.map +0 -7
- package/dist/esm/exported-related/theming.js +0 -25
- package/dist/esm/exported-related/theming.js.map +0 -7
- package/dist/types/exported-related/DSAccordionDatatestid.d.ts +0 -8
- package/dist/types/exported-related/theming.d.ts +0 -19
|
@@ -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 { Grid } from '@elliemae/ds-grid';\nimport { useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps.js';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles.js';\nimport { useAccordionItem } from './useAccordionItem.js';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDatatestid.js';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\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 <DSButtonV2\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_TYPES.OUTLINE}\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 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 const titleDesktop = useMemo(\n () => (\n <Grid\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n rows={['auto', 'auto']}\n rowGap={secondaryTitle ? '3px' : '0px'}\n padding=\"6px 0px\"\n width=\"100%\"\n >\n <Grid cols={['20px', 'auto']}>\n <StyledItemAddon disabled={disabled}>{selected ? <IconOpened /> : <IconClosed />}</StyledItemAddon>\n <StyledItemTitles withSecondaryTitle={secondaryTitle} selected={selected}>\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id-${value}` } : undefined)}\n disabled={disabled}\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n </Grid>\n {secondaryTitle && (\n <Grid cols={['20px', 'auto']}>\n <div></div>\n <StyledSecondaryTitle ref={setSecondaryElement} disabled={disabled} selected={selected}>\n {secondaryTitle}\n </StyledSecondaryTitle>\n </Grid>\n )}\n </Grid>\n ),\n [\n handleOnFocus,\n handleOnBlur,\n secondaryTitle,\n disabled,\n selected,\n IconOpened,\n IconClosed,\n setPrimaryElement,\n title,\n value,\n setSecondaryElement,\n ],\n );\n\n const titleMobile = useMemo(\n () => (\n <Grid width=\"100%\">\n <Grid cols={['auto', '20px']}>\n <StyledItemTitles\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n isDSMobile\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n >\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile\n selected={selected}\n withSecondaryTitle={secondaryTitle}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n <StyledItemAddon disabled={disabled} isDSMobile>\n {selected ? <IconOpened isDSMobile /> : <IconClosed isDSMobile />}\n </StyledItemAddon>\n </Grid>\n </Grid>\n ),\n [handleOnFocus, handleOnBlur, secondaryTitle, selected, setPrimaryElement, title, disabled, IconOpened, IconClosed],\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 {isDSMobile ? titleMobile : titleDesktop}\n <DSPopperJS referenceElement={referenceElement} showPopover={!selected && showPopover}>\n <StyledTooltipContent>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\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
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\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 { Grid } from '@elliemae/ds-grid';\nimport { mergeRefs, useIsShowingEllipsis } from '@elliemae/ds-utilities';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { accordionItemDefaultProps } from '../../defaultProps.js';\nimport {\n StyledItemAddon,\n StyledItemContainer,\n StyledItemContent,\n StyledItemCustomActions,\n StyledItemHeader,\n StyledItemHeaderContainer,\n StyledItemTitles,\n StyledPrimaryTitle,\n StyledSecondaryTitle,\n StyledTooltipContent,\n} from './styles.js';\nimport { useAccordionItem } from './useAccordionItem.js';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDefinitions.js';\nimport { accordionItemPropTypes } from '../../react-desc-prop-types.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\n\nconst DSAccordionItem = (props: DSAccordionT.ItemProps): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(\n props,\n accordionItemDefaultProps,\n ) as DSAccordionT.InternalItemProps;\n\n const getOwnerProps = useCallback(() => props, [props]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\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 keepContentMounted,\n innerRef,\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>(null);\n\n const CustomActionsContent = useMemo(() => {\n if (!isDSMobile && customActions?.length > 0)\n return (\n <StyledItemCustomActions\n isDSMobile={isDSMobile}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customActions?.map(({ onClick, id, ...otherProps }) => (\n <DSButtonV2\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_TYPES.OUTLINE}\n />\n ))}\n </StyledItemCustomActions>\n );\n\n if (!isDSMobile && (renderCustomActions || CustomActions))\n return (\n <StyledItemCustomActions\n isDSMobile={isDSMobile}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {CustomActions !== undefined ? (\n <CustomActions allRefs={allChildrenReferences} actualActiveValue={actualActiveValue} />\n ) : (\n renderCustomActions?.({ allRefs: allChildrenReferences, actualActiveValue })\n )}\n </StyledItemCustomActions>\n );\n return null;\n }, [\n CustomActions,\n actualActiveValue,\n allChildrenReferences,\n customActions,\n getOwnerProps,\n getOwnerPropsArguments,\n isDSMobile,\n renderCustomActions,\n ]);\n\n const { isShowingEllipsis: isPrimaryShowingEllipsis, setElement: setPrimaryElement } = useIsShowingEllipsis();\n\n const { isShowingEllipsis: isSecondaryShowingEllipsis, setElement: setSecondaryElement } = useIsShowingEllipsis();\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 const titleDesktop = useMemo(\n () => (\n <Grid\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n rows={['auto', 'auto']}\n rowGap={secondaryTitle ? '3px' : '0px'}\n padding=\"6px 0px\"\n width=\"100%\"\n >\n <Grid cols={['20px', 'auto']}>\n <StyledItemAddon\n disabled={disabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {selected ? <IconOpened /> : <IconClosed />}\n </StyledItemAddon>\n <StyledItemTitles\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id-${value}` } : undefined)}\n disabled={disabled}\n selected={selected}\n withSecondaryTitle={Boolean(secondaryTitle)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n </Grid>\n {secondaryTitle && (\n <Grid cols={['20px', 'auto']}>\n <div></div>\n <StyledSecondaryTitle\n ref={setSecondaryElement}\n disabled={disabled}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {secondaryTitle}\n </StyledSecondaryTitle>\n </Grid>\n )}\n </Grid>\n ),\n [\n handleOnFocus,\n handleOnBlur,\n secondaryTitle,\n disabled,\n getOwnerProps,\n getOwnerPropsArguments,\n selected,\n IconOpened,\n IconClosed,\n setPrimaryElement,\n title,\n value,\n setSecondaryElement,\n ],\n );\n\n const titleMobile = useMemo(\n () => (\n <Grid width=\"100%\">\n <Grid cols={['auto', '20px']}>\n <StyledItemTitles\n onMouseEnter={handleOnFocus}\n onMouseLeave={handleOnBlur}\n isDSMobile\n withSecondaryTitle={secondaryTitle}\n selected={selected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledPrimaryTitle\n ref={setPrimaryElement}\n {...(title ? { id: `accordion_${title || ''}id` } : undefined)}\n disabled={disabled}\n isDSMobile\n selected={selected}\n withSecondaryTitle={Boolean(secondaryTitle)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {title}\n </StyledPrimaryTitle>\n </StyledItemTitles>\n <StyledItemAddon\n disabled={disabled}\n isDSMobile\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {selected ? <IconOpened isDSMobile /> : <IconClosed isDSMobile />}\n </StyledItemAddon>\n </Grid>\n </Grid>\n ),\n [\n handleOnFocus,\n handleOnBlur,\n secondaryTitle,\n selected,\n getOwnerProps,\n getOwnerPropsArguments,\n setPrimaryElement,\n title,\n disabled,\n IconOpened,\n IconClosed,\n ],\n );\n return (\n <StyledItemContainer\n data-testid={DSAccordionDataTestid.ITEM_CONTAINER}\n className={className}\n {...xstyledAttrs}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledItemHeaderContainer\n disabled={disabled}\n ref={setReferenceElement}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledItemHeader\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={mergeRefs(allChildrenReferences[dsIndex], innerRef)}\n onKeyDown={onKeyDownWithIndex}\n isDSMobile={isDSMobile}\n data-testid={DSAccordionDataTestid.ITEM_HEADER_CONTAINER}\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 type=\"button\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {isDSMobile ? titleMobile : titleDesktop}\n <DSPopperJS referenceElement={referenceElement} showPopover={!selected && showPopover}>\n <StyledTooltipContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <p>{title}</p>\n <p> {secondaryTitle}</p>\n </StyledTooltipContent>\n </DSPopperJS>\n </StyledItemHeader>\n {CustomActionsContent}\n </StyledItemHeaderContainer>\n {(selected || keepContentMounted) && (\n <StyledItemContent\n data-testid={DSAccordionDataTestid.ITEM_CONTENT_CONTAINER}\n aria-labelledby={`ds-accordion-header-${value}`}\n role=\"region\"\n isDSMobile={isDSMobile}\n id={`ds-accordion-content-${value}`}\n {...xstyledContentAttrs}\n selected={selected}\n keepContentMounted={keepContentMounted}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,7 +45,7 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
45
45
|
var import_exported_related = require("../../exported-related/index.js");
|
|
46
46
|
const StyledItemContainer = (0, import_ds_system.styled)("div", {
|
|
47
47
|
name: import_exported_related.DSAccordionName,
|
|
48
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
48
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_CONTAINER
|
|
49
49
|
})`
|
|
50
50
|
display: grid;
|
|
51
51
|
grid-template-rows: auto auto;
|
|
@@ -57,7 +57,7 @@ const StyledItemContainer = (0, import_ds_system.styled)("div", {
|
|
|
57
57
|
`;
|
|
58
58
|
const StyledItemHeader = (0, import_ds_system.styled)("button", {
|
|
59
59
|
name: import_exported_related.DSAccordionName,
|
|
60
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
60
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_CONTAINER
|
|
61
61
|
})`
|
|
62
62
|
display: flex;
|
|
63
63
|
min-height: ${({ theme, withSecondaryTitle, isDSMobile }) => isDSMobile ? `44px` : `${withSecondaryTitle ? theme.space.m : theme.space.s}`};
|
|
@@ -86,14 +86,19 @@ const StyledItemHeader = (0, import_ds_system.styled)("button", {
|
|
|
86
86
|
`;
|
|
87
87
|
const StyledItemContent = (0, import_ds_system.styled)("div", {
|
|
88
88
|
name: import_exported_related.DSAccordionName,
|
|
89
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
89
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_CONTENT_CONTAINER
|
|
90
90
|
})`
|
|
91
91
|
padding: ${({ isDSMobile }) => isDSMobile ? `3px 16px 24px 16px` : "16px 20px"};
|
|
92
|
+
${({ selected, keepContentMounted }) => {
|
|
93
|
+
if (selected)
|
|
94
|
+
return "";
|
|
95
|
+
return keepContentMounted ? "visibility: hidden; height: 0px; padding: 0px;" : "";
|
|
96
|
+
}}
|
|
92
97
|
${import_ds_system.xStyledCommonProps};
|
|
93
98
|
`;
|
|
94
99
|
const StyledItemAddon = (0, import_ds_system.styled)("div", {
|
|
95
100
|
name: import_exported_related.DSAccordionName,
|
|
96
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
101
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_ADDON
|
|
97
102
|
})`
|
|
98
103
|
height: 100%;
|
|
99
104
|
display: grid;
|
|
@@ -104,7 +109,7 @@ const StyledItemAddon = (0, import_ds_system.styled)("div", {
|
|
|
104
109
|
`;
|
|
105
110
|
const StyledItemTitles = (0, import_ds_system.styled)("div", {
|
|
106
111
|
name: import_exported_related.DSAccordionName,
|
|
107
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
112
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_TITLE_CONTAINER
|
|
108
113
|
})`
|
|
109
114
|
display: grid;
|
|
110
115
|
grid-gap: ${({ theme }) => theme.space.xxxs};
|
|
@@ -114,7 +119,7 @@ const StyledItemTitles = (0, import_ds_system.styled)("div", {
|
|
|
114
119
|
`;
|
|
115
120
|
const StyledPrimaryTitle = (0, import_ds_system.styled)("div", {
|
|
116
121
|
name: import_exported_related.DSAccordionName,
|
|
117
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
122
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_PRIMARY_TITLE
|
|
118
123
|
})`
|
|
119
124
|
margin: 0;
|
|
120
125
|
font-size: 16px;
|
|
@@ -133,7 +138,7 @@ const StyledPrimaryTitle = (0, import_ds_system.styled)("div", {
|
|
|
133
138
|
`;
|
|
134
139
|
const StyledSecondaryTitle = (0, import_ds_system.styled)("span", {
|
|
135
140
|
name: import_exported_related.DSAccordionName,
|
|
136
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
141
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_SECONDARY_TITLE
|
|
137
142
|
})`
|
|
138
143
|
margin: 0;
|
|
139
144
|
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
@@ -150,7 +155,7 @@ const StyledSecondaryTitle = (0, import_ds_system.styled)("span", {
|
|
|
150
155
|
`;
|
|
151
156
|
const StyledItemCustomActions = (0, import_ds_system.styled)("div", {
|
|
152
157
|
name: import_exported_related.DSAccordionName,
|
|
153
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
158
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER
|
|
154
159
|
})`
|
|
155
160
|
display: grid;
|
|
156
161
|
grid-auto-flow: column;
|
|
@@ -162,7 +167,7 @@ const StyledItemCustomActions = (0, import_ds_system.styled)("div", {
|
|
|
162
167
|
`;
|
|
163
168
|
const StyledItemHeaderContainer = (0, import_ds_system.styled)("div", {
|
|
164
169
|
name: import_exported_related.DSAccordionName,
|
|
165
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
170
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_CONTAINER
|
|
166
171
|
})`
|
|
167
172
|
display: grid;
|
|
168
173
|
grid-template-columns: auto max-content;
|
|
@@ -175,7 +180,7 @@ const StyledItemHeaderContainer = (0, import_ds_system.styled)("div", {
|
|
|
175
180
|
`;
|
|
176
181
|
const StyledTooltipContent = (0, import_ds_system.styled)("div", {
|
|
177
182
|
name: import_exported_related.DSAccordionName,
|
|
178
|
-
slot: import_exported_related.DSAccordionSlots.
|
|
183
|
+
slot: import_exported_related.DSAccordionSlots.ITEM_HEADER_TOOLTIP
|
|
179
184
|
})`
|
|
180
185
|
padding: 8px;
|
|
181
186
|
width: 250px;
|
|
@@ -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, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related/index.js';\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\nexport const StyledItemContainer = styled('div', {\n name: DSAccordionName,\n slot: DSAccordionSlots.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA2C;AAC3C,8BAAkD;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSAccordionName, DSAccordionSlots } from '../../exported-related/index.js';\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 selected?: boolean;\n keepContentMounted: 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\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: center;\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 &: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 ${({ selected, keepContentMounted }) => {\n if (selected) return '';\n return keepContentMounted ? 'visibility: hidden; height: 0px; padding: 0px;' : '';\n }}\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 & .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 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
|
}
|
|
@@ -34,6 +34,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
+
var import_DSAccordionDefinitions = require("./exported-related/DSAccordionDefinitions.js");
|
|
37
38
|
const accordionItemPropTypes = {
|
|
38
39
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
39
40
|
...import_ds_props_helpers.xstyledPropTypes,
|
|
@@ -54,7 +55,11 @@ const accordionItemPropTypes = {
|
|
|
54
55
|
).deprecated({ version: "4.x" }),
|
|
55
56
|
CustomActions: import_ds_props_helpers.PropTypes.func.description(
|
|
56
57
|
"This property will render any JSX in the header controls area. You can access to all references and active values within the props."
|
|
57
|
-
)
|
|
58
|
+
),
|
|
59
|
+
keepContentMounted: import_ds_props_helpers.PropTypes.bool.description(
|
|
60
|
+
"This property will keep the content mounted when the AccordionItem is closed."
|
|
61
|
+
),
|
|
62
|
+
...(0, import_ds_props_helpers.getPropsPerDatatestIdPropTypes)(import_DSAccordionDefinitions.DSAccordionDataTestid)
|
|
58
63
|
};
|
|
59
64
|
const accordionPropTypes = {
|
|
60
65
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
@@ -67,6 +72,7 @@ const accordionPropTypes = {
|
|
|
67
72
|
]).description("Selected active value. This property makes the component a controlled one."),
|
|
68
73
|
children: import_ds_props_helpers.PropTypes.node.description("Dimsum AccordionItems to show."),
|
|
69
74
|
allowMultipleOpen: import_ds_props_helpers.PropTypes.bool.description("Allows multiple Dimsum AccordionItems to be open at the same time."),
|
|
70
|
-
onChange: import_ds_props_helpers.PropTypes.func.description("Callback function once the Dimsum Accordion changes.")
|
|
75
|
+
onChange: import_ds_props_helpers.PropTypes.func.description("Callback function once the Dimsum Accordion changes."),
|
|
76
|
+
...(0, import_ds_props_helpers.getPropsPerDatatestIdPropTypes)(import_DSAccordionDefinitions.DSAccordionDataTestid)
|
|
71
77
|
};
|
|
72
78
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type XstyledProps,\n getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSAccordionInternalsT } from './sharedTypes.js';\nimport { DSAccordionDataTestid } from './exported-related/DSAccordionDefinitions.js';\n\nexport declare namespace DSAccordionT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n allowMultipleOpen: boolean;\n onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n children: React.ReactElement<InternalItemProps>[];\n isDSMobile: boolean;\n }\n\n export interface OptionalProps {\n activeValue?: DSAccordionInternalsT.InternalActiveValue;\n }\n\n export interface RequiredProps {\n children: React.ReactElement<ItemProps>[];\n }\n\n export interface Props extends OptionalProps, Partial<Omit<DefaultProps, 'children'>>, RequiredProps {}\n\n export interface ItemDefaultProps {\n iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n title: string;\n customActions: DSAccordionInternalsT.CustomActions[];\n disabled: boolean;\n keepContentMounted: boolean;\n xStyledPropsContent: XstyledProps;\n }\n\n export interface ItemOptionalProps {\n secondaryTitle?: string;\n renderCustomActions?: (props: {\n allRefs: DSAccordionInternalsT.AllChildrenReferences;\n actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n }) => JSX.Element;\n CustomActions?: React.ComponentType<{\n allRefs: DSAccordionInternalsT.AllChildrenReferences;\n actualActiveValue: DSAccordionInternalsT.InternalActiveValue;\n }>;\n innerRef?: React.MutableRefObject<HTMLButtonElement | null> | ((_ref: HTMLButtonElement | null) => void);\n }\n\n export interface ItemRequiredProps {\n children: React.ReactNode;\n value: string | number;\n }\n\n export interface ItemProps extends ItemRequiredProps, ItemOptionalProps, Partial<ItemDefaultProps> {}\n\n export interface InternalItemProps\n extends ItemRequiredProps,\n ItemOptionalProps,\n Omit<ItemDefaultProps, 'disabled' | 'customActions' | 'iconClosed' | 'iconOpened'> {\n dsIndex: number;\n disabled: boolean;\n customActions: DSAccordionInternalsT.CustomActions[];\n iconClosed: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n iconOpened: React.MemoExoticComponent<React.FunctionComponent<DSAccordionInternalsT.DefaultIconProps>>;\n }\n\n export interface InternalProps\n extends OptionalProps,\n Partial<Omit<DefaultProps, 'children' | 'isDSMobile' | 'onChange'>> {\n children: React.ReactElement<InternalItemProps>[];\n isDSMobile: boolean;\n onChange: (value: (string | number)[] | string | number | null, e: React.MouseEvent | React.KeyboardEvent) => void;\n }\n}\n\nexport const accordionItemPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\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.').deprecated({ version: '3.x' }),\n iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.').deprecated({ version: '3.x' }),\n secondaryTitle: PropTypes.string.description('Set a secondary title'),\n xStyledPropsContent: PropTypes.shape(xstyledPropTypes).description(\n 'This property is xStyledProps object to apply in the content wrapper',\n ),\n customActions: PropTypes.arrayOf(PropTypes.object)\n .description('Set Dimsum AccordionItem custom actions.')\n .deprecated({ version: '3.x' }),\n renderCustomActions: PropTypes.func\n .description(\n 'This property will render any JSX in the header controls area. You can access to all references and active values within the props. Rendered as a function which does not allow hook calls inside.',\n )\n .deprecated({ version: '4.x' }),\n CustomActions: PropTypes.func.description(\n 'This property will render any JSX in the header controls area. You can access to all references and active values within the props.',\n ),\n keepContentMounted: PropTypes.bool.description(\n 'This property will keep the content mounted when the AccordionItem is closed.',\n ),\n ...getPropsPerDatatestIdPropTypes(DSAccordionDataTestid),\n};\n\nexport const accordionPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n containerProps: PropTypes.object.description('Adds props to the container.').deprecated({ version: '4.x' }),\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 ...getPropsPerDatatestIdPropTypes(DSAccordionDataTestid),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAMO;AAEP,oCAAsC;AAuE/B,MAAM,yBAAyB;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE;AAAA,EACtE,OAAO,kCAAU,OAAO,YAAY,sBAAsB;AAAA,EAC1D,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,IAC/D;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,KAAK,YAAY,uCAAuC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC7G,YAAY,kCAAU,KAAK,YAAY,qCAAqC,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3G,gBAAgB,kCAAU,OAAO,YAAY,uBAAuB;AAAA,EACpE,qBAAqB,kCAAU,MAAM,wCAAgB,EAAE;AAAA,IACrD;AAAA,EACF;AAAA,EACA,eAAe,kCAAU,QAAQ,kCAAU,MAAM,EAC9C,YAAY,0CAA0C,EACtD,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,qBAAqB,kCAAU,KAC5B;AAAA,IACC;AAAA,EACF,EACC,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAChC,eAAe,kCAAU,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,oBAAoB,kCAAU,KAAK;AAAA,IACjC;AAAA,EACF;AAAA,EACA,OAAG,wDAA+B,mDAAqB;AACzD;AAEO,MAAM,qBAAqB;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,gBAAgB,kCAAU,OAAO,YAAY,8BAA8B,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC1G,aAAa,kCAAU,UAAU;AAAA,IAC/B,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC;AAAA,IAC3E,kCAAU;AAAA,IACV,kCAAU;AAAA,EACZ,CAAC,EAAE,YAAY,4EAA4E;AAAA,EAC3F,UAAU,kCAAU,KAAK,YAAY,gCAAgC;AAAA,EACrE,mBAAmB,kCAAU,KAAK,YAAY,oEAAoE;AAAA,EAClH,UAAU,kCAAU,KAAK,YAAY,sDAAsD;AAAA,EAC3F,OAAG,wDAA+B,mDAAqB;AACzD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSAccordion.js
CHANGED
|
@@ -5,7 +5,7 @@ import { AccordionContent } from "./parts/accordionContent/AccordionContent.js";
|
|
|
5
5
|
import { useAccordion } from "./config/useAccordion.js";
|
|
6
6
|
import { DSAccordionContext } from "./DSAccordionCTX.js";
|
|
7
7
|
import { accordionPropTypes } from "./react-desc-prop-types.js";
|
|
8
|
-
import { DSAccordionName } from "./exported-related/
|
|
8
|
+
import { DSAccordionName } from "./exported-related/index.js";
|
|
9
9
|
const DSAccordion = (props) => {
|
|
10
10
|
const ctx = useAccordion(props);
|
|
11
11
|
return /* @__PURE__ */ jsx(DSAccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(AccordionContent, {}) });
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAccordion.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent.js';\nimport { useAccordion } from './config/useAccordion.js';\nimport { DSAccordionContext } from './DSAccordionCTX.js';\nimport { accordionPropTypes } from './react-desc-prop-types.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\nimport { DSAccordionName } from './exported-related/
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { AccordionContent } from './parts/accordionContent/AccordionContent.js';\nimport { useAccordion } from './config/useAccordion.js';\nimport { DSAccordionContext } from './DSAccordionCTX.js';\nimport { accordionPropTypes } from './react-desc-prop-types.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\nimport { DSAccordionName } from './exported-related/index.js';\n\nconst DSAccordion = (props: DSAccordionT.Props): JSX.Element => {\n const ctx = useAccordion(props);\n\n return (\n <DSAccordionContext.Provider value={ctx}>\n <AccordionContent />\n </DSAccordionContext.Provider>\n );\n};\n\nDSAccordion.displayName = DSAccordionName;\nconst DSAccordionWithSchema = describe(DSAccordion);\nDSAccordionWithSchema.propTypes = accordionPropTypes as WeakValidationMap<unknown>;\n\nexport { DSAccordion, DSAccordionWithSchema };\n\nexport default DSAccordion;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACejB;AAbN,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AAEnC,SAAS,uBAAuB;AAEhC,MAAM,cAAc,CAAC,UAA2C;AAC9D,QAAM,MAAM,aAAa,KAAK;AAE9B,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC,8BAAC,oBAAiB,GACpB;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/defaultProps.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { memo } from 'react';\nimport { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from '@elliemae/ds-icons';\nimport type { DSAccordionInternalsT } from './sharedTypes.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\n\nconst DefaultIconClosed = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n isDSMobile ? <ChevronRight width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadRight width=\"20px\" />,\n);\n\nconst DefaultIconOpen = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n isDSMobile ? <ChevronDown width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadDown width=\"20px\" />,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const defaultProps: DSAccordionT.DefaultProps = {\n containerProps: {},\n allowMultipleOpen: false,\n onChange: noop,\n children: [],\n isDSMobile: false,\n};\n\nexport const accordionItemDefaultProps: DSAccordionT.ItemDefaultProps = {\n iconClosed: DefaultIconClosed,\n iconOpened: DefaultIconOpen,\n title: '',\n customActions: [],\n disabled: false,\n xStyledPropsContent: {},\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACMR;AANf,SAAgB,YAAY;AAC5B,SAAS,gBAAgB,eAAe,cAAc,mBAAmB;AAIzE,MAAM,oBAAoB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACnD,aAAa,oBAAC,gBAAa,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,kBAAe,OAAM,QAAO;AAC7G;AAEA,MAAM,kBAAkB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACjD,aAAa,oBAAC,eAAY,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,iBAAc,OAAM,QAAO;AAC3G;AAGA,MAAM,OAAO,MAAY;AAAC;AAEnB,MAAM,eAA0C;AAAA,EACrD,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,YAAY;AACd;AAEO,MAAM,4BAA2D;AAAA,EACtE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,qBAAqB,CAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { memo } from 'react';\nimport { ArrowheadRight, ArrowheadDown, ChevronRight, ChevronDown } from '@elliemae/ds-icons';\nimport type { DSAccordionInternalsT } from './sharedTypes.js';\nimport type { DSAccordionT } from './react-desc-prop-types.js';\n\nconst DefaultIconClosed = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n isDSMobile ? <ChevronRight width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadRight width=\"20px\" />,\n);\n\nconst DefaultIconOpen = memo(({ isDSMobile = false }: DSAccordionInternalsT.DefaultIconProps) =>\n isDSMobile ? <ChevronDown width=\"20px\" color={['brand-primary', '800']} /> : <ArrowheadDown width=\"20px\" />,\n);\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\n\nexport const defaultProps: DSAccordionT.DefaultProps = {\n containerProps: {},\n allowMultipleOpen: false,\n onChange: noop,\n children: [],\n isDSMobile: false,\n};\n\nexport const accordionItemDefaultProps: DSAccordionT.ItemDefaultProps = {\n iconClosed: DefaultIconClosed,\n iconOpened: DefaultIconOpen,\n title: '',\n customActions: [],\n disabled: false,\n xStyledPropsContent: {},\n keepContentMounted: false,\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACMR;AANf,SAAgB,YAAY;AAC5B,SAAS,gBAAgB,eAAe,cAAc,mBAAmB;AAIzE,MAAM,oBAAoB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACnD,aAAa,oBAAC,gBAAa,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,kBAAe,OAAM,QAAO;AAC7G;AAEA,MAAM,kBAAkB;AAAA,EAAK,CAAC,EAAE,aAAa,MAAM,MACjD,aAAa,oBAAC,eAAY,OAAM,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,iBAAc,OAAM,QAAO;AAC3G;AAGA,MAAM,OAAO,MAAY;AAAC;AAEnB,MAAM,eAA0C;AAAA,EACrD,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,UAAU,CAAC;AAAA,EACX,YAAY;AACd;AAEO,MAAM,4BAA2D;AAAA,EACtE,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,eAAe,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,qBAAqB,CAAC;AAAA,EACtB,oBAAoB;AACtB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
+
const DSAccordionName = "DSAccordion";
|
|
4
|
+
const DSAccordionSlots = {
|
|
5
|
+
CONTAINER: "root",
|
|
6
|
+
ITEM_CONTAINER: "item-container",
|
|
7
|
+
ITEM_HEADER_CONTAINER: "item-header-container",
|
|
8
|
+
ITEM_HEADER_ADDON: "item-header-addon",
|
|
9
|
+
ITEM_HEADER_TITLE_CONTAINER: "item-header-titles-container",
|
|
10
|
+
ITEM_HEADER_PRIMARY_TITLE: "item-header-primary-title",
|
|
11
|
+
ITEM_HEADER_SECONDARY_TITLE: "item-header-secondary-title",
|
|
12
|
+
ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: "item-header-custom-actions-container",
|
|
13
|
+
ITEM_HEADER_TOOLTIP: "item-header-tooltip",
|
|
14
|
+
ITEM_CONTENT_CONTAINER: "item-content-container"
|
|
15
|
+
};
|
|
16
|
+
const DSAccordionDataTestid = {
|
|
17
|
+
...slotObjectToDataTestIds(DSAccordionName, DSAccordionSlots),
|
|
18
|
+
ITEM_CONTENT_CONTAINER: "ds-accordion_item-content",
|
|
19
|
+
ITEM_HEADER_CONTAINER: "ds-accordion_item-header",
|
|
20
|
+
ITEM_CONTAINER: "ds-accordion_item",
|
|
21
|
+
CONTAINER: "ds-accordion_group"
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
DSAccordionDataTestid,
|
|
25
|
+
DSAccordionName,
|
|
26
|
+
DSAccordionSlots
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=DSAccordionDefinitions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSAccordionDefinitions.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSAccordionName = 'DSAccordion';\n\nexport const DSAccordionSlots = {\n CONTAINER: 'root',\n ITEM_CONTAINER: 'item-container',\n ITEM_HEADER_CONTAINER: 'item-header-container',\n ITEM_HEADER_ADDON: 'item-header-addon',\n ITEM_HEADER_TITLE_CONTAINER: 'item-header-titles-container',\n ITEM_HEADER_PRIMARY_TITLE: 'item-header-primary-title',\n ITEM_HEADER_SECONDARY_TITLE: 'item-header-secondary-title',\n ITEM_HEADER_CUSTOM_ACTIONS_CONTAINER: 'item-header-custom-actions-container',\n ITEM_HEADER_TOOLTIP: 'item-header-tooltip',\n ITEM_CONTENT_CONTAINER: 'item-content-container',\n};\n\nexport const DSAccordionDataTestid = {\n ...slotObjectToDataTestIds(DSAccordionName, DSAccordionSlots),\n ITEM_CONTENT_CONTAINER: 'ds-accordion_item-content',\n ITEM_HEADER_CONTAINER: 'ds-accordion_item-header',\n ITEM_CONTAINER: 'ds-accordion_item',\n CONTAINER: 'ds-accordion_group',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,sCAAsC;AAAA,EACtC,qBAAqB;AAAA,EACrB,wBAAwB;AAC1B;AAEO,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,iBAAiB,gBAAgB;AAAA,EAC5D,wBAAwB;AAAA,EACxB,uBAAuB;AAAA,EACvB,gBAAgB;AAAA,EAChB,WAAW;AACb;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSAccordionDefinitions.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {} from '@xstyled/system';\nimport {} from '@xstyled/util';\nexport * from './DSAccordion.js';\nexport * from './parts/accordionItem/DSAccordionItem.js';\nexport * from './exported-related/index.js';\n\nexport { default } from './DSAccordion.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,WAAAA,gBAAe;",
|
|
6
6
|
"names": ["default"]
|
|
7
7
|
}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import React2, { useContext } from "react";
|
|
3
|
+
import React2, { useCallback, useContext } from "react";
|
|
4
4
|
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
5
5
|
import { DSAccordionContext } from "../../DSAccordionCTX.js";
|
|
6
|
-
import { DSAccordionDataTestid } from "../../exported-related/
|
|
6
|
+
import { DSAccordionDataTestid } from "../../exported-related/DSAccordionDefinitions.js";
|
|
7
7
|
import { StyledContainer } from "./styles.js";
|
|
8
|
+
import { omit } from "lodash";
|
|
8
9
|
const AccordionContent = () => {
|
|
9
|
-
const {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
const { props } = useContext(DSAccordionContext);
|
|
11
|
+
const getOwnerProps = useCallback(() => props, [props]);
|
|
12
|
+
const getOwnerPropsArguments = useCallback(() => ({}), []);
|
|
13
|
+
const { containerProps, children, ...rest } = props;
|
|
14
|
+
const restWithoutOnChange = omit(rest, "onChange");
|
|
12
15
|
const childrenWithIndex = [];
|
|
13
|
-
const xstyledAttrs = useGetXstyledProps(
|
|
14
|
-
const globalAttrs = useGetGlobalAttributes(
|
|
16
|
+
const xstyledAttrs = useGetXstyledProps(restWithoutOnChange);
|
|
17
|
+
const globalAttrs = useGetGlobalAttributes(restWithoutOnChange);
|
|
15
18
|
React2.Children.forEach(
|
|
16
19
|
children,
|
|
17
20
|
(child, index) => childrenWithIndex.push(
|
|
@@ -20,7 +23,18 @@ const AccordionContent = () => {
|
|
|
20
23
|
})
|
|
21
24
|
)
|
|
22
25
|
);
|
|
23
|
-
return /* @__PURE__ */ jsx(
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
27
|
+
StyledContainer,
|
|
28
|
+
{
|
|
29
|
+
"data-testid": DSAccordionDataTestid.CONTAINER,
|
|
30
|
+
...containerProps,
|
|
31
|
+
...globalAttrs,
|
|
32
|
+
...xstyledAttrs,
|
|
33
|
+
getOwnerProps,
|
|
34
|
+
getOwnerPropsArguments,
|
|
35
|
+
children: childrenWithIndex
|
|
36
|
+
}
|
|
37
|
+
);
|
|
24
38
|
};
|
|
25
39
|
export {
|
|
26
40
|
AccordionContent
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/accordionContent/AccordionContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { DSAccordionContext } from '../../DSAccordionCTX.js';\nimport { DSAccordionDataTestid } from '../../exported-related/DSAccordionDefinitions.js';\nimport { StyledContainer } from './styles.js';\nimport type { DSAccordionT } from '../../react-desc-prop-types.js';\nimport { omit } from 'lodash';\n\nexport const AccordionContent = (): JSX.Element => {\n const { props } = useContext(DSAccordionContext);\n\n const getOwnerProps = useCallback(() => props, [props]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n const { containerProps, children, ...rest } = props;\n\n const restWithoutOnChange = omit(rest, 'onChange');\n\n const childrenWithIndex: React.ReactElement<DSAccordionT.InternalItemProps>[] = [];\n\n const xstyledAttrs = useGetXstyledProps(restWithoutOnChange);\n\n const globalAttrs = useGetGlobalAttributes(restWithoutOnChange);\n\n React.Children.forEach(children, (child, index) =>\n childrenWithIndex.push(\n React.cloneElement(child, {\n dsIndex: index,\n }),\n ),\n );\n\n return (\n <StyledContainer\n data-testid={DSAccordionDataTestid.CONTAINER}\n {...containerProps}\n {...globalAttrs}\n {...xstyledAttrs}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {childrenWithIndex}\n </StyledContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiCnB;AAjCJ,OAAOA,UAAS,aAAa,kBAAkB;AAC/C,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAEhC,SAAS,YAAY;AAEd,MAAM,mBAAmB,MAAmB;AACjD,QAAM,EAAE,MAAM,IAAI,WAAW,kBAAkB;AAE/C,QAAM,gBAAgB,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,EAAE,gBAAgB,UAAU,GAAG,KAAK,IAAI;AAE9C,QAAM,sBAAsB,KAAK,MAAM,UAAU;AAEjD,QAAM,oBAA0E,CAAC;AAEjF,QAAM,eAAe,mBAAmB,mBAAmB;AAE3D,QAAM,cAAc,uBAAuB,mBAAmB;AAE9D,EAAAA,OAAM,SAAS;AAAA,IAAQ;AAAA,IAAU,CAAC,OAAO,UACvC,kBAAkB;AAAA,MAChBA,OAAM,aAAa,OAAO;AAAA,QACxB,SAAS;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,sBAAsB;AAAA,MAClC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|