@pingux/astro 2.163.1-alpha.3 → 2.163.1-alpha.4

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 (14) hide show
  1. package/lib/cjs/components/LinkSelectField/LinkSelectField.js +7 -3
  2. package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js +20 -1
  3. package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts +2 -0
  4. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts +1 -0
  5. package/lib/cjs/styles/themes/astro/customProperties/index.d.ts +1 -0
  6. package/lib/cjs/styles/themes/astro/customProperties/index.js +3 -1
  7. package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts +1 -0
  8. package/lib/cjs/styles/themes/next-gen/customProperties/index.js +3 -1
  9. package/lib/components/LinkSelectField/LinkSelectField.js +7 -3
  10. package/lib/components/LinkSelectField/LinkSelectField.stories.js +19 -0
  11. package/lib/styles/themes/astro/customProperties/index.js +3 -1
  12. package/lib/styles/themes/next-gen/customProperties/index.js +3 -1
  13. package/lib/tsconfig.lib.tsbuildinfo +1 -1
  14. package/package.json +1 -1
package/lib/cjs/components/LinkSelectField/LinkSelectField.js CHANGED
@@ -41,17 +41,19 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
41
41
  isDisabled = props.isDisabled,
42
42
  status = props.status,
43
43
  helperText = props.helperText,
44
- hasInlineLoader = props.hasInlineLoader;
44
+ hasInlineLoader = props.hasInlineLoader,
45
+ popoverWidth = props.popoverWidth;
45
46
  var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
46
47
  ariaProps = _getAriaAttributeProp.ariaProps;
47
48
  var _useGetTheme = (0, _hooks.useGetTheme)(),
49
+ linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
48
50
  themeState = _useGetTheme.themeState;
49
51
  var isOnyx = themeState.isOnyx;
50
52
  var helperTextId = (0, _uuid.v4)();
51
53
  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
52
54
  var _useSelectField = (0, _hooks.useSelectField)(_objectSpread(_objectSpread({
53
55
  listboxStyle: {
54
- width: '10em'
56
+ width: popoverWidth || linkSelectFieldWidth
55
57
  }
56
58
  }, props), {}, {
57
59
  // Need this for not applying is-default class
@@ -162,7 +164,9 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
162
164
  */
163
165
  onSelectionChange: _propTypes["default"].func,
164
166
  /** Display an inline loader inside the select trigger while loading. */
165
- hasInlineLoader: _propTypes["default"].bool
167
+ hasInlineLoader: _propTypes["default"].bool,
168
+ /** Width of the popover menu. Accepts any valid CSS unit. */
169
+ popoverWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
166
170
  }, _statusProp.statusPropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
167
171
  LinkSelectField.defaultProps = _objectSpread({
168
172
  placeholder: 'Select',
package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js CHANGED
@@ -20,7 +20,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
20
20
  _Object$defineProperty(exports, "__esModule", {
21
21
  value: true
22
22
  });
23
- exports["default"] = exports.WithNoneOption = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
23
+ exports["default"] = exports.WithPopoverWidth = exports.WithNoneOption = exports.NoOptionsAvailable = exports.LeftLabel = exports.HelperText = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
24
24
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
25
25
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
26
26
  var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
@@ -324,4 +324,23 @@ var AsyncLoading = exports.AsyncLoading = function AsyncLoading() {
324
324
  key: item.id
325
325
  }, item.name.given);
326
326
  }));
327
+ };
328
+ var WithPopoverWidth = exports.WithPopoverWidth = function WithPopoverWidth(args) {
329
+ return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, (0, _extends2["default"])({}, args, {
330
+ width: "100%",
331
+ popoverWidth: "20rem"
332
+ }), (0, _react2.jsx)(_index.Item, {
333
+ key: "red"
334
+ }, "Red"), (0, _react2.jsx)(_index.Item, {
335
+ key: "blue"
336
+ }, "Blue"), (0, _react2.jsx)(_index.Item, {
337
+ key: "yellow"
338
+ }, "Extra long goes here")));
339
+ };
340
+ WithPopoverWidth.parameters = {
341
+ docs: {
342
+ description: {
343
+ story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
344
+ }
345
+ }
327
346
  };
package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts CHANGED
@@ -80,6 +80,7 @@ declare const useGetTheme: () => {
80
80
  defaultIconSize: import("../..").IconSize;
81
81
  calendarIconSize: import("../..").IconSize;
82
82
  buttonLoaderSize: import("../..").LoaderSize;
83
+ linkSelectFieldWidth: string;
83
84
  themeState: {
84
85
  isAstro: boolean;
85
86
  isOnyx: boolean;
@@ -170,6 +171,7 @@ declare const useGetTheme: () => {
170
171
  defaultIconSize: import("../..").IconSize;
171
172
  calendarIconSize: import("../..").IconSize;
172
173
  buttonLoaderSize: import("../..").LoaderSize;
174
+ linkSelectFieldWidth: string;
173
175
  themeState: {
174
176
  isOnyx: boolean;
175
177
  isOnyxDark: boolean;
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts CHANGED
@@ -81,4 +81,5 @@ export declare const nextGenDarkThemeValues: {
81
81
  defaultIconSize: import("../../../..").IconSize;
82
82
  calendarIconSize: import("../../../..").IconSize;
83
83
  buttonLoaderSize: import("../../../..").LoaderSize;
84
+ linkSelectFieldWidth: string;
84
85
  };
package/lib/cjs/styles/themes/astro/customProperties/index.d.ts CHANGED
@@ -74,4 +74,5 @@ export declare const astroThemeValues: {
74
74
  defaultIconSize: IconSize;
75
75
  calendarIconSize: IconSize;
76
76
  buttonLoaderSize: LoaderSize;
77
+ linkSelectFieldWidth: string;
77
78
  };
package/lib/cjs/styles/themes/astro/customProperties/index.js CHANGED
@@ -28,6 +28,7 @@ var buttonLoaderSize = '0.5em';
28
28
  var iFrameContentDivBackgroundColor = '#F7F8FD';
29
29
  var defaultIconColor = 'currentColor';
30
30
  var defaultIconSize = 'sm';
31
+ var linkSelectFieldWidth = '10em';
31
32
  var calendarIconSize = 25;
32
33
  var astroThemeValues = exports.astroThemeValues = {
33
34
  accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -49,5 +50,6 @@ var astroThemeValues = exports.astroThemeValues = {
49
50
  defaultIconColor: defaultIconColor,
50
51
  defaultIconSize: defaultIconSize,
51
52
  calendarIconSize: calendarIconSize,
52
- buttonLoaderSize: buttonLoaderSize
53
+ buttonLoaderSize: buttonLoaderSize,
54
+ linkSelectFieldWidth: linkSelectFieldWidth
53
55
  };
package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts CHANGED
@@ -84,4 +84,5 @@ export declare const nextGenThemeValues: {
84
84
  defaultIconSize: IconSize;
85
85
  calendarIconSize: IconSize;
86
86
  buttonLoaderSize: LoaderSize;
87
+ linkSelectFieldWidth: string;
87
88
  };
package/lib/cjs/styles/themes/next-gen/customProperties/index.js CHANGED
@@ -31,6 +31,7 @@ var iFrameContentDivBackgroundColor = backgroundBaseColor;
31
31
  var defaultIconColor = 'gray-800';
32
32
  var defaultIconSize = 'md';
33
33
  var buttonLoaderSize = 'sm';
34
+ var linkSelectFieldWidth = '12em';
34
35
  var calendarIconSize = 'sm';
35
36
  var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
36
37
  activeColor: activeColor,
@@ -46,5 +47,6 @@ var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
46
47
  rockerButtonGap: '0px',
47
48
  defaultIconSize: defaultIconSize,
48
49
  calendarIconSize: calendarIconSize,
49
- buttonLoaderSize: buttonLoaderSize
50
+ buttonLoaderSize: buttonLoaderSize,
51
+ linkSelectFieldWidth: linkSelectFieldWidth
50
52
  }, _customSizes["default"]);
package/lib/components/LinkSelectField/LinkSelectField.js CHANGED
@@ -31,17 +31,19 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
31
31
  isDisabled = props.isDisabled,
32
32
  status = props.status,
33
33
  helperText = props.helperText,
34
- hasInlineLoader = props.hasInlineLoader;
34
+ hasInlineLoader = props.hasInlineLoader,
35
+ popoverWidth = props.popoverWidth;
35
36
  var _getAriaAttributeProp = getAriaAttributeProps(props),
36
37
  ariaProps = _getAriaAttributeProp.ariaProps;
37
38
  var _useGetTheme = useGetTheme(),
39
+ linkSelectFieldWidth = _useGetTheme.linkSelectFieldWidth,
38
40
  themeState = _useGetTheme.themeState;
39
41
  var isOnyx = themeState.isOnyx;
40
42
  var helperTextId = uuid();
41
43
  usePropWarning(props, 'disabled', 'isDisabled');
42
44
  var _useSelectField = useSelectField(_objectSpread(_objectSpread({
43
45
  listboxStyle: {
44
- width: '10em'
46
+ width: popoverWidth || linkSelectFieldWidth
45
47
  }
46
48
  }, props), {}, {
47
49
  // Need this for not applying is-default class
@@ -152,7 +154,9 @@ LinkSelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
152
154
  */
153
155
  onSelectionChange: PropTypes.func,
154
156
  /** Display an inline loader inside the select trigger while loading. */
155
- hasInlineLoader: PropTypes.bool
157
+ hasInlineLoader: PropTypes.bool,
158
+ /** Width of the popover menu. Accepts any valid CSS unit. */
159
+ popoverWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
156
160
  }, statusPropTypes), inputFieldAttributesBasePropTypes), ariaAttributesBasePropTypes);
157
161
  LinkSelectField.defaultProps = _objectSpread({
158
162
  placeholder: 'Select',
package/lib/components/LinkSelectField/LinkSelectField.stories.js CHANGED
@@ -315,4 +315,23 @@ export var AsyncLoading = function AsyncLoading() {
315
315
  key: item.id
316
316
  }, item.name.given);
317
317
  }));
318
+ };
319
+ export var WithPopoverWidth = function WithPopoverWidth(args) {
320
+ return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(LinkSelectField, _extends({}, args, {
321
+ width: "100%",
322
+ popoverWidth: "20rem"
323
+ }), ___EmotionJSX(Item, {
324
+ key: "red"
325
+ }, "Red"), ___EmotionJSX(Item, {
326
+ key: "blue"
327
+ }, "Blue"), ___EmotionJSX(Item, {
328
+ key: "yellow"
329
+ }, "Extra long goes here")));
330
+ };
331
+ WithPopoverWidth.parameters = {
332
+ docs: {
333
+ description: {
334
+ story: 'The `popoverWidth` prop can be used to set a custom width for the dropdown/popover.'
335
+ }
336
+ }
318
337
  };
package/lib/styles/themes/astro/customProperties/index.js CHANGED
@@ -16,6 +16,7 @@ var buttonLoaderSize = '0.5em';
16
16
  var iFrameContentDivBackgroundColor = '#F7F8FD';
17
17
  var defaultIconColor = 'currentColor';
18
18
  var defaultIconSize = 'sm';
19
+ var linkSelectFieldWidth = '10em';
19
20
  var calendarIconSize = 25;
20
21
  export var astroThemeValues = {
21
22
  accordionItemDefaultLabelTag: accordionItemDefaultLabelTag,
@@ -37,5 +38,6 @@ export var astroThemeValues = {
37
38
  defaultIconColor: defaultIconColor,
38
39
  defaultIconSize: defaultIconSize,
39
40
  calendarIconSize: calendarIconSize,
40
- buttonLoaderSize: buttonLoaderSize
41
+ buttonLoaderSize: buttonLoaderSize,
42
+ linkSelectFieldWidth: linkSelectFieldWidth
41
43
  };
package/lib/styles/themes/next-gen/customProperties/index.js CHANGED
@@ -21,6 +21,7 @@ var iFrameContentDivBackgroundColor = backgroundBaseColor;
21
21
  var defaultIconColor = 'gray-800';
22
22
  var defaultIconSize = 'md';
23
23
  var buttonLoaderSize = 'sm';
24
+ var linkSelectFieldWidth = '12em';
24
25
  var calendarIconSize = 'sm';
25
26
  export var nextGenThemeValues = _objectSpread({
26
27
  activeColor: activeColor,
@@ -36,5 +37,6 @@ export var nextGenThemeValues = _objectSpread({
36
37
  rockerButtonGap: '0px',
37
38
  defaultIconSize: defaultIconSize,
38
39
  calendarIconSize: calendarIconSize,
39
- buttonLoaderSize: buttonLoaderSize
40
+ buttonLoaderSize: buttonLoaderSize,
41
+ linkSelectFieldWidth: linkSelectFieldWidth
40
42
  }, customSizes);