@pega/cosmos-react-dnd 9.0.0-build.12.7 → 9.0.0-build.12.9
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":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"AAUA,OAAO,EAQL,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"AAUA,OAAO,EAQL,KAAK,cAAc,EAIpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,eACf,SAAQ,cAAc,CACpB,KAAK,EACL;IACE,wEAAwE;IACxE,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,gBAAgB;iBACd,OAAO;SAiBpB,CAAC;AAIH,QAAA,MAAM,UAAU,yHAsHf,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useContext, useEffect, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Icon, Button, useI18n, useUID, useConsolidatedRef, HiddenText, StyledIcon, useEscape } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Icon, Button, useI18n, useUID, useConsolidatedRef, HiddenText, StyledIcon, useEscape, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
5
|
import DragDropListContext from '../DragDropList/DragDropListContext';
|
|
6
|
-
export const StyledDragHandle = styled(Button)(({ rotateIcon }) => {
|
|
6
|
+
export const StyledDragHandle = styled(Button)(({ rotateIcon, theme }) => {
|
|
7
7
|
return css `
|
|
8
8
|
cursor: grab;
|
|
9
|
+
border-radius: min(${theme.base['border-radius']}, 0.125rem);
|
|
9
10
|
|
|
10
11
|
&[aria-grabbed='true'] {
|
|
11
12
|
cursor: grabbing;
|
|
@@ -19,6 +20,7 @@ export const StyledDragHandle = styled(Button)(({ rotateIcon }) => {
|
|
|
19
20
|
`}
|
|
20
21
|
`;
|
|
21
22
|
});
|
|
23
|
+
StyledDragHandle.defaultProps = defaultThemeProp;
|
|
22
24
|
const DragHandle = forwardRef(function DragHandle({ itemId, contextualLabel, ...restProps }, ref) {
|
|
23
25
|
const [grabbed, setGrabbed] = useState(false);
|
|
24
26
|
const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EAGT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,UAAU,EAGV,UAAU,EACV,SAAS,
|
|
1
|
+
{"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n useEffect,\n useState,\n type KeyboardEvent,\n type PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Icon,\n Button,\n useI18n,\n useUID,\n useConsolidatedRef,\n HiddenText,\n type RefElement,\n type WithAttributes,\n StyledIcon,\n useEscape,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport DragDropListContext from '../DragDropList/DragDropListContext';\nimport type { DraggableItem } from '../Draggable';\n\nexport interface DragHandleProps\n extends WithAttributes<\n 'div',\n {\n /** The id of the item, used to keep track of the row when reordering */\n itemId: DraggableItem['id'];\n /** The label or name of the actual item being dragged, used for accessibility */\n contextualLabel?: string;\n }\n > {}\n\nexport const StyledDragHandle = styled(Button)<{\n rotateIcon?: boolean;\n}>(({ rotateIcon, theme }) => {\n return css`\n cursor: grab;\n border-radius: min(${theme.base['border-radius']}, 0.125rem);\n\n &[aria-grabbed='true'] {\n cursor: grabbing;\n }\n\n ${rotateIcon &&\n css`\n ${StyledIcon} {\n transform: rotate(90deg);\n }\n `}\n `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nconst DragHandle = forwardRef<RefElement<DragHandleProps>, PropsWithoutRef<DragHandleProps>>(\n function DragHandle({ itemId, contextualLabel, ...restProps }, ref) {\n const [grabbed, setGrabbed] = useState(false);\n const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n const {\n keyboardReorderItem,\n keyboardMoveLists,\n keyboardDragStart,\n keyboardDragEnd,\n keyboardDragCancel,\n orientation = 'vertical'\n } = useContext(DragDropListContext);\n const descriptionId = useUID();\n const t = useI18n();\n const dragHandleRef = useConsolidatedRef(ref);\n\n useEscape(() => {\n if (grabbed) {\n keyboardDragCancel?.(itemId);\n setGrabbed(false);\n setKeyboardGrabbed(false);\n }\n });\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n // Limit preventDefault and stopPropagation to these codes to not interfere with tab key behavior\n const arrows =\n orientation === 'horizontal' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown'];\n if (['Space', ...arrows].includes(e.code) || (grabbed && e.code === 'Tab')) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (e.code === 'Space') {\n if (keyboardGrabbed) {\n keyboardDragEnd?.(itemId);\n } else {\n keyboardDragStart?.(itemId);\n }\n\n setGrabbed(prev => !prev);\n setKeyboardGrabbed(prev => !prev);\n } else if (grabbed)\n if (\n (orientation === 'horizontal' && e.code === 'ArrowLeft') ||\n (orientation === 'vertical' && e.code === 'ArrowUp')\n ) {\n keyboardReorderItem(itemId, 'prev');\n } else if (\n (orientation === 'horizontal' && e.code === 'ArrowRight') ||\n (orientation === 'vertical' && e.code === 'ArrowDown')\n ) {\n keyboardReorderItem(itemId, 'next');\n } else if (e.code === 'Tab' && e.shiftKey) {\n keyboardMoveLists?.(itemId, 'prev');\n } else if (e.code === 'Tab' && !e.shiftKey) {\n keyboardMoveLists?.(itemId, 'next');\n }\n };\n\n useEffect(() => {\n if (!grabbed) {\n setKeyboardGrabbed(false);\n return;\n }\n\n const removeGrabbed = () => {\n setGrabbed(false);\n setKeyboardGrabbed(false);\n };\n\n document.addEventListener('dragend', removeGrabbed);\n\n return () => {\n document.removeEventListener('dragend', removeGrabbed);\n };\n }, [grabbed]);\n\n const dragText = t('drag');\n\n return (\n <StyledDragHandle\n {...restProps}\n data-drag-handle-for={itemId}\n forwardedAs='div'\n role='button'\n tabIndex={0}\n label={grabbed ? undefined : dragText}\n aria-label={contextualLabel ? `${dragText} - ${contextualLabel}` : dragText}\n aria-describedby={descriptionId}\n ref={dragHandleRef}\n icon\n variant='simple'\n compact\n aria-grabbed={grabbed}\n rotateIcon={orientation === 'horizontal' && keyboardGrabbed}\n onKeyDown={handleKeyDown}\n onMouseDown={() => {\n setGrabbed(true);\n }}\n onMouseUp={() => {\n setGrabbed(false);\n }}\n onBlur={() => {\n setGrabbed(false);\n }}\n >\n <Icon name={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n <HiddenText id={descriptionId}>\n {`${t('drag_handle_activate_description')} ${t(\n orientation === 'horizontal'\n ? 'drag_handle_horizontal_description'\n : 'drag_handle_vertical_description'\n )}${keyboardMoveLists ? ` ${t('drag_handle_tab_description')}` : ''} ${t('drag_handle_drop_description')} ${t('drag_handle_cancel_description')}`}\n </HiddenText>\n </StyledDragHandle>\n );\n }\n);\n\nexport default DragHandle;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-dnd",
|
|
3
|
-
"version": "9.0.0-build.12.
|
|
3
|
+
"version": "9.0.0-build.12.9",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "9.0.0-build.12.
|
|
17
|
+
"@pega/cosmos-react-core": "9.0.0-build.12.9",
|
|
18
18
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
19
19
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
20
20
|
"@types/styled-components": "^5.1.26",
|