@activecollab/components 1.0.228 → 1.0.230
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/Button/Button.js +13 -1
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/IconButton/IconButton.js +17 -0
- package/dist/cjs/components/IconButton/IconButton.js.map +1 -1
- package/dist/cjs/components/Menu/Menu.js +0 -9
- package/dist/cjs/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Button/Button.d.ts.map +1 -1
- package/dist/esm/components/Button/Button.js +13 -1
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +17 -0
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Menu/Menu.d.ts.map +1 -1
- package/dist/esm/components/Menu/Menu.js +0 -9
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/index.js +30 -10
- 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
|
@@ -16,7 +16,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
16
16
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
17
17
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
18
18
|
/**
|
|
19
|
-
* Button
|
|
19
|
+
* @component Button
|
|
20
|
+
* @description
|
|
21
|
+
* Button component is used to trigger an action or event, such as submitting a form,
|
|
22
|
+
* opening a Dialog, canceling an action, or performing a delete operation.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* return (
|
|
26
|
+
* <Button className="mr-2" variant="primary" size="big">
|
|
27
|
+
* Save
|
|
28
|
+
* </Button>
|
|
29
|
+
* )
|
|
30
|
+
* @see
|
|
31
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-button--button
|
|
20
32
|
*/
|
|
21
33
|
var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
22
34
|
var children = _ref.children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","variant","size","className","args","classnames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\" | \"medium\";\n}\n\n/**\n * Button component\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n { children, variant = \"contained\", size = \"medium\", className, ...args },\n ref\n ) => {\n return (\n <StyledButton\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;AAAA;AAKA;AAKA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBpC;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,IAAAC,iBAAU,EAI9B,gBAEEC,GAAG,EACA;EAAA,IAFDC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EAGtE,oBACE,6BAAC,oBAAY;IACX,SAAS,EAAE,IAAAC,mBAAU,EAAC,OAAO,EAAEF,SAAS,EAAE;MACxC,kBAAkB,EAAEF,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEC,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBF,QAAQ,YAAYM,MAAM,IAAI,EAAEN,QAAQ,YAAYO,KAAK;IAC7D,CAAC,CAAE;IACH,QAAQ,EAAEP,QAAQ,YAAYM,MAAM,IAAI,EAAEN,QAAQ,YAAYO,KAAK,CAAE;IACrE,OAAO,EAAEN,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAEH;EAAI,GACLK,IAAI,GAEPJ,QAAQ,YAAYO,KAAK,gBACxB,6BAAC,4BAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CP,QAAQ,CAACQ,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,2BAAmB;MAClB,SAAS,EAAC,0BAA0B;MACpC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACc,GACpB,IAAI;EAAA,EACT,CACoB,GAEvBT,QACD,CACY;AAEnB,CAAC,CACF;AAAC;AAEFH,MAAM,CAACc,WAAW,GAAG,QAAQ"}
|
|
1
|
+
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","variant","size","className","args","classnames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\" | \"medium\";\n}\n\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @example\n * return (\n * <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n * Save\n * </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n { children, variant = \"contained\", size = \"medium\", className, ...args },\n ref\n ) => {\n return (\n <StyledButton\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;AAAA;AAKA;AAKA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,IAAAC,iBAAU,EAI9B,gBAEEC,GAAG,EACA;EAAA,IAFDC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EAGtE,oBACE,6BAAC,oBAAY;IACX,SAAS,EAAE,IAAAC,mBAAU,EAAC,OAAO,EAAEF,SAAS,EAAE;MACxC,kBAAkB,EAAEF,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEC,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBF,QAAQ,YAAYM,MAAM,IAAI,EAAEN,QAAQ,YAAYO,KAAK;IAC7D,CAAC,CAAE;IACH,QAAQ,EAAEP,QAAQ,YAAYM,MAAM,IAAI,EAAEN,QAAQ,YAAYO,KAAK,CAAE;IACrE,OAAO,EAAEN,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAEH;EAAI,GACLK,IAAI,GAEPJ,QAAQ,YAAYO,KAAK,gBACxB,6BAAC,4BAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CP,QAAQ,CAACQ,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,2BAAmB;MAClB,SAAS,EAAC,0BAA0B;MACpC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACc,GACpB,IAAI;EAAA,EACT,CACoB,GAEvBT,QACD,CACY;AAEnB,CAAC,CACF;AAAC;AAEFH,MAAM,CAACc,WAAW,GAAG,QAAQ"}
|
|
@@ -15,6 +15,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
16
16
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
17
17
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
18
|
+
/**
|
|
19
|
+
* @component IconButton
|
|
20
|
+
* @description
|
|
21
|
+
* IconButton composes the Button component except that it renders only an icon.
|
|
22
|
+
* Since IconButton only renders an icon, you have to pass the aria-label prop,
|
|
23
|
+
* so screen readers can give meaning to the button.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* return (
|
|
27
|
+
* <IconButton className="mr-2" variant="primary" size="medium" aria-label="Close dialog">
|
|
28
|
+
* <CloseIcon />
|
|
29
|
+
* </IconButton>
|
|
30
|
+
* )
|
|
31
|
+
* @see
|
|
32
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button
|
|
33
|
+
*/
|
|
34
|
+
|
|
18
35
|
var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
19
36
|
var children = _ref.children,
|
|
20
37
|
className = _ref.className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","names":["IconButton","forwardRef","ref","children","className","variant","size","args","classNames","displayName"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { ButtonProps } from \"../Button\";\nimport { StyledIconButton } from \"./Styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface IconButtonProps extends ButtonProps {}\n\nexport const IconButton = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<IconButtonProps>\n>(({ children, className, variant, size, ...args }, ref) => {\n return (\n <StyledIconButton\n className={classNames(\"c-btn--icon-only\", className)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children}\n </StyledIconButton>\n );\n});\n\nIconButton.displayName = \"IconButton\";\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"IconButton.js","names":["IconButton","forwardRef","ref","children","className","variant","size","args","classNames","displayName"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { ButtonProps } from \"../Button\";\nimport { StyledIconButton } from \"./Styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface IconButtonProps extends ButtonProps {}\n\n/**\n * @component IconButton\n * @description\n * IconButton composes the Button component except that it renders only an icon.\n * Since IconButton only renders an icon, you have to pass the aria-label prop,\n * so screen readers can give meaning to the button.\n *\n * @example\n * return (\n * <IconButton className=\"mr-2\" variant=\"primary\" size=\"medium\" aria-label=\"Close dialog\">\n * <CloseIcon />\n * </IconButton>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button\n */\n\nexport const IconButton = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<IconButtonProps>\n>(({ children, className, variant, size, ...args }, ref) => {\n return (\n <StyledIconButton\n className={classNames(\"c-btn--icon-only\", className)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children}\n </StyledIconButton>\n );\n});\n\nIconButton.displayName = \"IconButton\";\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAK5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,IAAMA,UAAU,gBAAG,IAAAC,iBAAU,EAGlC,gBAAkDC,GAAG,EAAK;EAAA,IAAvDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAKC,IAAI;EAC9C,oBACE,6BAAC,wBAAgB;IACf,SAAS,EAAE,IAAAC,mBAAU,EAAC,kBAAkB,EAAEJ,SAAS,CAAE;IACrD,OAAO,EAAEC,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAEJ;EAAI,GACLK,IAAI,GAEPJ,QAAQ,CACQ;AAEvB,CAAC,CAAC;AAAC;AAEHH,UAAU,CAACS,WAAW,GAAG,YAAY"}
|
|
@@ -54,7 +54,6 @@ var Menu = function Menu(_ref) {
|
|
|
54
54
|
childNode = _useState4[0],
|
|
55
55
|
setChildNode = _useState4[1];
|
|
56
56
|
var elementRef = (0, _react.useRef)(null);
|
|
57
|
-
var isOpenAtLeastOnce = (0, _react.useRef)(false);
|
|
58
57
|
(0, _react.useEffect)(function () {
|
|
59
58
|
setOpen(defaultOpen);
|
|
60
59
|
}, [defaultOpen]);
|
|
@@ -83,14 +82,6 @@ var Menu = function Menu(_ref) {
|
|
|
83
82
|
ref: handleRef,
|
|
84
83
|
onClick: handleOpen
|
|
85
84
|
};
|
|
86
|
-
(0, _react.useEffect)(function () {
|
|
87
|
-
if (open) {
|
|
88
|
-
isOpenAtLeastOnce.current = true;
|
|
89
|
-
} else if (!open && isOpenAtLeastOnce.current) {
|
|
90
|
-
var _elementRef$current;
|
|
91
|
-
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
|
|
92
|
-
}
|
|
93
|
-
}, [open]);
|
|
94
85
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, target && /*#__PURE__*/_react.default.cloneElement(target, targetProps), open ? /*#__PURE__*/_react.default.createElement(_Window.Window, {
|
|
95
86
|
onClose: handleClose,
|
|
96
87
|
disableScrollLock: !handleScroll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","useState","setOpen","childNode","setChildNode","elementRef","useRef","
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","useState","setOpen","childNode","setChildNode","elementRef","useRef","useEffect","handleRefRef","useForkRef","ref","undefined","handleRef","handleOpen","useCallback","event","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","React","cloneElement","classnames","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n /** Menu content */\n children: ReactNode;\n /** On menu element click */\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /** Handle scroll bar */\n handleScroll?: boolean;\n /** Disable Focus Lock */\n disableFocusLock?: boolean;\n /** Menu width mode */\n mode?: MenuMode;\n /** Should menu be open when it's mounted */\n open?: boolean;\n /** Callback triggered when modal has been opened */\n onOpen?: () => void;\n /** Callback triggered when modal has been closed */\n onClose?: () => void;\n /** Before close callback */\n onBeforeClose?: () => boolean;\n /** Position Menu */\n position?: Placement;\n /** Target element */\n target?: ElementWithRef<Element>;\n className?: string;\n /** Menu classes */\n menuClassName?: string;\n /** Popper class name*/\n popperClassName?: string;\n /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n backgroundElementClass?: string;\n /** Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element | null>();\n const elementRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleRefRef = useForkRef(\n target ? target.ref : undefined,\n setChildNode\n );\n const handleRef = useForkRef(handleRefRef, elementRef);\n\n const handleOpen = useCallback(\n (\n event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n ) => {\n event?.preventDefault();\n event?.stopPropagation();\n setOpen(true);\n typeof onOpen === \"function\" && onOpen();\n typeof target?.props?.onClick === \"function\" &&\n target.props.onClick(event);\n },\n [onOpen, target?.props]\n );\n\n const handleClose = useCallback(() => {\n if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n return;\n }\n setOpen(false);\n typeof onClose === \"function\" && onClose();\n }, [onClose, onBeforeClose]);\n\n const childProps = {\n forceClose: handleClose,\n };\n\n const targetProps = {\n open,\n ref: handleRef,\n onClick: handleOpen,\n };\n\n return (\n <>\n {target && React.cloneElement(target, targetProps)}\n {open ? (\n <Window\n onClose={handleClose}\n disableScrollLock={!handleScroll}\n disableFocusLock={disableFocusLock}\n style={{\n position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n }}\n >\n <Overlay\n className={backgroundElementClass}\n onClick={handleClose}\n tabIndex={-1}\n disableBackgroundColor\n />\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={position}\n className={popperClassName}\n tabIndex={-1}\n >\n <StyledMenu\n className={classnames(\n \"c-simple-menu__paper\",\n `c-simple-menu__${mode}`,\n menuClassName,\n className\n )}\n $mode={mode}\n onMouseDown={onMenuClick}\n >\n <MenuContextProvider value={{ open, setOpen }}>\n {typeof children === \"function\"\n ? children(childProps)\n : children}\n </MenuContextProvider>\n </StyledMenu>\n </Popper>\n </Window>\n ) : null}\n </>\n );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,wBAAwB,EAEzB,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAErE,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IAEpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;CACnC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,wBAAwB,EAEzB,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAErE,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IAEpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;CACnC;AAiBD,eAAO,MAAM,MAAM;;2CAgDlB,CAAC"}
|
|
@@ -5,7 +5,19 @@ import React, { forwardRef } from "react";
|
|
|
5
5
|
import { StyledButton, StyledButtonElement, StyledButtonElements } from "./Styles";
|
|
6
6
|
import classnames from "classnames";
|
|
7
7
|
/**
|
|
8
|
-
* Button
|
|
8
|
+
* @component Button
|
|
9
|
+
* @description
|
|
10
|
+
* Button component is used to trigger an action or event, such as submitting a form,
|
|
11
|
+
* opening a Dialog, canceling an action, or performing a delete operation.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* return (
|
|
15
|
+
* <Button className="mr-2" variant="primary" size="big">
|
|
16
|
+
* Save
|
|
17
|
+
* </Button>
|
|
18
|
+
* )
|
|
19
|
+
* @see
|
|
20
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-button--button
|
|
9
21
|
*/
|
|
10
22
|
export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
11
23
|
var children = _ref.children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","forwardRef","StyledButton","StyledButtonElement","StyledButtonElements","classnames","Button","ref","children","variant","size","className","args","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\" | \"medium\";\n}\n\n/**\n * Button component\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n { children, variant = \"contained\", size = \"medium\", className, ...args },\n ref\n ) => {\n return (\n <StyledButton\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,QAGL,OAAO;AACd,SACEC,YAAY,EACZC,mBAAmB,EACnBC,oBAAoB,QACf,UAAU;AACjB,OAAOC,UAAU,MAAM,YAAY;AAmBnC;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGL,UAAU,CAI9B,gBAEEM,GAAG,EACA;EAAA,IAFDC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EAGtE,oBACE,oBAAC,YAAY;IACX,SAAS,EAAEP,UAAU,CAAC,OAAO,EAAEM,SAAS,EAAE;MACxC,kBAAkB,EAAEF,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEC,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBF,QAAQ,YAAYK,MAAM,IAAI,EAAEL,QAAQ,YAAYM,KAAK;IAC7D,CAAC,CAAE;IACH,QAAQ,EAAEN,QAAQ,YAAYK,MAAM,IAAI,EAAEL,QAAQ,YAAYM,KAAK,CAAE;IACrE,OAAO,EAAEL,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAEH;EAAI,GACLK,IAAI,GAEPJ,QAAQ,YAAYM,KAAK,gBACxB,oBAAC,oBAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CN,QAAQ,CAACO,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,oBAAC,mBAAmB;MAClB,SAAS,EAAC,0BAA0B;MACpC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACc,GACpB,IAAI;EAAA,EACT,CACoB,GAEvBR,QACD,CACY;AAEnB,CAAC,CACF;AAEDF,MAAM,CAACY,WAAW,GAAG,QAAQ"}
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","forwardRef","StyledButton","StyledButtonElement","StyledButtonElements","classnames","Button","ref","children","variant","size","className","args","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ComponentPropsWithoutRef,\n PropsWithChildren,\n} from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\" | \"medium\";\n}\n\n/**\n * @component Button\n * @description\n * Button component is used to trigger an action or event, such as submitting a form,\n * opening a Dialog, canceling an action, or performing a delete operation.\n *\n * @example\n * return (\n * <Button className=\"mr-2\" variant=\"primary\" size=\"big\">\n * Save\n * </Button>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n { children, variant = \"contained\", size = \"medium\", className, ...args },\n ref\n ) => {\n return (\n <StyledButton\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,QAGL,OAAO;AACd,SACEC,YAAY,EACZC,mBAAmB,EACnBC,oBAAoB,QACf,UAAU;AACjB,OAAOC,UAAU,MAAM,YAAY;AAmBnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGL,UAAU,CAI9B,gBAEEM,GAAG,EACA;EAAA,IAFDC,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EAGtE,oBACE,oBAAC,YAAY;IACX,SAAS,EAAEP,UAAU,CAAC,OAAO,EAAEM,SAAS,EAAE;MACxC,kBAAkB,EAAEF,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACpE,iBAAiB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACpE,qBAAqB,EACnBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,kBAAkB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACnE,yBAAyB,EAAEA,OAAO,KAAK,kBAAkB;MACzD,sBAAsB,EAAEA,OAAO,KAAK,eAAe;MACnD,YAAY,EAAEC,IAAI,KAAK,KAAK;MAC5B,cAAc,EAAEA,IAAI,KAAK,OAAO;MAChC,kBAAkB,EAChBF,QAAQ,YAAYK,MAAM,IAAI,EAAEL,QAAQ,YAAYM,KAAK;IAC7D,CAAC,CAAE;IACH,QAAQ,EAAEN,QAAQ,YAAYK,MAAM,IAAI,EAAEL,QAAQ,YAAYM,KAAK,CAAE;IACrE,OAAO,EAAEL,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAEH;EAAI,GACLK,IAAI,GAEPJ,QAAQ,YAAYM,KAAK,gBACxB,oBAAC,oBAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CN,QAAQ,CAACO,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,oBAAC,mBAAmB;MAClB,SAAS,EAAC,0BAA0B;MACpC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACc,GACpB,IAAI;EAAA,EACT,CACoB,GAEvBR,QACD,CACY;AAEnB,CAAC,CACF;AAEDF,MAAM,CAACY,WAAW,GAAG,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAmBvD,eAAO,MAAM,UAAU;;2CAerB,CAAC"}
|
|
@@ -7,6 +7,23 @@ import { StyledIconButton } from "./Styles";
|
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* @component IconButton
|
|
12
|
+
* @description
|
|
13
|
+
* IconButton composes the Button component except that it renders only an icon.
|
|
14
|
+
* Since IconButton only renders an icon, you have to pass the aria-label prop,
|
|
15
|
+
* so screen readers can give meaning to the button.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* return (
|
|
19
|
+
* <IconButton className="mr-2" variant="primary" size="medium" aria-label="Close dialog">
|
|
20
|
+
* <CloseIcon />
|
|
21
|
+
* </IconButton>
|
|
22
|
+
* )
|
|
23
|
+
* @see
|
|
24
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button
|
|
25
|
+
*/
|
|
26
|
+
|
|
10
27
|
export var IconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
11
28
|
var children = _ref.children,
|
|
12
29
|
className = _ref.className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","names":["classNames","React","forwardRef","StyledIconButton","IconButton","ref","children","className","variant","size","args","displayName"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { ButtonProps } from \"../Button\";\nimport { StyledIconButton } from \"./Styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface IconButtonProps extends ButtonProps {}\n\nexport const IconButton = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<IconButtonProps>\n>(({ children, className, variant, size, ...args }, ref) => {\n return (\n <StyledIconButton\n className={classNames(\"c-btn--icon-only\", className)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children}\n </StyledIconButton>\n );\n});\n\nIconButton.displayName = \"IconButton\";\n"],"mappings":";;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,QAA2B,OAAO;AAE5D,SAASC,gBAAgB,QAAQ,UAAU;;AAE3C;;AAGA,OAAO,IAAMC,UAAU,gBAAGF,UAAU,CAGlC,gBAAkDG,GAAG,EAAK;EAAA,IAAvDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAKC,IAAI;EAC9C,oBACE,oBAAC,gBAAgB;IACf,SAAS,EAAEV,UAAU,CAAC,kBAAkB,EAAEO,SAAS,CAAE;IACrD,OAAO,EAAEC,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAEJ;EAAI,GACLK,IAAI,GAEPJ,QAAQ,CACQ;AAEvB,CAAC,CAAC;AAEFF,UAAU,CAACO,WAAW,GAAG,YAAY"}
|
|
1
|
+
{"version":3,"file":"IconButton.js","names":["classNames","React","forwardRef","StyledIconButton","IconButton","ref","children","className","variant","size","args","displayName"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { ButtonProps } from \"../Button\";\nimport { StyledIconButton } from \"./Styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface IconButtonProps extends ButtonProps {}\n\n/**\n * @component IconButton\n * @description\n * IconButton composes the Button component except that it renders only an icon.\n * Since IconButton only renders an icon, you have to pass the aria-label prop,\n * so screen readers can give meaning to the button.\n *\n * @example\n * return (\n * <IconButton className=\"mr-2\" variant=\"primary\" size=\"medium\" aria-label=\"Close dialog\">\n * <CloseIcon />\n * </IconButton>\n * )\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button\n */\n\nexport const IconButton = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<IconButtonProps>\n>(({ children, className, variant, size, ...args }, ref) => {\n return (\n <StyledIconButton\n className={classNames(\"c-btn--icon-only\", className)}\n variant={variant}\n size={size}\n ref={ref}\n {...args}\n >\n {children}\n </StyledIconButton>\n );\n});\n\nIconButton.displayName = \"IconButton\";\n"],"mappings":";;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,QAA2B,OAAO;AAE5D,SAASC,gBAAgB,QAAQ,UAAU;;AAE3C;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,IAAMC,UAAU,gBAAGF,UAAU,CAGlC,gBAAkDG,GAAG,EAAK;EAAA,IAAvDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAKC,IAAI;EAC9C,oBACE,oBAAC,gBAAgB;IACf,SAAS,EAAEV,UAAU,CAAC,kBAAkB,EAAEO,SAAS,CAAE;IACrD,OAAO,EAAEC,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAEJ;EAAI,GACLK,IAAI,GAEPJ,QAAQ,CACQ;AAEvB,CAAC,CAAC;AAEFF,UAAU,CAACO,WAAW,GAAG,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,EAAE,EACF,SAAS,EACT,UAAU,EAIV,YAAY,EACZ,GAAG,EACJ,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,KAAK;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,EAAE,EACF,SAAS,EACT,UAAU,EAIV,YAAY,EACZ,GAAG,EACJ,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI3C,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,KAAK;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEvD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC;IAE9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CA8G1B,CAAC"}
|
|
@@ -36,7 +36,6 @@ export var Menu = function Menu(_ref) {
|
|
|
36
36
|
childNode = _useState2[0],
|
|
37
37
|
setChildNode = _useState2[1];
|
|
38
38
|
var elementRef = useRef(null);
|
|
39
|
-
var isOpenAtLeastOnce = useRef(false);
|
|
40
39
|
useEffect(function () {
|
|
41
40
|
setOpen(defaultOpen);
|
|
42
41
|
}, [defaultOpen]);
|
|
@@ -65,14 +64,6 @@ export var Menu = function Menu(_ref) {
|
|
|
65
64
|
ref: handleRef,
|
|
66
65
|
onClick: handleOpen
|
|
67
66
|
};
|
|
68
|
-
useEffect(function () {
|
|
69
|
-
if (open) {
|
|
70
|
-
isOpenAtLeastOnce.current = true;
|
|
71
|
-
} else if (!open && isOpenAtLeastOnce.current) {
|
|
72
|
-
var _elementRef$current;
|
|
73
|
-
(_elementRef$current = elementRef.current) == null ? void 0 : _elementRef$current.focus();
|
|
74
|
-
}
|
|
75
|
-
}, [open]);
|
|
76
67
|
return /*#__PURE__*/React.createElement(React.Fragment, null, target && /*#__PURE__*/React.cloneElement(target, targetProps), open ? /*#__PURE__*/React.createElement(Window, {
|
|
77
68
|
onClose: handleClose,
|
|
78
69
|
disableScrollLock: !handleScroll,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","Popper","useForkRef","Overlay","Window","MenuContextProvider","StyledMenu","Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["React","useRef","useState","useCallback","useEffect","classnames","Popper","useForkRef","Overlay","Window","MenuContextProvider","StyledMenu","Menu","children","disableFocusLock","onMenuClick","handleScroll","mode","open","defaultOpen","onOpen","onClose","onBeforeClose","position","target","className","menuClassName","popperClassName","backgroundElementClass","windowAbsolutelyPositioned","setOpen","childNode","setChildNode","elementRef","handleRefRef","ref","undefined","handleRef","handleOpen","event","preventDefault","stopPropagation","props","onClick","handleClose","childProps","forceClose","targetProps","cloneElement","displayName"],"sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import React, {\n useRef,\n FC,\n ReactNode,\n MouseEvent,\n useState,\n useCallback,\n useEffect,\n ReactElement,\n Ref,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper } from \"../Popper\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\nimport { Placement } from \"@popperjs/core\";\nimport { MenuContextProvider } from \"./context\";\nimport { StyledMenu } from \"./Styles\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport type MenuMode = \"normal\" | \"wider\" | \"tiny\";\n\nexport interface IMenu {\n /** Menu content */\n children: ReactNode;\n /** On menu element click */\n onMenuClick?: (event: MouseEvent<HTMLElement>) => void;\n /** Handle scroll bar */\n handleScroll?: boolean;\n /** Disable Focus Lock */\n disableFocusLock?: boolean;\n /** Menu width mode */\n mode?: MenuMode;\n /** Should menu be open when it's mounted */\n open?: boolean;\n /** Callback triggered when modal has been opened */\n onOpen?: () => void;\n /** Callback triggered when modal has been closed */\n onClose?: () => void;\n /** Before close callback */\n onBeforeClose?: () => boolean;\n /** Position Menu */\n position?: Placement;\n /** Target element */\n target?: ElementWithRef<Element>;\n className?: string;\n /** Menu classes */\n menuClassName?: string;\n /** Popper class name*/\n popperClassName?: string;\n /** Background style for clickable element after the menu is open (opacity, color, etc...) */\n backgroundElementClass?: string;\n /** Should Window be positioned absolutely */\n windowAbsolutelyPositioned?: boolean;\n}\n\nexport const Menu: FC<IMenu> = ({\n children,\n disableFocusLock = false,\n onMenuClick,\n handleScroll = true,\n mode = \"normal\",\n open: defaultOpen = false,\n onOpen,\n onClose,\n onBeforeClose,\n position = \"bottom-start\",\n target,\n className,\n menuClassName,\n popperClassName,\n backgroundElementClass,\n windowAbsolutelyPositioned = false,\n}) => {\n const [open, setOpen] = useState(defaultOpen);\n const [childNode, setChildNode] = useState<Element | null>();\n const elementRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleRefRef = useForkRef(\n target ? target.ref : undefined,\n setChildNode\n );\n const handleRef = useForkRef(handleRefRef, elementRef);\n\n const handleOpen = useCallback(\n (\n event: Pick<MouseEvent<Element>, \"preventDefault\" | \"stopPropagation\">\n ) => {\n event?.preventDefault();\n event?.stopPropagation();\n setOpen(true);\n typeof onOpen === \"function\" && onOpen();\n typeof target?.props?.onClick === \"function\" &&\n target.props.onClick(event);\n },\n [onOpen, target?.props]\n );\n\n const handleClose = useCallback(() => {\n if (typeof onBeforeClose === \"function\" && !onBeforeClose()) {\n return;\n }\n setOpen(false);\n typeof onClose === \"function\" && onClose();\n }, [onClose, onBeforeClose]);\n\n const childProps = {\n forceClose: handleClose,\n };\n\n const targetProps = {\n open,\n ref: handleRef,\n onClick: handleOpen,\n };\n\n return (\n <>\n {target && React.cloneElement(target, targetProps)}\n {open ? (\n <Window\n onClose={handleClose}\n disableScrollLock={!handleScroll}\n disableFocusLock={disableFocusLock}\n style={{\n position: windowAbsolutelyPositioned ? \"absolute\" : \"fixed\",\n }}\n >\n <Overlay\n className={backgroundElementClass}\n onClick={handleClose}\n tabIndex={-1}\n disableBackgroundColor\n />\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={position}\n className={popperClassName}\n tabIndex={-1}\n >\n <StyledMenu\n className={classnames(\n \"c-simple-menu__paper\",\n `c-simple-menu__${mode}`,\n menuClassName,\n className\n )}\n $mode={mode}\n onMouseDown={onMenuClick}\n >\n <MenuContextProvider value={{ open, setOpen }}>\n {typeof children === \"function\"\n ? children(childProps)\n : children}\n </MenuContextProvider>\n </StyledMenu>\n </Popper>\n </Window>\n ) : null}\n </>\n );\n};\n\nMenu.displayName = \"Menu\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -269,7 +269,19 @@
|
|
|
269
269
|
|
|
270
270
|
var _excluded$1c = ["children", "variant", "size", "className"];
|
|
271
271
|
/**
|
|
272
|
-
* Button
|
|
272
|
+
* @component Button
|
|
273
|
+
* @description
|
|
274
|
+
* Button component is used to trigger an action or event, such as submitting a form,
|
|
275
|
+
* opening a Dialog, canceling an action, or performing a delete operation.
|
|
276
|
+
*
|
|
277
|
+
* @example
|
|
278
|
+
* return (
|
|
279
|
+
* <Button className="mr-2" variant="primary" size="big">
|
|
280
|
+
* Save
|
|
281
|
+
* </Button>
|
|
282
|
+
* )
|
|
283
|
+
* @see
|
|
284
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-button--button
|
|
273
285
|
*/
|
|
274
286
|
var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
275
287
|
var children = _ref.children,
|
|
@@ -753,7 +765,6 @@
|
|
|
753
765
|
childNode = _useState4[0],
|
|
754
766
|
setChildNode = _useState4[1];
|
|
755
767
|
var elementRef = React.useRef(null);
|
|
756
|
-
var isOpenAtLeastOnce = React.useRef(false);
|
|
757
768
|
React.useEffect(function () {
|
|
758
769
|
setOpen(defaultOpen);
|
|
759
770
|
}, [defaultOpen]);
|
|
@@ -782,14 +793,6 @@
|
|
|
782
793
|
ref: handleRef,
|
|
783
794
|
onClick: handleOpen
|
|
784
795
|
};
|
|
785
|
-
React.useEffect(function () {
|
|
786
|
-
if (open) {
|
|
787
|
-
isOpenAtLeastOnce.current = true;
|
|
788
|
-
} else if (!open && isOpenAtLeastOnce.current) {
|
|
789
|
-
var _elementRef$current;
|
|
790
|
-
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
|
|
791
|
-
}
|
|
792
|
-
}, [open]);
|
|
793
796
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, target && /*#__PURE__*/React__default["default"].cloneElement(target, targetProps), open ? /*#__PURE__*/React__default["default"].createElement(Window, {
|
|
794
797
|
onClose: handleClose,
|
|
795
798
|
disableScrollLock: !handleScroll,
|
|
@@ -1155,6 +1158,23 @@
|
|
|
1155
1158
|
|
|
1156
1159
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
1157
1160
|
|
|
1161
|
+
/**
|
|
1162
|
+
* @component IconButton
|
|
1163
|
+
* @description
|
|
1164
|
+
* IconButton composes the Button component except that it renders only an icon.
|
|
1165
|
+
* Since IconButton only renders an icon, you have to pass the aria-label prop,
|
|
1166
|
+
* so screen readers can give meaning to the button.
|
|
1167
|
+
*
|
|
1168
|
+
* @example
|
|
1169
|
+
* return (
|
|
1170
|
+
* <IconButton className="mr-2" variant="primary" size="medium" aria-label="Close dialog">
|
|
1171
|
+
* <CloseIcon />
|
|
1172
|
+
* </IconButton>
|
|
1173
|
+
* )
|
|
1174
|
+
* @see
|
|
1175
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-button--icon-button
|
|
1176
|
+
*/
|
|
1177
|
+
|
|
1158
1178
|
var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1159
1179
|
var children = _ref.children,
|
|
1160
1180
|
className = _ref.className,
|