baseui 0.0.0-next-01a27b9 → 0.0.0-next-e35e89f

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 (9) hide show
  1. package/es/table-semantic/styled-components.js +6 -4
  2. package/es/table-semantic/table-builder.js +3 -0
  3. package/esm/table-semantic/styled-components.js +6 -4
  4. package/esm/table-semantic/table-builder.js +3 -0
  5. package/package.json +1 -1
  6. package/table-semantic/styled-components.js +6 -4
  7. package/table-semantic/styled-components.js.flow +6 -4
  8. package/table-semantic/table-builder.js +3 -0
  9. package/table-semantic/table-builder.js.flow +3 -0
package/es/table-semantic/styled-components.js CHANGED
@@ -67,7 +67,8 @@ StyledTableHeadRow.displayName = "StyledTableHeadRow";
67
67
  export const StyledTableHeadCell = styled('th', ({
68
68
  $theme,
69
69
  $size,
70
- $divider
70
+ $divider,
71
+ $isNumeric
71
72
  }) => {
72
73
  const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
73
74
  const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -81,7 +82,7 @@ export const StyledTableHeadCell = styled('th', ({
81
82
  paddingLeft: padding,
82
83
  backgroundColor: $theme.colors.tableHeadBackgroundColor,
83
84
  color: $theme.colors.contentPrimary,
84
- textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
85
+ textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
85
86
  verticalAlign: 'top',
86
87
  whiteSpace: 'nowrap',
87
88
  zIndex: 1,
@@ -170,7 +171,8 @@ export const StyledTableBodyCell = styled('td', ({
170
171
  $size,
171
172
  $divider,
172
173
  $isNumeric,
173
- $isLastRow
174
+ $isLastRow,
175
+ $isSortable
174
176
  }) => {
175
177
  const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
176
178
  const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -178,7 +180,7 @@ export const StyledTableBodyCell = styled('td', ({
178
180
  const padding = sizeToCellPadding($theme, $size);
179
181
  return { ...$theme.typography.font200,
180
182
  paddingTop: padding,
181
- paddingRight: padding,
183
+ paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
182
184
  paddingBottom: padding,
183
185
  paddingLeft: padding,
184
186
  color: $theme.colors.contentPrimary,
package/es/table-semantic/table-builder.js CHANGED
@@ -79,6 +79,7 @@ export default class TableBuilder extends React.Component {
79
79
  $col: col,
80
80
  $colIndex: colIndex,
81
81
  $divider: divider,
82
+ $isNumeric: col.numeric,
82
83
  $size: size
83
84
  }, tableHeadCellProps, colTableHeadCellProps), col.header);
84
85
  }
@@ -117,6 +118,7 @@ export default class TableBuilder extends React.Component {
117
118
  $col: col,
118
119
  $colIndex: colIndex,
119
120
  $divider: divider,
121
+ $isNumeric: col.numeric,
120
122
  role: "button",
121
123
  tabIndex: "0",
122
124
  "aria-label": `${col.tableHeadAriaLabel || col.header}, ${sortLabel}`,
@@ -143,6 +145,7 @@ export default class TableBuilder extends React.Component {
143
145
  $rowIndex: rowIndex,
144
146
  $isNumeric: col.numeric,
145
147
  $isLastRow: rowIndex === lastRowindex,
148
+ $isSortable: col.sortable,
146
149
  $size: size
147
150
  }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
148
151
  }
package/esm/table-semantic/styled-components.js CHANGED
@@ -70,7 +70,8 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
70
70
 
71
71
  var $theme = _ref5.$theme,
72
72
  $size = _ref5.$size,
73
- $divider = _ref5.$divider;
73
+ $divider = _ref5.$divider,
74
+ $isNumeric = _ref5.$isNumeric;
74
75
  var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
75
76
  var borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
76
77
  var padding = sizeToCellPadding($theme, $size);
@@ -83,7 +84,7 @@ export var StyledTableHeadCell = styled('th', function (_ref5) {
83
84
  paddingLeft: padding,
84
85
  backgroundColor: $theme.colors.tableHeadBackgroundColor,
85
86
  color: $theme.colors.contentPrimary,
86
- textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
87
+ textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
87
88
  verticalAlign: 'top',
88
89
  whiteSpace: 'nowrap',
89
90
  zIndex: 1
@@ -164,14 +165,15 @@ export var StyledTableBodyCell = styled('td', function (_ref12) {
164
165
  $size = _ref12.$size,
165
166
  $divider = _ref12.$divider,
166
167
  $isNumeric = _ref12.$isNumeric,
167
- $isLastRow = _ref12.$isLastRow;
168
+ $isLastRow = _ref12.$isLastRow,
169
+ $isSortable = _ref12.$isSortable;
168
170
  var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
169
171
  var borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
170
172
  var borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
171
173
  var padding = sizeToCellPadding($theme, $size);
172
174
  return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
173
175
  paddingTop: padding,
174
- paddingRight: padding,
176
+ paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
175
177
  paddingBottom: padding,
176
178
  paddingLeft: padding,
177
179
  color: $theme.colors.contentPrimary,
package/esm/table-semantic/table-builder.js CHANGED
@@ -200,6 +200,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
200
200
  $col: col,
201
201
  $colIndex: colIndex,
202
202
  $divider: divider,
203
+ $isNumeric: col.numeric,
203
204
  $size: size
204
205
  }, tableHeadCellProps, colTableHeadCellProps), col.header);
205
206
  }
@@ -242,6 +243,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
242
243
  $col: col,
243
244
  $colIndex: colIndex,
244
245
  $divider: divider,
246
+ $isNumeric: col.numeric,
245
247
  role: "button",
246
248
  tabIndex: "0",
247
249
  "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -275,6 +277,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
275
277
  $rowIndex: rowIndex,
276
278
  $isNumeric: col.numeric,
277
279
  $isLastRow: rowIndex === lastRowindex,
280
+ $isSortable: col.sortable,
278
281
  $size: size
279
282
  }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
280
283
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "0.0.0-next-01a27b9",
3
+ "version": "0.0.0-next-e35e89f",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/table-semantic/styled-components.js CHANGED
@@ -81,7 +81,8 @@ var StyledTableHeadCell = (0, _index.styled)('th', function (_ref5) {
81
81
 
82
82
  var $theme = _ref5.$theme,
83
83
  $size = _ref5.$size,
84
- $divider = _ref5.$divider;
84
+ $divider = _ref5.$divider,
85
+ $isNumeric = _ref5.$isNumeric;
85
86
  var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
86
87
  var borderVertical = $divider === _constants.DIVIDER.grid || $divider === _constants.DIVIDER.vertical;
87
88
  var padding = sizeToCellPadding($theme, $size);
@@ -94,7 +95,7 @@ var StyledTableHeadCell = (0, _index.styled)('th', function (_ref5) {
94
95
  paddingLeft: padding,
95
96
  backgroundColor: $theme.colors.tableHeadBackgroundColor,
96
97
  color: $theme.colors.contentPrimary,
97
- textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
98
+ textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
98
99
  verticalAlign: 'top',
99
100
  whiteSpace: 'nowrap',
100
101
  zIndex: 1
@@ -182,14 +183,15 @@ var StyledTableBodyCell = (0, _index.styled)('td', function (_ref12) {
182
183
  $size = _ref12.$size,
183
184
  $divider = _ref12.$divider,
184
185
  $isNumeric = _ref12.$isNumeric,
185
- $isLastRow = _ref12.$isLastRow;
186
+ $isLastRow = _ref12.$isLastRow,
187
+ $isSortable = _ref12.$isSortable;
186
188
  var borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
187
189
  var borderVertical = $divider === _constants.DIVIDER.vertical || $divider === _constants.DIVIDER.grid;
188
190
  var borderHorizontal = $divider === undefined || $divider === _constants.DIVIDER.horizontal || $divider === _constants.DIVIDER.grid;
189
191
  var padding = sizeToCellPadding($theme, $size);
190
192
  return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
191
193
  paddingTop: padding,
192
- paddingRight: padding,
194
+ paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
193
195
  paddingBottom: padding,
194
196
  paddingLeft: padding,
195
197
  color: $theme.colors.contentPrimary,
package/table-semantic/styled-components.js.flow CHANGED
@@ -78,12 +78,13 @@ type StyledTableHeadCellPropsT = {
78
78
  $col?: {},
79
79
  $colIndex?: ?number,
80
80
  $divider?: DividerT,
81
+ $isNumeric?: ?boolean,
81
82
  $size?: SizeT,
82
83
  };
83
84
 
84
85
  export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
85
86
  'th',
86
- ({$theme, $size, $divider}) => {
87
+ ({$theme, $size, $divider, $isNumeric}) => {
87
88
  const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
88
89
  const borderVertical =
89
90
  $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -99,7 +100,7 @@ export const StyledTableHeadCell = styled<StyledTableHeadCellPropsT>(
99
100
  paddingLeft: padding,
100
101
  backgroundColor: $theme.colors.tableHeadBackgroundColor,
101
102
  color: $theme.colors.contentPrimary,
102
- textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
103
+ textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
103
104
  verticalAlign: 'top',
104
105
  whiteSpace: 'nowrap',
105
106
  zIndex: 1,
@@ -215,11 +216,12 @@ type StyledTableBodyCellPropsT = {
215
216
  $size?: SizeT,
216
217
  $isNumeric?: ?boolean,
217
218
  $isLastRow?: ?boolean,
219
+ $isSortable?: ?boolean,
218
220
  };
219
221
 
220
222
  export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
221
223
  'td',
222
- ({$theme, $size, $divider, $isNumeric, $isLastRow}) => {
224
+ ({$theme, $size, $divider, $isNumeric, $isLastRow, $isSortable}) => {
223
225
  const borderDir: string = $theme.direction === 'rtl' ? 'Left' : 'Right';
224
226
  const borderVertical =
225
227
  $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -232,7 +234,7 @@ export const StyledTableBodyCell = styled<StyledTableBodyCellPropsT>(
232
234
  return {
233
235
  ...$theme.typography.font200,
234
236
  paddingTop: padding,
235
- paddingRight: padding,
237
+ paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
236
238
  paddingBottom: padding,
237
239
  paddingLeft: padding,
238
240
  color: $theme.colors.contentPrimary,
package/table-semantic/table-builder.js CHANGED
@@ -208,6 +208,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
208
208
  $col: col,
209
209
  $colIndex: colIndex,
210
210
  $divider: divider,
211
+ $isNumeric: col.numeric,
211
212
  $size: size
212
213
  }, tableHeadCellProps, colTableHeadCellProps), col.header);
213
214
  }
@@ -250,6 +251,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
250
251
  $col: col,
251
252
  $colIndex: colIndex,
252
253
  $divider: divider,
254
+ $isNumeric: col.numeric,
253
255
  role: "button",
254
256
  tabIndex: "0",
255
257
  "aria-label": "".concat(col.tableHeadAriaLabel || col.header, ", ").concat(sortLabel),
@@ -283,6 +285,7 @@ var TableBuilder = /*#__PURE__*/function (_React$Component) {
283
285
  $rowIndex: rowIndex,
284
286
  $isNumeric: col.numeric,
285
287
  $isLastRow: rowIndex === lastRowindex,
288
+ $isSortable: col.sortable,
286
289
  $size: size
287
290
  }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
288
291
  }
package/table-semantic/table-builder.js.flow CHANGED
@@ -153,6 +153,7 @@ export default class TableBuilder<T> extends React.Component<
153
153
  $col={col}
154
154
  $colIndex={colIndex}
155
155
  $divider={divider}
156
+ $isNumeric={col.numeric}
156
157
  $size={size}
157
158
  {...tableHeadCellProps}
158
159
  {...colTableHeadCellProps}
@@ -211,6 +212,7 @@ export default class TableBuilder<T> extends React.Component<
211
212
  $col={col}
212
213
  $colIndex={colIndex}
213
214
  $divider={divider}
215
+ $isNumeric={col.numeric}
214
216
  role="button"
215
217
  tabIndex="0"
216
218
  aria-label={`${col.tableHeadAriaLabel || col.header}, ${sortLabel}`}
@@ -249,6 +251,7 @@ export default class TableBuilder<T> extends React.Component<
249
251
  $rowIndex={rowIndex}
250
252
  $isNumeric={col.numeric}
251
253
  $isLastRow={rowIndex === lastRowindex}
254
+ $isSortable={col.sortable}
252
255
  $size={size}
253
256
  {...tableBodyCellProps}
254
257
  {...colTableBodyCellProps}