@redsift/popovers 11.8.1-muiv5 → 11.8.2-muiv5

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 (14) hide show
  1. package/index.d.ts +72 -70
  2. package/package.json +4 -4
  3. package/_internal/ToggletipContent.js +0 -217
  4. package/_internal/ToggletipContent.js.map +0 -1
  5. package/_internal/ToggletipTrigger.js +0 -47
  6. package/_internal/ToggletipTrigger.js.map +0 -1
  7. package/_internal/toggletip-content.js +0 -2
  8. package/_internal/toggletip-content.js.map +0 -1
  9. package/_internal/toggletip-trigger.js +0 -2
  10. package/_internal/toggletip-trigger.js.map +0 -1
  11. package/_internal/toggletip.js +0 -174
  12. package/_internal/toggletip.js.map +0 -1
  13. package/_internal/useToggletipContext.js +0 -14
  14. package/_internal/useToggletipContext.js.map +0 -1
package/index.d.ts CHANGED
@@ -60,7 +60,7 @@ declare function useDialog({ color, defaultOpen, hasCloseButton, initialFocus, i
60
60
  update: () => void;
61
61
  floatingStyles: React$1.CSSProperties;
62
62
  open: boolean;
63
- onOpenChange: (open: boolean, event?: Event, reason?: _floating_ui_react.OpenChangeReason) => void;
63
+ onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
64
64
  events: _floating_ui_react.FloatingEvents;
65
65
  dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
66
66
  nodeId: string | undefined;
@@ -68,12 +68,12 @@ declare function useDialog({ color, defaultOpen, hasCloseButton, initialFocus, i
68
68
  refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
69
69
  elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
70
70
  };
71
- getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
72
- getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
73
- getItemProps: (userProps?: Omit<React$1.HTMLProps<HTMLElement>, "selected" | "active"> & {
74
- active?: boolean;
75
- selected?: boolean;
76
- }) => Record<string, unknown>;
71
+ getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
72
+ getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
73
+ getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
74
+ active?: boolean | undefined;
75
+ selected?: boolean | undefined;
76
+ }) | undefined) => Record<string, unknown>;
77
77
  color: string | undefined;
78
78
  isOpen: boolean | undefined;
79
79
  handleOpen: (collapsed: boolean) => void;
@@ -240,8 +240,8 @@ declare const BaseDialog: React$1.FC<DialogProps> & {
240
240
  className?: string;
241
241
  };
242
242
  declare const Dialog: React$1.FC<DialogProps> & {
243
- displayName?: string;
244
- className?: string;
243
+ displayName?: string | undefined;
244
+ className?: string | undefined;
245
245
  } & {
246
246
  Trigger: _redsift_design_system.Comp<DialogTriggerProps, HTMLButtonElement>;
247
247
  Content: _redsift_design_system.Comp<DialogContentProps, HTMLDivElement> & {
@@ -293,7 +293,7 @@ declare const useDialogContext: () => {
293
293
  update: () => void;
294
294
  floatingStyles: React$1.CSSProperties;
295
295
  open: boolean;
296
- onOpenChange: (open: boolean, event?: Event, reason?: _floating_ui_react.OpenChangeReason) => void;
296
+ onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
297
297
  events: _floating_ui_react.FloatingEvents;
298
298
  dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
299
299
  nodeId: string | undefined;
@@ -301,19 +301,19 @@ declare const useDialogContext: () => {
301
301
  refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
302
302
  elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
303
303
  };
304
- getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
305
- getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
306
- getItemProps: (userProps?: Omit<React$1.HTMLProps<HTMLElement>, "selected" | "active"> & {
307
- active?: boolean;
308
- selected?: boolean;
309
- }) => Record<string, unknown>;
304
+ getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
305
+ getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
306
+ getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
307
+ active?: boolean | undefined;
308
+ selected?: boolean | undefined;
309
+ }) | undefined) => Record<string, unknown>;
310
310
  color: string | undefined;
311
311
  isOpen: boolean | undefined;
312
312
  handleOpen: (collapsed: boolean) => void;
313
313
  } & {
314
314
  setLabelId: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
315
315
  setDescriptionId: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
316
- readonly triggerClassName?: string;
316
+ readonly triggerClassName?: string | undefined;
317
317
  };
318
318
 
319
319
  declare function usePopover({ color, defaultOpen, isModal, isOpen: propsIsOpen, maxWidth, minWidth, offset: propsOffset, onOpen, placement, role: propsRole, triggerClassName, width, setHideInsteadOfClose, hideInsteadOfClose, }: Omit<PopoverProps, 'children'> & HiddenPopoverState): {
@@ -349,7 +349,7 @@ declare function usePopover({ color, defaultOpen, isModal, isOpen: propsIsOpen,
349
349
  update: () => void;
350
350
  floatingStyles: React$1.CSSProperties;
351
351
  open: boolean;
352
- onOpenChange: (open: boolean, event?: Event, reason?: _floating_ui_react.OpenChangeReason) => void;
352
+ onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
353
353
  events: _floating_ui_react.FloatingEvents;
354
354
  dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
355
355
  nodeId: string | undefined;
@@ -357,12 +357,12 @@ declare function usePopover({ color, defaultOpen, isModal, isOpen: propsIsOpen,
357
357
  refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
358
358
  elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
359
359
  };
360
- getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
361
- getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
362
- getItemProps: (userProps?: Omit<React$1.HTMLProps<HTMLElement>, "selected" | "active"> & {
363
- active?: boolean;
364
- selected?: boolean;
365
- }) => Record<string, unknown>;
360
+ getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
361
+ getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
362
+ getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
363
+ active?: boolean | undefined;
364
+ selected?: boolean | undefined;
365
+ }) | undefined) => Record<string, unknown>;
366
366
  color: string | undefined;
367
367
  isOpen: boolean | undefined;
368
368
  handleOpen: (collapsed: boolean) => void;
@@ -461,7 +461,9 @@ type StyledPopoverContentProps = PopoverContentProps & {
461
461
  /**
462
462
  * Component style.
463
463
  */
464
- declare const StyledPopoverContent: styled_components.StyledComponent<"div", any, StyledPopoverContentProps, never>;
464
+ declare const StyledPopoverContent: styled_components.StyledComponent<"div", any, PopoverContentProps & {
465
+ $theme: Theme;
466
+ }, never>;
465
467
 
466
468
  /**
467
469
  * The PopoverContent component.
@@ -487,8 +489,8 @@ declare const BasePopover: React$1.FC<PopoverProps> & {
487
489
  className?: string;
488
490
  };
489
491
  declare const Popover: React$1.FC<PopoverProps> & {
490
- displayName?: string;
491
- className?: string;
492
+ displayName?: string | undefined;
493
+ className?: string | undefined;
492
494
  } & {
493
495
  Trigger: _redsift_design_system.Comp<PopoverTriggerProps, HTMLButtonElement>;
494
496
  Content: _redsift_design_system.Comp<PopoverContentProps, HTMLDivElement>;
@@ -527,7 +529,7 @@ declare const usePopoverContext: () => {
527
529
  update: () => void;
528
530
  floatingStyles: React$1.CSSProperties;
529
531
  open: boolean;
530
- onOpenChange: (open: boolean, event?: Event, reason?: _floating_ui_react.OpenChangeReason) => void;
532
+ onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
531
533
  events: _floating_ui_react.FloatingEvents;
532
534
  dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
533
535
  nodeId: string | undefined;
@@ -535,17 +537,17 @@ declare const usePopoverContext: () => {
535
537
  refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
536
538
  elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
537
539
  };
538
- getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
539
- getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
540
- getItemProps: (userProps?: Omit<React$1.HTMLProps<HTMLElement>, "selected" | "active"> & {
541
- active?: boolean;
542
- selected?: boolean;
543
- }) => Record<string, unknown>;
540
+ getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
541
+ getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
542
+ getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
543
+ active?: boolean | undefined;
544
+ selected?: boolean | undefined;
545
+ }) | undefined) => Record<string, unknown>;
544
546
  color: string | undefined;
545
547
  isOpen: boolean | undefined;
546
548
  handleOpen: (collapsed: boolean) => void;
547
549
  } & {
548
- readonly triggerClassName?: string;
550
+ readonly triggerClassName?: string | undefined;
549
551
  } & HiddenPopoverState;
550
552
 
551
553
  /**
@@ -734,7 +736,7 @@ declare function useTooltip({ color, defaultOpen, delay, placement, isOpen: prop
734
736
  update: () => void;
735
737
  floatingStyles: React$1.CSSProperties;
736
738
  open: boolean;
737
- onOpenChange: (open: boolean, event?: Event, reason?: _floating_ui_react.OpenChangeReason) => void;
739
+ onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
738
740
  events: _floating_ui_react.FloatingEvents;
739
741
  dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
740
742
  nodeId: string | undefined;
@@ -742,12 +744,12 @@ declare function useTooltip({ color, defaultOpen, delay, placement, isOpen: prop
742
744
  refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
743
745
  elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
744
746
  };
745
- getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
746
- getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
747
- getItemProps: (userProps?: Omit<React$1.HTMLProps<HTMLElement>, "selected" | "active"> & {
748
- active?: boolean;
749
- selected?: boolean;
750
- }) => Record<string, unknown>;
747
+ getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
748
+ getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
749
+ getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
750
+ active?: boolean | undefined;
751
+ selected?: boolean | undefined;
752
+ }) | undefined) => Record<string, unknown>;
751
753
  color: string | undefined;
752
754
  isOpen: boolean | undefined;
753
755
  handleOpen: (collapsed: boolean) => void;
@@ -823,8 +825,8 @@ declare const BaseTooltip: React$1.FC<TooltipProps> & {
823
825
  className?: string;
824
826
  };
825
827
  declare const Tooltip: React$1.FC<TooltipProps> & {
826
- displayName?: string;
827
- className?: string;
828
+ displayName?: string | undefined;
829
+ className?: string | undefined;
828
830
  } & {
829
831
  Trigger: _redsift_design_system.Comp<TooltipTriggerProps, HTMLSpanElement>;
830
832
  Content: _redsift_design_system.Comp<TooltipContentProps, HTMLDivElement>;
@@ -862,7 +864,7 @@ declare const useTooltipContext: () => {
862
864
  update: () => void;
863
865
  floatingStyles: React$1.CSSProperties;
864
866
  open: boolean;
865
- onOpenChange: (open: boolean, event?: Event, reason?: _floating_ui_react.OpenChangeReason) => void;
867
+ onOpenChange: (open: boolean, event?: Event | undefined, reason?: _floating_ui_react.OpenChangeReason | undefined) => void;
866
868
  events: _floating_ui_react.FloatingEvents;
867
869
  dataRef: React$1.MutableRefObject<_floating_ui_react.ContextData>;
868
870
  nodeId: string | undefined;
@@ -870,17 +872,17 @@ declare const useTooltipContext: () => {
870
872
  refs: _floating_ui_react.ExtendedRefs<_floating_ui_react.ReferenceType>;
871
873
  elements: _floating_ui_react.ExtendedElements<_floating_ui_react.ReferenceType>;
872
874
  };
873
- getReferenceProps: (userProps?: React$1.HTMLProps<Element>) => Record<string, unknown>;
874
- getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement>) => Record<string, unknown>;
875
- getItemProps: (userProps?: Omit<React$1.HTMLProps<HTMLElement>, "selected" | "active"> & {
876
- active?: boolean;
877
- selected?: boolean;
878
- }) => Record<string, unknown>;
875
+ getReferenceProps: (userProps?: React$1.HTMLProps<Element> | undefined) => Record<string, unknown>;
876
+ getFloatingProps: (userProps?: React$1.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
877
+ getItemProps: (userProps?: (Omit<React$1.HTMLProps<HTMLElement>, "active" | "selected"> & {
878
+ active?: boolean | undefined;
879
+ selected?: boolean | undefined;
880
+ }) | undefined) => Record<string, unknown>;
879
881
  color: string | undefined;
880
882
  isOpen: boolean | undefined;
881
883
  handleOpen: (collapsed: boolean) => void;
882
884
  } & {
883
- readonly triggerClassName?: string;
885
+ readonly triggerClassName?: string | undefined;
884
886
  };
885
887
 
886
888
  declare const ButtonWithTooltip: Comp<{
@@ -928,39 +930,39 @@ declare const LinkButtonWithTooltip: Comp<{
928
930
  declare const WithTooltip: {
929
931
  Button: _redsift_design_system.Comp<{
930
932
  tooltip: string;
931
- tooltipProps?: TooltipProps;
932
- tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref">;
933
- tooltipContentProps?: Omit<TooltipContentProps, "ref">;
933
+ tooltipProps?: TooltipProps | undefined;
934
+ tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
935
+ tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
934
936
  } & Omit<_redsift_design_system.ButtonProps, "ref">, HTMLButtonElement>;
935
937
  ButtonLink: _redsift_design_system.Comp<{
936
938
  tooltip: string;
937
- tooltipProps?: TooltipProps;
938
- tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref">;
939
- tooltipContentProps?: Omit<TooltipContentProps, "ref">;
939
+ tooltipProps?: TooltipProps | undefined;
940
+ tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
941
+ tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
940
942
  } & Omit<_redsift_design_system.ButtonLinkProps, "ref">, HTMLAnchorElement>;
941
943
  IconButton: _redsift_design_system.Comp<{
942
944
  tooltip: string;
943
- tooltipProps?: TooltipProps;
944
- tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref">;
945
- tooltipContentProps?: Omit<TooltipContentProps, "ref">;
945
+ tooltipProps?: TooltipProps | undefined;
946
+ tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
947
+ tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
946
948
  } & Omit<_redsift_design_system.IconButtonProps, "ref">, HTMLButtonElement>;
947
949
  IconButtonLink: _redsift_design_system.Comp<{
948
950
  tooltip: string;
949
- tooltipProps?: TooltipProps;
950
- tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref">;
951
- tooltipContentProps?: Omit<TooltipContentProps, "ref">;
951
+ tooltipProps?: TooltipProps | undefined;
952
+ tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
953
+ tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
952
954
  } & Omit<_redsift_design_system.IconButtonLinkProps, "ref">, HTMLAnchorElement>;
953
955
  Link: _redsift_design_system.Comp<{
954
956
  tooltip: string;
955
- tooltipProps?: TooltipProps;
956
- tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref">;
957
- tooltipContentProps?: Omit<TooltipContentProps, "ref">;
957
+ tooltipProps?: TooltipProps | undefined;
958
+ tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
959
+ tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
958
960
  } & Omit<_redsift_design_system.LinkProps, "ref">, HTMLAnchorElement>;
959
961
  LinkButton: _redsift_design_system.Comp<{
960
962
  tooltip: string;
961
- tooltipProps?: TooltipProps;
962
- tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref">;
963
- tooltipContentProps?: Omit<TooltipContentProps, "ref">;
963
+ tooltipProps?: TooltipProps | undefined;
964
+ tooltipTriggerProps?: Omit<TooltipTriggerProps, "ref"> | undefined;
965
+ tooltipContentProps?: Omit<TooltipContentProps, "ref"> | undefined;
964
966
  } & Omit<_redsift_design_system.LinkButtonProps, "ref">, HTMLButtonElement>;
965
967
  };
966
968
 
package/package.json CHANGED
@@ -30,7 +30,7 @@
30
30
  "test": "yarn test:unit && yarn test:storybook"
31
31
  },
32
32
  "types": "index.d.ts",
33
- "version": "11.8.1-muiv5",
33
+ "version": "11.8.2-muiv5",
34
34
  "dependencies": {
35
35
  "@floating-ui/react": "^0.27.5",
36
36
  "classnames": "^2.3.1",
@@ -86,11 +86,11 @@
86
86
  "ts-jest": "^28.0.3"
87
87
  },
88
88
  "peerDependencies": {
89
- "@redsift/design-system": "^11.8.0-1",
90
- "@redsift/icons": "^11.8.0-1",
89
+ "@redsift/design-system": "^11.8.2-0",
90
+ "@redsift/icons": "^11.8.2-0",
91
91
  "react": ">=17",
92
92
  "react-dom": ">=17",
93
93
  "styled-components": "^5.3.5"
94
94
  },
95
- "gitHead": "04b4ec7b4ae3bbfc6f3857bc1325ffca917ebb36"
95
+ "gitHead": "10e950e0527e2dd7a3c8d3b9f970781a31313e71"
96
96
  }
package/_internal/ToggletipContent.js DELETED
@@ -1,217 +0,0 @@
1
- import { a as _objectWithoutProperties, b as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
2
- import React, { forwardRef, useContext } from 'react';
3
- import classNames from 'classnames';
4
- import { useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
5
- import { Theme, AppContainerContext, useTheme } from '@redsift/design-system';
6
- import styled, { css } from 'styled-components';
7
- import { u as useToggletipContext } from './useToggletipContext.js';
8
-
9
- /**
10
- * Component style.
11
- */
12
- const StyledToggletipContent = styled.div`
13
- ${_ref => {
14
- let {
15
- display
16
- } = _ref;
17
- return display ? `display: ${display};` : '';
18
- }}
19
- font-family: var(--redsift-typography-body-font-family);
20
- font-size: var(--redsift-typography-body-font-size);
21
- font-weight: var(--redsift-typography-body-font-weight);
22
- line-height: 20px;
23
-
24
- ${_ref2 => {
25
- let {
26
- padding,
27
- paddingBottom,
28
- paddingLeft,
29
- paddingRight,
30
- paddingTop
31
- } = _ref2;
32
- return css`
33
- ${padding ? `padding: ${padding};` : ''}
34
- ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
35
- ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
36
- ${paddingRight ? `padding-right: ${paddingRight};` : ''}
37
- ${paddingTop ? `padding-top: ${paddingTop};` : ''}
38
- `;
39
- }}
40
- ${_ref3 => {
41
- let {
42
- padding,
43
- paddingBottom,
44
- paddingLeft,
45
- paddingRight,
46
- paddingTop
47
- } = _ref3;
48
- return css`
49
- ${padding ? `padding: ${padding};` : ''}
50
- ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
51
- ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
52
- ${paddingRight ? `padding-right: ${paddingRight};` : ''}
53
- ${paddingTop ? `padding-top: ${paddingTop};` : ''}
54
- `;
55
- }}
56
- ${_ref4 => {
57
- let {
58
- height,
59
- maxHeight,
60
- maxWidth,
61
- minHeight,
62
- minWidth,
63
- width
64
- } = _ref4;
65
- return css`
66
- ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
67
- ${maxHeight ? `max-height: ${maxHeight};` : ''}
68
- ${maxWidth ? `max-width: ${maxWidth};` : ''}
69
- ${minHeight ? `min-height: ${minHeight};` : ''}
70
- ${minWidth ? `min-width: ${minWidth};` : ''}
71
- ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
72
- `;
73
- }}
74
- ${_ref5 => {
75
- let {
76
- position,
77
- top,
78
- bottom,
79
- left,
80
- right,
81
- zIndex
82
- } = _ref5;
83
- return css`
84
- ${position ? `position: ${position};` : ''}
85
- ${top ? `top: ${top};` : ''}
86
- ${bottom ? `bottom: ${bottom};` : ''}
87
- ${left ? `left: ${left};` : ''}
88
- ${right ? `right: ${right};` : ''}
89
- ${zIndex ? `z-index: ${zIndex};` : ''}
90
- `;
91
- }}
92
- ${_ref6 => {
93
- let {
94
- alignContent,
95
- alignItems,
96
- gap,
97
- gridAutoColumns,
98
- gridAutoRows,
99
- gridTemplateAreas,
100
- gridTemplateColumns,
101
- gridTemplateRows,
102
- justifyContent,
103
- justifyItems
104
- } = _ref6;
105
- return css`
106
- ${alignContent ? `align-content: ${alignContent};` : ''}
107
- ${alignItems ? `align-items: ${alignItems};` : ''}
108
- ${gap ? `gap: ${gap};` : ''}
109
- ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}
110
- ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}
111
- ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}
112
- ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}
113
- ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}
114
- ${justifyContent ? `justify-content: ${justifyContent};` : ''}
115
- ${justifyItems ? `justify-items: ${justifyItems};` : ''}
116
- `;
117
- }}
118
- ${_ref7 => {
119
- let {
120
- alignContent,
121
- alignItems,
122
- flexDirection,
123
- flexWrap,
124
- gap,
125
- justifyContent
126
- } = _ref7;
127
- return css`
128
- ${alignContent ? `align-content: ${alignContent};` : ''}
129
- ${alignItems ? `align-items: ${alignItems};` : ''}
130
- ${flexDirection ? `flex-direction: ${flexDirection};` : ''}
131
- ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}
132
- gap: ${gap};
133
- ${justifyContent ? `justify-content: ${justifyContent};` : ''}
134
- `;
135
- }}
136
-
137
- ${_ref8 => {
138
- let {
139
- $theme
140
- } = _ref8;
141
- return css`
142
- color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
143
- background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});
144
- `;
145
- }}
146
-
147
- border-radius: 4px;
148
- box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
149
- filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
150
- font-family: var(--redsift-typography-body-font-family);
151
- font-size: var(--redsift-typography-body-font-size);
152
- font-weight: var(--redsift-typography-body-font-weight);
153
- line-height: 20px;
154
- max-width: calc(100vw - 48px);
155
- overflow: auto;
156
- z-index: var(--redsift-layout-z-index-toggletip);
157
-
158
- &:focus-visible {
159
- outline: none;
160
- }
161
- `;
162
-
163
- const _excluded = ["children", "className", "style", "theme"];
164
- const COMPONENT_NAME = 'ToggletipContent';
165
- const CLASSNAME = 'redsift-toggletip-content';
166
-
167
- /**
168
- * The ToggletipContent component.
169
- */
170
- const ToggletipContent = /*#__PURE__*/forwardRef((props, ref) => {
171
- const {
172
- children,
173
- className,
174
- style,
175
- theme: propsTheme
176
- } = props,
177
- forwardedProps = _objectWithoutProperties(props, _excluded);
178
- const appContainerState = useContext(AppContainerContext);
179
- const {
180
- context: floatingContext,
181
- getFloatingProps,
182
- isModal,
183
- isOpen,
184
- refs,
185
- strategy,
186
- x,
187
- y,
188
- hideInsteadOfClose
189
- } = useToggletipContext();
190
- const theme = useTheme(propsTheme);
191
- const toggletipRef = useMergeRefs([refs.setFloating, ref]);
192
- const RenderedToggletipContent = /*#__PURE__*/React.createElement(StyledToggletipContent, _extends({
193
- $theme: theme
194
- }, getFloatingProps(props), {
195
- style: _objectSpread2({
196
- position: strategy,
197
- top: y !== null && y !== void 0 ? y : 0,
198
- left: x !== null && x !== void 0 ? x : 0,
199
- width: 'fit-content',
200
- display: hideInsteadOfClose && !isOpen ? 'none' : 'flex'
201
- }, style),
202
- className: classNames(ToggletipContent.className, className)
203
- }, forwardedProps, {
204
- ref: toggletipRef
205
- }), children);
206
- return /*#__PURE__*/React.createElement(FloatingPortal, {
207
- root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
208
- }, isOpen || hideInsteadOfClose ? /*#__PURE__*/React.createElement(FloatingFocusManager, {
209
- context: floatingContext,
210
- modal: isModal
211
- }, RenderedToggletipContent) : null);
212
- });
213
- ToggletipContent.className = CLASSNAME;
214
- ToggletipContent.displayName = COMPONENT_NAME;
215
-
216
- export { StyledToggletipContent as S, ToggletipContent as T };
217
- //# sourceMappingURL=ToggletipContent.js.map
package/_internal/ToggletipContent.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggletipContent.js","sources":["../../src/components/toggletip-content/styles.ts","../../src/components/toggletip-content/ToggletipContent.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledToggletipContentProps } from './types';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledToggletipContent = styled.div<StyledToggletipContentProps>`\n ${({ display }) => (display ? `display: ${display};` : '')}\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: 20px;\n\n ${({ padding, paddingBottom, paddingLeft, paddingRight, paddingTop }) =>\n css`\n ${padding ? `padding: ${padding};` : ''}\n ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}\n ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}\n ${paddingRight ? `padding-right: ${paddingRight};` : ''}\n ${paddingTop ? `padding-top: ${paddingTop};` : ''}\n `}\n ${({ padding, paddingBottom, paddingLeft, paddingRight, paddingTop }) =>\n css`\n ${padding ? `padding: ${padding};` : ''}\n ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}\n ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}\n ${paddingRight ? `padding-right: ${paddingRight};` : ''}\n ${paddingTop ? `padding-top: ${paddingTop};` : ''}\n `}\n ${({ height, maxHeight, maxWidth, minHeight, minWidth, width }) =>\n css`\n ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}\n ${maxHeight ? `max-height: ${maxHeight};` : ''}\n ${maxWidth ? `max-width: ${maxWidth};` : ''}\n ${minHeight ? `min-height: ${minHeight};` : ''}\n ${minWidth ? `min-width: ${minWidth};` : ''}\n ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}\n `}\n ${({ position, top, bottom, left, right, zIndex }) =>\n css`\n ${position ? `position: ${position};` : ''}\n ${top ? `top: ${top};` : ''}\n ${bottom ? `bottom: ${bottom};` : ''}\n ${left ? `left: ${left};` : ''}\n ${right ? `right: ${right};` : ''}\n ${zIndex ? `z-index: ${zIndex};` : ''}\n `}\n ${({\n alignContent,\n alignItems,\n gap,\n gridAutoColumns,\n gridAutoRows,\n gridTemplateAreas,\n gridTemplateColumns,\n gridTemplateRows,\n justifyContent,\n justifyItems,\n }) =>\n css`\n ${alignContent ? `align-content: ${alignContent};` : ''}\n ${alignItems ? `align-items: ${alignItems};` : ''}\n ${gap ? `gap: ${gap};` : ''}\n ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}\n ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}\n ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}\n ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}\n ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}\n ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n ${justifyItems ? `justify-items: ${justifyItems};` : ''}\n `}\n ${({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent }) =>\n css`\n ${alignContent ? `align-content: ${alignContent};` : ''}\n ${alignItems ? `align-items: ${alignItems};` : ''}\n ${flexDirection ? `flex-direction: ${flexDirection};` : ''}\n ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}\n gap: ${gap};\n ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n `}\n\n ${({ $theme }) => css`\n color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});\n `}\n\n border-radius: 4px;\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);\n filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: 20px;\n max-width: calc(100vw - 48px);\n overflow: auto;\n z-index: var(--redsift-layout-z-index-toggletip);\n\n &:focus-visible {\n outline: none;\n }\n`;\n","import React, { forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';\n\nimport { AppContainerContext, Comp, useTheme } from '@redsift/design-system';\nimport { ToggletipContentProps } from './types';\nimport { useToggletipContext } from '../toggletip';\nimport { StyledToggletipContent } from './styles';\n\nconst COMPONENT_NAME = 'ToggletipContent';\nconst CLASSNAME = 'redsift-toggletip-content';\n\n/**\n * The ToggletipContent component.\n */\nexport const ToggletipContent: Comp<ToggletipContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, style, theme: propsTheme, ...forwardedProps } = props;\n const appContainerState = useContext(AppContainerContext);\n const {\n context: floatingContext,\n getFloatingProps,\n isModal,\n isOpen,\n refs,\n strategy,\n x,\n y,\n hideInsteadOfClose,\n } = useToggletipContext();\n const theme = useTheme(propsTheme);\n const toggletipRef = useMergeRefs([refs.setFloating, ref]);\n\n const RenderedToggletipContent = (\n <StyledToggletipContent\n $theme={theme!}\n {...getFloatingProps(props)}\n style={{\n position: strategy,\n top: y ?? 0,\n left: x ?? 0,\n width: 'fit-content',\n display: hideInsteadOfClose && !isOpen ? 'none' : 'flex',\n ...style,\n }}\n className={classNames(ToggletipContent.className, className)}\n {...forwardedProps}\n ref={toggletipRef}\n >\n {children}\n </StyledToggletipContent>\n );\n\n return (\n <FloatingPortal root={appContainerState?.appContainerRef.current}>\n {isOpen || hideInsteadOfClose ? (\n <FloatingFocusManager context={floatingContext} modal={isModal}>\n {RenderedToggletipContent}\n </FloatingFocusManager>\n ) : null}\n </FloatingPortal>\n );\n});\nToggletipContent.className = CLASSNAME;\nToggletipContent.displayName = COMPONENT_NAME;\n"],"names":["StyledToggletipContent","styled","div","_ref","display","_ref2","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","css","_ref3","_ref4","height","maxHeight","maxWidth","minHeight","minWidth","width","undefined","_ref5","position","top","bottom","left","right","zIndex","_ref6","alignContent","alignItems","gap","gridAutoColumns","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","justifyContent","justifyItems","_ref7","flexDirection","flexWrap","_ref8","$theme","Theme","dark","COMPONENT_NAME","CLASSNAME","ToggletipContent","forwardRef","props","ref","children","className","style","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","appContainerState","useContext","AppContainerContext","context","floatingContext","getFloatingProps","isModal","isOpen","refs","strategy","x","y","hideInsteadOfClose","useToggletipContext","useTheme","toggletipRef","useMergeRefs","setFloating","RenderedToggletipContent","React","createElement","_extends","_objectSpread","classNames","FloatingPortal","root","appContainerRef","current","FloatingFocusManager","modal","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACaA,MAAAA,sBAAsB,GAAGC,MAAM,CAACC,GAAiC,CAAA;AAC9E,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,GAAI,CAAA,SAAA,EAAWA,OAAQ,CAAA,CAAA,CAAE,GAAG,EAAE,CAAA;AAAA,CAAE,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC,aAAa;IAAEC,WAAW;IAAEC,YAAY;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAL,KAAA,CAAA;AAAA,EAAA,OAClEM,GAAI,CAAA;AACR,MAAA,EAAQL,OAAO,GAAI,CAAA,SAAA,EAAWA,OAAQ,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9C,MAAA,EAAQC,aAAa,GAAI,CAAA,gBAAA,EAAkBA,aAAc,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjE,MAAA,EAAQC,WAAW,GAAI,CAAA,cAAA,EAAgBA,WAAY,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3D,MAAA,EAAQC,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;IAAEN,OAAO;IAAEC,aAAa;IAAEC,WAAW;IAAEC,YAAY;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAClED,GAAI,CAAA;AACR,MAAA,EAAQL,OAAO,GAAI,CAAA,SAAA,EAAWA,OAAQ,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9C,MAAA,EAAQC,aAAa,GAAI,CAAA,gBAAA,EAAkBA,aAAc,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjE,MAAA,EAAQC,WAAW,GAAI,CAAA,cAAA,EAAgBA,WAAY,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3D,MAAA,EAAQC,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAA,EAAIG,KAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,QAAQ;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAN,KAAA,CAAA;AAAA,EAAA,OAC5DF,GAAI,CAAA;AACR,MAAA,EAAQG,MAAM,KAAKM,SAAS,GAAI,CAAA,QAAA,EAAU,OAAON,MAAM,KAAK,QAAQ,GAAI,GAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACtG,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,MAAA,EAAQC,QAAQ,GAAI,CAAA,WAAA,EAAaA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClD,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,MAAA,EAAQC,QAAQ,GAAI,CAAA,WAAA,EAAaA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClD,MAAA,EAAQC,KAAK,KAAKC,SAAS,GAAI,CAAA,OAAA,EAAS,OAAOD,KAAK,KAAK,QAAQ,GAAI,GAAEA,KAAM,CAAA,EAAA,CAAG,GAAGA,KAAM,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjG,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,GAAG;IAAEC,MAAM;IAAEC,IAAI;IAAEC,KAAK;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAN,KAAA,CAAA;AAAA,EAAA,OAC/CV,GAAI,CAAA;AACR,MAAA,EAAQW,QAAQ,GAAI,CAAA,UAAA,EAAYA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjD,MAAA,EAAQC,GAAG,GAAI,CAAA,KAAA,EAAOA,GAAI,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClC,MAAA,EAAQC,MAAM,GAAI,CAAA,QAAA,EAAUA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3C,MAAA,EAAQC,IAAI,GAAI,CAAA,MAAA,EAAQA,IAAK,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrC,MAAA,EAAQC,KAAK,GAAI,CAAA,OAAA,EAASA,KAAM,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxC,MAAA,EAAQC,MAAM,GAAI,CAAA,SAAA,EAAWA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC5C,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IACDC,YAAY;IACZC,UAAU;IACVC,GAAG;IACHC,eAAe;IACfC,YAAY;IACZC,iBAAiB;IACjBC,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;AACdC,IAAAA,YAAAA;AACF,GAAC,GAAAV,KAAA,CAAA;AAAA,EAAA,OACCjB,GAAI,CAAA;AACR,MAAA,EAAQkB,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,MAAA,EAAQC,GAAG,GAAI,CAAA,KAAA,EAAOA,GAAI,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClC,MAAA,EAAQC,eAAe,GAAI,CAAA,mBAAA,EAAqBA,eAAgB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxE,MAAA,EAAQC,YAAY,GAAI,CAAA,gBAAA,EAAkBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC/D,MAAA,EAAQC,iBAAiB,GAAI,CAAA,qBAAA,EAAuBA,iBAAkB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9E,MAAA,EAAQC,mBAAmB,GAAI,CAAA,uBAAA,EAAyBA,mBAAoB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACpF,MAAA,EAAQC,gBAAgB,GAAI,CAAA,oBAAA,EAAsBA,gBAAiB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3E,MAAA,EAAQC,cAAc,GAAI,CAAA,iBAAA,EAAmBA,cAAe,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACpE,MAAA,EAAQC,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEV,YAAY;IAAEC,UAAU;IAAEU,aAAa;IAAEC,QAAQ;IAAEV,GAAG;AAAEM,IAAAA,cAAAA;AAAe,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAC3E5B,GAAI,CAAA;AACR,MAAA,EAAQkB,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,MAAA,EAAQU,aAAa,GAAI,CAAA,gBAAA,EAAkBA,aAAc,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjE,MAAA,EAAQC,QAAQ,GAAI,CAAA,WAAA,EAAaA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClD,WAAA,EAAaV,GAAI,CAAA;AACjB,MAAA,EAAQM,cAAc,GAAI,CAAA,iBAAA,EAAmBA,cAAe,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACpE,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA,EAAA,EAAIK,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAK/B,GAAI,CAAA;AACxB,uCAAyCgC,EAAAA,MAAM,KAAKC,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACzF,kDAAoDF,EAAAA,MAAM,KAAKC,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,OAAQ,CAAA;AAC9F,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AC5FA,MAAMC,cAAc,GAAG,kBAAkB,CAAA;AACzC,MAAMC,SAAS,GAAG,2BAA2B,CAAA;;AAE7C;AACA;AACA;AACO,MAAMC,gBAA6D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtG,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,KAAK;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA,CAAA,CAAA;AAClF,EAAA,MAAMC,iBAAiB,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;EACzD,MAAM;AACJC,IAAAA,OAAO,EAAEC,eAAe;IACxBC,gBAAgB;IAChBC,OAAO;IACPC,MAAM;IACNC,IAAI;IACJC,QAAQ;IACRC,CAAC;IACDC,CAAC;AACDC,IAAAA,kBAAAA;GACD,GAAGC,mBAAmB,EAAE,CAAA;AACzB,EAAA,MAAMlB,KAAK,GAAGmB,QAAQ,CAAClB,UAAU,CAAC,CAAA;EAClC,MAAMmB,YAAY,GAAGC,YAAY,CAAC,CAACR,IAAI,CAACS,WAAW,EAAE1B,GAAG,CAAC,CAAC,CAAA;EAE1D,MAAM2B,wBAAwB,gBAC5BC,KAAA,CAAAC,aAAA,CAAChF,sBAAsB,EAAAiF,QAAA,CAAA;AACrBtC,IAAAA,MAAM,EAAEY,KAAAA;GACJU,EAAAA,gBAAgB,CAACf,KAAK,CAAC,EAAA;AAC3BI,IAAAA,KAAK,EAAA4B,cAAA,CAAA;AACH5D,MAAAA,QAAQ,EAAE+C,QAAQ;AAClB9C,MAAAA,GAAG,EAAEgD,CAAC,KAAA,IAAA,IAADA,CAAC,KAADA,KAAAA,CAAAA,GAAAA,CAAC,GAAI,CAAC;AACX9C,MAAAA,IAAI,EAAE6C,CAAC,KAAA,IAAA,IAADA,CAAC,KAADA,KAAAA,CAAAA,GAAAA,CAAC,GAAI,CAAC;AACZnD,MAAAA,KAAK,EAAE,aAAa;AACpBf,MAAAA,OAAO,EAAEoE,kBAAkB,IAAI,CAACL,MAAM,GAAG,MAAM,GAAG,MAAA;AAAM,KAAA,EACrDb,KAAK,CACR;AACFD,IAAAA,SAAS,EAAE8B,UAAU,CAACnC,gBAAgB,CAACK,SAAS,EAAEA,SAAS,CAAA;AAAE,GAAA,EACzDI,cAAc,EAAA;AAClBN,IAAAA,GAAG,EAAEwB,YAAAA;AAAa,GAAA,CAAA,EAEjBvB,QACqB,CACzB,CAAA;AAED,EAAA,oBACE2B,KAAA,CAAAC,aAAA,CAACI,cAAc,EAAA;IAACC,IAAI,EAAEzB,iBAAiB,KAAjBA,IAAAA,IAAAA,iBAAiB,uBAAjBA,iBAAiB,CAAE0B,eAAe,CAACC,OAAAA;GACtDpB,EAAAA,MAAM,IAAIK,kBAAkB,gBAC3BO,KAAA,CAAAC,aAAA,CAACQ,oBAAoB,EAAA;AAACzB,IAAAA,OAAO,EAAEC,eAAgB;AAACyB,IAAAA,KAAK,EAAEvB,OAAAA;AAAQ,GAAA,EAC5DY,wBACmB,CAAC,GACrB,IACU,CAAC,CAAA;AAErB,CAAC,EAAC;AACF9B,gBAAgB,CAACK,SAAS,GAAGN,SAAS,CAAA;AACtCC,gBAAgB,CAAC0C,WAAW,GAAG5C,cAAc;;;;"}
package/_internal/ToggletipTrigger.js DELETED
@@ -1,47 +0,0 @@
1
- import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
2
- import React, { forwardRef } from 'react';
3
- import { useMergeRefs } from '@floating-ui/react';
4
- import { isComponent } from '@redsift/design-system';
5
- import classNames from 'classnames';
6
- import { u as useToggletipContext } from './useToggletipContext.js';
7
-
8
- const COMPONENT_NAME = 'ToggletipTrigger';
9
- const CLASSNAME = 'redsift-toggletip-trigger';
10
-
11
- /**
12
- * The ToggletipTrigger component.
13
- */
14
- const ToggletipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
15
- const {
16
- children
17
- } = props;
18
- const {
19
- getReferenceProps,
20
- isOpen,
21
- handleOpen,
22
- refs,
23
- triggerClassName,
24
- color
25
- } = useToggletipContext();
26
- const childrenRef = children.ref;
27
- const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
28
- if (isComponent('Button')(children) || isComponent('IconButton')(children) || isComponent('LinkButton')(children) || isComponent('Checkbox')(children) || isComponent('Switch')(children) || isComponent('Radio')(children) || isComponent('Item')(children)) {
29
- var _children$props$child;
30
- return /*#__PURE__*/React.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
31
- ref: triggerRef
32
- }, props), children.props), {}, {
33
- children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
34
- }))), {}, {
35
- onClick: props.onClick ? props.onClick : () => handleOpen(!isOpen),
36
- isActive: isOpen,
37
- className: classNames(children.props.className, triggerClassName),
38
- color: color !== null && color !== void 0 ? color : children.props.color
39
- }));
40
- }
41
- return null;
42
- });
43
- ToggletipTrigger.className = CLASSNAME;
44
- ToggletipTrigger.displayName = COMPONENT_NAME;
45
-
46
- export { ToggletipTrigger as T };
47
- //# sourceMappingURL=ToggletipTrigger.js.map
package/_internal/ToggletipTrigger.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggletipTrigger.js","sources":["../../src/components/toggletip-trigger/ToggletipTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp, isComponent } from '@redsift/design-system';\nimport { useToggletipContext } from '../toggletip';\nimport { ToggletipTriggerProps } from './types';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'ToggletipTrigger';\nconst CLASSNAME = 'redsift-toggletip-trigger';\n\n/**\n * The ToggletipTrigger component.\n */\nexport const ToggletipTrigger: Comp<ToggletipTriggerProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const { children } = props;\n\n const { getReferenceProps, isOpen, handleOpen, refs, triggerClassName, color } = useToggletipContext();\n const childrenRef = (children as any).ref;\n const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);\n\n if (\n isComponent('Button')(children) ||\n isComponent('IconButton')(children) ||\n isComponent('LinkButton')(children) ||\n isComponent('Checkbox')(children) ||\n isComponent('Switch')(children) ||\n isComponent('Radio')(children) ||\n isComponent('Item')(children)\n ) {\n return React.cloneElement(children as ReactElement, {\n ...getReferenceProps({\n ref: triggerRef,\n ...props,\n ...children.props,\n children: children.props.children ?? '',\n }),\n onClick: props.onClick ? props.onClick : () => handleOpen(!isOpen),\n isActive: isOpen,\n className: classNames((children as ReactElement).props.className, triggerClassName),\n color: color ?? children.props.color,\n });\n }\n\n return null;\n});\nToggletipTrigger.className = CLASSNAME;\nToggletipTrigger.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","ToggletipTrigger","forwardRef","props","ref","children","getReferenceProps","isOpen","handleOpen","refs","triggerClassName","color","useToggletipContext","childrenRef","triggerRef","useMergeRefs","setReference","isComponent","_children$props$child","React","cloneElement","_objectSpread","onClick","isActive","className","classNames","displayName"],"mappings":";;;;;;;AAQA,MAAMA,cAAc,GAAG,kBAAkB,CAAA;AACzC,MAAMC,SAAS,GAAG,2BAA2B,CAAA;;AAE7C;AACA;AACA;AACO,MAAMC,gBAAgE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzG,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGF,KAAK,CAAA;EAE1B,MAAM;IAAEG,iBAAiB;IAAEC,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,gBAAgB;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,mBAAmB,EAAE,CAAA;AACtG,EAAA,MAAMC,WAAW,GAAIR,QAAQ,CAASD,GAAG,CAAA;AACzC,EAAA,MAAMU,UAAU,GAAGC,YAAY,CAAC,CAACN,IAAI,CAACO,YAAY,EAAEZ,GAAG,EAAES,WAAW,CAAC,CAAC,CAAA;EAEtE,IACEI,WAAW,CAAC,QAAQ,CAAC,CAACZ,QAAQ,CAAC,IAC/BY,WAAW,CAAC,YAAY,CAAC,CAACZ,QAAQ,CAAC,IACnCY,WAAW,CAAC,YAAY,CAAC,CAACZ,QAAQ,CAAC,IACnCY,WAAW,CAAC,UAAU,CAAC,CAACZ,QAAQ,CAAC,IACjCY,WAAW,CAAC,QAAQ,CAAC,CAACZ,QAAQ,CAAC,IAC/BY,WAAW,CAAC,OAAO,CAAC,CAACZ,QAAQ,CAAC,IAC9BY,WAAW,CAAC,MAAM,CAAC,CAACZ,QAAQ,CAAC,EAC7B;AAAA,IAAA,IAAAa,qBAAA,CAAA;AACA,IAAA,oBAAOC,KAAK,CAACC,YAAY,CAACf,QAAQ,EAAAgB,cAAA,CAAAA,cAAA,CAAA,EAAA,EAC7Bf,iBAAiB,CAAAe,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA;AAClBjB,MAAAA,GAAG,EAAEU,UAAAA;AAAU,KAAA,EACZX,KAAK,CAAA,EACLE,QAAQ,CAACF,KAAK,CAAA,EAAA,EAAA,EAAA;AACjBE,MAAAA,QAAQ,EAAAa,CAAAA,qBAAA,GAAEb,QAAQ,CAACF,KAAK,CAACE,QAAQ,MAAAa,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAI,EAAA;AAAE,KAAA,CACxC,CAAC,CAAA,EAAA,EAAA,EAAA;AACFI,MAAAA,OAAO,EAAEnB,KAAK,CAACmB,OAAO,GAAGnB,KAAK,CAACmB,OAAO,GAAG,MAAMd,UAAU,CAAC,CAACD,MAAM,CAAC;AAClEgB,MAAAA,QAAQ,EAAEhB,MAAM;MAChBiB,SAAS,EAAEC,UAAU,CAAEpB,QAAQ,CAAkBF,KAAK,CAACqB,SAAS,EAAEd,gBAAgB,CAAC;MACnFC,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIN,QAAQ,CAACF,KAAK,CAACQ,KAAAA;AAAK,KAAA,CACrC,CAAC,CAAA;AACJ,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACb,CAAC,EAAC;AACFV,gBAAgB,CAACuB,SAAS,GAAGxB,SAAS,CAAA;AACtCC,gBAAgB,CAACyB,WAAW,GAAG3B,cAAc;;;;"}
package/_internal/toggletip-content.js DELETED
@@ -1,2 +0,0 @@
1
- export { S as StyledToggletipContent, T as ToggletipContent } from './ToggletipContent.js';
2
- //# sourceMappingURL=toggletip-content.js.map
package/_internal/toggletip-content.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"toggletip-content.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/_internal/toggletip-trigger.js DELETED
@@ -1,2 +0,0 @@
1
- export { T as ToggletipTrigger } from './ToggletipTrigger.js';
2
- //# sourceMappingURL=toggletip-trigger.js.map
package/_internal/toggletip-trigger.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"toggletip-trigger.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/_internal/toggletip.js DELETED
@@ -1,174 +0,0 @@
1
- import { T as ToggletipContext } from './useToggletipContext.js';
2
- export { T as ToggletipContext, u as useToggletipContext } from './useToggletipContext.js';
3
- import React, { useState, useEffect, useCallback } from 'react';
4
- import { useTheme, partitionComponents, isComponent, ThemeProvider } from '@redsift/design-system';
5
- import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
6
- import { offset, flip, shift, size, useFloating, autoUpdate, useDismiss, useRole, useInteractions } from '@floating-ui/react';
7
- import { T as ToggletipTrigger } from './ToggletipTrigger.js';
8
- import { T as ToggletipContent } from './ToggletipContent.js';
9
-
10
- /**
11
- * Context props.
12
- */
13
-
14
- /**
15
- * Component variant.
16
- */
17
- const ToggletipPlacement = {
18
- top: 'top',
19
- right: 'right',
20
- bottom: 'bottom',
21
- left: 'left',
22
- 'top-start': 'top-start',
23
- 'top-end': 'top-end',
24
- 'right-start': 'right-start',
25
- 'right-end': 'right-end',
26
- 'bottom-start': 'bottom-start',
27
- 'bottom-end': 'bottom-end',
28
- 'left-start': 'left-start',
29
- 'left-end': 'left-end'
30
- };
31
-
32
- /**
33
- * Component props.
34
- */
35
-
36
- function useToggletip(_ref) {
37
- let {
38
- color,
39
- defaultOpen,
40
- isModal,
41
- isOpen: propsIsOpen,
42
- maxWidth,
43
- minWidth,
44
- offset: propsOffset,
45
- onOpen,
46
- placement,
47
- role: propsRole,
48
- triggerClassName,
49
- width,
50
- setHideInsteadOfClose,
51
- hideInsteadOfClose
52
- } = _ref;
53
- const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
54
- useEffect(() => {
55
- setIsOpen(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
56
- }, [propsIsOpen, defaultOpen]);
57
- const handleOpen = useCallback(collapsed => {
58
- if (onOpen) {
59
- onOpen(collapsed);
60
- }
61
- if (propsIsOpen === undefined || propsIsOpen === null) {
62
- setIsOpen(collapsed);
63
- }
64
- }, [onOpen]);
65
- const middleware = [offset(propsOffset !== null && propsOffset !== void 0 ? propsOffset : 2), flip({
66
- fallbackAxisSideDirection: 'end'
67
- }), shift({
68
- padding: 2
69
- })];
70
- middleware.push(size({
71
- apply(_ref2) {
72
- let {
73
- availableHeight,
74
- availableWidth,
75
- rects,
76
- elements
77
- } = _ref2;
78
- Object.assign(elements.floating.style, _objectSpread2(_objectSpread2(_objectSpread2({
79
- maxHeight: `${availableHeight}px`
80
- }, minWidth !== undefined && {
81
- minWidth: `${minWidth === 'available-width' ? availableWidth : minWidth === 'trigger-width' ? rects.reference.width : minWidth}px`
82
- }), width !== undefined && {
83
- width: `${width === 'available-width' ? availableWidth : width === 'trigger-width' ? rects.reference.width : width}px`
84
- }), maxWidth !== undefined && {
85
- maxWidth: `${maxWidth === 'available-width' ? availableWidth : maxWidth === 'trigger-width' ? rects.reference.width : maxWidth}px`
86
- }));
87
- }
88
- }));
89
- const data = useFloating({
90
- placement,
91
- open: isOpen,
92
- onOpenChange: handleOpen,
93
- whileElementsMounted: autoUpdate,
94
- middleware
95
- });
96
- const context = data.context;
97
- const dismiss = useDismiss(context);
98
- const role = useRole(context, {
99
- role: propsRole
100
- });
101
- const interactions = useInteractions([dismiss, role]);
102
- return React.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
103
- color,
104
- isOpen,
105
- handleOpen
106
- }, interactions), data), {}, {
107
- isModal,
108
- triggerClassName,
109
- setHideInsteadOfClose,
110
- hideInsteadOfClose
111
- }), [color, isOpen, handleOpen, interactions, data, isModal, triggerClassName, setHideInsteadOfClose, hideInsteadOfClose]);
112
- }
113
-
114
- const COMPONENT_NAME = 'Toggletip';
115
- const CLASSNAME = 'redsift-toggletip';
116
-
117
- /**
118
- * The Toggletip component.
119
- */
120
- const BaseToggletip = props => {
121
- var _overrideDisplayName$, _overrideDisplayName$2, _overrideDisplayName$3, _overrideDisplayName$4;
122
- const {
123
- children,
124
- color,
125
- defaultOpen,
126
- isModal = false,
127
- isOpen,
128
- maxWidth,
129
- minWidth,
130
- offset,
131
- onOpen,
132
- overrideDisplayName,
133
- placement = ToggletipPlacement.bottom,
134
- role = 'dialog',
135
- theme: propsTheme,
136
- triggerClassName,
137
- width
138
- } = props;
139
- const theme = useTheme(propsTheme);
140
- const [hideInsteadOfClose, setHideInsteadOfClose] = useState(false);
141
- const toggletip = useToggletip({
142
- color,
143
- defaultOpen,
144
- isModal,
145
- isOpen,
146
- maxWidth,
147
- minWidth,
148
- offset,
149
- onOpen,
150
- placement,
151
- role,
152
- triggerClassName,
153
- setHideInsteadOfClose,
154
- hideInsteadOfClose,
155
- width
156
- });
157
- const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [isComponent((_overrideDisplayName$ = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.trigger) !== null && _overrideDisplayName$ !== void 0 ? _overrideDisplayName$ : 'ToggletipTrigger'), isComponent((_overrideDisplayName$2 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.content) !== null && _overrideDisplayName$2 !== void 0 ? _overrideDisplayName$2 : 'ToggletipContent')]);
158
- return /*#__PURE__*/React.createElement(ThemeProvider, {
159
- value: {
160
- theme
161
- }
162
- }, /*#__PURE__*/React.createElement(ToggletipContext.Provider, {
163
- value: toggletip
164
- }, trigger && isComponent((_overrideDisplayName$3 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.trigger) !== null && _overrideDisplayName$3 !== void 0 ? _overrideDisplayName$3 : 'ToggletipTrigger')(trigger) ? trigger : null, content && isComponent((_overrideDisplayName$4 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.content) !== null && _overrideDisplayName$4 !== void 0 ? _overrideDisplayName$4 : 'ToggletipContent')(content) ? content : null));
165
- };
166
- BaseToggletip.className = CLASSNAME;
167
- BaseToggletip.displayName = COMPONENT_NAME;
168
- const Toggletip = Object.assign(BaseToggletip, {
169
- Trigger: ToggletipTrigger,
170
- Content: ToggletipContent
171
- });
172
-
173
- export { BaseToggletip, Toggletip, ToggletipPlacement, useToggletip };
174
- //# sourceMappingURL=toggletip.js.map
package/_internal/toggletip.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"toggletip.js","sources":["../../src/components/toggletip/types.ts","../../src/components/toggletip/useToggletip.tsx","../../src/components/toggletip/Toggletip.tsx"],"sourcesContent":["import { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { ButtonColor, Theme, ValueOf } from '@redsift/design-system';\nimport { useToggletip } from './useToggletip';\n\n/**\n * Context props.\n */\nexport type HiddenToggletipState = {\n /** Whether the toggletip should be hidden or removed from the DOM. */\n hideInsteadOfClose?: boolean;\n /** Method to set the hideInsteadOfClose prop. */\n setHideInsteadOfClose?: Dispatch<SetStateAction<boolean>>;\n};\nexport type ToggletipState =\n | (ReturnType<typeof useToggletip> & {\n /** Class name to append to the trigger. */\n readonly triggerClassName?: string;\n } & HiddenToggletipState)\n | null;\n\n/**\n * Component variant.\n */\nexport const ToggletipPlacement = {\n top: 'top',\n right: 'right',\n bottom: 'bottom',\n left: 'left',\n 'top-start': 'top-start',\n 'top-end': 'top-end',\n 'right-start': 'right-start',\n 'right-end': 'right-end',\n 'bottom-start': 'bottom-start',\n 'bottom-end': 'bottom-end',\n 'left-start': 'left-start',\n 'left-end': 'left-end',\n} as const;\nexport type ToggletipPlacement = ValueOf<typeof ToggletipPlacement>;\n\n/**\n * Component props.\n */\nexport interface ToggletipProps {\n /** Toggletip content width. Can be either based on the trigger, the available space or define with a number of pixels. */\n width?: 'trigger-width' | 'available-width' | number;\n /** Toggletip content min width. Can be either based on the trigger, the available space or define with a number of pixels. */\n minWidth?: 'trigger-width' | 'available-width' | number;\n /** Toggletip content max width. Can be either based on the trigger, the available space or define with a number of pixels. */\n maxWidth?: 'trigger-width' | 'available-width' | number;\n /** Button color that will be forward to the trigger. */\n color?: ButtonColor;\n /** Children. Can only be ToggletipTrigger and ToggletipContent. */\n children: ReactNode;\n /**\n * Default open status.\n * Used for uncontrolled version.\n */\n defaultOpen?: boolean;\n /** Default placement of the toggletip. */\n placement?: ToggletipPlacement;\n /** Whether the toggletip is a modal or not. */\n isModal?: boolean;\n /**\n * Whether the component is opened or not.\n * Used for controlled version.\n */\n isOpen?: boolean;\n /** Space between trigger and content (in pixels). */\n offset?: number;\n /** Method to handle component change. */\n onOpen?: (open: boolean) => void;\n /** Allows other components to be treated as trigger and content. */\n overrideDisplayName?: {\n content?: string;\n trigger?: string;\n };\n /** Role to apply to the toggletip. */\n role?: 'dialog' | 'menu' | 'listbox';\n /** Theme. */\n theme?: Theme;\n /** Class name to append to the trigger. */\n triggerClassName?: string;\n}\n\nexport type StyledToggletipProps = ToggletipProps;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport {\n useFloating,\n autoUpdate,\n offset,\n flip,\n shift,\n size,\n useDismiss,\n useRole,\n useInteractions,\n} from '@floating-ui/react';\nimport { HiddenToggletipState, ToggletipProps } from './types';\n\nexport function useToggletip({\n color,\n defaultOpen,\n isModal,\n isOpen: propsIsOpen,\n maxWidth,\n minWidth,\n offset: propsOffset,\n onOpen,\n placement,\n role: propsRole,\n triggerClassName,\n width,\n setHideInsteadOfClose,\n hideInsteadOfClose,\n}: Omit<ToggletipProps, 'children'> & HiddenToggletipState) {\n const [isOpen, setIsOpen] = useState(propsIsOpen ?? defaultOpen);\n\n useEffect(() => {\n setIsOpen(propsIsOpen ?? defaultOpen);\n }, [propsIsOpen, defaultOpen]);\n\n const handleOpen = useCallback(\n (collapsed: boolean) => {\n if (onOpen) {\n onOpen(collapsed);\n }\n if (propsIsOpen === undefined || propsIsOpen === null) {\n setIsOpen(collapsed);\n }\n },\n [onOpen]\n );\n\n const middleware = [\n offset(propsOffset ?? 2),\n flip({\n fallbackAxisSideDirection: 'end',\n }),\n shift({ padding: 2 }),\n ];\n\n middleware.push(\n size({\n apply({ availableHeight, availableWidth, rects, elements }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n ...(minWidth !== undefined && {\n minWidth: `${\n minWidth === 'available-width'\n ? availableWidth\n : minWidth === 'trigger-width'\n ? rects.reference.width\n : minWidth\n }px`,\n }),\n ...(width !== undefined && {\n width: `${\n width === 'available-width' ? availableWidth : width === 'trigger-width' ? rects.reference.width : width\n }px`,\n }),\n ...(maxWidth !== undefined && {\n maxWidth: `${\n maxWidth === 'available-width'\n ? availableWidth\n : maxWidth === 'trigger-width'\n ? rects.reference.width\n : maxWidth\n }px`,\n }),\n });\n },\n })\n );\n\n const data = useFloating({\n placement,\n open: isOpen,\n onOpenChange: handleOpen,\n whileElementsMounted: autoUpdate,\n middleware,\n });\n\n const context = data.context;\n\n const dismiss = useDismiss(context);\n const role = useRole(context, { role: propsRole });\n\n const interactions = useInteractions([dismiss, role]);\n\n return React.useMemo(\n () => ({\n color,\n isOpen,\n handleOpen,\n ...interactions,\n ...data,\n isModal,\n triggerClassName,\n setHideInsteadOfClose,\n hideInsteadOfClose,\n }),\n [\n color,\n isOpen,\n handleOpen,\n interactions,\n data,\n isModal,\n triggerClassName,\n setHideInsteadOfClose,\n hideInsteadOfClose,\n ]\n );\n}\n","import React, { useState } from 'react';\nimport { partitionComponents, isComponent, useTheme, ThemeProvider } from '@redsift/design-system';\nimport { ToggletipContent } from '../toggletip-content';\nimport { ToggletipTrigger } from '../toggletip-trigger';\n\nimport { ToggletipContext } from './context';\nimport { ToggletipPlacement, ToggletipProps } from './types';\nimport { useToggletip } from './useToggletip';\n\nconst COMPONENT_NAME = 'Toggletip';\nconst CLASSNAME = 'redsift-toggletip';\n\n/**\n * The Toggletip component.\n */\nexport const BaseToggletip: React.FC<ToggletipProps> & {\n displayName?: string;\n className?: string;\n} = (props) => {\n const {\n children,\n color,\n defaultOpen,\n isModal = false,\n isOpen,\n maxWidth,\n minWidth,\n offset,\n onOpen,\n overrideDisplayName,\n placement = ToggletipPlacement.bottom,\n role = 'dialog',\n theme: propsTheme,\n triggerClassName,\n width,\n } = props;\n\n const theme = useTheme(propsTheme);\n const [hideInsteadOfClose, setHideInsteadOfClose] = useState(false);\n\n const toggletip = useToggletip({\n color,\n defaultOpen,\n isModal,\n isOpen,\n maxWidth,\n minWidth,\n offset,\n onOpen,\n placement,\n role,\n triggerClassName,\n setHideInsteadOfClose,\n hideInsteadOfClose,\n width,\n });\n\n const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [\n isComponent(overrideDisplayName?.trigger ?? 'ToggletipTrigger'),\n isComponent(overrideDisplayName?.content ?? 'ToggletipContent'),\n ]);\n\n return (\n <ThemeProvider value={{ theme }}>\n <ToggletipContext.Provider value={toggletip}>\n {trigger && isComponent(overrideDisplayName?.trigger ?? 'ToggletipTrigger')(trigger) ? trigger : null}\n {content && isComponent(overrideDisplayName?.content ?? 'ToggletipContent')(content) ? content : null}\n </ToggletipContext.Provider>\n </ThemeProvider>\n );\n};\nBaseToggletip.className = CLASSNAME;\nBaseToggletip.displayName = COMPONENT_NAME;\n\nexport const Toggletip = Object.assign(BaseToggletip, {\n Trigger: ToggletipTrigger,\n Content: ToggletipContent,\n});\n"],"names":["ToggletipPlacement","top","right","bottom","left","useToggletip","_ref","color","defaultOpen","isModal","isOpen","propsIsOpen","maxWidth","minWidth","offset","propsOffset","onOpen","placement","role","propsRole","triggerClassName","width","setHideInsteadOfClose","hideInsteadOfClose","setIsOpen","useState","useEffect","handleOpen","useCallback","collapsed","undefined","middleware","flip","fallbackAxisSideDirection","shift","padding","push","size","apply","_ref2","availableHeight","availableWidth","rects","elements","Object","assign","floating","style","_objectSpread","maxHeight","reference","data","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","context","dismiss","useDismiss","useRole","interactions","useInteractions","React","useMemo","COMPONENT_NAME","CLASSNAME","BaseToggletip","props","_overrideDisplayName$","_overrideDisplayName$2","_overrideDisplayName$3","_overrideDisplayName$4","children","overrideDisplayName","theme","propsTheme","useTheme","toggletip","trigger","content","partitionComponents","Children","toArray","isComponent","createElement","ThemeProvider","value","ToggletipContext","Provider","className","displayName","Toggletip","Trigger","ToggletipTrigger","Content","ToggletipContent"],"mappings":"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"}
package/_internal/useToggletipContext.js DELETED
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
-
3
- const ToggletipContext = /*#__PURE__*/React.createContext(null);
4
-
5
- const useToggletipContext = () => {
6
- const context = React.useContext(ToggletipContext);
7
- if (context == null) {
8
- throw new Error('Toggletip components must be wrapped in <Toggletip />');
9
- }
10
- return context;
11
- };
12
-
13
- export { ToggletipContext as T, useToggletipContext as u };
14
- //# sourceMappingURL=useToggletipContext.js.map
package/_internal/useToggletipContext.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useToggletipContext.js","sources":["../../src/components/toggletip/context.ts","../../src/components/toggletip/useToggletipContext.tsx"],"sourcesContent":["import React from 'react';\nimport { ToggletipState } from './types';\n\nexport const ToggletipContext = React.createContext<ToggletipState | null>(null);\n","import React from 'react';\nimport { ToggletipContext } from './context';\n\nexport const useToggletipContext = () => {\n const context = React.useContext(ToggletipContext);\n\n if (context == null) {\n throw new Error('Toggletip components must be wrapped in <Toggletip />');\n }\n\n return context;\n};\n"],"names":["ToggletipContext","React","createContext","useToggletipContext","context","useContext","Error"],"mappings":";;AAGO,MAAMA,gBAAgB,gBAAGC,KAAK,CAACC,aAAa,CAAwB,IAAI;;ACAlEC,MAAAA,mBAAmB,GAAGA,MAAM;AACvC,EAAA,MAAMC,OAAO,GAAGH,KAAK,CAACI,UAAU,CAACL,gBAAgB,CAAC,CAAA;EAElD,IAAII,OAAO,IAAI,IAAI,EAAE;AACnB,IAAA,MAAM,IAAIE,KAAK,CAAC,uDAAuD,CAAC,CAAA;AAC1E,GAAA;AAEA,EAAA,OAAOF,OAAO,CAAA;AAChB;;;;"}