@pingux/astro 2.130.4-alpha.0 → 2.131.0-alpha.0

package/lib/cjs/components/GridList/GridList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const GridList: (props: any) => React.JSX.Element;
+export default GridList;

package/lib/cjs/components/GridList/GridList.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _useGridList2 = _interopRequireDefault(require("../../hooks/useGridList"));
+var _index = require("../../index");
+var _GridListRow = _interopRequireDefault(require("./GridListRow"));
+var _react2 = require("@emotion/react");
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var GridList = function GridList(props) {
+  var _context, _context2;
+  var ref = (0, _react.useRef)(null);
+  var _useGridList = (0, _useGridList2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+      ref: ref
+    })),
+    collectionProps = _useGridList.collectionProps,
+    gridListItemProps = _useGridList.gridListItemProps,
+    gridProps = _useGridList.gridProps,
+    state = _useGridList.state;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(gridProps, collectionProps), {
+    ref: ref,
+    className: "list",
+    variant: "gridList.container",
+    gap: "sm"
+  }), (0, _map["default"])(_context = (0, _concat["default"])(_context2 = []).call(_context2, (0, _from["default"])(state.collection))).call(_context, function (item) {
+    return (0, _react2.jsx)(_GridListRow["default"], (0, _extends2["default"])({
+      key: item.key,
+      item: item
+    }, gridListItemProps));
+  }));
+};
+var _default = GridList;
+exports["default"] = _default;

package/lib/cjs/components/GridList/GridList.mdx

@@ -0,0 +1,68 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/GridList" />
+
+# GridList
+
+The `GridList` component is used to display a list of items in a grid-like structure. It supports features like reordering, keyboard navigation, and drag-and-drop functionality.
+
+This component should:
+- Be used to display items in a structured grid format.
+- Support reordering and drag-and-drop functionality for enhanced interactivity.
+
+It shouldn’t be used for simple lists that do not require grid-like behavior or advanced interactions.
+
+### Required Components
+
+This component requires [Item].
+
+---
+
+## Accessibility
+
+This component adheres to the [WAI-ARIA Grid](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) accessibility guidelines.
+
+### Keyboard Navigation
+
+These keys provide additional functionality to the component:
+
+| Key Combination | Functionality                                                                                                    |
+| --------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `Tab`           | Moves focus to the next focusable element, within the row. (keyboardNavigationBehavior="tab")                    |
+| `Shift + Tab`   | Moves focus to the previous focusable element, within the row. (keyboardNavigationBehavior="tab")                |
+| `Arrow Keys`    | Navigates between items in the grid. (Up/Down in all modes, Left/Right in keyboardNavigationBehavior="arrow")    |
+| `Home`          | Moves focus to the first row in the grid.                                                                        |
+| `End`           | Moves focus to the last row in the grid.                                                                         |
+
+### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- The **`role="grid"`** attribute is used to indicate the grid structure.
+- The **`aria-label`** attribute provides an accessible name for the grid.
+- The **`role="row"`** attribute is used to indicate the row structure.
+- The **`role="gridcell"`** attribute is used to indicate the cell structure.
+- The **`aria-selected`** attribute indicates whether an item is selected.
+- The **`draggable`** attribute indicates whether an item is draggable.
+
+---
+
+## Examples
+
+### Default GridList
+
+```tsx
+import { GridList, Item } from '@pingux/astro';
+
+const items = [
+  { name: 'Item 1', key: 'item1' },
+  { name: 'Item 2', key: 'item2' },
+  { name: 'Item 3', key: 'item3' },
+];
+
+<GridList items={items}>
+  {item => (
+    <Item key={item.key} textValue={item.name}>
+      {item.name}
+    </Item>
+  )}
+</GridList>;

package/lib/cjs/components/GridList/GridList.stories.d.ts

@@ -0,0 +1,185 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: (props: any) => React.JSX.Element;
+    argTypes: {
+        isReorderable: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        selectedKeys: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        disabledKeys: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        defaultSelectedKeys: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        onSelectionChange: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        allowDuplicateSelectionEvents: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        autoFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        children: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        collection: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        disabledBehavior: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        disallowEmptySelection: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        disallowTypeAhead: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        escapeKeyBehavior: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        filter: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        getKey: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        initialFilterText: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        initialSelectedKeys: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        items: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        keyboardDelegate: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        keyboardNavigationBehavior: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        linkBehavior: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        onAction: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        ref: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        selectionBehavior: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        selectionMode: {
+            description: string;
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        shouldFocusWrap: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        shouldSelectOnPressUp: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            source: {
+                type: string;
+            };
+            page: () => React.JSX.Element;
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

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

@@ -0,0 +1,137 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactStately = require("react-stately");
+var _MinusIcon = _interopRequireDefault(require("@pingux/mdi-react/MinusIcon"));
+var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _GridList = _interopRequireDefault(require("./GridList.mdx"));
+var _gridListAttributes = require("./gridListAttributes");
+var _react2 = require("@emotion/react");
+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 _default = {
+  title: 'Components/GridList',
+  component: _index.GridList,
+  argTypes: _objectSpread({}, _gridListAttributes.gridListArgTypes),
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      },
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_GridList["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var items = [{
+  name: 'rhino',
+  key: 'rhino'
+}, {
+  name: 'lion',
+  key: 'lion'
+}, {
+  name: 'zebra',
+  key: 'zebra'
+}];
+var ExampleComponent = function ExampleComponent(_ref) {
+  var label = _ref.label;
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      alignItems: 'center'
+    },
+    gap: "sm"
+  }, (0, _react2.jsx)(_index.TextField, {
+    "aria-label": label,
+    ref: ref,
+    defaultValue: label,
+    "data-testid": "".concat(label, "-text-field")
+  }), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      alignItems: 'center'
+    },
+    gap: "md"
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "delete row"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MinusIcon["default"],
+    title: {
+      name: 'delete icon'
+    }
+  })), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "add row"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    title: {
+      name: 'add icon'
+    }
+  })), (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "more options",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MinusIcon["default"],
+    size: "md",
+    title: {
+      name: 'Dots Vertical Icon'
+    }
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
+    key: "edit"
+  }, "Edit"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "duplicate"
+  }, "Duplicate"), (0, _react2.jsx)(_reactStately.Item, {
+    key: "delete",
+    textValue: "delete"
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "critical.bright"
+  }, "Delete")))))));
+};
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.GridList, (0, _extends2["default"])({
+    items: items,
+    isReorderable: true,
+    keyboardNavigationBehavior: "tab"
+  }, args), function (item) {
+    return (0, _react2.jsx)(_reactStately.Item, {
+      textValue: item.name,
+      key: item.name,
+      "data-id": item.name
+    }, (0, _react2.jsx)(ExampleComponent, {
+      label: item.name,
+      key: item.name
+    }));
+  });
+};
+exports.Default = Default;

package/lib/cjs/components/GridList/GridList.styles.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    container: {
+        '&.is-focused': {
+            outline: string;
+        };
+        ':focus': {
+            outline: string;
+        };
+    };
+    rowContainer: {
+        alignItems: string;
+        alignContent: string;
+        '&.is-dragging': {
+            opacity: number;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,27 @@
+"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;
+var container = {
+  '&.is-focused': {
+    outline: 'none !important'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+var rowContainer = {
+  alignItems: 'center',
+  alignContent: 'center',
+  '&.is-dragging': {
+    opacity: 0.4
+  }
+};
+var _default = {
+  container: container,
+  rowContainer: rowContainer
+};
+exports["default"] = _default;

package/lib/cjs/components/GridList/GridList.test.d.ts

@@ -0,0 +1 @@
+export {};