@carbon/react 1.66.0 → 1.67.0-rc.0

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 (100) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +971 -911
  2. package/es/components/ComboBox/ComboBox.js +11 -2
  3. package/es/components/ComboButton/index.js +1 -1
  4. package/es/components/DataTable/TableExpandHeader.d.ts +2 -2
  5. package/es/components/DataTable/TableExpandHeader.js +1 -1
  6. package/es/components/DatePicker/DatePicker.js +1 -0
  7. package/es/components/Dropdown/Dropdown.js +1 -1
  8. package/es/components/FeatureFlags/index.js +27 -7
  9. package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +15 -0
  10. package/es/components/FluidNumberInput/FluidNumberInput.d.ts +95 -0
  11. package/es/components/FluidNumberInput/index.d.ts +11 -0
  12. package/es/components/FluidSearch/FluidSearch.Skeleton.d.ts +15 -0
  13. package/es/components/FluidSearch/FluidSearch.Skeleton.js +2 -2
  14. package/es/components/FluidSearch/FluidSearch.d.ts +73 -0
  15. package/es/components/FluidSearch/FluidSearch.js +1 -2
  16. package/es/components/FluidSearch/index.d.ts +11 -0
  17. package/es/components/FluidSelect/FluidSelect.Skeleton.d.ts +15 -0
  18. package/es/components/FluidSelect/FluidSelect.Skeleton.js +1 -2
  19. package/es/components/FluidSelect/FluidSelect.d.ts +57 -0
  20. package/es/components/FluidSelect/FluidSelect.js +1 -2
  21. package/es/components/FluidSelect/index.d.ts +13 -0
  22. package/es/components/FluidSelect/index.js +1 -0
  23. package/es/components/FluidTextInput/FluidPasswordInput.d.ts +83 -0
  24. package/es/components/FluidTextInput/FluidPasswordInput.js +87 -0
  25. package/es/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +15 -0
  26. package/es/components/FluidTextInput/FluidTextInput.Skeleton.js +2 -2
  27. package/es/components/FluidTextInput/FluidTextInput.d.ts +70 -0
  28. package/es/components/FluidTextInput/FluidTextInput.js +6 -4
  29. package/es/components/FluidTextInput/index.d.ts +15 -0
  30. package/es/components/FluidTextInput/index.js +2 -0
  31. package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.d.ts +35 -0
  32. package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js +4 -2
  33. package/es/components/FluidTimePicker/FluidTimePicker.d.ts +45 -0
  34. package/es/components/FluidTimePicker/FluidTimePicker.js +5 -5
  35. package/es/components/FluidTimePicker/index.d.ts +13 -0
  36. package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +41 -0
  37. package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +2 -2
  38. package/es/components/FluidTimePickerSelect/index.d.ts +11 -0
  39. package/es/components/MultiSelect/FilterableMultiSelect.js +4 -4
  40. package/es/components/MultiSelect/MultiSelect.js +1 -1
  41. package/es/components/Notification/Notification.js +4 -2
  42. package/es/components/OverflowMenuV2/index.js +1 -3
  43. package/es/components/Pagination/Pagination.js +1 -1
  44. package/es/components/Popover/index.js +1 -1
  45. package/es/components/Tabs/Tabs.js +1 -1
  46. package/es/components/UIShell/HeaderPanel.js +1 -1
  47. package/es/index.js +10 -9
  48. package/es/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +757 -4
  49. package/es/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +76 -0
  50. package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +106 -6
  51. package/lib/components/ComboBox/ComboBox.js +12 -3
  52. package/lib/components/ComboButton/index.js +2 -2
  53. package/lib/components/DataTable/TableExpandHeader.d.ts +2 -2
  54. package/lib/components/DataTable/TableExpandHeader.js +1 -1
  55. package/lib/components/DatePicker/DatePicker.js +1 -0
  56. package/lib/components/Dropdown/Dropdown.js +2 -2
  57. package/lib/components/FeatureFlags/index.js +27 -7
  58. package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +15 -0
  59. package/lib/components/FluidNumberInput/FluidNumberInput.d.ts +95 -0
  60. package/lib/components/FluidNumberInput/index.d.ts +11 -0
  61. package/lib/components/FluidSearch/FluidSearch.Skeleton.d.ts +15 -0
  62. package/lib/components/FluidSearch/FluidSearch.Skeleton.js +2 -2
  63. package/lib/components/FluidSearch/FluidSearch.d.ts +73 -0
  64. package/lib/components/FluidSearch/FluidSearch.js +1 -2
  65. package/lib/components/FluidSearch/index.d.ts +11 -0
  66. package/lib/components/FluidSelect/FluidSelect.Skeleton.d.ts +15 -0
  67. package/lib/components/FluidSelect/FluidSelect.Skeleton.js +1 -2
  68. package/lib/components/FluidSelect/FluidSelect.d.ts +57 -0
  69. package/lib/components/FluidSelect/FluidSelect.js +1 -2
  70. package/lib/components/FluidSelect/index.d.ts +13 -0
  71. package/lib/components/FluidSelect/index.js +2 -0
  72. package/lib/components/FluidTextInput/FluidPasswordInput.d.ts +83 -0
  73. package/lib/components/FluidTextInput/FluidPasswordInput.js +93 -0
  74. package/lib/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +15 -0
  75. package/lib/components/FluidTextInput/FluidTextInput.Skeleton.js +2 -2
  76. package/lib/components/FluidTextInput/FluidTextInput.d.ts +70 -0
  77. package/lib/components/FluidTextInput/FluidTextInput.js +6 -4
  78. package/lib/components/FluidTextInput/index.d.ts +15 -0
  79. package/lib/components/FluidTextInput/index.js +3 -0
  80. package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.d.ts +35 -0
  81. package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.js +4 -2
  82. package/lib/components/FluidTimePicker/FluidTimePicker.d.ts +45 -0
  83. package/lib/components/FluidTimePicker/FluidTimePicker.js +6 -6
  84. package/lib/components/FluidTimePicker/index.d.ts +13 -0
  85. package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +41 -0
  86. package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js +2 -2
  87. package/lib/components/FluidTimePickerSelect/index.d.ts +11 -0
  88. package/lib/components/MultiSelect/FilterableMultiSelect.js +5 -5
  89. package/lib/components/MultiSelect/MultiSelect.js +2 -2
  90. package/lib/components/Notification/Notification.js +4 -2
  91. package/lib/components/OverflowMenuV2/index.js +1 -3
  92. package/lib/components/Pagination/Pagination.js +1 -1
  93. package/lib/components/Popover/index.js +2 -2
  94. package/lib/components/Tabs/Tabs.js +1 -1
  95. package/lib/components/UIShell/HeaderPanel.js +1 -1
  96. package/lib/index.js +19 -18
  97. package/lib/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +763 -2
  98. package/lib/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +80 -0
  99. package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +121 -5
  100. package/package.json +8 -8
@@ -0,0 +1,80 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var floatingUi_core = require('../../core/dist/floating-ui.core.mjs.js');
13
+
14
+ /**
15
+ * Modifies the placement by translating the floating element along the
16
+ * specified axes.
17
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
18
+ * object may be passed.
19
+ * @see https://floating-ui.com/docs/offset
20
+ */
21
+ floatingUi_core.offset;
22
+
23
+ /**
24
+ * Optimizes the visibility of the floating element by choosing the placement
25
+ * that has the most space available automatically, without needing to specify a
26
+ * preferred placement. Alternative to `flip`.
27
+ * @see https://floating-ui.com/docs/autoPlacement
28
+ */
29
+ floatingUi_core.autoPlacement;
30
+
31
+ /**
32
+ * Optimizes the visibility of the floating element by shifting it in order to
33
+ * keep it in view when it will overflow the clipping boundary.
34
+ * @see https://floating-ui.com/docs/shift
35
+ */
36
+ floatingUi_core.shift;
37
+
38
+ /**
39
+ * Optimizes the visibility of the floating element by flipping the `placement`
40
+ * in order to keep it in view when the preferred placement(s) will overflow the
41
+ * clipping boundary. Alternative to `autoPlacement`.
42
+ * @see https://floating-ui.com/docs/flip
43
+ */
44
+ floatingUi_core.flip;
45
+
46
+ /**
47
+ * Provides data that allows you to change the size of the floating element —
48
+ * for instance, prevent it from overflowing the clipping boundary or match the
49
+ * width of the reference element.
50
+ * @see https://floating-ui.com/docs/size
51
+ */
52
+ floatingUi_core.size;
53
+
54
+ /**
55
+ * Provides data to hide the floating element in applicable situations, such as
56
+ * when it is not in the same clipping context as the reference element.
57
+ * @see https://floating-ui.com/docs/hide
58
+ */
59
+ const hide = floatingUi_core.hide;
60
+
61
+ /**
62
+ * Provides data to position an inner element of the floating element so that it
63
+ * appears centered to the reference element.
64
+ * @see https://floating-ui.com/docs/arrow
65
+ */
66
+ floatingUi_core.arrow;
67
+
68
+ /**
69
+ * Provides improved positioning for inline reference elements that can span
70
+ * over multiple lines, such as hyperlinks or range selections.
71
+ * @see https://floating-ui.com/docs/inline
72
+ */
73
+ floatingUi_core.inline;
74
+
75
+ /**
76
+ * Built-in `limiter` that will stop `shift()` at a certain point.
77
+ */
78
+ floatingUi_core.limitShift;
79
+
80
+ exports.hide = hide;
@@ -9,10 +9,101 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
+ /**
13
+ * Custom positioning reference element.
14
+ * @see https://floating-ui.com/docs/virtual-elements
15
+ */
16
+
12
17
  const sides = ['top', 'right', 'bottom', 'left'];
18
+ const alignments = ['start', 'end'];
19
+ const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
20
+ const min = Math.min;
21
+ const max = Math.max;
22
+ const oppositeSideMap = {
23
+ left: 'right',
24
+ right: 'left',
25
+ bottom: 'top',
26
+ top: 'bottom'
27
+ };
28
+ const oppositeAlignmentMap = {
29
+ start: 'end',
30
+ end: 'start'
31
+ };
32
+ function clamp(start, value, end) {
33
+ return max(start, min(value, end));
34
+ }
13
35
  function evaluate(value, param) {
14
36
  return typeof value === 'function' ? value(param) : value;
15
37
  }
38
+ function getSide(placement) {
39
+ return placement.split('-')[0];
40
+ }
41
+ function getAlignment(placement) {
42
+ return placement.split('-')[1];
43
+ }
44
+ function getOppositeAxis(axis) {
45
+ return axis === 'x' ? 'y' : 'x';
46
+ }
47
+ function getAxisLength(axis) {
48
+ return axis === 'y' ? 'height' : 'width';
49
+ }
50
+ function getSideAxis(placement) {
51
+ return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
52
+ }
53
+ function getAlignmentAxis(placement) {
54
+ return getOppositeAxis(getSideAxis(placement));
55
+ }
56
+ function getAlignmentSides(placement, rects, rtl) {
57
+ if (rtl === void 0) {
58
+ rtl = false;
59
+ }
60
+ const alignment = getAlignment(placement);
61
+ const alignmentAxis = getAlignmentAxis(placement);
62
+ const length = getAxisLength(alignmentAxis);
63
+ let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
64
+ if (rects.reference[length] > rects.floating[length]) {
65
+ mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
66
+ }
67
+ return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
68
+ }
69
+ function getExpandedPlacements(placement) {
70
+ const oppositePlacement = getOppositePlacement(placement);
71
+ return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
72
+ }
73
+ function getOppositeAlignmentPlacement(placement) {
74
+ return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
75
+ }
76
+ function getSideList(side, isStart, rtl) {
77
+ const lr = ['left', 'right'];
78
+ const rl = ['right', 'left'];
79
+ const tb = ['top', 'bottom'];
80
+ const bt = ['bottom', 'top'];
81
+ switch (side) {
82
+ case 'top':
83
+ case 'bottom':
84
+ if (rtl) return isStart ? rl : lr;
85
+ return isStart ? lr : rl;
86
+ case 'left':
87
+ case 'right':
88
+ return isStart ? tb : bt;
89
+ default:
90
+ return [];
91
+ }
92
+ }
93
+ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
94
+ const alignment = getAlignment(placement);
95
+ let list = getSideList(getSide(placement), direction === 'start', rtl);
96
+ if (alignment) {
97
+ list = list.map(side => side + "-" + alignment);
98
+ if (flipAlignment) {
99
+ list = list.concat(list.map(getOppositeAlignmentPlacement));
100
+ }
101
+ }
102
+ return list;
103
+ }
104
+ function getOppositePlacement(placement) {
105
+ return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
106
+ }
16
107
  function expandPaddingObject(padding) {
17
108
  return {
18
109
  top: 0,
@@ -31,17 +122,42 @@ function getPaddingObject(padding) {
31
122
  };
32
123
  }
33
124
  function rectToClientRect(rect) {
125
+ const {
126
+ x,
127
+ y,
128
+ width,
129
+ height
130
+ } = rect;
34
131
  return {
35
- ...rect,
36
- top: rect.y,
37
- left: rect.x,
38
- right: rect.x + rect.width,
39
- bottom: rect.y + rect.height
132
+ width,
133
+ height,
134
+ top: y,
135
+ left: x,
136
+ right: x + width,
137
+ bottom: y + height,
138
+ x,
139
+ y
40
140
  };
41
141
  }
42
142
 
143
+ exports.alignments = alignments;
144
+ exports.clamp = clamp;
43
145
  exports.evaluate = evaluate;
44
146
  exports.expandPaddingObject = expandPaddingObject;
147
+ exports.getAlignment = getAlignment;
148
+ exports.getAlignmentAxis = getAlignmentAxis;
149
+ exports.getAlignmentSides = getAlignmentSides;
150
+ exports.getAxisLength = getAxisLength;
151
+ exports.getExpandedPlacements = getExpandedPlacements;
152
+ exports.getOppositeAlignmentPlacement = getOppositeAlignmentPlacement;
153
+ exports.getOppositeAxis = getOppositeAxis;
154
+ exports.getOppositeAxisPlacements = getOppositeAxisPlacements;
155
+ exports.getOppositePlacement = getOppositePlacement;
45
156
  exports.getPaddingObject = getPaddingObject;
157
+ exports.getSide = getSide;
158
+ exports.getSideAxis = getSideAxis;
159
+ exports.max = max;
160
+ exports.min = min;
161
+ exports.placements = placements;
46
162
  exports.rectToClientRect = rectToClientRect;
47
163
  exports.sides = sides;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.66.0",
4
+ "version": "1.67.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -48,10 +48,10 @@
48
48
  },
49
49
  "dependencies": {
50
50
  "@babel/runtime": "^7.24.7",
51
- "@carbon/feature-flags": "^0.22.0",
52
- "@carbon/icons-react": "^11.49.0",
53
- "@carbon/layout": "^11.26.0",
54
- "@carbon/styles": "^1.65.0",
51
+ "@carbon/feature-flags": "^0.23.0-rc.0",
52
+ "@carbon/icons-react": "^11.50.0-rc.0",
53
+ "@carbon/layout": "^11.27.0-rc.0",
54
+ "@carbon/styles": "^1.66.0-rc.0",
55
55
  "@floating-ui/react": "^0.26.0",
56
56
  "@ibm/telemetry-js": "^1.5.0",
57
57
  "classnames": "2.5.1",
@@ -79,8 +79,8 @@
79
79
  "@babel/preset-env": "^7.24.7",
80
80
  "@babel/preset-react": "^7.24.7",
81
81
  "@babel/preset-typescript": "^7.24.7",
82
- "@carbon/test-utils": "^10.32.0",
83
- "@carbon/themes": "^11.40.0",
82
+ "@carbon/test-utils": "^10.33.0-rc.0",
83
+ "@carbon/themes": "^11.41.0-rc.0",
84
84
  "@figma/code-connect": "^1.0.6",
85
85
  "@rollup/plugin-babel": "^6.0.0",
86
86
  "@rollup/plugin-commonjs": "^26.0.0",
@@ -144,5 +144,5 @@
144
144
  "**/*.scss",
145
145
  "**/*.css"
146
146
  ],
147
- "gitHead": "d706ffca254bad174fdfc88c05f620ba547cc369"
147
+ "gitHead": "124d86cfad8f2efd4d60372f735fea534fc6f374"
148
148
  }