@neo4j-ndl/react 4.5.4 → 4.5.5
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.
|
@@ -101,8 +101,8 @@ const AccordionComponent = function AccordionComponent(_a) {
|
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
103
|
const classes = (0, classnames_1.default)('ndl-accordion', className);
|
|
104
|
-
|
|
105
|
-
const { expandedItemId } =
|
|
104
|
+
// Destructure and omit keys from DOM spread
|
|
105
|
+
const _b = restProps, { expandedItemIds, expandedItemId } = _b, restAccordionProps = __rest(_b, ["expandedItemIds", "expandedItemId"]);
|
|
106
106
|
const contextValue = isMultiple
|
|
107
107
|
? {
|
|
108
108
|
expandedItemIds,
|
|
@@ -114,7 +114,7 @@ const AccordionComponent = function AccordionComponent(_a) {
|
|
|
114
114
|
isMultiple,
|
|
115
115
|
onChange,
|
|
116
116
|
};
|
|
117
|
-
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style, ref: accordionRef, onKeyDown: handleKeyDown, role: "presentation" },
|
|
117
|
+
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style, ref: accordionRef, onKeyDown: handleKeyDown, role: "presentation" }, restAccordionProps, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(accordion_context_1.AccordionContext.Provider, { value: contextValue, children: children }) })));
|
|
118
118
|
};
|
|
119
119
|
const createItemId = (type, id) => `ndl-accordionitem${type}id-${id}`;
|
|
120
120
|
const BaseAccordionItem = ({ itemId, children, title, className = '', arrowPosition = 'leading', isDisabled = false, onExpandedChange, htmlAttributes, style, as, titleTypographyVariant = 'subheading-medium', hasDivider = true, trailingContent, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n type AccordionIsMultiple,\n type AccordionIsNotMultiple,\n type AccordionItemId,\n type AccordionItemProps,\n type AccordionProps,\n type ClassicItemProps,\n type IsMultiple,\n type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n Item = '.ndl-accordion-item',\n ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n accordionElement: Element,\n selector: string,\n direction: 'next' | 'prev' = 'next',\n): Element | null => {\n const itemParent = accordionElement.closest(AccordionSelector.Item);\n if (!itemParent) {\n return null;\n }\n\n return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n children,\n as,\n isMultiple,\n onChange,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n const accordionRef = useRef<U>(null);\n\n useImperativeHandle(ref, () => accordionRef.current!);\n\n const Component: React.ElementType = as || 'div';\n\n // The following function includes code needed to be\n // able to navigate with the arrow keys (not tab).\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const accordionElement = accordionRef.current;\n if (!accordionElement) {\n return;\n }\n const activeElement = document.activeElement as HTMLElement;\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'next',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'prev',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n activeElement.click();\n }\n };\n\n const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n const accordionButton = accordionHtmlElement\n .getElementsByClassName('ndl-accordion-item-header-button')\n .item(0);\n\n if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n accordionButton.focus();\n }\n };\n\n const classes = classNames('ndl-accordion', className);\n\n const { expandedItemIds } = restProps as AccordionIsMultiple<T>;\n const { expandedItemId } = restProps as AccordionIsNotMultiple<T>;\n\n const contextValue = isMultiple\n ? ({\n expandedItemIds,\n isMultiple,\n onChange,\n } as IsMultiple<T>)\n : ({\n expandedItemId,\n isMultiple,\n onChange,\n } as IsNotMultiple<T>);\n\n return (\n <Component\n className={classes}\n style={style}\n ref={accordionRef}\n onKeyDown={handleKeyDown}\n role=\"presentation\"\n {...restProps}\n {...htmlAttributes}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </Component>\n );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n itemId,\n children,\n title,\n className = '',\n arrowPosition = 'leading',\n isDisabled = false,\n onExpandedChange,\n htmlAttributes,\n style,\n as,\n titleTypographyVariant = 'subheading-medium',\n hasDivider = true,\n trailingContent,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const innerContentRef = useRef<HTMLDivElement>(null);\n const itemElementId = createItemId('item', itemId);\n const headerElementId = createItemId('header', itemId);\n const buttonElementId = createItemId('button', itemId);\n const panelElementId = createItemId('panel', itemId);\n const Component: React.ElementType = as || 'div';\n\n const context = useAccordionContext();\n const { isMultiple } = context;\n\n const isExpanded = isMultiple\n ? context.expandedItemIds.includes(itemId)\n : context.expandedItemId === itemId;\n\n const handleOnClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n // Custom callback to call.\n if (onExpandedChange !== undefined) {\n onExpandedChange(!isExpanded);\n }\n\n if (isMultiple) {\n const { expandedItemIds, onChange }: IsMultiple<T> = context;\n // Multiple expanded.\n if (isExpanded) {\n // Remove from list.\n const newArray: T[] = expandedItemIds.filter(\n (activeId) => activeId !== itemId,\n );\n onChange(newArray);\n } else if (!isExpanded) {\n // Add to list.\n const newArray = [...expandedItemIds];\n newArray.push(itemId);\n onChange(newArray);\n }\n } else {\n const { onChange }: IsNotMultiple<T> = context;\n // Single expanded.\n if (isExpanded) {\n // Set null.\n onChange(null);\n } else if (!isExpanded) {\n // Set to id.\n onChange(itemId);\n }\n }\n\n // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n document.activeElement?.parentElement?.focus();\n }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n const classes = classNames('ndl-accordion-item', className, {\n 'ndl-accordion-item-disabled': isDisabled,\n 'ndl-accordion-item-expanded': isExpanded,\n });\n\n const headerClasses = classNames('ndl-accordion-item-header', {\n 'ndl-accordion-item-header-disabled': isDisabled,\n });\n\n const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n 'ndl-accordion-item-header-icon-wrapper-leading':\n arrowPosition === 'leading',\n });\n\n const buttonClasses = classNames('ndl-accordion-item-header-button', {\n 'ndl-accordion-item-header-button-disabled': isDisabled,\n });\n\n const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n 'ndl-accordion-item-header-button-title': isDisabled,\n 'ndl-accordion-item-header-button-title-leading':\n arrowPosition === 'leading',\n });\n\n const contentClasses = classNames('ndl-accordion-item-content', {\n 'ndl-accordion-item-content-expanded': isExpanded,\n 'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n });\n\n return (\n <Component\n className={classes}\n style={style}\n id={itemElementId}\n {...htmlAttributes}\n >\n <div className={headerClasses} id={headerElementId}>\n <button\n id={buttonElementId}\n onClick={handleOnClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n aria-disabled={isDisabled}\n aria-label={title}\n aria-controls={panelElementId}\n disabled={isDisabled}\n >\n <span className={iconClasses}>\n <Typography\n variant={titleTypographyVariant}\n className={titleClasses}\n htmlAttributes={{\n 'aria-level': 2,\n role: 'heading',\n }}\n >\n {title}\n </Typography>\n\n <ChevronDownIconOutline\n className={classNames('ndl-accordion-item-header-icon', {\n '-n-rotate-180': isExpanded,\n })}\n />\n </span>\n </button>\n {trailingContent && (\n <Typography as=\"div\" variant=\"body-medium\">\n {trailingContent}\n </Typography>\n )}\n </div>\n\n <div\n id={panelElementId}\n ref={contentRef}\n className={contentClasses}\n aria-hidden={!isExpanded}\n aria-labelledby={buttonElementId}\n role=\"region\"\n >\n {/* The <div> element has a child <button> element that allows keyboard interaction */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={innerContentRef}\n className=\"ndl-accordion-item-content-inner\"\n onKeyDown={(event) => event.stopPropagation()}\n >\n <Typography\n variant=\"body-medium\"\n className=\"n-text-neutral-text-weak\"\n as=\"div\"\n >\n {children}\n </Typography>\n </div>\n </div>\n {hasDivider && <Divider />}\n </Component>\n );\n};\n\nconst AccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-classic', className);\n\n return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n AccordionItemProps<T>,\n 'hasDivider'\n>;\n\nconst CleanItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-clean', className);\n\n return (\n <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n CleanItem: CleanItem,\n Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n type AccordionItemId,\n type AccordionItemProps,\n type AccordionProps,\n type ClassicItemProps,\n type IsMultiple,\n type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n Item = '.ndl-accordion-item',\n ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n accordionElement: Element,\n selector: string,\n direction: 'next' | 'prev' = 'next',\n): Element | null => {\n const itemParent = accordionElement.closest(AccordionSelector.Item);\n if (!itemParent) {\n return null;\n }\n\n return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n children,\n as,\n isMultiple,\n onChange,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n const accordionRef = useRef<U>(null);\n\n useImperativeHandle(ref, () => accordionRef.current!);\n\n const Component: React.ElementType = as || 'div';\n\n // The following function includes code needed to be\n // able to navigate with the arrow keys (not tab).\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const accordionElement = accordionRef.current;\n if (!accordionElement) {\n return;\n }\n const activeElement = document.activeElement as HTMLElement;\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'next',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'prev',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n activeElement.click();\n }\n };\n\n const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n const accordionButton = accordionHtmlElement\n .getElementsByClassName('ndl-accordion-item-header-button')\n .item(0);\n\n if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n accordionButton.focus();\n }\n };\n\n const classes = classNames('ndl-accordion', className);\n\n // Destructure and omit keys from DOM spread\n const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n restProps as Record<string, unknown> as {\n expandedItemIds?: T[];\n expandedItemId?: T | null;\n [key: string]: unknown;\n };\n\n const contextValue = isMultiple\n ? ({\n expandedItemIds,\n isMultiple,\n onChange,\n } as IsMultiple<T>)\n : ({\n expandedItemId,\n isMultiple,\n onChange,\n } as IsNotMultiple<T>);\n\n return (\n <Component\n className={classes}\n style={style}\n ref={accordionRef}\n onKeyDown={handleKeyDown}\n role=\"presentation\"\n {...restAccordionProps}\n {...htmlAttributes}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </Component>\n );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n itemId,\n children,\n title,\n className = '',\n arrowPosition = 'leading',\n isDisabled = false,\n onExpandedChange,\n htmlAttributes,\n style,\n as,\n titleTypographyVariant = 'subheading-medium',\n hasDivider = true,\n trailingContent,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const innerContentRef = useRef<HTMLDivElement>(null);\n const itemElementId = createItemId('item', itemId);\n const headerElementId = createItemId('header', itemId);\n const buttonElementId = createItemId('button', itemId);\n const panelElementId = createItemId('panel', itemId);\n const Component: React.ElementType = as || 'div';\n\n const context = useAccordionContext();\n const { isMultiple } = context;\n\n const isExpanded = isMultiple\n ? context.expandedItemIds.includes(itemId)\n : context.expandedItemId === itemId;\n\n const handleOnClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n // Custom callback to call.\n if (onExpandedChange !== undefined) {\n onExpandedChange(!isExpanded);\n }\n\n if (isMultiple) {\n const { expandedItemIds, onChange }: IsMultiple<T> = context;\n // Multiple expanded.\n if (isExpanded) {\n // Remove from list.\n const newArray: T[] = expandedItemIds.filter(\n (activeId) => activeId !== itemId,\n );\n onChange(newArray);\n } else if (!isExpanded) {\n // Add to list.\n const newArray = [...expandedItemIds];\n newArray.push(itemId);\n onChange(newArray);\n }\n } else {\n const { onChange }: IsNotMultiple<T> = context;\n // Single expanded.\n if (isExpanded) {\n // Set null.\n onChange(null);\n } else if (!isExpanded) {\n // Set to id.\n onChange(itemId);\n }\n }\n\n // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n document.activeElement?.parentElement?.focus();\n }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n const classes = classNames('ndl-accordion-item', className, {\n 'ndl-accordion-item-disabled': isDisabled,\n 'ndl-accordion-item-expanded': isExpanded,\n });\n\n const headerClasses = classNames('ndl-accordion-item-header', {\n 'ndl-accordion-item-header-disabled': isDisabled,\n });\n\n const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n 'ndl-accordion-item-header-icon-wrapper-leading':\n arrowPosition === 'leading',\n });\n\n const buttonClasses = classNames('ndl-accordion-item-header-button', {\n 'ndl-accordion-item-header-button-disabled': isDisabled,\n });\n\n const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n 'ndl-accordion-item-header-button-title': isDisabled,\n 'ndl-accordion-item-header-button-title-leading':\n arrowPosition === 'leading',\n });\n\n const contentClasses = classNames('ndl-accordion-item-content', {\n 'ndl-accordion-item-content-expanded': isExpanded,\n 'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n });\n\n return (\n <Component\n className={classes}\n style={style}\n id={itemElementId}\n {...htmlAttributes}\n >\n <div className={headerClasses} id={headerElementId}>\n <button\n id={buttonElementId}\n onClick={handleOnClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n aria-disabled={isDisabled}\n aria-label={title}\n aria-controls={panelElementId}\n disabled={isDisabled}\n >\n <span className={iconClasses}>\n <Typography\n variant={titleTypographyVariant}\n className={titleClasses}\n htmlAttributes={{\n 'aria-level': 2,\n role: 'heading',\n }}\n >\n {title}\n </Typography>\n\n <ChevronDownIconOutline\n className={classNames('ndl-accordion-item-header-icon', {\n '-n-rotate-180': isExpanded,\n })}\n />\n </span>\n </button>\n {trailingContent && (\n <Typography as=\"div\" variant=\"body-medium\">\n {trailingContent}\n </Typography>\n )}\n </div>\n\n <div\n id={panelElementId}\n ref={contentRef}\n className={contentClasses}\n aria-hidden={!isExpanded}\n aria-labelledby={buttonElementId}\n role=\"region\"\n >\n {/* The <div> element has a child <button> element that allows keyboard interaction */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={innerContentRef}\n className=\"ndl-accordion-item-content-inner\"\n onKeyDown={(event) => event.stopPropagation()}\n >\n <Typography\n variant=\"body-medium\"\n className=\"n-text-neutral-text-weak\"\n as=\"div\"\n >\n {children}\n </Typography>\n </div>\n </div>\n {hasDivider && <Divider />}\n </Component>\n );\n};\n\nconst AccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-classic', className);\n\n return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n AccordionItemProps<T>,\n 'hasDivider'\n>;\n\nconst CleanItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-clean', className);\n\n return (\n <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n CleanItem: CleanItem,\n Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
|
|
@@ -95,8 +95,8 @@ const AccordionComponent = function AccordionComponent(_a) {
|
|
|
95
95
|
}
|
|
96
96
|
};
|
|
97
97
|
const classes = classNames('ndl-accordion', className);
|
|
98
|
-
|
|
99
|
-
const { expandedItemId } =
|
|
98
|
+
// Destructure and omit keys from DOM spread
|
|
99
|
+
const _b = restProps, { expandedItemIds, expandedItemId } = _b, restAccordionProps = __rest(_b, ["expandedItemIds", "expandedItemId"]);
|
|
100
100
|
const contextValue = isMultiple
|
|
101
101
|
? {
|
|
102
102
|
expandedItemIds,
|
|
@@ -108,7 +108,7 @@ const AccordionComponent = function AccordionComponent(_a) {
|
|
|
108
108
|
isMultiple,
|
|
109
109
|
onChange,
|
|
110
110
|
};
|
|
111
|
-
return (_jsx(Component, Object.assign({ className: classes, style: style, ref: accordionRef, onKeyDown: handleKeyDown, role: "presentation" },
|
|
111
|
+
return (_jsx(Component, Object.assign({ className: classes, style: style, ref: accordionRef, onKeyDown: handleKeyDown, role: "presentation" }, restAccordionProps, htmlAttributes, { children: _jsx(AccordionContext.Provider, { value: contextValue, children: children }) })));
|
|
112
112
|
};
|
|
113
113
|
const createItemId = (type, id) => `ndl-accordionitem${type}id-${id}`;
|
|
114
114
|
const BaseAccordionItem = ({ itemId, children, title, className = '', arrowPosition = 'leading', isDisabled = false, onExpandedChange, htmlAttributes, style, as, titleTypographyVariant = 'subheading-medium', hasDivider = true, trailingContent, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n type AccordionIsMultiple,\n type AccordionIsNotMultiple,\n type AccordionItemId,\n type AccordionItemProps,\n type AccordionProps,\n type ClassicItemProps,\n type IsMultiple,\n type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n Item = '.ndl-accordion-item',\n ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n accordionElement: Element,\n selector: string,\n direction: 'next' | 'prev' = 'next',\n): Element | null => {\n const itemParent = accordionElement.closest(AccordionSelector.Item);\n if (!itemParent) {\n return null;\n }\n\n return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n children,\n as,\n isMultiple,\n onChange,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n const accordionRef = useRef<U>(null);\n\n useImperativeHandle(ref, () => accordionRef.current!);\n\n const Component: React.ElementType = as || 'div';\n\n // The following function includes code needed to be\n // able to navigate with the arrow keys (not tab).\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const accordionElement = accordionRef.current;\n if (!accordionElement) {\n return;\n }\n const activeElement = document.activeElement as HTMLElement;\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'next',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'prev',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n activeElement.click();\n }\n };\n\n const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n const accordionButton = accordionHtmlElement\n .getElementsByClassName('ndl-accordion-item-header-button')\n .item(0);\n\n if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n accordionButton.focus();\n }\n };\n\n const classes = classNames('ndl-accordion', className);\n\n const { expandedItemIds } = restProps as AccordionIsMultiple<T>;\n const { expandedItemId } = restProps as AccordionIsNotMultiple<T>;\n\n const contextValue = isMultiple\n ? ({\n expandedItemIds,\n isMultiple,\n onChange,\n } as IsMultiple<T>)\n : ({\n expandedItemId,\n isMultiple,\n onChange,\n } as IsNotMultiple<T>);\n\n return (\n <Component\n className={classes}\n style={style}\n ref={accordionRef}\n onKeyDown={handleKeyDown}\n role=\"presentation\"\n {...restProps}\n {...htmlAttributes}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </Component>\n );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n itemId,\n children,\n title,\n className = '',\n arrowPosition = 'leading',\n isDisabled = false,\n onExpandedChange,\n htmlAttributes,\n style,\n as,\n titleTypographyVariant = 'subheading-medium',\n hasDivider = true,\n trailingContent,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const innerContentRef = useRef<HTMLDivElement>(null);\n const itemElementId = createItemId('item', itemId);\n const headerElementId = createItemId('header', itemId);\n const buttonElementId = createItemId('button', itemId);\n const panelElementId = createItemId('panel', itemId);\n const Component: React.ElementType = as || 'div';\n\n const context = useAccordionContext();\n const { isMultiple } = context;\n\n const isExpanded = isMultiple\n ? context.expandedItemIds.includes(itemId)\n : context.expandedItemId === itemId;\n\n const handleOnClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n // Custom callback to call.\n if (onExpandedChange !== undefined) {\n onExpandedChange(!isExpanded);\n }\n\n if (isMultiple) {\n const { expandedItemIds, onChange }: IsMultiple<T> = context;\n // Multiple expanded.\n if (isExpanded) {\n // Remove from list.\n const newArray: T[] = expandedItemIds.filter(\n (activeId) => activeId !== itemId,\n );\n onChange(newArray);\n } else if (!isExpanded) {\n // Add to list.\n const newArray = [...expandedItemIds];\n newArray.push(itemId);\n onChange(newArray);\n }\n } else {\n const { onChange }: IsNotMultiple<T> = context;\n // Single expanded.\n if (isExpanded) {\n // Set null.\n onChange(null);\n } else if (!isExpanded) {\n // Set to id.\n onChange(itemId);\n }\n }\n\n // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n document.activeElement?.parentElement?.focus();\n }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n const classes = classNames('ndl-accordion-item', className, {\n 'ndl-accordion-item-disabled': isDisabled,\n 'ndl-accordion-item-expanded': isExpanded,\n });\n\n const headerClasses = classNames('ndl-accordion-item-header', {\n 'ndl-accordion-item-header-disabled': isDisabled,\n });\n\n const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n 'ndl-accordion-item-header-icon-wrapper-leading':\n arrowPosition === 'leading',\n });\n\n const buttonClasses = classNames('ndl-accordion-item-header-button', {\n 'ndl-accordion-item-header-button-disabled': isDisabled,\n });\n\n const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n 'ndl-accordion-item-header-button-title': isDisabled,\n 'ndl-accordion-item-header-button-title-leading':\n arrowPosition === 'leading',\n });\n\n const contentClasses = classNames('ndl-accordion-item-content', {\n 'ndl-accordion-item-content-expanded': isExpanded,\n 'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n });\n\n return (\n <Component\n className={classes}\n style={style}\n id={itemElementId}\n {...htmlAttributes}\n >\n <div className={headerClasses} id={headerElementId}>\n <button\n id={buttonElementId}\n onClick={handleOnClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n aria-disabled={isDisabled}\n aria-label={title}\n aria-controls={panelElementId}\n disabled={isDisabled}\n >\n <span className={iconClasses}>\n <Typography\n variant={titleTypographyVariant}\n className={titleClasses}\n htmlAttributes={{\n 'aria-level': 2,\n role: 'heading',\n }}\n >\n {title}\n </Typography>\n\n <ChevronDownIconOutline\n className={classNames('ndl-accordion-item-header-icon', {\n '-n-rotate-180': isExpanded,\n })}\n />\n </span>\n </button>\n {trailingContent && (\n <Typography as=\"div\" variant=\"body-medium\">\n {trailingContent}\n </Typography>\n )}\n </div>\n\n <div\n id={panelElementId}\n ref={contentRef}\n className={contentClasses}\n aria-hidden={!isExpanded}\n aria-labelledby={buttonElementId}\n role=\"region\"\n >\n {/* The <div> element has a child <button> element that allows keyboard interaction */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={innerContentRef}\n className=\"ndl-accordion-item-content-inner\"\n onKeyDown={(event) => event.stopPropagation()}\n >\n <Typography\n variant=\"body-medium\"\n className=\"n-text-neutral-text-weak\"\n as=\"div\"\n >\n {children}\n </Typography>\n </div>\n </div>\n {hasDivider && <Divider />}\n </Component>\n );\n};\n\nconst AccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-classic', className);\n\n return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n AccordionItemProps<T>,\n 'hasDivider'\n>;\n\nconst CleanItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-clean', className);\n\n return (\n <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n CleanItem: CleanItem,\n Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useCallback, useImperativeHandle, useRef } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { findUntil } from '../_common/utils';\nimport { Divider } from '../divider';\nimport { ChevronDownIconOutline } from '../icons';\nimport { Typography } from '../typography';\nimport { AccordionContext, useAccordionContext } from './accordion-context';\nimport {\n type AccordionItemId,\n type AccordionItemProps,\n type AccordionProps,\n type ClassicItemProps,\n type IsMultiple,\n type IsNotMultiple,\n} from './accordion-types';\n\nenum AccordionSelector {\n Item = '.ndl-accordion-item',\n ItemNotDisabled = '.ndl-accordion-item:not(.ndl-accordion-item-disabled)',\n}\n\nconst getAccordionItem = (\n accordionElement: Element,\n selector: string,\n direction: 'next' | 'prev' = 'next',\n): Element | null => {\n const itemParent = accordionElement.closest(AccordionSelector.Item);\n if (!itemParent) {\n return null;\n }\n\n return findUntil(direction, itemParent, selector);\n};\n\nconst AccordionComponent = function AccordionComponent<\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n children,\n as,\n isMultiple,\n onChange,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<U, AccordionProps<T>>) {\n const accordionRef = useRef<U>(null);\n\n useImperativeHandle(ref, () => accordionRef.current!);\n\n const Component: React.ElementType = as || 'div';\n\n // The following function includes code needed to be\n // able to navigate with the arrow keys (not tab).\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n const accordionElement = accordionRef.current;\n if (!accordionElement) {\n return;\n }\n const activeElement = document.activeElement as HTMLElement;\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'next',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n const newFocusedElement = getAccordionItem(\n activeElement,\n AccordionSelector.ItemNotDisabled,\n 'prev',\n );\n const newHeader = newFocusedElement?.firstElementChild;\n\n if (newHeader && newHeader instanceof HTMLElement) {\n focusAccordionItem(newHeader as HTMLElement);\n }\n } else if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n activeElement.click();\n }\n };\n\n const focusAccordionItem = (accordionHtmlElement: HTMLElement) => {\n const accordionButton = accordionHtmlElement\n .getElementsByClassName('ndl-accordion-item-header-button')\n .item(0);\n\n if (accordionButton !== null && accordionButton instanceof HTMLElement) {\n accordionButton.focus();\n }\n };\n\n const classes = classNames('ndl-accordion', className);\n\n // Destructure and omit keys from DOM spread\n const { expandedItemIds, expandedItemId, ...restAccordionProps } =\n restProps as Record<string, unknown> as {\n expandedItemIds?: T[];\n expandedItemId?: T | null;\n [key: string]: unknown;\n };\n\n const contextValue = isMultiple\n ? ({\n expandedItemIds,\n isMultiple,\n onChange,\n } as IsMultiple<T>)\n : ({\n expandedItemId,\n isMultiple,\n onChange,\n } as IsNotMultiple<T>);\n\n return (\n <Component\n className={classes}\n style={style}\n ref={accordionRef}\n onKeyDown={handleKeyDown}\n role=\"presentation\"\n {...restAccordionProps}\n {...htmlAttributes}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </Component>\n );\n};\n\nconst createItemId = (type: string, id: AccordionItemId) =>\n `ndl-accordionitem${type}id-${id}`;\n\nconst BaseAccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n itemId,\n children,\n title,\n className = '',\n arrowPosition = 'leading',\n isDisabled = false,\n onExpandedChange,\n htmlAttributes,\n style,\n as,\n titleTypographyVariant = 'subheading-medium',\n hasDivider = true,\n trailingContent,\n}: PolymorphicCommonProps<U, AccordionItemProps<T>>) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const innerContentRef = useRef<HTMLDivElement>(null);\n const itemElementId = createItemId('item', itemId);\n const headerElementId = createItemId('header', itemId);\n const buttonElementId = createItemId('button', itemId);\n const panelElementId = createItemId('panel', itemId);\n const Component: React.ElementType = as || 'div';\n\n const context = useAccordionContext();\n const { isMultiple } = context;\n\n const isExpanded = isMultiple\n ? context.expandedItemIds.includes(itemId)\n : context.expandedItemId === itemId;\n\n const handleOnClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n // Custom callback to call.\n if (onExpandedChange !== undefined) {\n onExpandedChange(!isExpanded);\n }\n\n if (isMultiple) {\n const { expandedItemIds, onChange }: IsMultiple<T> = context;\n // Multiple expanded.\n if (isExpanded) {\n // Remove from list.\n const newArray: T[] = expandedItemIds.filter(\n (activeId) => activeId !== itemId,\n );\n onChange(newArray);\n } else if (!isExpanded) {\n // Add to list.\n const newArray = [...expandedItemIds];\n newArray.push(itemId);\n onChange(newArray);\n }\n } else {\n const { onChange }: IsNotMultiple<T> = context;\n // Single expanded.\n if (isExpanded) {\n // Set null.\n onChange(null);\n } else if (!isExpanded) {\n // Set to id.\n onChange(itemId);\n }\n }\n\n // The W3 WAI-ARIA states that focus can only happen on the header not the header button.\n document.activeElement?.parentElement?.focus();\n }, [isExpanded, isMultiple, isDisabled, itemId, onExpandedChange, context]);\n\n const classes = classNames('ndl-accordion-item', className, {\n 'ndl-accordion-item-disabled': isDisabled,\n 'ndl-accordion-item-expanded': isExpanded,\n });\n\n const headerClasses = classNames('ndl-accordion-item-header', {\n 'ndl-accordion-item-header-disabled': isDisabled,\n });\n\n const iconClasses = classNames('ndl-accordion-item-header-icon-wrapper', {\n 'ndl-accordion-item-header-icon-wrapper-leading':\n arrowPosition === 'leading',\n });\n\n const buttonClasses = classNames('ndl-accordion-item-header-button', {\n 'ndl-accordion-item-header-button-disabled': isDisabled,\n });\n\n const titleClasses = classNames('ndl-accordion-item-header-button-title', {\n 'ndl-accordion-item-header-button-title': isDisabled,\n 'ndl-accordion-item-header-button-title-leading':\n arrowPosition === 'leading',\n });\n\n const contentClasses = classNames('ndl-accordion-item-content', {\n 'ndl-accordion-item-content-expanded': isExpanded,\n 'ndl-accordion-item-content-leading': arrowPosition === 'leading',\n });\n\n return (\n <Component\n className={classes}\n style={style}\n id={itemElementId}\n {...htmlAttributes}\n >\n <div className={headerClasses} id={headerElementId}>\n <button\n id={buttonElementId}\n onClick={handleOnClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n aria-disabled={isDisabled}\n aria-label={title}\n aria-controls={panelElementId}\n disabled={isDisabled}\n >\n <span className={iconClasses}>\n <Typography\n variant={titleTypographyVariant}\n className={titleClasses}\n htmlAttributes={{\n 'aria-level': 2,\n role: 'heading',\n }}\n >\n {title}\n </Typography>\n\n <ChevronDownIconOutline\n className={classNames('ndl-accordion-item-header-icon', {\n '-n-rotate-180': isExpanded,\n })}\n />\n </span>\n </button>\n {trailingContent && (\n <Typography as=\"div\" variant=\"body-medium\">\n {trailingContent}\n </Typography>\n )}\n </div>\n\n <div\n id={panelElementId}\n ref={contentRef}\n className={contentClasses}\n aria-hidden={!isExpanded}\n aria-labelledby={buttonElementId}\n role=\"region\"\n >\n {/* The <div> element has a child <button> element that allows keyboard interaction */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={innerContentRef}\n className=\"ndl-accordion-item-content-inner\"\n onKeyDown={(event) => event.stopPropagation()}\n >\n <Typography\n variant=\"body-medium\"\n className=\"n-text-neutral-text-weak\"\n as=\"div\"\n >\n {children}\n </Typography>\n </div>\n </div>\n {hasDivider && <Divider />}\n </Component>\n );\n};\n\nconst AccordionItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, ClassicItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-classic', className);\n\n return <BaseAccordionItem {...restProps} className={classes} />;\n};\nAccordionItem.displayName = 'Accordion.Item';\n\ntype CleanItemProps<T extends AccordionItemId> = Omit<\n AccordionItemProps<T>,\n 'hasDivider'\n>;\n\nconst CleanItem = <\n T extends AccordionItemId,\n U extends React.ElementType = 'div',\n>({\n className,\n ...restProps\n}: PolymorphicCommonProps<U, CleanItemProps<T>>) => {\n const classes = classNames('ndl-accordion-item-clean', className);\n\n return (\n <BaseAccordionItem {...restProps} className={classes} hasDivider={false} />\n );\n};\n\nCleanItem.displayName = 'Accordion.CleanItem';\n\nconst Accordion = Object.assign(AccordionComponent, {\n CleanItem: CleanItem,\n Item: AccordionItem,\n});\n\nexport { Accordion };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAM/D,OAAO,
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAM/D,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAkU3B,KAAK,cAAc,CAAC,CAAC,SAAS,eAAe,IAAI,IAAI,CACnD,kBAAkB,CAAC,CAAC,CAAC,EACrB,YAAY,CACb,CAAC;AAkBF,QAAA,MAAM,SAAS,IAlUb,CAAC,SAAS,eAAe,EACzB,CAAC,SAAS,KAAK,CAAC,WAAW,uGAW1B,sBAAsB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;;SAuS7C,CAAC,SAAS,eAAe,EACzB,CAAC,SAAS,KAAK,CAAC,WAAW,uCAI1B,sBAAsB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;;;;SAvB7C,CAAC,SAAS,eAAe,EACzB,CAAC,SAAS,KAAK,CAAC,WAAW,uCAI1B,sBAAsB,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;;;CA+B/C,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC"}
|