@arc-ui/components 11.5.0 → 11.7.0

package/dist/RadioGroup/RadioGroup.esm.js

@@ -1,70 +1,11 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
-import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from '../_shared/esm/FormControl-0744f93f.js';
-import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+export { R as RadioGroup } from '../_shared/esm/RadioGroup-65b8c8bf.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import 'react';
+import '../_shared/esm/FormControl-2fa7aae5.js';
+import '../_shared/esm/index-2ae58626.js';
 import '../_shared/esm/BtIconAlert-55a6ed5c.js';
-import '../_shared/esm/DisclosureMini-322fccc0.js';
+import '../_shared/esm/Surface-dde51789.js';
+import '../_shared/esm/DisclosureMini-78a8f392.js';
 import '../_shared/esm/BtIconChevronDown2Px-782876e2.js';
-import '../_shared/esm/Text-00e9743b.js';
+import '../_shared/esm/Text-14deb70e.js';
 import '../_shared/esm/suffix-modifier-7e640670.js';
-import '../_shared/esm/VerticalSpace-93980c9c.js';
-
-var RadioContext = createContext({});
-var Provider = RadioContext.Provider;
-var useRadioContext = function () {
-    var context = useContext(RadioContext);
-    return context;
-};
-
-/**
- * Radio Button component.
- */
-var RadioButton = forwardRef(function (_a, ref) {
-    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
-    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
-    var surface = useContext(Context).surface;
-    var idLabel = "".concat(id, "-label");
-    var checked = checkedValue === value ? true : false;
-    return (React__default.createElement("div", __assign({ className: classNames({
-            "arc-RadioButton": true,
-            "arc-RadioButton--disabled": isDisabled || groupDisabled,
-            "arc-RadioButton--small": size === "s",
-            "arc-RadioButton--smallLabel": labelSize === "s",
-            "arc-RadioButton--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props)),
-        React__default.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
-            React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
-            React__default.createElement("span", null,
-                label,
-                helper && React__default.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
-});
-
-/**
- * Use `RadioGroup` to wrap and control radio buttons and apply default values
- */
-var RadioGroup = function (_a) {
-    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
-    useEffect(function () {
-        React__default.Children.map(children, function (item) {
-            if (item && item.type !== RadioButton) {
-                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
-            }
-        });
-    }, [children]);
-    return (React__default.createElement(Provider, { value: {
-            blurEvent: onBlur,
-            changeEvent: onChange,
-            groupDisabled: isDisabled,
-            checkedValue: checkedValue,
-            labelSize: labelSize,
-            name: name,
-            size: size
-        } },
-        React__default.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
-            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
-};
-RadioButton.displayName = "RadioGroup.RadioButton";
-RadioGroup.RadioButton = RadioButton;
-
-export { RadioGroup };

package/dist/Rule/Rule.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
 var index = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var Surface = require('../_shared/cjs/Surface-b7c51b2b.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Rule/Rule.esm.js

@@ -1,7 +1,7 @@
 import { a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import { C as Context } from '../_shared/esm/Surface-dde51789.js';
 
 /**
  * Use `Rule` to display a horizontal rule.

package/dist/ScrollToTop/ScrollToTop.cjs.d.ts

@@ -0,0 +1,25 @@
+import { FC } from "react";
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+declare const ScrollToTop: FC<ScrollToTopProps>;
+interface ScrollToTopProps {
+    /**
+     * If true, the button will stick to the bottom right corner of the screen.
+     */
+    isFixed?: boolean;
+    /**
+     * Sets when the scroll button should appear. `always` will show the button all the time.
+     * `afterScroll` will show the button when the user has stopped scrolling and have passed the fold.
+     */
+    appear?: "always" | "afterScroll";
+    /**
+     * Z-index for the button. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined";
+}
+export { ScrollToTop };

package/dist/ScrollToTop/ScrollToTop.cjs.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var React$1 = require('react');
+var debounce = require('../_shared/cjs/debounce-506538c5.js');
+var Icon = require('../_shared/cjs/Icon-e1dd45eb.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+require('../_shared/cjs/Surface-b7c51b2b.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
+
+const React = React__default["default"];
+const BtIconArrowAltUp = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconArrowAltUp_2 = BtIconArrowAltUp;
+
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+var ScrollToTop = function (_a) {
+    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = filterDataAttrs.__rest(_a, ["appear", "isFixed", "fill", "zIndex"]);
+    var _f = React$1.useState(false), hasScrolled = _f[0], setHasScrolled = _f[1];
+    React$1.useEffect(function () {
+        var handleScroll = debounce.debounce_1(function () {
+            setHasScrolled(window.scrollY > 0);
+        }, 100);
+        window.addEventListener("scroll", handleScroll);
+        return function () { return window.removeEventListener("scroll", handleScroll); };
+    });
+    var onClick = function () {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    };
+    return (React__default["default"].createElement("button", filterDataAttrs.__assign({ onClick: onClick, style: {
+            zIndex: zIndex
+        }, className: index.classNames("arc-ScrollToTop", "arc-ScrollToTop--".concat(fill), {
+            "arc-ScrollToTop--fixed": isFixed,
+            "arc-ScrollToTop--visible": appear === "always" || (appear === "afterScroll" && hasScrolled)
+        }) }, filterDataAttrs.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-ScrollToTop-textWrapper" },
+            React__default["default"].createElement("span", { className: "arc-ScrollToTop-text" }, "Scroll to top")),
+        React__default["default"].createElement("span", { className: "arc-ScrollToTop-iconContainer" },
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconArrowAltUp_2, size: 44 }))));
+};
+
+exports.ScrollToTop = ScrollToTop;

package/dist/ScrollToTop/ScrollToTop.esm.d.ts

@@ -0,0 +1,25 @@
+import { FC } from "react";
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+declare const ScrollToTop: FC<ScrollToTopProps>;
+interface ScrollToTopProps {
+    /**
+     * If true, the button will stick to the bottom right corner of the screen.
+     */
+    isFixed?: boolean;
+    /**
+     * Sets when the scroll button should appear. `always` will show the button all the time.
+     * `afterScroll` will show the button when the user has stopped scrolling and have passed the fold.
+     */
+    appear?: "always" | "afterScroll";
+    /**
+     * Z-index for the button. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined";
+}
+export { ScrollToTop };

package/dist/ScrollToTop/ScrollToTop.esm.js

@@ -0,0 +1,60 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import React__default, { useState, useEffect } from 'react';
+import { d as debounce_1 } from '../_shared/esm/debounce-e228705f.js';
+import { I as Icon } from '../_shared/esm/Icon-c1af47bc.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+import '../_shared/esm/Surface-dde51789.js';
+
+const React = React__default;
+const BtIconArrowAltUp = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d:
+        "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconArrowAltUp_2 = BtIconArrowAltUp;
+
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+var ScrollToTop = function (_a) {
+    var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = __rest(_a, ["appear", "isFixed", "fill", "zIndex"]);
+    var _f = useState(false), hasScrolled = _f[0], setHasScrolled = _f[1];
+    useEffect(function () {
+        var handleScroll = debounce_1(function () {
+            setHasScrolled(window.scrollY > 0);
+        }, 100);
+        window.addEventListener("scroll", handleScroll);
+        return function () { return window.removeEventListener("scroll", handleScroll); };
+    });
+    var onClick = function () {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    };
+    return (React__default.createElement("button", __assign({ onClick: onClick, style: {
+            zIndex: zIndex
+        }, className: classNames("arc-ScrollToTop", "arc-ScrollToTop--".concat(fill), {
+            "arc-ScrollToTop--fixed": isFixed,
+            "arc-ScrollToTop--visible": appear === "always" || (appear === "afterScroll" && hasScrolled)
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-ScrollToTop-textWrapper" },
+            React__default.createElement("span", { className: "arc-ScrollToTop-text" }, "Scroll to top")),
+        React__default.createElement("span", { className: "arc-ScrollToTop-iconContainer" },
+            React__default.createElement(Icon, { icon: BtIconArrowAltUp_2, size: 44 }))));
+};
+
+export { ScrollToTop };

package/dist/ScrollToTop/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/scrolltotop",
+  "types": "./ScrollToTop.esm.d.ts",
+  "main": "./ScrollToTop.cjs.js",
+  "module": "./ScrollToTop.esm.js",
+  "private": true
+}

package/dist/Select/Select.cjs.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import React from "react";
 import { FocusEvent } from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-42360ae8";
+import { FormControlProps } from "../_shared/cjs/FormControl-78b007b7";
 /** Use `Select` to choose from a dropdown list of options. */
 declare const Select: React.FC<SelectProps>;
-interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel"> {
+interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel" | "supplementaryInfo"> {
     name: string;
     label: string;
     placeholder: string;