New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-md/form

Package Overview
Dependencies
Maintainers
1
Versions
70
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-md/form - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0-alpha.0

53

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log

# [2.3.0-alpha.0](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.3.0-alpha.0) (2020-09-01)
### Bug Fixes
- [@react-md/form](../form): added missing scss variables
([ec8d675](https://github.com/mlaursen/react-md/commit/ec8d675c5436e92245ea0a8d07b35345ad30794c))
### Features
- [@react-md/form](../form): updated `TextArea` to use the new useResizeObserver
API
([2c2dd27](https://github.com/mlaursen/react-md/commit/2c2dd27576aeeecb2baba12ef616af45197037db))
# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)

@@ -16,30 +29,17 @@

- **form:** Added props to style Checkbox and Radio input element
- [@react-md/form](../form): Added props to style `Checkbox` and `Radio` input
element
([b6d2318](https://github.com/mlaursen/react-md/commit/b6d23186b7355bacc198d5187d50c10a7186f4ca))
- **form:** Updated toggle inactive and active colors to be configurable
- [@react-md/form](../form): Updated toggle inactive and active colors to be
configurable
([49319e6](https://github.com/mlaursen/react-md/commit/49319e65e7bf29380469b567b893a3cc775b2720))
# Change Log
All notable changes to this project will be documented in this file. See
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [2.1.2](https://github.com/mlaursen/react-md/compare/v2.1.1...v2.1.2) (2020-08-01)
**Note:** Version bump only for package @react-md/form
**Note:** Version bump only for package [@react-md/form](../form)
# Change Log
All notable changes to this project will be documented in this file. See
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [2.1.1](https://github.com/mlaursen/react-md/compare/v2.1.0...v2.1.1) (2020-07-21)
**Note:** Version bump only for package @react-md/form
**Note:** Version bump only for package [@react-md/form](../form)
# Change Log
All notable changes to this project will be documented in this file. See
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.1.0](https://github.com/mlaursen/react-md/compare/v2.0.4...v2.1.0) (2020-07-12)

@@ -53,7 +53,2 @@

# Change Log
All notable changes to this project will be documented in this file. See
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [2.0.3](https://github.com/mlaursen/react-md/compare/v2.0.2...v2.0.3) (2020-07-07)

@@ -63,7 +58,7 @@

- **form:** Select disabled styling
- [@react-md/form](../form): `Select` disabled styling
([d79d007](https://github.com/mlaursen/react-md/commit/d79d0079307ccc735ebac0730d1d45aabe1419bd))
- **form:** TextArea disabled styles
- [@react-md/form](../form): `TextArea` disabled styles
([ef118bf](https://github.com/mlaursen/react-md/commit/ef118bf325e68e9ae8c988f9f93a1e19e1468084))
- **form:** TextField and Select disabled behavior
- [@react-md/form](../form): `TextField` and `Select` disabled behavior
([e8f2c57](https://github.com/mlaursen/react-md/commit/e8f2c579a1ee502674bfddbcc10713d4b50d7cc4))

@@ -77,5 +72,5 @@

([50c9021](https://github.com/mlaursen/react-md/commit/50c9021cedc0d642758b9fd541bb6c93d2fe1786))
- Added sideEffects field to package.json
- Added `sideEffects` field to `package.json`
([31820b9](https://github.com/mlaursen/react-md/commit/31820b9b43705e5849664500a17b6849eb6dc2a9))
- sideEffects formatting
- `sideEffects` formatting
([78a7b6b](https://github.com/mlaursen/react-md/commit/78a7b6b0e40c7daefb749835670705f21bd21720))

@@ -82,0 +77,0 @@

2

dist/scssVariables.d.ts

@@ -95,2 +95,4 @@ declare const _default: {

"rmd-toggle-dense-inset": string;
"rmd-toggle-inactive-color": string;
"rmd-toggle-active-color": string;
"rmd-checkbox-indeterminate-height": string;

@@ -97,0 +99,0 @@ "rmd-checkbox-indeterminate-dense-height": string;

2

dist/scssVariables.js

@@ -96,2 +96,4 @@ "use strict";

"rmd-toggle-dense-inset": "0.25rem",
"rmd-toggle-inactive-color": "var(--rmd-theme-text-secondary-on-background, #757575)",
"rmd-toggle-active-color": "var(--rmd-theme-secondary, #f50057)",
"rmd-checkbox-indeterminate-height": "0.15rem",

@@ -98,0 +100,0 @@ "rmd-checkbox-indeterminate-dense-height": "0.125rem",

26

es/select/Select.js

@@ -23,7 +23,7 @@ var __assign = (this && this.__assign) || function () {

};
import React, { forwardRef, useCallback, useMemo, useRef, } from "react";
import React, { forwardRef, useCallback, useMemo, } from "react";
import cn from "classnames";
import { useIcon } from "@react-md/icon";
import { useFixedPositioning } from "@react-md/transition";
import { applyRef, bem, BELOW_CENTER_ANCHOR, DEFAULT_GET_ITEM_VALUE, useCloseOnOutsideClick, useToggle, } from "@react-md/utils";
import { bem, BELOW_CENTER_ANCHOR, DEFAULT_GET_ITEM_VALUE, useCloseOnOutsideClick, useEnsuredRef, useToggle, } from "@react-md/utils";
import FloatingLabel from "../label/FloatingLabel";

@@ -109,14 +109,10 @@ import TextFieldContainer from "../text-field/TextFieldContainer";

}, [onKeyDown, show]);
var selectRef = useRef(null);
var ref = useCallback(function (instance) {
applyRef(instance, forwardedRef);
selectRef.current = instance;
}, [forwardedRef]);
var _0 = useEnsuredRef(forwardedRef), ref = _0[0], refHandler = _0[1];
useCloseOnOutsideClick({
enabled: visible,
element: selectRef.current,
element: ref.current,
onOutsideClick: hide,
});
var _0 = useFixedPositioning({
fixedTo: function () { return selectRef.current; },
var _1 = useFixedPositioning({
fixedTo: function () { return ref.current; },
anchor: anchor,

@@ -135,3 +131,3 @@ onScroll: closeOnScroll ? hide : undefined,

},
}), fixedStyle = _0.style, onEnter = _0.onEnter, onEntering = _0.onEntering, onEntered = _0.onEntered, onExited = _0.onExited;
}), fixedStyle = _1.style, onEnter = _1.onEnter, onEntering = _1.onEntering, onEntered = _1.onEntered, onExited = _1.onExited;
var handleClick = useCallback(function (event) {

@@ -145,6 +141,6 @@ if (onClick) {

hide();
if (selectRef.current) {
selectRef.current.focus();
if (ref.current) {
ref.current.focus();
}
}, [hide]);
}, [hide, ref]);
var labelId = id + "-label";

@@ -155,3 +151,3 @@ var valueId = id + "-value";

return (React.createElement(React.Fragment, null,
React.createElement(TextFieldContainer, __assign({}, props, { "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, ref: ref, role: "button", tabIndex: disabled ? undefined : 0, label: !!label, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: disabled ? undefined : handleKeyDown, onClick: disabled ? undefined : handleClick, theme: theme, error: error, active: focused || visible, inline: inline, disabled: disabled, underlineDirection: underlineDirection, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, rightChildren: rightChildren, className: cn(block({ disabled: disabled }), className) }),
React.createElement(TextFieldContainer, __assign({}, props, { "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, ref: refHandler, role: "button", tabIndex: disabled ? undefined : 0, label: !!label, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: disabled ? undefined : handleKeyDown, onClick: disabled ? undefined : handleClick, theme: theme, error: error, active: focused || visible, inline: inline, disabled: disabled, underlineDirection: underlineDirection, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, rightChildren: rightChildren, className: cn(block({ disabled: disabled }), className) }),
React.createElement(FloatingLabel, { id: labelId, style: labelStyle, className: cn(block("label"), labelClassName), htmlFor: id, error: error, active: valued && (focused || visible), valued: valued, floating: focused || valued || visible, dense: dense, disabled: disabled, component: "span" }, label),

@@ -158,0 +154,0 @@ React.createElement("span", { id: displayValueId, style: displayLabelStyle, className: cn(block("value", {

35

es/text-field/TextArea.js

@@ -23,5 +23,5 @@ var __assign = (this && this.__assign) || function () {

};
import React, { forwardRef, useCallback, useRef, useState, } from "react";
import React, { forwardRef, useCallback, useState, useRef, } from "react";
import cn from "classnames";
import { applyRef, bem, useResizeObserver } from "@react-md/utils";
import { bem, useEnsuredRef, useResizeObserver } from "@react-md/utils";
import FloatingLabel from "../label/FloatingLabel";

@@ -52,5 +52,6 @@ import useFocusState from "../useFocusState";

}
var _q = useState(null), mask = _q[0], setMask = _q[1];
var _r = useState(false), scrollable = _r[0], setScrollable = _r[1];
var updateHeight = function () {
var maskRef = useRef(null);
var _q = useState(false), scrollable = _q[0], setScrollable = _q[1];
var updateHeight = useCallback(function () {
var mask = maskRef.current;
if (!mask) {

@@ -76,10 +77,9 @@ return;

}
};
}, [height, maxRows, scrollable]);
// the window can be resized while there is text inside the textarea so need to
// recalculate the height when the width changes as well.
useResizeObserver({
var _r = useResizeObserver(updateHeight, {
ref: maskRef,
disableHeight: true,
target: mask,
onResize: updateHeight,
});
}), maskRefHandler = _r[1];
var _s = useValuedState({

@@ -89,2 +89,3 @@ value: value,

onChange: function (event) {
var mask = maskRef.current;
if (propOnChange) {

@@ -118,7 +119,3 @@ propOnChange(event);

}), valued = _s[0], onChange = _s[1];
var areaRef = useRef(null);
var refHandler = useCallback(function (instance) {
applyRef(instance, forwardedRef);
areaRef.current = instance;
}, [forwardedRef]);
var _t = useEnsuredRef(forwardedRef), ref = _t[0], refHandler = _t[1];
// the container element adds some padding so that the content can scroll and

@@ -129,6 +126,6 @@ // not be covered by the floating label. unfortunately, this means that the entire

var handleClick = useCallback(function (event) {
if (areaRef.current && event.target === event.currentTarget) {
areaRef.current.focus();
if (ref.current && event.target === event.currentTarget) {
ref.current.focus();
}
}, []);
}, [ref]);
var area = (React.createElement("textarea", __assign({}, props, { ref: refHandler, rows: rows, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, style: __assign(__assign({}, areaStyle), { height: height }), className: cn(block({

@@ -145,3 +142,3 @@ scrollable: scrollable || resize === "none",

area,
React.createElement("textarea", { "aria-hidden": true, defaultValue: value || defaultValue, id: id + "-mask", ref: setMask, readOnly: true, rows: rows, tabIndex: -1, style: areaStyle, className: cn(block({
React.createElement("textarea", { "aria-hidden": true, defaultValue: value || defaultValue, id: id + "-mask", ref: maskRefHandler, readOnly: true, rows: rows, tabIndex: -1, style: areaStyle, className: cn(block({
rn: true,

@@ -148,0 +145,0 @@ mask: true,

22

lib/select/Select.js

@@ -132,14 +132,10 @@ "use strict";

}, [onKeyDown, show]);
var selectRef = react_1.useRef(null);
var ref = react_1.useCallback(function (instance) {
utils_1.applyRef(instance, forwardedRef);
selectRef.current = instance;
}, [forwardedRef]);
var _0 = utils_1.useEnsuredRef(forwardedRef), ref = _0[0], refHandler = _0[1];
utils_1.useCloseOnOutsideClick({
enabled: visible,
element: selectRef.current,
element: ref.current,
onOutsideClick: hide,
});
var _0 = transition_1.useFixedPositioning({
fixedTo: function () { return selectRef.current; },
var _1 = transition_1.useFixedPositioning({
fixedTo: function () { return ref.current; },
anchor: anchor,

@@ -158,3 +154,3 @@ onScroll: closeOnScroll ? hide : undefined,

},
}), fixedStyle = _0.style, onEnter = _0.onEnter, onEntering = _0.onEntering, onEntered = _0.onEntered, onExited = _0.onExited;
}), fixedStyle = _1.style, onEnter = _1.onEnter, onEntering = _1.onEntering, onEntered = _1.onEntered, onExited = _1.onExited;
var handleClick = react_1.useCallback(function (event) {

@@ -168,6 +164,6 @@ if (onClick) {

hide();
if (selectRef.current) {
selectRef.current.focus();
if (ref.current) {
ref.current.focus();
}
}, [hide]);
}, [hide, ref]);
var labelId = id + "-label";

@@ -178,3 +174,3 @@ var valueId = id + "-value";

return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(TextFieldContainer_1.default, __assign({}, props, { "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, ref: ref, role: "button", tabIndex: disabled ? undefined : 0, label: !!label, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: disabled ? undefined : handleKeyDown, onClick: disabled ? undefined : handleClick, theme: theme, error: error, active: focused || visible, inline: inline, disabled: disabled, underlineDirection: underlineDirection, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, rightChildren: rightChildren, className: classnames_1.default(block({ disabled: disabled }), className) }),
react_1.default.createElement(TextFieldContainer_1.default, __assign({}, props, { "aria-haspopup": "listbox", "aria-disabled": disabled || undefined, ref: refHandler, role: "button", tabIndex: disabled ? undefined : 0, label: !!label, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: disabled ? undefined : handleKeyDown, onClick: disabled ? undefined : handleClick, theme: theme, error: error, active: focused || visible, inline: inline, disabled: disabled, underlineDirection: underlineDirection, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, rightChildren: rightChildren, className: classnames_1.default(block({ disabled: disabled }), className) }),
react_1.default.createElement(FloatingLabel_1.default, { id: labelId, style: labelStyle, className: classnames_1.default(block("label"), labelClassName), htmlFor: id, error: error, active: valued && (focused || visible), valued: valued, floating: focused || valued || visible, dense: dense, disabled: disabled, component: "span" }, label),

@@ -181,0 +177,0 @@ react_1.default.createElement("span", { id: displayValueId, style: displayLabelStyle, className: classnames_1.default(block("value", {

31

lib/text-field/TextArea.js

@@ -75,5 +75,6 @@ "use strict";

}
var _q = react_1.useState(null), mask = _q[0], setMask = _q[1];
var _r = react_1.useState(false), scrollable = _r[0], setScrollable = _r[1];
var updateHeight = function () {
var maskRef = react_1.useRef(null);
var _q = react_1.useState(false), scrollable = _q[0], setScrollable = _q[1];
var updateHeight = react_1.useCallback(function () {
var mask = maskRef.current;
if (!mask) {

@@ -99,10 +100,9 @@ return;

}
};
}, [height, maxRows, scrollable]);
// the window can be resized while there is text inside the textarea so need to
// recalculate the height when the width changes as well.
utils_1.useResizeObserver({
var _r = utils_1.useResizeObserver(updateHeight, {
ref: maskRef,
disableHeight: true,
target: mask,
onResize: updateHeight,
});
}), maskRefHandler = _r[1];
var _s = useValuedState_1.default({

@@ -112,2 +112,3 @@ value: value,

onChange: function (event) {
var mask = maskRef.current;
if (propOnChange) {

@@ -141,7 +142,3 @@ propOnChange(event);

}), valued = _s[0], onChange = _s[1];
var areaRef = react_1.useRef(null);
var refHandler = react_1.useCallback(function (instance) {
utils_1.applyRef(instance, forwardedRef);
areaRef.current = instance;
}, [forwardedRef]);
var _t = utils_1.useEnsuredRef(forwardedRef), ref = _t[0], refHandler = _t[1];
// the container element adds some padding so that the content can scroll and

@@ -152,6 +149,6 @@ // not be covered by the floating label. unfortunately, this means that the entire

var handleClick = react_1.useCallback(function (event) {
if (areaRef.current && event.target === event.currentTarget) {
areaRef.current.focus();
if (ref.current && event.target === event.currentTarget) {
ref.current.focus();
}
}, []);
}, [ref]);
var area = (react_1.default.createElement("textarea", __assign({}, props, { ref: refHandler, rows: rows, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, style: __assign(__assign({}, areaStyle), { height: height }), className: classnames_1.default(block({

@@ -168,3 +165,3 @@ scrollable: scrollable || resize === "none",

area,
react_1.default.createElement("textarea", { "aria-hidden": true, defaultValue: value || defaultValue, id: id + "-mask", ref: setMask, readOnly: true, rows: rows, tabIndex: -1, style: areaStyle, className: classnames_1.default(block({
react_1.default.createElement("textarea", { "aria-hidden": true, defaultValue: value || defaultValue, id: id + "-mask", ref: maskRefHandler, readOnly: true, rows: rows, tabIndex: -1, style: areaStyle, className: classnames_1.default(block({
rn: true,

@@ -171,0 +168,0 @@ mask: true,

22

package.json
{
"name": "@react-md/form",
"version": "2.2.0",
"version": "2.3.0-alpha.0",
"description": "This package is for creating all the different form input types.",

@@ -50,12 +50,12 @@ "scripts": {

"dependencies": {
"@react-md/button": "^2.2.0",
"@react-md/icon": "^2.1.2",
"@react-md/list": "^2.2.0",
"@react-md/button": "^2.3.0-alpha.0",
"@react-md/icon": "^2.3.0-alpha.0",
"@react-md/list": "^2.3.0-alpha.0",
"@react-md/portal": "^2.0.2",
"@react-md/progress": "^2.2.0",
"@react-md/states": "^2.1.2",
"@react-md/theme": "^2.1.2",
"@react-md/transition": "^2.1.2",
"@react-md/typography": "^2.1.2",
"@react-md/utils": "^2.1.0",
"@react-md/progress": "^2.3.0-alpha.0",
"@react-md/states": "^2.3.0-alpha.0",
"@react-md/theme": "^2.3.0-alpha.0",
"@react-md/transition": "^2.3.0-alpha.0",
"@react-md/typography": "^2.3.0-alpha.0",
"@react-md/utils": "^2.3.0-alpha.0",
"classnames": "^2.2.6"

@@ -76,3 +76,3 @@ },

},
"gitHead": "0a4024848493b6ef1ed37c591ac68781360b8f45"
"gitHead": "1026b00201cb5ab60735372acd9b8abd26cc3c05"
}

6

README.md

@@ -71,3 +71,3 @@ # @react-md/form

```sh
$ npm install --save @react-md/form
npm install --save @react-md/form
```

@@ -78,4 +78,4 @@

```sh
$ npm install --save @react-md/theme \
@react-md/typography \
npm install --save @react-md/theme \
@react-md/typography \
```

@@ -82,0 +82,0 @@

3

src/scssVariables.ts

@@ -96,2 +96,5 @@ /** this is an auto-generated file from @react-md/dev-utils */

"rmd-toggle-dense-inset": "0.25rem",
"rmd-toggle-inactive-color":
"var(--rmd-theme-text-secondary-on-background, #757575)",
"rmd-toggle-active-color": "var(--rmd-theme-secondary, #f50057)",
"rmd-checkbox-indeterminate-height": "0.15rem",

@@ -98,0 +101,0 @@ "rmd-checkbox-indeterminate-dense-height": "0.125rem",

dist/scssVariables.js.map

Sorry, the diff of this file is not supported yet

es/select/Select.js.map

Sorry, the diff of this file is not supported yet

es/text-field/TextArea.js.map

Sorry, the diff of this file is not supported yet

lib/select/Select.js.map

Sorry, the diff of this file is not supported yet

lib/text-field/TextArea.js.map

Sorry, the diff of this file is not supported yet

src/select/Select.tsx

Sorry, the diff of this file is not supported yet

src/text-field/TextArea.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc