@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIcon.js","names":["React","
|
|
1
|
+
{"version":3,"file":"CheckboxIcon.js","names":["React","CheckboxIcon","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,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,YAAY,gBAAGD,KAAK,CAACE,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;AACDJ,YAAY,CAACM,WAAW,GAAG,cAAc;AACzC,eAAeN,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAYxD,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW;IACX,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,UAAU,EAAE,CAAC,KAAK,CAAC,KAAA,KAAK,IAAI,CAAC;IAC7B,sBAAsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"CounterButton.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;AAYxD,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW;IACX,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,UAAU,EAAE,CAAC,KAAK,CAAC,KAAA,KAAK,IAAI,CAAC;IAC7B,sBAAsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,4FA+DzB,CAAC"}
|
|
@@ -5,7 +5,7 @@ import React, { forwardRef } from "react";
|
|
|
5
5
|
import classNames from "classnames";
|
|
6
6
|
import { Tooltip } from "../Tooltip/Tooltip";
|
|
7
7
|
import CloseSmallIcon from "../Icons/collection/CloseSmall";
|
|
8
|
-
import {
|
|
8
|
+
import { StyledBadge, StyledCounterButton, StyledCounterButtonLabel, StyledCounterButtonReset, StyledCounterButtonWrapper } from "./Styles";
|
|
9
9
|
export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
10
10
|
var label = _ref.label,
|
|
11
11
|
icon = _ref.icon,
|
|
@@ -38,9 +38,11 @@ export var CounterButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
38
38
|
weight: "medium",
|
|
39
39
|
className: "c-counter-button__label",
|
|
40
40
|
$active: counter > 0 || active
|
|
41
|
-
}, label), counter > 0 ? /*#__PURE__*/React.createElement(
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
}, label), counter > 0 ? /*#__PURE__*/React.createElement(StyledBadge, {
|
|
42
|
+
isStandalone: true,
|
|
43
|
+
dimension: 16,
|
|
44
|
+
value: counter
|
|
45
|
+
}) : null), counter > 0 ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
44
46
|
title: "" + tooltipText,
|
|
45
47
|
popperTooltipClassName: "z-index-1300"
|
|
46
48
|
}, /*#__PURE__*/React.createElement(StyledCounterButtonReset, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CounterButton.js","names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","
|
|
1
|
+
{"version":3,"file":"CounterButton.js","names":["React","forwardRef","classNames","Tooltip","CloseSmallIcon","StyledBadge","StyledCounterButton","StyledCounterButtonLabel","StyledCounterButtonReset","StyledCounterButtonWrapper","CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","disabled","args","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,OAAOA,KAAK,IAAIC,UAAU,QAAsB,OAAO;AACvD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,OAAOC,cAAc,MAAM,gCAAgC;AAC3D,SACEC,WAAW,EACXC,mBAAmB,EACnBC,wBAAwB,EACxBC,wBAAwB,EACxBC,0BAA0B,QACrB,UAAU;AAqBjB,OAAO,IAAMC,aAAa,gBAAGT,UAAU,CACrC,gBAYEU,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,oBAAC,0BAA0B;IAAC,GAAG,EAAET,GAAI;IAAC,SAAS,EAAEO;EAAU,gBACzD,oBAAC,mBAAmB;IAClB,QAAQ,EAAEC,QAAS;IACnB,iBAAeA,QAAS;IACxB,SAAS,EAAEjB,UAAU,CAAC,kBAAkB,EAAE;MACxC,4BAA4B,EAAEa;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,iBACHb,KAAK,CAACqB,YAAY,CAACR,IAAI,EAAE;IACvBK,SAAS,EAAEhB,UAAU,CAAC,wBAAwB;EAChD,CAAC,CAAC,EACHU,KAAK,iBACJ,oBAAC,wBAAwB;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,oBAAC,WAAW;IAAC,YAAY,EAAE,IAAK;IAAC,SAAS,EAAE,EAAG;IAAC,KAAK,EAAEA;EAAQ,EAAG,GAChE,IAAI,CACY,EACrBA,OAAO,GAAG,CAAC,gBACV,oBAAC,OAAO;IACN,KAAK,OAAKC,WAAc;IACxB,sBAAsB,EAAC;EAAc,gBAErC,oBAAC,wBAAwB;IACvB,OAAO,EAAC,cAAc;IACtB,SAAS,EAAC,yBAAyB;IACnC,OAAO,EAAEC;EAAW,gBAEpB,oBAAC,cAAc,OAAG,CACO,CACnB,GACR,IAAI,CACmB;AAEjC,CAAC,CACF;AAEDP,aAAa,CAACY,WAAW,GAAG,eAAe"}
|
|
@@ -7,14 +7,12 @@ export declare const StyledCounterButtonWrapper: import("styled-components").Sty
|
|
|
7
7
|
export declare const StyledCounterButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/Button").ButtonProps & {
|
|
8
8
|
children?: import("react").ReactNode;
|
|
9
9
|
} & import("react").RefAttributes<HTMLButtonElement>>, any, StyledCounterButtonProps, never>;
|
|
10
|
-
export declare const StyledCounterButtonCounter: import("styled-components").StyledComponent<"div", any, {
|
|
11
|
-
$selected?: boolean | undefined;
|
|
12
|
-
}, never>;
|
|
13
10
|
export declare const StyledCounterButtonReset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Button/Button").ButtonProps & {
|
|
14
11
|
children?: import("react").ReactNode;
|
|
15
12
|
} & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
|
|
16
13
|
export declare const StyledCounterButtonLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography/Variants/Body2").IBodyProps & Omit<import("../Typography/Typography").ITypographyProps, "variant" | "weight"> & import("react").RefAttributes<HTMLDivElement>>, any, {
|
|
17
14
|
$active?: boolean | undefined;
|
|
18
15
|
}, never>;
|
|
16
|
+
export declare const StyledBadge: import("styled-components").StyledComponent<({ dimension, className, position, backgroundColor, value, isStandalone, }: import("../Badge").BadgeProps) => JSX.Element, any, {}, never>;
|
|
19
17
|
export {};
|
|
20
18
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAQA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;4FA8B/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;;sEAWpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAgBpC,CAAC;AAIF,eAAO,MAAM,WAAW,wLAGvB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { Body2 } from "../Typography/Variants/Body2";
|
|
|
3
3
|
import { Button } from "../Button/Button";
|
|
4
4
|
import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
5
5
|
import { FontStyle } from "../FontStyle";
|
|
6
|
+
import { Badge } from "../Badge";
|
|
6
7
|
export var StyledCounterButtonWrapper = styled.div.withConfig({
|
|
7
8
|
displayName: "Styles__StyledCounterButtonWrapper",
|
|
8
9
|
componentId: "sc-1ecrcba-0"
|
|
@@ -21,19 +22,14 @@ export var StyledCounterButton = styled(Button).withConfig({
|
|
|
21
22
|
return props.disabled && css(["pointer-events:none;opacity:0.5;"]);
|
|
22
23
|
});
|
|
23
24
|
StyledCounterButton.displayName = "StyledCounterButton";
|
|
24
|
-
export var StyledCounterButtonCounter = styled.div.withConfig({
|
|
25
|
-
displayName: "Styles__StyledCounterButtonCounter",
|
|
26
|
-
componentId: "sc-1ecrcba-2"
|
|
27
|
-
})(["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;"]);
|
|
28
|
-
StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
29
25
|
export var StyledCounterButtonReset = styled(Button).withConfig({
|
|
30
26
|
displayName: "Styles__StyledCounterButtonReset",
|
|
31
|
-
componentId: "sc-1ecrcba-
|
|
27
|
+
componentId: "sc-1ecrcba-2"
|
|
32
28
|
})(["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;}"]);
|
|
33
29
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
34
30
|
export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
35
31
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
36
|
-
componentId: "sc-1ecrcba-
|
|
32
|
+
componentId: "sc-1ecrcba-3"
|
|
37
33
|
})(["", " ", ":hover &&{", "}", ""], {
|
|
38
34
|
"pointerEvents": "none"
|
|
39
35
|
}, StyledCounterButton, function (props) {
|
|
@@ -42,4 +38,9 @@ export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
|
42
38
|
return props.$active && css(["color:var(--color-primary);"]);
|
|
43
39
|
});
|
|
44
40
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
41
|
+
export var StyledBadge = styled(Badge).withConfig({
|
|
42
|
+
displayName: "Styles__StyledBadge",
|
|
43
|
+
componentId: "sc-1ecrcba-4"
|
|
44
|
+
})(["margin-left:4px;margin-right:-6px;"]);
|
|
45
|
+
StyledBadge.displayName = "StyledBadge";
|
|
45
46
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","disabled","$selected","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","Badge","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","disabled","$selected","StyledCounterButtonReset","StyledCounterButtonLabel","StyledBadge"],"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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,KAAK,QAAQ,8BAA8B;AACpD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,KAAK,QAAQ,UAAU;AAOhC,OAAO,IAAMC,0BAA0B,GAAGP,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXH,SAAS,EACTD,cAAc,CAEjB;AAEDG,0BAA0B,CAACE,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,uBAC7C,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACb,CAACD,KAAK,CAACE,QAAQ,IACfZ,GAAG,gGAUF;AAAA,GAED,UAACU,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,IACfb,GAAG,uGAIF;AAAA,GAEC,UAACU,KAAK;EAAA,OACRA,KAAK,CAACE,QAAQ,IACdZ,GAAG,sCAGF;AAAA,EACJ;AAEDS,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMM,wBAAwB,GAAGf,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAEDY,wBAAwB,CAACN,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMO,wBAAwB,GAAGhB,MAAM,CAACE,KAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BQ,mBAAmB,EACjB,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,IACdX,GAAG,mCAEF;AAAA,GAGH,UAACU,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbX,GAAG,iCAEF;AAAA,EACJ;AAEDe,wBAAwB,CAACP,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMQ,WAAW,GAAGjB,MAAM,CAACM,KAAK,CAAC;EAAA;EAAA;AAAA,0CAGvC;AAEDW,WAAW,CAACR,WAAW,GAAG,aAAa"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { useRef, useEffect } from "react";
|
|
2
2
|
import { ArrowRightIcon } from "../Icons";
|
|
3
|
-
import { StyledStartMenuTitle,
|
|
3
|
+
import { StyledStartMenuTitle, StyledStartMenuListItem, StyledStartMenuList, StyledStartMenuNoResults } from "./Styles";
|
|
4
4
|
import { useResizeObserver } from "../../utils";
|
|
5
|
+
import { Badge } from "../Badge";
|
|
5
6
|
export var StartMenu = function StartMenu(_ref) {
|
|
6
7
|
var data = _ref.data,
|
|
7
8
|
selected = _ref.selected,
|
|
@@ -27,6 +28,7 @@ export var StartMenu = function StartMenu(_ref) {
|
|
|
27
28
|
title = _ref2.title,
|
|
28
29
|
submenu = _ref2.submenu;
|
|
29
30
|
var count = 0;
|
|
31
|
+
// Popricati o ovome kada je selected[id] vrednost 0.
|
|
30
32
|
if (typeof selected[id] === "string") {
|
|
31
33
|
count += 1;
|
|
32
34
|
} else {
|
|
@@ -39,7 +41,11 @@ export var StartMenu = function StartMenu(_ref) {
|
|
|
39
41
|
onClick: function onClick() {
|
|
40
42
|
return onItemClick(id);
|
|
41
43
|
}
|
|
42
|
-
}, /*#__PURE__*/React.createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React.createElement(
|
|
44
|
+
}, /*#__PURE__*/React.createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React.createElement(Badge, {
|
|
45
|
+
dimension: 16,
|
|
46
|
+
value: count,
|
|
47
|
+
isStandalone: true
|
|
48
|
+
}) : null, /*#__PURE__*/React.createElement(ArrowRightIcon, null));
|
|
43
49
|
}
|
|
44
50
|
}) : emptyFilterText ? /*#__PURE__*/React.createElement(StyledStartMenuNoResults, null, emptyFilterText) : null, children));
|
|
45
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartMenu.js","names":["React","useRef","useEffect","ArrowRightIcon","StyledStartMenuTitle","
|
|
1
|
+
{"version":3,"file":"StartMenu.js","names":["React","useRef","useEffect","ArrowRightIcon","StyledStartMenuTitle","StyledStartMenuListItem","StyledStartMenuList","StyledStartMenuNoResults","useResizeObserver","Badge","StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","dimensions","height","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,OAAOA,KAAK,IAAQC,MAAM,EAAEC,SAAS,QAAwB,OAAO;AACpE,SAASC,cAAc,QAAQ,UAAU;AAEzC,SACEC,oBAAoB,EACpBC,uBAAuB,EACvBC,mBAAmB,EACnBC,wBAAwB,QACnB,UAAU;AACjB,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,KAAK,QAAQ,UAAU;AAWhC,OAAO,IAAMC,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,GAAGlB,MAAM,CAAC,IAAI,CAAC;EACxB,IAAMmB,UAAU,GAAGZ,iBAAiB,CAACW,GAAG,CAAC;EACzC,IAAME,MAAM,GAAGD,UAAU,oBAAVA,UAAU,CAAEC,MAAM;EAEjCnB,SAAS,CAAC,YAAM;IACd,IAAImB,MAAM,IAAIA,MAAM,GAAG,CAAC,EAAE;MACxBN,cAAc,CAACM,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAEN,cAAc,CAAC,CAAC;EAE5B,oBACE;IAAK,KAAK,EAAED,KAAM;IAAC,GAAG,EAAEK;EAAI,gBAC1B,oBAAC,mBAAmB,QACjBH,oBAAoB,GACnBL,IAAI,CAACW,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,OAAOf,QAAQ,CAACY,EAAE,CAAC,KAAK,QAAQ,EAAE;MACpCG,KAAK,IAAI,CAAC;IACZ,CAAC,MAAM;MAAA;MACLA,KAAK,mBAAGf,QAAQ,CAACY,EAAE,CAAC,qBAAZ,aAAcI,MAAM;IAC9B;IAEA,IAAI,CAAAF,OAAO,oBAAPA,OAAO,CAAEE,MAAM,IAAG,CAAC,EAAE;MACvB,oBACE,oBAAC,uBAAuB;QACtB,GAAG,wBAAsBL,KAAQ;QACjC,OAAO,EAAE;UAAA,OAAMV,WAAW,CAACW,EAAE,CAAC;QAAA;MAAC,gBAE/B,oBAAC,oBAAoB,QAAEC,KAAK,CAAwB,EACnDE,KAAK,GAAG,CAAC,gBACR,oBAAC,KAAK;QAAC,SAAS,EAAE,EAAG;QAAC,KAAK,EAAEA,KAAM;QAAC,YAAY,EAAE;MAAK,EAAG,GACxD,IAAI,eACR,oBAAC,cAAc,OAAG,CACM;IAE9B;EACF,CAAC,CAAC,GACAV,eAAe,gBACjB,oBAAC,wBAAwB,QAAEA,eAAe,CAA4B,GACpE,IAAI,EACPC,QAAQ,CACW,CAClB;AAEV,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -8194,6 +8194,76 @@
|
|
|
8194
8194
|
});
|
|
8195
8195
|
Body2.displayName = "Body2";
|
|
8196
8196
|
|
|
8197
|
+
var StyledBadge$1 = styled__default["default"].div.withConfig({
|
|
8198
|
+
displayName: "Styles__StyledBadge",
|
|
8199
|
+
componentId: "sc-6o8do5-0"
|
|
8200
|
+
})(["", " 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) {
|
|
8201
|
+
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
|
|
8202
|
+
}, function (props) {
|
|
8203
|
+
return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
|
|
8204
|
+
}, function (props) {
|
|
8205
|
+
return props.dimension + "px";
|
|
8206
|
+
}, function (props) {
|
|
8207
|
+
return props.dimension + "px";
|
|
8208
|
+
}, function (props) {
|
|
8209
|
+
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
8210
|
+
}, function (_ref) {
|
|
8211
|
+
var isStandalone = _ref.isStandalone;
|
|
8212
|
+
return isStandalone && styled.css(["position:static;z-index:0;"]);
|
|
8213
|
+
}, function (_ref2) {
|
|
8214
|
+
var position = _ref2.position;
|
|
8215
|
+
return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
8216
|
+
}, function (_ref3) {
|
|
8217
|
+
var position = _ref3.position;
|
|
8218
|
+
return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
|
|
8219
|
+
}, function (_ref4) {
|
|
8220
|
+
var position = _ref4.position;
|
|
8221
|
+
return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
|
|
8222
|
+
}, function (_ref5) {
|
|
8223
|
+
var position = _ref5.position;
|
|
8224
|
+
return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
|
|
8225
|
+
});
|
|
8226
|
+
|
|
8227
|
+
/**
|
|
8228
|
+
* @component Badge
|
|
8229
|
+
* @description
|
|
8230
|
+
* In some products, you might need to show a badge on the right corner of the avatar.
|
|
8231
|
+
* We call this a badge. Here's an example that shows if the user is online.
|
|
8232
|
+
*
|
|
8233
|
+
* @prop {position} - dictates the position of a badge.
|
|
8234
|
+
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
8235
|
+
* @prop {backgroundColor} - background-color of a badge.
|
|
8236
|
+
*
|
|
8237
|
+
* @example
|
|
8238
|
+
* <IconButton variant="text gray" size="big">
|
|
8239
|
+
* <BellOffIcon />
|
|
8240
|
+
* <Badge position="top-right" backgroundColor="red" dimension={16} />
|
|
8241
|
+
* </IconButton>
|
|
8242
|
+
*
|
|
8243
|
+
* @see
|
|
8244
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
8245
|
+
*/
|
|
8246
|
+
var Badge = function Badge(_ref) {
|
|
8247
|
+
var _ref$dimension = _ref.dimension,
|
|
8248
|
+
dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
|
|
8249
|
+
className = _ref.className,
|
|
8250
|
+
_ref$position = _ref.position,
|
|
8251
|
+
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
8252
|
+
backgroundColor = _ref.backgroundColor,
|
|
8253
|
+
value = _ref.value,
|
|
8254
|
+
_ref$isStandalone = _ref.isStandalone,
|
|
8255
|
+
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
|
|
8256
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledBadge$1, {
|
|
8257
|
+
className: classNames__default["default"]("c-badge", className),
|
|
8258
|
+
dimension: dimension,
|
|
8259
|
+
position: position,
|
|
8260
|
+
isStandalone: isStandalone,
|
|
8261
|
+
backgroundColor: backgroundColor,
|
|
8262
|
+
role: "status",
|
|
8263
|
+
value: value
|
|
8264
|
+
}, value && value > 100 ? 99 + "+" : value);
|
|
8265
|
+
};
|
|
8266
|
+
|
|
8197
8267
|
var StyledCounterButtonWrapper = styled__default["default"].div.withConfig({
|
|
8198
8268
|
displayName: "Styles__StyledCounterButtonWrapper",
|
|
8199
8269
|
componentId: "sc-1ecrcba-0"
|
|
@@ -8212,19 +8282,14 @@
|
|
|
8212
8282
|
return props.disabled && styled.css(["pointer-events:none;opacity:0.5;"]);
|
|
8213
8283
|
});
|
|
8214
8284
|
StyledCounterButton.displayName = "StyledCounterButton";
|
|
8215
|
-
var StyledCounterButtonCounter = styled__default["default"].div.withConfig({
|
|
8216
|
-
displayName: "Styles__StyledCounterButtonCounter",
|
|
8217
|
-
componentId: "sc-1ecrcba-2"
|
|
8218
|
-
})(["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;"]);
|
|
8219
|
-
StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
8220
8285
|
var StyledCounterButtonReset = styled__default["default"](Button).withConfig({
|
|
8221
8286
|
displayName: "Styles__StyledCounterButtonReset",
|
|
8222
|
-
componentId: "sc-1ecrcba-
|
|
8287
|
+
componentId: "sc-1ecrcba-2"
|
|
8223
8288
|
})(["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;}"]);
|
|
8224
8289
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
8225
8290
|
var StyledCounterButtonLabel = styled__default["default"](Body2).withConfig({
|
|
8226
8291
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
8227
|
-
componentId: "sc-1ecrcba-
|
|
8292
|
+
componentId: "sc-1ecrcba-3"
|
|
8228
8293
|
})(["", " ", ":hover &&{", "}", ""], {
|
|
8229
8294
|
"pointerEvents": "none"
|
|
8230
8295
|
}, StyledCounterButton, function (props) {
|
|
@@ -8233,6 +8298,11 @@
|
|
|
8233
8298
|
return props.$active && styled.css(["color:var(--color-primary);"]);
|
|
8234
8299
|
});
|
|
8235
8300
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
8301
|
+
var StyledBadge = styled__default["default"](Badge).withConfig({
|
|
8302
|
+
displayName: "Styles__StyledBadge",
|
|
8303
|
+
componentId: "sc-1ecrcba-4"
|
|
8304
|
+
})(["margin-left:4px;margin-right:-6px;"]);
|
|
8305
|
+
StyledBadge.displayName = "StyledBadge";
|
|
8236
8306
|
|
|
8237
8307
|
var _excluded$18 = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "disabled"];
|
|
8238
8308
|
var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
@@ -8267,9 +8337,11 @@
|
|
|
8267
8337
|
weight: "medium",
|
|
8268
8338
|
className: "c-counter-button__label",
|
|
8269
8339
|
$active: counter > 0 || active
|
|
8270
|
-
}, label), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(
|
|
8271
|
-
|
|
8272
|
-
|
|
8340
|
+
}, label), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
|
|
8341
|
+
isStandalone: true,
|
|
8342
|
+
dimension: 16,
|
|
8343
|
+
value: counter
|
|
8344
|
+
}) : null), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
|
|
8273
8345
|
title: "".concat(tooltipText),
|
|
8274
8346
|
popperTooltipClassName: "z-index-1300"
|
|
8275
8347
|
}, /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonReset, {
|
|
@@ -10629,18 +10701,17 @@
|
|
|
10629
10701
|
var isIndeterminate = _ref.isIndeterminate,
|
|
10630
10702
|
testId = _ref["data-testid"],
|
|
10631
10703
|
props = _objectWithoutProperties(_ref, _excluded$R);
|
|
10632
|
-
|
|
10633
|
-
|
|
10634
|
-
|
|
10635
|
-
|
|
10636
|
-
|
|
10637
|
-
|
|
10638
|
-
|
|
10639
|
-
|
|
10640
|
-
|
|
10641
|
-
|
|
10642
|
-
|
|
10643
|
-
}, []);
|
|
10704
|
+
// const [animate, setAnimate] = useState(false);
|
|
10705
|
+
// const mountRef = useRef(false);
|
|
10706
|
+
|
|
10707
|
+
// useEffect(() => {
|
|
10708
|
+
// if (mountRef.current) {
|
|
10709
|
+
// setAnimate(true);
|
|
10710
|
+
// } else {
|
|
10711
|
+
// mountRef.current = true;
|
|
10712
|
+
// }
|
|
10713
|
+
// }, [isIndeterminate]);
|
|
10714
|
+
|
|
10644
10715
|
if (isIndeterminate) {
|
|
10645
10716
|
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
10646
10717
|
width: "16",
|
|
@@ -10657,17 +10728,11 @@
|
|
|
10657
10728
|
}), /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
10658
10729
|
x: "3",
|
|
10659
10730
|
y: "7",
|
|
10660
|
-
width:
|
|
10731
|
+
width: 10,
|
|
10661
10732
|
height: "2",
|
|
10662
10733
|
rx: "1",
|
|
10663
10734
|
fill: "var(--page-paper-main)"
|
|
10664
|
-
}
|
|
10665
|
-
attributeName: "width",
|
|
10666
|
-
from: "0",
|
|
10667
|
-
to: "10",
|
|
10668
|
-
dur: "0.2s",
|
|
10669
|
-
fill: "freeze"
|
|
10670
|
-
})));
|
|
10735
|
+
}));
|
|
10671
10736
|
}
|
|
10672
10737
|
return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
|
|
10673
10738
|
width: 16,
|
|
@@ -16961,6 +17026,7 @@
|
|
|
16961
17026
|
title = _ref2.title,
|
|
16962
17027
|
submenu = _ref2.submenu;
|
|
16963
17028
|
var count = 0;
|
|
17029
|
+
// Popricati o ovome kada je selected[id] vrednost 0.
|
|
16964
17030
|
if (typeof selected[id] === "string") {
|
|
16965
17031
|
count += 1;
|
|
16966
17032
|
} else {
|
|
@@ -16973,7 +17039,11 @@
|
|
|
16973
17039
|
onClick: function onClick() {
|
|
16974
17040
|
return onItemClick(id);
|
|
16975
17041
|
}
|
|
16976
|
-
}, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React__default["default"].createElement(
|
|
17042
|
+
}, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React__default["default"].createElement(Badge, {
|
|
17043
|
+
dimension: 16,
|
|
17044
|
+
value: count,
|
|
17045
|
+
isStandalone: true
|
|
17046
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null));
|
|
16977
17047
|
}
|
|
16978
17048
|
}) : emptyFilterText ? /*#__PURE__*/React__default["default"].createElement(StyledStartMenuNoResults, null, emptyFilterText) : null, children));
|
|
16979
17049
|
};
|
|
@@ -17372,72 +17442,6 @@
|
|
|
17372
17442
|
});
|
|
17373
17443
|
Wizard.displayName = "Wizard";
|
|
17374
17444
|
|
|
17375
|
-
var StyledBadge = styled__default["default"].div.withConfig({
|
|
17376
|
-
displayName: "Styles__StyledBadge",
|
|
17377
|
-
componentId: "sc-6o8do5-0"
|
|
17378
|
-
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
|
|
17379
|
-
return props.backgroundColor;
|
|
17380
|
-
}, function (props) {
|
|
17381
|
-
return props.dimension + "px";
|
|
17382
|
-
}, function (props) {
|
|
17383
|
-
return props.dimension + "px";
|
|
17384
|
-
}, function (props) {
|
|
17385
|
-
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
17386
|
-
}, function (_ref) {
|
|
17387
|
-
var position = _ref.position;
|
|
17388
|
-
return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
17389
|
-
}, function (_ref2) {
|
|
17390
|
-
var position = _ref2.position;
|
|
17391
|
-
return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
|
|
17392
|
-
}, function (_ref3) {
|
|
17393
|
-
var position = _ref3.position;
|
|
17394
|
-
return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
|
|
17395
|
-
}, function (_ref4) {
|
|
17396
|
-
var position = _ref4.position;
|
|
17397
|
-
return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
|
|
17398
|
-
});
|
|
17399
|
-
|
|
17400
|
-
/**
|
|
17401
|
-
* @component Badge
|
|
17402
|
-
* @description
|
|
17403
|
-
* In some products, you might need to show a badge on the right corner of the avatar.
|
|
17404
|
-
* We call this a badge. Here's an example that shows if the user is online.
|
|
17405
|
-
*
|
|
17406
|
-
* @prop {position} - dictates the position of a badge.
|
|
17407
|
-
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
17408
|
-
* @prop {backgroundColor} - background-color of a badge.
|
|
17409
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
17410
|
-
*
|
|
17411
|
-
* @example
|
|
17412
|
-
* <IconButton variant="text gray" size="big">
|
|
17413
|
-
* <BellOffIcon />
|
|
17414
|
-
* <Badge position="top-right" backgroundColor="red" dimension={16} />
|
|
17415
|
-
* </IconButton>
|
|
17416
|
-
*
|
|
17417
|
-
* @see
|
|
17418
|
-
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
17419
|
-
*/
|
|
17420
|
-
var Badge = function Badge(_ref) {
|
|
17421
|
-
var _ref$dimension = _ref.dimension,
|
|
17422
|
-
dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
|
|
17423
|
-
className = _ref.className,
|
|
17424
|
-
_ref$position = _ref.position,
|
|
17425
|
-
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
17426
|
-
_ref$backgroundColor = _ref.backgroundColor,
|
|
17427
|
-
backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
|
|
17428
|
-
_ref$isVisible = _ref.isVisible,
|
|
17429
|
-
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
|
|
17430
|
-
value = _ref.value;
|
|
17431
|
-
return isVisible ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
|
|
17432
|
-
className: classNames__default["default"]("c-badge", className),
|
|
17433
|
-
dimension: dimension,
|
|
17434
|
-
position: position,
|
|
17435
|
-
backgroundColor: backgroundColor,
|
|
17436
|
-
role: "status",
|
|
17437
|
-
value: value
|
|
17438
|
-
}, value && value > 100 ? 99 + "+" : value) : null;
|
|
17439
|
-
};
|
|
17440
|
-
|
|
17441
17445
|
var AvatarGroupsStyles = styled__default["default"].div.withConfig({
|
|
17442
17446
|
displayName: "Styles__AvatarGroupsStyles",
|
|
17443
17447
|
componentId: "sc-1padv46-0"
|