@dt-dds/react-select 1.0.0-beta.71 → 1.0.0-beta.73

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @dt-ui/react-select
 
+## 1.0.0-beta.73
+
+### Minor Changes
+
+- feat: enable HTML attrs on select props
+
+### Patch Changes
+
+- refactor: simplify dropdown types
+- Updated dependencies [223664b]
+- Updated dependencies
+  - @dt-dds/react-box@1.0.0-beta.61
+  - @dt-dds/react-dropdown@1.0.0-beta.82
+
+## 1.0.0-beta.72
+
+### Minor Changes
+
+- feat(core): share responsive HOC from core package
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-core@1.0.0-beta.53
+  - @dt-dds/react-checkbox@1.0.0-beta.54
+  - @dt-dds/react-dropdown@1.0.0-beta.81
+  - @dt-dds/react-icon@1.0.0-beta.56
+  - @dt-dds/react-label-field@1.0.0-beta.54
+  - @dt-dds/react-icon-button@1.0.0-beta.22
+  - @dt-dds/react-tooltip@1.0.0-beta.62
+  - @dt-dds/react-typography@1.0.0-beta.44
+  - @dt-dds/react-box@1.0.0-beta.60
+
 ## 1.0.0-beta.71
 
 ### Minor Changes

package/README.md

@@ -62,6 +62,7 @@ export const App = () => {
 | `style`           | `React.CSSProperties`      | —                           | Inline styles applied to the Select wrapper.                                        |
 | `dataTestId`      | `string`                   | `'select'`                  | Test identifier applied to the component container.                                 |
 | `children`        | `ReactNode`                | —                           | Typically a list of `Select.Option`.                                                |
+| `...rest`         | `HTMLAttributes`           | —                           | Standard HTML attributes.                                                           |
 
 ### Select.Option
 

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { CustomTheme } from '@dt-dds/themes';
-import { ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -18,7 +18,7 @@ type SelectOptionValue = {
 type SelectVariant = 'outlined' | 'bottom-line';
 type SelectFill = 'default' | 'contrast' | 'light';
 
-interface BaseSelectProps extends BaseProps {
+interface BaseSelectProps extends BaseProps, Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     helperText?: ReactNode;
     hasError?: boolean;
     label: string;
@@ -43,7 +43,7 @@ interface MultiSelectProps extends BaseSelectProps {
 }
 type SelectProps = SingleSelectProps | MultiSelectProps;
 declare const Select: {
-    ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, placeholder, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
+    ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, placeholder, onChange, onBlur, onFocus, ...rest }: SelectProps): react_jsx_runtime.JSX.Element;
     Option: ({ dataTestId, index, children, style, value, isDisabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { CustomTheme } from '@dt-dds/themes';
-import { ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -18,7 +18,7 @@ type SelectOptionValue = {
 type SelectVariant = 'outlined' | 'bottom-line';
 type SelectFill = 'default' | 'contrast' | 'light';
 
-interface BaseSelectProps extends BaseProps {
+interface BaseSelectProps extends BaseProps, Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     helperText?: ReactNode;
     hasError?: boolean;
     label: string;
@@ -43,7 +43,7 @@ interface MultiSelectProps extends BaseSelectProps {
 }
 type SelectProps = SingleSelectProps | MultiSelectProps;
 declare const Select: {
-    ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, placeholder, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
+    ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, placeholder, onChange, onBlur, onFocus, ...rest }: SelectProps): react_jsx_runtime.JSX.Element;
     Option: ({ dataTestId, index, children, style, value, isDisabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.js

@@ -278,26 +278,49 @@ var SelectDropdownStyled = (0, import_styled2.default)(import_react_dropdown2.Dr
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var { useSelect } = Downshift;
 var helperTextId = "helper-text-id";
-var Select = ({
-  dataTestId,
-  style,
-  value,
-  label,
-  isMulti,
-  isRequired,
-  children,
-  isDisabled,
-  labelIcon,
-  hasError = false,
-  helperText = "",
-  variant = "outlined",
-  fill = "default",
-  isFloatingLabel = true,
-  scale = "standard",
-  placeholder = "",
-  onChange
-}) => {
-  var _a;
+var Select = (_a) => {
+  var _b = _a, {
+    dataTestId,
+    style,
+    value,
+    label,
+    isMulti,
+    isRequired,
+    children,
+    isDisabled,
+    labelIcon,
+    hasError = false,
+    helperText = "",
+    variant = "outlined",
+    fill = "default",
+    isFloatingLabel = true,
+    scale = "standard",
+    placeholder = "",
+    onChange,
+    onBlur,
+    onFocus
+  } = _b, rest = __objRest(_b, [
+    "dataTestId",
+    "style",
+    "value",
+    "label",
+    "isMulti",
+    "isRequired",
+    "children",
+    "isDisabled",
+    "labelIcon",
+    "hasError",
+    "helperText",
+    "variant",
+    "fill",
+    "isFloatingLabel",
+    "scale",
+    "placeholder",
+    "onChange",
+    "onBlur",
+    "onFocus"
+  ]);
+  var _a2;
   const anchorRef = (0, import_react2.useRef)(null);
   const handleClearKeyDown = (e) => {
     if (e.code === "Enter" || e.code === "Space") {
@@ -309,19 +332,19 @@ var Select = ({
     isMulti && (onChange == null ? void 0 : onChange([]));
   };
   const options = (0, import_react2.useMemo)(() => {
-    var _a2;
+    var _a3;
     const tempOptions = import_react2.Children.map(children, (child) => {
-      var _a3, _b, _c;
+      var _a4, _b2, _c;
       if ((0, import_react2.isValidElement)(child) && child.props.value != void 0) {
         return {
           value: child.props.value,
           isDisabled: child.props.isDisabled,
-          label: (_c = (_a3 = child.props) == null ? void 0 : _a3.valueLabel) != null ? _c : (_b = child.props) == null ? void 0 : _b.children
+          label: (_c = (_a4 = child.props) == null ? void 0 : _a4.valueLabel) != null ? _c : (_b2 = child.props) == null ? void 0 : _b2.children
         };
       }
       return null;
     });
-    return (_a2 = tempOptions == null ? void 0 : tempOptions.filter(Boolean)) != null ? _a2 : [];
+    return (_a3 = tempOptions == null ? void 0 : tempOptions.filter(Boolean)) != null ? _a3 : [];
   }, [children]);
   const selectedOptionsSet = (0, import_react2.useMemo)(
     () => new Set(value ? [value].flat() : []),
@@ -334,11 +357,11 @@ var Select = ({
   const hasSelectedItems = !!(selectedItems == null ? void 0 : selectedItems.length);
   const isPlaceholderValue = !selectedItems.length && !isFloatingLabel;
   const getSelectContainerText = () => {
-    var _a2;
+    var _a3;
     if (isPlaceholderValue) {
       return placeholder;
     }
-    return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a2 = selectedItems[0]) == null ? void 0 : _a2.label;
+    return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a3 = selectedItems[0]) == null ? void 0 : _a3.label;
   };
   const selectStateReducer = (state, actionAndChanges) => {
     const { changes, type } = actionAndChanges;
@@ -389,7 +412,7 @@ var Select = ({
       return !!(item == null ? void 0 : item.isDisabled);
     },
     defaultHighlightedIndex: isMulti || !(selectedItems == null ? void 0 : selectedItems[0]) ? 0 : void 0,
-    selectedItem: !isMulti ? (_a = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a : null : null,
+    selectedItem: !isMulti ? (_a2 = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a2 : null : null,
     stateReducer: selectStateReducer,
     onSelectedItemChange: handleSelectedItemChange
   });
@@ -403,7 +426,9 @@ var Select = ({
   const toggleProps = getToggleButtonProps({
     disabled,
     tabIndex: disabled ? -1 : 0,
-    ref: anchorRef
+    ref: anchorRef,
+    onBlur,
+    onFocus
   });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     SelectProvider,
@@ -416,9 +441,10 @@ var Select = ({
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         import_react_box.Box,
-        {
+        __spreadProps(__spreadValues({
           dataTestId: dataTestId != null ? dataTestId : "select",
-          style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style),
+          style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style)
+        }, rest), {
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectStyled, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -512,7 +538,7 @@ var Select = ({
               })
             )
           ]
-        }
+        })
       )
     }
   );

package/dist/index.mjs

@@ -250,26 +250,49 @@ var SelectDropdownStyled = styled2(Dropdown2)`
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var { useSelect } = Downshift;
 var helperTextId = "helper-text-id";
-var Select = ({
-  dataTestId,
-  style,
-  value,
-  label,
-  isMulti,
-  isRequired,
-  children,
-  isDisabled,
-  labelIcon,
-  hasError = false,
-  helperText = "",
-  variant = "outlined",
-  fill = "default",
-  isFloatingLabel = true,
-  scale = "standard",
-  placeholder = "",
-  onChange
-}) => {
-  var _a;
+var Select = (_a) => {
+  var _b = _a, {
+    dataTestId,
+    style,
+    value,
+    label,
+    isMulti,
+    isRequired,
+    children,
+    isDisabled,
+    labelIcon,
+    hasError = false,
+    helperText = "",
+    variant = "outlined",
+    fill = "default",
+    isFloatingLabel = true,
+    scale = "standard",
+    placeholder = "",
+    onChange,
+    onBlur,
+    onFocus
+  } = _b, rest = __objRest(_b, [
+    "dataTestId",
+    "style",
+    "value",
+    "label",
+    "isMulti",
+    "isRequired",
+    "children",
+    "isDisabled",
+    "labelIcon",
+    "hasError",
+    "helperText",
+    "variant",
+    "fill",
+    "isFloatingLabel",
+    "scale",
+    "placeholder",
+    "onChange",
+    "onBlur",
+    "onFocus"
+  ]);
+  var _a2;
   const anchorRef = useRef(null);
   const handleClearKeyDown = (e) => {
     if (e.code === "Enter" || e.code === "Space") {
@@ -281,19 +304,19 @@ var Select = ({
     isMulti && (onChange == null ? void 0 : onChange([]));
   };
   const options = useMemo(() => {
-    var _a2;
+    var _a3;
     const tempOptions = Children.map(children, (child) => {
-      var _a3, _b, _c;
+      var _a4, _b2, _c;
       if (isValidElement(child) && child.props.value != void 0) {
         return {
           value: child.props.value,
           isDisabled: child.props.isDisabled,
-          label: (_c = (_a3 = child.props) == null ? void 0 : _a3.valueLabel) != null ? _c : (_b = child.props) == null ? void 0 : _b.children
+          label: (_c = (_a4 = child.props) == null ? void 0 : _a4.valueLabel) != null ? _c : (_b2 = child.props) == null ? void 0 : _b2.children
         };
       }
       return null;
     });
-    return (_a2 = tempOptions == null ? void 0 : tempOptions.filter(Boolean)) != null ? _a2 : [];
+    return (_a3 = tempOptions == null ? void 0 : tempOptions.filter(Boolean)) != null ? _a3 : [];
   }, [children]);
   const selectedOptionsSet = useMemo(
     () => new Set(value ? [value].flat() : []),
@@ -306,11 +329,11 @@ var Select = ({
   const hasSelectedItems = !!(selectedItems == null ? void 0 : selectedItems.length);
   const isPlaceholderValue = !selectedItems.length && !isFloatingLabel;
   const getSelectContainerText = () => {
-    var _a2;
+    var _a3;
     if (isPlaceholderValue) {
       return placeholder;
     }
-    return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a2 = selectedItems[0]) == null ? void 0 : _a2.label;
+    return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a3 = selectedItems[0]) == null ? void 0 : _a3.label;
   };
   const selectStateReducer = (state, actionAndChanges) => {
     const { changes, type } = actionAndChanges;
@@ -361,7 +384,7 @@ var Select = ({
       return !!(item == null ? void 0 : item.isDisabled);
     },
     defaultHighlightedIndex: isMulti || !(selectedItems == null ? void 0 : selectedItems[0]) ? 0 : void 0,
-    selectedItem: !isMulti ? (_a = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a : null : null,
+    selectedItem: !isMulti ? (_a2 = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a2 : null : null,
     stateReducer: selectStateReducer,
     onSelectedItemChange: handleSelectedItemChange
   });
@@ -375,7 +398,9 @@ var Select = ({
   const toggleProps = getToggleButtonProps({
     disabled,
     tabIndex: disabled ? -1 : 0,
-    ref: anchorRef
+    ref: anchorRef,
+    onBlur,
+    onFocus
   });
   return /* @__PURE__ */ jsx3(
     SelectProvider,
@@ -388,9 +413,10 @@ var Select = ({
       },
       children: /* @__PURE__ */ jsxs(
         Box,
-        {
+        __spreadProps(__spreadValues({
           dataTestId: dataTestId != null ? dataTestId : "select",
-          style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style),
+          style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style)
+        }, rest), {
           children: [
             /* @__PURE__ */ jsxs(SelectStyled, { children: [
               /* @__PURE__ */ jsx3(
@@ -484,7 +510,7 @@ var Select = ({
               })
             )
           ]
-        }
+        })
       )
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-select",
-  "version": "1.0.0-beta.71",
+  "version": "1.0.0-beta.73",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,15 +20,15 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-box": "1.0.0-beta.59",
-    "@dt-dds/react-checkbox": "1.0.0-beta.53",
-    "@dt-dds/react-core": "1.0.0-beta.52",
-    "@dt-dds/react-dropdown": "1.0.0-beta.80",
-    "@dt-dds/react-icon": "1.0.0-beta.55",
-    "@dt-dds/react-icon-button": "1.0.0-beta.21",
-    "@dt-dds/react-label-field": "1.0.0-beta.53",
-    "@dt-dds/react-tooltip": "1.0.0-beta.61",
-    "@dt-dds/react-typography": "1.0.0-beta.43",
+    "@dt-dds/react-box": "1.0.0-beta.61",
+    "@dt-dds/react-checkbox": "1.0.0-beta.54",
+    "@dt-dds/react-core": "1.0.0-beta.53",
+    "@dt-dds/react-dropdown": "1.0.0-beta.82",
+    "@dt-dds/react-icon": "1.0.0-beta.56",
+    "@dt-dds/react-icon-button": "1.0.0-beta.22",
+    "@dt-dds/react-label-field": "1.0.0-beta.54",
+    "@dt-dds/react-tooltip": "1.0.0-beta.62",
+    "@dt-dds/react-typography": "1.0.0-beta.44",
     "@dt-dds/themes": "1.0.0-beta.10",
     "downshift": "^9.0.10"
   },