@bonio-ui/components - npm Package Compare versions

Comparing version 6.3.1 to 7.0.0

dist/button/Button.style.js

@@ -85,3 +85,3 @@ "use strict";
     if (!countdown) return;
-    return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        ::after {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: ", ";\n          transform-origin: left;\n          animation: ", " ", "ms linear forwards;\n          transition: all ", "ms\n            ", ";\n\n          ", "\n        }\n      "])), primaryColor, countdownAnimation, countdown, _transition.EASE_OUT_300.duration, _transition.EASE_OUT_300.timingFunction, countdownEnd && "transition-delay: ".concat(_transition.EASE_OUT_300.duration, "ms; opacity: 0;"));
+    return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        ::after {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: ", ";\n          transform-origin: left;\n          animation: ", " ", "ms linear forwards;\n          transition: all ", "ms ", ";\n\n          ", "\n        }\n      "])), primaryColor, countdownAnimation, countdown, _transition.EASE_OUT_300.duration, _transition.EASE_OUT_300.timingFunction, countdownEnd && "transition-delay: ".concat(_transition.EASE_OUT_300.duration, "ms; opacity: 0;"));
   });
@@ -107,3 +107,3 @@ });
 exports.CONTENT_TRANSITION = CONTENT_TRANSITION;
-var buttonTransition = (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  transition: background-color 1s linear, box-shadow 1s linear;\n\n  ", ", ", " {\n    transition: opacity ", "s linear\n      ", "s;\n  }\n"])), Text, Icon, CONTENT_TRANSITION.duration, CONTENT_TRANSITION.delay);
+var buttonTransition = (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  transition:\n    background-color 1s linear,\n    box-shadow 1s linear;\n\n  ", ", ", " {\n    transition: opacity ", "s linear ", "s;\n  }\n"])), Text, Icon, CONTENT_TRANSITION.duration, CONTENT_TRANSITION.delay);
 var startLoadingStyles = (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  ", "\n\n  ", ", ", " {\n    opacity: 0;\n  }\n"])), buttonTransition, Text, Icon);
@@ -110,0 +110,0 @@ var endLoadingStyles = (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  ", "\n"])), buttonTransition);

dist/button/Link/Link.style.js

@@ -28,3 +28,3 @@ "use strict";
 } = _theme.color;
-var underline = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ::after {\n    position: absolute;\n    left: 0;\n    bottom: 1px;\n    content: '';\n    width: 100%;\n    height: 1px;\n    display: block;\n    background: ", ";\n    opacity: 0;\n    transition: opacity ", "ms\n      ", ";\n  }\n\n  :focus:not(:focus-visible):not(:hover)::after {\n    opacity: 0;\n  }\n\n  :hover::after,\n  :focus::after {\n    opacity: 1;\n  }\n"])), _ref => {
+var underline = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ::after {\n    position: absolute;\n    left: 0;\n    bottom: 1px;\n    content: '';\n    width: 100%;\n    height: 1px;\n    display: block;\n    background: ", ";\n    opacity: 0;\n    transition: opacity ", "ms ", ";\n  }\n\n  :focus:not(:focus-visible):not(:hover)::after {\n    opacity: 0;\n  }\n\n  :hover::after,\n  :focus::after {\n    opacity: 1;\n  }\n"])), _ref => {
   var {
@@ -31,0 +31,0 @@ color

dist/button/Loading.js

@@ -41,3 +41,3 @@ "use strict";
   'aria-hidden': true
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: auto;\n  opacity: 0;\n  animation: ", " 0.5s linear forwards, ", " linear 1s infinite;\n  animation-delay: ", "s;\n\n  fill: ", ";\n"])), fadeIn, spin, _Button.CONTENT_TRANSITION.duration + _Button.CONTENT_TRANSITION.delay, (0, _withTheme.default)(_ref => {
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: auto;\n  opacity: 0;\n  animation:\n    ", " 0.5s linear forwards,\n    ", " linear 1s infinite;\n  animation-delay: ", "s;\n\n  fill: ", ";\n"])), fadeIn, spin, _Button.CONTENT_TRANSITION.duration + _Button.CONTENT_TRANSITION.delay, (0, _withTheme.default)(_ref => {
   var {
@@ -44,0 +44,0 @@ variant,

dist/checkbox/Checkbox.style.js

@@ -55,3 +55,3 @@ "use strict";
 
-var StyledCheckbox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  ", "\n  border-radius: 0.125rem;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  transition: background ", "ms\n      ", ",\n    box-shadow ", "ms ", ";\n"])), border(gray[600]), gray[50], _transition.EASE_OUT_200.duration, _transition.EASE_OUT_200.timingFunction, _transition.EASE_OUT_200.duration, _transition.EASE_OUT_200.timingFunction);
+var StyledCheckbox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  ", "\n  border-radius: 0.125rem;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  transition:\n    background ", "ms ", ",\n    box-shadow ", "ms ", ";\n"])), border(gray[600]), gray[50], _transition.EASE_OUT_200.duration, _transition.EASE_OUT_200.timingFunction, _transition.EASE_OUT_200.duration, _transition.EASE_OUT_200.timingFunction);
 
@@ -75,3 +75,3 @@ exports.StyledCheckbox = StyledCheckbox;
   };
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  background-color: ", ";\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: background ", "ms\n      ", ",\n    opacity ", "ms ", ";\n"])), _ref3 => {
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  background-color: ", ";\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition:\n    background ", "ms ", ",\n    opacity ", "ms ", ";\n"])), _ref3 => {
   var {
@@ -85,3 +85,3 @@ activeColor
 
-var IndeterminateIcon = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  background-color: ", ";\n  width: calc(100% - 0.5rem);\n  height: calc(100% - 0.5rem);\n  border-radius: 0.0625rem;\n  transition: background ", "ms\n    ", ";\n"])), _ref4 => {
+var IndeterminateIcon = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  background-color: ", ";\n  width: calc(100% - 0.5rem);\n  height: calc(100% - 0.5rem);\n  border-radius: 0.0625rem;\n  transition: background ", "ms ", ";\n"])), _ref4 => {
   var {
@@ -97,3 +97,3 @@ indeterminateColor
   type: 'checkbox'
-})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: -1;\n\n  :checked + ", " {\n    ", " {\n      opacity: 1;\n    }\n  }\n\n  :focus:not(:focus-visible) + ", " {\n    ", "\n  }\n\n  :focus + ", " {\n    box-shadow: ", ",\n      ", ";\n  }\n"])), StyledCheckbox, CheckIcon, StyledCheckbox, border(gray[600]), StyledCheckbox, (0, _innerBorder.innerBorderStyles)(BORDER_WIDTH, gray[600]), _boxShadow.COMMON_FOCUS_BOX_SHADOW);
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  z-index: -1;\n\n  :checked + ", " {\n    ", " {\n      opacity: 1;\n    }\n  }\n\n  :focus:not(:focus-visible) + ", " {\n    ", "\n  }\n\n  :focus + ", " {\n    box-shadow: ", ", ", ";\n  }\n"])), StyledCheckbox, CheckIcon, StyledCheckbox, border(gray[600]), StyledCheckbox, (0, _innerBorder.innerBorderStyles)(BORDER_WIDTH, gray[600]), _boxShadow.COMMON_FOCUS_BOX_SHADOW);
 
@@ -100,0 +100,0 @@ exports.HiddenCheckbox = HiddenCheckbox;

dist/common/collections/components/Item.js

@@ -17,3 +17,5 @@ "use strict";
 /* eslint-disable react/no-unused-prop-types */
-var Item = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null); // return null 時 storybook 無法顯示 propType
+function Item() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+} // return null 時 storybook 無法顯示 propType
 
@@ -20,0 +22,0 @@

dist/common/collections/components/Section.js

@@ -17,3 +17,5 @@ "use strict";
 /* eslint-disable react/no-unused-prop-types */
-var Section = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null); // return null 時 storybook 無法顯示 propType
+function Section() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+} // return null 時 storybook 無法顯示 propType
 
@@ -20,0 +22,0 @@

dist/common/collections/hooks/useCollection.js

@@ -44,6 +44,8 @@ "use strict";
           rendered,
-          childNodes: []
+          childNodes: [],
+          item: value
         };
       }),
-      dataTracking
+      dataTracking,
+      item
     };
@@ -50,0 +52,0 @@ });

dist/hooks/ui/useMenuTrigger.js

@@ -24,9 +24,7 @@ "use strict";
 
-function useMenuTrigger() {
+function useMenuTrigger(state, ref) {
   var {
     disabled = false,
     focusOnClose = false
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var state = arguments.length > 1 ? arguments[1] : undefined;
-  var ref = arguments.length > 2 ? arguments[2] : undefined;
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   (0, _useUpdateEffect.default)(() => {
@@ -33,0 +31,0 @@ if (focusOnClose && !state.isOpen) {

dist/modal/Modal.style.js

@@ -59,3 +59,3 @@ "use strict";
 function bodyMaxHeight(modalHeight, footerHeight) {
-  return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-height: calc(\n      ", "vh - ", "rem - ", "px\n    );\n  "])), modalHeight, HEADER_HEIGHT, footerHeight);
+  return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-height: calc(", "vh - ", "rem - ", "px);\n  "])), modalHeight, HEADER_HEIGHT, footerHeight);
 }
@@ -62,0 +62,0 @@

dist/radio/Radio.style.js

@@ -48,3 +48,3 @@ "use strict";
   type: 'radio'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", "rem;\n  height: ", "rem;\n  cursor: pointer;\n\n  ::before {\n    content: '';\n    position: absolute;\n    transform: translateY(-50%);\n    top: 50%;\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 100%;\n    background-color: ", ";\n    transition: all ", "ms ", ";\n    ", "\n  }\n\n  ::after {\n    content: '';\n    position: absolute;\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 50%;\n    width: 0.75rem;\n    height: 0.75rem;\n    border-radius: 100%;\n    background-color: ", ";\n    visibility: hidden;\n    transition: background ", "ms\n      ", ";\n  }\n\n  :checked {\n    ::after {\n      visibility: visible;\n    }\n  }\n\n  ", "\n\n  :focus:not(:focus-visible) {\n    outline: none;\n\n    ~ ", " {\n      box-shadow: none;\n    }\n  }\n\n  :focus {\n    outline: none;\n\n    ~ ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  :disabled {\n    cursor: not-allowed;\n\n    ::before {\n      background-color: ", ";\n      ", "\n    }\n\n    ::after {\n      background-color: ", ";\n    }\n\n    ~ ", " {\n      cursor: not-allowed;\n      color: ", ";\n    }\n  }\n"])), BUTTON_SIZE, _theme.typography.SUBHEAD_2.lineHeight, BUTTON_SIZE, BUTTON_SIZE, _theme.color.white, _transition.EASE_OUT_200.duration, _transition.EASE_OUT_200.timingFunction, (0, _innerBorder.innerBorder)(1, _theme.color.gray[600]), (0, _withTheme.default)(_ref => {
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", "rem;\n  height: ", "rem;\n  cursor: pointer;\n\n  ::before {\n    content: '';\n    position: absolute;\n    transform: translateY(-50%);\n    top: 50%;\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 100%;\n    background-color: ", ";\n    transition: all ", "ms ", ";\n    ", "\n  }\n\n  ::after {\n    content: '';\n    position: absolute;\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 50%;\n    width: 0.75rem;\n    height: 0.75rem;\n    border-radius: 100%;\n    background-color: ", ";\n    visibility: hidden;\n    transition: background ", "ms ", ";\n  }\n\n  :checked {\n    ::after {\n      visibility: visible;\n    }\n  }\n\n  ", "\n\n  :focus:not(:focus-visible) {\n    outline: none;\n\n    ~ ", " {\n      box-shadow: none;\n    }\n  }\n\n  :focus {\n    outline: none;\n\n    ~ ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  :disabled {\n    cursor: not-allowed;\n\n    ::before {\n      background-color: ", ";\n      ", "\n    }\n\n    ::after {\n      background-color: ", ";\n    }\n\n    ~ ", " {\n      cursor: not-allowed;\n      color: ", ";\n    }\n  }\n"])), BUTTON_SIZE, _theme.typography.SUBHEAD_2.lineHeight, BUTTON_SIZE, BUTTON_SIZE, _theme.color.white, _transition.EASE_OUT_200.duration, _transition.EASE_OUT_200.timingFunction, (0, _innerBorder.innerBorder)(1, _theme.color.gray[600]), (0, _withTheme.default)(_ref => {
   var {
@@ -51,0 +51,0 @@ theme

dist/selector/Selector/ListBox/SearchInput/useSearchState.js

@@ -33,7 +33,7 @@ "use strict";
     if (item.type === _type.SECTION) {
-      if (item.childNodes.some(child => filterFunctionRef.current(child.key, searchText))) {
+      if (item.childNodes.some(child => filterFunctionRef.current(searchText, child.item))) {
         return true;
       }
     } else if (item.type === _type.ITEM) {
-      if (filterFunctionRef.current(item.key, searchText)) {
+      if (filterFunctionRef.current(searchText, item.item)) {
         return true;
@@ -47,3 +47,3 @@ }
       return _objectSpread(_objectSpread({}, item), {}, {
-        childNodes: item.childNodes.filter(item => filterFunctionRef.current(item.key, searchText))
+        childNodes: item.childNodes.filter(item => filterFunctionRef.current(searchText, item.item))
       });
@@ -50,0 +50,0 @@ } else if (item.type === _type.ITEM) {

dist/selector/Selector/Selector.js

@@ -85,6 +85,6 @@ "use strict";
   var menuTriggerState = (0, _useMenuTriggerState.default)();
-  var menuTrigger = (0, _useMenuTrigger.default)({
+  var menuTrigger = (0, _useMenuTrigger.default)(menuTriggerState, triggerRef, {
     disabled,
     focusOnClose: true
-  }, menuTriggerState, triggerRef);
+  });
   var {
@@ -218,3 +218,3 @@ value: searchText,
 
-  /** (key: Key, searchText: string) => boolean */
+  /** (searchText: string, item: object) => boolean */
   searchFilter: _propTypes.default.func,
@@ -221,0 +221,0 @@ searchPlaceholder: _propTypes.default.string,

package.json

 {
   "name": "@bonio-ui/components",
-  "version": "6.3.1",
+  "version": "7.0.0",
   "license": "Apache-2.0",
@@ -23,4 +23,4 @@ "description": "BoniO UI components in React",
   "dependencies": {
-    "@bonio-ui/icons": "^5.1.0",
-    "@bonio-ui/theme": "^2.0.1",
+    "@bonio-ui/icons": "^5.2.0",
+    "@bonio-ui/theme": "^2.1.0",
     "lodash.debounce": "^4.0.8",
@@ -27,0 +27,0 @@ "prop-types": "^15.7.2"

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

Lines of code

4283

increased by0.09%

Worsened metrics

Total package byte prevSize

248232

decreased by-5.62%

Number of package files

89

decreased by-1.11%

Dependency changes

• Updated@bonio-ui/icons@^5.2.0

• Updated@bonio-ui/theme@^2.1.0