@pingux/astro 2.119.0-alpha.2 → 2.119.0-alpha.3

package/lib/cjs/components/Button/Buttons.styles.d.ts

@@ -712,6 +712,46 @@ declare const _default: {
         flexShrink: number;
         whiteSpace: string;
     };
+    paginationMenu: {
+        fontWeight: number;
+        lineHeight: string;
+        textDecoration: string;
+        display: string;
+        justifyContent: string;
+        width: string;
+        '&.is-current': {
+            cursor: string;
+            color: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        bg: string;
+        border: string;
+        borderColor: string;
+        color: string;
+        height: string;
+        padding: string;
+        '&.is-hovered': {
+            textDecoration: string;
+        };
+        fontSize: string;
+        fontFamily: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+        cursor: string;
+        minWidth: string;
+        outline: string;
+        alignItems: string;
+        borderRadius: string;
+        flexShrink: number;
+        whiteSpace: string;
+    };
     primary: {
         display: string;
         bg: string;

package/lib/cjs/components/Button/Buttons.styles.js

@@ -289,6 +289,9 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
   background: 'none',
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
+var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
+  fontWeight: 0
+});
 var _default = {
   colorBlock: colorBlock,
   colorBlockPrimary: colorBlockPrimary,
@@ -309,6 +312,7 @@ var _default = {
   inlinePrimaryWithIcon: inlinePrimaryWithIcon,
   inlineWithIcon: inlineWithIcon,
   link: link,
+  paginationMenu: paginationMenu,
   primary: primary,
   primaryWithIcon: primaryWithIcon,
   quiet: quiet,

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

@@ -140,6 +140,9 @@ export interface ExampleItemProps {
     id: string | number;
     hasSeparator?: boolean;
 }
+export declare const animals: {
+    name: string;
+}[];
 export declare const Default: {
     ({ ...args }: {
         [x: string]: any;

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

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
+exports["default"] = exports.animals = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
@@ -538,6 +538,7 @@ var animals = [{
 }, {
   name: 'Zebra'
 }];
+exports.animals = animals;
 var props = {
   disabledKeys: ['Snake']
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PaginationProps } from '../../types/pagination';
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+export default Pagination;

package/lib/cjs/components/Pagination/Pagination.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _ChevronLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronLeftIcon"));
+var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
+var _hooks = require("../../hooks");
+var _usePagination2 = _interopRequireDefault(require("../../hooks/usePagination"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["setOffsetCount", "offsetOptions"];
+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; }
+var RangeSelectPopover = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var state = props.state,
+    buttonProps = props.buttonProps;
+  var setOffsetCount = state.setOffsetCount,
+    offsetOptions = state.offsetOptions,
+    others = (0, _objectWithoutProperties2["default"])(state, _excluded);
+  var menuRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      flexGrow: 1
+    }
+  }, (0, _react2.jsx)(_index.PopoverMenu, {
+    ref: menuRef
+  }, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, buttonProps, {
+    variant: "paginationMenu"
+  }), state.popoverButtonString), (0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({
+    onSelectionChange: setOffsetCount,
+    selectionMode: "single"
+  }, others), (0, _map["default"])(offsetOptions).call(offsetOptions, function (option) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: option,
+      textValue: "".concat(option)
+    }, "Show", ' ', option, ' ', "Results");
+  })))));
+});
+var Pagination = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _usePagination = (0, _usePagination2["default"])(props),
+    state = _usePagination.state,
+    previousButtonProps = _usePagination.previousButtonProps,
+    nextButtonProps = _usePagination.nextButtonProps,
+    containerProps = _usePagination.containerProps,
+    offsetMenuProps = _usePagination.offsetMenuProps;
+  var paginationRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    isRow: true,
+    variant: "pagination.container"
+  }, containerProps, {
+    ref: paginationRef
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "pagination.wrapper",
+    isRow: true
+  }, (0, _react2.jsx)(RangeSelectPopover, (0, _extends2["default"])({}, offsetMenuProps, {
+    state: state
+  })), (0, _react2.jsx)(_index.Box, {
+    variant: "pagination.iconWrapper",
+    isRow: true
+  }, (0, _react2.jsx)(_index.IconButton, previousButtonProps, (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronLeftIcon["default"]
+  })), (0, _react2.jsx)(_index.IconButton, nextButtonProps, (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronRightIcon["default"]
+  })))));
+});
+var _default = Pagination;
+exports["default"] = _default;

package/lib/cjs/components/Pagination/Pagination.mdx

@@ -0,0 +1,68 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Pagination/Pagination" />
+
+# Pagination
+
+The Pagination component allows users to navigate through large datasets by dividing them into smaller, more manageable pages. It provides controls for navigating between pages and selecting the number of items displayed per page.
+
+### Features
+
+- Customizable offset options to control the number of items displayed per page.
+- Next/Previous navigation buttons for seamless page transitions.
+- Works in both controlled and uncontrolled states.
+- Integrates with `PaginationContext` for managing state.
+
+### Required Components
+
+This component requires the following components:
+- `PaginationProvider`
+- `ListView` (optional for displaying paginated data)
+
+### Accessibility
+
+This component adheres to the [WCAG 2.1 - 2.4.4 Link Purpose (In Context)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html) accessibility guidelines.
+
+#### Keyboard Navigation
+
+| Key           | Functions                          |
+|---------------|-----------------------------------|
+| Tab           | Moves focus between controls.    |
+| Enter         | Activates the focused control.   |
+
+#### Screen Readers
+
+This component uses the following attributes to assist screen readers:
+- **`aria-label`**: Provides an accessible name for the pagination controls.
+- **`aria-disabled`**: Indicates when navigation buttons are disabled.
+- **`aria-live`**: Updates screen readers with changes in pagination state.
+
+### Usage
+
+```tsx
+import { Pagination, PaginationProvider } from '@pingux/astro';
+
+<PaginationProvider>
+  <Pagination totalCount={250} />
+  <ListView
+    items={animals.slice(paginationState.firstRenderedIndex, paginationState.lastRenderedIndex).map(item => ({
+      name: item.name,
+      key: item.name,
+      id: item.name,
+    }))}
+  >
+    {(item) => (
+      <Item key={item.name}>
+        <ListViewItem
+          data={{
+            text: item.name,
+            icon: FormSelectIcon,
+          }}
+          iconProps={{
+            color: 'text.secondary',
+          }}
+        />
+      </Item>
+    )}
+  </ListView>
+</PaginationProvider>

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

@@ -0,0 +1,39 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../types/pagination").PaginationProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    argTypes: {
+        totalCount: {
+            control: {
+                type: string;
+            };
+        };
+        currentPageIndex: {
+            control: {
+                type: string;
+            };
+        };
+        offsetCount: {
+            control: {
+                type: string;
+            };
+        };
+        offsetOptions: {
+            control: {
+                type: string;
+            };
+        };
+        onPageIndexChange: {};
+        onOffsetCountChange: {};
+    };
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;
+export declare const WithListView: () => React.JSX.Element;
+export declare const Controlled: () => React.JSX.Element;
+export declare const CustomOptions: () => React.JSX.Element;

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

@@ -0,0 +1,159 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithListView = exports.Default = exports.CustomOptions = exports.Controlled = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _react = _interopRequireWildcard(require("react"));
+var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
+var _usePaginationState2 = _interopRequireDefault(require("../../hooks/usePaginationState"));
+var _index = require("../../index");
+var _ListView = require("../ListView/ListView.stories");
+var _Pagination = _interopRequireDefault(require("./Pagination.mdx"));
+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; }
+var _default = {
+  title: 'Components/Pagination',
+  component: _index.Pagination,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_Pagination["default"], null);
+      }
+    }
+  },
+  argTypes: {
+    totalCount: {
+      control: {
+        type: 'number'
+      }
+    },
+    currentPageIndex: {
+      control: {
+        type: 'number'
+      }
+    },
+    offsetCount: {
+      control: {
+        type: 'number'
+      }
+    },
+    offsetOptions: {
+      control: {
+        type: 'array'
+      }
+    },
+    onPageIndexChange: {},
+    onOffsetCountChange: {}
+  }
+};
+exports["default"] = _default;
+var ExampleComponent = function ExampleComponent() {
+  var _context;
+  var _usePaginationState = (0, _usePaginationState2["default"])(),
+    paginationState = _usePaginationState.paginationState;
+  return (0, _react2.jsx)(_index.ScrollBox, {
+    maxHeight: "400px"
+  }, (0, _react2.jsx)(_index.ListView, {
+    items: (0, _map["default"])(_context = (0, _slice["default"])(_ListView.animals).call(_ListView.animals, paginationState.firstRenderedIndex, paginationState.lastRenderedIndex + 1)).call(_context, function (_item) {
+      return {
+        name: _item.name,
+        key: _item.name,
+        id: _item.name
+      };
+    })
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, (0, _react2.jsx)(_index.ListViewItem, {
+      data: {
+        text: item.name,
+        icon: _FormSelectIcon["default"]
+      },
+      iconProps: {
+        color: 'text.secondary'
+      }
+    }));
+  }));
+};
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: '350px',
+      gap: 'sm'
+    }
+  }, (0, _react2.jsx)(_index.Pagination, (0, _extends2["default"])({
+    totalCount: 250
+  }, args)));
+};
+exports.Default = Default;
+var WithListView = function WithListView() {
+  return (0, _react2.jsx)(_index.PaginationProvider, null, (0, _react2.jsx)(_index.Box, {
+    gap: "sm"
+  }, (0, _react2.jsx)(ExampleComponent, null), (0, _react2.jsx)(_index.Pagination, {
+    totalCount: _ListView.animals.length
+  })));
+};
+exports.WithListView = WithListView;
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(24),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(10),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    offsetCount = _useState4[0],
+    setOffsetCount = _useState4[1];
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: '350px',
+      gap: 'sm'
+    }
+  }, (0, _react2.jsx)(_index.Button, {
+    onPress: function onPress() {
+      return setIndex(0);
+    }
+  }, "Reset Index"), (0, _react2.jsx)(_index.Pagination, {
+    totalCount: 250,
+    currentPageIndex: index,
+    offsetCount: offsetCount,
+    onOffsetCountChange: setOffsetCount,
+    onPageIndexChange: function onPageIndexChange(i) {
+      setIndex(i);
+    }
+  }));
+};
+exports.Controlled = Controlled;
+var CustomOptions = function CustomOptions() {
+  var _useState5 = (0, _react.useState)(24),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    index = _useState6[0],
+    setIndex = _useState6[1];
+  var testFunc = function testFunc(key) {
+    setIndex(key);
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: '350px',
+      gap: 'sm'
+    }
+  }, (0, _react2.jsx)(_index.Pagination, {
+    totalCount: 250,
+    currentPageIndex: index,
+    offsetOptions: [10, 15, 25, 50, 100],
+    onPageIndexChange: function onPageIndexChange(key) {
+      testFunc(key);
+    }
+  }));
+};
+exports.CustomOptions = CustomOptions;

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

@@ -0,0 +1,17 @@
+declare const _default: {
+    container: {
+        alignItems: string;
+        minWidth: string;
+        with: string;
+        ml: string;
+        flexGrow: number;
+    };
+    iconWrapper: {
+        ml: string;
+    };
+    wrapper: {
+        ml: string;
+        alignItems: string;
+    };
+};
+export default _default;

package/lib/cjs/components/Pagination/Pagination.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 = {
+  alignItems: 'center',
+  minWidth: '100%',
+  "with": '100%',
+  ml: 'auto',
+  flexGrow: 1
+};
+var iconWrapper = {
+  ml: 'md'
+};
+var wrapper = {
+  ml: 'auto',
+  alignItems: 'center'
+};
+var _default = {
+  container: container,
+  iconWrapper: iconWrapper,
+  wrapper: wrapper
+};
+exports["default"] = _default;

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

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