@kaizen/components 1.64.10 → 1.64.12

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 (9) hide show
  1. package/dist/cjs/Filter/FilterSelect/FilterSelect.cjs +8 -2
  2. package/dist/esm/Filter/FilterSelect/FilterSelect.mjs +8 -2
  3. package/dist/styles.css +81 -85
  4. package/package.json +3 -3
  5. package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss +0 -1
  6. package/src/Filter/FilterSelect/FilterSelect.tsx +9 -3
  7. package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.module.scss +1 -1
  8. package/src/Select/Select.module.scss +0 -2
  9. package/src/__actions__/Button/v1/Button/Button.module.scss +0 -1
package/dist/cjs/Filter/FilterSelect/FilterSelect.cjs CHANGED
@@ -57,6 +57,10 @@ var FilterSelect = function (_a) {
57
57
  triggerProps = _c.triggerProps,
58
58
  menuProps = _c.menuProps;
59
59
  var buttonProps = button.useButton(triggerProps, triggerRef).buttonProps;
60
+ var renderTriggerButtonProps = tslib.__assign(tslib.__assign({}, buttonProps), {
61
+ "aria-labelledby": undefined,
62
+ "aria-controls": menuProps.id
63
+ });
60
64
  return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(select$1.HiddenSelect, {
61
65
  label: label,
62
66
  state: state,
@@ -70,7 +74,7 @@ var FilterSelect = function (_a) {
70
74
  selectedValue: ((_a = state.selectedItem) === null || _a === void 0 ? void 0 : _a.textValue) || undefined,
71
75
  label: label,
72
76
  isOpen: isOpen
73
- }, buttonProps));
77
+ }, renderTriggerButtonProps));
74
78
  },
75
79
  onMount: setTriggerRef,
76
80
  classNameOverride: classNameOverride
@@ -79,7 +83,9 @@ var FilterSelect = function (_a) {
79
83
  }, React__default.default.createElement(SelectContext.SelectProvider, {
80
84
  state: state
81
85
  }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {
82
- menuProps: menuProps
86
+ menuProps: tslib.__assign(tslib.__assign({}, menuProps), {
87
+ "aria-labelledby": buttonProps.id
88
+ })
83
89
  }, children)))));
84
90
  };
85
91
  FilterSelect.displayName = "FilterSelect";
package/dist/esm/Filter/FilterSelect/FilterSelect.mjs CHANGED
@@ -50,6 +50,10 @@ const FilterSelect = /*#__PURE__*/function () {
50
50
  triggerProps = _c.triggerProps,
51
51
  menuProps = _c.menuProps;
52
52
  var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
53
+ var renderTriggerButtonProps = __assign(__assign({}, buttonProps), {
54
+ "aria-labelledby": undefined,
55
+ "aria-controls": menuProps.id
56
+ });
53
57
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenSelect, {
54
58
  label: label,
55
59
  state: state,
@@ -63,7 +67,7 @@ const FilterSelect = /*#__PURE__*/function () {
63
67
  selectedValue: ((_a = state.selectedItem) === null || _a === void 0 ? void 0 : _a.textValue) || undefined,
64
68
  label: label,
65
69
  isOpen: isOpen
66
- }, buttonProps));
70
+ }, renderTriggerButtonProps));
67
71
  },
68
72
  onMount: setTriggerRef,
69
73
  classNameOverride: classNameOverride
@@ -72,7 +76,9 @@ const FilterSelect = /*#__PURE__*/function () {
72
76
  }, /*#__PURE__*/React.createElement(SelectProvider, {
73
77
  state: state
74
78
  }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
75
- menuProps: menuProps
79
+ menuProps: __assign(__assign({}, menuProps), {
80
+ "aria-labelledby": buttonProps.id
81
+ })
76
82
  }, children)))));
77
83
  };
78
84
  FilterSelect.displayName = "FilterSelect";
package/dist/styles.css CHANGED
@@ -27,61 +27,35 @@
27
27
  .OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
28
28
  fill: var(--color-white, #ffffff);
29
29
  }
30
- /** THIS IS AN AUTOGENERATED FILE **/
31
- /** THIS IS AN AUTOGENERATED FILE **/
32
- /** THIS IS AN AUTOGENERATED FILE **/
33
- /** THIS IS AN AUTOGENERATED FILE **/
34
- /** THIS IS AN AUTOGENERATED FILE **/
35
- /** THIS IS AN AUTOGENERATED FILE **/
36
- .Tooltip-module_tooltip__efL1m {
37
- max-width: 200px;
38
- padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
39
- color: var(--color-white, #ffffff);
40
- text-align: center;
41
- font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
42
- font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
43
- font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
44
- letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
45
- line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
46
- border-radius: var(--border-solid-border-radius, 7px);
47
- box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
48
- background-color: var(--color-purple-800, #2f2438);
49
- text-wrap: pretty;
50
- /* fixes FF gap */
51
- transform: translate3d(0, 0, 0);
52
- }
53
- .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
54
- background-color: var(--color-white, #ffffff);
55
- color: var(--color-purple-800, #2f2438);
56
- }
57
- .Tooltip-module_tooltip__efL1m[data-placement=top] {
58
- --origin: translateY(4px);
59
- }
60
- .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
61
- --origin: translateY(-4px);
62
- }
63
- .Tooltip-module_tooltip__efL1m[data-placement=right] {
64
- --origin: translateX(-4px);
65
- }
66
- .Tooltip-module_tooltip__efL1m[data-placement=left] {
67
- --origin: translateX(4px);
68
- }
69
- .Tooltip-module_tooltip__efL1m[data-entering] {
70
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
30
+ .Menu-module_menu__iHYqh {
31
+ background-color: var(--color-white);
32
+ color: var(--color-purple-800);
33
+ width: 248px;
34
+ max-height: 22rem;
35
+ overflow: auto;
36
+ padding-block: var(--spacing-6);
37
+ outline: none;
38
+ border-radius: var(--border-solid-border-radius);
39
+ box-shadow: var(--shadow-large-box-shadow);
71
40
  }
72
- .Tooltip-module_tooltip__efL1m[data-exiting] {
73
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
41
+
42
+ .Menu-module_menu__iHYqh .react-aria-Header {
43
+ font-family: var(--typography-heading-6-font-family);
44
+ font-size: var(--typography-heading-6-font-size);
45
+ letter-spacing: var(--typography-heading-6-letter-spacing);
46
+ font-weight: var(--typography-heading-6-font-weight);
47
+ line-height: var(--typography-heading-6-line-height);
48
+ padding: var(--spacing-6) 10px;
49
+ margin-inline: var(--spacing-6);
74
50
  }
75
51
 
76
- @keyframes Tooltip-module_slide__lFdGA {
77
- from {
78
- transform: var(--origin);
79
- opacity: 0;
80
- }
81
- to {
82
- transform: translateY(0);
83
- opacity: 1;
84
- }
52
+ .Menu-module_menu__iHYqh section:not(:last-of-type)::after {
53
+ width: 100%;
54
+ height: 1px;
55
+ background-color: var(--border-solid-border-color);
56
+ content: "";
57
+ display: block;
58
+ margin-block: var(--spacing-6);
85
59
  }
86
60
  .MenuItem-module_item__DPerF {
87
61
  font-family: var(--typography-paragraph-body-font-family);
@@ -117,6 +91,9 @@
117
91
  .MenuItem-module_item__DPerF[data-disabled] {
118
92
  opacity: 0.3;
119
93
  }
94
+ .Focusable-module_focusableWrapper__NfuIi {
95
+ display: inline-flex;
96
+ }
120
97
  .Button-module_button__QOSYH {
121
98
  --button-min-height-width: var(--spacing-48);
122
99
  --button-padding-x: calc(
@@ -205,38 +182,61 @@
205
182
  --button-icon-size: var(--spacing-16);
206
183
  gap: var(--spacing-8);
207
184
  }
208
- .Focusable-module_focusableWrapper__NfuIi {
209
- display: inline-flex;
185
+ /** THIS IS AN AUTOGENERATED FILE **/
186
+ /** THIS IS AN AUTOGENERATED FILE **/
187
+ /** THIS IS AN AUTOGENERATED FILE **/
188
+ /** THIS IS AN AUTOGENERATED FILE **/
189
+ /** THIS IS AN AUTOGENERATED FILE **/
190
+ /** THIS IS AN AUTOGENERATED FILE **/
191
+ .Tooltip-module_tooltip__efL1m {
192
+ max-width: 200px;
193
+ padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
194
+ color: var(--color-white, #ffffff);
195
+ text-align: center;
196
+ font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
197
+ font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
198
+ font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
199
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
200
+ line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
201
+ border-radius: var(--border-solid-border-radius, 7px);
202
+ box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
203
+ background-color: var(--color-purple-800, #2f2438);
204
+ text-wrap: pretty;
205
+ /* fixes FF gap */
206
+ transform: translate3d(0, 0, 0);
210
207
  }
211
- .Menu-module_menu__iHYqh {
212
- background-color: var(--color-white);
213
- color: var(--color-purple-800);
214
- width: 248px;
215
- max-height: 22rem;
216
- overflow: auto;
217
- padding-block: var(--spacing-6);
218
- outline: none;
219
- border-radius: var(--border-solid-border-radius);
220
- box-shadow: var(--shadow-large-box-shadow);
208
+ .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
209
+ background-color: var(--color-white, #ffffff);
210
+ color: var(--color-purple-800, #2f2438);
221
211
  }
222
-
223
- .Menu-module_menu__iHYqh .react-aria-Header {
224
- font-family: var(--typography-heading-6-font-family);
225
- font-size: var(--typography-heading-6-font-size);
226
- letter-spacing: var(--typography-heading-6-letter-spacing);
227
- font-weight: var(--typography-heading-6-font-weight);
228
- line-height: var(--typography-heading-6-line-height);
229
- padding: var(--spacing-6) 10px;
230
- margin-inline: var(--spacing-6);
212
+ .Tooltip-module_tooltip__efL1m[data-placement=top] {
213
+ --origin: translateY(4px);
214
+ }
215
+ .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
216
+ --origin: translateY(-4px);
217
+ }
218
+ .Tooltip-module_tooltip__efL1m[data-placement=right] {
219
+ --origin: translateX(-4px);
220
+ }
221
+ .Tooltip-module_tooltip__efL1m[data-placement=left] {
222
+ --origin: translateX(4px);
223
+ }
224
+ .Tooltip-module_tooltip__efL1m[data-entering] {
225
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
226
+ }
227
+ .Tooltip-module_tooltip__efL1m[data-exiting] {
228
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
231
229
  }
232
230
 
233
- .Menu-module_menu__iHYqh section:not(:last-of-type)::after {
234
- width: 100%;
235
- height: 1px;
236
- background-color: var(--border-solid-border-color);
237
- content: "";
238
- display: block;
239
- margin-block: var(--spacing-6);
231
+ @keyframes Tooltip-module_slide__lFdGA {
232
+ from {
233
+ transform: var(--origin);
234
+ opacity: 0;
235
+ }
236
+ to {
237
+ transform: translateY(0);
238
+ opacity: 1;
239
+ }
240
240
  }
241
241
  .SVG-module_icon__8J5Ev {
242
242
  width: 20px;
@@ -1209,7 +1209,6 @@
1209
1209
  opacity: 30%;
1210
1210
  }
1211
1211
  .GenericButton-module_disabled__NQENR.GenericButton-module_button__vTuHz:focus-visible::after, .GenericButton-module_working__Ia8R2.GenericButton-module_button__vTuHz:focus-visible::after {
1212
- border-style: var(--border-dashed-border-style, dashed);
1213
1212
  border-color: var(--color-purple-800, #2f2438);
1214
1213
  }
1215
1214
  .GenericButton-module_button__vTuHz .GenericButton-module_content__McBme {
@@ -4761,7 +4760,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
4761
4760
  border: 2px solid transparent;
4762
4761
  }
4763
4762
  .SelectionControlButton-module_button__u-ysH.SelectionControlButton-module_isDisabled__0axMR:focus-visible::after {
4764
- border-style: var(--border-dashed-border-style, dashed);
4765
4763
  border-color: var(--color-gray-400, #cdcdd0);
4766
4764
  }
4767
4765
  .ListBox-module_listBox__Uf6Mc {
@@ -8746,7 +8744,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
8746
8744
  background-color: transparent;
8747
8745
  border-color: transparent;
8748
8746
  opacity: 100%;
8749
- outline: var(--color-purple-800, #2f2438) var(--border-dashed-border-style, dashed) var(--border-focus-ring-border-width, 2px);
8747
+ outline: var(--color-purple-800, #2f2438) var(--border-solid-border-style, solid) var(--border-focus-ring-border-width, 2px);
8750
8748
  }
8751
8749
  /** THIS IS AN AUTOGENERATED FILE **/
8752
8750
  .Toolbar-module_toolbar__ooRzV {
@@ -9407,8 +9405,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
9407
9405
  }
9408
9406
  .Select-module_specificityIncreaser__cZtQV .Select-module_focusedOption__uwQwp.Select-module_disabledOption__TWVun {
9409
9407
  color: var(--color-purple-800, #2f2438);
9410
- border-style: var(--border-dashed-border-style, dashed);
9411
- border-width: var(--border-focus-ring-border-width, 2px);
9412
9408
  border-color: var(--color-gray-500, #878792);
9413
9409
  background: transparent;
9414
9410
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.64.10",
3
+ "version": "1.64.12",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
@@ -119,8 +119,8 @@
119
119
  "svgo": "^3.3.2",
120
120
  "tslib": "^2.7.0",
121
121
  "tsx": "^4.17.0",
122
- "@kaizen/design-tokens": "10.6.2",
123
- "@kaizen/package-bundler": "1.1.6"
122
+ "@kaizen/package-bundler": "1.1.6",
123
+ "@kaizen/design-tokens": "10.6.2"
124
124
  },
125
125
  "peerDependencies": {
126
126
  "@cultureamp/i18n-react-intl": "^2.5.9",
package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss CHANGED
@@ -64,7 +64,6 @@ $focus-ring-offset: 1px;
64
64
  }
65
65
 
66
66
  &:focus-visible::after {
67
- border-style: $border-dashed-border-style;
68
67
  border-color: $color-gray-400;
69
68
  }
70
69
  }
package/src/Filter/FilterSelect/FilterSelect.tsx CHANGED
@@ -78,7 +78,11 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
78
78
  )
79
79
 
80
80
  const { buttonProps } = useButton(triggerProps, triggerRef)
81
-
81
+ const renderTriggerButtonProps = {
82
+ ...buttonProps,
83
+ "aria-labelledby": undefined,
84
+ "aria-controls": menuProps.id,
85
+ }
82
86
  return (
83
87
  <>
84
88
  <HiddenSelect label={label} state={state} triggerRef={triggerRef} />
@@ -90,7 +94,7 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
90
94
  selectedValue: state.selectedItem?.textValue || undefined,
91
95
  label,
92
96
  isOpen,
93
- ...buttonProps,
97
+ ...renderTriggerButtonProps,
94
98
  })
95
99
  }
96
100
  onMount={setTriggerRef}
@@ -98,7 +102,9 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
98
102
  >
99
103
  <FilterContents classNameOverride={styles.filterContents}>
100
104
  <SelectProvider<Option> state={state}>
101
- <SelectPopoverContents menuProps={menuProps}>
105
+ <SelectPopoverContents
106
+ menuProps={{ ...menuProps, "aria-labelledby": buttonProps.id }}
107
+ >
102
108
  {children}
103
109
  </SelectPopoverContents>
104
110
  </SelectProvider>
package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.module.scss CHANGED
@@ -113,7 +113,7 @@
113
113
  background-color: transparent;
114
114
  border-color: transparent;
115
115
  opacity: 100%;
116
- outline: $color-purple-800 $border-dashed-border-style
116
+ outline: $color-purple-800 $border-solid-border-style
117
117
  $border-focus-ring-border-width;
118
118
  }
119
119
  }
package/src/Select/Select.module.scss CHANGED
@@ -138,8 +138,6 @@ $focus-border-color: $color-blue-500;
138
138
 
139
139
  &.disabledOption {
140
140
  color: $color-purple-800;
141
- border-style: $border-dashed-border-style;
142
- border-width: $border-focus-ring-border-width;
143
141
  border-color: $color-gray-500;
144
142
  background: transparent;
145
143
  }
package/src/__actions__/Button/v1/Button/Button.module.scss CHANGED
@@ -80,7 +80,6 @@
80
80
 
81
81
  &:focus-visible {
82
82
  &::after {
83
- border-style: $border-dashed-border-style;
84
83
  border-color: $color-purple-800;
85
84
  }
86
85
  }