@dt-dds/react-select 1.0.0-beta.64 → 1.0.0-beta.65

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @dt-ui/react-select
 
+## 1.0.0-beta.65
+
+### Minor Changes
+
+- feat: add placeholder to select
+- feat: remove styles from Dropdown
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-dropdown@1.0.0-beta.74
+  - @dt-dds/react-box@1.0.0-beta.53
+
 ## 1.0.0-beta.64
 
 ### Patch Changes

package/README.md

@@ -45,7 +45,8 @@ export const App = () => {
 
 | Property          | Type                       | Default                     | Description                                                                         |
 | ----------------- | -------------------------- | --------------------------- | ----------------------------------------------------------------------------------- |
-| `label`           | `string`                   | —                           | Field label to give context to the selection.                                       |
+| `label`           | `string`                   | —                           | A label to help users understand the scope of the select field.                     |
+| `placeholder`     | `string`                   | —                           | A placeholder to help users understand the scope of the select field.               |
 | `value`           | `string`                   | `string[]`                  | Controlled value. A string for single-select; an array of strings for multi-select. |
 | `onChange`        | `(value: string) => void`  | `(value: string[]) => void` | Called when the selection changes (string in single mode; array in multi mode).     |
 | `isMulti`         | `boolean`                  | `false`                     | Toggles between single and multiple selection.                                      |

package/dist/index.d.mts

@@ -28,6 +28,7 @@ interface BaseSelectProps extends BaseProps {
     isFloatingLabel?: boolean;
     scale?: Scale;
     labelIcon?: ReactNode;
+    placeholder?: string;
 }
 interface SingleSelectProps extends BaseSelectProps {
     isMulti?: false;
@@ -41,7 +42,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, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
+    ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, placeholder, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
     Option: ({ dataTestId, index, children, style, value, isDisabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.d.ts

@@ -28,6 +28,7 @@ interface BaseSelectProps extends BaseProps {
     isFloatingLabel?: boolean;
     scale?: Scale;
     labelIcon?: ReactNode;
+    placeholder?: string;
 }
 interface SingleSelectProps extends BaseSelectProps {
     isMulti?: false;
@@ -41,7 +42,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, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
+    ({ dataTestId, style, value, label, isMulti, isRequired, children, isDisabled, labelIcon, hasError, helperText, variant, fill, isFloatingLabel, scale, placeholder, onChange, }: SelectProps): react_jsx_runtime.JSX.Element;
     Option: ({ dataTestId, index, children, style, value, isDisabled, }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.js

@@ -65,7 +65,6 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Select.tsx
 var import_react_box = require("@dt-dds/react-box");
-var import_react_dropdown2 = require("@dt-dds/react-dropdown");
 var import_react_icon = require("@dt-dds/react-icon");
 var import_react_icon_button = require("@dt-dds/react-icon-button");
 var import_react_label_field = require("@dt-dds/react-label-field");
@@ -164,6 +163,7 @@ var SelectOption = ({
 };
 
 // src/Select.styled.ts
+var import_react_dropdown2 = require("@dt-dds/react-dropdown");
 var import_react_typography = require("@dt-dds/react-typography");
 var import_styled2 = __toESM(require("@emotion/styled"));
 var SelectStyled = import_styled2.default.div`
@@ -263,6 +263,16 @@ var TypographyHelperTextStyled = (0, import_styled2.default)(import_react_typogr
     padding-left: ${theme.spacing.spacing_40};
   `}
 `;
+var SelectDropdownStyled = (0, import_styled2.default)(import_react_dropdown2.Dropdown)`
+  max-height: 200px;
+
+  ${({ theme }) => `
+    padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
+    background-color: ${theme.palette.surface.contrast};
+    border-radius: ${theme.shape.dropdown};
+    border: 1px solid ${theme.palette.border.medium};
+  `}
+`;
 
 // src/Select.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -284,6 +294,7 @@ var Select = ({
   fill = "default",
   isFloatingLabel = true,
   scale = "standard",
+  placeholder = "",
   onChange
 }) => {
   var _a;
@@ -320,8 +331,12 @@ var Select = ({
     [options, selectedOptionsSet]
   );
   const hasSelectedItems = !!(selectedItems == null ? void 0 : selectedItems.length);
-  const selectedValueContainerText = () => {
+  const isPlaceholderValue = !selectedItems.length && !isFloatingLabel;
+  const getSelectContainerText = () => {
     var _a2;
+    if (isPlaceholderValue) {
+      return placeholder;
+    }
     return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a2 = selectedItems[0]) == null ? void 0 : _a2.label;
   };
   const {
@@ -424,14 +439,14 @@ var Select = ({
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       TypographyValueStyled,
                       __spreadProps(__spreadValues({
-                        color: "content.default",
+                        color: isPlaceholderValue ? "content.medium" : "content.default",
                         dataTestId: "select-value",
                         element: "span",
                         fontStyles: "bodyMdRegular",
                         isFloatingLabel,
                         scale
                       }, disabled && { color: "content.light" }), {
-                        children: selectedValueContainerText()
+                        children: getSelectContainerText()
                       })
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -474,14 +489,13 @@ var Select = ({
               }
             ) : null,
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_react_dropdown2.Dropdown,
+              SelectDropdownStyled,
               __spreadProps(__spreadValues({}, getMenuProps()), {
                 anchorRef,
                 "aria-multiselectable": isMulti,
                 as: "ul",
                 isOpen,
                 onClose: closeMenu,
-                style: { maxHeight: 200 },
                 children
               })
             )

package/dist/index.mjs

@@ -32,7 +32,6 @@ var __objRest = (source, exclude) => {
 
 // src/Select.tsx
 import { Box } from "@dt-dds/react-box";
-import { Dropdown as Dropdown2 } from "@dt-dds/react-dropdown";
 import { Icon } from "@dt-dds/react-icon";
 import { IconButton } from "@dt-dds/react-icon-button";
 import { LabelField } from "@dt-dds/react-label-field";
@@ -136,6 +135,7 @@ var SelectOption = ({
 };
 
 // src/Select.styled.ts
+import { Dropdown as Dropdown2 } from "@dt-dds/react-dropdown";
 import { Typography } from "@dt-dds/react-typography";
 import styled2 from "@emotion/styled";
 var SelectStyled = styled2.div`
@@ -235,6 +235,16 @@ var TypographyHelperTextStyled = styled2(Typography)`
     padding-left: ${theme.spacing.spacing_40};
   `}
 `;
+var SelectDropdownStyled = styled2(Dropdown2)`
+  max-height: 200px;
+
+  ${({ theme }) => `
+    padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
+    background-color: ${theme.palette.surface.contrast};
+    border-radius: ${theme.shape.dropdown};
+    border: 1px solid ${theme.palette.border.medium};
+  `}
+`;
 
 // src/Select.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
@@ -256,6 +266,7 @@ var Select = ({
   fill = "default",
   isFloatingLabel = true,
   scale = "standard",
+  placeholder = "",
   onChange
 }) => {
   var _a;
@@ -292,8 +303,12 @@ var Select = ({
     [options, selectedOptionsSet]
   );
   const hasSelectedItems = !!(selectedItems == null ? void 0 : selectedItems.length);
-  const selectedValueContainerText = () => {
+  const isPlaceholderValue = !selectedItems.length && !isFloatingLabel;
+  const getSelectContainerText = () => {
     var _a2;
+    if (isPlaceholderValue) {
+      return placeholder;
+    }
     return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a2 = selectedItems[0]) == null ? void 0 : _a2.label;
   };
   const {
@@ -396,14 +411,14 @@ var Select = ({
                     /* @__PURE__ */ jsx3(
                       TypographyValueStyled,
                       __spreadProps(__spreadValues({
-                        color: "content.default",
+                        color: isPlaceholderValue ? "content.medium" : "content.default",
                         dataTestId: "select-value",
                         element: "span",
                         fontStyles: "bodyMdRegular",
                         isFloatingLabel,
                         scale
                       }, disabled && { color: "content.light" }), {
-                        children: selectedValueContainerText()
+                        children: getSelectContainerText()
                       })
                     ),
                     /* @__PURE__ */ jsxs(
@@ -446,14 +461,13 @@ var Select = ({
               }
             ) : null,
             /* @__PURE__ */ jsx3(
-              Dropdown2,
+              SelectDropdownStyled,
               __spreadProps(__spreadValues({}, getMenuProps()), {
                 anchorRef,
                 "aria-multiselectable": isMulti,
                 as: "ul",
                 isOpen,
                 onClose: closeMenu,
-                style: { maxHeight: 200 },
                 children
               })
             )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-select",
-  "version": "1.0.0-beta.64",
+  "version": "1.0.0-beta.65",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,10 +20,10 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-box": "1.0.0-beta.52",
+    "@dt-dds/react-box": "1.0.0-beta.53",
     "@dt-dds/react-checkbox": "1.0.0-beta.52",
     "@dt-dds/react-core": "1.0.0-beta.51",
-    "@dt-dds/react-dropdown": "1.0.0-beta.73",
+    "@dt-dds/react-dropdown": "1.0.0-beta.74",
     "@dt-dds/react-icon": "1.0.0-beta.54",
     "@dt-dds/react-icon-button": "1.0.0-beta.20",
     "@dt-dds/react-label-field": "1.0.0-beta.52",