jamespot-react-components 1.2.31 → 1.2.33

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 (34) hide show
  1. package/build/jamespot-react-components.js +835 -802
  2. package/build/jamespot-react-components.js.map +1 -1
  3. package/build/src/components/Common/SkipToContent.d.ts +1 -0
  4. package/build/src/components/Deprecated/Deprecated_JRCEllipsis/Deprecated_JRCEllipsis.d.ts +11 -0
  5. package/build/src/components/Form/Input/Common/JRCFormFieldRenderer.types.d.ts +4 -0
  6. package/build/src/components/Form/Input/JRCInputCheckbox/components/JRCRadio.d.ts +1 -1
  7. package/build/src/components/Form/Input/JRCInputCheckbox/components/JRCToggle.d.ts +1 -1
  8. package/build/src/components/Form/Input/JRCInputText/JRCInputText.style.d.ts +23 -33
  9. package/build/src/components/Form/Input/JRCInputText/JRCInputTextIconButton.d.ts +6 -0
  10. package/build/src/components/Form/Input/JRCSelect/JRCInputSelect.style.d.ts +1 -1
  11. package/build/src/components/JRCAppLeftColumn/JRCAppLeftColumn.styles.d.ts +22 -32
  12. package/build/src/components/JRCButton/JRCButton.d.ts +6 -0
  13. package/build/src/components/JRCButtonDropdown/JRCButtonDropdown.styles.d.ts +2 -0
  14. package/build/src/components/JRCHtml/JRCHtml.d.ts +1 -1
  15. package/build/src/components/JRCIcon/JRCIcon.d.ts +3 -1
  16. package/build/src/components/JRCIconButton/JRCIconButton.d.ts +24 -14
  17. package/build/src/components/JRCList/JRCList.styles.d.ts +1 -0
  18. package/build/src/components/JRCMenuItem/JRCMenuItem.d.ts +1 -1
  19. package/build/src/components/JRCModal/JRCModal.styles.d.ts +3 -3
  20. package/build/src/components/JRCModal/JRCModalLayout.d.ts +1 -0
  21. package/build/src/components/JRCModal/templates/JRCModal.d.ts +1 -1
  22. package/build/src/components/JRCModal/templates/JRCModal.types.d.ts +2 -1
  23. package/build/src/components/JRCPublishButton/JRCPublishButton.d.ts +2 -1
  24. package/build/src/components/JRCPublishButton/PublishButtonEntry.d.ts +1 -0
  25. package/build/src/components/JRCSidePanelModal/JRCSidePanelModal.d.ts +1 -0
  26. package/build/src/components/JRCTabs/JRCTabs.d.ts +1 -1
  27. package/build/src/components/Templates/JRCPanel.d.ts +1 -1
  28. package/build/src/components/Templates/template.styles.d.ts +3 -2
  29. package/build/src/components/Templates/template.type.d.ts +4 -1
  30. package/build/src/hooks/useModalAccessibility.d.ts +10 -0
  31. package/build/src/index.d.ts +2 -1
  32. package/build/src/types.d.ts +1 -1
  33. package/package.json +2 -2
  34. package/build/src/components/JRCEllipsis/JRCEllipsis.d.ts +0 -8
@@ -0,0 +1 @@
1
+ export declare const SkipToContent: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
@@ -0,0 +1,11 @@
1
+ import * as React from 'react';
2
+ import { JRCTooltipProps } from '../../JRCTooltip/JRCTooltip';
3
+ export type JRCEllipsisProps = {
4
+ label?: string;
5
+ length: number;
6
+ position?: JRCTooltipProps['position'] | 'none';
7
+ };
8
+ /**
9
+ * @deprecated
10
+ */
11
+ export declare const Deprecated_JRCEllipsis: ({ label, length, position }: JRCEllipsisProps) => React.JSX.Element;
@@ -44,6 +44,8 @@ export type JRCFormFieldRendererProps<T extends FieldValues = FieldValues> = Fie
44
44
  width?: string | undefined;
45
45
  readOnly?: boolean;
46
46
  noLabel?: boolean;
47
+ srOnly?: string;
48
+ id?: string;
47
49
  };
48
50
  /**
49
51
  * Prop types for an input rendered by react-hook-form
@@ -56,4 +58,6 @@ export type JRCInputFieldProps<T extends FieldValues = FieldValues> = FieldRende
56
58
  width?: string | undefined;
57
59
  readOnly?: boolean;
58
60
  noLabel?: boolean;
61
+ srOnly?: string;
62
+ id?: string;
59
63
  };
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  import { FormInputProps } from '../../Deprecated/JRCFormFieldRender';
3
3
  export declare const RadioWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
4
4
  export declare const JRCRadio: React.ForwardRefExoticComponent<FormInputProps & React.RefAttributes<HTMLInputElement>>;
@@ -1,3 +1,3 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  import { FormInputProps } from '../../Deprecated/JRCFormFieldRender';
3
3
  export declare const JRCToggle: React.ForwardRefExoticComponent<FormInputProps & React.RefAttributes<HTMLInputElement>>;
@@ -1,37 +1,27 @@
1
1
  /// <reference types="react" />
2
- export declare const IconBefore: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, }: import("components/JRCIcon/JRCIcon").JRCIconProps) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
3
- export declare const IconAfter: import("styled-components").StyledComponent<{
4
- ({ hasLicense, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick"> & import("../../../../types/dataAttributes").DataCy & {
5
- icon: string;
6
- size?: "small" | "medium" | undefined;
7
- onClick?: ((event?: import("react").MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
8
- name?: string | undefined;
9
- value?: string | undefined;
10
- disabled?: boolean | undefined;
11
- type?: "button" | "submit" | "reset" | undefined;
12
- bgBaseGrey?: 0 | 2 | 1 | undefined;
13
- color?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | "inherit" | undefined;
14
- tooltip?: Omit<import("../../../..").JRCTooltipProps, "children"> | undefined;
15
- variant?: "circle" | "square" | undefined;
16
- hasLicense?: boolean | undefined;
17
- bg?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | undefined;
18
- bgHover?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | undefined;
19
- borderColor?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | undefined;
20
- iconSize?: number | undefined;
21
- badgeNumber?: number | undefined;
22
- colorVariant?: string | undefined;
23
- badgeInline?: boolean | undefined;
24
- } & {
25
- type: string;
26
- variant: string;
27
- size: string;
28
- }): import("react").JSX.Element;
29
- defaultProps: {
30
- type: string;
31
- variant: string;
32
- size: string;
33
- };
34
- }, import("styled-components").DefaultTheme, {}, never>;
2
+ export declare const IconBefore: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, label, }: import("components/JRCIcon/JRCIcon").JRCIconProps) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const IconAfter: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick"> & import("../../../../types/dataAttributes").DataCy & {
4
+ icon: string;
5
+ size?: "small" | "medium" | undefined;
6
+ onClick?: ((event?: import("react").MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
7
+ name?: string | undefined;
8
+ value?: string | undefined;
9
+ disabled?: boolean | undefined;
10
+ type?: "button" | "submit" | "reset" | undefined;
11
+ bgBaseGrey?: 0 | 2 | 1 | undefined;
12
+ color?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | "inherit" | undefined;
13
+ tooltip?: Omit<import("../../../..").JRCTooltipProps, "children"> | undefined;
14
+ variant?: "circle" | "square" | undefined;
15
+ hasLicense?: boolean | undefined;
16
+ bg?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | undefined;
17
+ bgHover?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | undefined;
18
+ borderColor?: import("../../../../styles/theme").Colors | import("../../../../styles/theme").Shades | undefined;
19
+ iconSize?: number | undefined;
20
+ badgeNumber?: number | undefined;
21
+ colorVariant?: string | undefined;
22
+ badgeInline?: boolean | undefined;
23
+ srOnly?: string | undefined;
24
+ } & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
35
25
  export declare const InputIconButton: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, import("../../../../types/dataAttributes").DataCy & {
36
26
  error?: boolean | undefined;
37
27
  valid?: boolean | undefined;
@@ -5,6 +5,9 @@ export type JRCInputTextIconButtonProps = DataCy & React.ComponentPropsWithoutRe
5
5
  iconButtonAfter?: {
6
6
  icon: string;
7
7
  onClick: () => void;
8
+ ariaExpanded?: boolean;
9
+ ariaControls?: string;
10
+ srOnly?: string;
8
11
  };
9
12
  };
10
13
  export declare const InputTextIconButton: React.ForwardRefExoticComponent<DataCy & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
@@ -12,6 +15,9 @@ export declare const InputTextIconButton: React.ForwardRefExoticComponent<DataCy
12
15
  iconButtonAfter?: {
13
16
  icon: string;
14
17
  onClick: () => void;
18
+ ariaExpanded?: boolean | undefined;
19
+ ariaControls?: string | undefined;
20
+ srOnly?: string | undefined;
15
21
  } | undefined;
16
22
  } & React.RefAttributes<HTMLInputElement>>;
17
23
  export declare function JRCInputTextIconButton(props: any): React.JSX.Element;
@@ -311,7 +311,7 @@ export declare const NoOptionList: import("styled-components").StyledComponent<"
311
311
  y?: "center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | undefined;
312
312
  childFull?: boolean | undefined;
313
313
  }, never>;
314
- export declare const IconBefore: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, }: import("../../../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {
314
+ export declare const IconBefore: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, label, }: import("../../../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {
315
315
  left?: number | undefined;
316
316
  top?: number | undefined;
317
317
  height?: number | undefined;
@@ -20,38 +20,28 @@ export declare const MenuWrapper: import("styled-components").StyledComponent<"d
20
20
  }, never>;
21
21
  export declare const ItemsIcon: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../JRCTabs/JRCTabs").ItemProps, never>;
22
22
  export declare const TitleMenu: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, never>;
23
- export declare const JRCIconButtonAppLeftColumn: import("styled-components").StyledComponent<{
24
- ({ hasLicense, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick"> & import("../../types/dataAttributes").DataCy & {
25
- icon: string;
26
- size?: "small" | "medium" | undefined;
27
- onClick?: ((event?: import("react").MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
28
- name?: string | undefined;
29
- value?: string | undefined;
30
- disabled?: boolean | undefined;
31
- type?: "button" | "submit" | "reset" | undefined;
32
- bgBaseGrey?: 0 | 2 | 1 | undefined;
33
- color?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | "inherit" | undefined;
34
- tooltip?: Omit<import("../..").JRCTooltipProps, "children"> | undefined;
35
- variant?: "circle" | "square" | undefined;
36
- hasLicense?: boolean | undefined;
37
- bg?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | undefined;
38
- bgHover?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | undefined;
39
- borderColor?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | undefined;
40
- iconSize?: number | undefined;
41
- badgeNumber?: number | undefined;
42
- colorVariant?: string | undefined;
43
- badgeInline?: boolean | undefined;
44
- } & {
45
- type: string;
46
- variant: string;
47
- size: string;
48
- }): import("react").JSX.Element;
49
- defaultProps: {
50
- type: string;
51
- variant: string;
52
- size: string;
53
- };
54
- }, import("styled-components").DefaultTheme, {}, never>;
23
+ export declare const JRCIconButtonAppLeftColumn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick"> & import("../../types/dataAttributes").DataCy & {
24
+ icon: string;
25
+ size?: "small" | "medium" | undefined;
26
+ onClick?: ((event?: import("react").MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
27
+ name?: string | undefined;
28
+ value?: string | undefined;
29
+ disabled?: boolean | undefined;
30
+ type?: "button" | "submit" | "reset" | undefined;
31
+ bgBaseGrey?: 0 | 2 | 1 | undefined;
32
+ color?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | "inherit" | undefined;
33
+ tooltip?: Omit<import("../..").JRCTooltipProps, "children"> | undefined;
34
+ variant?: "circle" | "square" | undefined;
35
+ hasLicense?: boolean | undefined;
36
+ bg?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | undefined;
37
+ bgHover?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | undefined;
38
+ borderColor?: import("../../styles/theme").Colors | import("../../styles/theme").Shades | undefined;
39
+ iconSize?: number | undefined;
40
+ badgeNumber?: number | undefined;
41
+ colorVariant?: string | undefined;
42
+ badgeInline?: boolean | undefined;
43
+ srOnly?: string | undefined;
44
+ } & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
55
45
  export declare const AppLeftColumnIconWrapper: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
56
46
  isMinimized: boolean;
57
47
  }, never>;
@@ -33,6 +33,8 @@ export type JRCButtonProps = React.ComponentPropsWithoutRef<'button'> & DataCy &
33
33
  /** Disable margins **/
34
34
  noMargin?: boolean;
35
35
  size?: 'm' | 's';
36
+ srOnly?: string;
37
+ borderRadius?: 'right';
36
38
  };
37
39
  /**
38
40
  * Button styling. May be used as a <a> tag
@@ -69,6 +71,8 @@ export declare const Button: import("styled-components").StyledComponent<"button
69
71
  /** Disable margins **/
70
72
  noMargin?: boolean | undefined;
71
73
  size?: "s" | "m" | undefined;
74
+ srOnly?: string | undefined;
75
+ borderRadius?: "right" | undefined;
72
76
  } & DashedFocusBorderProps, never>;
73
77
  export declare const JRCButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & DataCy & {
74
78
  /** Color of the background of the button */
@@ -99,4 +103,6 @@ export declare const JRCButton: React.ForwardRefExoticComponent<Omit<React.Detai
99
103
  /** Disable margins **/
100
104
  noMargin?: boolean | undefined;
101
105
  size?: "s" | "m" | undefined;
106
+ srOnly?: string | undefined;
107
+ borderRadius?: "right" | undefined;
102
108
  } & React.RefAttributes<HTMLButtonElement>>;
@@ -17,6 +17,8 @@ export declare const MarginLessJRCButton: import("styled-components").StyledComp
17
17
  label?: string | undefined;
18
18
  noMargin?: boolean | undefined;
19
19
  size?: "s" | "m" | undefined;
20
+ srOnly?: string | undefined;
21
+ borderRadius?: "right" | undefined;
20
22
  } & React.RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, ButtonProps & {
21
23
  small?: boolean | undefined;
22
24
  }, never>;
@@ -7,6 +7,6 @@ export type JRCHtmlProps = LimitLinesProps & {
7
7
  };
8
8
  export declare const JRCHtml: React.ForwardRefExoticComponent<LimitLinesProps & {
9
9
  className?: string | undefined;
10
- as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "g" | "filter" | "circle" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
10
+ as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "g" | "filter" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
11
11
  __html: string | undefined;
12
12
  } & React.RefAttributes<HTMLDivElement>>;
@@ -15,6 +15,8 @@ type IconVariant = 'default' | 'circle' | 'square';
15
15
  export interface JRCIconProps {
16
16
  /** Name of the icon (required) */
17
17
  name: string;
18
+ /** label for SROnly if need be */
19
+ label?: string;
18
20
  /** Color */
19
21
  color?: string;
20
22
  iconColor?: string;
@@ -28,5 +30,5 @@ export interface JRCIconProps {
28
30
  faOptions?: FontAwesomeOptions;
29
31
  role?: string;
30
32
  }
31
- export declare const JRCIcon: ({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, }: JRCIconProps) => React.JSX.Element;
33
+ export declare const JRCIcon: ({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, label, }: JRCIconProps) => React.JSX.Element;
32
34
  export {};
@@ -42,18 +42,28 @@ export type JRCIconButtonProps = Omit<React.ComponentPropsWithoutRef<'button'>,
42
42
  badgeNumber?: number;
43
43
  colorVariant?: keyof typeof colorVariants;
44
44
  badgeInline?: boolean;
45
+ srOnly?: string;
45
46
  };
46
- declare const defaultProps: {
47
- type: string;
48
- variant: string;
49
- size: string;
50
- };
51
- declare const JRCIconButton: {
52
- ({ hasLicense, ...props }: JRCIconButtonProps & typeof defaultProps): React.JSX.Element;
53
- defaultProps: {
54
- type: string;
55
- variant: string;
56
- size: string;
57
- };
58
- };
59
- export { JRCIconButton };
47
+ export declare const JRCIconButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick"> & DataCy & {
48
+ icon: string;
49
+ size?: "small" | "medium" | undefined;
50
+ onClick?: ((event?: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
51
+ name?: string | undefined;
52
+ value?: string | undefined;
53
+ disabled?: boolean | undefined;
54
+ type?: "button" | "submit" | "reset" | undefined;
55
+ bgBaseGrey?: 0 | 2 | 1 | undefined;
56
+ color?: Colors | Shades | "inherit" | undefined;
57
+ tooltip?: Omit<JRCTooltipProps, "children"> | undefined;
58
+ variant?: "circle" | "square" | undefined;
59
+ hasLicense?: boolean | undefined;
60
+ bg?: Colors | Shades | undefined;
61
+ bgHover?: Colors | Shades | undefined;
62
+ borderColor?: Colors | Shades | undefined;
63
+ iconSize?: number | undefined;
64
+ badgeNumber?: number | undefined;
65
+ colorVariant?: string | undefined;
66
+ badgeInline?: boolean | undefined;
67
+ srOnly?: string | undefined;
68
+ } & React.RefAttributes<HTMLButtonElement>>;
69
+ export {};
@@ -6,6 +6,7 @@ export declare const Thead: import("styled-components").StyledComponent<"thead",
6
6
  export declare const TBody: import("styled-components").StyledComponent<"tbody", import("styled-components").DefaultTheme, {}, never>;
7
7
  export declare const Th: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
8
8
  width?: string | number | undefined;
9
+ sortable?: boolean | undefined;
9
10
  }, never>;
10
11
  export declare const Tr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
11
12
  dragging?: boolean | undefined;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  export declare const VerticalItemFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
- export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, }: import("../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, label, }: import("../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
4
4
  export interface ItemProps {
5
5
  isActive: boolean;
6
6
  }
@@ -18,13 +18,13 @@ export declare const JRCModalContainer: import("styled-components").StyledCompon
18
18
  export declare const JRCModalTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
19
19
  export declare const JRCModalOptions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
20
20
  export declare const JRCModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
21
- modalOverflow?: "hidden" | "auto" | "visible" | "scroll" | undefined;
21
+ modalOverflow?: "hidden" | "auto" | "scroll" | "visible" | undefined;
22
22
  }, never>;
23
23
  export declare const JRCModalContentFull: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
24
24
  export declare const JRCModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
25
- modalOverflow?: "hidden" | "auto" | "visible" | "scroll" | undefined;
25
+ modalOverflow?: "hidden" | "auto" | "scroll" | "visible" | undefined;
26
26
  }, never>;
27
27
  export declare const JRCModalFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
28
- modalOverflow?: "hidden" | "visible" | "scroll" | undefined;
28
+ modalOverflow?: "hidden" | "scroll" | "visible" | undefined;
29
29
  }, never>;
30
30
  export declare const JRCModalClose: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -15,5 +15,6 @@ export interface JRCModalLayoutProps {
15
15
  overflow?: 'visible' | 'hidden';
16
16
  zIndex?: number;
17
17
  minHeight?: string;
18
+ focusOnCloseRef?: React.RefObject<HTMLElement>;
18
19
  }
19
20
  export declare const JRCModalLayout: React.ForwardRefExoticComponent<JRCModalLayoutProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { JRCModalProps } from './JRCModal.types';
3
- export declare const JRCModal: ({ children, open, closeHandler, buttons, title, options, portalId, inPlace, ref, zIndex, enableClickAwayCloseModal, variant, }: JRCModalProps) => React.JSX.Element;
3
+ export declare const JRCModal: ({ children, open, closeHandler, buttons, title, options, portalId, inPlace, ref, zIndex, enableClickAwayCloseModal, variant, focusOnCloseRef, }: JRCModalProps) => React.JSX.Element;
@@ -1,4 +1,4 @@
1
- import { FormEvent, ForwardedRef, ReactNode } from 'react';
1
+ import React, { FormEvent, ForwardedRef, ReactNode } from 'react';
2
2
  import { JRCModalButtonType } from '../JRCModalContent';
3
3
  import { JRCModalFormButtonType } from '../JRCModalContentForm';
4
4
  import { ModalVariant } from '../JRCModalLayout';
@@ -13,6 +13,7 @@ type JRCModalBaseProps = {
13
13
  ref?: ForwardedRef<HTMLDivElement>;
14
14
  enableClickAwayCloseModal?: boolean;
15
15
  zIndex?: number;
16
+ focusOnCloseRef?: React.RefObject<HTMLElement>;
16
17
  };
17
18
  export type JRCModalProps = JRCModalBaseProps & {
18
19
  buttons?: JRCModalButtonType[];
@@ -15,6 +15,7 @@ export type PublishButtonProps = DataCy & {
15
15
  tooltip?: Omit<JRCTooltipProps, 'children'>;
16
16
  position?: 'left' | 'right';
17
17
  icon: string;
18
+ ariaLabel?: string;
18
19
  };
19
- export declare const JRCPublishButton: ({ tooltip, label, icon, sections, hasFavorites, favoriteOnClick, loading, position, dataCy, }: PublishButtonProps) => React.JSX.Element;
20
+ export declare const JRCPublishButton: ({ tooltip, label, icon, sections, hasFavorites, favoriteOnClick, loading, position, dataCy, ariaLabel, }: PublishButtonProps) => React.JSX.Element;
20
21
  export {};
@@ -8,6 +8,7 @@ export type PublishButtonEntryProps = DataCy & {
8
8
  url?: string;
9
9
  label: string;
10
10
  isFavorite: boolean;
11
+ ariaLabel?: string;
11
12
  };
12
13
  export type PublishButtonExtraProps = {
13
14
  hasFavorites?: boolean;
@@ -17,6 +17,7 @@ export type JRCSidePanelModalProps = {
17
17
  offsetTop?: number;
18
18
  optionsButton?: JRCButtonDropdownOptionProps[];
19
19
  zIndex?: number;
20
+ focusOnCloseRef?: React.RefObject<HTMLElement>;
20
21
  };
21
22
  /**
22
23
  * ℹ️⚠️
@@ -7,7 +7,7 @@ export declare const VerticalWrapper: import("styled-components").StyledComponen
7
7
  export declare const VerticalItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
8
8
  export declare const ItemButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ItemProps, never>;
9
9
  export declare const VerticalItemFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
- export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, }: import("../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
10
+ export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, label, }: import("../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {}, never>;
11
11
  /**
12
12
  * Interface of a single Menu Item props
13
13
  * @member label label of the tag
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { JRCPanelProps } from './template.type';
3
- export declare function JRCPanel({ children, width, open }: JRCPanelProps): React.JSX.Element;
3
+ export declare function JRCPanel({ children, width, open, focusOnCloseRef, closeHandler }: JRCPanelProps): React.JSX.Element;
@@ -35,7 +35,7 @@ export declare const StickyColWrapper: import("styled-components").StyledCompone
35
35
  export declare const MainColumn: import("styled-components").StyledComponent<typeof JRCColumn, import("styled-components").DefaultTheme, {}, never>;
36
36
  export declare const AppColumn: import("styled-components").StyledComponent<typeof JRCColumn, import("styled-components").DefaultTheme, Open, never>;
37
37
  export declare const FlexDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
38
- export declare const EasterEggIcon: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, }: import("../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {
38
+ export declare const EasterEggIcon: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, faOptions, iconColor, role, label, }: import("../JRCIcon/JRCIcon").JRCIconProps) => React.JSX.Element, import("styled-components").DefaultTheme, {
39
39
  easterEgg: boolean;
40
40
  }, never>;
41
41
  export declare const reduce: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<Open, import("styled-components").DefaultTheme>>;
@@ -323,8 +323,9 @@ export declare const OpenCloseButton: import("styled-components").StyledComponen
323
323
  theme: import("styled-components").DefaultTheme;
324
324
  offset: string;
325
325
  } & Open & Closing, "form" | "slot" | "style" | "title" | "color" | "theme" | "ref" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "disabled" | "offset" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">;
326
+ export declare const SR: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
326
327
  export declare const AppTabLabel: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, Open, never>;
327
- export declare const AppTabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Open, never>;
328
+ export declare const AppTabContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, Open, never>;
328
329
  export declare const AppTabContextContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Open & Closing, never>;
329
330
  export declare const AppTab: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Open & {
330
331
  active?: boolean | undefined;
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { RefObject } from 'react';
2
2
  import { FlexDirection } from '../JRCFlex/JRCFlexBox';
3
3
  import { Colors } from '../../styles/theme';
4
4
  export type LayoutMode = 'fluid' | 'center' | 'centerTop';
@@ -23,6 +23,7 @@ export type JRCColumnProps = {
23
23
  mode?: LayoutMode;
24
24
  position?: ColumnPosition;
25
25
  flex?: boolean;
26
+ id?: string;
26
27
  };
27
28
  export type JRCMainColumnProps = {
28
29
  children: React.ReactNode;
@@ -61,6 +62,8 @@ export type JRCPanelProps = {
61
62
  children: React.ReactNode;
62
63
  width: number;
63
64
  open: boolean;
65
+ focusOnCloseRef: RefObject<HTMLElement>;
66
+ closeHandler: () => void;
64
67
  };
65
68
  export type Open = {
66
69
  open: boolean;
@@ -0,0 +1,10 @@
1
+ import { RefObject } from 'react';
2
+ type Params = {
3
+ modalRef: RefObject<HTMLElement>;
4
+ focusOnCloseRef?: RefObject<HTMLElement>;
5
+ open: boolean;
6
+ closeHandler: () => void;
7
+ scrollFirstElement?: boolean;
8
+ };
9
+ export declare const useModalAccessibility: ({ modalRef, open, focusOnCloseRef, closeHandler, scrollFirstElement, }: Params) => void;
10
+ export {};
@@ -109,7 +109,7 @@ export { JRCCropImage } from './components/JRCCropImage/JRCCropImage';
109
109
  export { JRCDate } from './components/JRCDate/JRCDate';
110
110
  export { JRCDisplayCard } from './components/JRCDisplayCard/JRCDisplayCard';
111
111
  export { JRCDropDown } from './components/JRCDropDown/JRCDropDown';
112
- export { JRCEllipsis } from './components/JRCEllipsis/JRCEllipsis';
112
+ export { Deprecated_JRCEllipsis } from './components/Deprecated/Deprecated_JRCEllipsis/Deprecated_JRCEllipsis';
113
113
  export { JRCEmptySpace } from './components/JRCEmptySpace/JRCEmptySpace';
114
114
  export { JRCFile } from './components/JRCFile/JRCFile';
115
115
  export { JRCFileAvatar } from './components/JRCFile/JRCFileAvatar';
@@ -202,6 +202,7 @@ export { JRCModalUserList } from './components/JRCModalUserList/JRCModalUserList
202
202
  export { LabelDescriptionOption } from './components/Form/Input/JRCSelect/JRCInputSelect.defaults';
203
203
  export { StyledInput } from './components/Form/Input/JRCStyledInput';
204
204
  export { SROnly } from './components/Common/SROnly';
205
+ export { SkipToContent } from './components/Common/SkipToContent';
205
206
  export { useAbortController } from './hooks/useAbortController';
206
207
  export { useCancelOnUnmount } from './hooks/useCancelOnUnmount';
207
208
  export { useDebounce } from './hooks/UseDebounce';
@@ -54,7 +54,7 @@ export type { JRCColumnLeftProps } from './components/JRCColumnLeft/JRCColumnLef
54
54
  export type { JRCColumnRightProps } from './components/JRCColumnRight/JRCColumnRight';
55
55
  export type { JRCDateProps } from './components/JRCDate/JRCDate';
56
56
  export type { JRCDropDownProps } from './components/JRCDropDown/JRCDropDown';
57
- export type { JRCEllipsisProps } from './components/JRCEllipsis/JRCEllipsis';
57
+ export type { JRCEllipsisProps } from './components/Deprecated/Deprecated_JRCEllipsis/Deprecated_JRCEllipsis';
58
58
  export type { JRCFileOpenProps } from './components/JRCFileOpen/JRCFileOpen';
59
59
  export type { JRCFileViewerOpenWithOptionsType } from './components/JRCFileViewer/types';
60
60
  export type { JRCFlexBoxProps } from './components/JRCFlex/JRCFlexBox';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jamespot-react-components",
3
- "version": "1.2.31",
3
+ "version": "1.2.33",
4
4
  "description": "",
5
5
  "main": "./build/jamespot-react-components.js",
6
6
  "types": "./build/src/index.d.ts",
@@ -99,7 +99,7 @@
99
99
  "chroma-js": "^2.1.1",
100
100
  "classnames": "^2.3.1",
101
101
  "dompurify": "^3.0.5",
102
- "jamespot-user-api": "^1.2.31",
102
+ "jamespot-user-api": "^1.2.33",
103
103
  "react": "^17.x",
104
104
  "react-beautiful-dnd": "^13.1.1",
105
105
  "react-dnd": "^14.0.4",
@@ -1,8 +0,0 @@
1
- import * as React from 'react';
2
- import { JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
3
- export type JRCEllipsisProps = {
4
- label?: string;
5
- length: number;
6
- position?: JRCTooltipProps['position'] | 'none';
7
- };
8
- export declare const JRCEllipsis: ({ label, length, position }: JRCEllipsisProps) => React.JSX.Element;