@danske/sapphire-react-lab 0.88.1 → 0.89.0
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/build/cjs/index.js +79 -50
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/index.js +1 -0
- package/build/esm/Accordion/index.js.map +1 -1
- package/build/esm/Accordion/src/Accordion.js +20 -9
- package/build/esm/Accordion/src/Accordion.js.map +1 -1
- package/build/esm/Accordion/src/AccordionContext.js +15 -0
- package/build/esm/Accordion/src/AccordionContext.js.map +1 -0
- package/build/esm/Accordion/src/AccordionItem.js +14 -6
- package/build/esm/Accordion/src/AccordionItem.js.map +1 -1
- package/build/esm/index.js +1 -0
- package/build/esm/index.js.map +1 -1
- package/build/index.d.ts +25 -2
- package/package.json +3 -3
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Accordion } from './src/Accordion.js';
|
|
2
2
|
import { AccordionHeading } from './src/AccordionHeading.js';
|
|
3
3
|
import { AccordionItem } from './src/AccordionItem.js';
|
|
4
|
+
export { AccordionContext } from './src/AccordionContext.js';
|
|
4
5
|
|
|
5
6
|
const _Accordion = Object.assign(Accordion, {
|
|
6
7
|
Heading: AccordionHeading,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/Accordion/index.ts"],"sourcesContent":["import { Accordion, type SapphireAccordionProps } from './src/Accordion';\nimport {\n AccordionHeading,\n SapphireAccordionHeadingProps,\n} from './src/AccordionHeading';\nimport {\n AccordionItem,\n type SapphireAccordionItemProps,\n} from './src/AccordionItem';\n\n/*\n * Before moving Accordion component to the core package, it's important to check on the\n * latest release of \"@react-aria/accordion\".\n * The hook and the component package are marked as \"pre-release\", so we can expect some changes.\n *\n * https://github.com/adobe/react-spectrum/issues/2801#issuecomment-1035377858\n * https://github.com/adobe/react-spectrum/discussions/6635#discussioncomment-9990027\n *\n * The current implementation is based on the SelectableCollection API, which creates bugs when\n * focusable items are used inside of the Accordion.Item.\n * E.g. https://jira.danskebank.com/browse/UC-3414 (fixed)\n * https://jira.danskebank.com/browse/UC-3545 (to do)\n *\n * Alternatively, we can re-implement the component.\n */\nconst _Accordion = Object.assign(Accordion, {\n Heading: AccordionHeading,\n Item: AccordionItem,\n});\n\nexport {\n _Accordion as Accordion,\n type SapphireAccordionProps,\n type SapphireAccordionItemProps,\n type SapphireAccordionHeadingProps,\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/Accordion/index.ts"],"sourcesContent":["import { Accordion, type SapphireAccordionProps } from './src/Accordion';\nimport {\n AccordionHeading,\n SapphireAccordionHeadingProps,\n} from './src/AccordionHeading';\nimport {\n AccordionItem,\n type SapphireAccordionItemProps,\n} from './src/AccordionItem';\nimport { AccordionContext } from './src/AccordionContext';\n\n/*\n * Before moving Accordion component to the core package, it's important to check on the\n * latest release of \"@react-aria/accordion\".\n * The hook and the component package are marked as \"pre-release\", so we can expect some changes.\n *\n * https://github.com/adobe/react-spectrum/issues/2801#issuecomment-1035377858\n * https://github.com/adobe/react-spectrum/discussions/6635#discussioncomment-9990027\n *\n * The current implementation is based on the SelectableCollection API, which creates bugs when\n * focusable items are used inside of the Accordion.Item.\n * E.g. https://jira.danskebank.com/browse/UC-3414 (fixed)\n * https://jira.danskebank.com/browse/UC-3545 (to do)\n *\n * Alternatively, we can re-implement the component.\n */\nconst _Accordion = Object.assign(Accordion, {\n Heading: AccordionHeading,\n Item: AccordionItem,\n});\n\nexport {\n _Accordion as Accordion,\n AccordionContext,\n type SapphireAccordionProps,\n type SapphireAccordionItemProps,\n type SapphireAccordionHeadingProps,\n};\n"],"names":[],"mappings":";;;;;AA0BM,MAAA,UAAA,GAAa,MAAO,CAAA,MAAA,CAAO,SAAW,EAAA;AAAA,EAC1C,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AAAA,CAAA;;;;"}
|
|
@@ -3,9 +3,10 @@ import styles from '@danske/sapphire-css/components/accordion/accordion.module.c
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
|
|
5
5
|
import { useAccordion } from '@react-aria/accordion';
|
|
6
|
-
import { useTreeState } from './useTreeState.js';
|
|
7
|
-
import { _AccordionItem } from './AccordionItem.js';
|
|
8
6
|
import { useObjectRef, mergeProps, filterDOMProps } from '@react-aria/utils';
|
|
7
|
+
import { _AccordionItem } from './AccordionItem.js';
|
|
8
|
+
import { AccordionContext } from './AccordionContext.js';
|
|
9
|
+
import { useTreeState } from './useTreeState.js';
|
|
9
10
|
|
|
10
11
|
var __defProp = Object.defineProperty;
|
|
11
12
|
var __defProps = Object.defineProperties;
|
|
@@ -42,29 +43,39 @@ const _Accordion = (_a, ref) => {
|
|
|
42
43
|
var _b = _a, {
|
|
43
44
|
expansionMode = "multiple",
|
|
44
45
|
headerLevel = 5,
|
|
45
|
-
hideLastDivider = false
|
|
46
|
+
hideLastDivider = false,
|
|
47
|
+
hasNegativeSideMargin = false,
|
|
48
|
+
sidePadding
|
|
46
49
|
} = _b, props = __objRest(_b, [
|
|
47
50
|
"expansionMode",
|
|
48
51
|
"headerLevel",
|
|
49
|
-
"hideLastDivider"
|
|
52
|
+
"hideLastDivider",
|
|
53
|
+
"hasNegativeSideMargin",
|
|
54
|
+
"sidePadding"
|
|
50
55
|
]);
|
|
51
56
|
useThemeCheck();
|
|
52
57
|
const { styleProps } = useSapphireStyleProps(props);
|
|
53
58
|
const state = useTreeState(__spreadProps(__spreadValues({}, props), { expansionMode }));
|
|
54
59
|
const forwardedRef = useObjectRef(ref);
|
|
55
60
|
const { accordionProps } = useAccordion(props, state, forwardedRef);
|
|
56
|
-
return /* @__PURE__ */ React.createElement(
|
|
61
|
+
return /* @__PURE__ */ React.createElement(AccordionContext.Provider, {
|
|
62
|
+
value: { sidePadding }
|
|
63
|
+
}, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(accordionProps, filterDOMProps(props, { labelable: true }))), {
|
|
64
|
+
ref: forwardedRef,
|
|
57
65
|
className: clsx(styles["sapphire-accordion"], {
|
|
58
|
-
[styles["sapphire-accordion--without-last-divider"]]: hideLastDivider
|
|
66
|
+
[styles["sapphire-accordion--without-last-divider"]]: hideLastDivider,
|
|
67
|
+
[styles["sapphire-accordion--negative-margin-self"]]: !sidePadding && hasNegativeSideMargin
|
|
59
68
|
}, styleProps.className),
|
|
60
|
-
|
|
61
|
-
|
|
69
|
+
style: __spreadValues(__spreadValues({}, sidePadding && hasNegativeSideMargin ? {
|
|
70
|
+
marginLeft: typeof sidePadding === "string" ? `calc(${sidePadding} * -1)` : `-${sidePadding}px`,
|
|
71
|
+
width: `calc(100% + calc(${sidePadding} * 2${typeof sidePadding === "string" ? "" : "px"}))`
|
|
72
|
+
} : {}), styleProps.style)
|
|
62
73
|
}), [...state.collection].map((item) => /* @__PURE__ */ React.createElement(_AccordionItem, {
|
|
63
74
|
headerLevel,
|
|
64
75
|
key: item.key,
|
|
65
76
|
item,
|
|
66
77
|
state
|
|
67
|
-
})));
|
|
78
|
+
}))));
|
|
68
79
|
};
|
|
69
80
|
const Accordion = forwardRef(_Accordion);
|
|
70
81
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../../src/Accordion/src/Accordion.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, forwardRef } from 'react';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport clsx from 'clsx';\nimport {\n HeadingProps,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport { CollectionBase, DOMProps, Expandable } from '@react-types/shared';\nimport { useAccordion } from '@react-aria/accordion';\nimport {
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../src/Accordion/src/Accordion.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, forwardRef } from 'react';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport clsx from 'clsx';\nimport {\n HeadingProps,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport { CollectionBase, DOMProps, Expandable } from '@react-types/shared';\nimport { useAccordion } from '@react-aria/accordion';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport { _AccordionItem } from './AccordionItem';\nimport { AccordionContext } from './AccordionContext';\nimport { TreeExpansionMode, useTreeState } from './useTreeState';\n\nexport interface SapphireAccordionProps<T>\n extends SapphireStyleProps,\n CollectionBase<T>,\n DOMProps,\n Expandable {\n /** Allow one or many expanded items\n * @default 'multiple'\n */\n expansionMode?: TreeExpansionMode;\n /** Set aria-level attribute for item's header. Accessibility requirement.\n * Defines the hierarchical level of an element within a page structure.\n * @default 5\n */\n headerLevel?: HeadingProps['level'];\n /**\n * Removes the divider after the last accordion item.\n * Useful when rendered in a container which already has borders.\n */\n hideLastDivider?: boolean;\n /**\n * Counter acts the side padding, so that accordion is shifted to the left with same amount\n * and having side padding * 2 added to width – resulting in full width accordion.\n * Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.\n * @example\n * ```tsx\n * <Accordion hasNegativeSideMargin>...</Accordion>\n * ```\n */\n hasNegativeSideMargin?: boolean;\n /**\n * Add custom sized padding to the sides of the accordion items.\n * @example\n * ```tsx\n * <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>\n * ```\n */\n sidePadding?: number | string;\n}\n\nconst _Accordion = <T extends object>(\n {\n expansionMode = 'multiple',\n headerLevel = 5,\n hideLastDivider = false,\n hasNegativeSideMargin = false,\n sidePadding,\n ...props\n }: SapphireAccordionProps<T>,\n ref: ForwardedRef<HTMLDivElement>\n) => {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n const state = useTreeState<T>({ ...props, expansionMode });\n const forwardedRef = useObjectRef<HTMLDivElement>(ref);\n\n const { accordionProps } = useAccordion(props, state, forwardedRef);\n\n return (\n <AccordionContext.Provider value={{ sidePadding }}>\n <div\n {...mergeProps(\n accordionProps,\n filterDOMProps(props, { labelable: true })\n )}\n ref={forwardedRef}\n className={clsx(\n styles['sapphire-accordion'],\n {\n [styles['sapphire-accordion--without-last-divider']]:\n hideLastDivider,\n [styles['sapphire-accordion--negative-margin-self']]:\n !sidePadding && hasNegativeSideMargin,\n },\n styleProps.className\n )}\n style={{\n ...(sidePadding && hasNegativeSideMargin\n ? {\n marginLeft:\n typeof sidePadding === 'string'\n ? `calc(${sidePadding} * -1)`\n : `-${sidePadding}px`,\n width: `calc(100% + calc(${sidePadding} * 2${\n typeof sidePadding === 'string' ? '' : 'px'\n }))`,\n }\n : {}),\n ...styleProps.style,\n }}\n >\n {[...state.collection].map((item) => (\n <_AccordionItem<T>\n headerLevel={headerLevel}\n key={item.key}\n item={item}\n state={state}\n />\n ))}\n </div>\n </AccordionContext.Provider>\n );\n};\n\nexport const Accordion = forwardRef(_Accordion) as <T extends object>(\n props: SapphireAccordionProps<T> & { ref?: Ref<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,MAAM,UAAA,GAAa,CACjB,EAAA,EAQA,GACG,KAAA;AATH,EACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAgB,aAAA,GAAA,UAAA;AAAA,IAChB,WAAc,GAAA,CAAA;AAAA,IACd,eAAkB,GAAA,KAAA;AAAA,IAClB,qBAAwB,GAAA,KAAA;AAAA,IACxB,WAAA;AAAA,GALF,GAAA,EAAA,EAMK,kBANL,EAMK,EAAA;AAAA,IALH,eAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,uBAAA;AAAA,IACA,aAAA;AAAA,GAAA,CAAA,CAAA;AAKF,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,KAAQ,GAAA,YAAA,CAAgB,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EAAL,EAAY,aAAA,EAAA,CAAA,CAAA,CAAA;AAC1C,EAAA,MAAM,eAAe,YAA6B,CAAA,GAAA,CAAA,CAAA;AAElD,EAAA,MAAM,EAAE,cAAA,EAAA,GAAmB,YAAa,CAAA,KAAA,EAAO,KAAO,EAAA,YAAA,CAAA,CAAA;AAEtD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,iBAAiB,QAAlB,EAAA;AAAA,IAA2B,OAAO,EAAE,WAAA,EAAA;AAAA,GAClC,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CACF,gBACA,cAAe,CAAA,KAAA,EAAO,EAAE,SAAA,EAAW,IAHvC,EAAA,CAAA,CAAA,CAAA,EAAA;AAAA,IAKE,GAAK,EAAA,YAAA;AAAA,IACL,SAAA,EAAW,IACT,CAAA,MAAA,CAAO,oBACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,0CACN,CAAA,GAAA,eAAA;AAAA,MACD,CAAA,MAAA,CAAO,0CACN,CAAA,GAAA,CAAC,WAAe,IAAA,qBAAA;AAAA,KAAA,EAEpB,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,KAAA,EAAO,cACD,CAAA,cAAA,CAAA,EAAA,EAAA,WAAA,IAAe,qBACf,GAAA;AAAA,MACE,YACE,OAAO,WAAA,KAAgB,QACnB,GAAA,CAAA,KAAA,EAAQ,sBACR,CAAI,CAAA,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,MACV,OAAO,CAAoB,iBAAA,EAAA,WAAA,CAAA,IAAA,EACzB,OAAO,WAAA,KAAgB,WAAW,EAAK,GAAA,IAAA,CAAA,EAAA,CAAA;AAAA,KAAA,GAG3C,KACD,UAAW,CAAA,KAAA,CAAA;AAAA,GAGf,CAAA,EAAA,CAAC,GAAG,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCACzB,cAAD,EAAA;AAAA,IACE,WAAA;AAAA,IACA,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA;AAQL,MAAM,YAAY,UAAW,CAAA,UAAA;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
|
+
|
|
3
|
+
const AccordionContext = React.createContext({
|
|
4
|
+
sidePadding: void 0
|
|
5
|
+
});
|
|
6
|
+
function useAccordionContext() {
|
|
7
|
+
const context = useContext(AccordionContext);
|
|
8
|
+
if (context) {
|
|
9
|
+
return context;
|
|
10
|
+
}
|
|
11
|
+
throw new Error("Accordion context can only be used within Accordion component.");
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { AccordionContext, useAccordionContext };
|
|
15
|
+
//# sourceMappingURL=AccordionContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionContext.js","sources":["../../../../src/Accordion/src/AccordionContext.ts"],"sourcesContent":["import React, { useContext } from 'react';\n\ninterface AccordionContextProps {\n sidePadding?: number | string;\n}\n\nexport const AccordionContext = React.createContext<AccordionContextProps>({\n sidePadding: undefined,\n});\n\nexport function useAccordionContext(): AccordionContextProps {\n const context = useContext(AccordionContext);\n if (context) {\n return context;\n }\n throw new Error(\n 'Accordion context can only be used within Accordion component.'\n );\n}\n"],"names":[],"mappings":";;AAMa,MAAA,gBAAA,GAAmB,MAAM,aAAqC,CAAA;AAAA,EACzE,WAAa,EAAA,KAAA,CAAA;AAAA,CAAA,EAAA;AAG8C,SAAA,mBAAA,GAAA;AAC3D,EAAA,MAAM,UAAU,UAAW,CAAA,gBAAA,CAAA,CAAA;AAC3B,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAET,EAAA,MAAM,IAAI,KACR,CAAA,gEAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useAccordionItem } from '@react-aria/accordion';
|
|
3
4
|
import { useFocusRing } from '@react-aria/focus';
|
|
5
|
+
import { useHover, usePress } from '@react-aria/interactions';
|
|
4
6
|
import { mergeProps } from '@react-aria/utils';
|
|
5
|
-
import
|
|
7
|
+
import { Item } from '@react-stately/collections';
|
|
6
8
|
import styles from '@danske/sapphire-css/components/accordion/accordion.module.css';
|
|
7
9
|
import { Icon } from '@danske/sapphire-react';
|
|
8
10
|
import { ChevronDown } from '@danske/sapphire-icons/react';
|
|
9
|
-
import {
|
|
10
|
-
import { Item } from '@react-stately/collections';
|
|
11
|
+
import { useAccordionContext } from './AccordionContext.js';
|
|
11
12
|
|
|
12
13
|
var __defProp = Object.defineProperty;
|
|
13
14
|
var __defProps = Object.defineProperties;
|
|
@@ -28,8 +29,13 @@ var __spreadValues = (a, b) => {
|
|
|
28
29
|
return a;
|
|
29
30
|
};
|
|
30
31
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
32
|
+
const customPaddingStyleProps = (sidePadding) => ({
|
|
33
|
+
paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
|
|
34
|
+
paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
|
|
35
|
+
});
|
|
31
36
|
function _AccordionItem(props) {
|
|
32
37
|
const { state, item } = props;
|
|
38
|
+
const { sidePadding } = useAccordionContext();
|
|
33
39
|
const isOpen = state.expandedKeys.has(item.key);
|
|
34
40
|
const isDisabled = state.disabledKeys.has(item.key);
|
|
35
41
|
const { isHovered, hoverProps } = useHover({ isDisabled });
|
|
@@ -55,14 +61,16 @@ function _AccordionItem(props) {
|
|
|
55
61
|
[styles["is-focus"]]: isFocusVisible,
|
|
56
62
|
[styles["is-hover"]]: isHovered,
|
|
57
63
|
[styles["is-active"]]: isPressed
|
|
58
|
-
})
|
|
64
|
+
}),
|
|
65
|
+
style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
|
|
59
66
|
}), item.props.heading, /* @__PURE__ */ React.createElement("div", {
|
|
60
67
|
className: clsx(styles["sapphire-accordion__item-arrow"])
|
|
61
68
|
}, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(ChevronDown, null))))), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(regionProps, { onKeyDown })), {
|
|
62
69
|
"aria-hidden": !isOpen,
|
|
63
70
|
className: clsx(styles["sapphire-accordion__item-content-wrapper"])
|
|
64
71
|
}), /* @__PURE__ */ React.createElement("div", {
|
|
65
|
-
className: clsx(styles["sapphire-accordion__item-content"])
|
|
72
|
+
className: clsx(styles["sapphire-accordion__item-content"]),
|
|
73
|
+
style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
|
|
66
74
|
}, item.props.children)));
|
|
67
75
|
}
|
|
68
76
|
const AccordionItem = Item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sources":["../../../../src/Accordion/src/AccordionItem.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","sources":["../../../../src/Accordion/src/AccordionItem.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useHover, usePress } from '@react-aria/interactions';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item } from '@react-stately/collections';\nimport { TreeState } from '@react-stately/tree';\nimport { Node, ItemProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport { HeadingProps, Icon } from '@danske/sapphire-react';\nimport { ChevronDown } from '@danske/sapphire-icons/react';\n\nimport { useAccordionContext } from './AccordionContext';\n\ninterface AccordionItemProps<T> {\n item: Node<T>;\n state: TreeState<T>;\n headerLevel: HeadingProps['level'];\n}\n\nconst customPaddingStyleProps = (sidePadding: number | string) => ({\n paddingLeft:\n typeof sidePadding === 'string' ? sidePadding : `${sidePadding}px`,\n paddingRight:\n typeof sidePadding === 'string' ? sidePadding : `${sidePadding}px`,\n});\n\nexport function _AccordionItem<T>(props: AccordionItemProps<T>): JSX.Element {\n const { state, item } = props;\n const { sidePadding } = useAccordionContext();\n\n const isOpen = state.expandedKeys.has(item.key);\n const isDisabled = state.disabledKeys.has(item.key);\n\n const { isHovered, hoverProps } = useHover({ isDisabled });\n const { pressProps, isPressed } = usePress({ isDisabled });\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const ref = useRef<HTMLButtonElement>(null);\n\n const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);\n\n /**\n * Fixes the bug when the onKeyDown event handler set on the useSelectableCollection\n * (a dependency of useAccordion) interfered with the keyboard events handling\n * and blocked the usage of some keyboard shortcuts for Accordion.Item children.\n * E.g. changing DateField value with Arrow key or text selection with Shift+ArrowUp.\n *\n * Source:\n * https://github.com/adobe/react-spectrum/blob/546ffa41f7d1d3a566950a14d8f46cf726891220/packages/%40react-aria/selection/src/useSelectableCollection.ts#L178\n */\n const onKeyDown = (e: React.KeyboardEvent) => {\n e.stopPropagation();\n };\n\n return (\n <div\n className={clsx(styles['sapphire-accordion__item'], {\n [styles['sapphire-accordion__item--open']]: isOpen,\n [styles['is-disabled']]: isDisabled,\n })}\n >\n <div role=\"heading\" aria-level={props.headerLevel}>\n <button\n {...mergeProps(buttonProps, hoverProps, pressProps, focusProps)}\n aria-disabled={isDisabled}\n ref={ref}\n className={clsx(\n styles['sapphire-accordion__item-header'],\n styles['js-focus'],\n styles['js-hover'],\n {\n [styles['is-focus']]: isFocusVisible,\n [styles['is-hover']]: isHovered,\n [styles['is-active']]: isPressed,\n }\n )}\n style={sidePadding ? customPaddingStyleProps(sidePadding) : {}}\n >\n {item.props.heading}\n <div className={clsx(styles['sapphire-accordion__item-arrow'])}>\n <Icon>\n <ChevronDown />\n </Icon>\n </div>\n </button>\n </div>\n <div\n {...mergeProps(regionProps, { onKeyDown })}\n aria-hidden={!isOpen}\n className={clsx(styles['sapphire-accordion__item-content-wrapper'])}\n >\n <div\n className={clsx(styles['sapphire-accordion__item-content'])}\n style={sidePadding ? customPaddingStyleProps(sidePadding) : {}}\n >\n {item.props.children}\n </div>\n </div>\n </div>\n );\n}\n\nexport interface SapphireAccordionItemProps<T>\n extends Omit<ItemProps<T>, 'title'> {\n heading: ReactNode;\n}\n\nexport const AccordionItem = Item as <T>(\n props: SapphireAccordionItemProps<T>\n) => JSX.Element;\n"],"names":[],"mappings":"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"}
|
package/build/esm/index.js
CHANGED
|
@@ -24,4 +24,5 @@ export { TagGroup } from './TagGroup/src/TagGroup.js';
|
|
|
24
24
|
export { TagItem } from './TagGroup/src/TagItem.js';
|
|
25
25
|
export { LabeledValue } from './LabeledValue/src/LabeledValue.js';
|
|
26
26
|
export { useLocale } from '@react-aria/i18n';
|
|
27
|
+
export { AccordionContext } from './Accordion/src/AccordionContext.js';
|
|
27
28
|
//# sourceMappingURL=index.js.map
|
package/build/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.d.ts
CHANGED
|
@@ -584,10 +584,28 @@ interface SapphireAccordionProps<T> extends SapphireStyleProps, CollectionBase<T
|
|
|
584
584
|
*/
|
|
585
585
|
headerLevel?: HeadingProps['level'];
|
|
586
586
|
/**
|
|
587
|
-
* Removes the divider after the last
|
|
587
|
+
* Removes the divider after the last accordion item.
|
|
588
588
|
* Useful when rendered in a container which already has borders.
|
|
589
589
|
*/
|
|
590
590
|
hideLastDivider?: boolean;
|
|
591
|
+
/**
|
|
592
|
+
* Counter acts the side padding, so that accordion is shifted to the left with same amount
|
|
593
|
+
* and having side padding * 2 added to width – resulting in full width accordion.
|
|
594
|
+
* Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.
|
|
595
|
+
* @example
|
|
596
|
+
* ```tsx
|
|
597
|
+
* <Accordion hasNegativeSideMargin>...</Accordion>
|
|
598
|
+
* ```
|
|
599
|
+
*/
|
|
600
|
+
hasNegativeSideMargin?: boolean;
|
|
601
|
+
/**
|
|
602
|
+
* Add custom sized padding to the sides of the accordion items.
|
|
603
|
+
* @example
|
|
604
|
+
* ```tsx
|
|
605
|
+
* <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>
|
|
606
|
+
* ```
|
|
607
|
+
*/
|
|
608
|
+
sidePadding?: number | string;
|
|
591
609
|
}
|
|
592
610
|
|
|
593
611
|
interface SapphireAccordionHeadingProps extends DOMProps {
|
|
@@ -598,6 +616,11 @@ interface SapphireAccordionItemProps<T> extends Omit<ItemProps<T>, 'title'> {
|
|
|
598
616
|
heading: ReactNode;
|
|
599
617
|
}
|
|
600
618
|
|
|
619
|
+
interface AccordionContextProps {
|
|
620
|
+
sidePadding?: number | string;
|
|
621
|
+
}
|
|
622
|
+
declare const AccordionContext: React__default.Context<AccordionContextProps>;
|
|
623
|
+
|
|
601
624
|
declare const _Accordion: (<T extends object>(props: SapphireAccordionProps<T> & {
|
|
602
625
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
603
626
|
}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
|
|
@@ -993,4 +1016,4 @@ interface LabeledValueProps extends DOMProps, SapphireStyleProps {
|
|
|
993
1016
|
}
|
|
994
1017
|
declare function LabeledValue(props: LabeledValueProps): React__default.JSX.Element;
|
|
995
1018
|
|
|
996
|
-
export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, LabeledValue, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
|
|
1019
|
+
export { _Accordion as Accordion, AccordionContext, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, LabeledValue, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.89.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
|
|
6
6
|
"exports": {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"cross-env": "^7.0.3"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@danske/sapphire-css": "^32.
|
|
39
|
+
"@danske/sapphire-css": "^32.2.0",
|
|
40
40
|
"@internationalized/date": "^3.5.5",
|
|
41
41
|
"@internationalized/string": "^3.2.3",
|
|
42
42
|
"@react-aria/accordion": "^3.0.0-alpha.31",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"clsx": "^1.1.1",
|
|
75
75
|
"react-transition-group": "^4.4.5"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "fd750fe463ba6d4f8a15c35e6f660fd6e46d0ec7"
|
|
78
78
|
}
|