Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-md/form

Package Overview
Dependencies
Maintainers
1
Versions
70
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-md/form - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

19

CHANGELOG.md

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

# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)
### Bug Fixes
- **listbox:** render `0` as a valid display value
([d02b7a9](https://github.com/mlaursen/react-md/commit/d02b7a9042786e4d4c4a46d286b62e6d80afc621))
### Features
- **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
([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)

@@ -8,0 +27,0 @@

5

es/select/Select.js

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

}
if (disabled) {
return;
}
switch (event.key) {

@@ -111,3 +108,3 @@ case " ":

}
}, [onKeyDown, disabled, show]);
}, [onKeyDown, show]);
var selectRef = useRef(null);

@@ -114,0 +111,0 @@ var ref = useCallback(function (instance) {

2

es/select/utils.js

@@ -85,3 +85,3 @@ import { createElement } from "react";

export function getDisplayLabel(option, labelKey, includeLeft) {
if (!option) {
if (!option && option !== 0) {
return null;

@@ -88,0 +88,0 @@ }

@@ -32,3 +32,3 @@ var __assign = (this && this.__assign) || function () {

var InputToggle = forwardRef(function InputToggle(allProps, ref) {
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]);
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "inputStyle", "inputClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]);
var id = props.id, type = props.type;

@@ -55,3 +55,3 @@ var _h = useInteractionStates({

}), toggleClassName) },
React.createElement("input", __assign({}, props, handlers, { ref: ref, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: block("input") })),
React.createElement("input", __assign({}, props, handlers, { ref: ref, style: inputStyle, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: cn(block("input"), inputClassName) })),
React.createElement("span", { style: iconStyle, className: cn(block("icon", {

@@ -58,0 +58,0 @@ circle: !disableIconOverlay && type === "radio",

@@ -100,5 +100,2 @@ "use strict";

}
if (disabled) {
return;
}
switch (event.key) {

@@ -135,3 +132,3 @@ case " ":

}
}, [onKeyDown, disabled, show]);
}, [onKeyDown, show]);
var selectRef = react_1.useRef(null);

@@ -138,0 +135,0 @@ var ref = react_1.useCallback(function (instance) {

@@ -92,3 +92,3 @@ "use strict";

function getDisplayLabel(option, labelKey, includeLeft) {
if (!option) {
if (!option && option !== 0) {
return null;

@@ -95,0 +95,0 @@ }

@@ -38,2 +38,31 @@ import React, { CSSProperties, InputHTMLAttributes, ReactNode } from "react";

/**
* An optional `style` to provide to the invisible `<input>` element that is
* used to toggle the checked state. This prop is only available since the
* `style` prop is passed to the container element, but you probably shouldn't
* really style this element anyways.
*
* @since 2.2.0
*/
inputStyle?: CSSProperties;
/**
* An optional `className` to provide to the invisible `<input>` element that
* is used to toggle the checked state. This prop does not have many uses and
* is really just provided since the `className` is passed to the container
* element instead of the `<input>`. However, this can be used to update the
* icon styles if needed using the `:checked` state:
*
* ```scss
* .custom-toggle-icon {
* // styles
* }
*
* .custom-input:checked + .custom-toggle-icon {
* // custom checked styles
* }
* ```
*
* @since 2.2.0
*/
inputClassName?: string;
/**
* Boolean if the icon's overlay should be disabled. The way the Checkbox and

@@ -40,0 +69,0 @@ * Radio input elements work is by applying different opacity to the

@@ -56,3 +56,3 @@ "use strict";

var InputToggle = react_1.forwardRef(function InputToggle(allProps, ref) {
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]);
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "inputStyle", "inputClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]);
var id = props.id, type = props.type;

@@ -79,3 +79,3 @@ var _h = states_1.useInteractionStates({

}), toggleClassName) },
react_1.default.createElement("input", __assign({}, props, handlers, { ref: ref, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: block("input") })),
react_1.default.createElement("input", __assign({}, props, handlers, { ref: ref, style: inputStyle, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: classnames_1.default(block("input"), inputClassName) })),
react_1.default.createElement("span", { style: iconStyle, className: classnames_1.default(block("icon", {

@@ -82,0 +82,0 @@ circle: !disableIconOverlay && type === "radio",

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

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

"dependencies": {
"@react-md/button": "^2.1.2",
"@react-md/button": "^2.2.0",
"@react-md/icon": "^2.1.2",
"@react-md/list": "^2.1.2",
"@react-md/list": "^2.2.0",
"@react-md/portal": "^2.0.2",
"@react-md/progress": "^2.1.2",
"@react-md/progress": "^2.2.0",
"@react-md/states": "^2.1.2",

@@ -76,3 +76,3 @@ "@react-md/theme": "^2.1.2",

},
"gitHead": "b37e2fd0ec3413111e81e994f54cef68a113103f"
"gitHead": "0a4024848493b6ef1ed37c591ac68781360b8f45"
}
import { createElement } from "react";
import { getOptionId, getOptionLabel } from "../utils";
import { getOptionId, getOptionLabel, getDisplayLabel } from "../utils";

@@ -38,1 +38,50 @@ describe("getOptionId", () => {

});
describe("getDisplayLabel", () => {
it("should return null if there is no option", () => {
expect(getDisplayLabel(null, "label", true)).toBe(null);
expect(getDisplayLabel(null, "label", false)).toBe(null);
expect(getDisplayLabel("", "label", true)).toBe(null);
expect(getDisplayLabel("", "label", false)).toBe(null);
});
it("should return the label if the includeLeft option is false or the option is not an object", () => {
expect(getDisplayLabel(0, "label", true)).toBe(0);
expect(getDisplayLabel(0, "label", false)).toBe(0);
expect(getDisplayLabel("0", "label", true)).toBe("0");
expect(getDisplayLabel("0", "label", false)).toBe("0");
expect(getDisplayLabel("Hello", "label", true)).toBe("Hello");
expect(getDisplayLabel("Hello", "label", false)).toBe("Hello");
});
it("should return the TextIconSpacing component when includeLeft is enabled and the option is an prop object", () => {
const option = {
leftAddon: "Addon",
label: "Some Words",
};
const display1 = getDisplayLabel(option, "label", true);
expect(display1).toMatchInlineSnapshot(`
<TextIconSpacing
icon="Addon"
>
Some Words
</TextIconSpacing>
`);
const option2 = {
leftAddon: createElement("span"),
label: "Some Words",
};
const display2 = getDisplayLabel(option2, "label", true);
expect(display2).toMatchInlineSnapshot(
`
<TextIconSpacing
icon={<span />}
>
Some Words
</TextIconSpacing>
`
);
});
});

@@ -110,3 +110,3 @@ import { ReactNode, createElement } from "react";

): ReactNode {
if (!option) {
if (!option && option !== 0) {
return null;

@@ -113,0 +113,0 @@ }

@@ -38,2 +38,31 @@ import React, { CSSProperties, InputHTMLAttributes, ReactNode } from "react";

/**
* An optional `style` to provide to the invisible `<input>` element that is
* used to toggle the checked state. This prop is only available since the
* `style` prop is passed to the container element, but you probably shouldn't
* really style this element anyways.
*
* @since 2.2.0
*/
inputStyle?: CSSProperties;
/**
* An optional `className` to provide to the invisible `<input>` element that
* is used to toggle the checked state. This prop does not have many uses and
* is really just provided since the `className` is passed to the container
* element instead of the `<input>`. However, this can be used to update the
* icon styles if needed using the `:checked` state:
*
* ```scss
* .custom-toggle-icon {
* // styles
* }
*
* .custom-input:checked + .custom-toggle-icon {
* // custom checked styles
* }
* ```
*
* @since 2.2.0
*/
inputClassName?: string;
/**
* Boolean if the icon's overlay should be disabled. The way the Checkbox and

@@ -40,0 +69,0 @@ * Radio input elements work is by applying different opacity to the

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc