react-atomic-molecule - npm Package Compare versions

Comparing version 5.3.1 to 5.4.0

build/cjs/src/hooks/useCSS.js

@@ -10,2 +10,6 @@ "use strict";
 
+/**
+ * @param {string[]} mods
+ * @param {string} groupKey
+ */
 var useCSS = function useCSS(mods, groupKey) {
@@ -12,0 +16,0 @@ /**

build/cjs/src/lib/styles/applyStyles.js

@@ -76,7 +76,7 @@ "use strict";
  * @param {StyleObject|StyleObject[]} styles
- * @param {number} order
+ * @param {number} [order]
  * @returns {props[]}
  */
 var applyStyles = function applyStyles(props, styles, order) {
-  if (isNaN(order)) {
+  if (isNaN( /**@type any*/order)) {
     order = 0;
@@ -87,3 +87,3 @@ }
   }
-  var doApply = applyStyle(props, order);
+  var doApply = applyStyle(props, /**@type any*/order);
   return styles.map(
@@ -90,0 +90,0 @@ /**

build/cjs/src/lib/styles/bindStyles.js

@@ -14,3 +14,3 @@ "use strict";
  * @property {object|object[]} styles
- * @property {number} styleOrder
+ * @property {number} [styleOrder]
  */
@@ -17,0 +17,0 @@

build/cjs/src/ui/molecules/Button.js

@@ -13,3 +13,2 @@ "use strict";
 var _Icon = _interopRequireDefault(require("../molecules/Icon.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,3 +20,2 @@ var _excluded = ["type", "className", "children", "icon", "style"]; // @ts-check
 var Button = function Button(props) {
-  (0, _useCSS["default"])(["button", "loader"], "semantic");
   var _props$type = props.type,
@@ -29,3 +27,3 @@ type = _props$type === void 0 ? "button" : _props$type,
     style = props.style,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var classes = (0, _classLib.mixClass)(className, "button");
@@ -44,3 +42,7 @@ var thisIcon;
     type: type
-  }, others), {}, {
+  }, restProps), {}, {
+    cssList: [{
+      cssModule: ["button", "loader"],
+      cssGroup: "semantic"
+    }],
     className: classes,
@@ -47,0 +49,0 @@ style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, buttonWithIconStyle), style),

build/cjs/src/ui/molecules/Card.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var Card = function Card(props) {
-  (0, _useCSS["default"])(["card"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "card");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["card"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/Circular.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,5 +20,8 @@ // @ts-check
  */var Circular = function Circular(props) {
-  (0, _useCSS["default"])(["label", "image"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "circular");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["label", "image"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -26,0 +28,0 @@ }));

build/cjs/src/ui/molecules/Description.js

@@ -16,5 +16,5 @@ "use strict";
     lineAtom = props.lineAtom,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var classes = (0, _classLib.mixClass)(className, "description");
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
     ui: false,
@@ -21,0 +21,0 @@ className: classes,

build/cjs/src/ui/molecules/Dimmer.js

@@ -13,3 +13,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,3 +19,3 @@ var _excluded = ["show", "isModal", "center", "content", "className", "children", "contentStyle"]; // @ts-check
  * className?: string,
- * show?: boolean, 
+ * show?: boolean,
  * isModal?: boolean,
@@ -31,3 +30,2 @@ * center?: boolean,
 var Dimmer = function Dimmer(props) {
-  (0, _useCSS["default"])(["dimmer"], "semantic");
   var _props$show = props.show,
@@ -44,3 +42,3 @@ show = _props$show === void 0 ? false : _props$show,
     contentStyle = props.contentStyle,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   if (!show) {
@@ -64,3 +62,7 @@ return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
+    cssList: [{
+      cssModule: ["dimmer"],
+      cssGroup: "semantic"
+    }],
     className: classes,
@@ -67,0 +69,0 @@ children: child

build/cjs/src/ui/molecules/Divider.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var Divider = function Divider(props) {
-  (0, _useCSS["default"])(["divider"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "divider");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["divider"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/DividingHeader.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var DividingHeader = function DividingHeader(props) {
-  (0, _useCSS["default"])(["divider", "header"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "dividing header");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["divider", "header"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/Field.js

@@ -16,3 +16,2 @@ "use strict";
 var _Label = _interopRequireDefault(require("../molecules/Label.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,3 +23,2 @@ var _excluded = ["className", "fieldClassName", "fieldStyle", "fieldStyles", "fieldProps", "children", "inline", "type", "inputComponent", "inputWrapper", "inputWrapperAttr", "label", "labelStyle", "labelStyles", "labelWrap", "style", "styles", "styleOrder", "required", "messageType", "messageProps", "message", "topTip", "bottomTip", "rightTip"]; // @ts-check
 var Field = function Field(props) {
-  (0, _useCSS["default"])(["input", "search", "form"], "semantic");
   var _ref = props || {},
@@ -53,3 +51,3 @@ className = _ref.className,
     rightTip = _ref.rightTip,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var thisMessage = message !== null && message !== void 0 ? message : props["data-message"];
@@ -124,3 +122,3 @@ var thisMessageType = messageType !== null && messageType !== void 0 ? messageType : props["data-message-type"];
     });
-    input = (0, _reshowBuild["default"])(inputComponent)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+    input = (0, _reshowBuild["default"])(inputComponent)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
       style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -182,2 +180,6 @@ boxSizing: "inherit"
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, fieldProps), {}, {
+    cssList: [{
+      cssModule: ["input", "search", "form"],
+      cssGroup: "semantic"
+    }],
     className: classes,
@@ -184,0 +186,0 @@ style: thisFieldStyle,

build/cjs/src/ui/molecules/Form.js

@@ -12,3 +12,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,11 +24,14 @@ var _excluded = ["messageType", "style", "className"]; // @ts-check
 var Form = function Form(props) {
-  (0, _useCSS["default"])(["form", "input", "loader", "search"], "semantic");
   var messageType = props.messageType,
     style = props.style,
     className = props.className,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var classes = (0, _classLib.mixClass)(className, messageType, "form");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     atom: "form"
-  }, others), {}, {
+  }, restProps), {}, {
+    cssList: [{
+      cssModule: ["form", "input", "loader", "search"],
+      cssGroup: "semantic"
+    }],
     className: classes,
@@ -42,2 +44,5 @@ style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.form), style)
 var Styles = {
+  /**
+   * @type {React.CSSProperties}
+   */
   form: {
@@ -44,0 +49,0 @@ boxSizing: "border-box"

build/cjs/src/ui/molecules/Header.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var Header = function Header(props) {
-  (0, _useCSS["default"])(["header"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "header");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["header"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/Icon.js

 "use strict";
 
 var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
@@ -8,2 +9,3 @@ exports["default"] = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _classLib = require("class-lib");
@@ -18,7 +20,7 @@ var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
     style = _ref$style === void 0 ? {} : _ref$style,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     atom: "i",
     ui: false
-  }, others), {}, {
+  }, restProps), {}, {
     className: (0, _classLib.mixClass)(className, "icon"),
@@ -25,0 +27,0 @@ style: (0, _objectSpread2["default"])({

build/cjs/src/ui/molecules/Image.js

@@ -13,3 +13,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -33,3 +32,2 @@ var _excluded = ["component", "loading", "src", "imgProps", "prepend"]; // @ts-check
 var Image = function Image(props) {
-  (0, _useCSS["default"])(["image"], "semantic");
   var _props$component = props.component,
@@ -58,12 +56,13 @@ component = _props$component === void 0 ? _SemanticUI["default"] : _props$component,
   });
+  restProps.className = classes;
+  restProps.cssList = [{
+    cssModule: ["image"],
+    cssGroup: "semantic"
+  }];
   if (atom && "img" !== atom) {
-    return (0, _reshowBuild["default"])(component)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
-      className: classes
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return (0, _reshowBuild["default"])(component)(restProps, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])({}, thisImgProps)), children]
     }));
   } else {
-    return (0, _reshowBuild["default"])(component)((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), thisImgProps), {}, {
-      className: classes
-    }));
+    return (0, _reshowBuild["default"])(component)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), thisImgProps));
   }
@@ -70,0 +69,0 @@ };

build/cjs/src/ui/molecules/InputBox.js

@@ -16,4 +16,2 @@ "use strict";
 var _Icon = _interopRequireDefault(require("../molecules/Icon.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
-var _useLazyInject = _interopRequireDefault(require("../../hooks/useLazyInject.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,4 +23,2 @@ var _excluded = ["atom", "actionProps", "inputComponent", "button", "icon", "children", "messageType", "leftLabel", "leftLabelProps", "rightLabel", "rightLabelProps", "transparent", "wrapStyle", "wrapClassName"]; // @ts-check
 var InputBox = function InputBox(props) {
-  injects = (0, _useLazyInject["default"])(InjectStyles, injects);
-  (0, _useCSS["default"])(["input", "search", "form"], "semantic");
   var _props$atom = props.atom,
@@ -45,3 +41,3 @@ atom = _props$atom === void 0 ? "input" : _props$atom,
     wrapClassName = props.wrapClassName,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var classes = (0, _classLib.mixClass)(wrapClassName, messageType, "input", {
@@ -56,3 +52,5 @@ labeled: leftLabel || rightLabel,
   if (leftLabel) {
-    thisLeftLabel = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, leftLabelProps), {}, {
+    thisLeftLabel = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      style: Styles.label
+    }, leftLabelProps), {}, {
       children: leftLabel
@@ -64,3 +62,3 @@ }));
     thisRightLabel = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      style: Styles.rightLabel,
+      style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.label), Styles.rightLabel),
       className: "basic"
@@ -91,2 +89,6 @@ }, rightLabelProps), {}, {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SemanticUI["default"], {
+    cssList: [{
+      cssModule: ["input", "search", "form"],
+      cssGroup: "semantic"
+    }],
     className: classes,
@@ -97,3 +99,3 @@ style: wrapStyle,
       ui: false
-    }, others), inputChildren), thisRightLabel, thisChildren, thisButton]
+    }, restProps), inputChildren), thisRightLabel, thisChildren, thisButton]
   });
@@ -104,2 +106,6 @@ };
 var Styles = {
+  label: {
+    background: "transparent",
+    color: "inherit"
+  },
   rightLabel: {
@@ -115,9 +121,2 @@ borderRadius: 0
 };
-var injects;
-var InjectStyles = {
-  label: [{
-    background: "transparent",
-    color: "inherit"
-  }, ".ui.transparent.inverted.input>.label"]
-};
 module.exports = exports.default;

build/cjs/src/ui/molecules/Item.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var Item = function Item(props) {
-  (0, _useCSS["default"])(["item", "list"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "item");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["item", "list"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/Label.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var Label = function Label(props) {
-  (0, _useCSS["default"])(["label"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "label");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["label"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/List.js

@@ -12,3 +12,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,3 +21,3 @@ var _excluded = ["type", "className", "children", "horizontal"]; // @ts-check
  * @param {string} pAtom
- * @param {boolean} horizontal 
+ * @param {boolean} horizontal
  * @returns {any[]}
@@ -53,4 +52,2 @@ */
 var List = function List(props) {
-  (0, _useCSS["default"])(["list"], "semantic");
-
   /**
@@ -68,3 +65,3 @@ * Why need type?
     horizontal = props.horizontal,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var atom = props.atom;
@@ -93,3 +90,7 @@ var classes = (0, _classLib.mixClass)(className, type, {
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
+    cssList: [{
+      cssModule: ["list"],
+      cssGroup: "semantic"
+    }],
     className: classes,
@@ -96,0 +97,0 @@ children: child

build/cjs/src/ui/molecules/Menu.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var Menu = function Menu(props) {
-  (0, _useCSS["default"])(["menu"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "menu");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["menu"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/Message.js

@@ -13,3 +13,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,3 +20,2 @@ var _excluded = ["header", "className", "children", "messageType"]; // @ts-check
 var Message = function Message(props) {
-  (0, _useCSS["default"])(["message"], "semantic");
   var header = props.header,
@@ -27,3 +25,3 @@ className = props.className,
     messageType = props.messageType,
-    reset = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var classes = (0, _classLib.mixClass)(className, {
@@ -41,3 +39,7 @@ info: messageType === "info",
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
+    cssList: [{
+      cssModule: ["message"],
+      cssGroup: "semantic"
+    }],
     className: classes,
@@ -44,0 +46,0 @@ children: [thisHeader, children]

build/cjs/src/ui/molecules/Progress.js

@@ -15,3 +15,2 @@ "use strict";
 var _index = _interopRequireDefault(require("../../lib/styles/index.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,3 +23,2 @@ var _excluded = ["label", "labelProps", "barLabel", "barLabelProps", "barProps", "children", "className", "percent", "style", "styles"],
 var Progress = function Progress(props) {
-  (0, _useCSS["default"])(["progress"], "semantic");
   var label = props.label,
@@ -36,3 +34,3 @@ labelProps = props.labelProps,
     styles = props.styles,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var thisLabel = label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -46,5 +44,5 @@ ui: false
     barStyles = _ref.styles,
-    otherBarProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded2);
+    restBarProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded2);
   var classes = (0, _classLib.mixClass)(className, "progress");
-  otherBarProps.children = barLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  restBarProps.children = barLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     className: "progress",
@@ -54,5 +52,5 @@ ui: false
     children: barLabel
-  })) : otherBarProps.children;
+  })) : restBarProps.children;
   var thisPercent = (percent !== null && percent !== void 0 ? percent : props["data-percent"]) * 1;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
     className: classes,
@@ -64,3 +62,7 @@ "data-percent": thisPercent,
       ui: false
-    }, otherBarProps), {}, {
+    }, restBarProps), {}, {
+      cssList: [{
+        cssModule: ["progress"],
+        cssGroup: "semantic"
+      }],
       styles: [(0, _index["default"])((0, _objectSpread2["default"])({
@@ -67,0 +69,0 @@ width: thisPercent + "%"

build/cjs/src/ui/molecules/Rail.js

@@ -12,3 +12,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,3 +19,2 @@ var _excluded = ["attached", "left"]; // @ts-check
 var Rail = function Rail(props) {
-  (0, _useCSS["default"])(["rail"], "semantic");
   var _props$attached = props.attached,
@@ -26,3 +24,3 @@ attached = _props$attached === void 0 ? true : _props$attached,
     left = _props$left === void 0 ? true : _props$left,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var classes = (0, _classLib.mixClass)(props.className, "rail", {
@@ -32,3 +30,7 @@ left: left,
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
+    cssList: [{
+      cssModule: ["rail"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -35,0 +37,0 @@ }));

build/cjs/src/ui/molecules/Segment.js

@@ -11,3 +11,2 @@ "use strict";
 var _SemanticUI = _interopRequireDefault(require("../molecules/SemanticUI.js"));
-var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,5 +18,8 @@ // @ts-check
  */var Segment = function Segment(props) {
-  (0, _useCSS["default"])(["loader", "segment"], "semantic");
   var classes = (0, _classLib.mixClass)(props.className, "segment");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+    cssList: [{
+      cssModule: ["loader", "segment"],
+      cssGroup: "semantic"
+    }],
     className: classes
@@ -24,0 +26,0 @@ }));

build/cjs/src/ui/molecules/SemanticUI.js

@@ -7,2 +7,5 @@ "use strict";
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));
+var _createClass2 = _interopRequireDefault(require("reshow-runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("reshow-runtime/helpers/classCallCheck"));
+var _defineProperty2 = _interopRequireDefault(require("reshow-runtime/helpers/defineProperty"));
 var _react = require("react");
@@ -15,3 +18,4 @@ var _reactAtomicAtom = require("react-atomic-atom");
 var _getChildMapping = require("../../getChildMapping.js");
-var _excluded = ["ui", "renderChildren", "refCb", "atom", "children", "styles", "styleOrder"]; // @ts-check
+var _useCSS = _interopRequireDefault(require("../../hooks/useCSS.js"));
+var _excluded = ["ui", "renderChildren", "atoms", "useCSS", "cssList", "refCb", "atom", "children", "styles", "styleOrder"]; // @ts-check
 /**
@@ -25,5 +29,31 @@ * @param {boolean} render
 };
-
+var CSSType = /*#__PURE__*/(0, _createClass2["default"])(function CSSType() {
+  (0, _classCallCheck2["default"])(this, CSSType);
+  /**
+   * @type string[]
+   */
+  (0, _defineProperty2["default"])(this, "cssModule", void 0);
+  /**
+   * @type string
+   */
+  (0, _defineProperty2["default"])(this, "cssGroup", void 0);
+});
 /**
- * @param {any} props
+ * @typedef {object} SemanticUIProps
+ * @property {boolean=} ui
+ * @property {boolean=} renderChildren
+ * @property {Object<any, React.ReactNode>=} atoms
+ * @property {string=} atom
+ * @property {function=} useCSS
+ * @property {CSSType[]=} cssList
+ * @property {function=} refCb
+ * @property {React.ReactNode=} children
+ * @property {Object=} styles
+ * @property {number=} styleOrder
+ * @property {string=} className
+ * @property {React.CSSProperties=} style
+ * @property {React.RefObject|function=} ref
+ */
+/**
+ * @param {SemanticUIProps&React.HTMLProps} props
  * @returns {React.ReactElement | null}
@@ -36,2 +66,8 @@ */
     renderChildren = _ref$renderChildren === void 0 ? true : _ref$renderChildren,
+    _ref$atoms = _ref.atoms,
+    atoms = _ref$atoms === void 0 ? _reactAtomicAtom.html : _ref$atoms,
+    _ref$useCSS = _ref.useCSS,
+    useCSS = _ref$useCSS === void 0 ? _useCSS["default"] : _ref$useCSS,
+    _ref$cssList = _ref.cssList,
+    cssList = _ref$cssList === void 0 ? [] : _ref$cssList,
     refCb = _ref.refCb,
@@ -43,4 +79,11 @@ atom = _ref.atom,
     restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  var atoms = _reactAtomicAtom.html;
-  atom = null != atom ? atom : atoms["default"];
+  /**
+   * @type string
+   */
+  var nextAtom = null != atom ? atom : atoms["default"];
+  cssList.forEach(function (_ref2) {
+    var cssModule = _ref2.cssModule,
+      cssGroup = _ref2.cssGroup;
+    return useCSS(cssModule, cssGroup);
+  });
   switch (atom) {
@@ -68,3 +111,3 @@ case "null":
     var bindProps = (0, _bindStyles["default"])({
-      className: className,
+      /** @type any*/className: className,
       style: style,
@@ -86,5 +129,5 @@ styles: styles,
   if (refCb) {
-    restProps.ref = refCb;
+    restProps.ref = /**@type any*/refCb;
   }
-  return /*#__PURE__*/(0, _react.createElement)(atom, restProps, getChildren(renderChildren, children));
+  return /*#__PURE__*/(0, _react.createElement)(nextAtom, restProps, getChildren(renderChildren, children));
 };
@@ -91,0 +134,0 @@ var _default = SemanticUI;

build/cjs/src/ui/molecules/Unsafe.js

@@ -16,4 +16,4 @@ "use strict";
     children = _ref.children,
-    others = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, others), {}, {
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticUI["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, restProps), {}, {
     className: (0, _classLib.mixClass)("us-html", className),
@@ -20,0 +20,0 @@ dangerouslySetInnerHTML: {

package.json

 {
-  "version": "5.3.1",
+  "version": "5.4.0",
   "name": "react-atomic-molecule",
@@ -23,3 +23,3 @@ "repository": {
     "hyphenate-style-name": "^1.0.4",
-    "need-css": "^0.1.0",
+    "need-css": "*",
     "react-atomic-atom": "^3.0.3",
@@ -45,3 +45,3 @@ "reshow-build": "^0.17.16",
   "scripts": {
-    "up-all": "lerna exec 'yarn'",
+    "up-all": "lerna exec 'yarn upgrade'",
     "format": "prettier-eslint --write 'src/**/*.js' 'ui/**/*.js*'",
@@ -48,0 +48,0 @@ "clean": "find ./build ./types -name '*.*' | xargs rm -rf",

types/hooks/useCSS.d.ts

 export default useCSS;
-declare function useCSS(mods: any, groupKey: any): void;
+/**
+ * @param {string[]} mods
+ * @param {string} groupKey
+ */
+declare function useCSS(mods: string[], groupKey: string): void;

types/lib/styles/applyStyles.d.ts

@@ -5,6 +5,6 @@ export default applyStyles;
  * @param {StyleObject|StyleObject[]} styles
- * @param {number} order
+ * @param {number} [order]
  * @returns {props[]}
  */
-declare function applyStyles(props: object, styles: StyleObject | StyleObject[], order: number): any[];
+declare function applyStyles(props: object, styles: StyleObject | StyleObject[], order?: number): any[];
 import StyleObject from "./StyleObject";

types/lib/styles/bindStyles.d.ts

@@ -6,3 +6,3 @@ export default bindStyles;
     styles: object | object[];
-    styleOrder: number;
+    styleOrder?: number;
 };
@@ -18,3 +18,3 @@ export type StyleProps = {
  * @property {object|object[]} styles
- * @property {number} styleOrder
+ * @property {number} [styleOrder]
  */
@@ -21,0 +21,0 @@ /**

types/ui/molecules/Column.d.ts

 export default Column;
 declare function Column({ component, pureUnitOne, ui, className, ...restProps }: {
     [x: string]: any;
-    component?: ({ ui, renderChildren, refCb, atom, children, styles, styleOrder, ...restProps }: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    component?: ({ ui, renderChildren, atoms, useCSS, cssList, refCb, atom, children, styles, styleOrder, ...restProps }: import("../molecules/SemanticUI").SemanticUIProps & import("react").HTMLProps<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     pureUnitOne?: boolean;
@@ -6,0 +6,0 @@ ui?: boolean;

types/ui/molecules/Icon.d.ts

 export default Icon;
-declare function Icon({ className, style, ...others }: {
+declare function Icon({ className, style, ...restProps }: {
     [x: string]: any;
@@ -4,0 +4,0 @@ className?: string;

types/ui/molecules/Row.d.ts

 export default Row;
 declare function Row({ component, ui, className, ...restProps }: {
     [x: string]: any;
-    component?: ({ ui, renderChildren, refCb, atom, children, styles, styleOrder, ...restProps }: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    component?: ({ ui, renderChildren, atoms, useCSS, cssList, refCb, atom, children, styles, styleOrder, ...restProps }: import("../molecules/SemanticUI").SemanticUIProps & import("react").HTMLProps<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     ui?: boolean;
     className: any;
 }): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

types/ui/molecules/SemanticUI.d.ts

 export default SemanticUI;
+export type SemanticUIProps = {
+    ui?: boolean | undefined;
+    renderChildren?: boolean | undefined;
+    atoms?: any | undefined;
+    atom?: string | undefined;
+    useCSS?: Function | undefined;
+    cssList?: CSSType[] | undefined;
+    refCb?: Function | undefined;
+    children?: any;
+    styles?: any | undefined;
+    styleOrder?: number | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: (import("react").RefObject<any> | Function) | undefined;
+};
 /**
- * @param {any} props
+ * @typedef {object} SemanticUIProps
+ * @property {boolean=} ui
+ * @property {boolean=} renderChildren
+ * @property {Object<any, React.ReactNode>=} atoms
+ * @property {string=} atom
+ * @property {function=} useCSS
+ * @property {CSSType[]=} cssList
+ * @property {function=} refCb
+ * @property {React.ReactNode=} children
+ * @property {Object=} styles
+ * @property {number=} styleOrder
+ * @property {string=} className
+ * @property {React.CSSProperties=} style
+ * @property {React.RefObject|function=} ref
+ */
+/**
+ * @param {SemanticUIProps&React.HTMLProps} props
  * @returns {React.ReactElement | null}
  */
-declare function SemanticUI({ ui, renderChildren, refCb, atom, children, styles, styleOrder, ...restProps }: any): React.ReactElement | null;
+declare function SemanticUI({ ui, renderChildren, atoms, useCSS, cssList, refCb, atom, children, styles, styleOrder, ...restProps }: SemanticUIProps & import("react").HTMLProps<any>): React.ReactElement | null;
+declare class CSSType {
+    /**
+     * @type string[]
+     */
+    cssModule: string[];
+    /**
+     * @type string
+     */
+    cssGroup: string;
+}

types/ui/molecules/Unsafe.d.ts

 export default Unsafe;
-declare function Unsafe({ className, children, ...others }: {
+declare function Unsafe({ className, children, ...restProps }: {
     [x: string]: any;
@@ -4,0 +4,0 @@ className: any;

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

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

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

191919

increased by2.12%

Lines of code

5501

increased by4.07%

Worsened metrics

Number of medium quality alerts

2

increased by100%

Dependency changes

• + Addedneed-css@0.2.0(transitive)

• - Removedneed-css@0.1.0(transitive)

• Updatedneed-css@*