@onewelcome/react-lib-components 0.2.4 → 0.2.6

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.
@@ -4,6 +4,7 @@ import { Props as IconButtonProps } from "../Button/IconButton";
4
4
  import { Placement, Offset } from "../hooks/usePosition";
5
5
  export interface Props extends ComponentPropsWithRef<"div"> {
6
6
  trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
7
+ decorativeElement?: ReactNode;
7
8
  children: ReactNode;
8
9
  placement?: Placement;
9
10
  transformOrigin?: Placement;
@@ -14,4 +15,4 @@ export interface Props extends ComponentPropsWithRef<"div"> {
14
15
  onShow?: () => void;
15
16
  onClose?: () => void;
16
17
  }
17
- export declare const ContextMenu: React.ForwardRefExoticComponent<Pick<Props, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "trigger" | "show" | "onShow" | "onClose" | "placement" | "offset" | "transformOrigin" | "domRoot"> & React.RefAttributes<HTMLDivElement>>;
18
+ export declare const ContextMenu: React.ForwardRefExoticComponent<Pick<Props, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "trigger" | "decorativeElement" | "show" | "onShow" | "onClose" | "placement" | "offset" | "transformOrigin" | "domRoot"> & React.RefAttributes<HTMLDivElement>>;
@@ -7,4 +7,5 @@ export interface SnackbarOptionsProps {
7
7
  actions?: Actions;
8
8
  variant?: Variant;
9
9
  duration?: number;
10
+ onClose?: () => void;
10
11
  }
@@ -694,8 +694,8 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
694
694
  }, children));
695
695
  });
696
696
 
697
- var css$Q = ".ContextMenu_module_contextMenu__d1c1d796 {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n}\n\n.ContextMenu_module_menu__d1c1d796 {\n white-space: nowrap;\n margin: 1rem 0;\n list-style: none;\n padding: 0;\n min-width: 200px;\n}\n.ContextMenu_module_menu__d1c1d796 button {\n text-align: left;\n}";
698
- var modules_846e6042 = {"context-menu":"ContextMenu_module_contextMenu__d1c1d796","menu":"ContextMenu_module_menu__d1c1d796"};
697
+ var css$Q = ".ContextMenu_module_contextMenu__1be8f447 {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n}\n\n.ContextMenu_module_menu__1be8f447 {\n white-space: nowrap;\n margin: 1rem 0;\n list-style: none;\n padding: 0;\n min-width: 200px;\n}\n.ContextMenu_module_menu__1be8f447.ContextMenu_module_noMarginTop__1be8f447 {\n margin: 0 0 1rem;\n}\n.ContextMenu_module_menu__1be8f447 button {\n text-align: left;\n}\n\n.ContextMenu_module_decorativeElement__1be8f447 {\n margin-top: 1rem;\n}";
698
+ var modules_846e6042 = {"context-menu":"ContextMenu_module_contextMenu__1be8f447","menu":"ContextMenu_module_menu__1be8f447","no-margin-top":"ContextMenu_module_noMarginTop__1be8f447","decorative-element":"ContextMenu_module_decorativeElement__1be8f447"};
699
699
  n(css$Q,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
700
700
 
701
701
  var useBodyClick = function useBodyClick(checkFunction, callbackFunction, dependingStateVariable) {
@@ -713,10 +713,11 @@ var useBodyClick = function useBodyClick(checkFunction, callbackFunction, depend
713
713
  }, [dependingStateVariable]);
714
714
  };
715
715
 
716
- var _excluded$S = ["trigger", "children", "id", "show", "onShow", "onClose", "placement", "offset", "transformOrigin", "domRoot"];
716
+ var _excluded$S = ["trigger", "children", "decorativeElement", "id", "show", "onShow", "onClose", "placement", "offset", "transformOrigin", "domRoot"];
717
717
  var ContextMenu = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
718
718
  var trigger = _ref.trigger,
719
719
  children = _ref.children,
720
+ decorativeElement = _ref.decorativeElement,
720
721
  id = _ref.id,
721
722
  _ref$show = _ref.show,
722
723
  show = _ref$show === void 0 ? false : _ref$show,
@@ -889,8 +890,10 @@ var ContextMenu = /*#__PURE__*/React__default["default"].forwardRef(function (_r
889
890
  offset: offset,
890
891
  anchorEl: anchorEl,
891
892
  show: showContextMenu
892
- }, React__default["default"].createElement("ul", {
893
- className: modules_846e6042["menu"],
893
+ }, decorativeElement && React__default["default"].createElement("div", {
894
+ className: modules_846e6042["decorative-element"]
895
+ }, decorativeElement), React__default["default"].createElement("ul", {
896
+ className: modules_846e6042["menu"] + " " + (decorativeElement ? modules_846e6042["no-margin-top"] : ""),
894
897
  id: id + "-menu",
895
898
  "aria-describedby": id,
896
899
  role: "menu"
@@ -3158,14 +3161,16 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
3158
3161
  variant = _options$variant === void 0 ? "info" : _options$variant,
3159
3162
  actions = _options.actions,
3160
3163
  _options$duration = _options.duration,
3161
- duration = _options$duration === void 0 ? getDuration(variant, actions, content) : _options$duration;
3164
+ duration = _options$duration === void 0 ? getDuration(variant, actions, content) : _options$duration,
3165
+ onClose = _options.onClose;
3162
3166
  var item = {
3163
3167
  title: title,
3164
3168
  content: content,
3165
3169
  variant: variant,
3166
3170
  actions: actions,
3167
3171
  duration: duration,
3168
- id: generateID(15, title)
3172
+ id: generateID(15, title),
3173
+ onClose: onClose
3169
3174
  };
3170
3175
  addSnackbar(item);
3171
3176
  };
@@ -3193,7 +3198,10 @@ var SnackbarProvider = function SnackbarProvider(_temp) {
3193
3198
  var snackbarList = snackbars.map(function (item, index) {
3194
3199
  return index < stackSize ? React__default["default"].createElement(SnackbarItem, _extends({}, item, {
3195
3200
  key: item.id,
3196
- onClose: onItemClosed,
3201
+ onClose: function onClose() {
3202
+ onItemClosed(item.id);
3203
+ item.onClose && item.onClose();
3204
+ },
3197
3205
  closeButtonTitle: closeButtonTitle
3198
3206
  })) : null;
3199
3207
  });
@@ -3591,8 +3599,8 @@ var Textarea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
3591
3599
  }));
3592
3600
  });
3593
3601
 
3594
- var css$i = ".Toggle_module_toggleWrapper__59f0ddfa {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.Toggle_module_toggle__59f0ddfa {\n width: 2rem;\n min-width: 2rem;\n height: 1.25rem;\n background-color: var(--default);\n border-radius: 2.5rem;\n position: relative;\n transition: background-color 0.2s ease-in-out;\n display: block;\n pointer-events: none;\n}\n.Toggle_module_toggle__59f0ddfa.Toggle_module_disabled__59f0ddfa {\n opacity: 0.25;\n cursor: not-allowed;\n}\n.Toggle_module_toggle__59f0ddfa:before {\n content: \"\";\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n display: block;\n background-color: #fff;\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(0);\n left: 0.125rem;\n transition: transform 0.2s ease-in-out;\n}\n.Toggle_module_toggle__59f0ddfa.Toggle_module_checked__59f0ddfa {\n background-color: var(--color-primary);\n}\n.Toggle_module_toggle__59f0ddfa.Toggle_module_checked__59f0ddfa:before {\n transform: translateY(-50%) translateX(calc(100% - 0.25rem));\n}\n\n.Toggle_module_toggleHelper__59f0ddfa {\n margin-left: 2.5rem;\n}\n\n.Toggle_module_checkbox__59f0ddfa {\n z-index: 10;\n position: static;\n}\n.Toggle_module_checkbox__59f0ddfa input {\n width: 2rem;\n}\n.Toggle_module_checkbox__59f0ddfa input ~ [data-icon][aria-hidden] {\n display: none;\n}\n.Toggle_module_checkbox__59f0ddfa input:focus-visible + * {\n border-radius: 2.5rem;\n}";
3595
- var modules_b5ebad0d = {"toggle-wrapper":"Toggle_module_toggleWrapper__59f0ddfa","toggle":"Toggle_module_toggle__59f0ddfa","disabled":"Toggle_module_disabled__59f0ddfa","checked":"Toggle_module_checked__59f0ddfa","toggle-helper":"Toggle_module_toggleHelper__59f0ddfa","checkbox":"Toggle_module_checkbox__59f0ddfa"};
3602
+ var css$i = ".Toggle_module_toggleWrapper__2e6e8e0d {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.Toggle_module_toggle__2e6e8e0d {\n width: 2rem;\n min-width: 2rem;\n height: 1.25rem;\n background-color: var(--default);\n border-radius: 2.5rem;\n position: relative;\n transition: background-color 0.2s ease-in-out;\n display: block;\n pointer-events: none;\n}\n.Toggle_module_toggle__2e6e8e0d:before {\n content: \"\";\n width: 1rem;\n height: 1rem;\n border-radius: 50%;\n display: block;\n background-color: #fff;\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(0);\n left: 0.125rem;\n transition: transform 0.2s ease-in-out;\n}\n.Toggle_module_toggle__2e6e8e0d.Toggle_module_checked__2e6e8e0d {\n background-color: var(--color-primary);\n}\n.Toggle_module_toggle__2e6e8e0d.Toggle_module_checked__2e6e8e0d:before {\n transform: translateY(-50%) translateX(calc(100% - 0.25rem));\n}\n.Toggle_module_toggle__2e6e8e0d.Toggle_module_disabled__2e6e8e0d {\n background-color: var(--disabled);\n cursor: not-allowed;\n}\n\n.Toggle_module_toggleHelper__2e6e8e0d {\n margin-left: 2.5rem;\n}\n\n.Toggle_module_checkbox__2e6e8e0d {\n z-index: 10;\n position: static;\n}\n.Toggle_module_checkbox__2e6e8e0d input {\n width: 2rem;\n}\n.Toggle_module_checkbox__2e6e8e0d input ~ [data-icon][aria-hidden] {\n display: none;\n}\n.Toggle_module_checkbox__2e6e8e0d input:focus-visible + * {\n border-radius: 2.5rem;\n}";
3603
+ var modules_b5ebad0d = {"toggle-wrapper":"Toggle_module_toggleWrapper__2e6e8e0d","toggle":"Toggle_module_toggle__2e6e8e0d","checked":"Toggle_module_checked__2e6e8e0d","disabled":"Toggle_module_disabled__2e6e8e0d","toggle-helper":"Toggle_module_toggleHelper__2e6e8e0d","checkbox":"Toggle_module_checkbox__2e6e8e0d"};
3596
3604
  n(css$i,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
3597
3605
 
3598
3606
  var _excluded$k = ["children", "checked", "disabled", "helperProps"];