@oliasoft-open-source/react-ui-library 5.0.2-beta-1 → 5.0.2-beta-3

package/dist/global.css

@@ -1409,17 +1409,17 @@ html[data-theme='dark'] {
 ._actionComponentContainer_1t7vd_14._active_1t7vd_36 {
   color: var(--color-text-primary-active);
 }
-._wrapper_gg13i_1 {
+._wrapper_9g7i6_1 {
   display: inline-flex;
   max-width: 100%;
 }
-._layer_gg13i_5 ._wrapper_gg13i_1 {
+._layer_9g7i6_5 ._wrapper_9g7i6_1 {
   width: 100%;
 }
-._layerContainer_gg13i_8 {
+._layerContainer_9g7i6_8 {
   z-index: var(--zindex-dropdown);
 }
-._layer_gg13i_5 {
+._layer_9g7i6_5 {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   overflow: hidden;
@@ -1432,102 +1432,101 @@ html[data-theme='dark'] {
   overflow-y: auto;
   max-height: 40vh;
 }
-._layer_gg13i_5._nested_gg13i_24 {
+._layer_9g7i6_5._nested_9g7i6_24 {
   margin: -1px 2px;
 }
-._layer_gg13i_5 ul {
+._layer_9g7i6_5 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._layer_gg13i_5 ul li {
+._layer_9g7i6_5 ul li {
   list-style: none;
   display: block;
 }
-._fileInput_gg13i_36 {
+._fileInput_9g7i6_36 {
   opacity: 0;
   position: absolute;
   inset: 0;
 }
-._trigger_gg13i_41 {
+._trigger_9g7i6_41 {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   max-width: 100%;
 }
-._layer_gg13i_5 ._trigger_gg13i_41 {
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   width: 100%;
 }
-._middleAlignedInline_gg13i_50 {
+._middleAlignedInline_9g7i6_50 {
   display: flex;
   align-items: center;
   overflow: hidden;
   width: 100%;
 }
-._heading_gg13i_56 {
+._heading_9g7i6_56 {
   color: var(--color-text-muted);
   letter-spacing: var(--letter-spacing-wide);
   text-transform: uppercase;
   font-weight: bold;
 }
-._heading_gg13i_56 ._headingIcon_gg13i_62 {
+._heading_9g7i6_56 ._headingIcon_9g7i6_62 {
   float: right;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  height: var(--line-height);
 }
-._heading_gg13i_56 ._headingIcon_gg13i_62 svg {
-  color: var(--color-text-faint);
-}
-._heading_gg13i_56 ._headingIcon_gg13i_62:hover {
+._heading_9g7i6_56 ._headingIcon_9g7i6_62._clickable_9g7i6_69:hover {
   cursor: pointer;
-}
-._heading_gg13i_56 ._headingIcon_gg13i_62:hover svg {
   color: var(--color-text-primary-hover);
 }
-._option_gg13i_74 {
+._option_9g7i6_73 {
   color: inherit;
   display: block;
   position: relative;
 }
-._heading_gg13i_56,
-._option_gg13i_74,
-._layer_gg13i_5 ._trigger_gg13i_41 {
+._heading_9g7i6_56,
+._option_9g7i6_73,
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   padding: var(--padding-input);
   border: 1px solid transparent;
 }
-._option_gg13i_74,
-._layer_gg13i_5 ._trigger_gg13i_41 {
+._option_9g7i6_73,
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   line-height: var(--line-height);
   display: flex;
   align-items: flex-start;
 }
-._option_gg13i_74:hover,
-._layer_gg13i_5 ._trigger_gg13i_41:hover,
-._option_gg13i_74._active_gg13i_93,
-._layer_gg13i_5 ._trigger_gg13i_41._active_gg13i_93 {
+._option_9g7i6_73:hover,
+._layer_9g7i6_5 ._trigger_9g7i6_41:hover,
+._option_9g7i6_73._active_9g7i6_92,
+._layer_9g7i6_5 ._trigger_9g7i6_41._active_9g7i6_92 {
   background-color: var(--color-background-listitem-hover);
   cursor: pointer;
 }
-._option_gg13i_74._disabled_gg13i_98,
-._layer_gg13i_5 ._trigger_gg13i_41._disabled_gg13i_98 {
+._option_9g7i6_73._disabled_9g7i6_97,
+._layer_9g7i6_5 ._trigger_9g7i6_41._disabled_9g7i6_97 {
   opacity: 0.2;
 }
-._option_gg13i_74._selected_gg13i_102,
-._layer_gg13i_5 ._trigger_gg13i_41._selected_gg13i_102 {
+._option_9g7i6_73._selected_9g7i6_101,
+._layer_9g7i6_5 ._trigger_9g7i6_41._selected_9g7i6_101 {
   background-color: var(--color-background-listitem-active);
 }
-._layer_gg13i_5 ._trigger_gg13i_41 {
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   align-items: center;
 }
-._optionContent_gg13i_109 {
+._optionContent_9g7i6_108 {
   flex-wrap: wrap;
   margin-right: auto;
 }
-._inline_gg13i_113 ._optionContent_gg13i_109 {
+._inline_9g7i6_112 ._optionContent_9g7i6_108 {
   display: flex;
   justify-content: space-between;
   flex-grow: 1;
 }
-._icon_gg13i_118,
-._check_gg13i_119 {
+._icon_9g7i6_117,
+._check_9g7i6_118 {
   display: flex;
   flex-shrink: 1;
   width: var(--size-xs);
@@ -1535,82 +1534,82 @@ html[data-theme='dark'] {
   justify-content: center;
   align-items: center;
 }
-._icon_gg13i_118 {
+._icon_9g7i6_117 {
   margin-right: var(--padding-xs);
   color: var(--color-text-primary);
   font-size: var(--size-xs);
 }
-._icon_gg13i_118:empty {
+._icon_9g7i6_117:empty {
   display: none;
 }
-._icon_gg13i_118 img {
+._icon_9g7i6_117 img {
   max-height: 16px;
   max-width: 16px;
   width: auto;
   height: auto;
 }
-._check_gg13i_119 {
+._check_9g7i6_118 {
   margin-left: var(--padding-xs);
   color: var(--color-text-primary);
 }
-._text_gg13i_145 {
+._text_9g7i6_144 {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
 }
-._label_gg13i_150 {
+._label_9g7i6_149 {
   margin-right: auto;
 }
-._label_gg13i_150,
-._heading_gg13i_56 {
+._label_9g7i6_149,
+._heading_9g7i6_56 {
   max-width: 100%;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._description_gg13i_161 {
+._description_9g7i6_160 {
   color: #999;
   display: block;
 }
-._arrow_gg13i_165 {
+._arrow_9g7i6_164 {
   margin-left: var(--padding-xxs);
   display: flex;
 }
-._divider_gg13i_169 {
+._divider_9g7i6_168 {
   border: 0;
   border-top: 1px solid var(--color-border);
 }
-._deprecatedSemanticIcon_gg13i_173 {
+._deprecatedSemanticIcon_9g7i6_172 {
   color: var(--color-text-primary) !important;
   margin: -5px 0 0 !important;
 }
-._disabled_gg13i_98 {
+._disabled_9g7i6_97 {
   pointer-events: none;
   cursor: not-allowed !important;
 }
-._buttonLabel_gg13i_181 {
+._buttonLabel_9g7i6_180 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   margin-right: auto;
 }
-._buttonCaret_gg13i_187 {
+._buttonCaret_9g7i6_186 {
   display: flex;
   margin-left: var(--padding-xxs);
 }
-._component_gg13i_191 {
+._component_9g7i6_190 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 }
-._right_gg13i_197 {
+._right_9g7i6_196 {
   margin-left: auto;
   display: flex;
   align-items: center;
 }
-._actions_gg13i_202 {
+._actions_9g7i6_201 {
   margin-left: var(--padding-xs);
   display: flex;
   align-items: center;

package/dist/index.js

@@ -858,12 +858,12 @@ const DisabledContext = React__default.createContext(false);
 const wrapper$5 = "_wrapper_18jt2_1";
 const customSvg = "_customSvg_18jt2_8";
 const customPng = "_customPng_18jt2_11";
-const clickable$2 = "_clickable_18jt2_16";
+const clickable$3 = "_clickable_18jt2_16";
 const styles$U = {
   wrapper: wrapper$5,
   customSvg,
   customPng,
-  clickable: clickable$2
+  clickable: clickable$3
 };
 var DefaultContext = {
   color: void 0,
@@ -1566,7 +1566,7 @@ const Chevron = ({ expanded: expanded2 }) => {
 const accordion = "_accordion_15p8j_1";
 const accordionHeader = "_accordionHeader_15p8j_5";
 const heading$6 = "_heading_15p8j_9";
-const clickable$1 = "_clickable_15p8j_12";
+const clickable$2 = "_clickable_15p8j_12";
 const bordered$4 = "_bordered_15p8j_18";
 const accordionContent = "_accordionContent_15p8j_18";
 const expanded$1 = "_expanded_15p8j_36";
@@ -1576,7 +1576,7 @@ const styles$T = {
   accordion,
   accordionHeader,
   heading: heading$6,
-  clickable: clickable$1,
+  clickable: clickable$2,
   bordered: bordered$4,
   accordionContent,
   expanded: expanded$1,
@@ -3804,11 +3804,11 @@ const Tooltip = ({
 };
 const helpIcon = "_helpIcon_hd0z2_1";
 const active$8 = "_active_hd0z2_9";
-const clickable = "_clickable_hd0z2_12";
+const clickable$1 = "_clickable_hd0z2_12";
 const styles$Q = {
   helpIcon,
   active: active$8,
-  clickable
+  clickable: clickable$1
 };
 const HelpIconTooltip = ({
   children,
@@ -4165,32 +4165,33 @@ const styles$N = {
   actions: actions$2,
   childComponent
 };
-const wrapper$4 = "_wrapper_gg13i_1";
-const layer$1 = "_layer_gg13i_5";
-const layerContainer$1 = "_layerContainer_gg13i_8";
-const nested = "_nested_gg13i_24";
-const fileInput$1 = "_fileInput_gg13i_36";
-const trigger$2 = "_trigger_gg13i_41";
-const middleAlignedInline = "_middleAlignedInline_gg13i_50";
-const heading$5 = "_heading_gg13i_56";
-const headingIcon = "_headingIcon_gg13i_62";
-const option$1 = "_option_gg13i_74";
-const active$6 = "_active_gg13i_93";
-const disabled$8 = "_disabled_gg13i_98";
-const selected$1 = "_selected_gg13i_102";
-const optionContent$1 = "_optionContent_gg13i_109";
-const inline$4 = "_inline_gg13i_113";
-const icon$4 = "_icon_gg13i_118";
-const check$1 = "_check_gg13i_119";
-const label$9 = "_label_gg13i_150";
-const description = "_description_gg13i_161";
-const arrow$1 = "_arrow_gg13i_165";
-const divider$1 = "_divider_gg13i_169";
-const buttonLabel = "_buttonLabel_gg13i_181";
-const buttonCaret = "_buttonCaret_gg13i_187";
-const component = "_component_gg13i_191";
-const right$7 = "_right_gg13i_197";
-const actions$1 = "_actions_gg13i_202";
+const wrapper$4 = "_wrapper_9g7i6_1";
+const layer$1 = "_layer_9g7i6_5";
+const layerContainer$1 = "_layerContainer_9g7i6_8";
+const nested = "_nested_9g7i6_24";
+const fileInput$1 = "_fileInput_9g7i6_36";
+const trigger$2 = "_trigger_9g7i6_41";
+const middleAlignedInline = "_middleAlignedInline_9g7i6_50";
+const heading$5 = "_heading_9g7i6_56";
+const headingIcon = "_headingIcon_9g7i6_62";
+const clickable = "_clickable_9g7i6_69";
+const option$1 = "_option_9g7i6_73";
+const active$6 = "_active_9g7i6_92";
+const disabled$8 = "_disabled_9g7i6_97";
+const selected$1 = "_selected_9g7i6_101";
+const optionContent$1 = "_optionContent_9g7i6_108";
+const inline$4 = "_inline_9g7i6_112";
+const icon$4 = "_icon_9g7i6_117";
+const check$1 = "_check_9g7i6_118";
+const label$9 = "_label_9g7i6_149";
+const description = "_description_9g7i6_160";
+const arrow$1 = "_arrow_9g7i6_164";
+const divider$1 = "_divider_9g7i6_168";
+const buttonLabel = "_buttonLabel_9g7i6_180";
+const buttonCaret = "_buttonCaret_9g7i6_186";
+const component = "_component_9g7i6_190";
+const right$7 = "_right_9g7i6_196";
+const actions$1 = "_actions_9g7i6_201";
 const styles$M = {
   wrapper: wrapper$4,
   layer: layer$1,
@@ -4201,6 +4202,7 @@ const styles$M = {
   middleAlignedInline,
   heading: heading$5,
   headingIcon,
+  clickable,
   option: option$1,
   active: active$6,
   disabled: disabled$8,
@@ -4227,7 +4229,14 @@ const Heading$3 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PUR
     "data-testid": testId,
     children: [
       label2,
-      /* @__PURE__ */ jsx("span", { className: styles$M.headingIcon, onClick, children: icon2 })
+      !!icon2 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx$2(styles$M.headingIcon, onClick ? styles$M.clickable : ""),
+          onClick,
+          children: /* @__PURE__ */ jsx(Icon, { icon: icon2 })
+        }
+      )
     ]
   }
 );
@@ -27698,7 +27707,7 @@ function requireCookie() {
     }
     return new Date(Date.UTC(year, month, dayOfMonth, hour, minute, second));
   }
-  function formatDate2(date2) {
+  function formatDate(date2) {
     validators2.validate(validators2.isDate(date2), date2);
     return date2.toUTCString();
   }
@@ -28109,7 +28118,7 @@ function requireCookie() {
       let str = this.cookieString();
       if (this.expires != Infinity) {
         if (this.expires instanceof Date) {
-          str += `; Expires=${formatDate2(this.expires)}`;
+          str += `; Expires=${formatDate(this.expires)}`;
         } else {
           str += `; Expires=${this.expires}`;
         }
@@ -28700,7 +28709,7 @@ function requireCookie() {
   cookie.Store = Store;
   cookie.MemoryCookieStore = MemoryCookieStore;
   cookie.parseDate = parseDate;
-  cookie.formatDate = formatDate2;
+  cookie.formatDate = formatDate;
   cookie.parse = parse2;
   cookie.fromJSON = fromJSON;
   cookie.domainMatch = domainMatch;
@@ -168886,68 +168895,6 @@ const SelectCell = ({
     }
   );
 };
-function formatDate(value, showTime) {
-  if (!value) {
-    return null;
-  }
-  const date2 = new Date(value);
-  const formattedDate = date2.toLocaleDateString(void 0, {
-    year: "numeric",
-    month: "short",
-    day: "2-digit",
-    hour: showTime ? "2-digit" : void 0,
-    minute: showTime ? "2-digit" : void 0
-  });
-  return formattedDate;
-}
-const Date$1 = (props) => {
-  const { children, showTime } = props;
-  const formattedDate = formatDate(children, showTime);
-  return formattedDate;
-};
-const DateInput = (props) => {
-  const { value, error: error2, tooltip: tooltip2 } = props;
-  const stringValue = value;
-  const tooltipText = value || error2 || tooltip2 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    value && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Date$1, { children: stringValue }) }),
-    (error2 || tooltip2) && /* @__PURE__ */ jsx("div", { children: error2 || tooltip2 })
-  ] }) : null;
-  return /* @__PURE__ */ jsx(Input$1, { type: "date", ...props, tooltip: tooltipText });
-};
-const DateInputCell = ({
-  cell: cell2,
-  columnAlignment,
-  testId
-}) => {
-  return /* @__PURE__ */ jsx(
-    DateInput,
-    {
-      name: cell2.name,
-      value: cell2.value,
-      onChange: (ev) => {
-        var _a2;
-        return (_a2 = cell2.onChange) == null ? void 0 : _a2.call(cell2, ev);
-      },
-      onFocus: cell2.onFocus,
-      onBlur: cell2.onBlur,
-      onPaste: (ev) => {
-        var _a2;
-        return (_a2 = cell2.onPaste) == null ? void 0 : _a2.call(cell2, ev);
-      },
-      placeholder: cell2.placeholder,
-      error: cell2.error,
-      warning: cell2.warning,
-      disabled: cell2.disabled,
-      isInTable: true,
-      maxTooltipWidth: cell2.maxTooltipWidth,
-      right: columnAlignment === Align.RIGHT,
-      selectOnFocus: cell2.selectOnFocus,
-      testId,
-      tabIndex: cell2.disabled ? -1 : 0,
-      tooltip: cell2.tooltip
-    }
-  );
-};
 const InputCellWrapper = ({
   cell: cell2,
   columnAlignment,
@@ -168974,14 +168921,7 @@ const InputCellWrapper = ({
           columnAlignment,
           testId
         }
-      ) : cell2.type === "DateInput" ? /* @__PURE__ */ jsx(
-        DateInputCell,
-        {
-          cell: cell2,
-          columnAlignment,
-          testId
-        }
-      ) : cell2.type === "Select" ? /* @__PURE__ */ jsx(
+      ) : cell2.type === "DateInput" ? /* @__PURE__ */ jsx(InputCell, { cell: cell2, testId, type: "date" }) : cell2.type === "Select" ? /* @__PURE__ */ jsx(
         SelectCell,
         {
           cell: cell2,