@pingux/astro 2.81.0 → 2.82.0-alpha.0

package/lib/cjs/components/SelectField/SelectField.js

@@ -106,6 +106,13 @@ SelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    */
   onSelectionChange: _propTypes["default"].func
 }, _fieldAttributes.inputFieldAttributesBasePropTypes), {}, {
+  /** Provides a way to insert markup in specified places. */
+  slots: _propTypes["default"].shape({
+    /** The given node will be inserted before the text in field container. */
+    leftOfData: _propTypes["default"].node,
+    /** The given node will be inserted into the field container. */
+    inContainer: _propTypes["default"].node
+  }),
   /**
    * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
    * and/or the visible button representation for the select input.

package/lib/cjs/components/SelectField/SelectField.stories.js

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithNoneOption = exports.WithCustomHeight = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithCustomHeight = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -34,6 +34,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
+var _CalendarRangeIcon = _interopRequireDefault(require("@pingux/mdi-react/CalendarRangeIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
@@ -277,6 +278,35 @@ var WithNoneOption = function WithNoneOption() {
   }, "Yellow"));
 };
 exports.WithNoneOption = WithNoneOption;
+var WithSlots = function WithSlots() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    slots: {
+      leftOfData: (0, _react2.jsx)(_index.Icon, {
+        icon: _CalendarRangeIcon["default"],
+        color: "accent.40",
+        mr: "xs",
+        title: {
+          name: 'Calendar Icon'
+        }
+      })
+    }
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "today"
+  }, "Today"), (0, _react2.jsx)(_index.Item, {
+    key: "fromYesterday"
+  }, "From Yesterday"), (0, _react2.jsx)(_index.Item, {
+    key: "last7days"
+  }, "Last 7 Days"), (0, _react2.jsx)(_index.Item, {
+    key: "last30days"
+  }, "Last 30 Days"), (0, _react2.jsx)(_index.Item, {
+    key: "thisMonth"
+  }, "This Month"), (0, _react2.jsx)(_index.Item, {
+    key: "lastMonth"
+  }, "Last Month"), (0, _react2.jsx)(_index.Item, {
+    key: "customRange"
+  }, "Custom Range"));
+};
+exports.WithSlots = WithSlots;
 var DisabledField = function DisabledField() {
   return (0, _react2.jsx)(_index.SelectField, {
     label: "What's your favorite color?",

package/lib/components/SelectField/SelectField.js

@@ -95,6 +95,13 @@ SelectField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    */
   onSelectionChange: PropTypes.func
 }, inputFieldAttributesBasePropTypes), {}, {
+  /** Provides a way to insert markup in specified places. */
+  slots: PropTypes.shape({
+    /** The given node will be inserted before the text in field container. */
+    leftOfData: PropTypes.node,
+    /** The given node will be inserted into the field container. */
+    inContainer: PropTypes.node
+  }),
   /**
    * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
    * and/or the visible button representation for the select input.

package/lib/components/SelectField/SelectField.stories.js

@@ -29,8 +29,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import { OverlayProvider } from 'react-aria';
 import { useAsyncList } from 'react-stately';
+import CalendarRangeIcon from '@pingux/mdi-react/CalendarRangeIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Item, Section, SelectField, Separator } from '../../index';
+import { Icon, Item, Section, SelectField, Separator } from '../../index';
 import { modes as labelModes } from '../../utils/devUtils/constants/labelModes';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
@@ -259,6 +260,34 @@ export var WithNoneOption = function WithNoneOption() {
     key: "yellow"
   }, "Yellow"));
 };
+export var WithSlots = function WithSlots() {
+  return ___EmotionJSX(SelectField, {
+    slots: {
+      leftOfData: ___EmotionJSX(Icon, {
+        icon: CalendarRangeIcon,
+        color: "accent.40",
+        mr: "xs",
+        title: {
+          name: 'Calendar Icon'
+        }
+      })
+    }
+  }, ___EmotionJSX(Item, {
+    key: "today"
+  }, "Today"), ___EmotionJSX(Item, {
+    key: "fromYesterday"
+  }, "From Yesterday"), ___EmotionJSX(Item, {
+    key: "last7days"
+  }, "Last 7 Days"), ___EmotionJSX(Item, {
+    key: "last30days"
+  }, "Last 30 Days"), ___EmotionJSX(Item, {
+    key: "thisMonth"
+  }, "This Month"), ___EmotionJSX(Item, {
+    key: "lastMonth"
+  }, "Last Month"), ___EmotionJSX(Item, {
+    key: "customRange"
+  }, "Custom Range"));
+};
 export var DisabledField = function DisabledField() {
   return ___EmotionJSX(SelectField, {
     label: "What's your favorite color?",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.81.0",
+  "version": "2.82.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",