@rmwc/select - npm Package Compare versions

Comparing version 14.0.0-alpha.0 to 14.0.1-alpha.0

dist/readme.js

@@ -30,2 +30,4 @@ "use strict";
             react_1.default.createElement(_1.Select, { label: "Enhanced", enhanced: true, options: ['Cookies', 'Pizza', 'Icecream'] })),
+        react_1.default.createElement(_doc_utils_1.DocsExample, { label: "Enhanced renderToPortal" },
+            react_1.default.createElement(_1.Select, { label: "Enhanced", enhanced: { renderToPortal: true, anchorCorner: 'topLeft' }, options: ['Cookies', 'Pizza', 'Icecream'] })),
         react_1.default.createElement(_doc_utils_1.DocsExample, { label: "With Options" },
@@ -32,0 +34,0 @@ react_1.default.createElement(_1.Select, { label: "With Icon", defaultValue: "Pizza", helpText: "Choose your favorite snack...", icon: "favorite", options: ['Cookies', 'Pizza', 'Icecream'] })),

dist/select-icon/foundation.js

@@ -8,3 +8,3 @@ "use strict";
 var useSelectIconFoundation = function (props) {
-    var _a = base_1.useFoundation({
+    var _a = (0, base_1.useFoundation)({
         props: props,
@@ -11,0 +11,0 @@ elements: { rootEl: true },

dist/select-icon/index.js

@@ -11,6 +11,6 @@ "use strict";
     var apiRef = props.apiRef, rest = tslib_1.__rest(props, ["apiRef"]);
-    var rootEl = foundation_1.useSelectIconFoundation(props).rootEl;
-    var className = base_1.useClassNames(props, ['mdc-select__icon']);
+    var rootEl = (0, foundation_1.useSelectIconFoundation)(props).rootEl;
+    var className = (0, base_1.useClassNames)(props, ['mdc-select__icon']);
     return (react_1.default.createElement(icon_1.Icon, tslib_1.__assign({}, rootEl.props(tslib_1.__assign(tslib_1.__assign({}, rest), { className: className })))));
 };
 exports.SelectIcon = SelectIcon;

dist/select/foundation.js

@@ -10,31 +10,31 @@ "use strict";
     var _a;
-    var _b = tslib_1.__read(react_1.useState(), 2), notchWidth = _b[0], setNotchWidth = _b[1];
-    var _c = tslib_1.__read(react_1.useState(false), 2), lineRippleActive = _c[0], setLineRippleActive = _c[1];
-    var _d = tslib_1.__read(react_1.useState(0), 2), lineRippleCenter = _d[0], setLineRippleCenter = _d[1];
-    var _e = tslib_1.__read(react_1.useState(false), 2), floatLabel = _e[0], setFloatLabel = _e[1];
-    var _f = tslib_1.__read(react_1.useState(false), 2), menuOpen = _f[0], setMenuOpen = _f[1];
-    var _g = tslib_1.__read(react_1.useState(''), 2), selectedTextContent = _g[0], setSelectedTextContent = _g[1];
-    var selectedIndex = react_1.useRef(-1);
-    var floatingLabel = react_1.useRef();
+    var _b = tslib_1.__read((0, react_1.useState)(), 2), notchWidth = _b[0], setNotchWidth = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), lineRippleActive = _c[0], setLineRippleActive = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)(0), 2), lineRippleCenter = _d[0], setLineRippleCenter = _d[1];
+    var _e = tslib_1.__read((0, react_1.useState)(false), 2), floatLabel = _e[0], setFloatLabel = _e[1];
+    var _f = tslib_1.__read((0, react_1.useState)(false), 2), menuOpen = _f[0], setMenuOpen = _f[1];
+    var _g = tslib_1.__read((0, react_1.useState)(''), 2), selectedTextContent = _g[0], setSelectedTextContent = _g[1];
+    var selectedIndex = (0, react_1.useRef)(-1);
+    var floatingLabel = (0, react_1.useRef)();
     var setFloatingLabel = function (api) {
         floatingLabel.current = api;
     };
-    var menu = react_1.useRef();
+    var menu = (0, react_1.useRef)();
     var setMenu = function (api) {
         menu.current = api;
     };
-    var anchor = react_1.useRef(null);
+    var anchor = (0, react_1.useRef)(null);
     var setAnchor = function (el) {
         anchor.current = el;
     };
-    var leadingIcon = react_1.useRef();
+    var leadingIcon = (0, react_1.useRef)();
     var setLeadingIcon = function (api) {
         leadingIcon.current = api;
     };
-    var nativeControl = react_1.useRef();
+    var nativeControl = (0, react_1.useRef)();
     var setNativeControl = function (el) {
         nativeControl.current = el;
     };
-    var silenceChange = react_1.useRef(false);
-    var _h = base_1.useFoundation({
+    var silenceChange = (0, react_1.useRef)(false);
+    var _h = (0, base_1.useFoundation)({
         props: props,
@@ -229,3 +229,3 @@ elements: {
     var onFocus = props.onFocus;
-    var handleFocus = react_1.useCallback(function (evt) {
+    var handleFocus = (0, react_1.useCallback)(function (evt) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
@@ -235,3 +235,3 @@ foundation.handleFocus();
     var onBlur = props.onBlur;
-    var handleBlur = react_1.useCallback(function (evt) {
+    var handleBlur = (0, react_1.useCallback)(function (evt) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(evt);
@@ -241,7 +241,7 @@ foundation.handleBlur();
     var onChange = props.onChange;
-    var handleChange = react_1.useCallback(function (evt) {
+    var handleChange = (0, react_1.useCallback)(function (evt) {
         onChange === null || onChange === void 0 ? void 0 : onChange(evt);
         foundation.handleChange();
     }, [onChange, foundation]);
-    var handleClick = react_1.useCallback(function (evt) {
+    var handleClick = (0, react_1.useCallback)(function (evt) {
         var _a, _b;
@@ -270,14 +270,14 @@ // Fixes an issue where clicking on the select when it
     var onKeyDown = props.onKeyDown;
-    var handleKeydown = react_1.useCallback(function (evt) {
+    var handleKeydown = (0, react_1.useCallback)(function (evt) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
         foundation.handleKeydown(evt);
     }, [foundation, onKeyDown]);
-    var handleMenuSelected = react_1.useCallback(function (index) {
+    var handleMenuSelected = (0, react_1.useCallback)(function (index) {
         selectedIndex.current = index;
         foundation.handleMenuItemAction(index);
     }, [foundation]);
-    var handleMenuOpened = react_1.useCallback(function () {
+    var handleMenuOpened = (0, react_1.useCallback)(function () {
         foundation.handleMenuOpened();
     }, [foundation]);
-    var handleMenuClosed = react_1.useCallback(function () {
+    var handleMenuClosed = (0, react_1.useCallback)(function () {
         setMenuOpen(false);
@@ -302,3 +302,3 @@ foundation.handleMenuClosed();
     // - Jump through stupid hoops to prevent the event from firing
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         silenceChange.current = true;
@@ -318,3 +318,3 @@ if (value !== undefined && value !== foundationValue) {
         }
-        base_1.raf(function () {
+        (0, base_1.raf)(function () {
             silenceChange.current = false;
@@ -324,7 +324,7 @@ });
     // Disabled
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         foundation.setDisabled(!!props.disabled);
     }, [foundation, props.disabled]);
     // Set anchor
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         var _a;
@@ -331,0 +331,0 @@ rootEl.ref && ((_a = menu.current) === null || _a === void 0 ? void 0 : _a.setAnchorElement(rootEl.ref));

dist/select/index.d.ts

@@ -10,2 +10,5 @@ import * as RMWC from '@rmwc/types';
 }
+export declare type EnhancedType = boolean | (MenuProps & {
+    ref?: React.Ref<HTMLElement>;
+});
 /** A Select Component */
@@ -34,5 +37,3 @@ export interface SelectProps {
     /** Renders a non native / enhanced dropdown */
-    enhanced?: boolean | (MenuProps & {
-        ref?: React.Ref<HTMLElement>;
-    });
+    enhanced?: EnhancedType;
     /** Props for the root element. By default, additional props spread to the native select element.  */
@@ -39,0 +40,0 @@ rootProps?: Object;

dist/select/index.js

@@ -24,3 +24,3 @@ "use strict";
             if (typeof opt !== 'object') {
-                throw new Error("Encountered non object for Select " + opt);
+                throw new Error("Encountered non object for Select ".concat(opt));
             }
@@ -56,3 +56,3 @@ return tslib_1.__assign(tslib_1.__assign({}, opt), { options: createSelectOptions(opt.options) });
     var isEmptyValue = !props.value && !props.defaultValue;
-    return (react_1.default.createElement("select", tslib_1.__assign({ tabIndex: 0 }, rest, { ref: elementRef, className: "rmwc-select__native-control " + (rest.className || '') }),
+    return (react_1.default.createElement("select", tslib_1.__assign({ tabIndex: 0 }, rest, { ref: elementRef, className: "rmwc-select__native-control ".concat(rest.className || '') }),
         (props.placeholder !== undefined || isEmptyValue) && (react_1.default.createElement("option", { value: "", disabled: isEmptyValue }, placeholder)),
@@ -80,3 +80,3 @@ !!selectOptions &&
 }
-var AnchorEl = ripple_1.withRipple({ surface: false })(function (props) {
+var AnchorEl = (0, ripple_1.withRipple)({ surface: false })(function (props) {
     return react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, props));
@@ -87,7 +87,7 @@ });
     var currentIndex = 0;
-    var className = base_1.useClassNames(props, ['mdc-select__menu']);
+    var className = (0, base_1.useClassNames)(props, ['mdc-select__menu']);
     var renderOption = function (_a) {
         var label = _a.label, option = _a.option;
         currentIndex += 1;
-        return (react_1.default.createElement(menu_1.MenuItem, tslib_1.__assign({ key: label + "-" + option.value, activated: value !== undefined
+        return (react_1.default.createElement(menu_1.MenuItem, tslib_1.__assign({ key: "".concat(label, "-").concat(option.value), activated: value !== undefined
                 ? option.value === value
@@ -107,3 +107,6 @@ : currentIndex - 1 === selectedIndex }, option, { "data-value": option.value }),
                         var label = _a.label, option = tslib_1.__rest(_a, ["label"]);
-                        return renderOption({ label: label, option: option });
+                        return renderOption({
+                            label: label,
+                            option: option
+                        });
                     })),
@@ -116,8 +119,12 @@ i < selectOptions.length - 1 && react_1.default.createElement(list_1.ListDivider, null)));
 });
-exports.Select = base_1.createComponent(function Select(props, ref) {
+var EnhancedMenuWrapper = function (_a) {
+    var enhanced = _a.enhanced, children = _a.children;
+    return enhanced ? (react_1.default.createElement(menu_1.MenuSurfaceAnchor, null, children)) : (react_1.default.createElement(react_1.default.Fragment, null, children));
+};
+exports.Select = (0, base_1.createComponent)(function Select(props, ref) {
     var placeholder = props.placeholder, children = props.children, value = props.value, outlined = props.outlined, _a = props.label, label = _a === void 0 ? '' : _a, _b = props.options, options = _b === void 0 ? [] : _b, _c = props.rootProps, rootProps = _c === void 0 ? {} : _c, enhanced = props.enhanced, icon = props.icon, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, invalid = props.invalid, inputRef = props.inputRef, helpText = props.helpText, foundationRef = props.foundationRef, rest = tslib_1.__rest(props, ["placeholder", "children", "value", "outlined", "label", "options", "rootProps", "enhanced", "icon", "onChange", "onFocus", "onBlur", "onKeyDown", "invalid", "inputRef", "helpText", "foundationRef"]);
     var selectOptions = createSelectOptions(options);
-    var _d = foundation_1.useSelectFoundation(props), rootEl = _d.rootEl, anchorEl = _d.anchorEl, notchWidth = _d.notchWidth, menuOpen = _d.menuOpen, selectedTextContent = _d.selectedTextContent, lineRippleActive = _d.lineRippleActive, lineRippleCenter = _d.lineRippleCenter, floatLabel = _d.floatLabel, setFloatingLabel = _d.setFloatingLabel, setNativeControl = _d.setNativeControl, setLeadingIcon = _d.setLeadingIcon, selectedIndex = _d.selectedIndex, setMenu = _d.setMenu, handleFocus = _d.handleFocus, handleBlur = _d.handleBlur, handleClick = _d.handleClick, handleChange = _d.handleChange, handleKeydown = _d.handleKeydown, handleMenuClosed = _d.handleMenuClosed, handleMenuOpened = _d.handleMenuOpened, handleMenuSelected = _d.handleMenuSelected;
-    var id = base_1.useId('select', props);
-    var className = base_1.useClassNames(props, [
+    var _d = (0, foundation_1.useSelectFoundation)(props), rootEl = _d.rootEl, anchorEl = _d.anchorEl, notchWidth = _d.notchWidth, menuOpen = _d.menuOpen, selectedTextContent = _d.selectedTextContent, lineRippleActive = _d.lineRippleActive, lineRippleCenter = _d.lineRippleCenter, floatLabel = _d.floatLabel, setFloatingLabel = _d.setFloatingLabel, setNativeControl = _d.setNativeControl, setLeadingIcon = _d.setLeadingIcon, selectedIndex = _d.selectedIndex, setMenu = _d.setMenu, handleFocus = _d.handleFocus, handleBlur = _d.handleBlur, handleClick = _d.handleClick, handleChange = _d.handleChange, handleKeydown = _d.handleKeydown, handleMenuClosed = _d.handleMenuClosed, handleMenuOpened = _d.handleMenuOpened, handleMenuSelected = _d.handleMenuSelected;
+    var id = (0, base_1.useId)('select', props);
+    var className = (0, base_1.useClassNames)(props, [
         'mdc-select',
@@ -144,3 +151,3 @@ {
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(EnhancedMenuWrapper, { enhanced: enhanced },
         react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, rootProps, { element: rootEl, ref: ref, className: className }),
@@ -172,5 +179,5 @@ react_1.default.createElement(AnchorEl, { className: "mdc-select__anchor", role: "button", "aria-haspopup": "listbox", element: anchorEl, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onKeyDown: handleKeydown, onChange: handleChange,
 /** A help text component */
-exports.SelectHelperText = base_1.createComponent(function SelectHelperText(props, ref) {
+exports.SelectHelperText = (0, base_1.createComponent)(function SelectHelperText(props, ref) {
     var persistent = props.persistent, validationMsg = props.validationMsg, rest = tslib_1.__rest(props, ["persistent", "validationMsg"]);
-    var className = base_1.useClassNames(props, [
+    var className = (0, base_1.useClassNames)(props, [
         'mdc-select-helper-text',
@@ -177,0 +184,0 @@ {

next/readme.js

@@ -27,2 +27,4 @@ import { __read } from "tslib";
             React.createElement(Select, { label: "Enhanced", enhanced: true, options: ['Cookies', 'Pizza', 'Icecream'] })),
+        React.createElement(DocsExample, { label: "Enhanced renderToPortal" },
+            React.createElement(Select, { label: "Enhanced", enhanced: { renderToPortal: true, anchorCorner: 'topLeft' }, options: ['Cookies', 'Pizza', 'Icecream'] })),
         React.createElement(DocsExample, { label: "With Options" },
@@ -29,0 +31,0 @@ React.createElement(Select, { label: "With Icon", defaultValue: "Pizza", helpText: "Choose your favorite snack...", icon: "favorite", options: ['Cookies', 'Pizza', 'Icecream'] })),

next/select/index.d.ts

@@ -10,2 +10,5 @@ import * as RMWC from '@rmwc/types';
 }
+export declare type EnhancedType = boolean | (MenuProps & {
+    ref?: React.Ref<HTMLElement>;
+});
 /** A Select Component */
@@ -34,5 +37,3 @@ export interface SelectProps {
     /** Renders a non native / enhanced dropdown */
-    enhanced?: boolean | (MenuProps & {
-        ref?: React.Ref<HTMLElement>;
-    });
+    enhanced?: EnhancedType;
     /** Props for the root element. By default, additional props spread to the native select element.  */
@@ -39,0 +40,0 @@ rootProps?: Object;

next/select/index.js

@@ -7,3 +7,3 @@ import { __assign, __rest } from "tslib";
 import { NotchedOutline } from '@rmwc/notched-outline';
-import { Menu, MenuItem, MenuItems } from '@rmwc/menu';
+import { Menu, MenuItem, MenuItems, MenuSurfaceAnchor } from '@rmwc/menu';
 import { ListGroup, ListGroupSubheader, ListDivider } from '@rmwc/list';
@@ -22,3 +22,3 @@ import { withRipple } from '@rmwc/ripple';
             if (typeof opt !== 'object') {
-                throw new Error("Encountered non object for Select " + opt);
+                throw new Error("Encountered non object for Select ".concat(opt));
             }
@@ -54,3 +54,3 @@ return __assign(__assign({}, opt), { options: createSelectOptions(opt.options) });
     var isEmptyValue = !props.value && !props.defaultValue;
-    return (React.createElement("select", __assign({ tabIndex: 0 }, rest, { ref: elementRef, className: "rmwc-select__native-control " + (rest.className || '') }),
+    return (React.createElement("select", __assign({ tabIndex: 0 }, rest, { ref: elementRef, className: "rmwc-select__native-control ".concat(rest.className || '') }),
         (props.placeholder !== undefined || isEmptyValue) && (React.createElement("option", { value: "", disabled: isEmptyValue }, placeholder)),
@@ -88,3 +88,3 @@ !!selectOptions &&
         currentIndex += 1;
-        return (React.createElement(MenuItem, __assign({ key: label + "-" + option.value, activated: value !== undefined
+        return (React.createElement(MenuItem, __assign({ key: "".concat(label, "-").concat(option.value), activated: value !== undefined
                 ? option.value === value
@@ -104,3 +104,6 @@ : currentIndex - 1 === selectedIndex }, option, { "data-value": option.value }),
                         var label = _a.label, option = __rest(_a, ["label"]);
-                        return renderOption({ label: label, option: option });
+                        return renderOption({
+                            label: label,
+                            option: option
+                        });
                     })),
@@ -113,2 +116,6 @@ i < selectOptions.length - 1 && React.createElement(ListDivider, null)));
 });
+var EnhancedMenuWrapper = function (_a) {
+    var enhanced = _a.enhanced, children = _a.children;
+    return enhanced ? (React.createElement(MenuSurfaceAnchor, null, children)) : (React.createElement(React.Fragment, null, children));
+};
 export var Select = createComponent(function Select(props, ref) {
@@ -141,3 +148,3 @@ var placeholder = props.placeholder, children = props.children, value = props.value, outlined = props.outlined, _a = props.label, label = _a === void 0 ? '' : _a, _b = props.options, options = _b === void 0 ? [] : _b, _c = props.rootProps, rootProps = _c === void 0 ? {} : _c, enhanced = props.enhanced, icon = props.icon, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, invalid = props.invalid, inputRef = props.inputRef, helpText = props.helpText, foundationRef = props.foundationRef, rest = __rest(props, ["placeholder", "children", "value", "outlined", "label", "options", "rootProps", "enhanced", "icon", "onChange", "onFocus", "onBlur", "onKeyDown", "invalid", "inputRef", "helpText", "foundationRef"]);
     };
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(EnhancedMenuWrapper, { enhanced: enhanced },
         React.createElement(Tag, __assign({}, rootProps, { element: rootEl, ref: ref, className: className }),
@@ -144,0 +151,0 @@ React.createElement(AnchorEl, { className: "mdc-select__anchor", role: "button", "aria-haspopup": "listbox", element: anchorEl, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onKeyDown: handleKeydown, onChange: handleChange,

package.json

 {
   "name": "@rmwc/select",
-  "version": "14.0.0-alpha.0",
+  "version": "14.0.1-alpha.0",
   "description": "RMWC Select component",
@@ -40,13 +40,13 @@ "main": "dist/index.js",
     "@material/select": "^14.0.0",
-    "@rmwc/base": "^14.0.0-alpha.0",
-    "@rmwc/floating-label": "^14.0.0-alpha.0",
-    "@rmwc/icon": "^14.0.0-alpha.0",
-    "@rmwc/line-ripple": "^14.0.0-alpha.0",
-    "@rmwc/list": "^14.0.0-alpha.0",
-    "@rmwc/menu": "^14.0.0-alpha.0",
-    "@rmwc/notched-outline": "^14.0.0-alpha.0",
-    "@rmwc/ripple": "^14.0.0-alpha.0",
-    "@rmwc/types": "^14.0.0-alpha.0"
+    "@rmwc/base": "^14.0.1-alpha.0",
+    "@rmwc/floating-label": "^14.0.1-alpha.0",
+    "@rmwc/icon": "^14.0.1-alpha.0",
+    "@rmwc/line-ripple": "^14.0.1-alpha.0",
+    "@rmwc/list": "^14.0.1-alpha.0",
+    "@rmwc/menu": "^14.0.1-alpha.0",
+    "@rmwc/notched-outline": "^14.0.1-alpha.0",
+    "@rmwc/ripple": "^14.0.1-alpha.0",
+    "@rmwc/types": "^14.0.1-alpha.0"
   },
   "gitHead": "d9befec0e3b258864b71686eecd16c16feb43cf1"
 }

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

107752

increased by1.73%

Lines of code

1871

increased by1.46%

Dependency changes

• Updated@rmwc/base@^14.0.1-alpha.0

• Updated@rmwc/floating-label@^14.0.1-alpha.0

• Updated@rmwc/icon@^14.0.1-alpha.0

• Updated@rmwc/line-ripple@^14.0.1-alpha.0

• Updated@rmwc/list@^14.0.1-alpha.0

• Updated@rmwc/menu@^14.0.1-alpha.0

• Updated@rmwc/notched-outline@^14.0.1-alpha.0

• Updated@rmwc/ripple@^14.0.1-alpha.0

• Updated@rmwc/types@^14.0.1-alpha.0