@pingux/astro 1.2.0-alpha.14 → 1.2.0-alpha.18

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -1,7 +1,11 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useState } from 'react';
+import SearchIcon from 'mdi-react/SearchIcon';
 import TextAreaField from '.';
+import Box from '../Box';
+import Icon from '../Icon';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { modes as labelModes } from '../Label/constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -61,9 +65,32 @@ export default {
     }
   }
 };
+
+var IconSlot = ___EmotionJSX(Box, {
+  isRow: true
+}, ___EmotionJSX(Icon, {
+  icon: SearchIcon
+}));
+
 export var Default = function Default(args) {
   return ___EmotionJSX(TextAreaField, args);
 };
+export var WithSlots = function WithSlots(args) {
+  return (// This is an example of a slot that can be passed into the component
+    // const IconSlot = (
+    //   <Box isRow>
+    //     <Icon
+    //       icon={SearchIcon}
+    //     />
+    //   </Box>
+    // );
+    ___EmotionJSX(TextAreaField, _extends({}, args, {
+      slots: {
+        inContainer: IconSlot
+      }
+    }))
+  );
+};
 export var FloatLabel = function FloatLabel() {
   return ___EmotionJSX(TextAreaField, {
     label: "Example label",

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -120,4 +120,17 @@ test('form wrapper will have a max label column width when custom width set', fu
   });
   var textAreaContainer = screen.getByTestId(testId);
   expect(textAreaContainer).toHaveStyle('grid-template-columns: 120px auto');
+});
+test('providing slot props causes slot to render', function () {
+  var slot = ___EmotionJSX("p", {
+    "data-testid": "testSlot"
+  }, "testText");
+
+  var slots = {
+    inContainer: slot
+  };
+  getComponent({
+    slots: slots
+  });
+  expect(screen.getByTestId('testSlot')).toBeInTheDocument();
 });

package/lib/context/AccordionGridContext/index.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var AccordionGridContext = /*#__PURE__*/createContext({});
+export var useAccordionGridContext = function useAccordionGridContext() {
+  return useContext(AccordionGridContext);
+};

package/lib/hooks/useField/useField.js

@@ -114,6 +114,11 @@ var useField = function useField() {
       setHasValue(true);
     } else {
       setHasValue(false);
+    } // adding this function resolves the error brought up in UIP-5116
+
+
+    if (e.persist) {
+      e.persist();
     } // Make sure to call the original onChange event
 
 

package/lib/hooks/useRockerButton/useRockerButton.js

@@ -17,24 +17,22 @@ import { useId } from '@react-aria/utils';
 
 var useRockerButton = function useRockerButton(props, state, ref) {
   var item = props.item,
-      propsDisabled = props.isDisabled;
+      isDisabled = props.isDisabled,
+      isSelected = props.isSelected;
   var key = item.key;
-  var manager = state.selectionManager,
-      selectedKey = state.selectedKey;
-  var isSelected = key === selectedKey;
+  var manager = state.selectionManager;
 
   var _useSelectableItem = useSelectableItem({
+    isDisabled: isDisabled,
     selectionManager: manager,
     key: key,
     ref: ref
   }),
       itemProps = _useSelectableItem.itemProps;
 
-  var isDisabled = propsDisabled || state.disabledKeys.has(key);
   var rockerButtonId = useId();
   return {
     rockerButtonProps: _objectSpread(_objectSpread({}, itemProps), {}, {
-      isDisabled: isDisabled,
       id: rockerButtonId,
       'aria-pressed': isSelected,
       'aria-disabled': isDisabled || undefined

package/lib/styles/variants/boxes.js

@@ -117,6 +117,14 @@ var inputInContainerSlot = {
   top: '50%',
   transform: 'translateY(-50%)'
 };
+var textFieldInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
 var copy = {
   alignItems: 'center',
   width: 'max-content',
@@ -295,6 +303,7 @@ export default {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,

package/lib/styles/variants/buttons.js

@@ -375,6 +375,7 @@ var chipDeleteButton = {
 };
 
 var rocker = _objectSpread(_objectSpread({}, base), {}, {
+  border: '0',
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
@@ -386,6 +387,7 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
+    bg: 'active',
     color: 'white'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.2.0-alpha.14",
+  "version": "1.2.0-alpha.18",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",

package/lib/cjs/components/AccordionGridGroup/AccordionGridContext.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.AccordionGridContext = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var AccordionGridContext = /*#__PURE__*/_react["default"].createContext(null);
-
-exports.AccordionGridContext = AccordionGridContext;

package/lib/components/AccordionGridGroup/AccordionGridContext.js

@@ -1,2 +0,0 @@
-import React from 'react';
-export var AccordionGridContext = /*#__PURE__*/React.createContext(null);