@pingux/astro 1.17.0-alpha.4 → 1.17.0-alpha.5

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

@@ -16,10 +16,10 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Default = exports.Controlled = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _ = require("../..");
@@ -34,7 +34,9 @@ var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
   argTypes: {
-    direction: {},
+    direction: {
+      defaultValue: 'bottom'
+    },
     hasAutoFocus: {},
     hasNoStatusIndicator: {},
     isDisabled: {},
@@ -118,7 +120,26 @@ var items = [{
   key: 'Shark'
 }];
 
+var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
+  return {
+    marginRight: direction === 'right' && isOpen ? mr : 0,
+    marginLeft: direction === 'left' && isOpen ? ml : 0,
+    marginTop: direction === 'top' && isOpen ? mt : 0
+  };
+};
+
 var Default = function Default(args) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (// const items = [
     // { id: 1, name: 'Aardvark', key: 'Aardvark' },
     // { id: 2, name: 'Kangaroo', key: 'Kangaroo' },
@@ -128,9 +149,14 @@ var Default = function Default(args) {
     // { id: 6, name: 'Orangutan', key: 'Orangutan' },
     // { id: 7, name: 'Shark', key: 'Shark' },
     // ];
-    (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+    , {
+      style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+    }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
       items: items
-    }, args), function (item) {
+    }, args, {
+      onOpenChange: onOpenChange
+    }), function (item) {
       return (0, _react2.jsx)(_.Item, {
         key: item.key,
         "data-id": item.name
@@ -142,10 +168,26 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var WithCustomValues = function WithCustomValues(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     items: items,
     mode: "non-restrictive"
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -161,10 +203,26 @@ WithCustomValues.argTypes = {
 };
 
 var WithDisabledKeys = function WithDisabledKeys(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     disabledKeys: ['Aardvark'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -175,10 +233,26 @@ var WithDisabledKeys = function WithDisabledKeys(args) {
 exports.WithDisabledKeys = WithDisabledKeys;
 
 var Uncontrolled = function Uncontrolled(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     defaultSelectedKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -189,17 +263,32 @@ var Uncontrolled = function Uncontrolled(args) {
 exports.Uncontrolled = Uncontrolled;
 
 var Controlled = function Controlled(args) {
-  var _useState = (0, _react.useState)(['Aardvark', 'Snake']),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
+  var _useState9 = (0, _react.useState)(['Aardvark', 'Snake']),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isOpen = _useState12[0],
+      setIsOpen = _useState12[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
 
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     label: "Field Label"
   }, args, {
     items: items,
     onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenChange
   }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
@@ -211,6 +300,17 @@ var Controlled = function Controlled(args) {
 exports.Controlled = Controlled;
 
 var WithCustomSize = function WithCustomSize(args) {
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      isOpen = _useState14[0],
+      setIsOpen = _useState14[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (0, _react2.jsx)(_.Box, {
     sx: {
       width: '100%',
@@ -219,9 +319,14 @@ var WithCustomSize = function WithCustomSize(args) {
     }
   }, (0, _react2.jsx)(_.Box, {
     width: 300
-  }, (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name
@@ -232,10 +337,26 @@ var WithCustomSize = function WithCustomSize(args) {
 exports.WithCustomSize = WithCustomSize;
 
 var WithReadOnlyValues = function WithReadOnlyValues(args) {
-  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      isOpen = _useState16[0],
+      setIsOpen = _useState16[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
     readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return (0, _react2.jsx)(_.Item, {
       key: item.key,
       "data-id": item.name

package/lib/cjs/styles/variants/buttons.js

@@ -440,7 +440,8 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'accent.95',
   '&.is-selected': {
     bg: 'active',
-    color: 'white'
+    color: 'white',
+    zIndex: '1'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Box, Item, MultivaluesField, OverlayProvider } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -7,7 +7,9 @@ export default {
   title: 'Form/MultivaluesField',
   component: MultivaluesField,
   argTypes: {
-    direction: {},
+    direction: {
+      defaultValue: 'bottom'
+    },
     hasAutoFocus: {},
     hasNoStatusIndicator: {},
     isDisabled: {},
@@ -89,7 +91,27 @@ var items = [{
   name: 'Shark',
   key: 'Shark'
 }];
+
+var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
+  return {
+    marginRight: direction === 'right' && isOpen ? mr : 0,
+    marginLeft: direction === 'left' && isOpen ? ml : 0,
+    marginTop: direction === 'top' && isOpen ? mt : 0
+  };
+};
+
 export var Default = function Default(args) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return (// const items = [
     // { id: 1, name: 'Aardvark', key: 'Aardvark' },
     // { id: 2, name: 'Kangaroo', key: 'Kangaroo' },
@@ -99,9 +121,14 @@ export var Default = function Default(args) {
     // { id: 6, name: 'Orangutan', key: 'Orangutan' },
     // { id: 7, name: 'Shark', key: 'Shark' },
     // ];
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+    ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+    , {
+      style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+    }, ___EmotionJSX(MultivaluesField, _extends({
       items: items
-    }, args), function (item) {
+    }, args, {
+      onOpenChange: onOpenChange
+    }), function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
         "data-id": item.name
@@ -110,10 +137,26 @@ export var Default = function Default(args) {
   );
 };
 export var WithCustomValues = function WithCustomValues(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     items: items,
     mode: "non-restrictive"
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -126,10 +169,26 @@ WithCustomValues.argTypes = {
   }
 };
 export var WithDisabledKeys = function WithDisabledKeys(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     disabledKeys: ['Aardvark'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -137,10 +196,26 @@ export var WithDisabledKeys = function WithDisabledKeys(args) {
   }));
 };
 export var Uncontrolled = function Uncontrolled(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     defaultSelectedKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -148,17 +223,32 @@ export var Uncontrolled = function Uncontrolled(args) {
   }));
 };
 export var Controlled = function Controlled(args) {
-  var _useState = useState(['Aardvark', 'Snake']),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKeys = _useState2[0],
-      setSelectedKeys = _useState2[1];
+  var _useState9 = useState(['Aardvark', 'Snake']),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isOpen = _useState12[0],
+      setIsOpen = _useState12[1];
+
+  var direction = args.direction;
 
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     label: "Field Label"
   }, args, {
     items: items,
     onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenChange
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
@@ -167,6 +257,17 @@ export var Controlled = function Controlled(args) {
   }));
 };
 export var WithCustomSize = function WithCustomSize(args) {
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isOpen = _useState14[0],
+      setIsOpen = _useState14[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
   return ___EmotionJSX(Box, {
     sx: {
       width: '100%',
@@ -175,9 +276,14 @@ export var WithCustomSize = function WithCustomSize(args) {
     }
   }, ___EmotionJSX(Box, {
     width: 300
-  }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  }, ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name
@@ -185,10 +291,26 @@ export var WithCustomSize = function WithCustomSize(args) {
   }))));
 };
 export var WithReadOnlyValues = function WithReadOnlyValues(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isOpen = _useState16[0],
+      setIsOpen = _useState16[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
     readOnlyKeys: ['Aardvark', 'Snake'],
     items: items
-  }, args), function (item) {
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       "data-id": item.name

package/lib/styles/variants/buttons.js

@@ -420,7 +420,8 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'accent.95',
   '&.is-selected': {
     bg: 'active',
-    color: 'white'
+    color: 'white',
+    zIndex: '1'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.17.0-alpha.4",
+  "version": "1.17.0-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",