@clayui/form - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+# [3.3.0](https://github.com/liferay/clay/tree/master/packages/clay-form/compare/@clayui/form@3.2.0...@clayui/form@3.3.0) (2020-01-20)
+
+### Bug Fixes
+
+-   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/50b5a41))
+
+### Features
+
+-   **select:** add optgroups for select ([5ee50b2](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/5ee50b2))
+
 ## [3.2.1](https://github.com/liferay/clay/tree/master/packages/clay-form/compare/@clayui/form@3.2.0...@clayui/form@3.2.1) (2019-12-05)
@@ -8,0 +18,0 @@

lib/Checkbox.js

@@ -10,6 +10,4 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,4 +33,5 @@
 
-  var inputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+  var inputRef = _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
     if (inputRef.current) {
@@ -42,2 +41,3 @@ inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
+
   return _react.default.createElement("div", _extends({}, containerProps, {
@@ -44,0 +44,0 @@ className: (0, _classnames.default)('custom-control custom-checkbox', containerProps.className, {

lib/Form.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 interface IGroup extends React.HTMLAttributes<HTMLDivElement> {
@@ -3,0 +3,0 @@ small?: boolean;

lib/Form.js

@@ -12,6 +12,4 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +23,3 @@
 
-var Group = React.forwardRef(function (_ref, ref) {
+var Group = _react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -32,3 +30,3 @@ className = _ref.className,
 
-  return React.createElement("div", _extends({}, otherProps, {
+  return _react.default.createElement("div", _extends({}, otherProps, {
     className: (0, _classnames.default)('form-group', {
@@ -40,4 +38,6 @@ 'form-group-sm': small
 });
+
 Group.displayName = 'Group';
-var Text = React.forwardRef(function (_ref2, ref) {
+
+var Text = _react.default.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
@@ -47,3 +47,3 @@ className = _ref2.className,
 
-  return React.createElement("div", _extends({}, otherProps, {
+  return _react.default.createElement("div", _extends({}, otherProps, {
     className: (0, _classnames.default)('form-text', className),
@@ -53,4 +53,6 @@ ref: ref
 });
+
 Text.displayName = 'Text';
-var FeedbackGroup = React.forwardRef(function (_ref3, ref) {
+
+var FeedbackGroup = _react.default.forwardRef(function (_ref3, ref) {
   var children = _ref3.children,
@@ -60,3 +62,3 @@ className = _ref3.className,
 
-  return React.createElement("div", _extends({}, otherProps, {
+  return _react.default.createElement("div", _extends({}, otherProps, {
     className: (0, _classnames.default)('form-feedback-group', className),
@@ -66,4 +68,6 @@ ref: ref
 });
+
 FeedbackGroup.displayName = 'FeedbackGroup';
-var FeedbackItem = React.forwardRef(function (_ref4, ref) {
+
+var FeedbackItem = _react.default.forwardRef(function (_ref4, ref) {
   var children = _ref4.children,
@@ -73,3 +77,3 @@ className = _ref4.className,
 
-  return React.createElement("div", _extends({}, otherProps, {
+  return _react.default.createElement("div", _extends({}, otherProps, {
     className: (0, _classnames.default)('form-feedback-item', className),
@@ -79,4 +83,6 @@ ref: ref
 });
+
 FeedbackItem.displayName = 'FeedbackItem';
-var FeedbackIndicator = React.forwardRef(function (_ref5, ref) {
+
+var FeedbackIndicator = _react.default.forwardRef(function (_ref5, ref) {
   var className = _ref5.className,
@@ -87,6 +93,6 @@ spritemap = _ref5.spritemap,
 
-  return React.createElement("span", _extends({}, otherProps, {
+  return _react.default.createElement("span", _extends({}, otherProps, {
     className: (0, _classnames.default)('form-feedback-indicator', 'inline-item-before', className),
     ref: ref
-  }), React.createElement(_icon.default, {
+  }), _react.default.createElement(_icon.default, {
     spritemap: spritemap,
@@ -96,11 +102,14 @@ symbol: symbol
 });
+
 FeedbackIndicator.displayName = 'FeedbackIndicator';
-var ClayForm = React.forwardRef(function (_ref6, ref) {
+
+var ClayForm = _react.default.forwardRef(function (_ref6, ref) {
   var children = _ref6.children,
       otherProps = _objectWithoutProperties(_ref6, ["children"]);
 
-  return React.createElement("form", _extends({}, otherProps, {
+  return _react.default.createElement("form", _extends({}, otherProps, {
     ref: ref
   }), children);
 });
+
 ClayForm.displayName = 'ClayForm';
@@ -107,0 +116,0 @@

lib/Select.d.ts

@@ -1,6 +0,8 @@
-import React, { OptionHTMLAttributes, SelectHTMLAttributes } from 'react';
-declare const Option: React.FunctionComponent<OptionHTMLAttributes<HTMLOptionElement>>;
-declare const ClaySelect: React.FunctionComponent<SelectHTMLAttributes<HTMLSelectElement>> & {
+import React from 'react';
+declare const OptGroup: React.FunctionComponent<React.OptgroupHTMLAttributes<HTMLOptGroupElement>>;
+declare const Option: React.FunctionComponent<React.OptionHTMLAttributes<HTMLOptionElement>>;
+declare const ClaySelect: React.FunctionComponent<React.SelectHTMLAttributes<HTMLSelectElement>> & {
+    OptGroup: typeof OptGroup;
     Option: typeof Option;
 };
 export default ClaySelect;

lib/Select.js

@@ -20,13 +20,20 @@ "use strict";
 
-var Option = function Option(_ref) {
-  var label = _ref.label,
-      otherProps = _objectWithoutProperties(_ref, ["label"]);
+var OptGroup = function OptGroup(_ref) {
+  var children = _ref.children,
+      otherProps = _objectWithoutProperties(_ref, ["children"]);
 
+  return _react.default.createElement("optgroup", otherProps, children);
+};
+
+var Option = function Option(_ref2) {
+  var label = _ref2.label,
+      otherProps = _objectWithoutProperties(_ref2, ["label"]);
+
   return _react.default.createElement("option", otherProps, label);
 };
 
-var ClaySelect = function ClaySelect(_ref2) {
-  var children = _ref2.children,
-      className = _ref2.className,
-      otherProps = _objectWithoutProperties(_ref2, ["children", "className"]);
+var ClaySelect = function ClaySelect(_ref3) {
+  var children = _ref3.children,
+      className = _ref3.className,
+      otherProps = _objectWithoutProperties(_ref3, ["children", "className"]);
 
@@ -38,4 +45,5 @@ return _react.default.createElement("select", _extends({}, otherProps, {
 
+ClaySelect.OptGroup = OptGroup;
 ClaySelect.Option = Option;
 var _default = ClaySelect;
 exports.default = _default;

lib/SelectWithOption.d.ts

 import React from 'react';
 import Select from './Select';
 interface IProps extends React.ComponentProps<typeof Select> {
-    options: Array<React.ComponentProps<typeof Select.Option>>;
+    options: Array<(React.ComponentProps<typeof Select.Option> | React.ComponentProps<typeof Select.OptGroup>) & {
+        options?: Array<React.ComponentProps<typeof Select.Option>>;
+        type?: 'group';
+    }>;
 }
 declare const ClaySelectWithOption: React.FunctionComponent<IProps>;
 export default ClaySelectWithOption;

lib/SelectWithOption.js

@@ -26,2 +26,12 @@ "use strict";
   return _react.default.createElement(_Select.default, otherProps, options.map(function (option, index) {
+    if (option.type === 'group') {
+      return _react.default.createElement(_Select.default.OptGroup, {
+        label: option.label
+      }, option.options && option.options.map(function (item, j) {
+        return _react.default.createElement(_Select.default.Option, _extends({}, item, {
+          key: j
+        }));
+      }));
+    }
+
     return _react.default.createElement(_Select.default.Option, _extends({}, option, {
@@ -28,0 +38,0 @@ key: index

package.json

 {
 	"name": "@clayui/form",
-	"version": "3.2.1",
+	"version": "3.3.0",
 	"description": "ClayForm component",
@@ -29,3 +29,3 @@ "license": "BSD-3-Clause",
 	"dependencies": {
-		"@clayui/icon": "^3.0.1",
+		"@clayui/icon": "^3.0.2",
 		"classnames": "^2.2.6"
@@ -41,3 +41,3 @@ },
 	],
-	"gitHead": "df13196d448cb28438003716c4bae275b793dec1"
+	"gitHead": "c57d995c58f23d16de65faf6cc958227421b9fa3"
 }

No alert changes

Improved metrics

Total package byte prevSize

61256

increased by1.75%

Lines of code

1360

increased by3.03%

Dependency changes

• Updated@clayui/icon@^3.0.2