@salt-ds/lab 1.0.0-alpha.25 → 1.0.0-alpha.27

package/dist-cjs/pagination/GoToInput.js

@@ -7,90 +7,68 @@ var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var usePaginationContext = require('./usePaginationContext.js');
-var utils = require('./utils.js');
-var FormFieldLegacy = require('../form-field-legacy/FormFieldLegacy.js');
-require('../form-field-legacy/FormLabel.js');
-var InputLegacy = require('../input-legacy/InputLegacy.js');
-require('../input-legacy/StaticInputAdornment.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var GoToInput$1 = require('./GoToInput.css.js');
 
+const withBaseName = core.makePrefixer("saltGoToInput");
 const GoToInput = React.forwardRef(
-  ({
+  function GoToInput2({
     className,
-    id: idProp,
+    inputRef,
+    inputVariant = "primary",
     label = "Go to",
-    FormFieldProps: { ...restFormFieldLegacyProps } = {},
     ...restProps
-  }, forwardedRef) => {
-    const { compact, count, onPageChange, paginatorElement } = usePaginationContext.usePaginationContext();
-    const id = core.useId(idProp);
-    const rootRef = React.useRef(null);
-    const forkedRef = core.useForkRef(rootRef, forwardedRef);
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-go-to-input",
+      css: GoToInput$1,
+      window: targetWindow
+    });
+    const { count, onPageChange } = usePaginationContext.usePaginationContext();
     const [inputValue, setInputValue] = React.useState("");
-    const onChange = React.useCallback(
-      (event) => {
-        setInputValue(event.target.value);
-      },
-      [setInputValue]
-    );
+    const onChange = (event) => {
+      setInputValue(event.target.value);
+    };
     const onKeyDown = (event) => {
       if (event.key === "Enter") {
         const pageValue = Number(inputValue);
         if (!inputValue.startsWith("0") && !isNaN(pageValue) && pageValue > 0 && pageValue <= count) {
-          onPageChange(pageValue);
+          onPageChange(event, pageValue);
         }
         setInputValue("");
       }
     };
-    const onBlur = React.useCallback(() => {
+    const onBlur = () => {
       setInputValue("");
-    }, [setInputValue]);
-    React.useEffect(() => {
-      if (compact) {
-        setInputValue("");
-      }
-    }, [compact]);
-    const [position, setPosition] = React.useState();
-    core.useIsomorphicLayoutEffect(() => {
-      if (paginatorElement && !compact && rootRef.current) {
-        setPosition(
-          rootRef.current.compareDocumentPosition(paginatorElement) === Node.DOCUMENT_POSITION_PRECEDING ? "right" : "left"
-        );
-      }
-    }, [paginatorElement, compact, rootRef.current]);
-    if (compact) {
-      return null;
-    }
+    };
     const widthCh = `${`${count}`.length}ch`;
-    return /* @__PURE__ */ jsxRuntime.jsx("span", {
-      className: clsx.clsx(
-        utils.withBaseName("goToInputWrapper"),
-        { [utils.withBaseName(`${position}GoToInput`)]: position },
-        className
-      ),
-      ref: forkedRef,
-      children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldLegacy.FormFieldLegacy, {
-        className: utils.withBaseName("goToInputField"),
-        fullWidth: false,
-        label,
-        labelPlacement: "left",
-        ...restFormFieldLegacyProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
-          className: clsx.clsx(utils.withBaseName("goToInput"), {
-            [utils.withBaseName("goToInputFixed")]: count < 100
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, {
+      labelPlacement: "left",
+      className: clsx.clsx(withBaseName(), className),
+      ref,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, {
+          children: label
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Input, {
+          className: clsx.clsx(withBaseName("input"), {
+            [withBaseName("inputDefaultSize")]: count < 100
           }),
-          id,
+          ref: inputRef,
           inputProps: {
-            "aria-labelledby": id,
-            "aria-label": `Page, ${count} total`,
             style: { width: widthCh }
           },
           onBlur,
           onChange,
           onKeyDown,
           value: inputValue,
-          textAlign: "center"
+          textAlign: "center",
+          variant: inputVariant
         })
-      })
+      ]
     });
   }
 );

package/dist-cjs/pagination/GoToInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef, useId, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\nimport { withBaseName } from \"./utils\";\nimport {\n  FormFieldLegacy as FormField,\n  FormFieldLegacyProps as FormFieldProps,\n} from \"../form-field-legacy\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  label?: string;\n  FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const GoToInput = forwardRef<HTMLSpanElement, GoToInputProps>(\n  (\n    {\n      className,\n      id: idProp,\n      label = \"Go to\",\n      FormFieldProps: { ...restFormFieldLegacyProps } = {},\n      ...restProps\n    },\n\n    forwardedRef\n  ) => {\n    const { compact, count, onPageChange, paginatorElement } =\n      usePaginationContext();\n\n    const id = useId(idProp);\n\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const forkedRef = useForkRef(rootRef, forwardedRef);\n\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n      (event) => {\n        setInputValue(event.target.value);\n      },\n      [setInputValue]\n    );\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = useCallback(() => {\n      setInputValue(\"\");\n    }, [setInputValue]);\n\n    useEffect(() => {\n      if (compact) {\n        setInputValue(\"\");\n      }\n    }, [compact]);\n\n    const [position, setPosition] = useState<\"left\" | \"right\">();\n\n    useIsomorphicLayoutEffect(() => {\n      if (paginatorElement && !compact && rootRef.current) {\n        setPosition(\n          rootRef.current.compareDocumentPosition(paginatorElement) ===\n            Node.DOCUMENT_POSITION_PRECEDING\n            ? \"right\"\n            : \"left\"\n        );\n      }\n    }, [paginatorElement, compact, rootRef.current]);\n\n    if (compact) {\n      return null;\n    }\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <span\n        className={clsx(\n          withBaseName(\"goToInputWrapper\"),\n          { [withBaseName(`${position!}GoToInput`)]: position },\n          className\n        )}\n        ref={forkedRef}\n      >\n        <FormField\n          className={withBaseName(\"goToInputField\")}\n          fullWidth={false}\n          label={label}\n          labelPlacement=\"left\"\n          {...restFormFieldLegacyProps}\n        >\n          <Input\n            className={clsx(withBaseName(\"goToInput\"), {\n              [withBaseName(\"goToInputFixed\")]: count < 100,\n            })}\n            id={id}\n            inputProps={{\n              \"aria-labelledby\": id,\n              \"aria-label\": `Page, ${count} total`,\n              style: { width: widthCh },\n            }}\n            onBlur={onBlur}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            value={inputValue}\n            textAlign={\"center\"}\n          />\n        </FormField>\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","usePaginationContext","useId","useRef","useForkRef","useState","useCallback","useEffect","useIsomorphicLayoutEffect","jsx","clsx","withBaseName","FormField","Input"],"mappings":"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"}
+{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  Ref,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel, Input, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport goToInputCss from \"./GoToInput.css\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","GoToInput","useWindow","useComponentCssInjection","goToInputCss","usePaginationContext","useState","jsxs","FormField","clsx","jsx","FormFieldLabel","Input"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAgB1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,SAAA;AAAA,IACf,KAAQ,GAAA,OAAA;AAAA,IACL,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA,CAAA;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA,CAAA;AAE/C,IAAM,MAAA,QAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,MAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,KAAM,CAAA,SAAS,CAChB,IAAA,SAAA,GAAY,CACZ,IAAA,SAAA,IAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,SAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,CAAG,EAAA,CAAA,EAAG,KAAQ,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAE9B,IAAA,uBACGC,eAAA,CAAAC,cAAA,EAAA;AAAA,MACC,cAAe,EAAA,MAAA;AAAA,MACf,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,mBAAA,EAAA;AAAA,UAAgB,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBACtBD,cAAA,CAAAE,UAAA,EAAA;AAAA,UACC,SAAW,EAAAH,SAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,YACrC,CAAC,YAAA,CAAa,kBAAkB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,WAC7C,CAAA;AAAA,UACD,GAAK,EAAA,QAAA;AAAA,UACL,UAAY,EAAA;AAAA,YACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,WAC1B;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,UACX,OAAS,EAAA,YAAA;AAAA,SACX,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/pagination/PageButton.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltPageButton {\n  --saltButton-minWidth: var(--salt-size-base);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n  --saltButton-height: var(--salt-size-base);\n  --saltButton-text-color: var(--salt-content-primary-foreground);\n  --saltButton-background-active: var(--salt-selectable-background-selected);\n  --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  --saltButton-padding: 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=PageButton.css.js.map

package/dist-cjs/pagination/PageButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/pagination/PageButton.js

@@ -3,41 +3,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var utils = require('./utils.js');
-var core = require('@salt-ds/core');
+var React = require('react');
 var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var usePaginationContext = require('./usePaginationContext.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var PageButton$1 = require('./PageButton.css.js');
 
-const PageButton = ({
-  page,
-  isSelected,
-  onPageChange,
-  disabled
-}) => {
-  const name = `Page ${page}`;
-  const onKeyDown = (event) => {
-    if (event.key === "Enter") {
-      onPageChange(page);
-    }
-  };
-  const onClick = () => {
-    onPageChange(page);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-    "aria-label": name,
-    name,
-    "aria-current": isSelected ? "page" : void 0,
-    variant: "secondary",
-    className: clsx.clsx(utils.withBaseName("pageButton"), {
-      [utils.withBaseName("pageButtonSelected")]: isSelected,
-      [utils.withBaseName("pageButtonFixed")]: page < 100
-    }),
-    onClick,
-    onKeyDown,
-    role: "link",
-    disabled,
-    children: page
-  });
-};
+const withBaseName = core.makePrefixer("saltPageButton");
+const PageButton = React.forwardRef(
+  function PageButton2({ page, selected, disabled }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-page-button",
+      css: PageButton$1,
+      window: targetWindow
+    });
+    const { count, onPageChange } = usePaginationContext.usePaginationContext();
+    const onClick = (event) => {
+      onPageChange(event, page);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+      "aria-label": `Page ${page} of ${count}`,
+      "aria-current": selected ? "page" : void 0,
+      variant: "secondary",
+      className: clsx.clsx(withBaseName(), {
+        [withBaseName("selected")]: selected,
+        [withBaseName("fixed")]: page < 100
+      }),
+      onClick,
+      disabled,
+      ref,
+      children: page
+    });
+  }
+);
 
 exports.PageButton = PageButton;
 //# sourceMappingURL=PageButton.js.map

package/dist-cjs/pagination/PageButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler } from \"react\";\nimport { withBaseName } from \"./utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\n\nexport interface PageButtonProps {\n  page: number;\n  isSelected?: boolean;\n  onPageChange: (page: number) => void;\n  disabled?: boolean;\n}\n\nexport const PageButton = ({\n  page,\n  isSelected,\n  onPageChange,\n  disabled,\n}: PageButtonProps) => {\n  const name = `Page ${page}`;\n\n  const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    if (event.key === \"Enter\") {\n      onPageChange(page);\n    }\n  };\n\n  const onClick: MouseEventHandler<HTMLButtonElement> = () => {\n    onPageChange(page);\n  };\n\n  return (\n    <Button\n      aria-label={name}\n      name={name}\n      aria-current={isSelected ? \"page\" : undefined}\n      variant=\"secondary\"\n      className={clsx(withBaseName(\"pageButton\"), {\n        [withBaseName(\"pageButtonSelected\")]: isSelected,\n        [withBaseName(\"pageButtonFixed\")]: page < 100,\n      })}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      role=\"link\"\n      disabled={disabled}\n    >\n      {page}\n    </Button>\n  );\n};\n"],"names":["jsx","Button","clsx","withBaseName"],"mappings":";;;;;;;;;AAYO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,OAAO,CAAQ,KAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAErB,EAAM,MAAA,SAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAgD,MAAM;AAC1D,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,YAAY,EAAA,IAAA;AAAA,IACZ,IAAA;AAAA,IACA,cAAA,EAAc,aAAa,MAAS,GAAA,KAAA,CAAA;AAAA,IACpC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAAC,SAAA,CAAKC,kBAAa,CAAA,YAAY,CAAG,EAAA;AAAA,MAC1C,CAACA,kBAAa,CAAA,oBAAoB,CAAI,GAAA,UAAA;AAAA,MACtC,CAACA,kBAAA,CAAa,iBAAiB,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,KAC3C,CAAA;AAAA,IACD,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAK,EAAA,MAAA;AAAA,IACL,QAAA;AAAA,IAEC,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { MouseEventHandler, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n  page: number;\n  selected?: boolean;\n  disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n  function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-page-button\",\n      css: pageButtonCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n\n    const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, page);\n    };\n\n    return (\n      <Button\n        aria-label={`Page ${page} of ${count}`}\n        aria-current={selected ? \"page\" : undefined}\n        variant=\"secondary\"\n        className={clsx(withBaseName(), {\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"fixed\")]: page < 100,\n        })}\n        onClick={onClick}\n        disabled={disabled}\n        ref={ref}\n      >\n        {page}\n      </Button>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","PageButton","useWindow","useComponentCssInjection","pageButtonCss","usePaginationContext","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAO3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA,CAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACC,YAAA,EAAY,QAAQ,IAAW,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;AAAA,MAC/B,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,OAAQ,EAAA,WAAA;AAAA,MACR,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,OACjC,CAAA;AAAA,MACD,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA,EAAA,IAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/pagination/PageRanges.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltPageRanges-ellipsis {\n  display: inline-flex;\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  line-height: var(--salt-size-base);\n  justify-content: center;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=PageRanges.css.js.map

package/dist-cjs/pagination/PageRanges.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageRanges.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/pagination/PageRanges.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var PageButton = require('./PageButton.js');
+var usePagination = require('./usePagination.js');
+var usePaginationContext = require('./usePaginationContext.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var PageRanges$1 = require('./PageRanges.css.js');
+
+const withBaseName = core.makePrefixer("saltPageRanges");
+const Ellipsis = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: withBaseName("ellipsis"),
+    children: `\u2026`
+  });
+};
+const mapRange = (range, fn) => {
+  const result = [];
+  for (let i = range[0]; i <= range[1]; ++i) {
+    result.push(fn(i));
+  }
+  return result;
+};
+function PageRanges({
+  siblingCount = 2,
+  boundaryCount = 1
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-page-ranges",
+    css: PageRanges$1,
+    window: targetWindow
+  });
+  const { count, page } = usePaginationContext.usePaginationContext();
+  const renderPages = React.useCallback(
+    (range) => mapRange(range, (i) => /* @__PURE__ */ jsxRuntime.jsx(PageButton.PageButton, {
+      page: i,
+      selected: page === i
+    }, i)),
+    [page]
+  );
+  const [leftPages, middlePages, rightPages] = usePagination.usePagination(
+    page,
+    count,
+    Math.max(1, boundaryCount),
+    siblingCount
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      leftPages && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          renderPages(leftPages),
+          /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {})
+        ]
+      }),
+      middlePages && renderPages(middlePages),
+      rightPages && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}),
+          renderPages(rightPages)
+        ]
+      })
+    ]
+  });
+}
+
+exports.PageRanges = PageRanges;
+//# sourceMappingURL=PageRanges.js.map

package/dist-cjs/pagination/PageRanges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageRanges.js","sources":["../src/pagination/PageRanges.tsx"],"sourcesContent":["import { ReactElement, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { PageButton } from \"./PageButton\";\nimport { PageRange, usePagination } from \"./usePagination\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageRangesCss from \"./PageRanges.css\";\n\nconst withBaseName = makePrefixer(\"saltPageRanges\");\n\nexport interface PageRangesProps {\n  boundaryCount?: number;\n  siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n  return <div className={withBaseName(\"ellipsis\")}>{`\\u2026`}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n  const result: ReactElement[] = [];\n  for (let i = range[0]; i <= range[1]; ++i) {\n    result.push(fn(i));\n  }\n  return result;\n};\n\nexport function PageRanges({\n  siblingCount = 2,\n  boundaryCount = 1,\n}: PageRangesProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-page-ranges\",\n    css: pageRangesCss,\n    window: targetWindow,\n  });\n\n  const { count, page } = usePaginationContext();\n\n  const renderPages = useCallback(\n    (range: PageRange) =>\n      mapRange(range, (i) => (\n        <PageButton key={i} page={i} selected={page === i} />\n      )),\n    [page]\n  );\n\n  const [leftPages, middlePages, rightPages] = usePagination(\n    page,\n    count,\n    Math.max(1, boundaryCount),\n    siblingCount\n  );\n\n  return (\n    <>\n      {leftPages && (\n        <>\n          {renderPages(leftPages)}\n          <Ellipsis />\n        </>\n      )}\n      {middlePages && renderPages(middlePages)}\n      {rightPages && (\n        <>\n          <Ellipsis />\n          {renderPages(rightPages)}\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["makePrefixer","jsx","useWindow","useComponentCssInjection","pageRangesCss","usePaginationContext","useCallback","PageButton","usePagination","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAOlD,MAAM,WAAW,MAAM;AACrB,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,IAAI,QAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GAAS,CAAA,CAAA;AAC7D,CAAA,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC,CAAA;AAChC,EAAA,KAAA,IAAS,IAAI,KAAM,CAAA,CAAA,CAAA,EAAI,KAAK,KAAM,CAAA,CAAA,CAAA,EAAI,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACnB;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEO,SAAS,UAAW,CAAA;AAAA,EACzB,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA,CAAA;AAClB,CAAoB,EAAA;AAClB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAK,EAAA,GAAIC,yCAAqB,EAAA,CAAA;AAE7C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KACC,KAAA,QAAA,CAAS,KAAO,EAAA,CAAC,sBACdL,cAAA,CAAAM,qBAAA,EAAA;AAAA,MAAmB,IAAM,EAAA,CAAA;AAAA,MAAG,UAAU,IAAS,KAAA,CAAA;AAAA,KAAA,EAA/B,CAAkC,CACpD,CAAA;AAAA,IACH,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAAC,2BAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB,YAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACG,QAAA,EAAA;AAAA,MACC,SAAA,oBAAAD,eAAA,CAAAC,mBAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,WAAA,CAAY,SAAS,CAAA;AAAA,yCACrB,QAAS,EAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OACZ,CAAA;AAAA,MAED,WAAA,IAAe,YAAY,WAAW,CAAA;AAAA,MACtC,UACC,oBAAAD,eAAA,CAAAC,mBAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAAT,cAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,UACT,YAAY,UAAU,CAAA;AAAA,SAAA;AAAA,OACzB,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/pagination/Pagination.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".salt-density-medium {\n  --pagination-button-size: 28px;\n  --pagination-fontSize: 12px;\n}\n\n.salt-density-high {\n  --pagination-button-size: 20px;\n  --pagination-fontSize: 11px;\n}\n\n.salt-density-low {\n  --pagination-button-size: 36px;\n  --pagination-fontSize: 14px;\n}\n\n.salt-density-touch {\n  --pagination-button-size: 44px;\n  --pagination-fontSize: 16px;\n}\n\n.saltPagination {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltPagination-arrowButton {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n}\n\n.saltPagination-previousButton {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-nextButton {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltPagination-pageButton {\n  min-width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltPagination-pageButtonSelected {\n  background: var(--salt-selectable-background-selected);\n  color: var(--salt-palette-interact-cta-foreground-active);\n}\n\n.saltPagination-pageButtonFixed {\n  padding: 0;\n}\n\n.saltPagination-ellipsis {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  text-align: center;\n}\n\n.saltPagination-accessibleText {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  opacity: 0;\n}\n\n.saltPagination-compactInputField {\n}\n\n.saltPagination-compactInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-compactInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n\n.saltPagination-compactSeparator {\n  height: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n  text-align: center;\n  font-size: var(--pagination-fontSize);\n  line-height: var(--pagination-button-size);\n}\n\n.saltPagination-goToInputWrapper {\n}\n\n.saltPagination-leftGoToInput {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-rightGoToInput {\n  margin-left: var(--salt-size-unit);\n  min-width: unset;\n}\n\n.saltPagination-goToInputField {\n}\n\n.saltPagination-goToInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-goToInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n";
+var css_248z = ".saltPagination {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Pagination.css.js.map

package/dist-cjs/pagination/Pagination.js

@@ -3,35 +3,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
 var React = require('react');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
 var PaginationContext = require('./PaginationContext.js');
-var utils = require('./utils.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Pagination$1 = require('./Pagination.css.js');
 
+const withBaseName = core.makePrefixer("saltPagination");
 const { Provider } = PaginationContext.paginationContext;
 const Pagination = React.forwardRef(
-  ({
+  function Pagination2({
     className,
     count,
     children,
-    initialPage = 1,
+    defaultPage = 1,
     page: pageProp,
     onPageChange: onPageChangeProp,
-    compact = false,
     ...restProps
-  }, ref) => {
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-pagination",
+      css: Pagination$1,
+      window: targetWindow
+    });
     const [pageState, setPageState] = core.useControlled({
       controlled: pageProp,
-      default: initialPage,
-      name: "Paginator",
+      default: defaultPage,
+      name: "Pagination",
       state: "page"
     });
-    const [paginatorElement, setPaginatorElement] = React.useState();
     const onPageChange = React.useCallback(
-      (page) => {
+      (event, page) => {
         setPageState(page);
-        onPageChangeProp && onPageChangeProp(page);
+        onPageChangeProp && onPageChangeProp(event, page);
       },
       [onPageChangeProp, setPageState]
     );
@@ -39,28 +46,10 @@ const Pagination = React.forwardRef(
       () => ({
         page: pageState,
         count,
-        compact,
-        onPageChange,
-        paginatorElement,
-        setPaginatorElement
+        onPageChange
       }),
       [pageState, count, onPageChange]
     );
-    const onKeyDown = React.useCallback(
-      ({ altKey, key }) => {
-        if (altKey) {
-          switch (key) {
-            case "PageDown":
-              onPageChange(Math.min(pageState + 1, count));
-              break;
-            case "PageUp":
-              onPageChange(Math.max(pageState - 1, 1));
-              break;
-          }
-        }
-      },
-      [onPageChange]
-    );
     const { announce } = core.useAriaAnnouncer();
     const mounted = React.useRef(false);
     React.useEffect(() => {
@@ -70,19 +59,13 @@ const Pagination = React.forwardRef(
         mounted.current = true;
       }
     }, [announce, pageState]);
-    React.useEffect(() => {
-      if (count < pageState) {
-        onPageChange(1);
-      }
-    }, [count, pageState, onPageChange]);
     if (count < 2) {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx(Provider, {
       value: contextValue,
       children: /* @__PURE__ */ jsxRuntime.jsx("nav", {
-        className: clsx.clsx(utils.withBaseName(), className),
-        onKeyDown,
+        className: clsx.clsx(withBaseName(), className),
         ref,
         ...restProps,
         children

package/dist-cjs/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\nimport { withBaseName } from \"./utils\";\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n  count: number;\n  page?: number;\n  initialPage?: number;\n  onPageChange?: (page: number) => void;\n  compact?: boolean;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      className,\n      count,\n      children,\n      initialPage = 1,\n      page: pageProp,\n      onPageChange: onPageChangeProp,\n      compact = false,\n      ...restProps\n    },\n    ref\n  ) => {\n    const [pageState, setPageState] = useControlled({\n      controlled: pageProp,\n      default: initialPage,\n      name: \"Paginator\",\n      state: \"page\",\n    });\n\n    const [paginatorElement, setPaginatorElement] = useState<HTMLDivElement>();\n\n    const onPageChange = useCallback(\n      (page: number) => {\n        setPageState(page);\n        onPageChangeProp && onPageChangeProp(page);\n      },\n      [onPageChangeProp, setPageState]\n    );\n\n    const contextValue: PaginationContext = useMemo(\n      () => ({\n        page: pageState,\n        count,\n        compact,\n        onPageChange,\n        paginatorElement,\n        setPaginatorElement,\n      }),\n      [pageState, count, onPageChange]\n    );\n\n    const onKeyDown: KeyboardEventHandler = useCallback(\n      ({ altKey, key }) => {\n        if (altKey) {\n          switch (key) {\n            case \"PageDown\":\n              onPageChange(Math.min(pageState + 1, count));\n              break;\n            case \"PageUp\":\n              onPageChange(Math.max(pageState - 1, 1));\n              break;\n            default:\n          }\n        }\n      },\n      [onPageChange]\n    );\n\n    const { announce } = useAriaAnnouncer();\n    const mounted = useRef<boolean>(false);\n\n    useEffect(() => {\n      if (mounted.current) {\n        announce(`Page ${pageState}`);\n      } else {\n        mounted.current = true;\n      }\n    }, [announce, pageState]);\n\n    useEffect(() => {\n      if (count < pageState) {\n        onPageChange(1);\n      }\n    }, [count, pageState, onPageChange]);\n\n    if (count < 2) {\n      return null;\n    }\n\n    return (\n      <Provider value={contextValue}>\n        <nav\n          className={clsx(withBaseName(), className)}\n          onKeyDown={onKeyDown}\n          ref={ref}\n          {...restProps}\n        >\n          {children}\n        </nav>\n      </Provider>\n    );\n  }\n);\n"],"names":["paginationContext","forwardRef","useControlled","useState","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx","withBaseName"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginationCss from \"./Pagination.css\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Number of pages.\n   */\n  count: number;\n  /**\n   * Current/active page.\n   */\n  page?: number;\n  /**\n   * Default current/active page.\n   */\n  defaultPage?: number;\n  /**\n   * Callback function triggered when current page changed.\n   */\n  onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  function Pagination(\n    {\n      className,\n      count,\n      children,\n      defaultPage = 1,\n      page: pageProp,\n      onPageChange: onPageChangeProp,\n      ...restProps\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-pagination\",\n      css: paginationCss,\n      window: targetWindow,\n    });\n\n    const [pageState, setPageState] = useControlled({\n      controlled: pageProp,\n      default: defaultPage,\n      name: \"Pagination\",\n      state: \"page\",\n    });\n\n    const onPageChange = useCallback(\n      (event: SyntheticEvent, page: number) => {\n        setPageState(page);\n        onPageChangeProp && onPageChangeProp(event, page);\n      },\n      [onPageChangeProp, setPageState]\n    );\n\n    const contextValue: PaginationContext = useMemo(\n      () => ({\n        page: pageState,\n        count,\n        onPageChange,\n      }),\n      [pageState, count, onPageChange]\n    );\n\n    const { announce } = useAriaAnnouncer();\n    const mounted = useRef<boolean>(false);\n\n    useEffect(() => {\n      if (mounted.current) {\n        announce(`Page ${pageState}`);\n      } else {\n        mounted.current = true;\n      }\n    }, [announce, pageState]);\n\n    if (count < 2) {\n      return null;\n    }\n\n    return (\n      <Provider value={contextValue}>\n        <nav\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...restProps}\n        >\n          {children}\n        </nav>\n      </Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","paginationContext","forwardRef","Pagination","useWindow","useComponentCssInjection","paginationCss","useControlled","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAElD,MAAM,EAAE,UAAa,GAAAC,mCAAA,CAAA;AAqBd,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACX,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,kBAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,QAAoB,gBAAA,IAAA,gBAAA,CAAiB,OAAO,IAAI,CAAA,CAAA;AAAA,OAClD;AAAA,MACA,CAAC,kBAAkB,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAA,MAAM,YAAkC,GAAAC,aAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA,YAAA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,qBAAiB,EAAA,CAAA;AACtC,IAAM,MAAA,OAAA,GAAUC,aAAgB,KAAK,CAAA,CAAA;AAErC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,QAAA,CAAS,QAAQ,SAAW,CAAA,CAAA,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA,CAAA;AAAA,OACpB;AAAA,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MAAS,KAAO,EAAA,YAAA;AAAA,MACf,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/pagination/PaginationContext.js

@@ -7,12 +7,7 @@ var React = require('react');
 const paginationContext = React.createContext({
   page: 0,
   count: 0,
-  compact: false,
-  onPageChange: () => {
-  },
-  paginatorElement: void 0,
-  setPaginatorElement: () => {
-  }
+  onPageChange: () => void 0
 });
 if (process.env.NODE_ENV !== "production") {
   paginationContext.displayName = "PaginationContext";

package/dist-cjs/pagination/PaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport interface PaginationContext {\n  page: number;\n  count: number;\n  compact: boolean;\n  onPageChange: (page: number) => void;\n  paginatorElement?: HTMLDivElement;\n  setPaginatorElement: (element: HTMLDivElement) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n  page: 0,\n  count: 0,\n  compact: false,\n  onPageChange: () => {},\n  paginatorElement: undefined,\n  setPaginatorElement: () => {},\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":["createContext"],"mappings":";;;;;;AAWO,MAAM,oBAAoBA,mBAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,OAAS,EAAA,KAAA;AAAA,EACT,cAAc,MAAM;AAAA,GAAC;AAAA,EACrB,gBAAkB,EAAA,KAAA,CAAA;AAAA,EAClB,qBAAqB,MAAM;AAAA,GAAC;AAC9B,CAAC,EAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA,CAAA;AAClC;;;;"}
+{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { SyntheticEvent, createContext } from \"react\";\n\nexport interface PaginationContext {\n  page: number;\n  count: number;\n  onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n  page: 0,\n  count: 0,\n  onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":["createContext"],"mappings":";;;;;;AAQO,MAAM,oBAAoBA,mBAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM,KAAA,CAAA;AACtB,CAAC,EAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA,CAAA;AAClC;;;;"}

package/dist-cjs/pagination/Paginator.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltPaginator {\n  display: flex;\n  flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous {\n  --saltButton-margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next {\n  --saltButton-margin: 0 0 0 var(--salt-spacing-100);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Paginator.css.js.map

package/dist-cjs/pagination/Paginator.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paginator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}