@activecollab/components 1.0.407 → 1.0.409
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/Badge/Badge.js +7 -8
- package/dist/cjs/components/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/Badge/Styles.js +11 -6
- package/dist/cjs/components/Badge/Styles.js.map +1 -1
- package/dist/cjs/components/Checkbox/CheckboxIcon.js +15 -30
- package/dist/cjs/components/Checkbox/CheckboxIcon.js.map +1 -1
- package/dist/cjs/components/CounterButton/CounterButton.js +5 -3
- package/dist/cjs/components/CounterButton/CounterButton.js.map +1 -1
- package/dist/cjs/components/CounterButton/Styles.js +10 -9
- package/dist/cjs/components/CounterButton/Styles.js.map +1 -1
- package/dist/cjs/components/Filter/StartMenu.js +7 -1
- package/dist/cjs/components/Filter/StartMenu.js.map +1 -1
- package/dist/esm/components/Badge/Badge.d.ts +2 -3
- package/dist/esm/components/Badge/Badge.d.ts.map +1 -1
- package/dist/esm/components/Badge/Badge.js +7 -8
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Badge/Styles.d.ts.map +1 -1
- package/dist/esm/components/Badge/Styles.js +11 -6
- package/dist/esm/components/Badge/Styles.js.map +1 -1
- package/dist/esm/components/Checkbox/CheckboxIcon.d.ts.map +1 -1
- package/dist/esm/components/Checkbox/CheckboxIcon.js +14 -20
- package/dist/esm/components/Checkbox/CheckboxIcon.js.map +1 -1
- package/dist/esm/components/CounterButton/CounterButton.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/CounterButton.js +6 -4
- package/dist/esm/components/CounterButton/CounterButton.js.map +1 -1
- package/dist/esm/components/CounterButton/Styles.d.ts +1 -3
- package/dist/esm/components/CounterButton/Styles.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/Styles.js +8 -7
- package/dist/esm/components/CounterButton/Styles.js.map +1 -1
- package/dist/esm/components/Filter/StartMenu.js +8 -2
- package/dist/esm/components/Filter/StartMenu.js.map +1 -1
- package/dist/index.js +101 -97
- 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
|
@@ -17,7 +17,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
17
17
|
* @prop {position} - dictates the position of a badge.
|
|
18
18
|
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
19
19
|
* @prop {backgroundColor} - background-color of a badge.
|
|
20
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
21
20
|
*
|
|
22
21
|
* @example
|
|
23
22
|
* <IconButton variant="text gray" size="big">
|
|
@@ -34,19 +33,19 @@ var Badge = function Badge(_ref) {
|
|
|
34
33
|
className = _ref.className,
|
|
35
34
|
_ref$position = _ref.position,
|
|
36
35
|
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
_ref$
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return isVisible ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
36
|
+
backgroundColor = _ref.backgroundColor,
|
|
37
|
+
value = _ref.value,
|
|
38
|
+
_ref$isStandalone = _ref.isStandalone,
|
|
39
|
+
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
43
41
|
className: (0, _classnames.default)("c-badge", className),
|
|
44
42
|
dimension: dimension,
|
|
45
43
|
position: position,
|
|
44
|
+
isStandalone: isStandalone,
|
|
46
45
|
backgroundColor: backgroundColor,
|
|
47
46
|
role: "status",
|
|
48
47
|
value: value
|
|
49
|
-
}, value && value > 100 ? 99 + "+" : value)
|
|
48
|
+
}, value && value > 100 ? 99 + "+" : value);
|
|
50
49
|
};
|
|
51
50
|
exports.Badge = Badge;
|
|
52
51
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["Badge","dimension","className","position","backgroundColor","value","isStandalone","classNames"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n value?: number;\n isStandalone?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor,\n\n value,\n isStandalone = false,\n}: BadgeProps) => {\n return (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n isStandalone={isStandalone}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n );\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAuC;AAavC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAK,OAQA;EAAA,0BAPhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IACxBC,eAAe,QAAfA,eAAe;IAEfC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,KAAK;EAEpB,oBACE,6BAAC,mBAAW;IACV,SAAS,EAAE,IAAAC,mBAAU,EAAC,SAAS,EAAEL,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,YAAY,EAAEG,YAAa;IAC3B,eAAe,EAAEF,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEC;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B;AAElB,CAAC;AAAC"}
|
|
@@ -12,8 +12,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
12
12
|
var StyledBadge = _styledComponents.default.div.withConfig({
|
|
13
13
|
displayName: "Styles__StyledBadge",
|
|
14
14
|
componentId: "sc-6o8do5-0"
|
|
15
|
-
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;
|
|
16
|
-
return props.backgroundColor;
|
|
15
|
+
})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], _FontStyle.FontStyle, function (props) {
|
|
16
|
+
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
|
|
17
|
+
}, function (props) {
|
|
18
|
+
return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
|
|
17
19
|
}, function (props) {
|
|
18
20
|
return props.dimension + "px";
|
|
19
21
|
}, function (props) {
|
|
@@ -21,16 +23,19 @@ var StyledBadge = _styledComponents.default.div.withConfig({
|
|
|
21
23
|
}, function (props) {
|
|
22
24
|
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
23
25
|
}, function (_ref) {
|
|
24
|
-
var
|
|
25
|
-
return
|
|
26
|
+
var isStandalone = _ref.isStandalone;
|
|
27
|
+
return isStandalone && (0, _styledComponents.css)(["position:static;z-index:0;"]);
|
|
26
28
|
}, function (_ref2) {
|
|
27
29
|
var position = _ref2.position;
|
|
28
|
-
return position === "top-
|
|
30
|
+
return position === "top-left" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-start:0;"]);
|
|
29
31
|
}, function (_ref3) {
|
|
30
32
|
var position = _ref3.position;
|
|
31
|
-
return position === "
|
|
33
|
+
return position === "top-right" && (0, _styledComponents.css)(["inset-block-start:0;inset-inline-end:0;"]);
|
|
32
34
|
}, function (_ref4) {
|
|
33
35
|
var position = _ref4.position;
|
|
36
|
+
return position === "bottom-right" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-end:0;"]);
|
|
37
|
+
}, function (_ref5) {
|
|
38
|
+
var position = _ref5.position;
|
|
34
39
|
return position === "bottom-left" && (0, _styledComponents.css)(["inset-block-end:0;inset-inline-start:0;"]);
|
|
35
40
|
});
|
|
36
41
|
exports.StyledBadge = StyledBadge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","FontStyle","props","backgroundColor","dimension","value","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledBadge","styled","div","FontStyle","props","backgroundColor","isStandalone","dimension","value","css","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props) =>\n !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n border: ${(props) =>\n props.isStandalone ? \"none\" : \"2px solid var(--page-paper-main)\"};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n color: var(--color-theme-100);\n display: flex;\n font-size: 10px;\n font-weight: 500;\n inline-size: ${(props) => props.dimension + \"px\"};\n justify-content: center;\n padding: ${(props) =>\n props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n pointer-events: none;\n position: absolute;\n z-index: 1;\n\n ${({ isStandalone }) =>\n isStandalone &&\n css`\n position: static;\n z-index: 0;\n `}\n\n ${({ position }) =>\n position === \"top-left\" &&\n css`\n inset-block-start: 0;\n inset-inline-start: 0;\n `}\n\n ${({ position }) =>\n position === \"top-right\" &&\n css`\n inset-block-start: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-right\" &&\n css`\n inset-block-end: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-left\" &&\n css`\n inset-block-end: 0;\n inset-inline-start: 0;\n `}\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAAyC;AAAA;AAGlC,IAAMA,WAAW,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4SACjCC,oBAAS,EAES,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,eAAe,GAAG,sBAAsB,GAAGD,KAAK,CAACC,eAAe;AAAA,GAC/D,UAACD,KAAK;EAAA,OACdA,KAAK,CAACE,YAAY,GAAG,MAAM,GAAG,kCAAkC;AAAA,GACpD,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAMhC,UAACH,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAErC,UAACH,KAAK;EAAA,OACfA,KAAK,CAACI,KAAK,KAAKJ,KAAK,CAACI,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGJ,KAAK,CAACI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGF,YAAY,QAAZA,YAAY;EAAA,OACfA,YAAY,QACZG,qBAAG,iCAGF;AAAA,GAED;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,QACvBD,qBAAG,gDAGF;AAAA,GAED;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,QACxBD,qBAAG,8CAGF;AAAA,GAEC;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,QAC3BD,qBAAG,4CAGF;AAAA,GAEC;EAAA,IAAGC,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,QAC1BD,qBAAG,8CAGF;AAAA,EACJ;AAAC"}
|
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.default = void 0;
|
|
8
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
8
|
var _excluded = ["isIndeterminate", "data-testid"];
|
|
10
|
-
function
|
|
11
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
10
|
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
14
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
16
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
17
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
18
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
19
11
|
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; }
|
|
20
12
|
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; }
|
|
21
13
|
/**
|
|
@@ -41,18 +33,17 @@ var CheckboxIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, svgRef
|
|
|
41
33
|
var isIndeterminate = _ref.isIndeterminate,
|
|
42
34
|
testId = _ref["data-testid"],
|
|
43
35
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}, []);
|
|
36
|
+
// const [animate, setAnimate] = useState(false);
|
|
37
|
+
// const mountRef = useRef(false);
|
|
38
|
+
|
|
39
|
+
// useEffect(() => {
|
|
40
|
+
// if (mountRef.current) {
|
|
41
|
+
// setAnimate(true);
|
|
42
|
+
// } else {
|
|
43
|
+
// mountRef.current = true;
|
|
44
|
+
// }
|
|
45
|
+
// }, [isIndeterminate]);
|
|
46
|
+
|
|
56
47
|
if (isIndeterminate) {
|
|
57
48
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
58
49
|
width: "16",
|
|
@@ -69,17 +60,11 @@ var CheckboxIcon = /*#__PURE__*/_react.default.forwardRef(function (_ref, svgRef
|
|
|
69
60
|
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
70
61
|
x: "3",
|
|
71
62
|
y: "7",
|
|
72
|
-
width:
|
|
63
|
+
width: 10,
|
|
73
64
|
height: "2",
|
|
74
65
|
rx: "1",
|
|
75
66
|
fill: "var(--page-paper-main)"
|
|
76
|
-
}
|
|
77
|
-
attributeName: "width",
|
|
78
|
-
from: "0",
|
|
79
|
-
to: "10",
|
|
80
|
-
dur: "0.2s",
|
|
81
|
-
fill: "freeze"
|
|
82
|
-
})));
|
|
67
|
+
}));
|
|
83
68
|
}
|
|
84
69
|
return /*#__PURE__*/_react.default.createElement("svg", _extends({
|
|
85
70
|
width: 16,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.js","names":["CheckboxIcon","React","forwardRef","svgRef","isIndeterminate","testId","props","
|
|
1
|
+
{"version":3,"file":"CheckboxIcon.js","names":["CheckboxIcon","React","forwardRef","svgRef","isIndeterminate","testId","props","displayName"],"sources":["../../../../src/components/Checkbox/CheckboxIcon.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component CheckboxIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n * <CheckboxIcon className=\"mr-2\" showAdditionalIcon={true} />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst CheckboxIcon = React.forwardRef(\n (\n {\n isIndeterminate,\n \"data-testid\": testId,\n ...props\n }: {\n isIndeterminate?: boolean;\n \"data-testid\"?: string;\n } & React.SVGProps<SVGSVGElement>,\n svgRef?: React.Ref<SVGSVGElement>\n ) => {\n // const [animate, setAnimate] = useState(false);\n // const mountRef = useRef(false);\n\n // useEffect(() => {\n // if (mountRef.current) {\n // setAnimate(true);\n // } else {\n // mountRef.current = true;\n // }\n // }, [isIndeterminate]);\n\n if (isIndeterminate) {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid={testId}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M14.2222 0C15.2041 0 16 0.795938 16 1.77778V14.2222C16 15.2041 15.2041 16 14.2222 16H1.77778C0.795938 16 0 15.2041 0 14.2222V1.77778C0 0.795938 0.795938 0 1.77778 0H14.2222Z\"\n fill=\"var(--color-secondary)\"\n />\n <rect\n x=\"3\"\n y=\"7\"\n width={10}\n height=\"2\"\n rx=\"1\"\n fill=\"var(--page-paper-main)\"\n ></rect>\n </svg>\n );\n }\n return (\n <svg\n width={16}\n height={16}\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"var(--color-theme-600)\"\n focusable={false}\n ref={svgRef}\n {...props}\n data-testid={testId}\n >\n <g fillRule=\"evenodd\">\n <rect\n stroke=\"#8E8E8E\"\n x={0.5}\n y={0.5}\n width={15}\n height={15}\n rx={2}\n />\n <path\n stroke=\"#979797\"\n strokeWidth={2}\n d=\"M12.243 5l-5.657 5.657-2.829-2.829\"\n />\n </g>\n </svg>\n );\n }\n);\nCheckboxIcon.displayName = \"CheckboxIcon\";\nexport default CheckboxIcon;\n"],"mappings":";;;;;;AAAA;AAA0B;AAAA;AAAA;AAAA;AAAA;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACnC,gBASEC,MAAiC,EAC9B;EAAA,IARDC,eAAe,QAAfA,eAAe;IACAC,MAAM,QAArB,aAAa;IACVC,KAAK;EAOV;EACA;;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA,IAAIF,eAAe,EAAE;IACnB,oBACE;MACE,KAAK,EAAC,IAAI;MACV,MAAM,EAAC,IAAI;MACX,OAAO,EAAC,WAAW;MACnB,IAAI,EAAC,MAAM;MACX,KAAK,EAAC,4BAA4B;MAClC,eAAaC;IAAO,gBAEpB;MACE,QAAQ,EAAC,SAAS;MAClB,QAAQ,EAAC,SAAS;MAClB,CAAC,EAAC,+KAA+K;MACjL,IAAI,EAAC;IAAwB,EAC7B,eACF;MACE,CAAC,EAAC,GAAG;MACL,CAAC,EAAC,GAAG;MACL,KAAK,EAAE,EAAG;MACV,MAAM,EAAC,GAAG;MACV,EAAE,EAAC,GAAG;MACN,IAAI,EAAC;IAAwB,EACvB,CACJ;EAEV;EACA,oBACE;IACE,KAAK,EAAE,EAAG;IACV,MAAM,EAAE,EAAG;IACX,OAAO,EAAC,WAAW;IACnB,KAAK,EAAC,4BAA4B;IAClC,IAAI,EAAC,wBAAwB;IAC7B,SAAS,EAAE,KAAM;IACjB,GAAG,EAAEF;EAAO,GACRG,KAAK;IACT,eAAaD;EAAO,iBAEpB;IAAG,QAAQ,EAAC;EAAS,gBACnB;IACE,MAAM,EAAC,SAAS;IAChB,CAAC,EAAE,GAAI;IACP,CAAC,EAAE,GAAI;IACP,KAAK,EAAE,EAAG;IACV,MAAM,EAAE,EAAG;IACX,EAAE,EAAE;EAAE,EACN,eACF;IACE,MAAM,EAAC,SAAS;IAChB,WAAW,EAAE,CAAE;IACf,CAAC,EAAC;EAAoC,EACtC,CACA,CACA;AAEV,CAAC,CACF;AACDL,YAAY,CAACO,WAAW,GAAG,cAAc;AAAC,eAC3BP,YAAY;AAAA"}
|
|
@@ -49,9 +49,11 @@ var CounterButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
49
49
|
weight: "medium",
|
|
50
50
|
className: "c-counter-button__label",
|
|
51
51
|
$active: counter > 0 || active
|
|
52
|
-
}, label), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
}, label), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
|
|
53
|
+
isStandalone: true,
|
|
54
|
+
dimension: 16,
|
|
55
|
+
value: counter
|
|
56
|
+
}) : null), counter > 0 ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
55
57
|
title: "".concat(tooltipText),
|
|
56
58
|
popperTooltipClassName: "z-index-1300"
|
|
57
59
|
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledCounterButtonReset, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterButton.js","names":["CounterButton","forwardRef","ref","label","icon","active","counter","tooltipText","onClearAll","className","disabled","args","classNames","React","cloneElement","displayName"],"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"CounterButton.js","names":["CounterButton","forwardRef","ref","label","icon","active","counter","tooltipText","onClearAll","className","disabled","args","classNames","React","cloneElement","displayName"],"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n StyledBadge,\n StyledCounterButton,\n StyledCounterButtonLabel,\n StyledCounterButtonReset,\n StyledCounterButtonWrapper,\n} from \"./Styles\";\n\nexport interface ICounterButtonProps {\n /** Set active state */\n active?: boolean;\n /** Label for value */\n label?: string;\n /** Icon */\n icon?: ReactElement;\n /** Number of applied filters */\n counter?: number;\n /** OnClearAll callback */\n onClearAll: (event?) => void;\n /** Tooltip content */\n tooltipText?: string;\n /** Applies passed classes */\n className?: string;\n /** Disabled state of a button */\n disabled?: boolean;\n}\n\nexport const CounterButton = forwardRef<HTMLDivElement, ICounterButtonProps>(\n (\n {\n label,\n icon,\n active,\n counter = 0,\n tooltipText,\n onClearAll,\n className,\n disabled = false,\n ...args\n },\n ref\n ) => {\n return (\n <StyledCounterButtonWrapper ref={ref} className={className}>\n <StyledCounterButton\n disabled={disabled}\n aria-disabled={disabled}\n className={classNames(\"c-counter-button\", {\n \"c-counter-button__selected\": counter,\n })}\n {...args}\n variant=\"text gray\"\n $active={counter > 0 || active}\n $selected={counter > 0}\n >\n {icon &&\n React.cloneElement(icon, {\n className: classNames(\"c-counter-button__icon\"),\n })}\n {label && (\n <StyledCounterButtonLabel\n color=\"secondary\"\n weight=\"medium\"\n className=\"c-counter-button__label\"\n $active={counter > 0 || active}\n >\n {label}\n </StyledCounterButtonLabel>\n )}\n {counter > 0 ? (\n <StyledBadge isStandalone={true} dimension={16} value={counter} />\n ) : null}\n </StyledCounterButton>\n {counter > 0 ? (\n <Tooltip\n title={`${tooltipText}`}\n popperTooltipClassName=\"z-index-1300\"\n >\n <StyledCounterButtonReset\n variant=\"text colored\"\n className=\"c-counter-button__reset\"\n onClick={onClearAll}\n >\n <CloseSmallIcon />\n </StyledCounterButtonReset>\n </Tooltip>\n ) : null}\n </StyledCounterButtonWrapper>\n );\n }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAMkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBX,IAAMA,aAAa,gBAAG,IAAAC,iBAAU,EACrC,gBAYEC,GAAG,EACA;EAAA,IAXDC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,oBACNC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IACXC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IACbC,IAAI;EAIT,oBACE,6BAAC,kCAA0B;IAAC,GAAG,EAAET,GAAI;IAAC,SAAS,EAAEO;EAAU,gBACzD,6BAAC,2BAAmB;IAClB,QAAQ,EAAEC,QAAS;IACnB,iBAAeA,QAAS;IACxB,SAAS,EAAE,IAAAE,mBAAU,EAAC,kBAAkB,EAAE;MACxC,4BAA4B,EAAEN;IAChC,CAAC;EAAE,GACCK,IAAI;IACR,OAAO,EAAC,WAAW;IACnB,OAAO,EAAEL,OAAO,GAAG,CAAC,IAAID,MAAO;IAC/B,SAAS,EAAEC,OAAO,GAAG;EAAE,IAEtBF,IAAI,iBACHS,cAAK,CAACC,YAAY,CAACV,IAAI,EAAE;IACvBK,SAAS,EAAE,IAAAG,mBAAU,EAAC,wBAAwB;EAChD,CAAC,CAAC,EACHT,KAAK,iBACJ,6BAAC,gCAAwB;IACvB,KAAK,EAAC,WAAW;IACjB,MAAM,EAAC,QAAQ;IACf,SAAS,EAAC,yBAAyB;IACnC,OAAO,EAAEG,OAAO,GAAG,CAAC,IAAID;EAAO,GAE9BF,KAAK,CAET,EACAG,OAAO,GAAG,CAAC,gBACV,6BAAC,mBAAW;IAAC,YAAY,EAAE,IAAK;IAAC,SAAS,EAAE,EAAG;IAAC,KAAK,EAAEA;EAAQ,EAAG,GAChE,IAAI,CACY,EACrBA,OAAO,GAAG,CAAC,gBACV,6BAAC,gBAAO;IACN,KAAK,YAAKC,WAAW,CAAG;IACxB,sBAAsB,EAAC;EAAc,gBAErC,6BAAC,gCAAwB;IACvB,OAAO,EAAC,cAAc;IACtB,SAAS,EAAC,yBAAyB;IACnC,OAAO,EAAEC;EAAW,gBAEpB,6BAAC,mBAAc,OAAG,CACO,CACnB,GACR,IAAI,CACmB;AAEjC,CAAC,CACF;AAAC;AAEFR,aAAa,CAACe,WAAW,GAAG,eAAe"}
|
|
@@ -4,12 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.StyledCounterButtonWrapper = exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.
|
|
7
|
+
exports.StyledCounterButtonWrapper = exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.StyledCounterButton = exports.StyledBadge = void 0;
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
var _Body = require("../Typography/Variants/Body2");
|
|
10
10
|
var _Button = require("../Button/Button");
|
|
11
11
|
var _BoxSizingStyle = require("../BoxSizingStyle");
|
|
12
12
|
var _FontStyle = require("../FontStyle");
|
|
13
|
+
var _Badge = require("../Badge");
|
|
13
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
16
|
var StyledCounterButtonWrapper = _styledComponents.default.div.withConfig({
|
|
@@ -32,21 +33,15 @@ var StyledCounterButton = (0, _styledComponents.default)(_Button.Button).withCon
|
|
|
32
33
|
});
|
|
33
34
|
exports.StyledCounterButton = StyledCounterButton;
|
|
34
35
|
StyledCounterButton.displayName = "StyledCounterButton";
|
|
35
|
-
var StyledCounterButtonCounter = _styledComponents.default.div.withConfig({
|
|
36
|
-
displayName: "Styles__StyledCounterButtonCounter",
|
|
37
|
-
componentId: "sc-1ecrcba-2"
|
|
38
|
-
})(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
|
|
39
|
-
exports.StyledCounterButtonCounter = StyledCounterButtonCounter;
|
|
40
|
-
StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
41
36
|
var StyledCounterButtonReset = (0, _styledComponents.default)(_Button.Button).withConfig({
|
|
42
37
|
displayName: "Styles__StyledCounterButtonReset",
|
|
43
|
-
componentId: "sc-1ecrcba-
|
|
38
|
+
componentId: "sc-1ecrcba-2"
|
|
44
39
|
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
45
40
|
exports.StyledCounterButtonReset = StyledCounterButtonReset;
|
|
46
41
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
47
42
|
var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withConfig({
|
|
48
43
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
49
|
-
componentId: "sc-1ecrcba-
|
|
44
|
+
componentId: "sc-1ecrcba-3"
|
|
50
45
|
})(["", " ", ":hover &&{", "}", ""], {
|
|
51
46
|
"pointerEvents": "none"
|
|
52
47
|
}, StyledCounterButton, function (props) {
|
|
@@ -56,4 +51,10 @@ var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withC
|
|
|
56
51
|
});
|
|
57
52
|
exports.StyledCounterButtonLabel = StyledCounterButtonLabel;
|
|
58
53
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
54
|
+
var StyledBadge = (0, _styledComponents.default)(_Badge.Badge).withConfig({
|
|
55
|
+
displayName: "Styles__StyledBadge",
|
|
56
|
+
componentId: "sc-1ecrcba-4"
|
|
57
|
+
})(["margin-left:4px;margin-right:-6px;"]);
|
|
58
|
+
exports.StyledBadge = StyledBadge;
|
|
59
|
+
StyledBadge.displayName = "StyledBadge";
|
|
59
60
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","disabled","css","$selected","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","disabled","css","$selected","StyledCounterButtonReset","StyledCounterButtonLabel","Body2","StyledBadge","Badge"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Badge } from \"../Badge\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n !props.disabled &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n pointer-events: none;\n opacity: 0.5;\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n\nexport const StyledBadge = styled(Badge)`\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledBadge.displayName = \"StyledBadge\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAAiC;AAAA;AAO1B,IAAMA,0BAA0B,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXC,oBAAS,EACTC,8BAAc,CAEjB;AAAC;AAEFJ,0BAA0B,CAACK,WAAW,GAAG,4BAA4B;AAE9D,IAAMC,mBAAmB,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,uBAC7C,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACb,CAACD,KAAK,CAACE,QAAQ,QACfC,qBAAG,iGAUF;AAAA,GAED,UAACH,KAAK;EAAA,OACNA,KAAK,CAACI,SAAS,QACfD,qBAAG,wGAIF;AAAA,GAEC,UAACH,KAAK;EAAA,OACRA,KAAK,CAACE,QAAQ,QACdC,qBAAG,uCAGF;AAAA,EACJ;AAAC;AAEFL,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEhD,IAAMQ,wBAAwB,GAAG,IAAAZ,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAAC;AAEFM,wBAAwB,CAACR,WAAW,GAAG,0BAA0B;AAE1D,IAAMS,wBAAwB,GAAG,IAAAb,yBAAM,EAACc,WAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BT,mBAAmB,EACjB,UAACE,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,QACdE,qBAAG,oCAEF;AAAA,GAGH,UAACH,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbE,qBAAG,kCAEF;AAAA,EACJ;AAAC;AAEFG,wBAAwB,CAACT,WAAW,GAAG,0BAA0B;AAE1D,IAAMW,WAAW,GAAG,IAAAf,yBAAM,EAACgB,YAAK,CAAC;EAAA;EAAA;AAAA,0CAGvC;AAAC;AAEFD,WAAW,CAACX,WAAW,GAAG,aAAa"}
|
|
@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _Icons = require("../Icons");
|
|
10
10
|
var _Styles = require("./Styles");
|
|
11
11
|
var _utils = require("../../utils");
|
|
12
|
+
var _Badge = require("../Badge");
|
|
12
13
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
15
|
var StartMenu = function StartMenu(_ref) {
|
|
@@ -36,6 +37,7 @@ var StartMenu = function StartMenu(_ref) {
|
|
|
36
37
|
title = _ref2.title,
|
|
37
38
|
submenu = _ref2.submenu;
|
|
38
39
|
var count = 0;
|
|
40
|
+
// Popricati o ovome kada je selected[id] vrednost 0.
|
|
39
41
|
if (typeof selected[id] === "string") {
|
|
40
42
|
count += 1;
|
|
41
43
|
} else {
|
|
@@ -48,7 +50,11 @@ var StartMenu = function StartMenu(_ref) {
|
|
|
48
50
|
onClick: function onClick() {
|
|
49
51
|
return onItemClick(id);
|
|
50
52
|
}
|
|
51
|
-
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/_react.default.createElement(
|
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
|
|
54
|
+
dimension: 16,
|
|
55
|
+
value: count,
|
|
56
|
+
isStandalone: true
|
|
57
|
+
}) : null, /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null));
|
|
52
58
|
}
|
|
53
59
|
}) : emptyFilterText ? /*#__PURE__*/_react.default.createElement(_Styles.StyledStartMenuNoResults, null, emptyFilterText) : null, children));
|
|
54
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartMenu.js","names":["StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","useRef","dimensions","useResizeObserver","height","useEffect","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n
|
|
1
|
+
{"version":3,"file":"StartMenu.js","names":["StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","useRef","dimensions","useResizeObserver","height","useEffect","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n StyledStartMenuListItem,\n StyledStartMenuList,\n StyledStartMenuNoResults,\n} from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { Badge } from \"../Badge\";\n\nexport interface StartMenuProps {\n data: Array<DataType>;\n selected: SelectedType;\n onItemClick: (id: number | string) => void;\n onHeightChange: (height: number) => void;\n shouldRenderSubmenus: boolean;\n emptyFilterText?: string;\n}\n\nexport const StartMenu: FC<StartMenuProps & HTMLAttributes<HTMLDivElement>> = ({\n data,\n selected,\n onItemClick,\n style,\n onHeightChange,\n shouldRenderSubmenus,\n emptyFilterText,\n children,\n}) => {\n const ref = useRef(null);\n const dimensions = useResizeObserver(ref);\n const height = dimensions?.height;\n\n useEffect(() => {\n if (height && height > 0) {\n onHeightChange(height);\n }\n }, [height, onHeightChange]);\n\n return (\n <div style={style} ref={ref}>\n <StyledStartMenuList>\n {shouldRenderSubmenus ? (\n data.map(({ id, title, submenu }, index: number) => {\n let count = 0;\n // Popricati o ovome kada je selected[id] vrednost 0.\n if (typeof selected[id] === \"string\") {\n count += 1;\n } else {\n count = selected[id]?.length;\n }\n\n if (submenu?.length > 1) {\n return (\n <StyledStartMenuListItem\n key={`filter-list-item-${index}`}\n onClick={() => onItemClick(id)}\n >\n <StyledStartMenuTitle>{title}</StyledStartMenuTitle>\n {count > 0 ? (\n <Badge dimension={16} value={count} isStandalone={true} />\n ) : null}\n <ArrowRightIcon />\n </StyledStartMenuListItem>\n );\n }\n })\n ) : emptyFilterText ? (\n <StyledStartMenuNoResults>{emptyFilterText}</StyledStartMenuNoResults>\n ) : null}\n {children}\n </StyledStartMenuList>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAMA;AACA;AAAiC;AAAA;AAW1B,IAAMA,SAA8D,GAAG,SAAjEA,SAA8D,OASrE;EAAA,IARJC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,cAAc,QAAdA,cAAc;IACdC,oBAAoB,QAApBA,oBAAoB;IACpBC,eAAe,QAAfA,eAAe;IACfC,QAAQ,QAARA,QAAQ;EAER,IAAMC,GAAG,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EACxB,IAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAACH,GAAG,CAAC;EACzC,IAAMI,MAAM,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,MAAM;EAEjC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAID,MAAM,IAAIA,MAAM,GAAG,CAAC,EAAE;MACxBR,cAAc,CAACQ,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAER,cAAc,CAAC,CAAC;EAE5B,oBACE;IAAK,KAAK,EAAED,KAAM;IAAC,GAAG,EAAEK;EAAI,gBAC1B,6BAAC,2BAAmB,QACjBH,oBAAoB,GACnBL,IAAI,CAACc,GAAG,CAAC,iBAAyBC,KAAa,EAAK;IAAA,IAAxCC,EAAE,SAAFA,EAAE;MAAEC,KAAK,SAALA,KAAK;MAAEC,OAAO,SAAPA,OAAO;IAC5B,IAAIC,KAAK,GAAG,CAAC;IACb;IACA,IAAI,OAAOlB,QAAQ,CAACe,EAAE,CAAC,KAAK,QAAQ,EAAE;MACpCG,KAAK,IAAI,CAAC;IACZ,CAAC,MAAM;MAAA;MACLA,KAAK,mBAAGlB,QAAQ,CAACe,EAAE,CAAC,iDAAZ,aAAcI,MAAM;IAC9B;IAEA,IAAI,CAAAF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,MAAM,IAAG,CAAC,EAAE;MACvB,oBACE,6BAAC,+BAAuB;QACtB,GAAG,6BAAsBL,KAAK,CAAG;QACjC,OAAO,EAAE;UAAA,OAAMb,WAAW,CAACc,EAAE,CAAC;QAAA;MAAC,gBAE/B,6BAAC,4BAAoB,QAAEC,KAAK,CAAwB,EACnDE,KAAK,GAAG,CAAC,gBACR,6BAAC,YAAK;QAAC,SAAS,EAAE,EAAG;QAAC,KAAK,EAAEA,KAAM;QAAC,YAAY,EAAE;MAAK,EAAG,GACxD,IAAI,eACR,6BAAC,qBAAc,OAAG,CACM;IAE9B;EACF,CAAC,CAAC,GACAb,eAAe,gBACjB,6BAAC,gCAAwB,QAAEA,eAAe,CAA4B,GACpE,IAAI,EACPC,QAAQ,CACW,CAClB;AAEV,CAAC;AAAC"}
|
|
@@ -5,8 +5,8 @@ export interface BadgeProps {
|
|
|
5
5
|
dimension?: number;
|
|
6
6
|
className?: string;
|
|
7
7
|
backgroundColor?: string;
|
|
8
|
-
isVisible?: boolean;
|
|
9
8
|
value?: number;
|
|
9
|
+
isStandalone?: boolean;
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* @component Badge
|
|
@@ -17,7 +17,6 @@ export interface BadgeProps {
|
|
|
17
17
|
* @prop {position} - dictates the position of a badge.
|
|
18
18
|
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
19
19
|
* @prop {backgroundColor} - background-color of a badge.
|
|
20
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
21
20
|
*
|
|
22
21
|
* @example
|
|
23
22
|
* <IconButton variant="text gray" size="big">
|
|
@@ -28,6 +27,6 @@ export interface BadgeProps {
|
|
|
28
27
|
* @see
|
|
29
28
|
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
30
29
|
*/
|
|
31
|
-
export declare const Badge: ({ dimension, className, position, backgroundColor,
|
|
30
|
+
export declare const Badge: ({ dimension, className, position, backgroundColor, value, isStandalone, }: BadgeProps) => JSX.Element;
|
|
32
31
|
export {};
|
|
33
32
|
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,aAAK,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,8EAQf,UAAU,gBAcZ,CAAC"}
|
|
@@ -10,7 +10,6 @@ import { StyledBadge } from "./Styles";
|
|
|
10
10
|
* @prop {position} - dictates the position of a badge.
|
|
11
11
|
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
12
12
|
* @prop {backgroundColor} - background-color of a badge.
|
|
13
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
14
13
|
*
|
|
15
14
|
* @example
|
|
16
15
|
* <IconButton variant="text gray" size="big">
|
|
@@ -27,18 +26,18 @@ export var Badge = function Badge(_ref) {
|
|
|
27
26
|
className = _ref.className,
|
|
28
27
|
_ref$position = _ref.position,
|
|
29
28
|
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
_ref$
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return isVisible ? /*#__PURE__*/React.createElement(StyledBadge, {
|
|
29
|
+
backgroundColor = _ref.backgroundColor,
|
|
30
|
+
value = _ref.value,
|
|
31
|
+
_ref$isStandalone = _ref.isStandalone,
|
|
32
|
+
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
|
|
33
|
+
return /*#__PURE__*/React.createElement(StyledBadge, {
|
|
36
34
|
className: classNames("c-badge", className),
|
|
37
35
|
dimension: dimension,
|
|
38
36
|
position: position,
|
|
37
|
+
isStandalone: isStandalone,
|
|
39
38
|
backgroundColor: backgroundColor,
|
|
40
39
|
role: "status",
|
|
41
40
|
value: value
|
|
42
|
-
}, value && value > 100 ? 99 + "+" : value)
|
|
41
|
+
}, value && value > 100 ? 99 + "+" : value);
|
|
43
42
|
};
|
|
44
43
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["classNames","React","StyledBadge","Badge","dimension","className","position","backgroundColor","value","isStandalone"],"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React from \"react\";\nimport { StyledBadge } from \"./Styles\";\n\ntype Position = \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\";\n\nexport interface BadgeProps {\n position?: Position;\n dimension?: number;\n className?: string;\n backgroundColor?: string;\n value?: number;\n isStandalone?: boolean;\n}\n\n/**\n * @component Badge\n * @description\n * In some products, you might need to show a badge on the right corner of the avatar.\n * We call this a badge. Here's an example that shows if the user is online.\n *\n * @prop {position} - dictates the position of a badge.\n * @prop {dimension} - controls the size of a badge (width and height) in pixels.\n * @prop {backgroundColor} - background-color of a badge.\n *\n * @example\n * <IconButton variant=\"text gray\" size=\"big\">\n * <BellOffIcon />\n * <Badge position=\"top-right\" backgroundColor=\"red\" dimension={16} />\n * </IconButton>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge\n */\nexport const Badge = ({\n dimension = 8,\n className,\n position = \"bottom-left\",\n backgroundColor,\n\n value,\n isStandalone = false,\n}: BadgeProps) => {\n return (\n <StyledBadge\n className={classNames(\"c-badge\", className)}\n dimension={dimension}\n position={position}\n isStandalone={isStandalone}\n backgroundColor={backgroundColor}\n role=\"status\"\n value={value}\n >\n {value && value > 100 ? 99 + \"+\" : value}\n </StyledBadge>\n );\n};\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,UAAU;AAatC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAQA;EAAA,0BAPhBC,SAAS;IAATA,SAAS,+BAAG,CAAC;IACbC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,QAAQ,8BAAG,aAAa;IACxBC,eAAe,QAAfA,eAAe;IAEfC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,KAAK;EAEpB,oBACE,oBAAC,WAAW;IACV,SAAS,EAAET,UAAU,CAAC,SAAS,EAAEK,SAAS,CAAE;IAC5C,SAAS,EAAED,SAAU;IACrB,QAAQ,EAAEE,QAAS;IACnB,YAAY,EAAEG,YAAa;IAC3B,eAAe,EAAEF,eAAgB;IACjC,IAAI,EAAC,QAAQ;IACb,KAAK,EAAEC;EAAM,GAEZA,KAAK,IAAIA,KAAK,GAAG,GAAG,GAAG,EAAE,GAAG,GAAG,GAAGA,KAAK,CAC5B;AAElB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,qFAuDvB,CAAC"}
|
|
@@ -3,8 +3,10 @@ import { FontStyle } from "../FontStyle";
|
|
|
3
3
|
export var StyledBadge = styled.div.withConfig({
|
|
4
4
|
displayName: "Styles__StyledBadge",
|
|
5
5
|
componentId: "sc-6o8do5-0"
|
|
6
|
-
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;
|
|
7
|
-
return props.backgroundColor;
|
|
6
|
+
})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], FontStyle, function (props) {
|
|
7
|
+
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
|
|
8
|
+
}, function (props) {
|
|
9
|
+
return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
|
|
8
10
|
}, function (props) {
|
|
9
11
|
return props.dimension + "px";
|
|
10
12
|
}, function (props) {
|
|
@@ -12,16 +14,19 @@ export var StyledBadge = styled.div.withConfig({
|
|
|
12
14
|
}, function (props) {
|
|
13
15
|
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
14
16
|
}, function (_ref) {
|
|
15
|
-
var
|
|
16
|
-
return
|
|
17
|
+
var isStandalone = _ref.isStandalone;
|
|
18
|
+
return isStandalone && css(["position:static;z-index:0;"]);
|
|
17
19
|
}, function (_ref2) {
|
|
18
20
|
var position = _ref2.position;
|
|
19
|
-
return position === "top-
|
|
21
|
+
return position === "top-left" && css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
20
22
|
}, function (_ref3) {
|
|
21
23
|
var position = _ref3.position;
|
|
22
|
-
return position === "
|
|
24
|
+
return position === "top-right" && css(["inset-block-start:0;inset-inline-end:0;"]);
|
|
23
25
|
}, function (_ref4) {
|
|
24
26
|
var position = _ref4.position;
|
|
27
|
+
return position === "bottom-right" && css(["inset-block-end:0;inset-inline-end:0;"]);
|
|
28
|
+
}, function (_ref5) {
|
|
29
|
+
var position = _ref5.position;
|
|
25
30
|
return position === "bottom-left" && css(["inset-block-end:0;inset-inline-start:0;"]);
|
|
26
31
|
});
|
|
27
32
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","StyledBadge","div","props","backgroundColor","dimension","value","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props)
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","StyledBadge","div","props","backgroundColor","isStandalone","dimension","value","position"],"sources":["../../../../src/components/Badge/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BadgeProps } from \"./Badge\";\n\nexport const StyledBadge = styled.div<Partial<BadgeProps>>`\n ${FontStyle}\n align-items: center;\n background-color: ${(props) =>\n !props.backgroundColor ? \"var(--color-primary)\" : props.backgroundColor};\n border: ${(props) =>\n props.isStandalone ? \"none\" : \"2px solid var(--page-paper-main)\"};\n block-size: ${(props) => props.dimension + \"px\"};\n border-radius: 100%;\n color: var(--color-theme-100);\n display: flex;\n font-size: 10px;\n font-weight: 500;\n inline-size: ${(props) => props.dimension + \"px\"};\n justify-content: center;\n padding: ${(props) =>\n props.value && (props.value > 99 ? \"4px\" : props.value < 100 && \"2px\")};\n pointer-events: none;\n position: absolute;\n z-index: 1;\n\n ${({ isStandalone }) =>\n isStandalone &&\n css`\n position: static;\n z-index: 0;\n `}\n\n ${({ position }) =>\n position === \"top-left\" &&\n css`\n inset-block-start: 0;\n inset-inline-start: 0;\n `}\n\n ${({ position }) =>\n position === \"top-right\" &&\n css`\n inset-block-start: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-right\" &&\n css`\n inset-block-end: 0;\n inset-inline-end: 0;\n `}\n\n ${({ position }) =>\n position === \"bottom-left\" &&\n css`\n inset-block-end: 0;\n inset-inline-start: 0;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,cAAc;AAGxC,OAAO,IAAMC,WAAW,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,4SACjCF,SAAS,EAES,UAACG,KAAK;EAAA,OACxB,CAACA,KAAK,CAACC,eAAe,GAAG,sBAAsB,GAAGD,KAAK,CAACC,eAAe;AAAA,GAC/D,UAACD,KAAK;EAAA,OACdA,KAAK,CAACE,YAAY,GAAG,MAAM,GAAG,kCAAkC;AAAA,GACpD,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAMhC,UAACH,KAAK;EAAA,OAAKA,KAAK,CAACG,SAAS,GAAG,IAAI;AAAA,GAErC,UAACH,KAAK;EAAA,OACfA,KAAK,CAACI,KAAK,KAAKJ,KAAK,CAACI,KAAK,GAAG,EAAE,GAAG,KAAK,GAAGJ,KAAK,CAACI,KAAK,GAAG,GAAG,IAAI,KAAK,CAAC;AAAA,GAKtE;EAAA,IAAGF,YAAY,QAAZA,YAAY;EAAA,OACfA,YAAY,IACZN,GAAG,gCAGF;AAAA,GAED;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,UAAU,IACvBT,GAAG,+CAGF;AAAA,GAED;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACXA,QAAQ,KAAK,WAAW,IACxBT,GAAG,6CAGF;AAAA,GAEC;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,cAAc,IAC3BT,GAAG,2CAGF;AAAA,GAEC;EAAA,IAAGS,QAAQ,SAARA,QAAQ;EAAA,OACbA,QAAQ,KAAK,aAAa,IAC1BT,GAAG,6CAGF;AAAA,EACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/CheckboxIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/CheckboxIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,YAAY;;;slPAgFjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
var _excluded = ["isIndeterminate", "data-testid"];
|
|
4
|
-
import React
|
|
4
|
+
import React from "react";
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* @component CheckboxIcon
|
|
@@ -26,17 +26,17 @@ var CheckboxIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
|
|
|
26
26
|
var isIndeterminate = _ref.isIndeterminate,
|
|
27
27
|
testId = _ref["data-testid"],
|
|
28
28
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
29
|
+
// const [animate, setAnimate] = useState(false);
|
|
30
|
+
// const mountRef = useRef(false);
|
|
31
|
+
|
|
32
|
+
// useEffect(() => {
|
|
33
|
+
// if (mountRef.current) {
|
|
34
|
+
// setAnimate(true);
|
|
35
|
+
// } else {
|
|
36
|
+
// mountRef.current = true;
|
|
37
|
+
// }
|
|
38
|
+
// }, [isIndeterminate]);
|
|
39
|
+
|
|
40
40
|
if (isIndeterminate) {
|
|
41
41
|
return /*#__PURE__*/React.createElement("svg", {
|
|
42
42
|
width: "16",
|
|
@@ -53,17 +53,11 @@ var CheckboxIcon = /*#__PURE__*/React.forwardRef(function (_ref, svgRef) {
|
|
|
53
53
|
}), /*#__PURE__*/React.createElement("rect", {
|
|
54
54
|
x: "3",
|
|
55
55
|
y: "7",
|
|
56
|
-
width:
|
|
56
|
+
width: 10,
|
|
57
57
|
height: "2",
|
|
58
58
|
rx: "1",
|
|
59
59
|
fill: "var(--page-paper-main)"
|
|
60
|
-
}
|
|
61
|
-
attributeName: "width",
|
|
62
|
-
from: "0",
|
|
63
|
-
to: "10",
|
|
64
|
-
dur: "0.2s",
|
|
65
|
-
fill: "freeze"
|
|
66
|
-
})));
|
|
60
|
+
}));
|
|
67
61
|
}
|
|
68
62
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
69
63
|
width: 16,
|