@primer/components 0.0.0-202192602912 → 0.0.0-2021926102453

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 (60) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/dist/browser.esm.js +22 -22
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +3 -3
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +6 -0
  7. package/lib/ActionList/Item.js +5 -1
  8. package/lib/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  9. package/lib/Autocomplete/Autocomplete.d.ts +2 -4
  10. package/lib/Autocomplete/AutocompleteInput.d.ts +2 -4
  11. package/lib/SelectMenu/SelectMenu.d.ts +2 -4
  12. package/lib/TextInputWithTokens.d.ts +2 -4
  13. package/lib/theme-preval.js +2 -2
  14. package/lib/utils/testing.d.ts +1 -1
  15. package/lib-esm/ActionList/Item.d.ts +6 -0
  16. package/lib-esm/ActionList/Item.js +5 -1
  17. package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts +2 -4
  18. package/lib-esm/Autocomplete/Autocomplete.d.ts +2 -4
  19. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +2 -4
  20. package/lib-esm/SelectMenu/SelectMenu.d.ts +2 -4
  21. package/lib-esm/TextInputWithTokens.d.ts +2 -4
  22. package/lib-esm/theme-preval.js +2 -2
  23. package/lib-esm/utils/testing.d.ts +1 -1
  24. package/package.json +8 -9
  25. package/lib/DatePicker/DatePicker.d.ts +0 -48
  26. package/lib/DatePicker/DatePicker.js +0 -92
  27. package/lib/DatePicker/DatePickerAnchor.d.ts +0 -5
  28. package/lib/DatePicker/DatePickerAnchor.js +0 -158
  29. package/lib/DatePicker/DatePickerOverlay.d.ts +0 -3
  30. package/lib/DatePicker/DatePickerOverlay.js +0 -39
  31. package/lib/DatePicker/DatePickerPanel.d.ts +0 -2
  32. package/lib/DatePicker/DatePickerPanel.js +0 -126
  33. package/lib/DatePicker/Day.d.ts +0 -14
  34. package/lib/DatePicker/Day.js +0 -174
  35. package/lib/DatePicker/Month.d.ts +0 -9
  36. package/lib/DatePicker/Month.js +0 -107
  37. package/lib/DatePicker/index.d.ts +0 -2
  38. package/lib/DatePicker/index.js +0 -13
  39. package/lib/DatePicker/useDatePicker.d.ts +0 -83
  40. package/lib/DatePicker/useDatePicker.js +0 -375
  41. package/lib/hooks/useDebounce.d.ts +0 -2
  42. package/lib/hooks/useDebounce.js +0 -24
  43. package/lib-esm/DatePicker/DatePicker.d.ts +0 -48
  44. package/lib-esm/DatePicker/DatePicker.js +0 -75
  45. package/lib-esm/DatePicker/DatePickerAnchor.d.ts +0 -5
  46. package/lib-esm/DatePicker/DatePickerAnchor.js +0 -132
  47. package/lib-esm/DatePicker/DatePickerOverlay.d.ts +0 -3
  48. package/lib-esm/DatePicker/DatePickerOverlay.js +0 -24
  49. package/lib-esm/DatePicker/DatePickerPanel.d.ts +0 -2
  50. package/lib-esm/DatePicker/DatePickerPanel.js +0 -100
  51. package/lib-esm/DatePicker/Day.d.ts +0 -14
  52. package/lib-esm/DatePicker/Day.js +0 -151
  53. package/lib-esm/DatePicker/Month.d.ts +0 -9
  54. package/lib-esm/DatePicker/Month.js +0 -83
  55. package/lib-esm/DatePicker/index.d.ts +0 -2
  56. package/lib-esm/DatePicker/index.js +0 -1
  57. package/lib-esm/DatePicker/useDatePicker.d.ts +0 -83
  58. package/lib-esm/DatePicker/useDatePicker.js +0 -347
  59. package/lib-esm/hooks/useDebounce.d.ts +0 -2
  60. package/lib-esm/hooks/useDebounce.js +0 -16
@@ -28,13 +28,19 @@ export interface ItemProps extends SxProp {
28
28
  */
29
29
  leadingVisual?: React.FunctionComponent<IconProps>;
30
30
  /**
31
+ * @deprecated Use `trailingVisual` instead
31
32
  * Icon (or similar) positioned after `Item` text.
32
33
  */
33
34
  trailingIcon?: React.FunctionComponent<IconProps>;
34
35
  /**
36
+ * @deprecated Use `trailingVisual` instead
35
37
  * Text positioned after `Item` text and optional trailing icon.
36
38
  */
37
39
  trailingText?: string;
40
+ /**
41
+ * Icon or text positioned after `Item` text.
42
+ */
43
+ trailingVisual?: React.ReactNode;
38
44
  /**
39
45
  * Style variations associated with various `Item` types.
40
46
  *
@@ -187,6 +187,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
187
187
  selectionVariant,
188
188
  leadingVisual: LeadingVisual,
189
189
  trailingIcon: TrailingIcon,
190
+ trailingVisual: TrailingVisual,
190
191
  trailingText,
191
192
  variant = 'default',
192
193
  showDivider,
@@ -278,7 +279,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
278
279
  title: description,
279
280
  inline: true,
280
281
  maxWidth: "100%"
281
- }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
282
+ }, description)) : null), TrailingVisual ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
283
+ variant: variant,
284
+ disabled: disabled
285
+ }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
282
286
  variant: variant,
283
287
  disabled: disabled
284
288
  }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
@@ -26,8 +26,6 @@ interface AnchoredOverlayPropsWithoutAnchor {
26
26
  */
27
27
  anchorRef: React.RefObject<HTMLElement>;
28
28
  }
29
- export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
30
- export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
31
29
  export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
32
30
  interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
33
31
  /**
@@ -37,11 +35,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
37
35
  /**
38
36
  * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
39
37
  */
40
- onOpen?: (gesture: OverlayOpenGesture) => unknown;
38
+ onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
41
39
  /**
42
40
  * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
43
41
  */
44
- onClose?: (gesture: OverlayCloseGesture) => unknown;
42
+ onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
45
43
  /**
46
44
  * Props to be spread on the internal `Overlay` component.
47
45
  */
@@ -12,14 +12,12 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
12
12
  declare const _default: React.FC<{
13
13
  id?: string | undefined;
14
14
  }> & {
15
- Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
15
+ Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
16
16
  [x: string]: any;
17
17
  [x: number]: any;
18
18
  } & {
19
19
  theme?: any;
20
- } & ({} | {
21
- children?: React.ReactNode;
22
- })) & {
20
+ } & {
23
21
  as?: string | React.ComponentType<any> | undefined;
24
22
  forwardedAs?: string | React.ComponentType<any> | undefined;
25
23
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -4,14 +4,12 @@ import { ComponentProps } from '../utils/types';
4
4
  declare type InternalAutocompleteInputProps = {
5
5
  as?: React.ComponentType<any>;
6
6
  };
7
- declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
7
+ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
8
8
  [x: string]: any;
9
9
  [x: number]: any;
10
10
  } & {
11
11
  theme?: any;
12
- } & ({} | {
13
- children?: React.ReactNode;
14
- })) & {
12
+ } & {
15
13
  as?: string | React.ComponentType<any> | undefined;
16
14
  forwardedAs?: string | React.ComponentType<any> | undefined;
17
15
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -32,14 +32,12 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
32
32
  Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
33
33
  Filter: React.ForwardRefExoticComponent<Pick<{
34
34
  value?: string | undefined;
35
- } & Pick<Omit<Pick<({
35
+ } & Pick<Omit<Pick<{
36
36
  [x: string]: any;
37
37
  [x: number]: any;
38
38
  } & {
39
39
  theme?: any;
40
- } & ({} | {
41
- children?: React.ReactNode;
42
- })) & {
40
+ } & {
43
41
  as?: string | React.ComponentType<any> | undefined;
44
42
  forwardedAs?: string | React.ComponentType<any> | undefined;
45
43
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -32,14 +32,12 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
32
32
  * Whether the remove buttons should be rendered in the tokens
33
33
  */
34
34
  hideTokenRemoveButtons?: boolean | undefined;
35
- } & Pick<Omit<Pick<({
35
+ } & Pick<Omit<Pick<{
36
36
  [x: string]: any;
37
37
  [x: number]: any;
38
38
  } & {
39
39
  theme?: any;
40
- } & ({} | {
41
- children?: React.ReactNode;
42
- })) & {
40
+ } & {
43
41
  as?: string | React.ComponentType<any> | undefined;
44
42
  forwardedAs?: string | React.ComponentType<any> | undefined;
45
43
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -515,7 +515,7 @@ module.exports = {
515
515
  }
516
516
  }
517
517
  },
518
- "light_colorblind": {
518
+ "light_protanopia": {
519
519
  "colors": {
520
520
  "canvasDefaultTransparent": "rgba(255,255,255,0)",
521
521
  "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
2456
2456
  }
2457
2457
  }
2458
2458
  },
2459
- "dark_colorblind": {
2459
+ "dark_protanopia": {
2460
2460
  "colors": {
2461
2461
  "canvasDefaultTransparent": "rgba(13,17,23,0)",
2462
2462
  "marketingIcon": {
@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
53
53
  xlarge: string;
54
54
  };
55
55
  space: string[];
56
- colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
56
+ colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
57
57
  canvasDefaultTransparent: string;
58
58
  marketingIcon: {
59
59
  primary: string;
@@ -28,13 +28,19 @@ export interface ItemProps extends SxProp {
28
28
  */
29
29
  leadingVisual?: React.FunctionComponent<IconProps>;
30
30
  /**
31
+ * @deprecated Use `trailingVisual` instead
31
32
  * Icon (or similar) positioned after `Item` text.
32
33
  */
33
34
  trailingIcon?: React.FunctionComponent<IconProps>;
34
35
  /**
36
+ * @deprecated Use `trailingVisual` instead
35
37
  * Text positioned after `Item` text and optional trailing icon.
36
38
  */
37
39
  trailingText?: string;
40
+ /**
41
+ * Icon or text positioned after `Item` text.
42
+ */
43
+ trailingVisual?: React.ReactNode;
38
44
  /**
39
45
  * Style variations associated with various `Item` types.
40
46
  *
@@ -154,6 +154,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
154
154
  selectionVariant,
155
155
  leadingVisual: LeadingVisual,
156
156
  trailingIcon: TrailingIcon,
157
+ trailingVisual: TrailingVisual,
157
158
  trailingText,
158
159
  variant = 'default',
159
160
  showDivider,
@@ -245,7 +246,10 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
245
246
  title: description,
246
247
  inline: true,
247
248
  maxWidth: "100%"
248
- }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
249
+ }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
250
+ variant: variant,
251
+ disabled: disabled
252
+ }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
249
253
  variant: variant,
250
254
  disabled: disabled
251
255
  }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
@@ -26,8 +26,6 @@ interface AnchoredOverlayPropsWithoutAnchor {
26
26
  */
27
27
  anchorRef: React.RefObject<HTMLElement>;
28
28
  }
29
- export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
30
- export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
31
29
  export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
32
30
  interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
33
31
  /**
@@ -37,11 +35,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
37
35
  /**
38
36
  * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
39
37
  */
40
- onOpen?: (gesture: OverlayOpenGesture) => unknown;
38
+ onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
41
39
  /**
42
40
  * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
43
41
  */
44
- onClose?: (gesture: OverlayCloseGesture) => unknown;
42
+ onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
45
43
  /**
46
44
  * Props to be spread on the internal `Overlay` component.
47
45
  */
@@ -12,14 +12,12 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
12
12
  declare const _default: React.FC<{
13
13
  id?: string | undefined;
14
14
  }> & {
15
- Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
15
+ Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
16
16
  [x: string]: any;
17
17
  [x: number]: any;
18
18
  } & {
19
19
  theme?: any;
20
- } & ({} | {
21
- children?: React.ReactNode;
22
- })) & {
20
+ } & {
23
21
  as?: string | React.ComponentType<any> | undefined;
24
22
  forwardedAs?: string | React.ComponentType<any> | undefined;
25
23
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -4,14 +4,12 @@ import { ComponentProps } from '../utils/types';
4
4
  declare type InternalAutocompleteInputProps = {
5
5
  as?: React.ComponentType<any>;
6
6
  };
7
- declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
7
+ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
8
8
  [x: string]: any;
9
9
  [x: number]: any;
10
10
  } & {
11
11
  theme?: any;
12
- } & ({} | {
13
- children?: React.ReactNode;
14
- })) & {
12
+ } & {
15
13
  as?: string | React.ComponentType<any> | undefined;
16
14
  forwardedAs?: string | React.ComponentType<any> | undefined;
17
15
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -32,14 +32,12 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
32
32
  Divider: import("styled-components").StyledComponent<"div", any, SystemCommonProps & SxProp, never>;
33
33
  Filter: React.ForwardRefExoticComponent<Pick<{
34
34
  value?: string | undefined;
35
- } & Pick<Omit<Pick<({
35
+ } & Pick<Omit<Pick<{
36
36
  [x: string]: any;
37
37
  [x: number]: any;
38
38
  } & {
39
39
  theme?: any;
40
- } & ({} | {
41
- children?: React.ReactNode;
42
- })) & {
40
+ } & {
43
41
  as?: string | React.ComponentType<any> | undefined;
44
42
  forwardedAs?: string | React.ComponentType<any> | undefined;
45
43
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -32,14 +32,12 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
32
32
  * Whether the remove buttons should be rendered in the tokens
33
33
  */
34
34
  hideTokenRemoveButtons?: boolean | undefined;
35
- } & Pick<Omit<Pick<({
35
+ } & Pick<Omit<Pick<{
36
36
  [x: string]: any;
37
37
  [x: number]: any;
38
38
  } & {
39
39
  theme?: any;
40
- } & ({} | {
41
- children?: React.ReactNode;
42
- })) & {
40
+ } & {
43
41
  as?: string | React.ComponentType<any> | undefined;
44
42
  forwardedAs?: string | React.ComponentType<any> | undefined;
45
43
  }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -515,7 +515,7 @@ module.exports = {
515
515
  }
516
516
  }
517
517
  },
518
- "light_colorblind": {
518
+ "light_protanopia": {
519
519
  "colors": {
520
520
  "canvasDefaultTransparent": "rgba(255,255,255,0)",
521
521
  "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
2456
2456
  }
2457
2457
  }
2458
2458
  },
2459
- "dark_colorblind": {
2459
+ "dark_protanopia": {
2460
2460
  "colors": {
2461
2461
  "canvasDefaultTransparent": "rgba(13,17,23,0)",
2462
2462
  "marketingIcon": {
@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
53
53
  xlarge: string;
54
54
  };
55
55
  space: string[];
56
- colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
56
+ colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
57
57
  canvasDefaultTransparent: string;
58
58
  marketingIcon: {
59
59
  primary: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-202192602912",
3
+ "version": "0.0.0-2021926102453",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -43,16 +43,20 @@
43
43
  "author": "GitHub, Inc.",
44
44
  "license": "MIT",
45
45
  "dependencies": {
46
- "@primer/octicons-react": "^16.1.0",
47
- "@primer/primitives": "6.0.0",
46
+ "@primer/octicons-react": "^13.0.0",
47
+ "@primer/primitives": "5.1.0",
48
48
  "@radix-ui/react-polymorphic": "0.0.14",
49
49
  "@react-aria/ssr": "3.1.0",
50
50
  "@styled-system/css": "5.1.5",
51
51
  "@styled-system/props": "5.1.5",
52
52
  "@styled-system/theme-get": "5.1.2",
53
+ "@types/history": "4.7.8",
54
+ "@types/styled-components": "5.1.11",
55
+ "@types/styled-system": "5.1.12",
56
+ "@types/styled-system__css": "5.0.16",
57
+ "@types/styled-system__theme-get": "5.0.1",
53
58
  "classnames": "2.3.1",
54
59
  "color2k": "1.2.4",
55
- "date-fns": "2.25.0",
56
60
  "deepmerge": "4.2.2",
57
61
  "focus-visible": "5.2.0",
58
62
  "styled-system": "5.1.5"
@@ -81,11 +85,6 @@
81
85
  "@testing-library/react": "11.2.7",
82
86
  "@testing-library/react-hooks": "7.0.2",
83
87
  "@testing-library/user-event": "13.1.9",
84
- "@types/history": "4.7.9",
85
- "@types/styled-components": "5.1.15",
86
- "@types/styled-system": "5.1.13",
87
- "@types/styled-system__css": "5.0.16",
88
- "@types/styled-system__theme-get": "5.0.1",
89
88
  "@types/chroma-js": "2.1.3",
90
89
  "@types/enzyme": "3.10.9",
91
90
  "@types/jest": "26.0.23",
@@ -1,48 +0,0 @@
1
- import React from 'react';
2
- import { OverlayProps } from '../Overlay';
3
- import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
4
- import { FocusZoneHookSettings } from '../hooks/useFocusZone';
5
- import { DatePickerConfiguration, Selection } from './useDatePicker';
6
- declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
7
- declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
8
- export interface DatePickerProps extends DatePickerConfiguration {
9
- /**
10
- * An override to the internal ref that will be spread on to the renderAnchor
11
- */
12
- anchorRef?: React.RefObject<HTMLElement>;
13
- /**
14
- * Settings to apply to the Focus Zone on the internal `Overlay` component.
15
- */
16
- focusTrapSettings?: Partial<FocusTrapHookSettings>;
17
- /**
18
- * Settings to apply to the Focus Zone on the internal `Overlay` component.
19
- */
20
- focusZoneSettings?: Partial<FocusZoneHookSettings>;
21
- initialValue?: 'today' | Date | string | null;
22
- iconOnly?: boolean;
23
- placeholder?: string;
24
- /**
25
- * Determines whether the overlay portion of the component should be shown or not
26
- */
27
- open?: boolean;
28
- /**
29
- * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
30
- */
31
- onOpen?: (gesture: OpenGesture) => unknown;
32
- /**
33
- * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
34
- */
35
- onClose?: (gesture: CloseGesture) => unknown;
36
- /**
37
- * Props to be spread on the internal `Overlay` component.
38
- */
39
- overlayProps?: Partial<OverlayProps>;
40
- /**
41
- * A custom function component used to render the anchor element.
42
- * Will receive the selected text as `children` prop when an item is activated.
43
- */
44
- renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
45
- value?: Selection;
46
- }
47
- export declare const DatePicker: React.FC<DatePickerProps>;
48
- export {};
@@ -1,92 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.DatePicker = void 0;
7
-
8
- var _react = _interopRequireWildcard(require("react"));
9
-
10
- var _DatePickerAnchor = require("./DatePickerAnchor");
11
-
12
- var _useDatePicker = require("./useDatePicker");
13
-
14
- var _DatePickerOverlay = require("./DatePickerOverlay");
15
-
16
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
-
18
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
-
20
- const DatePicker = ({
21
- anchorVariant,
22
- anchorRef: externalAnchorRef,
23
- confirmation,
24
- dateFormat,
25
- focusTrapSettings,
26
- focusZoneSettings,
27
- maxDate,
28
- minDate,
29
- onOpen: onOpenExternal,
30
- onClose: onCloseExternal,
31
- open,
32
- overlayProps,
33
- renderAnchor,
34
- selection,
35
- value,
36
- view,
37
- weekStartsOn
38
- }) => {
39
- const buttonRef = (0, _react.useRef)(null);
40
- const [isOpen, setIsOpen] = (0, _react.useState)(false);
41
- const datePickerConfiguration = {
42
- anchorVariant,
43
- confirmation,
44
- dateFormat,
45
- maxDate,
46
- minDate,
47
- selection,
48
- view,
49
- weekStartsOn
50
- };
51
-
52
- const onOpen = gesture => {
53
- setIsOpen(true);
54
- onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
55
- };
56
-
57
- const onClose = gesture => {
58
- setIsOpen(false);
59
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
60
- };
61
-
62
- const toggleIsOpen = () => {
63
- if (isOpen) {
64
- setIsOpen(false);
65
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
66
- } else {
67
- setIsOpen(true);
68
- onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
69
- }
70
- };
71
-
72
- return /*#__PURE__*/_react.default.createElement(_useDatePicker.DatePickerProvider, {
73
- configuration: datePickerConfiguration,
74
- value: value,
75
- closePicker: () => setIsOpen(false)
76
- }, /*#__PURE__*/_react.default.createElement(_DatePickerAnchor.DatePickerAnchor, {
77
- ref: buttonRef,
78
- onAction: toggleIsOpen
79
- }), /*#__PURE__*/_react.default.createElement(_DatePickerOverlay.DatePickerOverlay, {
80
- anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : buttonRef,
81
- renderAnchor: renderAnchor,
82
- open: open !== null && open !== void 0 ? open : isOpen,
83
- onOpen: onOpen,
84
- onClose: onClose,
85
- overlayProps: overlayProps,
86
- focusTrapSettings: focusTrapSettings,
87
- focusZoneSettings: focusZoneSettings
88
- }));
89
- };
90
-
91
- exports.DatePicker = DatePicker;
92
- DatePicker.displayName = "DatePicker";
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- export interface DatePickerAnchorProps {
3
- onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
4
- }
5
- export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;