@pingux/astro 2.71.0-alpha.0 → 2.71.0-alpha.2

package/lib/cjs/components/ListBox/ListBox.js

@@ -33,7 +33,7 @@ var _index = require("./index");
 var _ListBoxContext = require("./ListBoxContext");
 var _ListBoxSection = _interopRequireDefault(require("./ListBoxSection"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"];
+var _excluded = ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isCondensed", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -72,6 +72,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hasNoEmptySelection = props.hasNoEmptySelection,
     hasVirtualFocus = props.hasVirtualFocus,
     id = props.id,
+    isCondensed = props.isCondensed,
     isLoading = props.isLoading,
     isFocusedOnHover = props.isFocusedOnHover,
     isSelectedOnPressUp = props.isSelectedOnPressUp,
@@ -176,7 +177,8 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return (0, _react2.jsx)(_index.Option, {
         key: item.key,
         item: item,
-        hasVirtualFocus: hasVirtualFocus
+        hasVirtualFocus: hasVirtualFocus,
+        isCondensed: isCondensed
       });
     }
     if (type === collectionTypes.LOADER) {

package/lib/cjs/components/ListBox/ListBox.styles.js

@@ -33,8 +33,28 @@ listBox.option = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   '&.is-focused': {
     color: 'white',
     bg: 'active'
+  },
+  '&.is-condensed': {
+    '&.is-selected': {
+      pl: 'md',
+      color: 'text.primary',
+      fontWeight: 400
+    },
+    '&.is-focused': {
+      color: 'text.primary',
+      fontWeight: 400,
+      bg: 'white'
+    }
   }
 });
+listBox.checkboxIcon = {
+  '&.is-focus-visible': {
+    boxShadow: 'none',
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
+  }
+};
 listBox.selectField = {
   maxHeight: '200px',
   overflow: 'auto',

package/lib/cjs/components/ListBox/Option.js

@@ -15,9 +15,9 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _CircleSmallIcon = _interopRequireDefault(require("@pingux/mdi-react/CircleSmallIcon"));
 var _listbox = require("@react-aria/listbox");
@@ -27,16 +27,45 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _ListBoxContext = require("./ListBoxContext");
 var _react2 = require("@emotion/react");
-var _excluded = ["item", "hasVirtualFocus"],
+var _excluded = ["item", "hasVirtualFocus", "isCondensed"],
   _excluded2 = ["onPressStart", "onPressUp"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var UncheckedIcon = function UncheckedIcon(prop) {
+  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "variable-icon-title"
+  }, prop), (0, _react2.jsx)("title", {
+    id: "variable-icon-title"
+  }, "Unchecked Icon"), (0, _react2.jsx)("path", {
+    d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+  }));
+};
+var CheckedIcon = function CheckedIcon(prop) {
+  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "variable-icon-title"
+  }, prop), (0, _react2.jsx)("title", {
+    id: "variable-icon-title"
+  }, "Checked Icon"), (0, _react2.jsx)("path", {
+    d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+  }));
+};
 var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _state$selectionManag;
   var item = props.item,
     hasVirtualFocus = props.hasVirtualFocus,
+    isCondensed = props.isCondensed,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var key = item.key,
     itemProps = item.props,
@@ -54,24 +83,27 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useOption = (0, _listbox.useOption)(_objectSpread({
       key: key,
       shouldSelectOnPressUp: true,
-      shouldFocusOnHover: true,
-      shouldUseVirtualFocus: hasVirtualFocus,
+      shouldFocusOnHover: !isCondensed,
+      shouldUseVirtualFocus: isCondensed ? false : hasVirtualFocus,
       isVirtualized: true
     }, others), state, optionRef),
     optionProps = _useOption.optionProps,
     isDisabled = _useOption.isDisabled,
     isSelected = _useOption.isSelected,
-    isFocused = _useOption.isFocused;
+    isFocused = _useOption.isFocused,
+    isFocusVisible = _useOption.isFocusVisible;
   var focused = isFocused || (state === null || state === void 0 || (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
   var setFocusOnHover = function setFocusOnHover() {
-    if (!focused) {
+    if (!focused && !isCondensed) {
       state.selectionManager.setFocusedKey(item.key);
     }
   };
   var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
       isDisabled: isDisabled || isSeparator,
       isFocused: focused,
-      isSelected: isSelected
+      isSelected: isSelected,
+      isCondensed: isCondensed,
+      isFocusVisible: isFocusVisible
     }),
     classNames = _useStatusClasses.classNames;
   var updateActiveDescendant = (0, _MultivaluesContext.useMultivaluesContext)();
@@ -98,7 +130,14 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isSelected && (0, _react2.jsx)(_Icon["default"], {
+  }), isCondensed ? (0, _react2.jsx)(_Icon["default"], {
+    icon: isSelected ? CheckedIcon : UncheckedIcon,
+    color: "active",
+    size: "24px",
+    mr: "xs",
+    className: classNames,
+    variant: "listBox.checkboxIcon"
+  }) : isSelected && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"],
     title: {
       name: 'Circle Small Icon'