@activecollab/components 1.0.343 → 1.0.345
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 +1 -2
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js +9 -5
- package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js.map +1 -1
- package/dist/esm/components/Button/Button.d.ts.map +1 -1
- package/dist/esm/components/Button/Button.js +1 -2
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.d.ts +2 -2
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.d.ts.map +1 -1
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js +8 -5
- package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js.map +1 -1
- package/dist/index.js +53 -53
- 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
|
@@ -63,8 +63,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
63
63
|
size: size,
|
|
64
64
|
ref: ref,
|
|
65
65
|
"aria-pressed": active,
|
|
66
|
-
role: "button"
|
|
67
|
-
type: "button"
|
|
66
|
+
role: "button"
|
|
68
67
|
}, args), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledButtonElements, {
|
|
69
68
|
className: "c-btn__elements"
|
|
70
69
|
}, children.map(function (value, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","active","variant","size","className","args","classnames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed state. */\n active?: boolean;\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 * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\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 * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {\n children,\n active = false,\n variant = \"contained\",\n size = \"medium\",\n className,\n ...args\n },\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 active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\n
|
|
1
|
+
{"version":3,"file":"Button.js","names":["Button","forwardRef","ref","children","active","variant","size","className","args","classnames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed state. */\n active?: boolean;\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 * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\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 * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {\n children,\n active = false,\n variant = \"contained\",\n size = \"medium\",\n className,\n ...args\n },\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 active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\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;AACA;AAIkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBlB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,IAAAC,iBAAU,EAI9B,gBASEC,GAAG,EACA;EAAA,IARDC,QAAQ,QAARA,QAAQ;IAAA,mBACRC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,oBACdC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBACrBC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IACfC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,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,EAChBH,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK;IAC7D,CAAC,CAAE;IACH,QAAQ,EAAER,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK,CAAE;IACrE,OAAO,EAAEN,OAAQ;IACjB,MAAM,EAAED,MAAO;IACf,IAAI,EAAEE,IAAK;IACX,GAAG,EAAEJ,GAAI;IACT,gBAAcE,MAAO;IACrB,IAAI,EAAC;EAAQ,GACTI,IAAI,GAEPL,QAAQ,YAAYQ,KAAK,gBACxB,6BAAC,4BAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CR,QAAQ,CAACS,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,GAEvBV,QACD,CACY;AAEnB,CAAC,CACF;AAAC;AAEFH,MAAM,CAACe,WAAW,GAAG,QAAQ"}
|
|
@@ -7,7 +7,11 @@ exports.CompleteCheckbox = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _Styles = require("./Styles");
|
|
10
|
+
var _excluded = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
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; }
|
|
11
15
|
var CompleteCheckbox = function CompleteCheckbox(_ref) {
|
|
12
16
|
var _ref$completed = _ref.completed,
|
|
13
17
|
completed = _ref$completed === void 0 ? false : _ref$completed,
|
|
@@ -19,17 +23,17 @@ var CompleteCheckbox = function CompleteCheckbox(_ref) {
|
|
|
19
23
|
className = _ref.className,
|
|
20
24
|
_ref$primary = _ref.primary,
|
|
21
25
|
primary = _ref$primary === void 0 ? false : _ref$primary,
|
|
22
|
-
checkMarkClassName = _ref.checkMarkClassName
|
|
23
|
-
|
|
26
|
+
checkMarkClassName = _ref.checkMarkClassName,
|
|
27
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledCompleteCheckbox, _extends({
|
|
24
29
|
onClick: onClick,
|
|
25
30
|
className: (0, _classnames.default)("c-complete-checkbox", className),
|
|
26
31
|
$primary: primary,
|
|
27
32
|
$completed: completed,
|
|
28
33
|
$disabled: disabled,
|
|
29
34
|
$animation: !disabled && completed && animate,
|
|
30
|
-
$checkMarkClassName: !!checkMarkClassName
|
|
31
|
-
|
|
32
|
-
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
35
|
+
$checkMarkClassName: !!checkMarkClassName
|
|
36
|
+
}, rest), /*#__PURE__*/_react.default.createElement("svg", {
|
|
33
37
|
viewBox: "0 0 48 48",
|
|
34
38
|
className: checkMarkClassName
|
|
35
39
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompleteCheckbox.js","names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","classnames","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n
|
|
1
|
+
{"version":3,"file":"CompleteCheckbox.js","names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","rest","classnames","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent, ButtonHTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps\n extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n ...rest\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n {...rest}\n >\n <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n </svg>\n </StyledCompleteCheckbox>\n );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAkD;AAAA;AAAA;AAAA;AAAA;AAoB3C,IAAMA,gBAA4C,GAAG,SAA/CA,gBAA4C,OASnD;EAAA,0BARJC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,qBACjBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,kBAAkB,QAAlBA,kBAAkB;IACfC,IAAI;EAEP,oBACE,6BAAC,8BAAsB;IACrB,OAAO,EAAEJ,OAAQ;IACjB,SAAS,EAAE,IAAAK,mBAAU,EAAC,qBAAqB,EAAEJ,SAAS,CAAE;IACxD,QAAQ,EAAEC,OAAQ;IAClB,UAAU,EAAEL,SAAU;IACtB,SAAS,EAAEC,QAAS;IACpB,UAAU,EAAE,CAACA,QAAQ,IAAID,SAAS,IAAIE,OAAQ;IAC9C,mBAAmB,EAAE,CAAC,CAACI;EAAmB,GACtCC,IAAI,gBAER;IAAK,OAAO,EAAC,WAAW;IAAC,SAAS,EAAED;EAAmB,gBACrD;IAAM,CAAC,EAAC;EAA+F,EAAG,eAC1G;IAAU,MAAM,EAAC;EAAyB,EAAG,CACzC,CACiB;AAE7B,CAAC;AAAC;AAEFP,gBAAgB,CAACU,WAAW,GAAG,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACrE,yBAAyB;IACzB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,WAAY,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACrE,yBAAyB;IACzB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;2CA0DlB,CAAC"}
|
|
@@ -52,8 +52,7 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
52
52
|
size: size,
|
|
53
53
|
ref: ref,
|
|
54
54
|
"aria-pressed": active,
|
|
55
|
-
role: "button"
|
|
56
|
-
type: "button"
|
|
55
|
+
role: "button"
|
|
57
56
|
}, args), children instanceof Array ? /*#__PURE__*/React.createElement(StyledButtonElements, {
|
|
58
57
|
className: "c-btn__elements"
|
|
59
58
|
}, children.map(function (value, index) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","ref","children","active","variant","size","className","args","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed state. */\n active?: boolean;\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 * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\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 * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {\n children,\n active = false,\n variant = \"contained\",\n size = \"medium\",\n className,\n ...args\n },\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 active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\n
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","forwardRef","classnames","StyledButton","StyledButtonElement","StyledButtonElements","Button","ref","children","active","variant","size","className","args","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n ComponentPropsWithoutRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport classnames from \"classnames\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Types of a button. */\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 dictates the height. */\n size?: \"big\" | \"small\" | \"medium\";\n /** Active or pressed state. */\n active?: boolean;\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 * @prop {variant} - adds unique look and feel to button.\n * @prop {size} - controls the size of a button.\n * @prop {active} - adds active/pressed state to a button.\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 * https://design.activecollab.com/docs/components/button\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<ButtonProps>\n>(\n (\n {\n children,\n active = false,\n variant = \"contained\",\n size = \"medium\",\n className,\n ...args\n },\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 active={active}\n size={size}\n ref={ref}\n aria-pressed={active}\n role=\"button\"\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,IAEVC,UAAU,QAEL,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,YAAY,EACZC,mBAAmB,EACnBC,oBAAoB,QACf,UAAU;AAoBjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGL,UAAU,CAI9B,gBASEM,GAAG,EACA;EAAA,IARDC,QAAQ,QAARA,QAAQ;IAAA,mBACRC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAA,oBACdC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IAAA,iBACrBC,IAAI;IAAJA,IAAI,0BAAG,QAAQ;IACfC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,oBACE,oBAAC,YAAY;IACX,SAAS,EAAEX,UAAU,CAAC,OAAO,EAAEU,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,EAChBH,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,EAAEL,OAAQ;IACjB,MAAM,EAAED,MAAO;IACf,IAAI,EAAEE,IAAK;IACX,GAAG,EAAEJ,GAAI;IACT,gBAAcE,MAAO;IACrB,IAAI,EAAC;EAAQ,GACTI,IAAI,GAEPL,QAAQ,YAAYO,KAAK,gBACxB,oBAAC,oBAAoB;IAAC,SAAS,EAAC;EAAiB,GAC9CP,QAAQ,CAACQ,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,GAEvBT,QACD,CACY;AAEnB,CAAC,CACF;AAEDF,MAAM,CAACa,WAAW,GAAG,QAAQ"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC, MouseEvent } from "react";
|
|
2
|
-
export interface ICompleteCheckboxProps {
|
|
1
|
+
import { FC, MouseEvent, ButtonHTMLAttributes } from "react";
|
|
2
|
+
export interface ICompleteCheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
3
|
/** Change completed state of checkbox */
|
|
4
4
|
completed?: boolean;
|
|
5
5
|
/** Callback */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIpE,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CA2BvD,CAAC"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
var _excluded = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
|
|
1
4
|
import React from "react";
|
|
2
5
|
import classnames from "classnames";
|
|
3
6
|
import { StyledCompleteCheckbox } from "./Styles";
|
|
@@ -12,17 +15,17 @@ export var CompleteCheckbox = function CompleteCheckbox(_ref) {
|
|
|
12
15
|
className = _ref.className,
|
|
13
16
|
_ref$primary = _ref.primary,
|
|
14
17
|
primary = _ref$primary === void 0 ? false : _ref$primary,
|
|
15
|
-
checkMarkClassName = _ref.checkMarkClassName
|
|
16
|
-
|
|
18
|
+
checkMarkClassName = _ref.checkMarkClassName,
|
|
19
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
20
|
+
return /*#__PURE__*/React.createElement(StyledCompleteCheckbox, _extends({
|
|
17
21
|
onClick: onClick,
|
|
18
22
|
className: classnames("c-complete-checkbox", className),
|
|
19
23
|
$primary: primary,
|
|
20
24
|
$completed: completed,
|
|
21
25
|
$disabled: disabled,
|
|
22
26
|
$animation: !disabled && completed && animate,
|
|
23
|
-
$checkMarkClassName: !!checkMarkClassName
|
|
24
|
-
|
|
25
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
27
|
+
$checkMarkClassName: !!checkMarkClassName
|
|
28
|
+
}, rest), /*#__PURE__*/React.createElement("svg", {
|
|
26
29
|
viewBox: "0 0 48 48",
|
|
27
30
|
className: checkMarkClassName
|
|
28
31
|
}, /*#__PURE__*/React.createElement("path", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompleteCheckbox.js","names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n
|
|
1
|
+
{"version":3,"file":"CompleteCheckbox.js","names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","rest","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent, ButtonHTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps\n extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Change completed state of checkbox */\n completed?: boolean;\n /** Callback */\n onClick?: (event: MouseEvent) => void;\n /** Make component disabled for interaction */\n disabled?: boolean;\n /** Animation (works only when is completed and not disabled) */\n animate?: boolean;\n /** Class names */\n className?: string | undefined;\n /** Set green color for checkbox */\n primary?: boolean;\n /** Set checkmark height and width */\n checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n completed = false,\n disabled = false,\n animate = false,\n onClick,\n className,\n primary = false,\n checkMarkClassName,\n ...rest\n}) => {\n return (\n <StyledCompleteCheckbox\n onClick={onClick}\n className={classnames(\"c-complete-checkbox\", className)}\n $primary={primary}\n $completed={completed}\n $disabled={disabled}\n $animation={!disabled && completed && animate}\n $checkMarkClassName={!!checkMarkClassName}\n {...rest}\n >\n <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n </svg>\n </StyledCompleteCheckbox>\n );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAgD,OAAO;AACnE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,sBAAsB,QAAQ,UAAU;AAoBjD,OAAO,IAAMC,gBAA4C,GAAG,SAA/CA,gBAA4C,OASnD;EAAA,0BARJC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,qBACjBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,oBACTC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,kBAAkB,QAAlBA,kBAAkB;IACfC,IAAI;EAEP,oBACE,oBAAC,sBAAsB;IACrB,OAAO,EAAEJ,OAAQ;IACjB,SAAS,EAAEN,UAAU,CAAC,qBAAqB,EAAEO,SAAS,CAAE;IACxD,QAAQ,EAAEC,OAAQ;IAClB,UAAU,EAAEL,SAAU;IACtB,SAAS,EAAEC,QAAS;IACpB,UAAU,EAAE,CAACA,QAAQ,IAAID,SAAS,IAAIE,OAAQ;IAC9C,mBAAmB,EAAE,CAAC,CAACI;EAAmB,GACtCC,IAAI,gBAER;IAAK,OAAO,EAAC,WAAW;IAAC,SAAS,EAAED;EAAmB,gBACrD;IAAM,CAAC,EAAC;EAA+F,EAAG,eAC1G;IAAU,MAAM,EAAC;EAAyB,EAAG,CACzC,CACiB;AAE7B,CAAC;AAEDP,gBAAgB,CAACS,WAAW,GAAG,kBAAkB"}
|
package/dist/index.js
CHANGED
|
@@ -269,7 +269,7 @@
|
|
|
269
269
|
})(["display:inline-flex;svg{margin:0 4px;}"]);
|
|
270
270
|
StyledButtonElement.displayName = "StyledButtonElement";
|
|
271
271
|
|
|
272
|
-
var _excluded$
|
|
272
|
+
var _excluded$1m = ["children", "active", "variant", "size", "className"];
|
|
273
273
|
/**
|
|
274
274
|
* @component Button
|
|
275
275
|
* @description
|
|
@@ -299,7 +299,7 @@
|
|
|
299
299
|
_ref$size = _ref.size,
|
|
300
300
|
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
301
301
|
className = _ref.className,
|
|
302
|
-
args = _objectWithoutProperties(_ref, _excluded$
|
|
302
|
+
args = _objectWithoutProperties(_ref, _excluded$1m);
|
|
303
303
|
return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
|
|
304
304
|
className: classNames__default["default"]("c-btn", className, {
|
|
305
305
|
"c-btn--contained": variant === "primary" || variant === "contained",
|
|
@@ -318,8 +318,7 @@
|
|
|
318
318
|
size: size,
|
|
319
319
|
ref: ref,
|
|
320
320
|
"aria-pressed": active,
|
|
321
|
-
role: "button"
|
|
322
|
-
type: "button"
|
|
321
|
+
role: "button"
|
|
323
322
|
}, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledButtonElements, {
|
|
324
323
|
className: "c-btn__elements"
|
|
325
324
|
}, children.map(function (value, index) {
|
|
@@ -374,12 +373,12 @@
|
|
|
374
373
|
})(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
|
|
375
374
|
StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
|
|
376
375
|
|
|
377
|
-
var _excluded$
|
|
376
|
+
var _excluded$1l = ["className", "disabled"];
|
|
378
377
|
var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
379
378
|
var className = _ref.className,
|
|
380
379
|
_ref$disabled = _ref.disabled,
|
|
381
380
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
382
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
381
|
+
rest = _objectWithoutProperties(_ref, _excluded$1l);
|
|
383
382
|
return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
|
|
384
383
|
ref: ref,
|
|
385
384
|
variant: "contained",
|
|
@@ -411,11 +410,11 @@
|
|
|
411
410
|
});
|
|
412
411
|
StyledButtonGroup$1.displayName = "StyledButtonGroup";
|
|
413
412
|
|
|
414
|
-
var _excluded$
|
|
413
|
+
var _excluded$1k = ["children", "className"];
|
|
415
414
|
var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
416
415
|
var children = _ref.children,
|
|
417
416
|
className = _ref.className,
|
|
418
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
417
|
+
rest = _objectWithoutProperties(_ref, _excluded$1k);
|
|
419
418
|
return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
|
|
420
419
|
ref: ref,
|
|
421
420
|
className: classNames__default["default"]("c-btn-group", className)
|
|
@@ -475,7 +474,7 @@
|
|
|
475
474
|
return React.useContext(MenuContext);
|
|
476
475
|
};
|
|
477
476
|
|
|
478
|
-
var _excluded$
|
|
477
|
+
var _excluded$1j = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
|
|
479
478
|
var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
480
479
|
var children = _ref.children,
|
|
481
480
|
anchorEl = _ref.anchorEl,
|
|
@@ -489,7 +488,7 @@
|
|
|
489
488
|
_ref$strategy = _ref.strategy,
|
|
490
489
|
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
|
|
491
490
|
afterWrite = _ref.afterWrite,
|
|
492
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
491
|
+
rest = _objectWithoutProperties(_ref, _excluded$1j);
|
|
493
492
|
var _useState = React.useState(true),
|
|
494
493
|
_useState2 = _slicedToArray(_useState, 2),
|
|
495
494
|
exited = _useState2[0],
|
|
@@ -588,12 +587,12 @@
|
|
|
588
587
|
});
|
|
589
588
|
StyledOverlay.displayName = "StyledOverlay";
|
|
590
589
|
|
|
591
|
-
var _excluded$
|
|
590
|
+
var _excluded$1i = ["className", "disableBackgroundColor"];
|
|
592
591
|
var Overlay = function Overlay(_ref) {
|
|
593
592
|
var className = _ref.className,
|
|
594
593
|
_ref$disableBackgroun = _ref.disableBackgroundColor,
|
|
595
594
|
disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
|
|
596
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
595
|
+
rest = _objectWithoutProperties(_ref, _excluded$1i);
|
|
597
596
|
return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
|
|
598
597
|
className: classNames__default["default"]("c-overlay", className),
|
|
599
598
|
$disableBackgroundColor: disableBackgroundColor
|
|
@@ -633,7 +632,7 @@
|
|
|
633
632
|
})(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
|
|
634
633
|
StyledWindow.displayName = "StyledWindow";
|
|
635
634
|
|
|
636
|
-
var _excluded$
|
|
635
|
+
var _excluded$1h = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
|
|
637
636
|
var returnFocus = {
|
|
638
637
|
preventScroll: true
|
|
639
638
|
};
|
|
@@ -650,7 +649,7 @@
|
|
|
650
649
|
_ref$disableCloseOnEs = _ref.disableCloseOnEsc,
|
|
651
650
|
disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
|
|
652
651
|
onClick = _ref.onClick,
|
|
653
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
652
|
+
rest = _objectWithoutProperties(_ref, _excluded$1h);
|
|
654
653
|
var innerRef = React.useRef(null);
|
|
655
654
|
var handleRef = useForkRef(innerRef, ref);
|
|
656
655
|
var _useLayerContext = useLayerContext(),
|
|
@@ -710,7 +709,7 @@
|
|
|
710
709
|
}, FontStyle, BoxSizingStyle);
|
|
711
710
|
StyledBubble.displayName = "StyledBubble";
|
|
712
711
|
|
|
713
|
-
var _excluded$
|
|
712
|
+
var _excluded$1g = ["children", "className", "innerRef", "style"];
|
|
714
713
|
var Bubble = function Bubble(_ref) {
|
|
715
714
|
var children = _ref.children,
|
|
716
715
|
className = _ref.className,
|
|
@@ -718,7 +717,7 @@
|
|
|
718
717
|
innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
|
|
719
718
|
_ref$style = _ref.style,
|
|
720
719
|
style = _ref$style === void 0 ? {} : _ref$style,
|
|
721
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
720
|
+
rest = _objectWithoutProperties(_ref, _excluded$1g);
|
|
722
721
|
return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
|
|
723
722
|
ref: innerRef,
|
|
724
723
|
className: classNames__default["default"]("c-bubble", className),
|
|
@@ -1038,7 +1037,7 @@
|
|
|
1038
1037
|
});
|
|
1039
1038
|
StyledTypography.displayName = "StyledTypography";
|
|
1040
1039
|
|
|
1041
|
-
var _excluded$
|
|
1040
|
+
var _excluded$1f = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
|
|
1042
1041
|
var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1043
1042
|
var _ref$variant = _ref.variant,
|
|
1044
1043
|
variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
|
|
@@ -1069,7 +1068,7 @@
|
|
|
1069
1068
|
weight = _ref$weight === void 0 ? "regular" : _ref$weight,
|
|
1070
1069
|
className = _ref.className,
|
|
1071
1070
|
children = _ref.children,
|
|
1072
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
1071
|
+
props = _objectWithoutProperties(_ref, _excluded$1f);
|
|
1073
1072
|
var Component = as || "div";
|
|
1074
1073
|
return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
|
|
1075
1074
|
as: Component,
|
|
@@ -1092,13 +1091,13 @@
|
|
|
1092
1091
|
});
|
|
1093
1092
|
Typography.displayName = "Typography";
|
|
1094
1093
|
|
|
1095
|
-
var _excluded$
|
|
1094
|
+
var _excluded$1e = ["title", "className", "leftElement", "rightElement"];
|
|
1096
1095
|
var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1097
1096
|
var title = _ref.title,
|
|
1098
1097
|
className = _ref.className,
|
|
1099
1098
|
leftElement = _ref.leftElement,
|
|
1100
1099
|
rightElement = _ref.rightElement,
|
|
1101
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
1100
|
+
props = _objectWithoutProperties(_ref, _excluded$1e);
|
|
1102
1101
|
return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
|
|
1103
1102
|
className: classNames__default["default"]("c-menu-header", className),
|
|
1104
1103
|
ref: ref
|
|
@@ -1123,11 +1122,11 @@
|
|
|
1123
1122
|
});
|
|
1124
1123
|
MenuHeader.displayName = "MenuHeader";
|
|
1125
1124
|
|
|
1126
|
-
var _excluded$
|
|
1125
|
+
var _excluded$1d = ["children", "className"];
|
|
1127
1126
|
var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1128
1127
|
var children = _ref.children,
|
|
1129
1128
|
className = _ref.className,
|
|
1130
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
1129
|
+
props = _objectWithoutProperties(_ref, _excluded$1d);
|
|
1131
1130
|
return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
|
|
1132
1131
|
className: classNames__default["default"]("c-menu-footer", className),
|
|
1133
1132
|
ref: ref
|
|
@@ -1151,11 +1150,11 @@
|
|
|
1151
1150
|
})(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
|
|
1152
1151
|
StyledListSeparator.displayName = "StyledListSeparator";
|
|
1153
1152
|
|
|
1154
|
-
var _excluded$
|
|
1153
|
+
var _excluded$1c = ["children", "className"];
|
|
1155
1154
|
var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1156
1155
|
var children = _ref.children,
|
|
1157
1156
|
className = _ref.className,
|
|
1158
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
1157
|
+
props = _objectWithoutProperties(_ref, _excluded$1c);
|
|
1159
1158
|
return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({
|
|
1160
1159
|
className: classNames__default["default"]("c-list-item", className),
|
|
1161
1160
|
ref: ref,
|
|
@@ -1164,21 +1163,21 @@
|
|
|
1164
1163
|
});
|
|
1165
1164
|
ListItem.displayName = "ListItem";
|
|
1166
1165
|
|
|
1167
|
-
var _excluded$
|
|
1166
|
+
var _excluded$1b = ["className"];
|
|
1168
1167
|
var ListSeparator = function ListSeparator(_ref) {
|
|
1169
1168
|
var className = _ref.className,
|
|
1170
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
1169
|
+
props = _objectWithoutProperties(_ref, _excluded$1b);
|
|
1171
1170
|
return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, _extends({
|
|
1172
1171
|
className: classNames__default["default"]("c-list-separator", className)
|
|
1173
1172
|
}, props));
|
|
1174
1173
|
};
|
|
1175
1174
|
ListSeparator.displayName = "ListSeparator";
|
|
1176
1175
|
|
|
1177
|
-
var _excluded$
|
|
1176
|
+
var _excluded$1a = ["children", "className"];
|
|
1178
1177
|
var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
1179
1178
|
var children = _ref.children,
|
|
1180
1179
|
className = _ref.className,
|
|
1181
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
1180
|
+
props = _objectWithoutProperties(_ref, _excluded$1a);
|
|
1182
1181
|
return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({
|
|
1183
1182
|
className: className,
|
|
1184
1183
|
ref: ref,
|
|
@@ -1204,7 +1203,7 @@
|
|
|
1204
1203
|
return size === "big" && styled.css(["width:40px;"]);
|
|
1205
1204
|
});
|
|
1206
1205
|
|
|
1207
|
-
var _excluded$
|
|
1206
|
+
var _excluded$19 = ["children", "className", "variant", "size", "active"];
|
|
1208
1207
|
|
|
1209
1208
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
1210
1209
|
|
|
@@ -1234,7 +1233,7 @@
|
|
|
1234
1233
|
variant = _ref.variant,
|
|
1235
1234
|
size = _ref.size,
|
|
1236
1235
|
active = _ref.active,
|
|
1237
|
-
args = _objectWithoutProperties(_ref, _excluded$
|
|
1236
|
+
args = _objectWithoutProperties(_ref, _excluded$19);
|
|
1238
1237
|
return /*#__PURE__*/React__default["default"].createElement(StyledIconButton, _extends({
|
|
1239
1238
|
className: className,
|
|
1240
1239
|
variant: variant,
|
|
@@ -7523,14 +7522,14 @@
|
|
|
7523
7522
|
});
|
|
7524
7523
|
StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
|
|
7525
7524
|
|
|
7526
|
-
var _excluded$
|
|
7525
|
+
var _excluded$18 = ["children", "className", "separator"];
|
|
7527
7526
|
var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
7528
7527
|
var _dimensions$width, _childDimensions$widt;
|
|
7529
7528
|
var children = _ref.children,
|
|
7530
7529
|
className = _ref.className,
|
|
7531
7530
|
_ref$separator = _ref.separator,
|
|
7532
7531
|
separator = _ref$separator === void 0 ? "/" : _ref$separator,
|
|
7533
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
7532
|
+
rest = _objectWithoutProperties(_ref, _excluded$18);
|
|
7534
7533
|
var internalRef = React.useRef(null);
|
|
7535
7534
|
var listWrapperRef = React.useRef(null);
|
|
7536
7535
|
var olRef = React.useRef(null);
|
|
@@ -7697,10 +7696,10 @@
|
|
|
7697
7696
|
return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
|
|
7698
7697
|
});
|
|
7699
7698
|
|
|
7700
|
-
var _excluded$
|
|
7699
|
+
var _excluded$17 = ["children"];
|
|
7701
7700
|
var TooltipAnimation = function TooltipAnimation(_ref) {
|
|
7702
7701
|
var children = _ref.children,
|
|
7703
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7702
|
+
props = _objectWithoutProperties(_ref, _excluded$17);
|
|
7704
7703
|
return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
|
|
7705
7704
|
timeout: 0
|
|
7706
7705
|
}, props), children);
|
|
@@ -7775,12 +7774,12 @@
|
|
|
7775
7774
|
});
|
|
7776
7775
|
Tooltip.displayName = "Tooltip";
|
|
7777
7776
|
|
|
7778
|
-
var _excluded$
|
|
7777
|
+
var _excluded$16 = ["weight", "children"];
|
|
7779
7778
|
var Body2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
7780
7779
|
var _ref$weight = _ref.weight,
|
|
7781
7780
|
weight = _ref$weight === void 0 ? "regular" : _ref$weight,
|
|
7782
7781
|
children = _ref.children,
|
|
7783
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7782
|
+
props = _objectWithoutProperties(_ref, _excluded$16);
|
|
7784
7783
|
return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
|
|
7785
7784
|
variant: "Body 2",
|
|
7786
7785
|
weight: weight,
|
|
@@ -7829,7 +7828,7 @@
|
|
|
7829
7828
|
});
|
|
7830
7829
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
7831
7830
|
|
|
7832
|
-
var _excluded$
|
|
7831
|
+
var _excluded$15 = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "disabled"];
|
|
7833
7832
|
var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
7834
7833
|
var label = _ref.label,
|
|
7835
7834
|
icon = _ref.icon,
|
|
@@ -7841,7 +7840,7 @@
|
|
|
7841
7840
|
className = _ref.className,
|
|
7842
7841
|
_ref$disabled = _ref.disabled,
|
|
7843
7842
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
7844
|
-
args = _objectWithoutProperties(_ref, _excluded$
|
|
7843
|
+
args = _objectWithoutProperties(_ref, _excluded$15);
|
|
7845
7844
|
return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
|
|
7846
7845
|
ref: ref,
|
|
7847
7846
|
className: className
|
|
@@ -8152,7 +8151,7 @@
|
|
|
8152
8151
|
StyledDatePicker.displayName = "StyledDatePicker";
|
|
8153
8152
|
StyledDayPicker.displayName = "StyledDayPicker";
|
|
8154
8153
|
|
|
8155
|
-
var _excluded$
|
|
8154
|
+
var _excluded$14 = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
|
|
8156
8155
|
var DatePicker = function DatePicker(_ref) {
|
|
8157
8156
|
var className = _ref.className,
|
|
8158
8157
|
onChange = _ref.onChange,
|
|
@@ -8174,7 +8173,7 @@
|
|
|
8174
8173
|
_ref$fixedWeeks = _ref.fixedWeeks,
|
|
8175
8174
|
fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
|
|
8176
8175
|
defaultModifiers = _ref.modifiers,
|
|
8177
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
8176
|
+
rest = _objectWithoutProperties(_ref, _excluded$14);
|
|
8178
8177
|
var _useState = React.useState(),
|
|
8179
8178
|
_useState2 = _slicedToArray(_useState, 2),
|
|
8180
8179
|
enteredTo = _useState2[0],
|
|
@@ -9066,10 +9065,10 @@
|
|
|
9066
9065
|
componentId: "sc-x4ge7a-0"
|
|
9067
9066
|
})(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
|
|
9068
9067
|
|
|
9069
|
-
var _excluded$
|
|
9068
|
+
var _excluded$13 = ["className"];
|
|
9070
9069
|
var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
9071
9070
|
var className = _ref.className,
|
|
9072
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
9071
|
+
rest = _objectWithoutProperties(_ref, _excluded$13);
|
|
9073
9072
|
return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
|
|
9074
9073
|
ref: ref,
|
|
9075
9074
|
className: classNames__default["default"]("c-loader c-loader--linear", className)
|
|
@@ -9083,10 +9082,10 @@
|
|
|
9083
9082
|
componentId: "sc-1f35d5h-0"
|
|
9084
9083
|
})(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
|
|
9085
9084
|
|
|
9086
|
-
var _excluded$
|
|
9085
|
+
var _excluded$12 = ["className"];
|
|
9087
9086
|
var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
9088
9087
|
var className = _ref.className,
|
|
9089
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
9088
|
+
rest = _objectWithoutProperties(_ref, _excluded$12);
|
|
9090
9089
|
return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
|
|
9091
9090
|
ref: ref,
|
|
9092
9091
|
className: classNames__default["default"]("c-loader c-loader--dots", className)
|
|
@@ -9108,7 +9107,7 @@
|
|
|
9108
9107
|
return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
|
|
9109
9108
|
});
|
|
9110
9109
|
|
|
9111
|
-
var _excluded$
|
|
9110
|
+
var _excluded$11 = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
|
|
9112
9111
|
var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
9113
9112
|
var _ref$radius = _ref.radius,
|
|
9114
9113
|
radius = _ref$radius === void 0 ? 10 : _ref$radius,
|
|
@@ -9123,7 +9122,7 @@
|
|
|
9123
9122
|
_ref$rotateDurationIn = _ref.rotateDurationInSeconds,
|
|
9124
9123
|
rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
|
|
9125
9124
|
className = _ref.className,
|
|
9126
|
-
rest = _objectWithoutProperties(_ref, _excluded$
|
|
9125
|
+
rest = _objectWithoutProperties(_ref, _excluded$11);
|
|
9127
9126
|
return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader$1, _extends({
|
|
9128
9127
|
ref: ref,
|
|
9129
9128
|
className: className,
|
|
@@ -9137,7 +9136,7 @@
|
|
|
9137
9136
|
});
|
|
9138
9137
|
SpinnerLoader.displayName = "SpinnerLoader";
|
|
9139
9138
|
|
|
9140
|
-
var _excluded
|
|
9139
|
+
var _excluded$10 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
|
|
9141
9140
|
exports.SortDirection = void 0;
|
|
9142
9141
|
(function (SortDirection) {
|
|
9143
9142
|
SortDirection["None"] = "none";
|
|
@@ -9185,7 +9184,7 @@
|
|
|
9185
9184
|
loading = _ref.loading,
|
|
9186
9185
|
_ref$loadingRows = _ref.loadingRows,
|
|
9187
9186
|
loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
|
|
9188
|
-
args = _objectWithoutProperties(_ref, _excluded
|
|
9187
|
+
args = _objectWithoutProperties(_ref, _excluded$10);
|
|
9189
9188
|
var _useState = React.useState(sortDirection),
|
|
9190
9189
|
_useState2 = _slicedToArray(_useState, 2),
|
|
9191
9190
|
columnDirection = _useState2[0],
|
|
@@ -9545,6 +9544,7 @@
|
|
|
9545
9544
|
});
|
|
9546
9545
|
StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
|
|
9547
9546
|
|
|
9547
|
+
var _excluded$$ = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
|
|
9548
9548
|
var CompleteCheckbox = function CompleteCheckbox(_ref) {
|
|
9549
9549
|
var _ref$completed = _ref.completed,
|
|
9550
9550
|
completed = _ref$completed === void 0 ? false : _ref$completed,
|
|
@@ -9556,17 +9556,17 @@
|
|
|
9556
9556
|
className = _ref.className,
|
|
9557
9557
|
_ref$primary = _ref.primary,
|
|
9558
9558
|
primary = _ref$primary === void 0 ? false : _ref$primary,
|
|
9559
|
-
checkMarkClassName = _ref.checkMarkClassName
|
|
9560
|
-
|
|
9559
|
+
checkMarkClassName = _ref.checkMarkClassName,
|
|
9560
|
+
rest = _objectWithoutProperties(_ref, _excluded$$);
|
|
9561
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledCompleteCheckbox, _extends({
|
|
9561
9562
|
onClick: onClick,
|
|
9562
9563
|
className: classNames__default["default"]("c-complete-checkbox", className),
|
|
9563
9564
|
$primary: primary,
|
|
9564
9565
|
$completed: completed,
|
|
9565
9566
|
$disabled: disabled,
|
|
9566
9567
|
$animation: !disabled && completed && animate,
|
|
9567
|
-
$checkMarkClassName: !!checkMarkClassName
|
|
9568
|
-
|
|
9569
|
-
}, /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
9568
|
+
$checkMarkClassName: !!checkMarkClassName
|
|
9569
|
+
}, rest), /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
9570
9570
|
viewBox: "0 0 48 48",
|
|
9571
9571
|
className: checkMarkClassName
|
|
9572
9572
|
}, /*#__PURE__*/React__default["default"].createElement("path", {
|