A Chakra UI wrapper for the popular library React Select. 

A Chakra UI wrapper for the popular library React Select

csandman

chakra-react-select

var _react = _interopRequireDefault(require("react"));

var _layout = require("@chakra-ui/layout");

var _system = require("@chakra-ui/system");

var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

  var chakraStyles = selectProps.chakraStyles,

  var _cleanCommonProps = (0, _utils.cleanCommonProps)(props),

    innerRef = _cleanCommonProps.innerRef,

    isDisabled = _cleanCommonProps.isDisabled,

    isHidden = _cleanCommonProps.isHidden,

    inputClassName = _cleanCommonProps.inputClassName,

    innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);

  var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));

    gridTemplateColumns: "0 min-content",

    visibility: isDisabled ? "hidden" : "visible",

    // Force css to recompute when value change due to @emotion bug.

    // We can remove it whenever the bug is fixed.

    transform: value ? "translateZ(0)" : "",

  var containerSx = chakraStyles != null && chakraStyles.inputContainer ? chakraStyles.inputContainer(initialContainerSx, props) : initialContainerSx;

  var inputSx = chakraStyles != null && chakraStyles.input ? chakraStyles.input(initialInputSx, props) : initialInputSx;

  return /*#__PURE__*/_react["default"].createElement(_layout.Box, {

  }, /*#__PURE__*/_react["default"].createElement(_system.chakra.input, _extends({

    readOnly: isReadOnly ? true : undefined,

    "aria-readonly": isReadOnly ? true : undefined,

    "aria-required": isRequired ? true : undefined

    readOnly: isReadOnly ? true : undefined

var _default = exports["default"] = Input;

import { chakra, useMultiStyleConfig } from "@chakra-ui/system";

import { cleanCommonProps } from "../utils";

  var _cleanCommonProps = cleanCommonProps(props),

  var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));

  return /*#__PURE__*/React.createElement(Box, {

  }, /*#__PURE__*/React.createElement(chakra.input, _extends({

  "description": "A Chakra UI wrapper for the popular library React Select",

  "author": "Chris Sandvik <chris.sandvik@gmail.com>",

  "homepage": "https://github.com/csandman/chakra-react-select#readme",

    "url": "git+https://github.com/csandman/chakra-react-select.git"

    "url": "https://github.com/csandman/chakra-react-select/issues"

      "types": "./dist/types/index.d.ts",

    "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx -d dist/cjs --source-maps",

    "build:esm": "cross-env BABEL_ENV=esm babel src --extensions .ts,.tsx -d dist/esm --source-maps",

    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",

    "format": "concurrently npm:format:*",

    "format:package": "prettier-package-json --write",

    "start": "nodemon --watch src --exec npm run build -e ts,tsx"

    "@babel/preset-typescript": "^7.23.0",

    "@trivago/prettier-plugin-sort-imports": "^4.2.0",

    "@typescript-eslint/eslint-plugin": "^6.7.3",

    "@typescript-eslint/parser": "^6.7.3",

    "eslint-config-airbnb-typescript": "^17.1.0",

    "eslint-plugin-deprecation": "^2.0.0",

    "eslint-plugin-react-hooks": "^4.6.0",

		@@ -19,4 +19,3 @@ "use strict";
		var chakraStyles = selectProps.chakraStyles,
		isReadOnly = selectProps.isReadOnly,
		isRequired = selectProps.isRequired;
		isReadOnly = selectProps.isReadOnly;
		var _cleanCommonProps = (0, _utils.cleanCommonProps)(props),
		@@ -76,5 +75,3 @@ innerRef = _cleanCommonProps.innerRef,
		disabled: isDisabled,
		readOnly: isReadOnly ? true : undefined,
		"aria-readonly": isReadOnly ? true : undefined,
		"aria-required": isRequired ? true : undefined
		readOnly: isReadOnly ? true : undefined
		}, innerProps)));
		@@ -81,0 +78,0 @@ };

		@@ -14,4 +14,3 @@ var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
		var chakraStyles = selectProps.chakraStyles,
		isReadOnly = selectProps.isReadOnly,
		isRequired = selectProps.isRequired;
		isReadOnly = selectProps.isReadOnly;
		var _cleanCommonProps = cleanCommonProps(props),
		@@ -71,5 +70,3 @@ innerRef = _cleanCommonProps.innerRef,
		disabled: isDisabled,
		readOnly: isReadOnly ? true : undefined,
		"aria-readonly": isReadOnly ? true : undefined,
		"aria-required": isRequired ? true : undefined
		readOnly: isReadOnly ? true : undefined
		}, innerProps)));
		@@ -76,0 +73,0 @@ };

		{
		"name": "chakra-react-select",
		"version": "5.0.0-rc.0",
		"version": "5.0.0-rc.1",
		"description": "A Chakra UI wrapper for the popular library React Select",
		@@ -5,0 +5,0 @@ "license": "MIT",

Worsened metrics