@danske/sapphire-react-lab 0.84.0 → 0.84.2
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.
|
@@ -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\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';\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":";;;;AAyBM,MAAA,UAAA,GAAa,MAAO,CAAA,MAAA,CAAO,SAAW,EAAA;AAAA,EAC1C,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AAAA,CAAA;;;;"}
|
|
@@ -37,6 +37,9 @@ function _AccordionItem(props) {
|
|
|
37
37
|
const { focusProps, isFocusVisible } = useFocusRing();
|
|
38
38
|
const ref = useRef(null);
|
|
39
39
|
const { buttonProps, regionProps } = useAccordionItem(props, state, ref);
|
|
40
|
+
const onKeyDown = (e) => {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
};
|
|
40
43
|
return /* @__PURE__ */ React.createElement("div", {
|
|
41
44
|
className: clsx(styles["sapphire-accordion__item"], {
|
|
42
45
|
[styles["sapphire-accordion__item--open"]]: isOpen,
|
|
@@ -55,7 +58,7 @@ function _AccordionItem(props) {
|
|
|
55
58
|
})
|
|
56
59
|
}), item.props.heading, /* @__PURE__ */ React.createElement("div", {
|
|
57
60
|
className: clsx(styles["sapphire-accordion__item-arrow"])
|
|
58
|
-
}, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(ChevronDown, null))))), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, regionProps), {
|
|
61
|
+
}, /* @__PURE__ */ React.createElement(Icon, null, /* @__PURE__ */ React.createElement(ChevronDown, null))))), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, mergeProps(regionProps, { onKeyDown })), {
|
|
59
62
|
"aria-hidden": !isOpen,
|
|
60
63
|
className: clsx(styles["sapphire-accordion__item-content-wrapper"])
|
|
61
64
|
}), /* @__PURE__ */ React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sources":["../../../../src/Accordion/src/AccordionItem.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport { Node, ItemProps } from '@react-types/shared';\nimport { TreeState } from '@react-stately/tree';\nimport { useHover, usePress } from '@react-aria/interactions';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\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';\nimport { useAccordionItem } from '@react-aria/accordion';\nimport { Item } from '@react-stately/collections';\n\ninterface AccordionItemProps<T> {\n item: Node<T>;\n state: TreeState<T>;\n headerLevel: HeadingProps['level'];\n}\n\nexport function _AccordionItem<T>(props: AccordionItemProps<T>): JSX.Element {\n const { state, item } = props;\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 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 >\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 {...regionProps}\n aria-hidden={!isOpen}\n className={clsx(styles['sapphire-accordion__item-content-wrapper'])}\n >\n <div className={clsx(styles['sapphire-accordion__item-content'])}>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,SAAA,cAAA,CAA2B,KAA2C,EAAA;AAC3E,EAAM,MAAA,EAAE,OAAO,IAAS,EAAA,GAAA,KAAA,CAAA;AAExB,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAa,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAE/C,EAAA,MAAM,EAAE,SAAA,EAAW,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,UAAA,EAAY,SAAc,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,EAAE,YAAY,cAAmB,EAAA,GAAA,YAAA,EAAA,CAAA;AAEvC,EAAA,MAAM,MAAM,MAA0B,CAAA,IAAA,CAAA,CAAA;AAEtC,EAAA,MAAM,EAAE,WAAA,EAAa,WAAgB,EAAA,GAAA,gBAAA,CAAoB,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","sources":["../../../../src/Accordion/src/AccordionItem.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport { Node, ItemProps } from '@react-types/shared';\nimport { TreeState } from '@react-stately/tree';\nimport { useHover, usePress } from '@react-aria/interactions';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\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';\nimport { useAccordionItem } from '@react-aria/accordion';\nimport { Item } from '@react-stately/collections';\n\ninterface AccordionItemProps<T> {\n item: Node<T>;\n state: TreeState<T>;\n headerLevel: HeadingProps['level'];\n}\n\nexport function _AccordionItem<T>(props: AccordionItemProps<T>): JSX.Element {\n const { state, item } = props;\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 >\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 className={clsx(styles['sapphire-accordion__item-content'])}>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,SAAA,cAAA,CAA2B,KAA2C,EAAA;AAC3E,EAAM,MAAA,EAAE,OAAO,IAAS,EAAA,GAAA,KAAA,CAAA;AAExB,EAAA,MAAM,MAAS,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAa,GAAA,KAAA,CAAM,YAAa,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAA,CAAA;AAE/C,EAAA,MAAM,EAAE,SAAA,EAAW,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,UAAA,EAAY,SAAc,EAAA,GAAA,QAAA,CAAS,EAAE,UAAA,EAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,EAAE,YAAY,cAAmB,EAAA,GAAA,YAAA,EAAA,CAAA;AAEvC,EAAA,MAAM,MAAM,MAA0B,CAAA,IAAA,CAAA,CAAA;AAEtC,EAAA,MAAM,EAAE,WAAA,EAAa,WAAgB,EAAA,GAAA,gBAAA,CAAoB,OAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAWvE,EAAM,MAAA,SAAA,GAAY,CAAC,CAA2B,KAAA;AAC5C,IAAE,CAAA,CAAA,eAAA,EAAA,CAAA;AAAA,GAAA,CAAA;AAGJ,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,0BAA6B,CAAA,EAAA;AAAA,MAAA,CACjD,OAAO,gCAAoC,CAAA,GAAA,MAAA;AAAA,MAAA,CAC3C,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,IAAK,EAAA,SAAA;AAAA,IAAU,cAAY,KAAM,CAAA,WAAA;AAAA,GAAA,sCACnC,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,YAAY,UADtD,CAAA,CAAA,EAAA;AAAA,IAEE,eAAe,EAAA,UAAA;AAAA,IACf,GAAA;AAAA,IACA,WAAW,IACT,CAAA,MAAA,CAAO,oCACP,MAAO,CAAA,UAAA,CAAA,EACP,OAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,UAAc,CAAA,GAAA,cAAA;AAAA,MAAA,CACrB,OAAO,UAAc,CAAA,GAAA,SAAA;AAAA,MAAA,CACrB,OAAO,WAAe,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,EAI1B,IAAK,CAAA,KAAA,CAAM,OACZ,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,gCAAA,CAAA,CAAA;AAAA,GAAA,kBACzB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,kBAKP,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,WAAa,EAAA,EAAE,SADhC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,eAAa,CAAC,MAAA;AAAA,IACd,SAAA,EAAW,KAAK,MAAO,CAAA,0CAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAEtB,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,EACzB,KAAK,KAAM,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;AAYf,MAAM,aAAgB,GAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.84.
|
|
3
|
+
"version": "0.84.2",
|
|
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,10 +36,10 @@
|
|
|
36
36
|
"cross-env": "^7.0.3"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@danske/sapphire-css": "^28.1.
|
|
39
|
+
"@danske/sapphire-css": "^28.1.1",
|
|
40
40
|
"@internationalized/date": "^3.5.2",
|
|
41
41
|
"@internationalized/string": "^3.2.1",
|
|
42
|
-
"@react-aria/accordion": "^3.0.0-alpha.
|
|
42
|
+
"@react-aria/accordion": "^3.0.0-alpha.29",
|
|
43
43
|
"@react-aria/button": "^3.9.3",
|
|
44
44
|
"@react-aria/calendar": "^3.5.6",
|
|
45
45
|
"@react-aria/combobox": "^3.8.4",
|
|
@@ -65,12 +65,12 @@
|
|
|
65
65
|
"@react-stately/searchfield": "^3.5.1",
|
|
66
66
|
"@react-stately/toast": "^3.0.0-beta.2",
|
|
67
67
|
"@react-stately/toggle": "^3.7.2",
|
|
68
|
-
"@react-stately/tree": "^3.
|
|
68
|
+
"@react-stately/tree": "^3.8.1",
|
|
69
69
|
"@react-stately/utils": "^3.9.1",
|
|
70
70
|
"@react-types/dialog": "^3.5.8",
|
|
71
71
|
"@react-types/shared": "^3.22.1",
|
|
72
72
|
"clsx": "^1.1.1",
|
|
73
73
|
"react-transition-group": "^4.4.5"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "71fe9dd3b124423a5df0bfabb6f28f98273733bf"
|
|
76
76
|
}
|