@yamada-ui/native-select 0.0.0-dev-20230603042803

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/native-select
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/native-select
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/native-select
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/native-select
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-EV7VRRWM.mjs

@@ -0,0 +1,131 @@
+// src/native-select.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps,
+  layoutStylesProperties
+} from "@yamada-ui/core";
+import {
+  useFormControlProps,
+  formControlProperties
+} from "@yamada-ui/form-control";
+import { ChevronIcon } from "@yamada-ui/icon";
+import {
+  createContext,
+  cx,
+  splitObject,
+  getValidChildren,
+  isValidElement,
+  isUndefined,
+  isArray,
+  pickObject
+} from "@yamada-ui/utils";
+import { cloneElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var [NativeSelectProvider, useNativeSelect] = createContext({
+  name: "NativeSelectContext",
+  errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
+});
+var NativeSelect = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("Select", props);
+  let {
+    className,
+    children,
+    placeholderInOptions = true,
+    color,
+    h,
+    height,
+    minH,
+    minHeight,
+    data = [],
+    value,
+    placeholder,
+    isRequired,
+    containerProps,
+    iconProps,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  rest = useFormControlProps({ ...rest, isRequired: isRequired != null ? isRequired : !isUndefined(placeholder) });
+  const formControlProps = pickObject(rest, formControlProperties);
+  const computedProps = splitObject(rest, layoutStylesProperties);
+  let computedChildren = [];
+  if (!children && data.length) {
+    computedChildren = data.map(({ label, value: value2, ...props2 }, i) => {
+      if (!isArray(value2)) {
+        return /* @__PURE__ */ jsx(NativeOption, { value: value2, ...props2, children: label }, i);
+      } else {
+        return /* @__PURE__ */ jsx(NativeOptionGroup, { label, ...props2, children: value2.map(
+          ({ label: label2, value: value3, ...props3 }, i2) => !isArray(value3) ? /* @__PURE__ */ jsx(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
+        ) }, i);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ jsxs(
+    ui.div,
+    {
+      className: "ui-native-select",
+      __css: {
+        position: "relative",
+        w: "100%",
+        h: "fit-content",
+        color,
+        ...styles.container
+      },
+      ...computedProps[0],
+      ...containerProps,
+      ...formControlProps,
+      children: [
+        /* @__PURE__ */ jsxs(
+          ui.select,
+          {
+            ref,
+            className: cx("ui-native-select-field", className),
+            value,
+            __css: { paddingEnd: "2rem", h: h != null ? h : height, minH: minH != null ? minH : minHeight, ...styles.field },
+            ...computedProps[1],
+            children: [
+              placeholder ? /* @__PURE__ */ jsx(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
+              children != null ? children : computedChildren
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(NativeSelectIcon, { ...iconProps, ...formControlProps })
+      ]
+    }
+  ) });
+});
+var NativeSelectIcon = ({ className, children, ...rest }) => {
+  const styles = useNativeSelect();
+  const css = {
+    position: "absolute",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+    top: "50%",
+    transform: "translateY(-50%)",
+    ...styles.icon
+  };
+  const validChildren = getValidChildren(children);
+  const cloneChildren = validChildren.map(
+    (child) => cloneElement(child, {
+      focusable: false,
+      "aria-hidden": true,
+      style: {
+        width: "1em",
+        height: "1em",
+        color: "currentColor"
+      }
+    })
+  );
+  return /* @__PURE__ */ jsx(ui.div, { className: cx("ui-native-select-icon", className), __css: css, ...rest, children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(ChevronIcon, {}) });
+};
+var NativeOptionGroup = forwardRef((props, ref) => /* @__PURE__ */ jsx(ui.optgroup, { ref, ...props }));
+var NativeOption = forwardRef((props, ref) => /* @__PURE__ */ jsx(ui.option, { ref, ...props }));
+
+export {
+  NativeSelect,
+  NativeOptionGroup,
+  NativeOption
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect, NativeSelectProps, UINativeOption } from './native-select.js';
+import '@yamada-ui/core';
+import '@yamada-ui/form-control';
+import 'react';

package/dist/index.js

@@ -0,0 +1,141 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  NativeOption: () => NativeOption,
+  NativeOptionGroup: () => NativeOptionGroup,
+  NativeSelect: () => NativeSelect
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/native-select.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_icon = require("@yamada-ui/icon");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [NativeSelectProvider, useNativeSelect] = (0, import_utils.createContext)({
+  name: "NativeSelectContext",
+  errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
+});
+var NativeSelect = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Select", props);
+  let {
+    className,
+    children,
+    placeholderInOptions = true,
+    color,
+    h,
+    height,
+    minH,
+    minHeight,
+    data = [],
+    value,
+    placeholder,
+    isRequired,
+    containerProps,
+    iconProps,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  rest = (0, import_form_control.useFormControlProps)({ ...rest, isRequired: isRequired != null ? isRequired : !(0, import_utils.isUndefined)(placeholder) });
+  const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
+  let computedChildren = [];
+  if (!children && data.length) {
+    computedChildren = data.map(({ label, value: value2, ...props2 }, i) => {
+      if (!(0, import_utils.isArray)(value2)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value2, ...props2, children: label }, i);
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: value2.map(
+          ({ label: label2, value: value3, ...props3 }, i2) => !(0, import_utils.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
+        ) }, i);
+      }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.ui.div,
+    {
+      className: "ui-native-select",
+      __css: {
+        position: "relative",
+        w: "100%",
+        h: "fit-content",
+        color,
+        ...styles.container
+      },
+      ...computedProps[0],
+      ...containerProps,
+      ...formControlProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_core.ui.select,
+          {
+            ref,
+            className: (0, import_utils.cx)("ui-native-select-field", className),
+            value,
+            __css: { paddingEnd: "2rem", h: h != null ? h : height, minH: minH != null ? minH : minHeight, ...styles.field },
+            ...computedProps[1],
+            children: [
+              placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
+              children != null ? children : computedChildren
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectIcon, { ...iconProps, ...formControlProps })
+      ]
+    }
+  ) });
+});
+var NativeSelectIcon = ({ className, children, ...rest }) => {
+  const styles = useNativeSelect();
+  const css = {
+    position: "absolute",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+    top: "50%",
+    transform: "translateY(-50%)",
+    ...styles.icon
+  };
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const cloneChildren = validChildren.map(
+    (child) => (0, import_react.cloneElement)(child, {
+      focusable: false,
+      "aria-hidden": true,
+      style: {
+        width: "1em",
+        height: "1em",
+        color: "currentColor"
+      }
+    })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-native-select-icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
+};
+var NativeOptionGroup = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.optgroup, { ref, ...props }));
+var NativeOption = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.option, { ref, ...props }));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NativeOption,
+  NativeOptionGroup,
+  NativeSelect
+});

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import {
+  NativeOption,
+  NativeOptionGroup,
+  NativeSelect
+} from "./chunk-EV7VRRWM.mjs";
+export {
+  NativeOption,
+  NativeOptionGroup,
+  NativeSelect
+};

package/dist/native-select.d.ts

@@ -0,0 +1,29 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import { DetailedHTMLProps, OptionHTMLAttributes } from 'react';
+
+type Value = DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>['value'];
+type UINativeOption = Omit<DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, 'label' | 'children' | 'value'> & {
+    label?: string;
+    value?: Value | UINativeOption[];
+};
+type NativeSelectOptions = {
+    data?: UINativeOption[];
+    placeholder?: string;
+    placeholderInOptions?: boolean;
+    focusBorderColor?: string;
+    errorBorderColor?: string;
+    containerProps?: Omit<HTMLUIProps<'div'>, 'children'>;
+    iconProps?: HTMLUIProps<'div'>;
+};
+type NativeSelectProps = Omit<HTMLUIProps<'select'>, 'size'> & ThemeProps<'Select'> & NativeSelectOptions & FormControlOptions;
+declare const NativeSelect: _yamada_ui_core.Component<"select", NativeSelectProps>;
+type NativeOptionGroupProps = HTMLUIProps<'optgroup'>;
+declare const NativeOptionGroup: _yamada_ui_core.Component<"optgroup", NativeOptionGroupProps>;
+type NativeOptionProps = Omit<HTMLUIProps<'option'>, 'children'> & {
+    children?: string;
+};
+declare const NativeOption: _yamada_ui_core.Component<"option", NativeOptionProps>;
+
+export { NativeOption, NativeOptionGroup, NativeOptionGroupProps, NativeOptionProps, NativeSelect, NativeSelectProps, UINativeOption };

package/dist/native-select.js

@@ -0,0 +1,139 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/native-select.tsx
+var native_select_exports = {};
+__export(native_select_exports, {
+  NativeOption: () => NativeOption,
+  NativeOptionGroup: () => NativeOptionGroup,
+  NativeSelect: () => NativeSelect
+});
+module.exports = __toCommonJS(native_select_exports);
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_icon = require("@yamada-ui/icon");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [NativeSelectProvider, useNativeSelect] = (0, import_utils.createContext)({
+  name: "NativeSelectContext",
+  errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in "<NativeSelect />"`
+});
+var NativeSelect = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Select", props);
+  let {
+    className,
+    children,
+    placeholderInOptions = true,
+    color,
+    h,
+    height,
+    minH,
+    minHeight,
+    data = [],
+    value,
+    placeholder,
+    isRequired,
+    containerProps,
+    iconProps,
+    ...rest
+  } = (0, import_core.omitThemeProps)(mergedProps);
+  rest = (0, import_form_control.useFormControlProps)({ ...rest, isRequired: isRequired != null ? isRequired : !(0, import_utils.isUndefined)(placeholder) });
+  const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStylesProperties);
+  let computedChildren = [];
+  if (!children && data.length) {
+    computedChildren = data.map(({ label, value: value2, ...props2 }, i) => {
+      if (!(0, import_utils.isArray)(value2)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value2, ...props2, children: label }, i);
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOptionGroup, { label, ...props2, children: value2.map(
+          ({ label: label2, value: value3, ...props3 }, i2) => !(0, import_utils.isArray)(value3) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: value3, ...props3, children: label2 }, i2) : null
+        ) }, i);
+      }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.ui.div,
+    {
+      className: "ui-native-select",
+      __css: {
+        position: "relative",
+        w: "100%",
+        h: "fit-content",
+        color,
+        ...styles.container
+      },
+      ...computedProps[0],
+      ...containerProps,
+      ...formControlProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_core.ui.select,
+          {
+            ref,
+            className: (0, import_utils.cx)("ui-native-select-field", className),
+            value,
+            __css: { paddingEnd: "2rem", h: h != null ? h : height, minH: minH != null ? minH : minHeight, ...styles.field },
+            ...computedProps[1],
+            children: [
+              placeholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeOption, { value: "", hidden: !placeholderInOptions, children: placeholder }) : null,
+              children != null ? children : computedChildren
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelectIcon, { ...iconProps, ...formControlProps })
+      ]
+    }
+  ) });
+});
+var NativeSelectIcon = ({ className, children, ...rest }) => {
+  const styles = useNativeSelect();
+  const css = {
+    position: "absolute",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+    top: "50%",
+    transform: "translateY(-50%)",
+    ...styles.icon
+  };
+  const validChildren = (0, import_utils.getValidChildren)(children);
+  const cloneChildren = validChildren.map(
+    (child) => (0, import_react.cloneElement)(child, {
+      focusable: false,
+      "aria-hidden": true,
+      style: {
+        width: "1em",
+        height: "1em",
+        color: "currentColor"
+      }
+    })
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-native-select-icon", className), __css: css, ...rest, children: (0, import_utils.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, {}) });
+};
+var NativeOptionGroup = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.optgroup, { ref, ...props }));
+var NativeOption = (0, import_core.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.option, { ref, ...props }));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NativeOption,
+  NativeOptionGroup,
+  NativeSelect
+});

package/dist/native-select.mjs

@@ -0,0 +1,10 @@
+import {
+  NativeOption,
+  NativeOptionGroup,
+  NativeSelect
+} from "./chunk-EV7VRRWM.mjs";
+export {
+  NativeOption,
+  NativeOptionGroup,
+  NativeSelect
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@yamada-ui/native-select",
+  "version": "0.0.0-dev-20230603042803",
+  "description": "Yamada UI native select component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "native-select",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/native-select"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.0.0-dev-20230603042803",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/form-control": "0.0.0-dev-20230603042803",
+    "@yamada-ui/icon": "0.0.0-dev-20230603042803"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}