@activecollab/components 1.0.312 → 1.0.314
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Icons/collection/Pin.js +47 -0
- package/dist/cjs/components/Icons/collection/Pin.js.map +1 -0
- package/dist/cjs/components/Icons/collection/index.js +7 -0
- package/dist/cjs/components/Icons/collection/index.js.map +1 -1
- package/dist/cjs/components/Sheet/Sheet.js +5 -4
- package/dist/cjs/components/Sheet/Sheet.js.map +1 -1
- package/dist/esm/components/Icons/collection/Pin.d.ts +23 -0
- package/dist/esm/components/Icons/collection/Pin.d.ts.map +1 -0
- package/dist/esm/components/Icons/collection/Pin.js +40 -0
- package/dist/esm/components/Icons/collection/Pin.js.map +1 -0
- package/dist/esm/components/Icons/collection/index.d.ts +1 -0
- package/dist/esm/components/Icons/collection/index.d.ts.map +1 -1
- package/dist/esm/components/Icons/collection/index.js +1 -0
- package/dist/esm/components/Icons/collection/index.js.map +1 -1
- package/dist/esm/components/Sheet/Sheet.d.ts +4 -1
- package/dist/esm/components/Sheet/Sheet.d.ts.map +1 -1
- package/dist/esm/components/Sheet/Sheet.js +6 -5
- package/dist/esm/components/Sheet/Sheet.js.map +1 -1
- package/dist/index.js +43 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.js","names":["React","
|
|
1
|
+
{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","Transition","Window","classnames","StyledAnimatedSpan","StyledCssTransition","StyledSheetIcons","StyledSheetWrapper","StyledSheetWrapperPaper","Overlay","Sheet","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","state","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n forwardRef,\n HTMLAttributes,\n useState,\n CSSProperties,\n ReactElement,\n MouseEvent,\n useImperativeHandle,\n} from \"react\";\n\nimport { Transition } from \"react-transition-group\";\nimport { Window } from \"../Window\";\nimport classnames from \"classnames\";\nimport {\n StyledAnimatedSpan,\n StyledCssTransition,\n StyledSheetIcons,\n StyledSheetWrapper,\n StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\n\ninterface ISheet {\n onClose?: () => void;\n controls?: JSX.Element[];\n open?: boolean;\n animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n position?: \"center\" | \"left\" | \"right\";\n mode?: \"normal\" | \"stretch\";\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n disableBackgroundColor?: boolean;\n bodyStyle?: CSSProperties;\n bodyClassName?: string;\n disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n close: () => void;\n}\n\nexport const Sheet = forwardRef<\n SheetMethods,\n ISheet & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n onClose,\n controls = [],\n open: defaultOpen = false,\n animation = \"top\",\n position = \"center\",\n mode = \"normal\",\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundColor = false,\n bodyStyle,\n bodyClassName,\n disableBackgroundClick = false,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n }, []);\n\n const handleBackgroundClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (!disableBackgroundClick) {\n event.preventDefault();\n handleClose();\n }\n },\n [disableBackgroundClick, handleClose]\n );\n\n useImperativeHandle(ref, () => ({\n close: handleClose,\n }));\n\n if (!open && exited) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n <StyledSheetWrapper\n className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n style={bodyStyle}\n $position={position}\n $mode={mode}\n >\n {controls.length ? (\n <StyledSheetIcons>\n {controls.map((item, index) => {\n const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n const control = index + 1;\n const durationOut =\n controls.length > maxDurationOut\n ? maxDurationOut\n : maxDurationOut - control;\n const durationIn = control >= maxDurationIn ? 1 : control;\n return (\n <Transition\n appear\n in={open}\n timeout={maxDurationIn * 100}\n key={`c-sheet-control-${index}`}\n >\n {(state): ReactElement => (\n <StyledAnimatedSpan\n $state={state}\n $mode={mode}\n $maxDurationIn={maxDurationIn / 10}\n $maxDurationOut={maxDurationOut / 10}\n $durationOut={durationOut / 10}\n $durationIn={durationIn / 10}\n >\n {item}\n </StyledAnimatedSpan>\n )}\n </Transition>\n );\n })}\n </StyledSheetIcons>\n ) : null}\n <StyledCssTransition\n appear\n in={open}\n timeout={400}\n classNames=\"c-sheet__animation\"\n $direction={animation}\n onEnter={handleEnter}\n onExited={handleExited}\n >\n <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n {children}\n </StyledSheetWrapperPaper>\n </StyledCssTransition>\n </StyledSheetWrapper>\n </Window>\n );\n }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -5532,6 +5532,43 @@
|
|
|
5532
5532
|
PersonIcon.displayName = "PersonIcon";
|
|
5533
5533
|
var PersonIcon$1 = PersonIcon;
|
|
5534
5534
|
|
|
5535
|
+
/**
|
|
5536
|
+
* @component PinIcon
|
|
5537
|
+
* @description
|
|
5538
|
+
*
|
|
5539
|
+
* The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
|
|
5540
|
+
* The Icon component is
|
|
5541
|
+
* customizable, allowing for variations in size, color, and style to fit the needs of the application.
|
|
5542
|
+
*
|
|
5543
|
+
*
|
|
5544
|
+
* @example
|
|
5545
|
+
* return (
|
|
5546
|
+
* <PinIcon className="mr-2" />
|
|
5547
|
+
* )
|
|
5548
|
+
*
|
|
5549
|
+
* @see
|
|
5550
|
+
* https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
|
|
5551
|
+
* @see
|
|
5552
|
+
* https://design.activecollab.com/docs/foundations/icons
|
|
5553
|
+
*/
|
|
5554
|
+
var PinIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
|
|
5555
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
|
|
5556
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5557
|
+
width: 24,
|
|
5558
|
+
height: 24,
|
|
5559
|
+
"data-testid": "PinIcon",
|
|
5560
|
+
fill: "var(--color-theme-600)",
|
|
5561
|
+
focusable: false,
|
|
5562
|
+
ref: svgRef
|
|
5563
|
+
}, props), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
5564
|
+
fillRule: "evenodd",
|
|
5565
|
+
d: "M2.585 5.739c-.78.78-.78 2.044 0 2.824l5.367 5.367.77 3.585a.993.993 0 00.705.756 1 1 0 00.98-.256l3.098-3.098 4.79 4.79a.998.998 0 101.412-1.412l-4.79-4.79 3.098-3.098a.99.99 0 00.291-.638.991.991 0 00-.253-.736.994.994 0 00-.545-.312l-3.578-.769-5.367-5.367a1.997 1.997 0 00-2.824 0L2.585 5.739zm12.723 4.552l-1.797-.386a1.997 1.997 0 01-.993-.54L7.151 3.996 3.997 7.151l5.367 5.367c.272.272.46.617.54.993l.387 1.796 5.016-5.016z",
|
|
5566
|
+
clipRule: "evenodd"
|
|
5567
|
+
}));
|
|
5568
|
+
});
|
|
5569
|
+
PinIcon.displayName = "PinIcon";
|
|
5570
|
+
var PinIcon$1 = PinIcon;
|
|
5571
|
+
|
|
5535
5572
|
/**
|
|
5536
5573
|
* @component PlayCircleOutlineIcon
|
|
5537
5574
|
* @description
|
|
@@ -12068,8 +12105,6 @@
|
|
|
12068
12105
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
12069
12106
|
exited = _useState4[0],
|
|
12070
12107
|
setExited = _useState4[1];
|
|
12071
|
-
var innerRef = React.useRef(null);
|
|
12072
|
-
var handleRef = useForkRef(innerRef, ref);
|
|
12073
12108
|
React.useEffect(function () {
|
|
12074
12109
|
setOpen(defaultOpen);
|
|
12075
12110
|
}, [defaultOpen]);
|
|
@@ -12089,11 +12124,15 @@
|
|
|
12089
12124
|
handleClose();
|
|
12090
12125
|
}
|
|
12091
12126
|
}, [disableBackgroundClick, handleClose]);
|
|
12127
|
+
React.useImperativeHandle(ref, function () {
|
|
12128
|
+
return {
|
|
12129
|
+
close: handleClose
|
|
12130
|
+
};
|
|
12131
|
+
});
|
|
12092
12132
|
if (!open && exited) {
|
|
12093
12133
|
return null;
|
|
12094
12134
|
}
|
|
12095
12135
|
return /*#__PURE__*/React__default["default"].createElement(Window, _extends({}, rest, {
|
|
12096
|
-
ref: handleRef,
|
|
12097
12136
|
onClose: handleClose,
|
|
12098
12137
|
disableFocusLock: disableFocusLock,
|
|
12099
12138
|
disableScrollLock: disableScrollLock
|
|
@@ -16916,6 +16955,7 @@
|
|
|
16916
16955
|
exports.PersonCircleOffIcon = PersonCircleOffIcon$1;
|
|
16917
16956
|
exports.PersonIcon = PersonIcon$1;
|
|
16918
16957
|
exports.PersonPlusIcon = PersonPlusIcon$1;
|
|
16958
|
+
exports.PinIcon = PinIcon$1;
|
|
16919
16959
|
exports.PlayCircleOutlineIcon = PlayCircleOutlineIcon$1;
|
|
16920
16960
|
exports.PlayIcon = PlayIcon$1;
|
|
16921
16961
|
exports.PlaySmallIcon = PlaySmallIcon$1;
|