@elliemae/ds-form-native-select 3.26.0-next.11

package/dist/cjs/NativeSelect.js

@@ -0,0 +1,75 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NativeSelect_exports = {};
+__export(NativeSelect_exports, {
+  DSNativeSelect: () => DSNativeSelect,
+  DSNativeSelectWithSchema: () => DSNativeSelectWithSchema
+});
+module.exports = __toCommonJS(NativeSelect_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lodash = require("lodash");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_styled = require("./styled.js");
+const propTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  hasError: import_ds_props_helpers.PropTypes.bool.description("whether the input has an error").defaultValue(false),
+  disabled: import_ds_props_helpers.PropTypes.bool.description("whether the input is disabled").defaultValue(false),
+  children: import_ds_props_helpers.PropTypes.node.description("options to be rendered in the select")
+};
+const DSNativeSelect = (props) => {
+  const { hasError, disabled, children } = props;
+  const getOwnerProps = (0, import_react.useCallback)(() => props, [props]);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
+  const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
+  const { id, required, size, ...globalAttributes } = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(props), ["rows", "cols", "wrap"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledControlsWrapper, { disabled, hasError, ...xStyledProps, ...globalAttributes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.StyledSelect,
+      {
+        id,
+        disabled,
+        required,
+        size,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledDropDownButton, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {}) })
+  ] });
+};
+DSNativeSelect.displayName = "DSNativeSelect";
+DSNativeSelect.propTypes = propTypes;
+const DSNativeSelectWithSchema = (0, import_ds_props_helpers.describe)(DSNativeSelect);
+DSNativeSelectWithSchema.propTypes = propTypes;
+//# sourceMappingURL=NativeSelect.js.map

package/dist/cjs/NativeSelect.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/NativeSelect.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable no-unused-vars */\nimport React, { type WeakValidationMap, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport {\n  useGetGlobalAttributes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  useGetXstyledProps,\n  describe,\n  PropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from './styled.js';\n\ninterface Props {\n  hasError: boolean;\n  disabled: boolean;\n  children: React.ReactNode;\n}\n\nconst propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  hasError: PropTypes.bool.description('whether the input has an error').defaultValue(false),\n  disabled: PropTypes.bool.description('whether the input is disabled').defaultValue(false),\n  children: PropTypes.node.description('options to be rendered in the select'),\n};\n\nconst DSNativeSelect: React.ComponentType<Props> = (props) => {\n  const { hasError, disabled, children } = props;\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  const xStyledProps = useGetXstyledProps(props);\n  const { id, required, size, ...globalAttributes } = omit(useGetGlobalAttributes(props), ['rows', 'cols', 'wrap']);\n  return (\n    <StyledControlsWrapper disabled={disabled} hasError={hasError} {...xStyledProps} {...globalAttributes}>\n      <StyledSelect\n        id={id}\n        disabled={disabled}\n        required={required}\n        size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledSelect>\n      <StyledDropDownButton justifyContent=\"center\" alignItems=\"center\">\n        <ChevronSmallDown />\n      </StyledDropDownButton>\n    </StyledControlsWrapper>\n  );\n};\n\nDSNativeSelect.displayName = 'DSNativeSelect';\n\nDSNativeSelect.propTypes = propTypes as WeakValidationMap<unknown>;\nconst DSNativeSelectWithSchema = describe(DSNativeSelect);\nDSNativeSelectWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSNativeSelect, DSNativeSelectWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AApCJ,mBAA2D;AAC3D,oBAAqB;AACrB,sBAAiC;AACjC,8BAOO;AACP,oBAA0E;AAQ1E,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACzF,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAC7E;AAEA,MAAM,iBAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AAEzC,QAAM,oBAAgB,0BAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,mBAAe,4CAAmB,KAAK;AAC7C,QAAM,EAAE,IAAI,UAAU,MAAM,GAAG,iBAAiB,QAAI,wBAAK,gDAAuB,KAAK,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AAChH,SACE,6CAAC,uCAAsB,UAAoB,UAAqB,GAAG,cAAe,GAAG,kBACnF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,4CAAC,sCAAqB,gBAAe,UAAS,YAAW,UACvD,sDAAC,oCAAiB,GACpB;AAAA,KACF;AAEJ;AAEA,eAAe,cAAc;AAE7B,eAAe,YAAY;AAC3B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "names": []
+}

package/dist/cjs/NativeSelectDefinitions.js

@@ -0,0 +1,42 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NativeSelectDefinitions_exports = {};
+__export(NativeSelectDefinitions_exports, {
+  DSNativeSelectName: () => DSNativeSelectName,
+  DSNativeSelectSlots: () => DSNativeSelectSlots
+});
+module.exports = __toCommonJS(NativeSelectDefinitions_exports);
+var React = __toESM(require("react"));
+const DSNativeSelectName = "DSNativeSelect";
+const DSNativeSelectSlots = {
+  CONTAINER: "root",
+  INPUT: "input",
+  DROP_INDICATOR: "drop-indicator"
+};
+//# sourceMappingURL=NativeSelectDefinitions.js.map

package/dist/cjs/NativeSelectDefinitions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/NativeSelectDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const DSNativeSelectName = 'DSNativeSelect';\n\nexport const DSNativeSelectSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  DROP_INDICATOR: 'drop-indicator',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,gBAAgB;AAClB;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+var React = __toESM(require("react"));
+__reExport(src_exports, require("./NativeSelect.js"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './NativeSelect.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,8BAAd;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/styled.js

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledControlsWrapper: () => StyledControlsWrapper,
+  StyledDropDownButton: () => StyledDropDownButton,
+  StyledSelect: () => StyledSelect
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_NativeSelectDefinitions = require("./NativeSelectDefinitions.js");
+const normalBorder = import_ds_system.css`
+  border: 1px solid ${({ hasError, theme }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+`;
+const focusBorder = import_ds_system.css`
+  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+  outline-offset: -2px;
+`;
+const hoverBorder = import_ds_system.css`
+  border: 1px solid ${({ theme }) => theme.colors.brand[700]};
+`;
+const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_NativeSelectDefinitions.DSNativeSelectName,
+  slot: import_NativeSelectDefinitions.DSNativeSelectSlots.CONTAINER
+})`
+  background: ${({ disabled, theme }) => disabled ? theme.colors.neutral["080"] : "#ffffff"};
+  position: relative;
+  border-radius: 2px;
+  align-items: center;
+  align-content: center;
+  height: 28px;
+  ${normalBorder}
+  &:hover {
+    ${({ disabled }) => !disabled ? hoverBorder : ""}
+  }
+  &:focus-within {
+    ${focusBorder}
+  }
+`;
+const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_NativeSelectDefinitions.DSNativeSelectName,
+  slot: import_NativeSelectDefinitions.DSNativeSelectSlots.DROP_INDICATOR
+})`
+  position: absolute;
+  right: 0;
+  height: 100%;
+  cursor: pointer;
+  width: 28px;
+  z-index: 1;
+`;
+const StyledSelect = (0, import_ds_system.styled)("select", {
+  name: import_NativeSelectDefinitions.DSNativeSelectName,
+  slot: import_NativeSelectDefinitions.DSNativeSelectSlots.INPUT
+})`
+  height: 28px;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  color: ${({ theme }) => theme.colors.neutral["700"]};
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 100%;
+  text-align: left;
+  &:disabled {
+    color: ${({ theme }) => theme.colors.neutral["400"]};
+    cursor: not-allowed;
+  }
+  z-index: 2;
+  padding-left: 8px;
+  padding-right: 28px;
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSNativeSelectSlots, DSNativeSelectName } from './NativeSelectDefinitions.js';\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.CONTAINER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n  position: relative;\n  border-radius: 2px;\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  ${normalBorder}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledDropDownButton = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.DROP_INDICATOR,\n})`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  cursor: pointer;\n  width: 28px;\n  z-index: 1;\n`;\n\nexport const StyledSelect = styled('select', {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.INPUT,\n})`\n  height: 28px;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  cursor: pointer;\n  outline: none;\n  padding: 0;\n  width: 100%;\n  text-align: left;\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral['400']};\n    cursor: not-allowed;\n  }\n  z-index: 2;\n  padding-left: 8px;\n  padding-right: 28px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAqB;AACrB,qCAAwD;AAKxD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,mDAAoB;AAC5B,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/E;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mDAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,mBAAe,yBAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,mDAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/NativeSelect.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { omit } from "lodash";
+import { ChevronSmallDown } from "@elliemae/ds-icons";
+import {
+  useGetGlobalAttributes,
+  globalAttributesPropTypes,
+  xstyledPropTypes,
+  useGetXstyledProps,
+  describe,
+  PropTypes
+} from "@elliemae/ds-props-helpers";
+import { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from "./styled.js";
+const propTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  hasError: PropTypes.bool.description("whether the input has an error").defaultValue(false),
+  disabled: PropTypes.bool.description("whether the input is disabled").defaultValue(false),
+  children: PropTypes.node.description("options to be rendered in the select")
+};
+const DSNativeSelect = (props) => {
+  const { hasError, disabled, children } = props;
+  const getOwnerProps = useCallback(() => props, [props]);
+  const getOwnerPropsArguments = useCallback(() => ({}), []);
+  const xStyledProps = useGetXstyledProps(props);
+  const { id, required, size, ...globalAttributes } = omit(useGetGlobalAttributes(props), ["rows", "cols", "wrap"]);
+  return /* @__PURE__ */ jsxs(StyledControlsWrapper, { disabled, hasError, ...xStyledProps, ...globalAttributes, children: [
+    /* @__PURE__ */ jsx(
+      StyledSelect,
+      {
+        id,
+        disabled,
+        required,
+        size,
+        getOwnerProps,
+        getOwnerPropsArguments,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(StyledDropDownButton, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx(ChevronSmallDown, {}) })
+  ] });
+};
+DSNativeSelect.displayName = "DSNativeSelect";
+DSNativeSelect.propTypes = propTypes;
+const DSNativeSelectWithSchema = describe(DSNativeSelect);
+DSNativeSelectWithSchema.propTypes = propTypes;
+export {
+  DSNativeSelect,
+  DSNativeSelectWithSchema
+};
+//# sourceMappingURL=NativeSelect.js.map

package/dist/esm/NativeSelect.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/NativeSelect.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport React, { type WeakValidationMap, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport {\n  useGetGlobalAttributes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  useGetXstyledProps,\n  describe,\n  PropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from './styled.js';\n\ninterface Props {\n  hasError: boolean;\n  disabled: boolean;\n  children: React.ReactNode;\n}\n\nconst propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  hasError: PropTypes.bool.description('whether the input has an error').defaultValue(false),\n  disabled: PropTypes.bool.description('whether the input is disabled').defaultValue(false),\n  children: PropTypes.node.description('options to be rendered in the select'),\n};\n\nconst DSNativeSelect: React.ComponentType<Props> = (props) => {\n  const { hasError, disabled, children } = props;\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  const xStyledProps = useGetXstyledProps(props);\n  const { id, required, size, ...globalAttributes } = omit(useGetGlobalAttributes(props), ['rows', 'cols', 'wrap']);\n  return (\n    <StyledControlsWrapper disabled={disabled} hasError={hasError} {...xStyledProps} {...globalAttributes}>\n      <StyledSelect\n        id={id}\n        disabled={disabled}\n        required={required}\n        size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledSelect>\n      <StyledDropDownButton justifyContent=\"center\" alignItems=\"center\">\n        <ChevronSmallDown />\n      </StyledDropDownButton>\n    </StyledControlsWrapper>\n  );\n};\n\nDSNativeSelect.displayName = 'DSNativeSelect';\n\nDSNativeSelect.propTypes = propTypes as WeakValidationMap<unknown>;\nconst DSNativeSelectWithSchema = describe(DSNativeSelect);\nDSNativeSelectWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSNativeSelect, DSNativeSelectWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCnB,SACE,KADF;AApCJ,SAAwC,mBAAmB;AAC3D,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,sBAAsB,oBAAoB;AAQ1E,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACzF,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAC7E;AAEA,MAAM,iBAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AAEzC,QAAM,gBAAgB,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,EAAE,IAAI,UAAU,MAAM,GAAG,iBAAiB,IAAI,KAAK,uBAAuB,KAAK,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AAChH,SACE,qBAAC,yBAAsB,UAAoB,UAAqB,GAAG,cAAe,GAAG,kBACnF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,wBAAqB,gBAAe,UAAS,YAAW,UACvD,8BAAC,oBAAiB,GACpB;AAAA,KACF;AAEJ;AAEA,eAAe,cAAc;AAE7B,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "names": []
+}

package/dist/esm/NativeSelectDefinitions.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const DSNativeSelectName = "DSNativeSelect";
+const DSNativeSelectSlots = {
+  CONTAINER: "root",
+  INPUT: "input",
+  DROP_INDICATOR: "drop-indicator"
+};
+export {
+  DSNativeSelectName,
+  DSNativeSelectSlots
+};
+//# sourceMappingURL=NativeSelectDefinitions.js.map

package/dist/esm/NativeSelectDefinitions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/NativeSelectDefinitions.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSNativeSelectName = 'DSNativeSelect';\n\nexport const DSNativeSelectSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  DROP_INDICATOR: 'drop-indicator',\n} as const;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,gBAAgB;AAClB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./NativeSelect.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NativeSelect.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/styled.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { styled, css } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSNativeSelectSlots, DSNativeSelectName } from "./NativeSelectDefinitions.js";
+const normalBorder = css`
+  border: 1px solid ${({ hasError, theme }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+`;
+const focusBorder = css`
+  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+  outline-offset: -2px;
+`;
+const hoverBorder = css`
+  border: 1px solid ${({ theme }) => theme.colors.brand[700]};
+`;
+const StyledControlsWrapper = styled(Grid, {
+  name: DSNativeSelectName,
+  slot: DSNativeSelectSlots.CONTAINER
+})`
+  background: ${({ disabled, theme }) => disabled ? theme.colors.neutral["080"] : "#ffffff"};
+  position: relative;
+  border-radius: 2px;
+  align-items: center;
+  align-content: center;
+  height: 28px;
+  ${normalBorder}
+  &:hover {
+    ${({ disabled }) => !disabled ? hoverBorder : ""}
+  }
+  &:focus-within {
+    ${focusBorder}
+  }
+`;
+const StyledDropDownButton = styled(Grid, {
+  name: DSNativeSelectName,
+  slot: DSNativeSelectSlots.DROP_INDICATOR
+})`
+  position: absolute;
+  right: 0;
+  height: 100%;
+  cursor: pointer;
+  width: 28px;
+  z-index: 1;
+`;
+const StyledSelect = styled("select", {
+  name: DSNativeSelectName,
+  slot: DSNativeSelectSlots.INPUT
+})`
+  height: 28px;
+  appearance: none;
+  background-color: transparent;
+  border: none;
+  color: ${({ theme }) => theme.colors.neutral["700"]};
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 100%;
+  text-align: left;
+  &:disabled {
+    color: ${({ theme }) => theme.colors.neutral["400"]};
+    cursor: not-allowed;
+  }
+  z-index: 2;
+  padding-left: 8px;
+  padding-right: 28px;
+`;
+export {
+  StyledControlsWrapper,
+  StyledDropDownButton,
+  StyledSelect
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSNativeSelectSlots, DSNativeSelectName } from './NativeSelectDefinitions.js';\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n`;\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.CONTAINER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n  position: relative;\n  border-radius: 2px;\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  ${normalBorder}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledDropDownButton = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.DROP_INDICATOR,\n})`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  cursor: pointer;\n  width: 28px;\n  z-index: 1;\n`;\n\nexport const StyledSelect = styled('select', {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.INPUT,\n})`\n  height: 28px;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  cursor: pointer;\n  outline: none;\n  padding: 0;\n  width: 100%;\n  text-align: left;\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral['400']};\n    cursor: not-allowed;\n  }\n  z-index: 2;\n  padding-left: 8px;\n  padding-right: 28px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,qBAAqB,0BAA0B;AAKxD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAE9G,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI5D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAEpD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/E;AAAA;AAAA,MAEE,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc;AAAA;AAAA;AAAA,MAG7C;AAAA;AAAA;AAIC,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,eAAe,OAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/types/NativeSelect.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    hasError: boolean;
+    disabled: boolean;
+    children: React.ReactNode;
+}
+declare const DSNativeSelect: React.ComponentType<Props>;
+declare const DSNativeSelectWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<Props>;
+export { DSNativeSelect, DSNativeSelectWithSchema };

package/dist/types/NativeSelectDefinitions.d.ts

@@ -0,0 +1,6 @@
+export declare const DSNativeSelectName = "DSNativeSelect";
+export declare const DSNativeSelectSlots: {
+    readonly CONTAINER: "root";
+    readonly INPUT: "input";
+    readonly DROP_INDICATOR: "drop-indicator";
+};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './NativeSelect.js';

package/dist/types/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface StyledControlsWrapperT {
+    hasError: boolean;
+    disabled: boolean;
+}
+export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledControlsWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledDropDownButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<"select", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"select">, never>;
+export {};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@elliemae/ds-form-native-select",
+  "version": "3.26.0-next.11",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Form Native Select",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-form-combobox": "3.26.0-next.11",
+    "@elliemae/ds-grid": "3.26.0-next.11",
+    "@elliemae/ds-icons": "3.26.0-next.11",
+    "@elliemae/ds-props-helpers": "3.26.0-next.11",
+    "@elliemae/ds-system": "3.26.0-next.11"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "@elliemae/pui-theme": "~2.7.0",
+    "styled-components": "~5.3.9",
+    "styled-system": "~5.1.5",
+    "@elliemae/ds-monorepo-devops": "3.26.0-next.11"
+  },
+  "peerDependencies": {
+    "@elliemae/pui-theme": "~2.7.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}