@react-md/form - npm Package Compare versions

Comparing version 2.0.0-alpha.9 to 2.0.0-alpha.10

dist/scssVariables.d.ts

@@ -47,2 +47,14 @@ declare const _default: {
     "rmd-select-native-addon-top": string;
+    "rmd-listbox-z-index": number;
+    "rmd-listbox-elevation": number;
+    "rmd-option-focused-styles": {
+        "box-shadow": string;
+    };
+    "rmd-option-selected-styles": {
+        "background-color": string;
+        color: string;
+    };
+    "rmd-option-selected-offset": string;
+    "rmd-option-selected-content": string;
+    "rmd-option-horizontal-padding": string;
     "rmd-text-field-active-color": string;
@@ -49,0 +61,0 @@ "rmd-text-field-light-border-color": string;

dist/scssVariables.js

@@ -50,2 +50,12 @@ "use strict";
     "rmd-select-native-addon-top": "1rem",
+    "rmd-listbox-z-index": 10,
+    "rmd-listbox-elevation": 8,
+    "rmd-option-focused-styles": { "box-shadow": "inset 0 0 0 2px #2196f3" },
+    "rmd-option-selected-styles": {
+        "background-color": "#0d47a1",
+        color: "#fff",
+    },
+    "rmd-option-selected-offset": "0.5rem",
+    "rmd-option-selected-content": "✓",
+    "rmd-option-horizontal-padding": "1.5rem",
     "rmd-text-field-active-color": "var(--rmd-theme-primary, #9c27b0)",
@@ -52,0 +62,0 @@ "rmd-text-field-light-border-color": "rgba(0, 0, 0, 0.12)",

es/Form.js

@@ -24,3 +24,2 @@ var __assign = (this && this.__assign) || function () {
 import React, { forwardRef, useCallback } from "react";
-import { useRefCache } from "@react-md/utils";
 /**
@@ -33,5 +32,3 @@ * This is probably one of the least useful components available as it doesn't
     var _a = providedProps, children = _a.children, forwardedRef = _a.forwardedRef, disablePreventDefault = _a.disablePreventDefault, onSubmit = _a.onSubmit, props = __rest(_a, ["children", "forwardedRef", "disablePreventDefault", "onSubmit"]);
-    var config = useRefCache({ onSubmit: onSubmit, disablePreventDefault: disablePreventDefault });
     var handleOnSubmit = useCallback(function (event) {
-        var _a = config.current, onSubmit = _a.onSubmit, disablePreventDefault = _a.disablePreventDefault;
         if (!disablePreventDefault) {
@@ -43,6 +40,3 @@ event.preventDefault();
         }
-    }, 
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    }, [disablePreventDefault, onSubmit]);
     return (React.createElement("form", __assign({}, props, { onSubmit: handleOnSubmit, ref: forwardedRef }), children));
@@ -49,0 +43,0 @@ };

es/index.js

@@ -5,27 +5,9 @@ export { default as Form } from "./Form";
 export * from "./Fieldset";
-export { default as FileInput } from "./file-input/FileInput";
-export * from "./file-input/FileInput";
-export { default as Label } from "./label/Label";
-export * from "./label/Label";
-export { default as NativeSelect } from "./select/NativeSelect";
-export * from "./select/NativeSelect";
-export { default as TextField } from "./text-field/TextField";
-export * from "./text-field/TextField";
-export { default as TextFieldAddon } from "./text-field/TextFieldAddon";
-export * from "./text-field/TextFieldAddon";
-export { default as Password } from "./text-field/Password";
-export * from "./text-field/Password";
-export { default as TextArea } from "./text-field/TextArea";
-export * from "./text-field/TextArea";
-export { default as Checkbox } from "./toggle/Checkbox";
-export * from "./toggle/Checkbox";
-export { default as Radio } from "./toggle/Radio";
-export * from "./toggle/Radio";
-export { default as InputToggle } from "./toggle/InputToggle";
-export * from "./toggle/InputToggle";
-export { default as Switch } from "./toggle/Switch";
-export * from "./toggle/Switch";
-export { default as AsyncSwitch } from "./toggle/AsyncSwitch";
-export { default as useCheckboxState } from "./toggle/useCheckboxState";
+export * from "./file-input";
+export * from "./label";
+export * from "./select";
+export * from "./text-field";
+export * from "./toggle";
 export { default as useChoice } from "./useChoice";
+export { default as useSelectState } from "./useSelectState";
 //# sourceMappingURL=index.js.map

es/label/Label.js

@@ -29,7 +29,7 @@ var __assign = (this && this.__assign) || function () {
 var Label = function (providedProps) {
-    var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, error = _a.error, active = _a.active, disabled = _a.disabled, props = __rest(_a, ["className", "forwardedRef", "children", "error", "active", "disabled"]);
+    var _a = providedProps, htmlFor = _a.htmlFor, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, error = _a.error, active = _a.active, disabled = _a.disabled, Component = _a.component, props = __rest(_a, ["htmlFor", "className", "forwardedRef", "children", "error", "active", "disabled", "component"]);
     if (!children) {
         return null;
     }
-    return (React.createElement("label", __assign({}, props, { ref: forwardedRef, className: cn(block({
+    return (React.createElement(Component, __assign({}, props, { htmlFor: Component === "label" ? htmlFor : undefined, ref: forwardedRef, className: cn(block({
             error: error,
@@ -44,2 +44,3 @@ active: active,
     disabled: false,
+    component: "label",
 };
@@ -60,2 +61,3 @@ Label.defaultProps = defaultProps;
             disabled: PropTypes.bool,
+            component: PropTypes.oneOf(["label", "span"]),
         };
@@ -62,0 +64,0 @@ }

es/text-field/TextField.js

@@ -38,3 +38,3 @@ var __assign = (this && this.__assign) || function () {
 var TextField = function (providedProps) {
-    var _a = providedProps, style = _a.style, className = _a.className, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, theme = _a.theme, error = _a.error, dense = _a.dense, inline = _a.inline, propOnBlur = _a.onBlur, propOnFocus = _a.onFocus, propOnChange = _a.onChange, containerRef = _a.containerRef, forwardedRef = _a.forwardedRef, isLeftAddon = _a.isLeftAddon, isRightAddon = _a.isRightAddon, leftChildren = _a.leftChildren, rightChildren = _a.rightChildren, underlineDirection = _a.underlineDirection, props = __rest(_a, ["style", "className", "inputStyle", "inputClassName", "label", "labelStyle", "labelClassName", "theme", "error", "dense", "inline", "onBlur", "onFocus", "onChange", "containerRef", "forwardedRef", "isLeftAddon", "isRightAddon", "leftChildren", "rightChildren", "underlineDirection"]);
+    var _a = providedProps, style = _a.style, className = _a.className, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, theme = _a.theme, error = _a.error, dense = _a.dense, inline = _a.inline, propOnBlur = _a.onBlur, propOnFocus = _a.onFocus, propOnChange = _a.onChange, containerRef = _a.containerRef, forwardedRef = _a.forwardedRef, isLeftAddon = _a.isLeftAddon, isRightAddon = _a.isRightAddon, leftChildren = _a.leftChildren, rightChildren = _a.rightChildren, underlineDirection = _a.underlineDirection, containerProps = _a.containerProps, props = __rest(_a, ["style", "className", "inputStyle", "inputClassName", "label", "labelStyle", "labelClassName", "theme", "error", "dense", "inline", "onBlur", "onFocus", "onChange", "containerRef", "forwardedRef", "isLeftAddon", "isRightAddon", "leftChildren", "rightChildren", "underlineDirection", "containerProps"]);
     var id = props.id, value = props.value, defaultValue = props.defaultValue, disabled = props.disabled, type = props.type;
@@ -50,3 +50,3 @@ var _b = useFocusState({
     }), valued = _c[0], onChange = _c[1];
-    return (React.createElement(TextFieldContainer, { style: style, className: className, ref: containerRef, theme: theme, error: error, active: focused, label: !!label, dense: dense, inline: inline, disabled: disabled, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, leftChildren: leftChildren, rightChildren: rightChildren, underlineDirection: underlineDirection },
+    return (React.createElement(TextFieldContainer, __assign({}, containerProps, { style: style, className: className, ref: containerRef, theme: theme, error: error, active: focused, label: !!label, dense: dense, inline: inline, disabled: disabled, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, leftChildren: leftChildren, rightChildren: rightChildren, underlineDirection: underlineDirection }),
         React.createElement(FloatingLabel, { style: labelStyle, className: labelClassName, htmlFor: id, error: error, active: focused, floating: focused || valued || SPECIAL_TYPES.includes(type), valued: valued, dense: dense, disabled: disabled, leftChildren: !!leftChildren, rightChildren: !!rightChildren }, label),
@@ -53,0 +53,0 @@ React.createElement("input", __assign({}, props, { ref: forwardedRef, onFocus: onFocus, onBlur: onBlur, onChange: onChange, style: inputStyle, className: cn(block({

es/toggle/useCheckboxState.js

 import { useCallback, useState } from "react";
-import { useRefCache } from "@react-md/utils";
 /**
@@ -15,14 +14,10 @@ * A small hook that can be used for controlling the state of a single Checkbox component.
     var _a = useState(defaultChecked), checked = _a[0], setChecked = _a[1];
-    var handler = useRefCache(onChange);
     var handleChange = useCallback(function (event) {
-        var propOnChange = handler.current;
-        if (propOnChange) {
-            propOnChange(event);
+        if (onChange) {
+            onChange(event);
         }
         setChecked(event.currentTarget.checked);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [onChange]);
     return [checked, handleChange, setChecked];
 }
 //# sourceMappingURL=useCheckboxState.js.map

es/useChoice.js

 import { useState, useCallback } from "react";
-import { useRefCache } from "@react-md/utils";
 /**
@@ -15,14 +14,10 @@ * This hook can be used with a radio group or a select element
     var _a = useState(defaultValue), value = _a[0], setValue = _a[1];
-    var handler = useRefCache(onChange);
     var handleChange = useCallback(function (event) {
-        var propOnChange = handler.current;
-        if (propOnChange) {
-            propOnChange(event);
+        if (onChange) {
+            onChange(event);
         }
         setValue(event.currentTarget.value);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [onChange]);
     return [value, handleChange, setValue];
 }
 //# sourceMappingURL=useChoice.js.map

es/useFocusState.js

 import { useCallback } from "react";
-import { useToggle, useRefCache } from "@react-md/utils";
+import { useToggle } from "@react-md/utils";
 /**
@@ -8,6 +8,4 @@ * @private
     var onFocus = _a.onFocus, onBlur = _a.onBlur;
-    var handlers = useRefCache({ onFocus: onFocus, onBlur: onBlur });
     var _b = useToggle(false), focused = _b[0], setFocused = _b[1], setBlurred = _b[2];
     var handleFocus = useCallback(function (event) {
-        var onFocus = handlers.current.onFocus;
         if (onFocus) {
@@ -17,8 +15,4 @@ onFocus(event);
         setFocused();
-    }, 
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setFocused]);
+    }, [setFocused, onFocus]);
     var handleBlur = useCallback(function (event) {
-        var onBlur = handlers.current.onBlur;
         if (onBlur) {
@@ -28,8 +22,5 @@ onBlur(event);
         setBlurred();
-    }, 
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setBlurred]);
+    }, [setBlurred, onBlur]);
     return [focused, handleFocus, handleBlur];
 }
 //# sourceMappingURL=useFocusState.js.map

lib/Form.js

@@ -33,3 +33,2 @@ "use strict";
 var react_1 = __importStar(require("react"));
-var utils_1 = require("@react-md/utils");
 /**
@@ -42,5 +41,3 @@ * This is probably one of the least useful components available as it doesn't
     var _a = providedProps, children = _a.children, forwardedRef = _a.forwardedRef, disablePreventDefault = _a.disablePreventDefault, onSubmit = _a.onSubmit, props = __rest(_a, ["children", "forwardedRef", "disablePreventDefault", "onSubmit"]);
-    var config = utils_1.useRefCache({ onSubmit: onSubmit, disablePreventDefault: disablePreventDefault });
     var handleOnSubmit = react_1.useCallback(function (event) {
-        var _a = config.current, onSubmit = _a.onSubmit, disablePreventDefault = _a.disablePreventDefault;
         if (!disablePreventDefault) {
@@ -52,6 +49,3 @@ event.preventDefault();
         }
-    }, 
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    }, [disablePreventDefault, onSubmit]);
     return (react_1.default.createElement("form", __assign({}, props, { onSubmit: handleOnSubmit, ref: forwardedRef }), children));
@@ -58,0 +52,0 @@ };

lib/index.js

@@ -12,41 +12,11 @@ "use strict";
 __export(require("./Fieldset"));
-var FileInput_1 = require("./file-input/FileInput");
-exports.FileInput = FileInput_1.default;
-__export(require("./file-input/FileInput"));
-var Label_1 = require("./label/Label");
-exports.Label = Label_1.default;
-__export(require("./label/Label"));
-var NativeSelect_1 = require("./select/NativeSelect");
-exports.NativeSelect = NativeSelect_1.default;
-__export(require("./select/NativeSelect"));
-var TextField_1 = require("./text-field/TextField");
-exports.TextField = TextField_1.default;
-__export(require("./text-field/TextField"));
-var TextFieldAddon_1 = require("./text-field/TextFieldAddon");
-exports.TextFieldAddon = TextFieldAddon_1.default;
-__export(require("./text-field/TextFieldAddon"));
-var Password_1 = require("./text-field/Password");
-exports.Password = Password_1.default;
-__export(require("./text-field/Password"));
-var TextArea_1 = require("./text-field/TextArea");
-exports.TextArea = TextArea_1.default;
-__export(require("./text-field/TextArea"));
-var Checkbox_1 = require("./toggle/Checkbox");
-exports.Checkbox = Checkbox_1.default;
-__export(require("./toggle/Checkbox"));
-var Radio_1 = require("./toggle/Radio");
-exports.Radio = Radio_1.default;
-__export(require("./toggle/Radio"));
-var InputToggle_1 = require("./toggle/InputToggle");
-exports.InputToggle = InputToggle_1.default;
-__export(require("./toggle/InputToggle"));
-var Switch_1 = require("./toggle/Switch");
-exports.Switch = Switch_1.default;
-__export(require("./toggle/Switch"));
-var AsyncSwitch_1 = require("./toggle/AsyncSwitch");
-exports.AsyncSwitch = AsyncSwitch_1.default;
-var useCheckboxState_1 = require("./toggle/useCheckboxState");
-exports.useCheckboxState = useCheckboxState_1.default;
+__export(require("./file-input"));
+__export(require("./label"));
+__export(require("./select"));
+__export(require("./text-field"));
+__export(require("./toggle"));
 var useChoice_1 = require("./useChoice");
 exports.useChoice = useChoice_1.default;
+var useSelectState_1 = require("./useSelectState");
+exports.useSelectState = useSelectState_1.default;
 //# sourceMappingURL=index.js.map

lib/label/Label.js

@@ -41,7 +41,7 @@ "use strict";
 var Label = function (providedProps) {
-    var _a = providedProps, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, error = _a.error, active = _a.active, disabled = _a.disabled, props = __rest(_a, ["className", "forwardedRef", "children", "error", "active", "disabled"]);
+    var _a = providedProps, htmlFor = _a.htmlFor, className = _a.className, forwardedRef = _a.forwardedRef, children = _a.children, error = _a.error, active = _a.active, disabled = _a.disabled, Component = _a.component, props = __rest(_a, ["htmlFor", "className", "forwardedRef", "children", "error", "active", "disabled", "component"]);
     if (!children) {
         return null;
     }
-    return (react_1.default.createElement("label", __assign({}, props, { ref: forwardedRef, className: classnames_1.default(block({
+    return (react_1.default.createElement(Component, __assign({}, props, { htmlFor: Component === "label" ? htmlFor : undefined, ref: forwardedRef, className: classnames_1.default(block({
             error: error,
@@ -56,2 +56,3 @@ active: active,
     disabled: false,
+    component: "label",
 };
@@ -72,2 +73,3 @@ Label.defaultProps = defaultProps;
             disabled: PropTypes.bool,
+            component: PropTypes.oneOf(["label", "span"]),
         };
@@ -74,0 +76,0 @@ }

lib/text-field/TextField.js

@@ -50,3 +50,3 @@ "use strict";
 var TextField = function (providedProps) {
-    var _a = providedProps, style = _a.style, className = _a.className, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, theme = _a.theme, error = _a.error, dense = _a.dense, inline = _a.inline, propOnBlur = _a.onBlur, propOnFocus = _a.onFocus, propOnChange = _a.onChange, containerRef = _a.containerRef, forwardedRef = _a.forwardedRef, isLeftAddon = _a.isLeftAddon, isRightAddon = _a.isRightAddon, leftChildren = _a.leftChildren, rightChildren = _a.rightChildren, underlineDirection = _a.underlineDirection, props = __rest(_a, ["style", "className", "inputStyle", "inputClassName", "label", "labelStyle", "labelClassName", "theme", "error", "dense", "inline", "onBlur", "onFocus", "onChange", "containerRef", "forwardedRef", "isLeftAddon", "isRightAddon", "leftChildren", "rightChildren", "underlineDirection"]);
+    var _a = providedProps, style = _a.style, className = _a.className, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, theme = _a.theme, error = _a.error, dense = _a.dense, inline = _a.inline, propOnBlur = _a.onBlur, propOnFocus = _a.onFocus, propOnChange = _a.onChange, containerRef = _a.containerRef, forwardedRef = _a.forwardedRef, isLeftAddon = _a.isLeftAddon, isRightAddon = _a.isRightAddon, leftChildren = _a.leftChildren, rightChildren = _a.rightChildren, underlineDirection = _a.underlineDirection, containerProps = _a.containerProps, props = __rest(_a, ["style", "className", "inputStyle", "inputClassName", "label", "labelStyle", "labelClassName", "theme", "error", "dense", "inline", "onBlur", "onFocus", "onChange", "containerRef", "forwardedRef", "isLeftAddon", "isRightAddon", "leftChildren", "rightChildren", "underlineDirection", "containerProps"]);
     var id = props.id, value = props.value, defaultValue = props.defaultValue, disabled = props.disabled, type = props.type;
@@ -62,3 +62,3 @@ var _b = useFocusState_1.default({
     }), valued = _c[0], onChange = _c[1];
-    return (react_1.default.createElement(TextFieldContainer_1.default, { style: style, className: className, ref: containerRef, theme: theme, error: error, active: focused, label: !!label, dense: dense, inline: inline, disabled: disabled, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, leftChildren: leftChildren, rightChildren: rightChildren, underlineDirection: underlineDirection },
+    return (react_1.default.createElement(TextFieldContainer_1.default, __assign({}, containerProps, { style: style, className: className, ref: containerRef, theme: theme, error: error, active: focused, label: !!label, dense: dense, inline: inline, disabled: disabled, isLeftAddon: isLeftAddon, isRightAddon: isRightAddon, leftChildren: leftChildren, rightChildren: rightChildren, underlineDirection: underlineDirection }),
         react_1.default.createElement(FloatingLabel_1.default, { style: labelStyle, className: labelClassName, htmlFor: id, error: error, active: focused, floating: focused || valued || SPECIAL_TYPES.includes(type), valued: valued, dense: dense, disabled: disabled, leftChildren: !!leftChildren, rightChildren: !!rightChildren }, label),
@@ -65,0 +65,0 @@ react_1.default.createElement("input", __assign({}, props, { ref: forwardedRef, onFocus: onFocus, onBlur: onBlur, onChange: onChange, style: inputStyle, className: classnames_1.default(block({

lib/toggle/useCheckboxState.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var utils_1 = require("@react-md/utils");
 /**
@@ -17,12 +16,8 @@ * A small hook that can be used for controlling the state of a single Checkbox component.
     var _a = react_1.useState(defaultChecked), checked = _a[0], setChecked = _a[1];
-    var handler = utils_1.useRefCache(onChange);
     var handleChange = react_1.useCallback(function (event) {
-        var propOnChange = handler.current;
-        if (propOnChange) {
-            propOnChange(event);
+        if (onChange) {
+            onChange(event);
         }
         setChecked(event.currentTarget.checked);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [onChange]);
     return [checked, handleChange, setChecked];
@@ -29,0 +24,0 @@ }

lib/useChoice.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var utils_1 = require("@react-md/utils");
 /**
@@ -17,12 +16,8 @@ * This hook can be used with a radio group or a select element
     var _a = react_1.useState(defaultValue), value = _a[0], setValue = _a[1];
-    var handler = utils_1.useRefCache(onChange);
     var handleChange = react_1.useCallback(function (event) {
-        var propOnChange = handler.current;
-        if (propOnChange) {
-            propOnChange(event);
+        if (onChange) {
+            onChange(event);
         }
         setValue(event.currentTarget.value);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [onChange]);
     return [value, handleChange, setValue];
@@ -29,0 +24,0 @@ }

lib/useFocusState.js

@@ -10,6 +10,4 @@ "use strict";
     var onFocus = _a.onFocus, onBlur = _a.onBlur;
-    var handlers = utils_1.useRefCache({ onFocus: onFocus, onBlur: onBlur });
     var _b = utils_1.useToggle(false), focused = _b[0], setFocused = _b[1], setBlurred = _b[2];
     var handleFocus = react_1.useCallback(function (event) {
-        var onFocus = handlers.current.onFocus;
         if (onFocus) {
@@ -19,8 +17,4 @@ onFocus(event);
         setFocused();
-    }, 
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setFocused]);
+    }, [setFocused, onFocus]);
     var handleBlur = react_1.useCallback(function (event) {
-        var onBlur = handlers.current.onBlur;
         if (onBlur) {
@@ -30,6 +24,3 @@ onBlur(event);
         setBlurred();
-    }, 
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setBlurred]);
+    }, [setBlurred, onBlur]);
     return [focused, handleFocus, handleBlur];
@@ -36,0 +27,0 @@ }

package.json

 {
   "name": "@react-md/form",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-alpha.10",
   "description": "This package is for creating all the different form input types.",
@@ -46,10 +46,12 @@ "scripts": {
   "dependencies": {
-    "@react-md/button": "^2.0.0-alpha.9",
-    "@react-md/icon": "^2.0.0-alpha.9",
-    "@react-md/progress": "^2.0.0-alpha.9",
-    "@react-md/states": "^2.0.0-alpha.9",
-    "@react-md/theme": "^2.0.0-alpha.9",
-    "@react-md/transition": "^2.0.0-alpha.9",
-    "@react-md/typography": "^2.0.0-alpha.9",
-    "@react-md/utils": "^2.0.0-alpha.9",
+    "@react-md/button": "^2.0.0-alpha.10",
+    "@react-md/icon": "^2.0.0-alpha.10",
+    "@react-md/list": "^2.0.0-alpha.10",
+    "@react-md/portal": "^2.0.0-alpha.10",
+    "@react-md/progress": "^2.0.0-alpha.10",
+    "@react-md/states": "^2.0.0-alpha.10",
+    "@react-md/theme": "^2.0.0-alpha.10",
+    "@react-md/transition": "^2.0.0-alpha.10",
+    "@react-md/typography": "^2.0.0-alpha.10",
+    "@react-md/utils": "^2.0.0-alpha.10",
     "classnames": "^2.2.6"
@@ -66,3 +68,3 @@ },
   },
-  "gitHead": "5dc105d777dd95c5ab6b38509d9c002993bbf4b0"
+  "gitHead": "d42497f9e2e5c6e7f37774e140a5bf80c644081d"
 }

src/index.ts

@@ -7,39 +7,9 @@ export { default as Form } from "./Form";
 
-export { default as FileInput } from "./file-input/FileInput";
-export * from "./file-input/FileInput";
+export * from "./file-input";
+export * from "./label";
+export * from "./select";
+export * from "./text-field";
+export * from "./toggle";
 
-export { default as Label } from "./label/Label";
-export * from "./label/Label";
-
-export { default as NativeSelect } from "./select/NativeSelect";
-export * from "./select/NativeSelect";
-
-export { default as TextField } from "./text-field/TextField";
-export * from "./text-field/TextField";
-export { TextFieldTheme } from "./text-field/TextFieldContainer";
-
-export { default as TextFieldAddon } from "./text-field/TextFieldAddon";
-export * from "./text-field/TextFieldAddon";
-
-export { default as Password } from "./text-field/Password";
-export * from "./text-field/Password";
-
-export { default as TextArea } from "./text-field/TextArea";
-export * from "./text-field/TextArea";
-
-export { default as Checkbox } from "./toggle/Checkbox";
-export * from "./toggle/Checkbox";
-
-export { default as Radio } from "./toggle/Radio";
-export * from "./toggle/Radio";
-
-export { default as InputToggle } from "./toggle/InputToggle";
-export * from "./toggle/InputToggle";
-
-export { default as Switch } from "./toggle/Switch";
-export * from "./toggle/Switch";
-
-export { default as AsyncSwitch } from "./toggle/AsyncSwitch";
-
-export { default as useCheckboxState } from "./toggle/useCheckboxState";
 export { default as useChoice } from "./useChoice";
+export { default as useSelectState } from "./useSelectState";

src/scssVariables.ts

@@ -50,2 +50,12 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-select-native-addon-top": "1rem",
+  "rmd-listbox-z-index": 10,
+  "rmd-listbox-elevation": 8,
+  "rmd-option-focused-styles": { "box-shadow": "inset 0 0 0 2px #2196f3" },
+  "rmd-option-selected-styles": {
+    "background-color": "#0d47a1",
+    color: "#fff",
+  },
+  "rmd-option-selected-offset": "0.5rem",
+  "rmd-option-selected-content": "✓",
+  "rmd-option-horizontal-padding": "1.5rem",
   "rmd-text-field-active-color": "var(--rmd-theme-primary, #9c27b0)",
@@ -52,0 +62,0 @@ "rmd-text-field-light-border-color": "rgba(0, 0, 0, 0.12)",

src/toggle/useCheckboxState.ts

 import { Dispatch, SetStateAction, useCallback, useState } from "react";
-import { useRefCache } from "@react-md/utils";
 
@@ -22,16 +21,15 @@ type ChangeEventHandler = React.ChangeEventHandler<HTMLInputElement>;
   const [checked, setChecked] = useState(defaultChecked);
-  const handler = useRefCache(onChange);
 
-  const handleChange = useCallback<ChangeEventHandler>(event => {
-    const propOnChange = handler.current;
-    if (propOnChange) {
-      propOnChange(event);
-    }
+  const handleChange = useCallback<ChangeEventHandler>(
+    event => {
+      if (onChange) {
+        onChange(event);
+      }
 
-    setChecked(event.currentTarget.checked);
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      setChecked(event.currentTarget.checked);
+    },
+    [onChange]
+  );
 
   return [checked, handleChange, setChecked];
 }

src/useChoice.ts

 import React, { useState, useCallback, Dispatch, SetStateAction } from "react";
-import { useRefCache } from "@react-md/utils";
 
@@ -31,15 +30,14 @@ type InputElement = HTMLInputElement | HTMLSelectElement;
   const [value, setValue] = useState<T>(defaultValue);
-  const handler = useRefCache(onChange);
-  const handleChange = useCallback<ChangeEventHandler<E>>(event => {
-    const propOnChange = handler.current;
-    if (propOnChange) {
-      propOnChange(event);
-    }
+  const handleChange = useCallback<ChangeEventHandler<E>>(
+    event => {
+      if (onChange) {
+        onChange(event);
+      }
 
-    setValue(event.currentTarget.value as T);
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      setValue(event.currentTarget.value as T);
+    },
+    [onChange]
+  );
 
   return [value, handleChange, setValue];
 }

src/useFocusState.ts

 import { useCallback, HTMLAttributes } from "react";
-import { useToggle, useRefCache } from "@react-md/utils";
+import { useToggle } from "@react-md/utils";
 
@@ -8,3 +8,4 @@ type FocusElement =
   | HTMLLabelElement
-  | HTMLSelectElement;
+  | HTMLSelectElement
+  | HTMLDivElement;
 type BlurEventHandler = React.FocusEventHandler<FocusElement>;
@@ -22,3 +23,2 @@ type FocusEventHandler = React.FocusEventHandler<FocusElement>;
 }: Options): [boolean, FocusEventHandler, BlurEventHandler] {
-  const handlers = useRefCache({ onFocus, onBlur });
   const [focused, setFocused, setBlurred] = useToggle(false);
@@ -28,3 +28,2 @@
     event => {
-      const { onFocus } = handlers.current;
       if (onFocus) {
@@ -36,5 +35,3 @@ onFocus(event);
     },
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setFocused]
+    [setFocused, onFocus]
   );
@@ -44,3 +41,2 @@
     event => {
-      const { onBlur } = handlers.current;
       if (onBlur) {
@@ -52,5 +48,3 @@ onBlur(event);
     },
-    // disabled since useRefCache
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setBlurred]
+    [setBlurred, onBlur]
   );
@@ -57,0 +51,0 @@

types/file-input/FileInput.d.ts

 import React, { InputHTMLAttributes, ReactNode } from "react";
 import { ButtonThemeProps } from "@react-md/button";
-import { Omit } from "@react-md/utils";
 declare type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "defaultValue" | "value">;
@@ -5,0 +4,0 @@ export interface FileInputProps extends ButtonThemeProps, InputAttributes {

types/index.d.ts

@@ -5,27 +5,8 @@ export { default as Form } from "./Form";
 export * from "./Fieldset";
-export { default as FileInput } from "./file-input/FileInput";
-export * from "./file-input/FileInput";
-export { default as Label } from "./label/Label";
-export * from "./label/Label";
-export { default as NativeSelect } from "./select/NativeSelect";
-export * from "./select/NativeSelect";
-export { default as TextField } from "./text-field/TextField";
-export * from "./text-field/TextField";
-export { TextFieldTheme } from "./text-field/TextFieldContainer";
-export { default as TextFieldAddon } from "./text-field/TextFieldAddon";
-export * from "./text-field/TextFieldAddon";
-export { default as Password } from "./text-field/Password";
-export * from "./text-field/Password";
-export { default as TextArea } from "./text-field/TextArea";
-export * from "./text-field/TextArea";
-export { default as Checkbox } from "./toggle/Checkbox";
-export * from "./toggle/Checkbox";
-export { default as Radio } from "./toggle/Radio";
-export * from "./toggle/Radio";
-export { default as InputToggle } from "./toggle/InputToggle";
-export * from "./toggle/InputToggle";
-export { default as Switch } from "./toggle/Switch";
-export * from "./toggle/Switch";
-export { default as AsyncSwitch } from "./toggle/AsyncSwitch";
-export { default as useCheckboxState } from "./toggle/useCheckboxState";
+export * from "./file-input";
+export * from "./label";
+export * from "./select";
+export * from "./text-field";
+export * from "./toggle";
 export { default as useChoice } from "./useChoice";
+export { default as useSelectState } from "./useSelectState";

types/label/Label.d.ts

@@ -23,4 +23,10 @@ import React, { HTMLAttributes } from "react";
     active?: boolean;
+    /**
+     * The component to render the label as. This should be the default value of `"label"` 99%
+     * of the time, but can also be rendered as a `"span"` for the `Select` implementation
+     * where it needs to be rendered in a button.
+     */
+    component?: "label" | "span";
 }
 declare const _default: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 export default _default;

types/text-field/Password.d.ts

 import React, { CSSProperties, ReactNode } from "react";
-import { Omit } from "@react-md/utils";
 import { TextFieldProps } from "./TextField";
@@ -4,0 +3,0 @@ export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightChildren"> {

types/text-field/TextField.d.ts

@@ -1,3 +0,2 @@
-import React, { CSSProperties, InputHTMLAttributes, ReactNode, Ref } from "react";
-import { Omit } from "@react-md/utils";
+import React, { CSSProperties, InputHTMLAttributes, ReactNode, Ref, HTMLAttributes } from "react";
 import { TextFieldContainerOptions } from "./TextFieldContainer";
@@ -65,4 +64,10 @@ /**
     containerRef?: Ref<HTMLDivElement>;
+    /**
+     * Any additional html attributes that should be applied to the main container div. This is probably only
+     * going to be used internally so that additional accessibility can be added to text fields for more complex
+     * widgets.
+     */
+    containerProps?: Omit<HTMLAttributes<HTMLDivElement>, "style" | "className">;
 }
 declare const _default: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

types/toggle/InputToggle.d.ts

 import React, { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
 import { InteractionStatesOptions } from "@react-md/states";
-import { Omit } from "@react-md/utils";
 /**
@@ -5,0 +4,0 @@ * The props for a checkbox or radio input element.

types/toggle/Switch.d.ts

 import React, { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
-import { Omit } from "@react-md/utils";
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> {
@@ -4,0 +3,0 @@ /**

types/useFocusState.d.ts

 import { HTMLAttributes } from "react";
-declare type FocusElement = HTMLInputElement | HTMLTextAreaElement | HTMLLabelElement | HTMLSelectElement;
+declare type FocusElement = HTMLInputElement | HTMLTextAreaElement | HTMLLabelElement | HTMLSelectElement | HTMLDivElement;
 declare type BlurEventHandler = React.FocusEventHandler<FocusElement>;
@@ -4,0 +4,0 @@ declare type FocusEventHandler = React.FocusEventHandler<FocusElement>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

675875

increased by35.08%

Number of package files

249

increased by35.33%

Lines of code

10327

increased by41.19%

Worsened metrics

Dependency count

13

increased by18.18%

Number of low supply chain risk alerts

42

increased by23.53%

Dependency changes

• + Added@react-md/list@^2.0.0-alpha.10

• + Added@react-md/portal@^2.0.0-alpha.10

• + Added@react-md/avatar@2.9.1(transitive)

• + Added@react-md/divider@2.9.1(transitive)

• + Added@react-md/list@2.9.1(transitive)

• Updated@react-md/button@^2.0.0-alpha.10

• Updated@react-md/icon@^2.0.0-alpha.10

• Updated@react-md/progress@^2.0.0-alpha.10

• Updated@react-md/states@^2.0.0-alpha.10

• Updated@react-md/theme@^2.0.0-alpha.10

• Updated@react-md/transition@^2.0.0-alpha.10

• Updated@react-md/typography@^2.0.0-alpha.10

• Updated@react-md/utils@^2.0.0-alpha.10