widenarrow-ui 1.1.44 → 1.1.45

package/lib/components/DropDown/DropDown.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<typeof DropDown>;
 export declare const Default: Story;
 export declare const WithActiveSelect: Story;
+export declare const WithTriggerComponent: Story;
 export declare const AsInlineButton: Story;
 export declare const Complex: Story;

package/lib/components/DropDown/DropDown.types.d.ts

@@ -2,7 +2,8 @@ import { ReactNode } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 export interface DropDownProps {
     children: ReactNode[] | ReactNode;
-    buttonComponent: ReactNode;
+    buttonComponent?: ReactNode;
+    triggerComponent?: ReactNode;
     buttonCallbackName?: string;
     footerComponent?: ReactNode;
     title?: string;
@@ -11,6 +12,7 @@ export interface DropDownProps {
     withArrow?: boolean;
     loading?: boolean;
     childrenIsList?: boolean;
+    isOpen?: boolean;
     withVisibleOverflow?: boolean;
     placement?: Placement;
     strategy?: PositioningStrategy;

package/lib/index.d.ts

@@ -493,7 +493,8 @@ declare const RadioButton: FC<RadioButtonProps>;
 
 interface DropDownProps {
     children: ReactNode[] | ReactNode;
-    buttonComponent: ReactNode;
+    buttonComponent?: ReactNode;
+    triggerComponent?: ReactNode;
     buttonCallbackName?: string;
     footerComponent?: ReactNode;
     title?: string;
@@ -502,6 +503,7 @@ interface DropDownProps {
     withArrow?: boolean;
     loading?: boolean;
     childrenIsList?: boolean;
+    isOpen?: boolean;
     withVisibleOverflow?: boolean;
     placement?: Placement;
     strategy?: PositioningStrategy;

package/lib/index.esm.js

@@ -2543,11 +2543,12 @@ var styles$i = {"body":"DropDown-module_s-41xK","container":"DropDown-module_ms9
 var s$i = classNames.bind(styles$i);
 var DropDown = function (_a) {
     var _b, _c, _d;
-    var title = _a.title, _e = _a.offset, offset = _e === void 0 ? { horizontal: 8, vertical: 12 } : _e, arrowPadding = _a.arrowPadding, _f = _a.placement, placement = _f === void 0 ? 'auto' : _f, _g = _a.strategy, strategy = _g === void 0 ? 'absolute' : _g, className = _a.className, buttonComponent = _a.buttonComponent, _h = _a.buttonCallbackName, buttonCallbackName = _h === void 0 ? 'onClickCallback' : _h, footerComponent = _a.footerComponent, onCloseCallback = _a.onCloseCallback, onOpenCallback = _a.onOpenCallback, children = _a.children, childrenClassName = _a.childrenClassName, loading = _a.loading, _j = _a.withArrow, withArrow = _j === void 0 ? true : _j, _k = _a.childrenIsList, childrenIsList = _k === void 0 ? true : _k, withVisibleOverflow = _a.withVisibleOverflow;
-    var _l = useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    var title = _a.title, _e = _a.offset, offset = _e === void 0 ? { horizontal: 8, vertical: 12 } : _e, arrowPadding = _a.arrowPadding, _f = _a.placement, placement = _f === void 0 ? 'auto' : _f, _g = _a.strategy, strategy = _g === void 0 ? 'absolute' : _g, className = _a.className, buttonComponent = _a.buttonComponent, triggerComponent = _a.triggerComponent, _h = _a.buttonCallbackName, buttonCallbackName = _h === void 0 ? 'onClickCallback' : _h, footerComponent = _a.footerComponent, onCloseCallback = _a.onCloseCallback, onOpenCallback = _a.onOpenCallback, children = _a.children, childrenClassName = _a.childrenClassName, loading = _a.loading, _j = _a.withArrow, withArrow = _j === void 0 ? true : _j, _k = _a.childrenIsList, childrenIsList = _k === void 0 ? true : _k, isOpen = _a.isOpen, withVisibleOverflow = _a.withVisibleOverflow;
+    var _l = useState(false), _isOpen = _l[0], _setIsOpen = _l[1];
     var _m = useState(null), referenceElement = _m[0], setReferenceElement = _m[1];
     var _o = useState(null), popperElement = _o[0], setPopperElement = _o[1];
     var _p = useState(null), arrowElement = _p[0], setArrowElement = _p[1];
+    var isOpenState = is(Boolean, isOpen) ? isOpen : _isOpen;
     var horizontal = offset.horizontal, vertical = offset.vertical;
     var _q = usePopper(referenceElement, popperElement, {
         placement: placement,
@@ -2558,15 +2559,15 @@ var DropDown = function (_a) {
         ]
     }), styles = _q.styles, attributes = _q.attributes;
     var onClose = function () {
-        if (isOpen) {
-            setIsOpen(!isOpen);
+        if (_isOpen) {
+            _setIsOpen(!_isOpen);
             is(Function, onCloseCallback) && onCloseCallback();
         }
     };
     var onClickButton = function (e) {
         e === null || e === void 0 ? void 0 : e.stopPropagation();
-        if (!isOpen) {
-            setIsOpen(true);
+        if (!_isOpen) {
+            _setIsOpen(true);
             is(Function, onOpenCallback) && onOpenCallback();
             return;
         }
@@ -2593,7 +2594,7 @@ var DropDown = function (_a) {
         return child;
     };
     var memoizedDropDownChildren = useMemo(function () {
-        if (isOpen) {
+        if (isOpenState) {
             // Array of children
             if (is(Array, children) && isArrayWithContent(children)) {
                 return children.map(function (child) {
@@ -2613,7 +2614,7 @@ var DropDown = function (_a) {
             return children;
         }
         // eslint-disable-next-line
-    }, [isOpen, children]);
+    }, [isOpenState, children]);
     // Get the origin of the animation based on the placement of the DropDown
     var getAnimationOrigin = function (attributes) {
         var placement = path(['popper', 'data-popper-placement'], attributes);
@@ -2655,9 +2656,9 @@ var DropDown = function (_a) {
                 _a[childrenClassName] = childrenClassName,
                 _a)), children: memoizedDropDownChildren })) : (memoizedDropDownChildren);
     };
-    return (jsxs("div", { ref: containerRef, children: [jsx(Box, { displayFlex: true, alignItems: 'center', ref: setReferenceElement, children: isValidElement(buttonComponent)
+    return (jsxs("div", { ref: containerRef, children: [triggerComponent ? (jsx(Box, { displayFlex: true, alignItems: 'center', ref: setReferenceElement, children: triggerComponent })) : null, buttonComponent ? (jsx(Box, { displayFlex: true, alignItems: 'center', ref: setReferenceElement, children: isValidElement(buttonComponent)
                     ? cloneElement(buttonComponent, (_b = {}, _b[buttonCallbackName] = function (e) { return onClickButton(e); }, _b))
-                    : null }), isOpen && (jsxs("div", __assign({ className: s$i('container', (_c = {},
+                    : null })) : null, isOpenState ? (jsxs("div", __assign({ className: s$i('container', (_c = {},
                     _c[className] = className,
                     _c)), ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [withArrow && (jsx("div", { ref: setArrowElement, className: s$i('arrow', {
                             arrow_topIsDark: title
@@ -2667,7 +2668,7 @@ var DropDown = function (_a) {
                                     children_noFooter: !footerComponent && title,
                                     children_noHeader: !title && footerComponent,
                                     children_noHeaderOrFooter: !title && !footerComponent
-                                }), children: getChildrenListMarkup() }), footerComponent ? jsx("div", { className: s$i('footer'), children: footerComponent }) : null] })] })))] }));
+                                }), children: getChildrenListMarkup() }), footerComponent ? jsx("div", { className: s$i('footer'), children: footerComponent }) : null] })] }))) : null] }));
 };
 
 var styles$h = {"body":"DropDownItem-module_UqDzTt","container":"DropDownItem-module_SLjW0W","container_disabled":"DropDownItem-module_n4Ei9p","innerContainer":"DropDownItem-module_yTPeWz","button":"DropDownItem-module_mxcLFJ","button_clickable":"DropDownItem-module_OZsG-E","text":"DropDownItem-module_jUNg9b","button_small":"DropDownItem-module_t-DbXt","button_medium":"DropDownItem-module_RC2tFi","button_large":"DropDownItem-module_cRR335","icon_placeholder":"DropDownItem-module_rnlTmr","icon_small":"DropDownItem-module_IP7eDy","icon_medium":"DropDownItem-module_zAzvAS","icon_large":"DropDownItem-module_evC7qy","icon_left":"DropDownItem-module_qT-IaM","icon_right":"DropDownItem-module_F1274l","text_active":"DropDownItem-module_WKiUMc","text_disabled":"DropDownItem-module_GMkCiF","text_activeDisabled":"DropDownItem-module_vwOfg5"};