@star-insure/sdk 4.3.4 → 4.4.0

package/dist/components/filter/Action.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TPageHeaderAction } from "../../types";
-export default function Action({ title, href, as, target, type, onClick, shortcutKey }: TPageHeaderAction): JSX.Element;
+export default function Action({ title, href, as, target, type, onClick, shortcutKey, actions }: TPageHeaderAction): JSX.Element;

package/dist/sdk.cjs.development.js

@@ -1874,17 +1874,25 @@ function DateOfBirthField(_ref) {
       day = _ref2[2];
 
   var isValidDate = year && month && day && !isNaN(Date.parse(year + "-" + month + "-" + day));
+  var styleReq = {
+    backgroundPosition: 'top 10px right 3px, center right 10px'
+  };
+  var style = {
+    backgroundPosition: 'right 0.5rem center',
+    paddingRight: '1.5rem'
+  };
   return React__default.createElement("span", {
     className: "flex flex-col gap-2"
   }, React__default.createElement("span", {
-    className: "flex space-x-4 border border-gray-300 rounded-lg bg-white"
+    className: "flex w-full border border-gray-300 rounded-lg bg-white"
   }, React__default.createElement("select", {
     name: name + "_day",
     id: id + "_day",
     value: day,
-    className: "flex-grow focus:outline-none border-0",
+    className: "flex-grow focus:outline-none border-0 !mr-[3px] lg:pl-4 xl:pl-2",
     onChange: handleChange,
-    required: isRequired
+    required: isRequired,
+    style: isRequired ? styleReq : style
   }, React__default.createElement("option", {
     value: ""
   }, "Day"), dayOptions.map(function (option) {
@@ -1896,9 +1904,10 @@ function DateOfBirthField(_ref) {
     name: name + "_month",
     id: id + "_month",
     value: month,
-    className: "flex-grow focus:outline-none border-0",
+    className: "flex-grow focus:outline-none border-0 !mr-[3px] lg:pl-4 xl:pl-2",
     onChange: handleChange,
-    required: isRequired
+    required: isRequired,
+    style: isRequired ? styleReq : style
   }, React__default.createElement("option", {
     value: ""
   }, "Month"), monthOptions.map(function (option) {
@@ -1910,9 +1919,10 @@ function DateOfBirthField(_ref) {
     name: name + "_year",
     id: id + "_year",
     value: year,
-    className: "flex-grow focus:outline-none border-0",
+    className: "flex-grow focus:outline-none border-0 !mr-[3px] lg:pl-4 xl:pl-2",
     onChange: handleChange,
-    required: isRequired
+    required: isRequired,
+    style: isRequired ? styleReq : style
   }, React__default.createElement("option", {
     value: ""
   }, "Year"), yearOptions.map(function (option) {
@@ -2592,11 +2602,27 @@ function Action(_ref) {
       type = _ref.type,
       _ref$onClick = _ref.onClick,
       _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      shortcutKey = _ref.shortcutKey;
+      shortcutKey = _ref.shortcutKey,
+      actions = _ref.actions;
 
   var className = 'bg-white rounded-full font-bold px-4 py-1.5 text-sm whitespace-nowrap hover:bg-gray-100 hover:border-gray-400 transition-colors border border-gray-300';
   var tooltipId = "action-" + title;
   var tooltipContent = shortcutKey ? "Ctrl + " + shortcutKey : undefined;
+  var actionButtonRef = React__default.useRef(null);
+  var isActionsButton = actions && actions.length > 0;
+  var actionsButtonClassName = 'relative cursor-pointer ' + className;
+
+  var _React$useState = React__default.useState(false),
+      isInnerActionVisible = _React$useState[0],
+      setIsInnerActionVisible = _React$useState[1];
+
+  var toggleActionsMenu = function toggleActionsMenu() {
+    setIsInnerActionVisible(!isInnerActionVisible);
+  };
+
+  useClickOutside(actionButtonRef, function () {
+    return setIsInnerActionVisible(false);
+  });
 
   function runAction() {
     if (as === 'Link' && href) {
@@ -2632,6 +2658,34 @@ function Action(_ref) {
     };
   }, [shortcutKey]);
 
+  if (isActionsButton) {
+    return React__default.createElement(React__default.Fragment, null, tooltipContent && React__default.createElement(reactTooltip.Tooltip, {
+      id: tooltipId,
+      className: "z-10"
+    }), React__default.createElement("div", {
+      ref: actionButtonRef,
+      "data-tooltip-id": tooltipId,
+      "data-tooltip-content": tooltipContent,
+      className: actionsButtonClassName,
+      onClick: toggleActionsMenu
+    }, title, isInnerActionVisible && React__default.createElement("div", {
+      className: "absolute top-[120%] right-[-20%] z-10"
+    }, React__default.createElement("div", {
+      className: "flex flex-col gap-2 bg-white rounded-lg shadow-xl p-3"
+    }, actions && actions.map(function (action, index) {
+      if (action.hidden) return null;
+      return React__default.createElement(Action, {
+        key: index,
+        title: action.title,
+        as: action.as,
+        href: action.href,
+        target: action.target,
+        onClick: action.onClick,
+        type: 'button'
+      });
+    })))));
+  }
+
   if (as === 'Link' && href) {
     return React__default.createElement(React__default.Fragment, null, tooltipContent && React__default.createElement(reactTooltip.Tooltip, {
       id: tooltipId,