npm - @oliasoft-open-source/react-ui-library - Versions diffs - 4.0.0-beta-59 → 4.0.0-beta-61 - Mend

@oliasoft-open-source/react-ui-library 4.0.0-beta-59 → 4.0.0-beta-61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/index.html CHANGED Viewed

	@@ -1 +1 @@
1	- <!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-~~425d14e0~~.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-~~541a35bd~~.css"></head><body><div id="content"></div></body>
1	+ <!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-bb4c3557.js"></script><link rel="stylesheet" href="/react-ui-library/assets/index-815d3e96.css"></head><body><div id="content"></div></body>

package/dist/index.js CHANGED Viewed

@@ -3560,13 +3560,14 @@ const Accordion = ({
     }
   );
 };
-const checkbox = "_checkbox_k43wr_1";
-const noLabel = "_noLabel_k43wr_17";
-const small$d = "_small_k43wr_20";
-const checkmark = "_checkmark_k43wr_43";
-const disabled$9 = "_disabled_k43wr_67";
-const noMargin$2 = "_noMargin_k43wr_81";
-const isInTable$4 = "_isInTable_k43wr_84";
+const checkbox = "_checkbox_1ybyr_1";
+const noLabel = "_noLabel_1ybyr_17";
+const small$d = "_small_1ybyr_20";
+const checkmark = "_checkmark_1ybyr_43";
+const disabled$9 = "_disabled_1ybyr_67";
+const noMargin$2 = "_noMargin_1ybyr_81";
+const isInTable$4 = "_isInTable_1ybyr_84";
+const helpIconEnabled$2 = "_helpIconEnabled_1ybyr_87";
 const styles$Q = {
   checkbox,
   noLabel,
@@ -3574,7 +3575,8 @@ const styles$Q = {
   checkmark,
   disabled: disabled$9,
   noMargin: noMargin$2,
-  isInTable: isInTable$4
+  isInTable: isInTable$4,
+  helpIconEnabled: helpIconEnabled$2
 };
 var MapShim = function() {
   if (typeof Map !== "undefined") {
@@ -5752,6 +5754,7 @@ const CheckBox = ({
 }) => {
   const disabledContext = useContext(DisabledContext);
   const showHelp = helpText || onClickHelp;
+  const isDisabled = disabled2 || disabledContext;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -5759,17 +5762,19 @@ const CheckBox = ({
         styles$Q.checkbox,
         noMargin2 && styles$Q.noMargin,
         isInTable2 && styles$Q.isInTable,
-        (disabled2 || disabledContext) && styles$Q.disabled,
+        isDisabled && styles$Q.disabled,
         small2 && styles$Q.small,
         !label2 && styles$Q.noLabel
       ),
       "data-ix": dataix,
       onClick: (evt) => {
-        const target = evt.target;
-        target.name = name2;
-        target.value = !checked;
-        target.checked = !checked;
-        onChange(evt);
+        if (!isDisabled) {
+          const target = evt.target;
+          target.name = name2;
+          target.value = !checked;
+          target.checked = !checked;
+          onChange(evt);
+        }
       },
       "data-testid": testId,
       children: [
@@ -5782,7 +5787,7 @@ const CheckBox = ({
             name: name2,
             onChange: () => {
             },
-            disabled: disabled2 || disabledContext
+            disabled: isDisabled
           },
           key2
         ),
@@ -5790,7 +5795,7 @@ const CheckBox = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$Q.checkmark, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.CHECK }) }),
           label2
         ] }),
-        showHelp && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText, onClick: onClickHelp })
+        showHelp && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Q.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -16799,17 +16804,17 @@ const getSizeValue = (size2) => {
 };
 const StyledGrid = st$1.div`
   display: grid;
-  gap: ${(props) => getGapValue(props.gap)};
-  grid-template-rows: ${(props) => getSizeValue(props.rows)};
-  grid-template-columns: ${(props) => getSizeValue(props.columns)};
-  height: ${(props) => getSizeValue(props.height)};
+  gap: ${(props) => getGapValue(props.$gap)};
+  grid-template-rows: ${(props) => getSizeValue(props.$rows)};
+  grid-template-columns: ${(props) => getSizeValue(props.$columns)};
+  height: ${(props) => getSizeValue(props.$height)};
   @media (max-width: 992px) {
-    ${(p) => p.columnsTablet && `grid-template-columns: ${getSizeValue(p.columnsTablet)};`}
+    ${(p) => p.$columnsTablet && `grid-template-columns: ${getSizeValue(p.$columnsTablet)};`}
   }
   @media (max-width: 575px) {
-    ${(p) => p.columnsMobile && `grid-template-columns: ${getSizeValue(p.columnsMobile)};`}
+    ${(p) => p.$columnsMobile && `grid-template-columns: ${getSizeValue(p.$columnsMobile)};`}
   }
 `;
 const Grid = ({
@@ -16824,12 +16829,12 @@ const Grid = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     StyledGrid,
     {
-      rows,
-      columns,
-      columnsTablet,
-      columnsMobile,
-      gap: gap === false ? "0px" : gap === true ? "var(--padding)" : gap,
-      height: typeof height2 === "number" ? `${height2}px` : height2,
+      $rows: rows,
+      $columns: columns,
+      $columnsTablet: columnsTablet,
+      $columnsMobile: columnsMobile,
+      $gap: gap === false ? "0px" : gap === true ? "var(--padding)" : gap,
+      $height: typeof height2 === "number" ? `${height2}px` : height2,
       children
     }
   );
@@ -26100,42 +26105,43 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-const inputInTable$8 = "_inputInTable_1g06t_1";
-const inputHover$8 = "_inputHover_1g06t_13";
-const inputFocus$8 = "_inputFocus_1g06t_18";
-const inputError$8 = "_inputError_1g06t_25";
-const inputWarning$8 = "_inputWarning_1g06t_26";
-const inputDisabled$8 = "_inputDisabled_1g06t_61";
-const hideScrollbars$8 = "_hideScrollbars_1g06t_67";
-const header$1 = "_header_1g06t_77";
-const headerTitle = "_headerTitle_1g06t_77";
-const heading$3 = "_heading_1g06t_78";
-const itemHeader = "_itemHeader_1g06t_78";
-const narrow = "_narrow_1g06t_81";
-const stickyHeader = "_stickyHeader_1g06t_85";
-const title$3 = "_title_1g06t_96";
-const name = "_name_1g06t_102";
-const iconTooltipMargin = "_iconTooltipMargin_1g06t_105";
-const bold = "_bold_1g06t_108";
-const toggleNarrow = "_toggleNarrow_1g06t_117";
-const drag$1 = "_drag_1g06t_135";
-const list$1 = "_list_1g06t_152";
-const bordered$1 = "_bordered_1g06t_156";
-const item$4 = "_item_1g06t_78";
-const action = "_action_1g06t_189";
-const active$3 = "_active_1g06t_192";
-const disabled$5 = "_disabled_1g06t_207";
-const label$6 = "_label_1g06t_218";
-const details$2 = "_details_1g06t_224";
-const metadata = "_metadata_1g06t_225";
-const itemContent = "_itemContent_1g06t_233";
-const indentIcon = "_indentIcon_1g06t_240";
-const expandIcon = "_expandIcon_1g06t_245";
-const expanded = "_expanded_1g06t_252";
-const right$4 = "_right_1g06t_255";
-const actions = "_actions_1g06t_264";
-const scrollableList = "_scrollableList_1g06t_269";
-const hideScrollbar = "_hideScrollbar_1g06t_67";
+const inputInTable$8 = "_inputInTable_rdsv1_1";
+const inputHover$8 = "_inputHover_rdsv1_13";
+const inputFocus$8 = "_inputFocus_rdsv1_18";
+const inputError$8 = "_inputError_rdsv1_25";
+const inputWarning$8 = "_inputWarning_rdsv1_26";
+const inputDisabled$8 = "_inputDisabled_rdsv1_61";
+const hideScrollbars$8 = "_hideScrollbars_rdsv1_67";
+const header$1 = "_header_rdsv1_77";
+const headerTitle = "_headerTitle_rdsv1_77";
+const heading$3 = "_heading_rdsv1_78";
+const itemHeader = "_itemHeader_rdsv1_78";
+const narrow = "_narrow_rdsv1_81";
+const stickyHeader = "_stickyHeader_rdsv1_85";
+const title$3 = "_title_rdsv1_96";
+const name = "_name_rdsv1_102";
+const iconTooltipMargin = "_iconTooltipMargin_rdsv1_105";
+const bold = "_bold_rdsv1_108";
+const toggleNarrow = "_toggleNarrow_rdsv1_117";
+const drag$1 = "_drag_rdsv1_135";
+const list$1 = "_list_rdsv1_152";
+const bordered$1 = "_bordered_rdsv1_156";
+const item$4 = "_item_rdsv1_78";
+const action = "_action_rdsv1_189";
+const active$3 = "_active_rdsv1_192";
+const indented = "_indented_rdsv1_199";
+const disabled$5 = "_disabled_rdsv1_212";
+const label$6 = "_label_rdsv1_223";
+const details$2 = "_details_rdsv1_229";
+const metadata = "_metadata_rdsv1_230";
+const itemContent = "_itemContent_rdsv1_238";
+const indentIcon = "_indentIcon_rdsv1_245";
+const expandIcon = "_expandIcon_rdsv1_250";
+const expanded = "_expanded_rdsv1_257";
+const right$4 = "_right_rdsv1_260";
+const actions = "_actions_rdsv1_269";
+const scrollableList = "_scrollableList_rdsv1_274";
+const hideScrollbar = "_hideScrollbar_rdsv1_67";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -26161,6 +26167,7 @@ const listStyles = {
   item: item$4,
   action,
   active: active$3,
+  indented,
   disabled: disabled$5,
   label: label$6,
   details: details$2,
@@ -29423,14 +29430,15 @@ const ProgressBar$1 = ({
     }
   ) });
 };
-const wrapper$1 = "_wrapper_chpf0_1";
-const inline$1 = "_inline_chpf0_1";
-const radio = "_radio_chpf0_5";
-const labelMargin = "_labelMargin_chpf0_8";
-const small$3 = "_small_chpf0_27";
-const noMargin$1 = "_noMargin_chpf0_32";
-const disabled$2 = "_disabled_chpf0_90";
-const isInTable = "_isInTable_chpf0_106";
+const wrapper$1 = "_wrapper_1fbik_1";
+const inline$1 = "_inline_1fbik_1";
+const radio = "_radio_1fbik_5";
+const labelMargin = "_labelMargin_1fbik_8";
+const small$3 = "_small_1fbik_27";
+const noMargin$1 = "_noMargin_1fbik_32";
+const disabled$2 = "_disabled_1fbik_90";
+const isInTable = "_isInTable_1fbik_106";
+const helpIconEnabled$1 = "_helpIconEnabled_1fbik_111";
 const styles$g = {
   wrapper: wrapper$1,
   inline: inline$1,
@@ -29439,7 +29447,8 @@ const styles$g = {
   small: small$3,
   noMargin: noMargin$1,
   disabled: disabled$2,
-  isInTable
+  isInTable,
+  helpIconEnabled: helpIconEnabled$1
 };
 const RadioInput = ({
   name: name2,
@@ -29479,7 +29488,7 @@ const RadioInput = ({
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("label", { "data-name": name2, "data-value": value, children: label2 }),
-        showHelp && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText, onClick: onClickHelp })
+        showHelp && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$g.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -63051,6 +63060,8 @@ const getStringName = (name2) => {
     return "";
   if (typeof name2 === "string") {
     return name2;
+  } else if (lodashExports.isArray(name2)) {
+    return name2[0];
   }
   return name2.fieldName;
 };
@@ -65246,15 +65257,17 @@ const toast = ({
     type: toastType
   });
 };
-const toggle$1 = "_toggle_6nx51_9";
-const small = "_small_6nx51_25";
-const disabled = "_disabled_6nx51_101";
-const noMargin = "_noMargin_6nx51_112";
+const toggle$1 = "_toggle_3ujcm_9";
+const small = "_small_3ujcm_25";
+const disabled = "_disabled_3ujcm_101";
+const noMargin = "_noMargin_3ujcm_112";
+const helpIconEnabled = "_helpIconEnabled_3ujcm_115";
 const styles$3 = {
   toggle: toggle$1,
   small,
   disabled,
-  noMargin
+  noMargin,
+  helpIconEnabled
 };
 const Toggle = ({
   name: name2,
@@ -65270,20 +65283,23 @@ const Toggle = ({
 }) => {
   const disabledContext = useContext(DisabledContext);
   const showHelp = helpText || onClickHelp;
+  const isDisabled = disabled2 || disabledContext;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       className: cx$2(
         styles$3.toggle,
-        disabled2 || disabledContext ? styles$3.disabled : null,
+        isDisabled ? styles$3.disabled : null,
         small2 ? styles$3.small : null,
         noMargin2 ? styles$3.noMargin : null
       ),
       onClick: (evt) => {
-        evt.target.name = name2;
-        evt.target.checked = !checked;
-        evt.target.value = !checked;
-        onChange(evt);
+        if (!isDisabled) {
+          evt.target.name = name2;
+          evt.target.checked = !checked;
+          evt.target.value = !checked;
+          onChange(evt);
+        }
       },
       "data-testid": testId,
       children: [
@@ -65293,14 +65309,14 @@ const Toggle = ({
             type: InputType.CHECKBOX,
             name: name2,
             value: checked == null ? void 0 : checked.toString(),
-            disabled: disabled2 || disabledContext,
+            disabled: isDisabled,
             checked,
             onChange: () => {
             }
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: label2 }),
-        showHelp && /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText, onClick: onClickHelp })
+        showHelp && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.helpIconEnabled, onClick: onClickHelp, children: /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { text: helpText }) })
       ]
     }
   );
@@ -77284,8 +77300,12 @@ const TreeItem = ({
       className: cx$2(
         listStyles.item,
         listStyles.action,
-        active2 ? listStyles.active : ""
+        active2 ? listStyles.active : "",
+        depth > 0 ? listStyles.indented : ""
       ),
+      style: {
+        marginInlineStart: depth * 24
+      },
       "data-testid": testId,
       onClick: (evt) => {
         if (onClick) {
@@ -77296,22 +77316,19 @@ const TreeItem = ({
         "div",
         {
           className: listStyles.itemHeader,
-          style: {
-            marginInlineStart: depth * 24
-          },
           children: [
-            draggable2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: listStyles.drag, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG }) }),
             hasChild && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.toggle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               Button$1,
               {
                 basic: true,
-                colored: Color.MUTED,
+                colored: isOpen2 ? true : Color.MUTED,
                 small: true,
                 round: true,
                 icon: isOpen2 ? IconType.COLLAPSE : IconType.EXPAND,
                 onClick: handleToggle
               }
             ) }),
+            draggable2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: listStyles.drag, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: IconType.DRAG }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(MetaContent, { item: data }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: listStyles.right, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: listStyles.actions, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Actions, { actions: actions2 }) }) })
           ]