@veritone-ce/design-system 2.4.21 → 2.4.23

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 (7) hide show
  1. package/dist/cjs/Menu/controlled.js +4 -2
  2. package/dist/cjs/Select/controlled.js +24 -15
  3. package/dist/esm/Menu/controlled.js +5 -3
  4. package/dist/esm/Select/controlled.js +24 -15
  5. package/dist/types/Select/controlled.d.ts +1 -1
  6. package/dist/types/Select/types.d.ts +1 -0
  7. package/package.json +1 -1
package/dist/cjs/Menu/controlled.js CHANGED
@@ -37,7 +37,7 @@ function Menu({
37
37
  const [activeIndex, setActiveIndex] = React.useState(null);
38
38
  const elementsRef = React.useRef([]);
39
39
  const labelsRef = React.useRef([]);
40
- const { floatingStyles, refs, context } = react.useFloating({
40
+ const { floatingStyles, refs, context, middlewareData } = react.useFloating({
41
41
  open: isOpen,
42
42
  onOpenChange(newOpen) {
43
43
  if (!newOpen && dismissEnabled) {
@@ -50,6 +50,7 @@ function Menu({
50
50
  placement,
51
51
  strategy,
52
52
  middleware: [
53
+ react.hide(),
53
54
  react.offset({
54
55
  mainAxis: 4,
55
56
  alignmentAxis: 0
@@ -113,7 +114,8 @@ function Menu({
113
114
  tabIndex: 0,
114
115
  "aria-labelledby": anchor?.id || props.anchorId,
115
116
  style: {
116
- ...floatingStyles
117
+ ...floatingStyles,
118
+ visibility: middlewareData.hide?.referenceHidden ? "hidden" : "visible"
117
119
  },
118
120
  ...getFloatingProps(),
119
121
  children: /* @__PURE__ */ jsxRuntime.jsx(
package/dist/cjs/Select/controlled.js CHANGED
@@ -28,6 +28,7 @@ function ControlledSelect({
28
28
  ref,
29
29
  value,
30
30
  freeSolo = false,
31
+ triggerChangeOnBlur = false,
31
32
  multiple = false,
32
33
  endIcon = /* @__PURE__ */ jsxRuntime.jsx(DefaultEndIcon, {}),
33
34
  placeholder = "Select",
@@ -77,6 +78,23 @@ function ControlledSelect({
77
78
  }) }) });
78
79
  }
79
80
  }
81
+ const handleAddInputValue = (e) => {
82
+ if (freeSolo && props.inputValue !== "") {
83
+ if (!e.currentTarget.validity.patternMismatch) {
84
+ props.onChange(
85
+ e,
86
+ multiple ? [
87
+ // Don't add duplicates
88
+ .../* @__PURE__ */ new Set([
89
+ ...value ?? [],
90
+ props.inputValue
91
+ ])
92
+ ] : props.inputValue
93
+ );
94
+ props.onInputChange(e, "");
95
+ }
96
+ }
97
+ };
80
98
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
81
99
  /* @__PURE__ */ jsxRuntime.jsxs(
82
100
  "span",
@@ -114,21 +132,12 @@ function ControlledSelect({
114
132
  },
115
133
  onKeyDown: (e) => {
116
134
  if (e.key === "Enter") {
117
- if (freeSolo && props.inputValue !== "") {
118
- if (!e.currentTarget.validity.patternMismatch) {
119
- props.onChange(
120
- e,
121
- multiple ? [
122
- // don't add dupes
123
- .../* @__PURE__ */ new Set([
124
- ...value ?? [],
125
- props.inputValue
126
- ])
127
- ] : props.inputValue
128
- );
129
- props.onInputChange(e, "");
130
- }
131
- }
135
+ handleAddInputValue(e);
136
+ }
137
+ },
138
+ onBlur: (e) => {
139
+ if (triggerChangeOnBlur) {
140
+ handleAddInputValue(e);
132
141
  }
133
142
  },
134
143
  className: styles_module.default["inner-input"],
package/dist/esm/Menu/controlled.js CHANGED
@@ -11,7 +11,7 @@ import '@mui/system';
11
11
  import { PortalThemeRelay } from '../styles/portal.js';
12
12
  import '../styles/styled.js';
13
13
  import '../Box/index.js';
14
- import { useListItem, useMergeRefs, useFloating, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, useTransitionStyles, FloatingList, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
14
+ import { useListItem, useMergeRefs, useFloating, hide, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, useTransitionStyles, FloatingList, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
15
15
  import css from './styles.module.scss.js';
16
16
  import { resolvePopoverAnchor } from '../popover/utils.js';
17
17
  import Typography from '../Typography/index.js';
@@ -33,7 +33,7 @@ function Menu({
33
33
  const [activeIndex, setActiveIndex] = React__default.useState(null);
34
34
  const elementsRef = React__default.useRef([]);
35
35
  const labelsRef = React__default.useRef([]);
36
- const { floatingStyles, refs, context } = useFloating({
36
+ const { floatingStyles, refs, context, middlewareData } = useFloating({
37
37
  open: isOpen,
38
38
  onOpenChange(newOpen) {
39
39
  if (!newOpen && dismissEnabled) {
@@ -46,6 +46,7 @@ function Menu({
46
46
  placement,
47
47
  strategy,
48
48
  middleware: [
49
+ hide(),
49
50
  offset({
50
51
  mainAxis: 4,
51
52
  alignmentAxis: 0
@@ -109,7 +110,8 @@ function Menu({
109
110
  tabIndex: 0,
110
111
  "aria-labelledby": anchor?.id || props.anchorId,
111
112
  style: {
112
- ...floatingStyles
113
+ ...floatingStyles,
114
+ visibility: middlewareData.hide?.referenceHidden ? "hidden" : "visible"
113
115
  },
114
116
  ...getFloatingProps(),
115
117
  children: /* @__PURE__ */ jsx(
package/dist/esm/Select/controlled.js CHANGED
@@ -24,6 +24,7 @@ function ControlledSelect({
24
24
  ref,
25
25
  value,
26
26
  freeSolo = false,
27
+ triggerChangeOnBlur = false,
27
28
  multiple = false,
28
29
  endIcon = /* @__PURE__ */ jsx(DefaultEndIcon, {}),
29
30
  placeholder = "Select",
@@ -73,6 +74,23 @@ function ControlledSelect({
73
74
  }) }) });
74
75
  }
75
76
  }
77
+ const handleAddInputValue = (e) => {
78
+ if (freeSolo && props.inputValue !== "") {
79
+ if (!e.currentTarget.validity.patternMismatch) {
80
+ props.onChange(
81
+ e,
82
+ multiple ? [
83
+ // Don't add duplicates
84
+ .../* @__PURE__ */ new Set([
85
+ ...value ?? [],
86
+ props.inputValue
87
+ ])
88
+ ] : props.inputValue
89
+ );
90
+ props.onInputChange(e, "");
91
+ }
92
+ }
93
+ };
76
94
  return /* @__PURE__ */ jsxs(Fragment, { children: [
77
95
  /* @__PURE__ */ jsxs(
78
96
  "span",
@@ -110,21 +128,12 @@ function ControlledSelect({
110
128
  },
111
129
  onKeyDown: (e) => {
112
130
  if (e.key === "Enter") {
113
- if (freeSolo && props.inputValue !== "") {
114
- if (!e.currentTarget.validity.patternMismatch) {
115
- props.onChange(
116
- e,
117
- multiple ? [
118
- // don't add dupes
119
- .../* @__PURE__ */ new Set([
120
- ...value ?? [],
121
- props.inputValue
122
- ])
123
- ] : props.inputValue
124
- );
125
- props.onInputChange(e, "");
126
- }
127
- }
131
+ handleAddInputValue(e);
132
+ }
133
+ },
134
+ onBlur: (e) => {
135
+ if (triggerChangeOnBlur) {
136
+ handleAddInputValue(e);
128
137
  }
129
138
  },
130
139
  className: css["inner-input"],
package/dist/types/Select/controlled.d.ts CHANGED
@@ -12,5 +12,5 @@ export type ControlledSelectProps<OptionValue, Multiple extends boolean | undefi
12
12
  onInputChange(event: React.SyntheticEvent<HTMLElement>, newValue: string): void;
13
13
  'data-pendo'?: string;
14
14
  };
15
- declare function ControlledSelect<OptionValue, Multiple extends boolean | undefined>({ ref, value, freeSolo, multiple, endIcon, placeholder, clearable, ...props }: ControlledSelectProps<OptionValue, Multiple>): import("react/jsx-runtime").JSX.Element;
15
+ declare function ControlledSelect<OptionValue, Multiple extends boolean | undefined>({ ref, value, freeSolo, triggerChangeOnBlur, multiple, endIcon, placeholder, clearable, ...props }: ControlledSelectProps<OptionValue, Multiple>): import("react/jsx-runtime").JSX.Element;
16
16
  export default ControlledSelect;
package/dist/types/Select/types.d.ts CHANGED
@@ -21,6 +21,7 @@ export type CommonSelectProps<OptionValue> = {
21
21
  * If true, the Select is free solo, meaning that the user input is not bound to provided options.
22
22
  */
23
23
  freeSolo?: boolean;
24
+ triggerChangeOnBlur?: boolean;
24
25
  pattern?: string;
25
26
  multiple?: boolean;
26
27
  options: SelectOptions<OptionValue>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veritone-ce/design-system",
3
- "version": "2.4.21",
3
+ "version": "2.4.23",
4
4
  "private": false,
5
5
  "description": "Design System for Veritone CE",
6
6
  "keywords": [