@zendeskgarden/react-grid 8.62.2 → 8.63.0

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 (5) hide show
  1. package/dist/index.cjs.js +13 -14
  2. package/dist/index.esm.js +13 -14
  3. package/dist/typings/styled/pane/StyledPaneSplitterButton.d.ts +1 -1
  4. package/dist/typings/types/index.d.ts +11 -11
  5. package/package.json +5 -5
package/dist/index.cjs.js CHANGED
@@ -103,7 +103,7 @@ const sizeStyles$4 = props => {
103
103
  };
104
104
  const StyledCol = styled__default.default.div.attrs({
105
105
  'data-garden-id': COMPONENT_ID$6,
106
- 'data-garden-version': '8.62.2'
106
+ 'data-garden-version': '8.63.0'
107
107
  }).withConfig({
108
108
  displayName: "StyledCol",
109
109
  componentId: "sc-inuw62-0"
@@ -125,7 +125,7 @@ const sizeStyles$3 = props => {
125
125
  };
126
126
  const StyledGrid = styled__default.default.div.attrs({
127
127
  'data-garden-id': COMPONENT_ID$5,
128
- 'data-garden-version': '8.62.2'
128
+ 'data-garden-version': '8.63.0'
129
129
  }).withConfig({
130
130
  displayName: "StyledGrid",
131
131
  componentId: "sc-oxgg5i-0"
@@ -167,7 +167,7 @@ const sizeStyles$2 = props => {
167
167
  };
168
168
  const StyledRow = styled__default.default.div.attrs({
169
169
  'data-garden-id': COMPONENT_ID$4,
170
- 'data-garden-version': '8.62.2'
170
+ 'data-garden-version': '8.63.0'
171
171
  }).withConfig({
172
172
  displayName: "StyledRow",
173
173
  componentId: "sc-xjsdg1-0"
@@ -180,7 +180,7 @@ StyledRow.defaultProps = {
180
180
  const COMPONENT_ID$3 = 'pane';
181
181
  const StyledPane = styled__default.default.div.attrs({
182
182
  'data-garden-id': COMPONENT_ID$3,
183
- 'data-garden-version': '8.62.2'
183
+ 'data-garden-version': '8.63.0'
184
184
  }).withConfig({
185
185
  displayName: "StyledPane",
186
186
  componentId: "sc-1ltjst7-0"
@@ -192,7 +192,7 @@ StyledPane.defaultProps = {
192
192
  const COMPONENT_ID$2 = 'pane.content';
193
193
  const StyledPaneContent = styled__default.default.div.attrs({
194
194
  'data-garden-id': COMPONENT_ID$2,
195
- 'data-garden-version': '8.62.2'
195
+ 'data-garden-version': '8.63.0'
196
196
  }).withConfig({
197
197
  displayName: "StyledPaneContent",
198
198
  componentId: "sc-1b38mbh-0"
@@ -272,7 +272,7 @@ const sizeStyles$1 = props => {
272
272
  };
273
273
  const StyledPaneSplitter = styled__default.default.div.attrs({
274
274
  'data-garden-id': COMPONENT_ID$1,
275
- 'data-garden-version': '8.62.2'
275
+ 'data-garden-version': '8.63.0'
276
276
  }).withConfig({
277
277
  displayName: "StyledPaneSplitter",
278
278
  componentId: "sc-jylemn-0"
@@ -335,7 +335,7 @@ const sizeStyles = props => {
335
335
  };
336
336
  const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
337
337
  'data-garden-id': COMPONENT_ID,
338
- 'data-garden-version': '8.62.2',
338
+ 'data-garden-version': '8.63.0',
339
339
  isBasic: true,
340
340
  isPill: true,
341
341
  size: 'small'
@@ -645,7 +645,7 @@ const PaneProvider = _ref2 => {
645
645
  } : {}, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
646
646
  return React__default.default.createElement(PaneProviderContext.Provider, {
647
647
  value: paneProviderContext
648
- }, children === null || children === void 0 ? void 0 : children({
648
+ }, children?.({
649
649
  id: providerId,
650
650
  getRowValue,
651
651
  getColumnValue,
@@ -699,7 +699,6 @@ const orientationToDimension = {
699
699
  bottom: 'rows'
700
700
  };
701
701
  const SplitterComponent = React.forwardRef((_ref, ref) => {
702
- var _separatorRef$current, _separatorRef$current2;
703
702
  let {
704
703
  providerId,
705
704
  layoutKey,
@@ -722,8 +721,8 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
722
721
  const separatorRef = React.useRef(null);
723
722
  const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
724
723
  const pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
725
- const value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
726
- const valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
724
+ const value = isRow ? paneProviderContext?.getRowValue(layoutKey, true) : paneProviderContext?.getColumnValue(layoutKey, true);
725
+ const valueInFr = isRow ? paneProviderContext?.getRowValue(layoutKey) : paneProviderContext?.getColumnValue(layoutKey);
727
726
  const {
728
727
  getSeparatorProps,
729
728
  getPrimaryPaneProps
@@ -737,9 +736,9 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
737
736
  environment,
738
737
  onChange: valueNow => {
739
738
  if (isRow) {
740
- return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
739
+ return paneProviderContext?.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
741
740
  }
742
- return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
741
+ return paneProviderContext?.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
743
742
  },
744
743
  valueNow: value,
745
744
  separatorRef
@@ -758,7 +757,7 @@ const SplitterComponent = React.forwardRef((_ref, ref) => {
758
757
  onKeyDown,
759
758
  onClick
760
759
  });
761
- const size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
760
+ const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
762
761
  const onMouseOver = React.useMemo(() => containerUtilities.composeEventHandlers(props.onMouseOver, event => setIsHovered(event.target === separatorRef.current)), [props.onMouseOver, separatorRef]);
763
762
  return React__default.default.createElement(PaneSplitterContext.Provider, {
764
763
  value: React.useMemo(() => ({
package/dist/index.esm.js CHANGED
@@ -93,7 +93,7 @@ const sizeStyles$4 = props => {
93
93
  };
94
94
  const StyledCol = styled.div.attrs({
95
95
  'data-garden-id': COMPONENT_ID$6,
96
- 'data-garden-version': '8.62.2'
96
+ 'data-garden-version': '8.63.0'
97
97
  }).withConfig({
98
98
  displayName: "StyledCol",
99
99
  componentId: "sc-inuw62-0"
@@ -115,7 +115,7 @@ const sizeStyles$3 = props => {
115
115
  };
116
116
  const StyledGrid = styled.div.attrs({
117
117
  'data-garden-id': COMPONENT_ID$5,
118
- 'data-garden-version': '8.62.2'
118
+ 'data-garden-version': '8.63.0'
119
119
  }).withConfig({
120
120
  displayName: "StyledGrid",
121
121
  componentId: "sc-oxgg5i-0"
@@ -157,7 +157,7 @@ const sizeStyles$2 = props => {
157
157
  };
158
158
  const StyledRow = styled.div.attrs({
159
159
  'data-garden-id': COMPONENT_ID$4,
160
- 'data-garden-version': '8.62.2'
160
+ 'data-garden-version': '8.63.0'
161
161
  }).withConfig({
162
162
  displayName: "StyledRow",
163
163
  componentId: "sc-xjsdg1-0"
@@ -170,7 +170,7 @@ StyledRow.defaultProps = {
170
170
  const COMPONENT_ID$3 = 'pane';
171
171
  const StyledPane = styled.div.attrs({
172
172
  'data-garden-id': COMPONENT_ID$3,
173
- 'data-garden-version': '8.62.2'
173
+ 'data-garden-version': '8.63.0'
174
174
  }).withConfig({
175
175
  displayName: "StyledPane",
176
176
  componentId: "sc-1ltjst7-0"
@@ -182,7 +182,7 @@ StyledPane.defaultProps = {
182
182
  const COMPONENT_ID$2 = 'pane.content';
183
183
  const StyledPaneContent = styled.div.attrs({
184
184
  'data-garden-id': COMPONENT_ID$2,
185
- 'data-garden-version': '8.62.2'
185
+ 'data-garden-version': '8.63.0'
186
186
  }).withConfig({
187
187
  displayName: "StyledPaneContent",
188
188
  componentId: "sc-1b38mbh-0"
@@ -262,7 +262,7 @@ const sizeStyles$1 = props => {
262
262
  };
263
263
  const StyledPaneSplitter = styled.div.attrs({
264
264
  'data-garden-id': COMPONENT_ID$1,
265
- 'data-garden-version': '8.62.2'
265
+ 'data-garden-version': '8.63.0'
266
266
  }).withConfig({
267
267
  displayName: "StyledPaneSplitter",
268
268
  componentId: "sc-jylemn-0"
@@ -325,7 +325,7 @@ const sizeStyles = props => {
325
325
  };
326
326
  const StyledPaneSplitterButton = styled(ChevronButton).attrs({
327
327
  'data-garden-id': COMPONENT_ID,
328
- 'data-garden-version': '8.62.2',
328
+ 'data-garden-version': '8.63.0',
329
329
  isBasic: true,
330
330
  isPill: true,
331
331
  size: 'small'
@@ -635,7 +635,7 @@ const PaneProvider = _ref2 => {
635
635
  } : {}, [providerId, parentPaneProviderContext, rowState, columnState, setRowValue, setColumnValue, getRowValue, getColumnValue, totalPanesHeight, totalPanesWidth, pixelsPerFr]);
636
636
  return React.createElement(PaneProviderContext.Provider, {
637
637
  value: paneProviderContext
638
- }, children === null || children === void 0 ? void 0 : children({
638
+ }, children?.({
639
639
  id: providerId,
640
640
  getRowValue,
641
641
  getColumnValue,
@@ -689,7 +689,6 @@ const orientationToDimension = {
689
689
  bottom: 'rows'
690
690
  };
691
691
  const SplitterComponent = forwardRef((_ref, ref) => {
692
- var _separatorRef$current, _separatorRef$current2;
693
692
  let {
694
693
  providerId,
695
694
  layoutKey,
@@ -712,8 +711,8 @@ const SplitterComponent = forwardRef((_ref, ref) => {
712
711
  const separatorRef = useRef(null);
713
712
  const splitterOrientation = paneToSplitterOrientation[orientation || 'end'];
714
713
  const pixelsPerFr = paneProviderContext ? paneProviderContext.pixelsPerFr[orientationToDimension[orientation]] : 0;
715
- const value = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey, true) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey, true);
716
- const valueInFr = isRow ? paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getRowValue(layoutKey) : paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.getColumnValue(layoutKey);
714
+ const value = isRow ? paneProviderContext?.getRowValue(layoutKey, true) : paneProviderContext?.getColumnValue(layoutKey, true);
715
+ const valueInFr = isRow ? paneProviderContext?.getRowValue(layoutKey) : paneProviderContext?.getColumnValue(layoutKey);
717
716
  const {
718
717
  getSeparatorProps,
719
718
  getPrimaryPaneProps
@@ -727,9 +726,9 @@ const SplitterComponent = forwardRef((_ref, ref) => {
727
726
  environment,
728
727
  onChange: valueNow => {
729
728
  if (isRow) {
730
- return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
729
+ return paneProviderContext?.setRowValue(orientation === 'top', layoutKey, valueNow / pixelsPerFr);
731
730
  }
732
- return paneProviderContext === null || paneProviderContext === void 0 ? void 0 : paneProviderContext.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
731
+ return paneProviderContext?.setColumnValue(orientation === 'start', layoutKey, valueNow / pixelsPerFr);
733
732
  },
734
733
  valueNow: value,
735
734
  separatorRef
@@ -748,7 +747,7 @@ const SplitterComponent = forwardRef((_ref, ref) => {
748
747
  onKeyDown,
749
748
  onClick
750
749
  });
751
- const size = isRow ? (_separatorRef$current = separatorRef.current) === null || _separatorRef$current === void 0 ? void 0 : _separatorRef$current.clientWidth : (_separatorRef$current2 = separatorRef.current) === null || _separatorRef$current2 === void 0 ? void 0 : _separatorRef$current2.clientHeight;
750
+ const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
752
751
  const onMouseOver = useMemo(() => composeEventHandlers(props.onMouseOver, event => setIsHovered(event.target === separatorRef.current)), [props.onMouseOver, separatorRef]);
753
752
  return React.createElement(PaneSplitterContext.Provider, {
754
753
  value: useMemo(() => ({
package/dist/typings/styled/pane/StyledPaneSplitterButton.d.ts CHANGED
@@ -9,7 +9,7 @@ import { DefaultTheme } from 'styled-components';
9
9
  import { ISplitterButtonProps, Orientation, PLACEMENT } from '../../types';
10
10
  interface IStyledSplitterButtonProps extends ISplitterButtonProps {
11
11
  orientation: Orientation;
12
- placement: typeof PLACEMENT[number];
12
+ placement: (typeof PLACEMENT)[number];
13
13
  isRotated: boolean;
14
14
  splitterSize: number;
15
15
  }
package/dist/typings/types/index.d.ts CHANGED
@@ -13,15 +13,15 @@ export declare const TEXT_ALIGN: readonly ["start", "end", "center", "justify"];
13
13
  export declare const SPACE: readonly [false, "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
14
14
  export declare const WRAP: readonly ["nowrap", "wrap", "wrap-reverse"];
15
15
  export declare const PLACEMENT: readonly ["end", "start", "center"];
16
- export declare type AlignItems = typeof ALIGN_ITEMS[number];
17
- export declare type AlignSelf = typeof ALIGN_SELF[number];
18
- export declare type Direction = typeof DIRECTION[number];
19
- export declare type JustifyContent = typeof JUSTIFY_CONTENT[number];
20
- export declare type TextAlign = typeof TEXT_ALIGN[number];
21
- export declare type GridNumber = number | string;
22
- export declare type Breakpoint = number | string | boolean;
23
- export declare type Space = typeof SPACE[number];
24
- export declare type Wrap = typeof WRAP[number];
16
+ export type AlignItems = (typeof ALIGN_ITEMS)[number];
17
+ export type AlignSelf = (typeof ALIGN_SELF)[number];
18
+ export type Direction = (typeof DIRECTION)[number];
19
+ export type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
20
+ export type TextAlign = (typeof TEXT_ALIGN)[number];
21
+ export type GridNumber = number | string;
22
+ export type Breakpoint = number | string | boolean;
23
+ export type Space = (typeof SPACE)[number];
24
+ export type Wrap = (typeof WRAP)[number];
25
25
  export interface IColProps extends HTMLAttributes<HTMLDivElement> {
26
26
  /** Sets the total number of grid `columns` that the column spans on all screen sizes */
27
27
  size?: number | string;
@@ -154,7 +154,7 @@ export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
154
154
  wrapXl?: Wrap;
155
155
  }
156
156
  export declare const ORIENTATION: readonly ["top", "bottom", "start", "end"];
157
- export declare type Orientation = typeof ORIENTATION[number];
157
+ export type Orientation = (typeof ORIENTATION)[number];
158
158
  export interface IPaneProviderProps {
159
159
  /** Identifies the pane provider */
160
160
  id?: string;
@@ -210,7 +210,7 @@ export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
210
210
  }
211
211
  export interface ISplitterButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
212
212
  /** Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default. */
213
- placement?: typeof PLACEMENT[number];
213
+ placement?: (typeof PLACEMENT)[number];
214
214
  /** Renders the provided label text inside a tooltip */
215
215
  label: string;
216
216
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-grid",
3
- "version": "8.62.2",
3
+ "version": "8.63.0",
4
4
  "description": "Components relating to layout grids in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
23
23
  "dependencies": {
24
24
  "@zendeskgarden/container-splitter": "^2.0.3",
25
25
  "@zendeskgarden/container-utilities": "^1.0.0",
26
- "@zendeskgarden/react-buttons": "^8.62.2",
27
- "@zendeskgarden/react-tooltips": "^8.62.2",
26
+ "@zendeskgarden/react-buttons": "^8.63.0",
27
+ "@zendeskgarden/react-tooltips": "^8.63.0",
28
28
  "polished": "^4.0.0",
29
29
  "prop-types": "^15.5.7",
30
30
  "react-merge-refs": "^1.1.0",
@@ -37,7 +37,7 @@
37
37
  "styled-components": "^4.2.0 || ^5.0.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@zendeskgarden/react-theming": "^8.62.2"
40
+ "@zendeskgarden/react-theming": "^8.63.0"
41
41
  },
42
42
  "keywords": [
43
43
  "components",
@@ -49,5 +49,5 @@
49
49
  "access": "public"
50
50
  },
51
51
  "zendeskgarden:src": "src/index.ts",
52
- "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
52
+ "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
53
53
  }