@kaizen/components 2.2.0 → 2.2.1

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 (21) hide show
  1. package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.cjs +4 -2
  2. package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.module.scss.cjs +2 -1
  3. package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.cjs +9 -5
  4. package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.module.scss.cjs +2 -1
  5. package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs +4 -2
  6. package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.cjs +2 -1
  7. package/dist/esm/src/Calendar/CalendarRange/CalendarRange.mjs +4 -2
  8. package/dist/esm/src/Calendar/CalendarRange/CalendarRange.module.scss.mjs +2 -1
  9. package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.mjs +9 -5
  10. package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.module.scss.mjs +2 -1
  11. package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs +4 -2
  12. package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.mjs +2 -1
  13. package/dist/styles.css +9 -0
  14. package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts +3 -1
  15. package/package.json +1 -1
  16. package/src/Calendar/CalendarRange/CalendarRange.module.scss +4 -0
  17. package/src/Calendar/CalendarRange/CalendarRange.tsx +16 -2
  18. package/src/Calendar/CalendarSingle/CalendarSingle.module.scss +4 -0
  19. package/src/Calendar/CalendarSingle/CalendarSingle.tsx +20 -2
  20. package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss +4 -0
  21. package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx +16 -2
package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.cjs CHANGED
@@ -60,13 +60,15 @@ var CalendarRange = function (_a) {
60
60
  return React__default.default.createElement(Icon.Icon, {
61
61
  name: "arrow_back",
62
62
  isPresentational: true,
63
- shouldMirrorInRTL: true
63
+ shouldMirrorInRTL: true,
64
+ className: CalendarRange_module.chevronIcon
64
65
  });
65
66
  }
66
67
  return React__default.default.createElement(Icon.Icon, {
67
68
  name: "arrow_forward",
68
69
  isPresentational: true,
69
- shouldMirrorInRTL: true
70
+ shouldMirrorInRTL: true,
71
+ className: CalendarRange_module.chevronIcon
70
72
  });
71
73
  }
72
74
  },
package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.module.scss.cjs CHANGED
@@ -7,6 +7,7 @@ var styles = {
7
7
  "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
8
8
  "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
9
9
  "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
10
- "hidden": "CalendarRange-module_hidden__D47kb"
10
+ "hidden": "CalendarRange-module_hidden__D47kb",
11
+ "chevronIcon": "CalendarRange-module_chevronIcon__ULJzd"
11
12
  };
12
13
  module.exports = styles;
package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.cjs CHANGED
@@ -25,7 +25,9 @@ var CalendarSingle = function (_a) {
25
25
  weekStartsOn = _a.weekStartsOn,
26
26
  _b = _a.locale,
27
27
  locale$1 = _b === void 0 ? locale.enAU : _b,
28
- restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
28
+ _c = _a.components,
29
+ components = _c === void 0 ? {} : _c,
30
+ restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale", "components"]);
29
31
  var calendarRef = React.useRef(null);
30
32
  React.useEffect(function () {
31
33
  if (calendarRef.current) onMount === null || onMount === void 0 ? void 0 : onMount(calendarRef.current);
@@ -48,22 +50,24 @@ var CalendarSingle = function (_a) {
48
50
  defaultMonth: selectedMonth,
49
51
  weekStartsOn: isValidWeekStartsOn.isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
50
52
  classNames: classNames,
51
- components: {
53
+ components: tslib.__assign({
52
54
  Chevron: function (props) {
53
55
  if (props.orientation === 'left') {
54
56
  return React__default.default.createElement(Icon.Icon, {
55
57
  name: "arrow_back",
56
58
  isPresentational: true,
57
- shouldMirrorInRTL: true
59
+ shouldMirrorInRTL: true,
60
+ className: CalendarSingle_module.chevronIcon
58
61
  });
59
62
  }
60
63
  return React__default.default.createElement(Icon.Icon, {
61
64
  name: "arrow_forward",
62
65
  isPresentational: true,
63
- shouldMirrorInRTL: true
66
+ shouldMirrorInRTL: true,
67
+ className: CalendarSingle_module.chevronIcon
64
68
  });
65
69
  }
66
- },
70
+ }, components),
67
71
  locale: locale$1
68
72
  }, restProps)));
69
73
  };
package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.module.scss.cjs CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var styles = {
4
4
  "nav": "CalendarSingle-module_nav__wSVua",
5
- "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx"
5
+ "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx",
6
+ "chevronIcon": "CalendarSingle-module_chevronIcon__0PRnR"
6
7
  };
7
8
  module.exports = styles;
package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs CHANGED
@@ -52,13 +52,15 @@ var LegacyCalendarRange = function (_a) {
52
52
  return React__default.default.createElement(Icon.Icon, {
53
53
  name: "arrow_back",
54
54
  isPresentational: true,
55
- shouldMirrorInRTL: true
55
+ shouldMirrorInRTL: true,
56
+ className: LegacyCalendarRange_module.chevronIcon
56
57
  });
57
58
  }
58
59
  return React__default.default.createElement(Icon.Icon, {
59
60
  name: "arrow_forward",
60
61
  isPresentational: true,
61
- shouldMirrorInRTL: true
62
+ shouldMirrorInRTL: true,
63
+ className: LegacyCalendarRange_module.chevronIcon
62
64
  });
63
65
  }
64
66
  },
package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.cjs CHANGED
@@ -4,6 +4,7 @@ var styles = {
4
4
  "nav": "LegacyCalendarRange-module_nav__DsZpy",
5
5
  "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
6
6
  "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
7
- "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"
7
+ "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR",
8
+ "chevronIcon": "LegacyCalendarRange-module_chevronIcon__Q6pOJ"
8
9
  };
9
10
  module.exports = styles;
package/dist/esm/src/Calendar/CalendarRange/CalendarRange.mjs CHANGED
@@ -53,13 +53,15 @@ const CalendarRange = /*#__PURE__*/function () {
53
53
  return /*#__PURE__*/React.createElement(Icon, {
54
54
  name: "arrow_back",
55
55
  isPresentational: true,
56
- shouldMirrorInRTL: true
56
+ shouldMirrorInRTL: true,
57
+ className: styles.chevronIcon
57
58
  });
58
59
  }
59
60
  return /*#__PURE__*/React.createElement(Icon, {
60
61
  name: "arrow_forward",
61
62
  isPresentational: true,
62
- shouldMirrorInRTL: true
63
+ shouldMirrorInRTL: true,
64
+ className: styles.chevronIcon
63
65
  });
64
66
  }
65
67
  },
package/dist/esm/src/Calendar/CalendarRange/CalendarRange.module.scss.mjs CHANGED
@@ -5,6 +5,7 @@ var styles = {
5
5
  "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
6
6
  "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
7
7
  "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
8
- "hidden": "CalendarRange-module_hidden__D47kb"
8
+ "hidden": "CalendarRange-module_hidden__D47kb",
9
+ "chevronIcon": "CalendarRange-module_chevronIcon__ULJzd"
9
10
  };
10
11
  export { styles as default };
package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.mjs CHANGED
@@ -18,7 +18,9 @@ const CalendarSingle = /*#__PURE__*/function () {
18
18
  weekStartsOn = _a.weekStartsOn,
19
19
  _b = _a.locale,
20
20
  locale = _b === void 0 ? enAU : _b,
21
- restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
21
+ _c = _a.components,
22
+ components = _c === void 0 ? {} : _c,
23
+ restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale", "components"]);
22
24
  var calendarRef = useRef(null);
23
25
  useEffect(function () {
24
26
  if (calendarRef.current) onMount === null || onMount === void 0 ? void 0 : onMount(calendarRef.current);
@@ -41,22 +43,24 @@ const CalendarSingle = /*#__PURE__*/function () {
41
43
  defaultMonth: selectedMonth,
42
44
  weekStartsOn: isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
43
45
  classNames: classNames,
44
- components: {
46
+ components: __assign({
45
47
  Chevron: function (props) {
46
48
  if (props.orientation === 'left') {
47
49
  return /*#__PURE__*/React.createElement(Icon, {
48
50
  name: "arrow_back",
49
51
  isPresentational: true,
50
- shouldMirrorInRTL: true
52
+ shouldMirrorInRTL: true,
53
+ className: styles.chevronIcon
51
54
  });
52
55
  }
53
56
  return /*#__PURE__*/React.createElement(Icon, {
54
57
  name: "arrow_forward",
55
58
  isPresentational: true,
56
- shouldMirrorInRTL: true
59
+ shouldMirrorInRTL: true,
60
+ className: styles.chevronIcon
57
61
  });
58
62
  }
59
- },
63
+ }, components),
60
64
  locale: locale
61
65
  }, restProps)));
62
66
  };
package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.module.scss.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  var styles = {
2
2
  "nav": "CalendarSingle-module_nav__wSVua",
3
- "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx"
3
+ "navButtonNext": "CalendarSingle-module_navButtonNext__-GrZx",
4
+ "chevronIcon": "CalendarSingle-module_chevronIcon__0PRnR"
4
5
  };
5
6
  export { styles as default };
package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs CHANGED
@@ -45,13 +45,15 @@ const LegacyCalendarRange = /*#__PURE__*/function () {
45
45
  return /*#__PURE__*/React.createElement(Icon, {
46
46
  name: "arrow_back",
47
47
  isPresentational: true,
48
- shouldMirrorInRTL: true
48
+ shouldMirrorInRTL: true,
49
+ className: styles.chevronIcon
49
50
  });
50
51
  }
51
52
  return /*#__PURE__*/React.createElement(Icon, {
52
53
  name: "arrow_forward",
53
54
  isPresentational: true,
54
- shouldMirrorInRTL: true
55
+ shouldMirrorInRTL: true,
56
+ className: styles.chevronIcon
55
57
  });
56
58
  }
57
59
  },
package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.mjs CHANGED
@@ -2,6 +2,7 @@ var styles = {
2
2
  "nav": "LegacyCalendarRange-module_nav__DsZpy",
3
3
  "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
4
4
  "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
5
- "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"
5
+ "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR",
6
+ "chevronIcon": "LegacyCalendarRange-module_chevronIcon__Q6pOJ"
6
7
  };
7
8
  export { styles as default };
package/dist/styles.css CHANGED
@@ -2081,6 +2081,9 @@
2081
2081
  .CalendarSingle-module_navButtonNext__-GrZx {
2082
2082
  inset-inline-end: 0;
2083
2083
  }
2084
+ .CalendarSingle-module_chevronIcon__0PRnR {
2085
+ pointer-events: none;
2086
+ }
2084
2087
  }
2085
2088
  /** THIS IS AN AUTOGENERATED FILE **/
2086
2089
  /** THIS IS AN AUTOGENERATED FILE **/
@@ -2133,6 +2136,9 @@
2133
2136
  .CalendarRange-module_hidden__D47kb {
2134
2137
  background-color: transparent;
2135
2138
  }
2139
+ .CalendarRange-module_chevronIcon__ULJzd {
2140
+ pointer-events: none;
2141
+ }
2136
2142
  }
2137
2143
  @layer kz-components {
2138
2144
  @property --gradient-angle {
@@ -3529,6 +3535,9 @@
3529
3535
  .LegacyCalendarRange-module_dayRangeMiddle__M27gR [class*=_button_] {
3530
3536
  color: var(--color-blue-500, #0168b3);
3531
3537
  }
3538
+ .LegacyCalendarRange-module_chevronIcon__Q6pOJ {
3539
+ pointer-events: none;
3540
+ }
3532
3541
  }
3533
3542
  /** THIS IS AN AUTOGENERATED FILE **/
3534
3543
  /** THIS IS AN AUTOGENERATED FILE **/
package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts CHANGED
@@ -4,8 +4,10 @@ export type CalendarSingleElement = HTMLDivElement;
4
4
  export type CalendarSingleProps = {
5
5
  id?: string;
6
6
  onMount?: (calendarElement: CalendarSingleElement) => void;
7
+ /** Exposes the react-day-picker component prop. Please be aware, consumers using this will have to guarentee functions as expected */
8
+ components?: PropsBase['components'];
7
9
  } & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>;
8
10
  export declare const CalendarSingle: {
9
- ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, ...restProps }: CalendarSingleProps): JSX.Element;
11
+ ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, components, ...restProps }: CalendarSingleProps): JSX.Element;
10
12
  displayName: string;
11
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "2.2.0",
3
+ "version": "2.2.1",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
package/src/Calendar/CalendarRange/CalendarRange.module.scss CHANGED
@@ -65,4 +65,8 @@
65
65
  .hidden {
66
66
  background-color: transparent;
67
67
  }
68
+
69
+ .chevronIcon {
70
+ pointer-events: none;
71
+ }
68
72
  }
package/src/Calendar/CalendarRange/CalendarRange.tsx CHANGED
@@ -57,10 +57,24 @@ export const CalendarRange = ({
57
57
  components={{
58
58
  Chevron: (props) => {
59
59
  if (props.orientation === 'left') {
60
- return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
60
+ return (
61
+ <Icon
62
+ name="arrow_back"
63
+ isPresentational
64
+ shouldMirrorInRTL
65
+ className={styles.chevronIcon}
66
+ />
67
+ )
61
68
  }
62
69
 
63
- return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
70
+ return (
71
+ <Icon
72
+ name="arrow_forward"
73
+ isPresentational
74
+ shouldMirrorInRTL
75
+ className={styles.chevronIcon}
76
+ />
77
+ )
64
78
  },
65
79
  }}
66
80
  numberOfMonths={numberOfMonths}
package/src/Calendar/CalendarSingle/CalendarSingle.module.scss CHANGED
@@ -13,4 +13,8 @@
13
13
  .navButtonNext {
14
14
  inset-inline-end: 0;
15
15
  }
16
+
17
+ .chevronIcon {
18
+ pointer-events: none;
19
+ }
16
20
  }
package/src/Calendar/CalendarSingle/CalendarSingle.tsx CHANGED
@@ -12,6 +12,8 @@ export type CalendarSingleElement = HTMLDivElement
12
12
  export type CalendarSingleProps = {
13
13
  id?: string
14
14
  onMount?: (calendarElement: CalendarSingleElement) => void
15
+ /** Exposes the react-day-picker component prop. Please be aware, consumers using this will have to guarentee functions as expected */
16
+ components?: PropsBase['components']
15
17
  } & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>
16
18
 
17
19
  export const CalendarSingle = ({
@@ -22,6 +24,7 @@ export const CalendarSingle = ({
22
24
  defaultMonth,
23
25
  weekStartsOn,
24
26
  locale = enAU,
27
+ components = {},
25
28
  ...restProps
26
29
  }: CalendarSingleProps): JSX.Element => {
27
30
  const calendarRef = useRef<CalendarSingleElement>(null)
@@ -52,11 +55,26 @@ export const CalendarSingle = ({
52
55
  components={{
53
56
  Chevron: (props) => {
54
57
  if (props.orientation === 'left') {
55
- return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
58
+ return (
59
+ <Icon
60
+ name="arrow_back"
61
+ isPresentational
62
+ shouldMirrorInRTL
63
+ className={styles.chevronIcon}
64
+ />
65
+ )
56
66
  }
57
67
 
58
- return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
68
+ return (
69
+ <Icon
70
+ name="arrow_forward"
71
+ isPresentational
72
+ shouldMirrorInRTL
73
+ className={styles.chevronIcon}
74
+ />
75
+ )
59
76
  },
77
+ ...components,
60
78
  }}
61
79
  locale={locale}
62
80
  {...restProps}
package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss CHANGED
@@ -24,4 +24,8 @@
24
24
  color: $color-blue-500;
25
25
  }
26
26
  }
27
+
28
+ .chevronIcon {
29
+ pointer-events: none;
30
+ }
27
31
  }
package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx CHANGED
@@ -60,10 +60,24 @@ export const LegacyCalendarRange = ({
60
60
  components={{
61
61
  Chevron: (props) => {
62
62
  if (props.orientation === 'left') {
63
- return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
63
+ return (
64
+ <Icon
65
+ name="arrow_back"
66
+ isPresentational
67
+ shouldMirrorInRTL
68
+ className={styles.chevronIcon}
69
+ />
70
+ )
64
71
  }
65
72
 
66
- return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
73
+ return (
74
+ <Icon
75
+ name="arrow_forward"
76
+ isPresentational
77
+ shouldMirrorInRTL
78
+ className={styles.chevronIcon}
79
+ />
80
+ )
67
81
  },
68
82
  }}
69
83
  locale={locale}