@pingux/astro 2.52.0-alpha.0 → 2.52.0-alpha.1

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

@@ -14,12 +14,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Required = exports.Indeterminate = exports.HelperText = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.Required = exports.Indeterminate = exports.HelperText = exports.ExpandableAndToggleableIndeterminate = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
+var _MenuRightIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuRightIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -121,19 +123,139 @@ var HelperText = function HelperText() {
   });
 };
 exports.HelperText = HelperText;
+var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndeterminate() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isReadOnly = _useState2[0],
+    setIsReadOnly = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  // Whether the parent checkbox is indeterminate (default is true for our example)
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isIndeterminate = _useState6[0],
+    setIsIndeterminate = _useState6[1];
+  // Whether the parent checkbox should be checked, this is set independently from indeterminism
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isCompleted = _useState8[0],
+    setIsCompleted = _useState8[1];
+  // The state of the sub-checkboxes
+  var _useState9 = (0, _react.useState)([{
+      label: 'Apple Chunks',
+      isSelected: true
+    }, {
+      label: 'Blueberries',
+      isSelected: false
+    }, {
+      label: 'Grapes',
+      isSelected: false
+    }, {
+      label: 'Strawberry Slices',
+      isSelected: true
+    }]),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    subCheckboxes = _useState10[0],
+    setSubCheckboxes = _useState10[1];
+
+  // Determine which checkbox needs its state updated
+  var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {
+    var changeAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var newSubCheckboxes = (0, _map["default"])(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+      if (changeAll || index === changedIndex) return _objectSpread(_objectSpread({}, checkbox), {}, {
+        isSelected: isSelected
+      });
+      return checkbox;
+    });
+    setSubCheckboxes(newSubCheckboxes);
+  };
+
+  // Update all sub-checkbox states when the parent checkbox is pressed
+  var handleParentCheckboxChange = function handleParentCheckboxChange(isSelected) {
+    handleSubCheckboxChange(isSelected, null, true);
+  };
+  (0, _react.useEffect)(function () {
+    // Determine if all sub-checkboxes are selected / unselected or if there is a mix
+    // and update the parent checkbox
+    if ((0, _every["default"])(subCheckboxes).call(subCheckboxes, function (item) {
+      return item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(true);
+    } else if ((0, _every["default"])(subCheckboxes).call(subCheckboxes, function (item) {
+      return !item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(false);
+    } else {
+      setIsIndeterminate(true);
+      setIsCompleted(false);
+    }
+  }, [isIndeterminate, subCheckboxes]);
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.SwitchField, {
+    isSelected: isReadOnly,
+    label: "Is Read Only",
+    onChange: setIsReadOnly,
+    value: "my-switch"
+  }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.IconButtonToggle, {
+    toggledIcon: _MenuDownIcon["default"],
+    defaultIcon: _MenuRightIcon["default"],
+    onToggle: setIsExpanded,
+    isToggled: isExpanded,
+    buttonProps: {
+      'aria-label': isExpanded ? 'menu down' : 'menu up',
+      'aria-controls': 'expanded-checkboxes',
+      'aria-expanded': isExpanded
+    },
+    iconProps: {
+      size: 'sm'
+    }
+  }), isReadOnly ? (0, _react2.jsx)(_index.Text, null, "Fruit Salad Recipe") : (0, _react2.jsx)(_index.CheckboxField, {
+    label: "Fruit Salad Recipe",
+    isIndeterminate: isIndeterminate,
+    isSelected: isCompleted,
+    onChange: handleParentCheckboxChange
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
+    ml: "sm",
+    label: subCheckboxes.length,
+    variant: "countNeutral"
+  }))), (0, _react2.jsx)(_index.Box, {
+    ml: "50px",
+    id: "expanded-checkboxes"
+  }, isExpanded && (0, _map["default"])(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center",
+      height: "24px"
+    }, isReadOnly ? (0, _react2.jsx)(_index.Text, null, checkbox.label) : (0, _react2.jsx)(_index.CheckboxField, {
+      key: checkbox.label,
+      label: checkbox.label,
+      isSelected: checkbox.isSelected,
+      onChange: function onChange(isSelected) {
+        return handleSubCheckboxChange(isSelected, index);
+      }
+    }));
+  })));
+};
+exports.ExpandableAndToggleableIndeterminate = ExpandableAndToggleableIndeterminate;
 var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isIndeterminate = _useState2[0],
-    setIsIndeterminate = _useState2[1];
+  var _useState11 = (0, _react.useState)(true),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    isIndeterminate = _useState12[0],
+    setIsIndeterminate = _useState12[1];
   // Whether the parent checkbox should be checked, this is set independently from indeterminism
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isCompleted = _useState4[0],
-    setIsCompleted = _useState4[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    isCompleted = _useState14[0],
+    setIsCompleted = _useState14[1];
   // The state of the sub-checkboxes
-  var _useState5 = (0, _react.useState)([{
+  var _useState15 = (0, _react.useState)([{
       label: 'Apple Chunks',
       isSelected: true
     }, {
@@ -146,9 +268,9 @@ var Indeterminate = function Indeterminate() {
       label: 'Strawberry Slices',
       isSelected: true
     }]),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    subCheckboxes = _useState6[0],
-    setSubCheckboxes = _useState6[1];
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    subCheckboxes = _useState16[0],
+    setSubCheckboxes = _useState16[1];
 
   // Determine which checkbox needs its state updated
   var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -13,8 +13,10 @@ import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 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) { _defineProperty(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; }
 import React, { useEffect, useState } from 'react';
+import MenuDown from '@pingux/mdi-react/MenuDownIcon';
+import MenuRight from '@pingux/mdi-react/MenuRightIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, CheckboxField, Link, Text } from '../../index';
+import { Badge, Box, CheckboxField, IconButtonToggle, Link, SwitchField, Text } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusArgTypes } from '../../utils/docUtils/statusProp';
@@ -104,19 +106,138 @@ export var HelperText = function HelperText() {
     label: "Click me"
   });
 };
+export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndeterminate() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isReadOnly = _useState2[0],
+    setIsReadOnly = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
+  // Whether the parent checkbox is indeterminate (default is true for our example)
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isIndeterminate = _useState6[0],
+    setIsIndeterminate = _useState6[1];
+  // Whether the parent checkbox should be checked, this is set independently from indeterminism
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isCompleted = _useState8[0],
+    setIsCompleted = _useState8[1];
+  // The state of the sub-checkboxes
+  var _useState9 = useState([{
+      label: 'Apple Chunks',
+      isSelected: true
+    }, {
+      label: 'Blueberries',
+      isSelected: false
+    }, {
+      label: 'Grapes',
+      isSelected: false
+    }, {
+      label: 'Strawberry Slices',
+      isSelected: true
+    }]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    subCheckboxes = _useState10[0],
+    setSubCheckboxes = _useState10[1];
+
+  // Determine which checkbox needs its state updated
+  var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {
+    var changeAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var newSubCheckboxes = _mapInstanceProperty(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+      if (changeAll || index === changedIndex) return _objectSpread(_objectSpread({}, checkbox), {}, {
+        isSelected: isSelected
+      });
+      return checkbox;
+    });
+    setSubCheckboxes(newSubCheckboxes);
+  };
+
+  // Update all sub-checkbox states when the parent checkbox is pressed
+  var handleParentCheckboxChange = function handleParentCheckboxChange(isSelected) {
+    handleSubCheckboxChange(isSelected, null, true);
+  };
+  useEffect(function () {
+    // Determine if all sub-checkboxes are selected / unselected or if there is a mix
+    // and update the parent checkbox
+    if (_everyInstanceProperty(subCheckboxes).call(subCheckboxes, function (item) {
+      return item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(true);
+    } else if (_everyInstanceProperty(subCheckboxes).call(subCheckboxes, function (item) {
+      return !item.isSelected;
+    })) {
+      setIsIndeterminate(false);
+      setIsCompleted(false);
+    } else {
+      setIsIndeterminate(true);
+      setIsCompleted(false);
+    }
+  }, [isIndeterminate, subCheckboxes]);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SwitchField, {
+    isSelected: isReadOnly,
+    label: "Is Read Only",
+    onChange: setIsReadOnly,
+    value: "my-switch"
+  }), ___EmotionJSX("br", null), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(IconButtonToggle, {
+    toggledIcon: MenuDown,
+    defaultIcon: MenuRight,
+    onToggle: setIsExpanded,
+    isToggled: isExpanded,
+    buttonProps: {
+      'aria-label': isExpanded ? 'menu down' : 'menu up',
+      'aria-controls': 'expanded-checkboxes',
+      'aria-expanded': isExpanded
+    },
+    iconProps: {
+      size: 'sm'
+    }
+  }), isReadOnly ? ___EmotionJSX(Text, null, "Fruit Salad Recipe") : ___EmotionJSX(CheckboxField, {
+    label: "Fruit Salad Recipe",
+    isIndeterminate: isIndeterminate,
+    isSelected: isCompleted,
+    onChange: handleParentCheckboxChange
+  }), ___EmotionJSX(Box, null, ___EmotionJSX(Badge, {
+    ml: "sm",
+    label: subCheckboxes.length,
+    variant: "countNeutral"
+  }))), ___EmotionJSX(Box, {
+    ml: "50px",
+    id: "expanded-checkboxes"
+  }, isExpanded && _mapInstanceProperty(subCheckboxes).call(subCheckboxes, function (checkbox, index) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center",
+      height: "24px"
+    }, isReadOnly ? ___EmotionJSX(Text, null, checkbox.label) : ___EmotionJSX(CheckboxField, {
+      key: checkbox.label,
+      label: checkbox.label,
+      isSelected: checkbox.isSelected,
+      onChange: function onChange(isSelected) {
+        return handleSubCheckboxChange(isSelected, index);
+      }
+    }));
+  })));
+};
 export var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isIndeterminate = _useState2[0],
-    setIsIndeterminate = _useState2[1];
+  var _useState11 = useState(true),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isIndeterminate = _useState12[0],
+    setIsIndeterminate = _useState12[1];
   // Whether the parent checkbox should be checked, this is set independently from indeterminism
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isCompleted = _useState4[0],
-    setIsCompleted = _useState4[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isCompleted = _useState14[0],
+    setIsCompleted = _useState14[1];
   // The state of the sub-checkboxes
-  var _useState5 = useState([{
+  var _useState15 = useState([{
       label: 'Apple Chunks',
       isSelected: true
     }, {
@@ -129,9 +250,9 @@ export var Indeterminate = function Indeterminate() {
       label: 'Strawberry Slices',
       isSelected: true
     }]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    subCheckboxes = _useState6[0],
-    setSubCheckboxes = _useState6[1];
+    _useState16 = _slicedToArray(_useState15, 2),
+    subCheckboxes = _useState16[0],
+    setSubCheckboxes = _useState16[1];
 
   // Determine which checkbox needs its state updated
   var handleSubCheckboxChange = function handleSubCheckboxChange(isSelected, changedIndex) {

package/package.json

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