@activecollab/components 1.0.110 → 1.0.113

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.
Files changed (46) hide show
  1. package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js +126 -16
  2. package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
  3. package/dist/cjs/components/Breadcrumbs/Styles.js +12 -9
  4. package/dist/cjs/components/Breadcrumbs/Styles.js.map +1 -1
  5. package/dist/cjs/components/Select/OptionContent/OptionContent.js +1 -1
  6. package/dist/cjs/components/Select/OptionContent/OptionContent.js.map +1 -1
  7. package/dist/cjs/components/Select/OptionContent/Styles.js +13 -5
  8. package/dist/cjs/components/Select/OptionContent/Styles.js.map +1 -1
  9. package/dist/cjs/utils/index.js +10 -1
  10. package/dist/cjs/utils/index.js.map +1 -1
  11. package/dist/cjs/utils/useResizeObserver.js +49 -0
  12. package/dist/cjs/utils/useResizeObserver.js.map +1 -0
  13. package/dist/cjs/utils/useResizeObserver.test.js +37 -0
  14. package/dist/cjs/utils/useResizeObserver.test.js.map +1 -0
  15. package/dist/esm/components/Breadcrumbs/Breadcrumbs.d.ts +2 -1
  16. package/dist/esm/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  17. package/dist/esm/components/Breadcrumbs/Breadcrumbs.js +111 -15
  18. package/dist/esm/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
  19. package/dist/esm/components/Breadcrumbs/Styles.d.ts +2 -1
  20. package/dist/esm/components/Breadcrumbs/Styles.d.ts.map +1 -1
  21. package/dist/esm/components/Breadcrumbs/Styles.js +9 -5
  22. package/dist/esm/components/Breadcrumbs/Styles.js.map +1 -1
  23. package/dist/esm/components/Select/OptionContent/OptionContent.d.ts.map +1 -1
  24. package/dist/esm/components/Select/OptionContent/OptionContent.js +2 -2
  25. package/dist/esm/components/Select/OptionContent/OptionContent.js.map +1 -1
  26. package/dist/esm/components/Select/OptionContent/Styles.d.ts +1 -0
  27. package/dist/esm/components/Select/OptionContent/Styles.d.ts.map +1 -1
  28. package/dist/esm/components/Select/OptionContent/Styles.js +9 -4
  29. package/dist/esm/components/Select/OptionContent/Styles.js.map +1 -1
  30. package/dist/esm/utils/index.d.ts +1 -0
  31. package/dist/esm/utils/index.d.ts.map +1 -1
  32. package/dist/esm/utils/index.js +1 -0
  33. package/dist/esm/utils/index.js.map +1 -1
  34. package/dist/esm/utils/useResizeObserver.d.ts +5 -0
  35. package/dist/esm/utils/useResizeObserver.d.ts.map +1 -0
  36. package/dist/esm/utils/useResizeObserver.js +25 -0
  37. package/dist/esm/utils/useResizeObserver.js.map +1 -0
  38. package/dist/esm/utils/useResizeObserver.test.d.ts +2 -0
  39. package/dist/esm/utils/useResizeObserver.test.d.ts.map +1 -0
  40. package/dist/esm/utils/useResizeObserver.test.js +31 -0
  41. package/dist/esm/utils/useResizeObserver.test.js.map +1 -0
  42. package/dist/index.js +2256 -2115
  43. package/dist/index.js.map +1 -1
  44. package/dist/index.min.js +1 -1
  45. package/dist/index.min.js.map +1 -1
  46. package/package.json +1 -1
@@ -1,48 +1,144 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- var _excluded = ["children", "className", "separator"];
4
- import React, { useRef, useMemo } from "react";
5
- import { useForkRef } from "../..";
3
+ var _excluded = ["children", "className", "separator", "timeout"];
4
+ import React, { useRef, useMemo, useEffect, useState } from "react";
5
+ import { useForkRef, useResizeObserver } from "../../utils";
6
+ import { Menu } from "../Menu";
7
+ import { ListItem } from "../List";
6
8
  import { Button } from "../Button";
7
9
  import { TreeDotsIcon } from "../Icons";
8
- import { List, ListItem } from "../List";
9
- import { Menu } from "../Menu";
10
- import { StyledListMenuItem, StyledNavElement, StyledOList, StyledBreadcrumbListItem } from "./Styles";
10
+ import debounce from "lodash.debounce";
11
+ import { StyledNavElement, StyledOList, StyledBreadcrumbListItem, StyledMenuList } from "./Styles";
11
12
  export var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
12
13
  var children = _ref.children,
13
14
  className = _ref.className,
14
15
  _ref$separator = _ref.separator,
15
16
  separator = _ref$separator === void 0 ? "/" : _ref$separator,
17
+ _ref$timeout = _ref.timeout,
18
+ timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
16
19
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
17
20
 
18
21
  var internalRef = useRef(null);
22
+ var prevWidth = useRef();
23
+ var widthCollectionRef = useRef([]);
19
24
  var handleRef = useForkRef(ref, internalRef);
20
- var menuBreadcrumbs = 0;
25
+ var dimensions = useResizeObserver(internalRef);
26
+ var childrenCollection = useMemo(function () {
27
+ return React.Children.toArray(children);
28
+ }, [children]);
29
+
30
+ var _useState = useState(),
31
+ width = _useState[0],
32
+ setWidth = _useState[1];
33
+
34
+ var _useState2 = useState(0),
35
+ menuBreadcrumbs = _useState2[0],
36
+ setMenuBreadcrumbs = _useState2[1];
21
37
 
22
38
  var _useMemo = useMemo(function () {
23
- var collection = React.Children.toArray(children);
24
- return [collection.slice(0, menuBreadcrumbs), collection.slice(menuBreadcrumbs, collection.length)];
25
- }, [children, menuBreadcrumbs]),
39
+ return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
40
+ }, [childrenCollection, menuBreadcrumbs]),
26
41
  menuCollection = _useMemo[0],
27
42
  listCollection = _useMemo[1];
28
43
 
44
+ useEffect(function () {
45
+ var _internalRef$current, _internalRef$current2, _prevWidth$current;
46
+
47
+ var actualWidth = ((_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.scrollWidth) || 0;
48
+ var breadcrumbItems = (_internalRef$current2 = internalRef.current) == null ? void 0 : _internalRef$current2.firstElementChild;
49
+ var enabled = ((_prevWidth$current = prevWidth.current) != null ? _prevWidth$current : 0) > (width != null ? width : 0);
50
+
51
+ if (enabled && width && actualWidth > width) {
52
+ var diffWidth = actualWidth - width;
53
+ var childWidthCollection = [];
54
+ var childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;
55
+ var childSumWidth = 0;
56
+
57
+ while (diffWidth > childSumWidth) {
58
+ var _offsetWidth, _breadcrumbItems$chil, _offsetWidth2, _breadcrumbItems$chil2;
59
+
60
+ var childWidth = (_offsetWidth = breadcrumbItems == null ? void 0 : (_breadcrumbItems$chil = breadcrumbItems.children[childIndex]) == null ? void 0 : _breadcrumbItems$chil.offsetWidth) != null ? _offsetWidth : 0;
61
+ var separatorWidth = (_offsetWidth2 = breadcrumbItems == null ? void 0 : (_breadcrumbItems$chil2 = breadcrumbItems.children[childIndex + 1]) == null ? void 0 : _breadcrumbItems$chil2.offsetWidth) != null ? _offsetWidth2 : 0;
62
+ var result = separatorWidth + childWidth;
63
+ childWidthCollection.push(result);
64
+ childSumWidth += result;
65
+ childIndex += 2;
66
+ }
67
+
68
+ if (childWidthCollection.length === listCollection.length) {
69
+ childWidthCollection.pop();
70
+ }
71
+
72
+ widthCollectionRef.current = [].concat(widthCollectionRef.current, childWidthCollection);
73
+ setMenuBreadcrumbs(function (oldVal) {
74
+ return oldVal + childWidthCollection.length;
75
+ });
76
+ }
77
+ }, [listCollection.length, width]);
78
+ useEffect(function () {
79
+ var _internalRef$current3, _breadcrumbItems$last, _breadcrumbItems$last2, _prevWidth$current2;
80
+
81
+ var breadcrumbItems = (_internalRef$current3 = internalRef.current) == null ? void 0 : _internalRef$current3.firstElementChild;
82
+ var nextWidth = (breadcrumbItems == null ? void 0 : (_breadcrumbItems$last = breadcrumbItems.lastElementChild) == null ? void 0 : _breadcrumbItems$last.offsetWidth) + (breadcrumbItems == null ? void 0 : (_breadcrumbItems$last2 = breadcrumbItems.lastElementChild) == null ? void 0 : _breadcrumbItems$last2.offsetLeft);
83
+ var enabled = ((_prevWidth$current2 = prevWidth.current) != null ? _prevWidth$current2 : 0) < (width != null ? width : 0);
84
+ var diffWidth = (width != null ? width : 0) - nextWidth;
85
+
86
+ if (enabled && diffWidth > 0 && widthCollectionRef.current.length > 0) {
87
+ var total = widthCollectionRef.current.length;
88
+ var collection = [].concat(widthCollectionRef.current);
89
+ var sumWidth = 0;
90
+
91
+ while (diffWidth > sumWidth && collection.length > 0) {
92
+ var _collection;
93
+
94
+ var lastWidth = (_collection = collection[collection.length - 1]) != null ? _collection : 0;
95
+
96
+ if (diffWidth < lastWidth + sumWidth) {
97
+ sumWidth = diffWidth;
98
+ } else {
99
+ var _collection$pop;
100
+
101
+ sumWidth += (_collection$pop = collection.pop()) != null ? _collection$pop : 0;
102
+ }
103
+ }
104
+
105
+ var totalToDecrease = total - collection.length;
106
+ setMenuBreadcrumbs(function (oldVal) {
107
+ return oldVal - totalToDecrease;
108
+ });
109
+ var end = total - totalToDecrease;
110
+ widthCollectionRef.current = end > 0 ? widthCollectionRef.current.slice(0, end) : [];
111
+ }
112
+ }, [width]);
113
+ useEffect(function () {
114
+ var _dimensions$width;
115
+
116
+ var debounceWidth = debounce(function (width) {
117
+ setWidth(function (prevState) {
118
+ prevWidth.current = prevState != null ? prevState : width + 1;
119
+ return width;
120
+ });
121
+ }, timeout);
122
+ debounceWidth((_dimensions$width = dimensions == null ? void 0 : dimensions.width) != null ? _dimensions$width : 0);
123
+ return function () {
124
+ debounceWidth.cancel();
125
+ };
126
+ }, [timeout, dimensions == null ? void 0 : dimensions.width]);
29
127
  return /*#__PURE__*/React.createElement(StyledNavElement, _extends({
30
128
  className: className,
31
129
  ref: handleRef
32
- }, rest), /*#__PURE__*/React.createElement(StyledOList, null, menuBreadcrumbs > 0 ? /*#__PURE__*/React.createElement(StyledListMenuItem, null, /*#__PURE__*/React.createElement(Menu, {
130
+ }, rest), /*#__PURE__*/React.createElement(StyledOList, null, menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, /*#__PURE__*/React.createElement(Menu, {
33
131
  target: /*#__PURE__*/React.createElement(Button, {
34
132
  variant: "text gray"
35
133
  }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
36
- }, /*#__PURE__*/React.createElement(List, {
37
- className: "tw-py-2"
38
- }, menuCollection.map(function (child, index) {
134
+ }, /*#__PURE__*/React.createElement(StyledMenuList, null, menuCollection.map(function (child, index) {
39
135
  return /*#__PURE__*/React.createElement(ListItem, {
40
136
  key: index
41
137
  }, child);
42
138
  })))) : null, listCollection.map(function (child, index) {
43
139
  return /*#__PURE__*/React.createElement(React.Fragment, {
44
140
  key: index
45
- }, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, child));
141
+ }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, child));
46
142
  })));
47
143
  });
48
144
  Breadcrumbs.displayName = "Breadcrumbs";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","useForkRef","Button","TreeDotsIcon","List","ListItem","Menu","StyledListMenuItem","StyledNavElement","StyledOList","StyledBreadcrumbListItem","Breadcrumbs","forwardRef","ref","children","className","separator","rest","internalRef","handleRef","menuBreadcrumbs","collection","Children","toArray","slice","length","menuCollection","listCollection","map","child","index","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAA8BC,MAA9B,EAAsCC,OAAtC,QAAqD,OAArD;AACA,SAASC,UAAT,QAA2B,OAA3B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,UAA7B;AACA,SAASC,IAAT,EAAeC,QAAf,QAA+B,SAA/B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SACEC,kBADF,EAEEC,gBAFF,EAGEC,WAHF,EAIEC,wBAJF,QAKO,UALP;AAYA,OAAO,IAAMC,WAAW,gBAAGb,KAAK,CAACc,UAAN,CAIzB,gBAAoDC,GAApD,EAA4D;AAAA,MAAzDC,QAAyD,QAAzDA,QAAyD;AAAA,MAA/CC,SAA+C,QAA/CA,SAA+C;AAAA,4BAApCC,SAAoC;AAAA,MAApCA,SAAoC,+BAAxB,GAAwB;AAAA,MAAhBC,IAAgB;;AAC5D,MAAMC,WAAW,GAAGnB,MAAM,CAAqB,IAArB,CAA1B;AACA,MAAMoB,SAAS,GAAGlB,UAAU,CAACY,GAAD,EAAMK,WAAN,CAA5B;AACA,MAAME,eAAe,GAAG,CAAxB;;AAEA,iBAAyCpB,OAAO,CAAC,YAAM;AACrD,QAAMqB,UAAU,GAAGvB,KAAK,CAACwB,QAAN,CAAeC,OAAf,CAAuBT,QAAvB,CAAnB;AACA,WAAO,CACLO,UAAU,CAACG,KAAX,CAAiB,CAAjB,EAAoBJ,eAApB,CADK,EAELC,UAAU,CAACG,KAAX,CAAiBJ,eAAjB,EAAkCC,UAAU,CAACI,MAA7C,CAFK,CAAP;AAID,GAN+C,EAM7C,CAACX,QAAD,EAAWM,eAAX,CAN6C,CAAhD;AAAA,MAAOM,cAAP;AAAA,MAAuBC,cAAvB;;AAQA,sBACE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAEZ,SAA7B;AAAwC,IAAA,GAAG,EAAEI;AAA7C,KAA4DF,IAA5D,gBACE,oBAAC,WAAD,QACGG,eAAe,GAAG,CAAlB,gBACC,oBAAC,kBAAD,qBACE,oBAAC,IAAD;AACE,IAAA,MAAM,eACJ,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAC;AAAhB,oBACE,oBAAC,YAAD,OADF;AAFJ,kBAOE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGM,cAAc,CAACE,GAAf,CAAmB,UAACC,KAAD,EAAQC,KAAR;AAAA,wBAClB,oBAAC,QAAD;AAAU,MAAA,GAAG,EAAEA;AAAf,OAAuBD,KAAvB,CADkB;AAAA,GAAnB,CADH,CAPF,CADF,CADD,GAgBG,IAjBN,EAkBGF,cAAc,CAACC,GAAf,CAAmB,UAACC,KAAD,EAAQC,KAAR,EAAkB;AACpC,wBACE,oBAAC,KAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAaV,eAAe,GAAG,CAA/B,gBACC,oBAAC,wBAAD,QAA2BJ,SAA3B,CADD,GAEG,IAHN,eAIE,oBAAC,wBAAD,QAA2Ba,KAA3B,CAJF,CADF;AAQD,GATA,CAlBH,CADF,CADF;AAiCD,CAlD0B,CAApB;AAoDPlB,WAAW,CAACoB,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { ReactElement, useRef, useMemo } from \"react\";\nimport { useForkRef } from \"../..\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport { List, ListItem } from \"../List\";\nimport { Menu } from \"../Menu\";\nimport {\n StyledListMenuItem,\n StyledNavElement,\n StyledOList,\n StyledBreadcrumbListItem,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n /** Separator element */\n separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n HTMLElement,\n BreadcrumbsProps &\n Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", ...rest }, ref) => {\n const internalRef = useRef<HTMLElement | null>(null);\n const handleRef = useForkRef(ref, internalRef);\n const menuBreadcrumbs = 0;\n\n const [menuCollection, listCollection] = useMemo(() => {\n const collection = React.Children.toArray(children);\n return [\n collection.slice(0, menuBreadcrumbs),\n collection.slice(menuBreadcrumbs, collection.length),\n ];\n }, [children, menuBreadcrumbs]);\n\n return (\n <StyledNavElement className={className} ref={handleRef} {...rest}>\n <StyledOList>\n {menuBreadcrumbs > 0 ? (\n <StyledListMenuItem>\n <Menu\n target={\n <Button variant=\"text gray\">\n <TreeDotsIcon />\n </Button>\n }\n >\n <List className=\"tw-py-2\">\n {menuCollection.map((child, index) => (\n <ListItem key={index}>{child}</ListItem>\n ))}\n </List>\n </Menu>\n </StyledListMenuItem>\n ) : null}\n {listCollection.map((child, index) => {\n return (\n <React.Fragment key={index}>\n {index > 0 || menuBreadcrumbs > 0 ? (\n <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n ) : null}\n <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n </React.Fragment>\n );\n })}\n </StyledOList>\n </StyledNavElement>\n );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}
1
+ {"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","useEffect","useState","useForkRef","useResizeObserver","Menu","ListItem","Button","TreeDotsIcon","debounce","StyledNavElement","StyledOList","StyledBreadcrumbListItem","StyledMenuList","Breadcrumbs","forwardRef","ref","children","className","separator","timeout","rest","internalRef","prevWidth","widthCollectionRef","handleRef","dimensions","childrenCollection","Children","toArray","width","setWidth","menuBreadcrumbs","setMenuBreadcrumbs","slice","length","menuCollection","listCollection","actualWidth","current","scrollWidth","breadcrumbItems","firstElementChild","enabled","diffWidth","childWidthCollection","childIndex","childSumWidth","childWidth","offsetWidth","separatorWidth","result","push","pop","oldVal","nextWidth","lastElementChild","offsetLeft","total","collection","sumWidth","lastWidth","totalToDecrease","end","debounceWidth","prevState","cancel","map","child","index","displayName"],"mappings":"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","sourcesContent":["import React, {\n ReactElement,\n useRef,\n useMemo,\n useEffect,\n useState,\n} from \"react\";\nimport { useForkRef, useResizeObserver } from \"../../utils\";\nimport { Menu } from \"../Menu\";\nimport { ListItem } from \"../List\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport debounce from \"lodash.debounce\";\nimport {\n StyledNavElement,\n StyledOList,\n StyledBreadcrumbListItem,\n StyledMenuList,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n /** Separator element */\n separator?: ReactElement | string;\n /** Resize update timeout */\n timeout?: number;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n HTMLElement,\n BreadcrumbsProps &\n Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", timeout = 300, ...rest }, ref) => {\n const internalRef = useRef<HTMLElement | null>(null);\n const prevWidth = useRef<number | undefined>();\n const widthCollectionRef = useRef<number[]>([]);\n const handleRef = useForkRef(ref, internalRef);\n const dimensions = useResizeObserver(internalRef);\n\n const childrenCollection = useMemo(\n () => React.Children.toArray(children),\n [children]\n );\n\n const [width, setWidth] = useState<number | undefined>();\n const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);\n\n const [menuCollection, listCollection] = useMemo(() => {\n return [\n childrenCollection.slice(0, menuBreadcrumbs),\n childrenCollection.slice(menuBreadcrumbs, childrenCollection.length),\n ];\n }, [childrenCollection, menuBreadcrumbs]);\n\n useEffect(() => {\n const actualWidth = internalRef.current?.scrollWidth || 0;\n const breadcrumbItems = internalRef.current?.firstElementChild;\n\n const enabled = (prevWidth.current ?? 0) > (width ?? 0);\n\n if (enabled && width && actualWidth > width) {\n const diffWidth = actualWidth - width;\n const childWidthCollection: number[] = [];\n\n let childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;\n let childSumWidth = 0;\n\n while (diffWidth > childSumWidth) {\n const childWidth =\n (breadcrumbItems?.children[childIndex] as HTMLLIElement)\n ?.offsetWidth ?? 0;\n const separatorWidth =\n (breadcrumbItems?.children[childIndex + 1] as HTMLLIElement)\n ?.offsetWidth ?? 0;\n const result = separatorWidth + childWidth;\n childWidthCollection.push(result);\n childSumWidth += result;\n childIndex += 2;\n }\n\n if (childWidthCollection.length === listCollection.length) {\n childWidthCollection.pop();\n }\n\n widthCollectionRef.current = [\n ...widthCollectionRef.current,\n ...childWidthCollection,\n ];\n\n setMenuBreadcrumbs((oldVal) => oldVal + childWidthCollection.length);\n }\n }, [listCollection.length, width]);\n\n useEffect(() => {\n const breadcrumbItems = internalRef.current?.firstElementChild;\n const nextWidth =\n (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetWidth +\n (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetLeft;\n\n const enabled = (prevWidth.current ?? 0) < (width ?? 0);\n const diffWidth = (width ?? 0) - nextWidth;\n\n if (enabled && diffWidth > 0 && widthCollectionRef.current.length > 0) {\n const total = widthCollectionRef.current.length;\n const collection = [...widthCollectionRef.current];\n\n let sumWidth = 0;\n\n while (diffWidth > sumWidth && collection.length > 0) {\n const lastWidth = collection[collection.length - 1] ?? 0;\n if (diffWidth < lastWidth + sumWidth) {\n sumWidth = diffWidth;\n } else {\n sumWidth += collection.pop() ?? 0;\n }\n }\n\n const totalToDecrease = total - collection.length;\n\n setMenuBreadcrumbs((oldVal) => oldVal - totalToDecrease);\n\n const end = total - totalToDecrease;\n\n widthCollectionRef.current =\n end > 0 ? widthCollectionRef.current.slice(0, end) : [];\n }\n }, [width]);\n\n useEffect(() => {\n const debounceWidth = debounce((width: number) => {\n setWidth((prevState) => {\n prevWidth.current = prevState ?? width + 1;\n return width;\n });\n }, timeout);\n\n debounceWidth(dimensions?.width ?? 0);\n\n return (): void => {\n debounceWidth.cancel();\n };\n }, [timeout, dimensions?.width]);\n\n return (\n <StyledNavElement className={className} ref={handleRef} {...rest}>\n <StyledOList>\n {menuCollection.length > 0 ? (\n <StyledBreadcrumbListItem>\n <Menu\n target={\n <Button variant=\"text gray\">\n <TreeDotsIcon />\n </Button>\n }\n >\n <StyledMenuList>\n {menuCollection.map((child, index) => (\n <ListItem key={index}>{child}</ListItem>\n ))}\n </StyledMenuList>\n </Menu>\n </StyledBreadcrumbListItem>\n ) : null}\n {listCollection.map((child, index) => {\n return (\n <React.Fragment key={index}>\n {index > 0 || menuCollection.length > 0 ? (\n <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n ) : null}\n <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n </React.Fragment>\n );\n })}\n </StyledOList>\n </StyledNavElement>\n );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}
@@ -1,5 +1,6 @@
1
+ /// <reference types="react" />
1
2
  export declare const StyledNavElement: import("styled-components").StyledComponent<"nav", any, {}, never>;
2
3
  export declare const StyledOList: import("styled-components").StyledComponent<"ul", any, {}, never>;
3
- export declare const StyledListMenuItem: import("styled-components").StyledComponent<"li", any, {}, never>;
4
+ export declare const StyledMenuList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../List").IList & import("react").HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>, any, {}, never>;
4
5
  export declare const StyledBreadcrumbListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
5
6
  //# sourceMappingURL=Styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,oEAK5B,CAAC;AAIF,eAAO,MAAM,WAAW,mEAOvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,mEAE9B,CAAC;AAIF,eAAO,MAAM,wBAAwB,mEAEpC,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,gBAAgB,oEAK5B,CAAC;AAIF,eAAO,MAAM,WAAW,mEAOvB,CAAC;AAIF,eAAO,MAAM,cAAc,sOAE1B,CAAC;AAIF,eAAO,MAAM,wBAAwB,mEAGpC,CAAC"}
@@ -1,6 +1,7 @@
1
1
  import styled from "styled-components";
2
2
  import { BoxSizingStyle } from "../BoxSizingStyle";
3
3
  import { FontStyle } from "../FontStyle";
4
+ import { List } from "../List";
4
5
  export var StyledNavElement = styled.nav.withConfig({
5
6
  displayName: "Styles__StyledNavElement",
6
7
  componentId: "sc-rxaesd-0"
@@ -27,18 +28,21 @@ export var StyledOList = styled.ul.withConfig({
27
28
  "alignItems": "center"
28
29
  });
29
30
  StyledOList.displayName = "StyledOList";
30
- export var StyledListMenuItem = styled.li.withConfig({
31
- displayName: "Styles__StyledListMenuItem",
31
+ export var StyledMenuList = styled(List).withConfig({
32
+ displayName: "Styles__StyledMenuList",
32
33
  componentId: "sc-rxaesd-2"
33
34
  })(["", ""], {
34
- "flexShrink": "0"
35
+ "paddingTop": "0.5rem",
36
+ "paddingBottom": "0.5rem"
35
37
  });
36
- StyledListMenuItem.displayName = "StyledListMenuItem";
38
+ StyledMenuList.displayName = "StyledMenuList";
37
39
  export var StyledBreadcrumbListItem = styled.li.withConfig({
38
40
  displayName: "Styles__StyledBreadcrumbListItem",
39
41
  componentId: "sc-rxaesd-3"
40
- })(["", ""], {
42
+ })(["", " ", ""], {
41
43
  "display": "flex"
44
+ }, {
45
+ "flexShrink": "0"
42
46
  });
43
47
  StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
44
48
  //# sourceMappingURL=Styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","StyledNavElement","nav","displayName","StyledOList","ul","StyledListMenuItem","li","StyledBreadcrumbListItem"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBF,SAHyB,EAIzBD,cAJyB,CAAtB;AAOPE,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMC,WAAW,GAAGN,MAAM,CAACO,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;AASPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMG,kBAAkB,GAAGR,MAAM,CAACS,EAAV;AAAA;AAAA;AAAA,aACzB;AAAA;AAAA,CADyB,CAAxB;AAIPD,kBAAkB,CAACH,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,IAAMK,wBAAwB,GAAGV,MAAM,CAACS,EAAV;AAAA;AAAA;AAAA,aAC/B;AAAA;AAAA,CAD+B,CAA9B;AAIPC,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledNavElement = styled.nav`\n ${tw`tw-w-full`}\n ${tw`tw-overflow-visible`}\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledOList = styled.ul`\n ${tw`tw-flex`}\n ${tw`tw-items-start`}\n ${tw`tw-list-none`}\n ${tw`tw-p-0`}\n ${tw`tw-m-0`}\n ${tw`tw-items-center`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledListMenuItem = styled.li`\n ${tw`tw-flex-shrink-0`}\n`;\n\nStyledListMenuItem.displayName = \"StyledListMenuItem\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n ${tw`tw-flex`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","List","StyledNavElement","nav","displayName","StyledOList","ul","StyledMenuList","StyledBreadcrumbListItem","li"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,IAAT,QAAqB,SAArB;AAEA,OAAO,IAAMC,gBAAgB,GAAGJ,MAAM,CAACK,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBH,SAHyB,EAIzBD,cAJyB,CAAtB;AAOPG,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMC,WAAW,GAAGP,MAAM,CAACQ,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;AASPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMG,cAAc,GAAGT,MAAM,CAACG,IAAD,CAAT;AAAA;AAAA;AAAA,aACrB;AAAA;AAAA;AAAA,CADqB,CAApB;AAIPM,cAAc,CAACH,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMI,wBAAwB,GAAGV,MAAM,CAACW,EAAV;AAAA;AAAA;AAAA,kBAC/B;AAAA;AAAA,CAD+B,EAE/B;AAAA;AAAA,CAF+B,CAA9B;AAKPD,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { List } from \"../List\";\n\nexport const StyledNavElement = styled.nav`\n ${tw`tw-w-full`}\n ${tw`tw-overflow-visible`}\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledOList = styled.ul`\n ${tw`tw-flex`}\n ${tw`tw-items-start`}\n ${tw`tw-list-none`}\n ${tw`tw-p-0`}\n ${tw`tw-m-0`}\n ${tw`tw-items-center`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledMenuList = styled(List)`\n ${tw`tw-py-2`}\n`;\n\nStyledMenuList.displayName = \"StyledMenuList\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n ${tw`tw-flex`}\n ${tw`tw-flex-shrink-0`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"OptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQlC,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2BhD,CAAC"}
1
+ {"version":3,"file":"OptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AASlC,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2BhD,CAAC"}
@@ -1,13 +1,13 @@
1
1
  import React from "react";
2
2
  import { Avatar } from "../../Avatar/Avatar";
3
- import { StyledOptionIndicator, StyledOptionText, StyledAdditionalInfo } from "./Styles";
3
+ import { StyledOptionIndicator, StyledOptionText, StyledAdditionalInfo, StyledOptionContentWrapper } from "./Styles";
4
4
  export var OptionContent = function OptionContent(_ref) {
5
5
  var imageUrl = _ref.imageUrl,
6
6
  color = _ref.color,
7
7
  textColor = _ref.textColor,
8
8
  name = _ref.name,
9
9
  additionalInfo = _ref.additionalInfo;
10
- return /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl || color ? /*#__PURE__*/React.createElement(StyledOptionIndicator, {
10
+ return /*#__PURE__*/React.createElement(StyledOptionContentWrapper, null, imageUrl || color ? /*#__PURE__*/React.createElement(StyledOptionIndicator, {
11
11
  className: "c-option--label",
12
12
  backgroundColor: color
13
13
  }, imageUrl ? /*#__PURE__*/React.createElement(Avatar, {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["React","Avatar","StyledOptionIndicator","StyledOptionText","StyledAdditionalInfo","OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAA0B,OAA1B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AACA,SACEC,qBADF,EAEEC,gBAFF,EAGEC,oBAHF,QAIO,UAJP;AAcA,OAAO,IAAMC,aAAqC,GAAG,SAAxCA,aAAwC,OAM/C;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACE,0CACGJ,QAAQ,IAAIC,KAAZ,gBACC,oBAAC,qBAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,eAAe,EAAEA;AAFnB,KAIGD,QAAQ,gBACP,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC,kBAAlB;AAAqC,IAAA,GAAG,EAAEA;AAA1C,IADO,GAEL,IANN,CADD,GASG,IAVN,eAWE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAC,gBAA5B;AAA6C,IAAA,SAAS,EAAEE;AAAxD,KACGC,IADH,CAXF,EAcGC,cAAc,gBACb,oBAAC,oBAAD,QAAuBA,cAAvB,CADa,GAEX,IAhBN,CADF;AAoBD,CA3BM;AA6BPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n StyledOptionIndicator,\n StyledOptionText,\n StyledAdditionalInfo,\n} from \"./Styles\";\n\ninterface OptionContentProps {\n imageUrl?: string;\n color?: string;\n textColor?: string;\n name: string;\n additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n imageUrl,\n color,\n textColor,\n name,\n additionalInfo,\n}) => {\n return (\n <>\n {imageUrl || color ? (\n <StyledOptionIndicator\n className=\"c-option--label\"\n backgroundColor={color}\n >\n {imageUrl ? (\n <Avatar className=\"c-option--avatar\" url={imageUrl} />\n ) : null}\n </StyledOptionIndicator>\n ) : null}\n <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n {name}\n </StyledOptionText>\n {additionalInfo ? (\n <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n ) : null}\n </>\n );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"file":"OptionContent.js"}
1
+ {"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["React","Avatar","StyledOptionIndicator","StyledOptionText","StyledAdditionalInfo","StyledOptionContentWrapper","OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAA0B,OAA1B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AACA,SACEC,qBADF,EAEEC,gBAFF,EAGEC,oBAHF,EAIEC,0BAJF,QAKO,UALP;AAeA,OAAO,IAAMC,aAAqC,GAAG,SAAxCA,aAAwC,OAM/C;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACE,oBAAC,0BAAD,QACGJ,QAAQ,IAAIC,KAAZ,gBACC,oBAAC,qBAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,eAAe,EAAEA;AAFnB,KAIGD,QAAQ,gBACP,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAC,kBAAlB;AAAqC,IAAA,GAAG,EAAEA;AAA1C,IADO,GAEL,IANN,CADD,GASG,IAVN,eAWE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAC,gBAA5B;AAA6C,IAAA,SAAS,EAAEE;AAAxD,KACGC,IADH,CAXF,EAcGC,cAAc,gBACb,oBAAC,oBAAD,QAAuBA,cAAvB,CADa,GAEX,IAhBN,CADF;AAoBD,CA3BM;AA6BPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n StyledOptionIndicator,\n StyledOptionText,\n StyledAdditionalInfo,\n StyledOptionContentWrapper,\n} from \"./Styles\";\n\ninterface OptionContentProps {\n imageUrl?: string;\n color?: string;\n textColor?: string;\n name: string;\n additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n imageUrl,\n color,\n textColor,\n name,\n additionalInfo,\n}) => {\n return (\n <StyledOptionContentWrapper>\n {imageUrl || color ? (\n <StyledOptionIndicator\n className=\"c-option--label\"\n backgroundColor={color}\n >\n {imageUrl ? (\n <Avatar className=\"c-option--avatar\" url={imageUrl} />\n ) : null}\n </StyledOptionIndicator>\n ) : null}\n <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n {name}\n </StyledOptionText>\n {additionalInfo ? (\n <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n ) : null}\n </StyledOptionContentWrapper>\n );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"file":"OptionContent.js"}
@@ -1,3 +1,4 @@
1
+ export declare const StyledOptionContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
1
2
  export declare const StyledOptionIndicator: import("styled-components").StyledComponent<"div", any, {
2
3
  backgroundColor?: string | undefined;
3
4
  }, never>;
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB;;SAYjC,CAAC;AAIF,eAAO,MAAM,gBAAgB;;SAS5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAIhC,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAYjC,CAAC;AAIF,eAAO,MAAM,gBAAgB;;SAU5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAIhC,CAAC"}
@@ -1,15 +1,20 @@
1
1
  import styled, { css } from "styled-components";
2
+ export var StyledOptionContentWrapper = styled.div.withConfig({
3
+ displayName: "Styles__StyledOptionContentWrapper",
4
+ componentId: "sc-6fiqyy-0"
5
+ })(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:100%;"]);
6
+ StyledOptionContentWrapper.displayName = "StyledOptionContentWrapper";
2
7
  export var StyledOptionIndicator = styled.div.withConfig({
3
8
  displayName: "Styles__StyledOptionIndicator",
4
- componentId: "sc-6fiqyy-0"
9
+ componentId: "sc-6fiqyy-1"
5
10
  })(["height:24px;width:24px;border-radius:100%;margin-right:8px;flex-shrink:0;", ""], function (props) {
6
11
  return props.backgroundColor && !props.children && css(["background-color:", ";"], props.backgroundColor);
7
12
  });
8
13
  StyledOptionIndicator.displayName = "StyledOptionIndicator";
9
14
  export var StyledOptionText = styled.span.withConfig({
10
15
  displayName: "Styles__StyledOptionText",
11
- componentId: "sc-6fiqyy-1"
12
- })(["", " flex-grow:1;line-height:18px;", ""], {
16
+ componentId: "sc-6fiqyy-2"
17
+ })(["", " flex-grow:1;line-height:28px;padding-right:10px;", ""], {
13
18
  "overflow": "hidden",
14
19
  "textOverflow": "ellipsis",
15
20
  "whiteSpace": "nowrap"
@@ -19,7 +24,7 @@ export var StyledOptionText = styled.span.withConfig({
19
24
  StyledOptionText.displayName = "StyledOptionText";
20
25
  export var StyledAdditionalInfo = styled.span.withConfig({
21
26
  displayName: "Styles__StyledAdditionalInfo",
22
- componentId: "sc-6fiqyy-2"
27
+ componentId: "sc-6fiqyy-3"
23
28
  })(["margin:0 0 0 5px;line-height:18px;flex-shrink:0;"]);
24
29
  StyledAdditionalInfo.displayName = "StyledAdditionalInfo";
25
30
  //# sourceMappingURL=Styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["styled","css","StyledOptionIndicator","div","props","backgroundColor","children","displayName","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,OAAO,IAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,IAEAL,GAFA,6BAGsBG,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;AAcPH,qBAAqB,CAACK,WAAtB,GAAoC,uBAApC;AAEA,OAAO,IAAMC,gBAAgB,GAAGR,MAAM,CAACS,IAAV;AAAA;AAAA;AAAA,+CACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAIzB,UAACL,KAAD;AAAA,SACAA,KAAK,CAACM,SAAN,IACAT,GADA,kBAEWG,KAAK,CAACM,SAFjB,CADA;AAAA,CAJyB,CAAtB;AAWPF,gBAAgB,CAACD,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMI,oBAAoB,GAAGX,MAAM,CAACS,IAAV;AAAA;AAAA;AAAA,wDAA1B;AAMPE,oBAAoB,CAACJ,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n height: 24px;\n width: 24px;\n border-radius: 100%;\n margin-right: 8px;\n flex-shrink: 0;\n ${(props) =>\n props.backgroundColor &&\n !props.children &&\n css`\n background-color: ${props.backgroundColor};\n `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n ${tw`tw-truncate`}\n flex-grow: 1;\n line-height: 18px;\n ${(props) =>\n props.textColor &&\n css`\n color: ${props.textColor};\n `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n margin: 0 0 0 5px;\n line-height: 18px;\n flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["styled","css","StyledOptionContentWrapper","div","displayName","StyledOptionIndicator","props","backgroundColor","children","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAGA,OAAO,IAAMC,0BAA0B,GAAGF,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,8GAAhC;AASPD,0BAA0B,CAACE,WAA3B,GAAyC,4BAAzC;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,IAEAP,GAFA,6BAGsBK,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,OAAO,IAAMK,gBAAgB,GAAGT,MAAM,CAACU,IAAV;AAAA;AAAA;AAAA,kEACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAKzB,UAACJ,KAAD;AAAA,SACAA,KAAK,CAACK,SAAN,IACAV,GADA,kBAEWK,KAAK,CAACK,SAFjB,CADA;AAAA,CALyB,CAAtB;AAYPF,gBAAgB,CAACL,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMQ,oBAAoB,GAAGZ,MAAM,CAACU,IAAV;AAAA;AAAA;AAAA,wDAA1B;AAMPE,oBAAoB,CAACR,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionContentWrapper = styled.div`\n display: flex;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n align-items: center;\n height: 100%;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n height: 24px;\n width: 24px;\n border-radius: 100%;\n margin-right: 8px;\n flex-shrink: 0;\n ${(props) =>\n props.backgroundColor &&\n !props.children &&\n css`\n background-color: ${props.backgroundColor};\n `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n ${tw`tw-truncate`}\n flex-grow: 1;\n line-height: 28px;\n padding-right: 10px;\n ${(props) =>\n props.textColor &&\n css`\n color: ${props.textColor};\n `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n margin: 0 0 0 5px;\n line-height: 18px;\n flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
@@ -1,3 +1,4 @@
1
1
  export * from "./layers";
2
2
  export { default as useForkRef } from "./useForkRef";
3
+ export { default as useResizeObserver } from "./useResizeObserver";
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export * from "./layers";
2
2
  export { default as useForkRef } from "./useForkRef";
3
+ export { default as useResizeObserver } from "./useResizeObserver";
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/utils/index.ts"],"names":["default","useForkRef"],"mappings":"AAAA,cAAc,UAAd;AACA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export * from \"./layers\";\nexport { default as useForkRef } from \"./useForkRef\";\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/utils/index.ts"],"names":["default","useForkRef","useResizeObserver"],"mappings":"AAAA,cAAc,UAAd;AACA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC;AACA,SAASD,OAAO,IAAIE,iBAApB,QAA6C,qBAA7C","sourcesContent":["export * from \"./layers\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\n"],"file":"index.js"}
@@ -0,0 +1,5 @@
1
+ declare const useResizeObserver: (ref: {
2
+ current?: HTMLElement | null;
3
+ }) => DOMRectReadOnly | undefined;
4
+ export default useResizeObserver;
5
+ //# sourceMappingURL=useResizeObserver.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/utils/useResizeObserver.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,iBAAiB,QAAS;IAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,gCAqB/D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { useState, useEffect } from "react";
2
+ import ResizeObserver from "resize-observer-polyfill";
3
+
4
+ var useResizeObserver = function useResizeObserver(ref) {
5
+ var _useState = useState(),
6
+ dimensions = _useState[0],
7
+ setDimensions = _useState[1];
8
+
9
+ useEffect(function () {
10
+ var observeTarget = ref == null ? void 0 : ref.current;
11
+ var resizeObserver = new ResizeObserver(function (entries) {
12
+ entries.forEach(function (entry) {
13
+ setDimensions(entry.contentRect);
14
+ });
15
+ });
16
+ observeTarget && resizeObserver.observe(observeTarget);
17
+ return function () {
18
+ observeTarget && resizeObserver.unobserve(observeTarget);
19
+ };
20
+ }, [ref]);
21
+ return dimensions;
22
+ };
23
+
24
+ export default useResizeObserver;
25
+ //# sourceMappingURL=useResizeObserver.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/useResizeObserver.ts"],"names":["useState","useEffect","ResizeObserver","useResizeObserver","ref","dimensions","setDimensions","observeTarget","current","resizeObserver","entries","forEach","entry","contentRect","observe","unobserve"],"mappings":"AAAA,SAASA,QAAT,EAAmBC,SAAnB,QAAoC,OAApC;AACA,OAAOC,cAAP,MAA2B,0BAA3B;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,GAAD,EAA2C;AACnE,kBAAoCJ,QAAQ,EAA5C;AAAA,MAAOK,UAAP;AAAA,MAAmBC,aAAnB;;AAEAL,EAAAA,SAAS,CAAC,YAAM;AACd,QAAMM,aAAa,GAAGH,GAAH,oBAAGA,GAAG,CAAEI,OAA3B;AACA,QAAMC,cAAc,GAAG,IAAIP,cAAJ,CACrB,UAACQ,OAAD,EAAoC;AAClCA,MAAAA,OAAO,CAACC,OAAR,CAAgB,UAACC,KAAD,EAAW;AACzBN,QAAAA,aAAa,CAACM,KAAK,CAACC,WAAP,CAAb;AACD,OAFD;AAGD,KALoB,CAAvB;AAQAN,IAAAA,aAAa,IAAIE,cAAc,CAACK,OAAf,CAAuBP,aAAvB,CAAjB;AAEA,WAAO,YAAM;AACXA,MAAAA,aAAa,IAAIE,cAAc,CAACM,SAAf,CAAyBR,aAAzB,CAAjB;AACD,KAFD;AAGD,GAfQ,EAeN,CAACH,GAAD,CAfM,CAAT;AAiBA,SAAOC,UAAP;AACD,CArBD;;AAuBA,eAAeF,iBAAf","sourcesContent":["import { useState, useEffect } from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nconst useResizeObserver = (ref: { current?: HTMLElement | null }) => {\n const [dimensions, setDimensions] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n const observeTarget = ref?.current;\n const resizeObserver = new ResizeObserver(\n (entries: ResizeObserverEntry[]) => {\n entries.forEach((entry) => {\n setDimensions(entry.contentRect);\n });\n }\n );\n\n observeTarget && resizeObserver.observe(observeTarget);\n\n return () => {\n observeTarget && resizeObserver.unobserve(observeTarget);\n };\n }, [ref]);\n\n return dimensions;\n};\n\nexport default useResizeObserver;\n"],"file":"useResizeObserver.js"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=useResizeObserver.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useResizeObserver.test.d.ts","sourceRoot":"","sources":["../../../src/utils/useResizeObserver.test.ts"],"names":[],"mappings":""}
@@ -0,0 +1,31 @@
1
+ import { renderHook } from "@testing-library/react-hooks";
2
+ import useResizeObserver from "./useResizeObserver";
3
+ describe("useResizeObserver", function () {
4
+ it("should test", function () {
5
+ var ref = {
6
+ current: undefined
7
+ };
8
+
9
+ var _renderHook = renderHook(function () {
10
+ return useResizeObserver(ref);
11
+ }),
12
+ result = _renderHook.result;
13
+
14
+ expect(result.current).toBeUndefined();
15
+ });
16
+ it("should test real element", function () {
17
+ var div = document.createElement("div");
18
+ document.body.appendChild(div);
19
+ var ref = {
20
+ current: div
21
+ };
22
+
23
+ var _renderHook2 = renderHook(function () {
24
+ return useResizeObserver(ref);
25
+ }),
26
+ result = _renderHook2.result;
27
+
28
+ expect(result.current).toBeUndefined();
29
+ });
30
+ });
31
+ //# sourceMappingURL=useResizeObserver.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/utils/useResizeObserver.test.ts"],"names":["renderHook","useResizeObserver","describe","it","ref","current","undefined","result","expect","toBeUndefined","div","document","createElement","body","appendChild"],"mappings":"AAAA,SAASA,UAAT,QAA2B,8BAA3B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AAEAC,QAAQ,CAAC,mBAAD,EAAsB,YAAM;AAClCC,EAAAA,EAAE,CAAC,aAAD,EAAgB,YAAM;AACtB,QAAMC,GAAG,GAAG;AAAEC,MAAAA,OAAO,EAAEC;AAAX,KAAZ;;AACA,sBAAmBN,UAAU,CAAC;AAAA,aAAMC,iBAAiB,CAACG,GAAD,CAAvB;AAAA,KAAD,CAA7B;AAAA,QAAQG,MAAR,eAAQA,MAAR;;AACAC,IAAAA,MAAM,CAACD,MAAM,CAACF,OAAR,CAAN,CAAuBI,aAAvB;AACD,GAJC,CAAF;AAMAN,EAAAA,EAAE,CAAC,0BAAD,EAA6B,YAAM;AACnC,QAAMO,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAZ;AACAD,IAAAA,QAAQ,CAACE,IAAT,CAAcC,WAAd,CAA0BJ,GAA1B;AACA,QAAMN,GAAG,GAAG;AAAEC,MAAAA,OAAO,EAAEK;AAAX,KAAZ;;AACA,uBAAmBV,UAAU,CAAC;AAAA,aAAMC,iBAAiB,CAACG,GAAD,CAAvB;AAAA,KAAD,CAA7B;AAAA,QAAQG,MAAR,gBAAQA,MAAR;;AACAC,IAAAA,MAAM,CAACD,MAAM,CAACF,OAAR,CAAN,CAAuBI,aAAvB;AACD,GANC,CAAF;AAOD,CAdO,CAAR","sourcesContent":["import { renderHook } from \"@testing-library/react-hooks\";\nimport useResizeObserver from \"./useResizeObserver\";\n\ndescribe(\"useResizeObserver\", () => {\n it(\"should test\", () => {\n const ref = { current: undefined };\n const { result } = renderHook(() => useResizeObserver(ref));\n expect(result.current).toBeUndefined();\n });\n\n it(\"should test real element\", () => {\n const div = document.createElement(\"div\");\n document.body.appendChild(div);\n const ref = { current: div };\n const { result } = renderHook(() => useResizeObserver(ref));\n expect(result.current).toBeUndefined();\n });\n});\n"],"file":"useResizeObserver.test.js"}