@dt-dds/react-select 1.0.0-beta.66 → 1.0.0-beta.68

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/CHANGELOG.md +23 -0
  2. package/README.md +1 -0
  3. package/dist/index.d.mts +5 -4
  4. package/dist/index.d.ts +5 -4
  5. package/dist/index.js +10 -11
  6. package/dist/index.mjs +10 -11
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @dt-ui/react-select
2
2
 
3
+ ## 1.0.0-beta.68
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: make select onChange optional
8
+ - feat: enable custom value label on Select
9
+
10
+ ### Patch Changes
11
+
12
+ - style: add width 100% to select
13
+ - fix: add optional chaining to isDisabled item
14
+ - Updated dependencies [223664b]
15
+ - @dt-dds/react-box@1.0.0-beta.56
16
+ - @dt-dds/react-dropdown@1.0.0-beta.77
17
+
18
+ ## 1.0.0-beta.67
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies [223664b]
23
+ - @dt-dds/react-box@1.0.0-beta.55
24
+ - @dt-dds/react-dropdown@1.0.0-beta.76
25
+
3
26
  ## 1.0.0-beta.66
4
27
 
5
28
  ### Minor Changes
package/README.md CHANGED
@@ -69,6 +69,7 @@ export const App = () => {
69
69
  | ------------ | --------------------- | ------- | ------------------------------------------------------------ |
70
70
  | `children` | `ReactNode` | — | Visible content of the option (the label shown to the user). |
71
71
  | `value` | `string` | — | Option value. |
72
+ | `valueLabel` | `ReactNode` | — | This is a customizable option label on the input. |
72
73
  | `index` | `number` | — | Option index in the list (used internally by Downshift). |
73
74
  | `isDisabled` | `boolean` | `false` | Disables the option. |
74
75
  | `style` | `React.CSSProperties` | — | Inline styles for the option. |
package/dist/index.d.mts CHANGED
@@ -1,18 +1,19 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import { BaseProps, Scale } from '@dt-dds/react-core';
3
- import * as react_jsx_runtime from 'react/jsx-runtime';
4
3
  import { ReactNode } from 'react';
4
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
 
6
6
  interface SelectOptionProps extends BaseProps {
7
7
  value: string;
8
8
  index: number;
9
9
  isDisabled?: boolean;
10
+ valueLabel?: ReactNode;
10
11
  }
11
12
 
12
13
  type SelectOptionValue = {
13
14
  value: string;
14
15
  isDisabled?: boolean;
15
- label?: string;
16
+ label?: ReactNode;
16
17
  };
17
18
  type SelectVariant = 'outlined' | 'bottom-line';
18
19
  type SelectFill = 'default' | 'contrast' | 'light';
@@ -33,12 +34,12 @@ interface BaseSelectProps extends BaseProps {
33
34
  interface SingleSelectProps extends BaseSelectProps {
34
35
  isMulti?: false;
35
36
  value?: string;
36
- onChange: (value: string) => void;
37
+ onChange?: (value: string) => void;
37
38
  }
38
39
  interface MultiSelectProps extends BaseSelectProps {
39
40
  isMulti: true;
40
41
  value?: string[];
41
- onChange: (value: string[]) => void;
42
+ onChange?: (value: string[]) => void;
42
43
  }
43
44
  type SelectProps = SingleSelectProps | MultiSelectProps;
44
45
  declare const Select: {
package/dist/index.d.ts CHANGED
@@ -1,18 +1,19 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import { BaseProps, Scale } from '@dt-dds/react-core';
3
- import * as react_jsx_runtime from 'react/jsx-runtime';
4
3
  import { ReactNode } from 'react';
4
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
 
6
6
  interface SelectOptionProps extends BaseProps {
7
7
  value: string;
8
8
  index: number;
9
9
  isDisabled?: boolean;
10
+ valueLabel?: ReactNode;
10
11
  }
11
12
 
12
13
  type SelectOptionValue = {
13
14
  value: string;
14
15
  isDisabled?: boolean;
15
- label?: string;
16
+ label?: ReactNode;
16
17
  };
17
18
  type SelectVariant = 'outlined' | 'bottom-line';
18
19
  type SelectFill = 'default' | 'contrast' | 'light';
@@ -33,12 +34,12 @@ interface BaseSelectProps extends BaseProps {
33
34
  interface SingleSelectProps extends BaseSelectProps {
34
35
  isMulti?: false;
35
36
  value?: string;
36
- onChange: (value: string) => void;
37
+ onChange?: (value: string) => void;
37
38
  }
38
39
  interface MultiSelectProps extends BaseSelectProps {
39
40
  isMulti: true;
40
41
  value?: string[];
41
- onChange: (value: string[]) => void;
42
+ onChange?: (value: string[]) => void;
42
43
  }
43
44
  type SelectProps = SingleSelectProps | MultiSelectProps;
44
45
  declare const Select: {
package/dist/index.js CHANGED
@@ -90,9 +90,7 @@ var SelectProvider = ({ children, value }) => {
90
90
  const _a = value, { highlightedIndex, selectedItems } = _a, rest = __objRest(_a, ["highlightedIndex", "selectedItems"]);
91
91
  const isItemHighlighted = (index) => index === highlightedIndex;
92
92
  const isItemSelected = (item) => {
93
- return !!selectedItems.find(
94
- (selectedItem) => selectedItem.value === item.value
95
- );
93
+ return !!selectedItems.find((selectedItem) => selectedItem.value === item);
96
94
  };
97
95
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
98
96
  SelectContext.Provider,
@@ -136,7 +134,7 @@ var SelectOption = ({
136
134
  }) => {
137
135
  const { getItemProps, isItemHighlighted, isItemSelected, isMulti } = useSelectContext();
138
136
  const item = { value, isDisabled };
139
- const isSelected = isItemSelected(item);
137
+ const isSelected = isItemSelected(value);
140
138
  const isHighlighted = isItemHighlighted(index);
141
139
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
142
140
  import_react_dropdown.Dropdown.Option,
@@ -306,16 +304,17 @@ var Select = ({
306
304
  };
307
305
  const handleClearSelection = (e) => {
308
306
  e.stopPropagation();
309
- isMulti && onChange([]);
307
+ isMulti && (onChange == null ? void 0 : onChange([]));
310
308
  };
311
309
  const options = (0, import_react2.useMemo)(() => {
312
310
  var _a2;
313
311
  const tempOptions = import_react2.Children.map(children, (child) => {
312
+ var _a3, _b, _c;
314
313
  if ((0, import_react2.isValidElement)(child) && child.props.value != void 0) {
315
314
  return {
316
315
  value: child.props.value,
317
316
  isDisabled: child.props.isDisabled,
318
- label: child.props.children
317
+ label: (_c = (_a3 = child.props) == null ? void 0 : _a3.valueLabel) != null ? _c : (_b = child.props) == null ? void 0 : _b.children
319
318
  };
320
319
  }
321
320
  return null;
@@ -350,7 +349,7 @@ var Select = ({
350
349
  } = useSelect({
351
350
  items: options,
352
351
  isItemDisabled(item) {
353
- return !!item.isDisabled;
352
+ return !!(item == null ? void 0 : item.isDisabled);
354
353
  },
355
354
  defaultHighlightedIndex: isMulti || !(selectedItems == null ? void 0 : selectedItems[0]) ? 0 : void 0,
356
355
  selectedItem: !isMulti ? (_a = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a : null : null,
@@ -382,10 +381,10 @@ var Select = ({
382
381
  const currentValue = Array.isArray(value) ? value : [];
383
382
  const isSelectedItem = selectedOptionsSet.has(selectedItem.value);
384
383
  const nextValue = isSelectedItem ? currentValue.filter((v) => v !== selectedItem.value) : [...currentValue, selectedItem.value];
385
- onChange(nextValue);
384
+ onChange == null ? void 0 : onChange(nextValue);
386
385
  return;
387
386
  }
388
- onChange(selectedItem.value);
387
+ onChange == null ? void 0 : onChange(selectedItem.value);
389
388
  }
390
389
  });
391
390
  const disabled = isDisabled || options.length === 1;
@@ -407,9 +406,9 @@ var Select = ({
407
406
  import_react_box.Box,
408
407
  {
409
408
  dataTestId: dataTestId != null ? dataTestId : "select",
410
- style: { alignItems: "start", gap: 4 },
409
+ style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style),
411
410
  children: [
412
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectStyled, { style, children: [
411
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectStyled, { children: [
413
412
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
414
413
  import_react_label_field.LabelField,
415
414
  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getLabelProps()), {
package/dist/index.mjs CHANGED
@@ -62,9 +62,7 @@ var SelectProvider = ({ children, value }) => {
62
62
  const _a = value, { highlightedIndex, selectedItems } = _a, rest = __objRest(_a, ["highlightedIndex", "selectedItems"]);
63
63
  const isItemHighlighted = (index) => index === highlightedIndex;
64
64
  const isItemSelected = (item) => {
65
- return !!selectedItems.find(
66
- (selectedItem) => selectedItem.value === item.value
67
- );
65
+ return !!selectedItems.find((selectedItem) => selectedItem.value === item);
68
66
  };
69
67
  return /* @__PURE__ */ jsx(
70
68
  SelectContext.Provider,
@@ -108,7 +106,7 @@ var SelectOption = ({
108
106
  }) => {
109
107
  const { getItemProps, isItemHighlighted, isItemSelected, isMulti } = useSelectContext();
110
108
  const item = { value, isDisabled };
111
- const isSelected = isItemSelected(item);
109
+ const isSelected = isItemSelected(value);
112
110
  const isHighlighted = isItemHighlighted(index);
113
111
  return /* @__PURE__ */ jsx2(
114
112
  Dropdown.Option,
@@ -278,16 +276,17 @@ var Select = ({
278
276
  };
279
277
  const handleClearSelection = (e) => {
280
278
  e.stopPropagation();
281
- isMulti && onChange([]);
279
+ isMulti && (onChange == null ? void 0 : onChange([]));
282
280
  };
283
281
  const options = useMemo(() => {
284
282
  var _a2;
285
283
  const tempOptions = Children.map(children, (child) => {
284
+ var _a3, _b, _c;
286
285
  if (isValidElement(child) && child.props.value != void 0) {
287
286
  return {
288
287
  value: child.props.value,
289
288
  isDisabled: child.props.isDisabled,
290
- label: child.props.children
289
+ label: (_c = (_a3 = child.props) == null ? void 0 : _a3.valueLabel) != null ? _c : (_b = child.props) == null ? void 0 : _b.children
291
290
  };
292
291
  }
293
292
  return null;
@@ -322,7 +321,7 @@ var Select = ({
322
321
  } = useSelect({
323
322
  items: options,
324
323
  isItemDisabled(item) {
325
- return !!item.isDisabled;
324
+ return !!(item == null ? void 0 : item.isDisabled);
326
325
  },
327
326
  defaultHighlightedIndex: isMulti || !(selectedItems == null ? void 0 : selectedItems[0]) ? 0 : void 0,
328
327
  selectedItem: !isMulti ? (_a = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a : null : null,
@@ -354,10 +353,10 @@ var Select = ({
354
353
  const currentValue = Array.isArray(value) ? value : [];
355
354
  const isSelectedItem = selectedOptionsSet.has(selectedItem.value);
356
355
  const nextValue = isSelectedItem ? currentValue.filter((v) => v !== selectedItem.value) : [...currentValue, selectedItem.value];
357
- onChange(nextValue);
356
+ onChange == null ? void 0 : onChange(nextValue);
358
357
  return;
359
358
  }
360
- onChange(selectedItem.value);
359
+ onChange == null ? void 0 : onChange(selectedItem.value);
361
360
  }
362
361
  });
363
362
  const disabled = isDisabled || options.length === 1;
@@ -379,9 +378,9 @@ var Select = ({
379
378
  Box,
380
379
  {
381
380
  dataTestId: dataTestId != null ? dataTestId : "select",
382
- style: { alignItems: "start", gap: 4 },
381
+ style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style),
383
382
  children: [
384
- /* @__PURE__ */ jsxs(SelectStyled, { style, children: [
383
+ /* @__PURE__ */ jsxs(SelectStyled, { children: [
385
384
  /* @__PURE__ */ jsx3(
386
385
  LabelField,
387
386
  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getLabelProps()), {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-select",
3
- "version": "1.0.0-beta.66",
3
+ "version": "1.0.0-beta.68",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,10 +20,10 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-box": "1.0.0-beta.54",
23
+ "@dt-dds/react-box": "1.0.0-beta.56",
24
24
  "@dt-dds/react-checkbox": "1.0.0-beta.52",
25
25
  "@dt-dds/react-core": "1.0.0-beta.51",
26
- "@dt-dds/react-dropdown": "1.0.0-beta.75",
26
+ "@dt-dds/react-dropdown": "1.0.0-beta.77",
27
27
  "@dt-dds/react-icon": "1.0.0-beta.54",
28
28
  "@dt-dds/react-icon-button": "1.0.0-beta.20",
29
29
  "@dt-dds/react-label-field": "1.0.0-beta.52",