@clayui/form - npm Package Compare versions

Comparing version 3.7.0 to 3.7.1

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [3.7.1](https://github.com/liferay/clay/compare/@clayui/form@3.7.0...@clayui/form@3.7.1) (2020-04-24)
+
+### Bug Fixes
+
+-   **@clayui/form:** Add prop type to bypass generator bug ([94d4680](https://github.com/liferay/clay/commit/94d4680))
+-   Fix accessibility issues ([5e09db0](https://github.com/liferay/clay/commit/5e09db0))
+
 # [3.7.0](https://github.com/liferay/clay/tree/master/packages/clay-form/compare/@clayui/form@3.6.0...@clayui/form@3.7.0) (2020-03-26)
@@ -11,3 +18,3 @@
 
--   **@clayui/form:** DualListbox & Selectbox ([0ad5de4](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/0ad5de4))
+-   **@clayui/form:** DualListbox & Selectbox ([0ad5de4](https://github.com/liferay/clay/commit/0ad5de4))
 
@@ -18,33 +25,33 @@ # 3.6.0 (2020-02-28)
 
--   bump all components to alpha.1 ([afabdec](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/afabdec))
--   ignore case when sorting props ([7c9ae28](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/7c9ae28))
--   normalize names of components ([3a0abea](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/3a0abea))
--   update components to include 'types' and 'ts:main' package keys ([9e24b59](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/9e24b59))
--   **@clayui/form:** add containerRenderer API on InputWithAutocomplete to pass to ClayAutocomplete ([ad1e49c](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/ad1e49c))
--   **@clayui/form:** apply requested changes ([076feac](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/076feac))
--   **@clayui/form:** fix source formatting issues ([7c39d28](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/7c39d28))
--   **@clayui/form:** remove stuck value from Checkbox ([db565b1](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/db565b1))
--   **@clayui/form:** use FocusScope component ([e6f13f6](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/e6f13f6))
--   **@clayui/shared:** add focus control by left and right arrow keys ([e314419](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/e314419))
--   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/50b5a41))
--   **form:** break multi-select into low-level components ([5c52a5d](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/5c52a5d))
--   **form:** remove ClayInputWithAutocomplete and move MultiSelect to its own package ([a91c8e3](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/a91c8e3))
--   **muli-select:** inputName should be optional ([7ede309](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/7ede309))
--   **multi-select:** allow for event callbacks on input element ([dd3d47e](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/dd3d47e))
+-   bump all components to alpha.1 ([afabdec](https://github.com/liferay/clay/commit/afabdec))
+-   ignore case when sorting props ([7c9ae28](https://github.com/liferay/clay/commit/7c9ae28))
+-   normalize names of components ([3a0abea](https://github.com/liferay/clay/commit/3a0abea))
+-   update components to include 'types' and 'ts:main' package keys ([9e24b59](https://github.com/liferay/clay/commit/9e24b59))
+-   **@clayui/form:** add containerRenderer API on InputWithAutocomplete to pass to ClayAutocomplete ([ad1e49c](https://github.com/liferay/clay/commit/ad1e49c))
+-   **@clayui/form:** apply requested changes ([076feac](https://github.com/liferay/clay/commit/076feac))
+-   **@clayui/form:** fix source formatting issues ([7c39d28](https://github.com/liferay/clay/commit/7c39d28))
+-   **@clayui/form:** remove stuck value from Checkbox ([db565b1](https://github.com/liferay/clay/commit/db565b1))
+-   **@clayui/form:** use FocusScope component ([e6f13f6](https://github.com/liferay/clay/commit/e6f13f6))
+-   **@clayui/shared:** add focus control by left and right arrow keys ([e314419](https://github.com/liferay/clay/commit/e314419))
+-   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/commit/50b5a41))
+-   **form:** break multi-select into low-level components ([5c52a5d](https://github.com/liferay/clay/commit/5c52a5d))
+-   **form:** remove ClayInputWithAutocomplete and move MultiSelect to its own package ([a91c8e3](https://github.com/liferay/clay/commit/a91c8e3))
+-   **muli-select:** inputName should be optional ([7ede309](https://github.com/liferay/clay/commit/7ede309))
+-   **multi-select:** allow for event callbacks on input element ([dd3d47e](https://github.com/liferay/clay/commit/dd3d47e))
 
 ### Features
 
--   **@clayui/form:** add missing hidden input element ([4e1c71f](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/4e1c71f))
--   add the `<ClayForm.Input />` experimental component ([72e5ddf](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/72e5ddf))
--   **@clayui/form:** add `forwardRef` support for `<ClayForm />` ([f5f3e7c](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/f5f3e7c))
--   **@clayui/form:** Adds missing size properties on Form and Input component ([753249b](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/753249b))
--   **@clayui/form:** adds the Clear All specification in multi-select ([331387c](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/331387c))
--   **@clayui/form:** create new toggle component ([8abc13d](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/8abc13d))
--   **clay-form:** create high-level InputWithAutocomplete component ([692610a](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/692610a))
--   **clay-form:** create high-level multi-select component ([feb3abc](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/feb3abc))
--   **clay-form:** export an actual <form> element ([aa71686](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/aa71686))
--   update react-testing-library to be @testing-library/react ([bd78145](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/bd78145))
--   **form:** add helper components for markup ([3ce63d4](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/3ce63d4))
--   **management-toolbar:** add placeholder prop for search input ([9056774](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/9056774))
--   **select:** add optgroups for select ([5ee50b2](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/5ee50b2))
+-   **@clayui/form:** add missing hidden input element ([4e1c71f](https://github.com/liferay/clay/commit/4e1c71f))
+-   add the `<ClayForm.Input />` experimental component ([72e5ddf](https://github.com/liferay/clay/commit/72e5ddf))
+-   **@clayui/form:** add `forwardRef` support for `<ClayForm />` ([f5f3e7c](https://github.com/liferay/clay/commit/f5f3e7c))
+-   **@clayui/form:** Adds missing size properties on Form and Input component ([753249b](https://github.com/liferay/clay/commit/753249b))
+-   **@clayui/form:** adds the Clear All specification in multi-select ([331387c](https://github.com/liferay/clay/commit/331387c))
+-   **@clayui/form:** create new toggle component ([8abc13d](https://github.com/liferay/clay/commit/8abc13d))
+-   **clay-form:** create high-level InputWithAutocomplete component ([692610a](https://github.com/liferay/clay/commit/692610a))
+-   **clay-form:** create high-level multi-select component ([feb3abc](https://github.com/liferay/clay/commit/feb3abc))
+-   **clay-form:** export an actual <form> element ([aa71686](https://github.com/liferay/clay/commit/aa71686))
+-   update react-testing-library to be @testing-library/react ([bd78145](https://github.com/liferay/clay/commit/bd78145))
+-   **form:** add helper components for markup ([3ce63d4](https://github.com/liferay/clay/commit/3ce63d4))
+-   **management-toolbar:** add placeholder prop for search input ([9056774](https://github.com/liferay/clay/commit/9056774))
+-   **select:** add optgroups for select ([5ee50b2](https://github.com/liferay/clay/commit/5ee50b2))
 
@@ -55,3 +62,3 @@ # [3.5.0](https://github.com/liferay/clay/tree/master/packages/clay-form/compare/@clayui/form@3.4.0...@clayui/form@3.5.0) (2020-02-13)
 
--   **@clayui/form:** create new toggle component ([8abc13d](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/8abc13d))
+-   **@clayui/form:** create new toggle component ([8abc13d](https://github.com/liferay/clay/commit/8abc13d))
 
@@ -62,7 +69,7 @@ # [3.4.0](https://github.com/liferay/clay/tree/master/packages/clay-form/compare/@clayui/form@3.2.0...@clayui/form@3.4.0) (2020-01-31)
 
--   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/50b5a41))
+-   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/commit/50b5a41))
 
 ### Features
 
--   **select:** add optgroups for select ([5ee50b2](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/5ee50b2))
+-   **select:** add optgroups for select ([5ee50b2](https://github.com/liferay/clay/commit/5ee50b2))
 
@@ -73,7 +80,7 @@ # [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)
 
--   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/50b5a41))
+-   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/commit/50b5a41))
 
 ### Features
 
--   **select:** add optgroups for select ([5ee50b2](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/5ee50b2))
+-   **select:** add optgroups for select ([5ee50b2](https://github.com/liferay/clay/commit/5ee50b2))
 
@@ -84,3 +91,3 @@ ## [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)
 
--   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/50b5a41))
+-   **form:** add margin between icon and feedback message ([50b5a41](https://github.com/liferay/clay/commit/50b5a41))
 
@@ -91,3 +98,3 @@ # [3.2.0](https://github.com/liferay/clay/tree/master/packages/clay-form/compare/@clayui/form@3.1.0...@clayui/form@3.2.0) (2019-11-07)
 
--   **@clayui/form:** add `forwardRef` support for `<ClayForm />` ([f5f3e7c](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/f5f3e7c))
+-   **@clayui/form:** add `forwardRef` support for `<ClayForm />` ([f5f3e7c](https://github.com/liferay/clay/commit/f5f3e7c))
 
@@ -98,6 +105,6 @@ # [3.1.0](https://github.com/liferay/clay/tree/master/packages/clay-form/compare/@clayui/form@3.0.0...@clayui/form@3.1.0) (2019-10-28)
 
--   **@clayui/form:** remove stuck value from Checkbox ([db565b1](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/db565b1))
+-   **@clayui/form:** remove stuck value from Checkbox ([db565b1](https://github.com/liferay/clay/commit/db565b1))
 
 ### Features
 
--   **@clayui/form:** Adds missing size properties on Form and Input component ([753249b](https://github.com/liferay/clay/tree/master/packages/clay-form/commit/753249b))
+-   **@clayui/form:** Adds missing size properties on Form and Input component ([753249b](https://github.com/liferay/clay/commit/753249b))

lib/DualListBox.d.ts

@@ -5,2 +5,3 @@ import React from 'react';
 interface IBoxProps {
+    id?: string;
     label?: string;
@@ -11,2 +12,6 @@ onSelectChange?: (val: Array<string>) => void;
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+    ariaLabels?: {
+        transferLTR: string;
+        transferRTL: string;
+    };
     items: TItems;
@@ -13,0 +18,0 @@ onItemsChange: (val: TItems) => void;

lib/DualListBox.js

@@ -65,3 +65,8 @@ "use strict";
 var ClayDualListBox = function ClayDualListBox(_ref) {
-  var className = _ref.className,
+  var _ref$ariaLabels = _ref.ariaLabels,
+      ariaLabels = _ref$ariaLabels === void 0 ? {
+    transferLTR: 'Transfer Item Left to Right',
+    transferRTL: 'Transfer Item Right to Left'
+  } : _ref$ariaLabels,
+      className = _ref.className,
       items = _ref.items,
@@ -75,3 +80,3 @@ _ref$left = _ref.left,
       spritemap = _ref.spritemap,
-      otherProps = _objectWithoutProperties(_ref, ["className", "items", "left", "onItemsChange", "right", "size", "spritemap"]);
+      otherProps = _objectWithoutProperties(_ref, ["ariaLabels", "className", "items", "left", "onItemsChange", "right", "size", "spritemap"]);
 
@@ -105,2 +110,3 @@ var _React$useState = _react.default.useState(left.selected || []),
     className: "clay-dual-listbox-item clay-dual-listbox-item-expand listbox-left",
+    id: left.id,
     items: leftItems,
@@ -120,2 +126,3 @@ label: left.label,
   }, _react.default.createElement(_button.ClayButtonWithIcon, {
+    "aria-label": ariaLabels.transferLTR,
     className: "transfer-button-ltr",
@@ -136,2 +143,3 @@ disabled: !leftSelected.length,
   }), _react.default.createElement(_button.ClayButtonWithIcon, {
+    "aria-label": ariaLabels.transferRTL,
     className: "transfer-button-rtl",
@@ -153,2 +161,3 @@ disabled: !rightSelected.length,
     className: "clay-dual-listbox-item clay-dual-listbox-item-expand listbox-right",
+    id: right.id,
     items: rightItems,
@@ -155,0 +164,0 @@ label: right.label,

lib/SelectBox.d.ts

@@ -6,3 +6,7 @@ import React from 'react';
 };
-interface IProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+interface IProps extends React.HTMLAttributes<HTMLSelectElement> {
+    ariaLabels?: {
+        reorderUp: string;
+        reorderDown: string;
+    };
     buttonAlignment?: 'center' | 'end';
@@ -9,0 +13,0 @@ items: Array<TItem>;

lib/SelectBox.js

@@ -22,4 +22,10 @@ "use strict";
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -86,5 +92,11 @@
 var ClaySelectBox = function ClaySelectBox(_ref) {
-  var _ref$buttonAlignment = _ref.buttonAlignment,
+  var _ref$ariaLabels = _ref.ariaLabels,
+      ariaLabels = _ref$ariaLabels === void 0 ? {
+    reorderDown: 'Reorder Down',
+    reorderUp: 'Reorder Up'
+  } : _ref$ariaLabels,
+      _ref$buttonAlignment = _ref.buttonAlignment,
       buttonAlignment = _ref$buttonAlignment === void 0 ? 'end' : _ref$buttonAlignment,
       className = _ref.className,
+      id = _ref.id,
       items = _ref.items,
@@ -98,3 +110,5 @@ label = _ref.label,
       spritemap = _ref.spritemap,
-      value = _ref.value;
+      value = _ref.value,
+      otherProps = _objectWithoutProperties(_ref, ["ariaLabels", "buttonAlignment", "className", "id", "items", "label", "multiple", "onItemsChange", "onSelectChange", "showArrows", "size", "spritemap", "value"]);
+
   var selectedIndexes = getSelectedIndexes(items, Array.isArray(value) ? value : [value]);
@@ -104,7 +118,9 @@ return _react.default.createElement("div", {
   }, label && _react.default.createElement("label", {
-    className: "reorder-label"
+    className: "reorder-label",
+    htmlFor: id
   }, label), _react.default.createElement("div", {
     className: (0, _classnames.default)('clay-reorder', _defineProperty({}, "clay-reorder-footer-".concat(buttonAlignment), buttonAlignment))
-  }, _react.default.createElement("select", {
+  }, _react.default.createElement("select", _extends({}, otherProps, {
     className: "form-control form-control-inset",
+    id: id,
     multiple: multiple,
@@ -130,3 +146,3 @@ onChange: function onChange(event) {
     value: value
-  }, items.map(function (option) {
+  }), items.map(function (option) {
     return _react.default.createElement("option", {
@@ -144,2 +160,3 @@ className: "reorder-option",
   }, _react.default.createElement(_button.ClayButtonWithIcon, {
+    "aria-label": ariaLabels.reorderUp,
     className: "reorder-button reorder-button-up",
@@ -155,2 +172,3 @@ disabled: !value.length,
   }), _react.default.createElement(_button.ClayButtonWithIcon, {
+    "aria-label": ariaLabels.reorderDown,
     className: "reorder-button reorder-button-down",
@@ -157,0 +175,0 @@ disabled: !value.length,

package.json

 {
 	"name": "@clayui/form",
-	"version": "3.7.0",
+	"version": "3.7.1",
 	"description": "ClayForm component",
 	"license": "BSD-3-Clause",
-	"repository": "https://github.com/liferay/clay/tree/master/packages/clay-form",
+	"repository": "https://github.com/liferay/clay",
 	"engines": {
@@ -29,4 +29,4 @@ "node": ">=0.12.0",
 	"dependencies": {
-		"@clayui/button": "^3.3.0",
-		"@clayui/icon": "^3.0.4",
+		"@clayui/button": "^3.3.1",
+		"@clayui/icon": "^3.0.5",
 		"classnames": "^2.2.6"
@@ -42,3 +42,3 @@ },
 	],
-	"gitHead": "c6795fd6c4c44268fb45c06223ed832946aea1bb"
+	"gitHead": "315966237dc08b74f9d7bc28e7455946f104a026"
 }

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124207

increased by3.16%

Lines of code

2648

increased by2.91%

Number of lines in readme file

72

increased by300%

Dependency changes

• Updated@clayui/button@^3.3.1

• Updated@clayui/icon@^3.0.5