@pingux/astro 1.2.1 → 1.3.2-alpha.0

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.WithoutStatusIndicator = exports.AsyncLoading = exports.DynamicItems = exports.HelperText = exports.NoOptionsAvailable = exports.DisabledOptions = exports.DisabledField = exports.WithNoneOption = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.WithCustomHeight = exports.WithSections = exports.Default = exports["default"] = void 0;
+exports.WithoutStatusIndicator = exports.AsyncLoading = exports.DynamicItems = exports.HelperText = exports.NoOptionsAvailable = exports.DisabledOptions = exports.DisabledField = exports.WithNoneOption = exports.Controlled = exports.FloatLabel = exports.WithCustomHeight = exports.WithSections = exports.Default = exports["default"] = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
@@ -42,8 +42,6 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _constants = require("../Label/constants");
 
-var _Box = _interopRequireDefault(require("../Box"));
-
 var _react2 = require("@emotion/react");
 
 var _context, _context2;
@@ -239,55 +237,6 @@ var FloatLabel = function FloatLabel() {
 
 exports.FloatLabel = FloatLabel;
 
-var LeftLabel = function LeftLabel() {
-  return (0, _react2.jsx)(_Box["default"], {
-    gap: "xl",
-    width: "100%"
-  }, (0, _react2.jsx)(_index.SelectField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    labelMode: "left"
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
-    key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
-    key: "yellow"
-  }, "Yellow")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Example Label that is much longer than the previous one",
-    labelMode: "left"
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
-    key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
-    key: "yellow"
-  }, "Yellow")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Example label with set width",
-    labelMode: "left",
-    containerProps: {
-      sx: {
-        gridTemplateColumns: '120px auto'
-      }
-    }
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
-    key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
-    key: "yellow"
-  }, "Yellow")));
-};
-
-exports.LeftLabel = LeftLabel;
-LeftLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
-    }
-  }
-};
-
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('yellow'),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -355,7 +304,7 @@ var DisabledOptions = function DisabledOptions() {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"
-  }, "Blue (disabled)"), (0, _react2.jsx)(_index.Item, {
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
     key: "yellow"
   }, "Yellow"));
 };
@@ -365,8 +314,7 @@ exports.DisabledOptions = DisabledOptions;
 var NoOptionsAvailable = function NoOptionsAvailable() {
   return (0, _react2.jsx)(_index.SelectField, {
     label: "Select an option...",
-    isDisabled: true,
-    defaultText: "No options available"
+    placeholder: "No options available"
   });
 };
 

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -80,6 +80,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       name = props.name,
       placeholder = props.placeholder,
       status = props.status,
+      slots = props.slots,
       columnStyleProps = props.columnStyleProps,
       fieldContainerProps = props.fieldContainerProps,
       fieldControlProps = props.fieldControlProps,
@@ -114,7 +115,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null
-  }))));
+  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     variant: "forms.input.wrapper"
@@ -181,6 +182,12 @@ SelectFieldBase.propTypes = {
     })
   }),
 
+  /** Provides a way to insert markup in specified places. */
+  slots: _propTypes["default"].shape({
+    /** The given node will be inserted into the field container. */
+    inContainer: _propTypes["default"].node
+  }),
+
   /** Control for interaction with SelectField */
   trigger: _propTypes["default"].node,
 

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.ContentSlots = exports.TabPanelProps = exports.Orientation = exports.CustomTabLine = exports.DisabledAllTabs = exports.DisabledSingleTab = exports.Centered = exports.WithTooltips = exports.WithIcon = exports.Controlled = exports.Uncontrolled = exports["default"] = void 0;
+exports.ContentSlots = exports.TabPanelProps = exports.CustomTabLine = exports.DisabledAllTabs = exports.DisabledSingleTab = exports.Centered = exports.WithTooltips = exports.WithIcon = exports.Controlled = exports.Uncontrolled = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -212,20 +212,6 @@ var CustomTabLine = function CustomTabLine() {
 
 exports.CustomTabLine = CustomTabLine;
 
-var Orientation = function Orientation() {
-  return (0, _react2.jsx)(_Tabs["default"], {
-    orientation: "vertical",
-    items: tabs
-  }, function (item) {
-    return (0, _react2.jsx)(_Tab["default"], {
-      key: item.name,
-      title: item.name
-    }, item.children);
-  });
-};
-
-exports.Orientation = Orientation;
-
 var TabPanelProps = function TabPanelProps() {
   return (0, _react2.jsx)(_Tabs["default"], {
     tabPanelProps: {

package/lib/cjs/context/NavBarContext/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.useNavBarContext = exports.NavBarContext = void 0;
+
+var _react = require("react");
+
+var NavBarContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.NavBarContext = NavBarContext;
+
+var useNavBarContext = function useNavBarContext() {
+  return (0, _react.useContext)(NavBarContext);
+};
+
+exports.useNavBarContext = useNavBarContext;

package/lib/cjs/hooks/index.js

@@ -64,6 +64,13 @@ _Object$defineProperty(exports, "usePropWarning", {
   }
 });
 
+_Object$defineProperty(exports, "useNavBarPress", {
+  enumerable: true,
+  get: function get() {
+    return _useNavBarPress["default"];
+  }
+});
+
 _Object$defineProperty(exports, "useRockerButton", {
   enumerable: true,
   get: function get() {
@@ -108,6 +115,8 @@ var _useOverlayPanelState = _interopRequireDefault(require("./useOverlayPanelSta
 
 var _usePropWarning = _interopRequireDefault(require("./usePropWarning"));
 
+var _useNavBarPress = _interopRequireDefault(require("./useNavBarPress"));
+
 var _useRockerButton = _interopRequireDefault(require("./useRockerButton"));
 
 var _useSelectField = _interopRequireDefault(require("./useSelectField"));

package/lib/cjs/hooks/useField/useField.js

@@ -186,8 +186,8 @@ var useField = function useField() {
   }),
       focusWithinProps = _useFocusWithin.focusWithinProps;
 
-  var isFloatLabel = labelMode === _constants.modes.FLOAT;
-  var isLeftLabel = labelMode === _constants.modes.LEFT;
+  var isFloatLabel = labelMode === _constants.modes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.FLOAT;
+  var isLeftLabel = labelMode === _constants.modes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === _constants.modes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
   var _useStatusClasses2 = (0, _hooks.useStatusClasses)(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {

package/lib/cjs/hooks/useNavBarPress/index.js

@@ -0,0 +1,18 @@
+"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
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useNavBarPress["default"];
+  }
+});
+
+var _useNavBarPress = _interopRequireDefault(require("./useNavBarPress"));

package/lib/cjs/hooks/useNavBarPress/useNavBarPress.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+/**
+ * A custom hook that will call an onPressCallback function, if the function is provided.
+ * @param {Object} params The accepted parameters object
+ * @param {string} props.key The unique identifier that is assigned to the element being pressed
+ * @param {Object} state The state object tracking selected keys
+ * @param {function} state.setSelectedKeys The function that sets the selected keys
+ * @callback props.onPressCallback The callback that will be called only if provided
+ */
+var useNavBarPress = function useNavBarPress(_ref, state) {
+  var key = _ref.key,
+      onPressCallback = _ref.onPressCallback;
+  var setSelectedKeys = state.setSelectedKeys;
+
+  var onNavPress = function onNavPress() {
+    setSelectedKeys(key);
+
+    if (onPressCallback) {
+      onPressCallback();
+    }
+  };
+
+  return {
+    onNavPress: onNavPress
+  };
+};
+
+var _default = useNavBarPress;
+exports["default"] = _default;

package/lib/cjs/hooks/useNavBarPress/useNavBarPress.test.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _ = _interopRequireDefault(require("./"));
+
+var key = 'testKey';
+test('using the onPress prop works as a callback', function () {
+  var onPress = jest.fn();
+  var setSelectedKeys = jest.fn();
+
+  var _renderHook = (0, _reactHooks.renderHook)(function () {
+    return (0, _["default"])({
+      key: key,
+      onPressCallback: onPress
+    }, {
+      setSelectedKeys: setSelectedKeys
+    });
+  }),
+      result = _renderHook.result;
+
+  result.current.onNavPress();
+  expect(onPress).toHaveBeenCalled();
+});
+test('if no onPress prop there is no callback', function () {
+  var onPress = jest.fn();
+  var setSelectedKeys = jest.fn();
+
+  var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+    return (0, _["default"])({
+      key: key
+    }, {
+      setSelectedKeys: setSelectedKeys
+    });
+  }),
+      result = _renderHook2.result;
+
+  result.current.onNavPress();
+  expect(onPress).not.toHaveBeenCalled();
+});