@os-design/core 1.0.156 → 1.0.158

package/dist/cjs/RadioGroupSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledRadioGroupSkeleton","styled","Skeleton","omitEmotionProps","p","theme","baseHeight","sizeStyles","RadioGroupSkeleton","forwardRef","ref","width","rest","displayName"],"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 10em\n   */\n  width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: calc(${(p) => p.theme.baseHeight}em + 2px);\n  ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n  ({ width = '10em', ...rest }, ref) => (\n    <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,wBAAwB,GAAG,IAAAC,kBAAA,EAC/BC,oBAD+B,EAE/B,IAAAC,uBAAA,EAAiB,MAAjB,CAF+B,CAAH,gHAIb,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,UAAf;AAAA,CAJa,EAK1BC,kBAL0B,CAA9B;AAQA;AACA;AACA;;AACA,IAAMC,kBAAkB,gBAAG,IAAAC,iBAAA,EACzB,gBAA8BC,GAA9B;EAAA,sBAAGC,KAAH;EAAA,IAAGA,KAAH,2BAAW,MAAX;EAAA,IAAsBC,IAAtB;;EAAA,oBACE,gCAAC,wBAAD;IAA0B,KAAK,EAAED;EAAjC,GAA4CC,IAA5C;IAAkD,GAAG,EAAEF;EAAvD,GADF;AAAA,CADyB,CAA3B;AAMAF,kBAAkB,CAACK,WAAnB,GAAiC,oBAAjC;eAEeL,kB"}
+{"version":3,"file":"index.js","names":["StyledRadioGroupSkeleton","styled","Skeleton","omitEmotionProps","p","theme","baseHeight","sizeStyles","RadioGroupSkeleton","forwardRef","ref","width","rest","displayName"],"sources":["../../../src/RadioGroupSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 10em\n   */\n  width?: string;\n}\n\nconst StyledRadioGroupSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  height: calc(${(p) => p.theme.baseHeight}em + 2px);\n  ${sizeStyles};\n`;\n\n/**\n * Provides a radio group placeholder while a user waits for the content to load.\n */\nconst RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(\n  ({ width = '10em', ...rest }, ref) => (\n    <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nRadioGroupSkeleton.displayName = 'RadioGroupSkeleton';\n\nexport default RadioGroupSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUtD,IAAMA,wBAAwB,GAAG,IAAAC,kBAAM,EACrCC,oBAAQ,EACR,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CACzB,gHACgB,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,UAAU;AAAA,GACtCC,kBAAU,CACb;;AAED;AACA;AACA;AACA,IAAMC,kBAAkB,gBAAG,IAAAC,iBAAU,EACnC,gBAA8BC,GAAG;EAAA,sBAA9BC,KAAK;IAALA,KAAK,2BAAG,MAAM;IAAKC,IAAI;EAAA,oBACxB,gCAAC,wBAAwB;IAAC,KAAK,EAAED;EAAM,GAAKC,IAAI;IAAE,GAAG,EAAEF;EAAI,GAAG;AAAA,CAC/D,CACF;AAEDF,kBAAkB,CAACK,WAAW,GAAG,oBAAoB;AAAC,eAEvCL,kBAAkB;AAAA"}

package/dist/cjs/Result/index.js

@@ -1,52 +1,32 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _media = require("@os-design/media");
-
 var _excluded = ["title", "description", "icon", "actions", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  color: ", ";\n  padding: 2.6em 0;\n\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, _styles.sizeStyles);
-
 var IconContainer = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: 6em;\n  line-height: 1;\n  color: ", ";\n  margin-bottom: 0.1em;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.resultColorIcon);
 });
-
 var Text = _styled["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-align: center;\n  max-width: 28em;\n"])));
-
 var Title = (0, _styled["default"])(Text)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", "em;\n  font-weight: 500;\n"])), function (p) {
   return p.theme.sizes.large;
 });
@@ -55,24 +35,20 @@ var Description = (0, _styled["default"])(Text)(_templateObject5 || (_templateOb
 }, function (p) {
   return (0, _theming.clr)(p.theme.resultColorDescription);
 });
-
 var ActiveElements = _styled["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: 2em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  & > *:not(:first-of-type) {\n    margin-top: 0.5em;\n  }\n\n  ", " {\n    flex-direction: row;\n\n    & > *:not(:first-of-type) {\n      margin-top: 0;\n      margin-left: 0.5em;\n    }\n  }\n"])), _media.m.min.sm);
-
 var ChildrenContainer = _styled["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-top: 2em;\n"])));
+
 /**
  * Used to give the user feedback instead of results.
  * For example, error happened, results not found, no results yet.
  */
-
-
 var Result = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
-      description = _ref.description,
-      icon = _ref.icon,
-      actions = _ref.actions,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    description = _ref.description,
+    icon = _ref.icon,
+    actions = _ref.actions,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
     ref: ref
   }), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, null, icon), /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description), actions && /*#__PURE__*/_react["default"].createElement(ActiveElements, null, actions), children && /*#__PURE__*/_react["default"].createElement(ChildrenContainer, null, children));

package/dist/cjs/Result/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","clr","theme","colorText","sizeStyles","IconContainer","div","resultColorIcon","Text","Title","sizes","large","Description","small","resultColorDescription","ActiveElements","m","min","sm","ChildrenContainer","Result","forwardRef","ref","title","description","icon","actions","children","rest","displayName"],"sources":["../../../src/Result/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ResultProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the result.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The icon that is located above the title.\n   * @default undefined\n   */\n  icon?: React.ReactElement;\n  /**\n   * Active elements.\n   * @default undefined\n   */\n  actions?: React.ReactNode;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.colorText)};\n  padding: 2.6em 0;\n\n  ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n  font-size: 6em;\n  line-height: 1;\n  color: ${(p) => clr(p.theme.resultColorIcon)};\n  margin-bottom: 0.1em;\n`;\n\nconst Text = styled.div`\n  text-align: center;\n  max-width: 28em;\n`;\n\nconst Title = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n`;\n\nconst Description = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.resultColorDescription)};\n  margin-top: 0.5em;\n`;\n\nconst ActiveElements = styled.div`\n  margin-top: 2em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  & > *:not(:first-of-type) {\n    margin-top: 0.5em;\n  }\n\n  ${m.min.sm} {\n    flex-direction: row;\n\n    & > *:not(:first-of-type) {\n      margin-top: 0;\n      margin-left: 0.5em;\n    }\n  }\n`;\n\nconst ChildrenContainer = styled.div`\n  margin-top: 2em;\n`;\n\n/**\n * Used to give the user feedback instead of results.\n * For example, error happened, results not found, no results yet.\n */\nconst Result = forwardRef<HTMLDivElement, ResultProps>(\n  ({ title, description, icon, actions, children, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\n      {icon && <IconContainer>{icon}</IconContainer>}\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {actions && <ActiveElements>{actions}</ActiveElements>}\n      {children && <ChildrenContainer>{children}</ChildrenContainer>}\n    </Container>\n  )\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAyBA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,+LAKJ,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,SAAZ,CAAP;AAAA,CALI,EAQXC,kBARW,CAAf;;AAWA,IAAMC,aAAa,GAAGP,kBAAA,CAAOQ,GAAV,yJAGR,UAACN,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQK,eAAZ,CAAP;AAAA,CAHQ,CAAnB;;AAOA,IAAMC,IAAI,GAAGV,kBAAA,CAAOQ,GAAV,oHAAV;;AAKA,IAAMG,KAAK,GAAG,IAAAX,kBAAA,EAAOU,IAAP,CAAH,qHACI,UAACR,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQQ,KAAR,CAAcC,KAArB;AAAA,CADJ,CAAX;AAKA,IAAMC,WAAW,GAAG,IAAAd,kBAAA,EAAOU,IAAP,CAAH,sIACF,UAACR,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQQ,KAAR,CAAcG,KAArB;AAAA,CADE,EAEN,UAACb,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQY,sBAAZ,CAAP;AAAA,CAFM,CAAjB;;AAMA,IAAMC,cAAc,GAAGjB,kBAAA,CAAOQ,GAAV,qYAYhBU,QAAA,CAAEC,GAAF,CAAMC,EAZU,CAApB;;AAsBA,IAAMC,iBAAiB,GAAGrB,kBAAA,CAAOQ,GAAV,6FAAvB;AAIA;AACA;AACA;AACA;;;AACA,IAAMc,MAAM,gBAAG,IAAAC,iBAAA,EACb,gBAA2DC,GAA3D;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,IAAUC,WAAV,QAAUA,WAAV;EAAA,IAAuBC,IAAvB,QAAuBA,IAAvB;EAAA,IAA6BC,OAA7B,QAA6BA,OAA7B;EAAA,IAAsCC,QAAtC,QAAsCA,QAAtC;EAAA,IAAmDC,IAAnD;;EAAA,oBACE,gCAAC,SAAD,eAAeA,IAAf;IAAqB,GAAG,EAAEN;EAA1B,IACGG,IAAI,iBAAI,gCAAC,aAAD,QAAgBA,IAAhB,CADX,eAEE,gCAAC,KAAD,QAAQF,KAAR,CAFF,EAGGC,WAAW,iBAAI,gCAAC,WAAD,QAAcA,WAAd,CAHlB,EAIGE,OAAO,iBAAI,gCAAC,cAAD,QAAiBA,OAAjB,CAJd,EAKGC,QAAQ,iBAAI,gCAAC,iBAAD,QAAoBA,QAApB,CALf,CADF;AAAA,CADa,CAAf;AAYAP,MAAM,CAACS,WAAP,GAAqB,QAArB;eAEeT,M"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","clr","theme","colorText","sizeStyles","IconContainer","div","resultColorIcon","Text","Title","sizes","large","Description","small","resultColorDescription","ActiveElements","m","min","sm","ChildrenContainer","Result","forwardRef","ref","title","description","icon","actions","children","rest","displayName"],"sources":["../../../src/Result/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ResultProps extends JsxDivProps, WithSize {\n  /**\n   * The title of the result.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n  /**\n   * The icon that is located above the title.\n   * @default undefined\n   */\n  icon?: React.ReactElement;\n  /**\n   * Active elements.\n   * @default undefined\n   */\n  actions?: React.ReactNode;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  color: ${(p) => clr(p.theme.colorText)};\n  padding: 2.6em 0;\n\n  ${sizeStyles};\n`;\n\nconst IconContainer = styled.div`\n  font-size: 6em;\n  line-height: 1;\n  color: ${(p) => clr(p.theme.resultColorIcon)};\n  margin-bottom: 0.1em;\n`;\n\nconst Text = styled.div`\n  text-align: center;\n  max-width: 28em;\n`;\n\nconst Title = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n`;\n\nconst Description = styled(Text)`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.resultColorDescription)};\n  margin-top: 0.5em;\n`;\n\nconst ActiveElements = styled.div`\n  margin-top: 2em;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  & > *:not(:first-of-type) {\n    margin-top: 0.5em;\n  }\n\n  ${m.min.sm} {\n    flex-direction: row;\n\n    & > *:not(:first-of-type) {\n      margin-top: 0;\n      margin-left: 0.5em;\n    }\n  }\n`;\n\nconst ChildrenContainer = styled.div`\n  margin-top: 2em;\n`;\n\n/**\n * Used to give the user feedback instead of results.\n * For example, error happened, results not found, no results yet.\n */\nconst Result = forwardRef<HTMLDivElement, ResultProps>(\n  ({ title, description, icon, actions, children, ...rest }, ref) => (\n    <Container {...rest} ref={ref}>\n      {icon && <IconContainer>{icon}</IconContainer>}\n      <Title>{title}</Title>\n      {description && <Description>{description}</Description>}\n      {actions && <ActiveElements>{actions}</ActiveElements>}\n      {children && <ChildrenContainer>{children}</ChildrenContainer>}\n    </Container>\n  )\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBrC,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,+LAK9C,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,SAAS,CAAC;AAAA,GAGpCC,kBAAU,CACb;AAED,IAAMC,aAAa,GAAGP,kBAAM,CAACQ,GAAG,yJAGrB,UAACN,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACK,eAAe,CAAC;AAAA,EAE7C;AAED,IAAMC,IAAI,GAAGV,kBAAM,CAACQ,GAAG,oHAGtB;AAED,IAAMG,KAAK,GAAG,IAAAX,kBAAM,EAACU,IAAI,CAAC,qHACX,UAACR,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACQ,KAAK,CAACC,KAAK;AAAA,EAExC;AAED,IAAMC,WAAW,GAAG,IAAAd,kBAAM,EAACU,IAAI,CAAC,sIACjB,UAACR,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACQ,KAAK,CAACG,KAAK;AAAA,GAC9B,UAACb,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACY,sBAAsB,CAAC;AAAA,EAEpD;AAED,IAAMC,cAAc,GAAGjB,kBAAM,CAACQ,GAAG,qYAY7BU,QAAC,CAACC,GAAG,CAACC,EAAE,CAQX;AAED,IAAMC,iBAAiB,GAAGrB,kBAAM,CAACQ,GAAG,6FAEnC;;AAED;AACA;AACA;AACA;AACA,IAAMc,MAAM,gBAAG,IAAAC,iBAAU,EACvB,gBAA2DC,GAAG;EAAA,IAA3DC,KAAK,QAALA,KAAK;IAAEC,WAAW,QAAXA,WAAW;IAAEC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EAAA,oBACrD,gCAAC,SAAS,eAAKA,IAAI;IAAE,GAAG,EAAEN;EAAI,IAC3BG,IAAI,iBAAI,gCAAC,aAAa,QAAEA,IAAI,CAAiB,eAC9C,gCAAC,KAAK,QAAEF,KAAK,CAAS,EACrBC,WAAW,iBAAI,gCAAC,WAAW,QAAEA,WAAW,CAAe,EACvDE,OAAO,iBAAI,gCAAC,cAAc,QAAEA,OAAO,CAAkB,EACrDC,QAAQ,iBAAI,gCAAC,iBAAiB,QAAEA,QAAQ,CAAqB,CACpD;AAAA,CACb,CACF;AAEDP,MAAM,CAACS,WAAW,GAAG,QAAQ;AAAC,eAEfT,MAAM;AAAA"}

package/dist/cjs/ScrollButton/index.js

@@ -1,61 +1,37 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _icons = require("@os-design/icons");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _portal = _interopRequireDefault(require("@os-design/portal"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _useContainerPosition = _interopRequireDefault(require("./utils/useContainerPosition"));
-
 var _useVisibility = _interopRequireDefault(require("./utils/useVisibility"));
-
 var _excluded = ["container", "scrollTo", "minOffset", "onClick"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var fadeIn = (0, _react2.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
 var fadeOut = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from { opacity: 1; }\n  to { opacity: 0; }\n"])));
-
 var visibleStyles = function visibleStyles(p) {
   return p.visible && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), fadeIn, p.theme.transitionDelay);
 };
-
 var invisibleStyles = function invisibleStyles(p) {
   return !p.visible && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    animation: ", " ", "ms forwards;\n  "])), fadeOut, p.theme.transitionDelay);
 };
-
 var StyledButton = (0, _styled["default"])(_Button["default"], (0, _utils.omitEmotionProps)('visible', 'containerPosition'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: fixed;\n  right: ", ";\n  bottom: ", ";\n  box-shadow: 0 0.15em 0.8em ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
   return p.containerPosition.right > 0 ? "calc(".concat(p.containerPosition.right, "px + ").concat(p.theme.scrollButtonMargin, "em)") : "".concat(p.theme.scrollButtonMargin, "em");
 }, function (p) {
@@ -63,32 +39,30 @@ var StyledButton = (0, _styled["default"])(_Button["default"], (0, _utils.omitEm
 }, function (p) {
   return (0, _theming.clr)(p.theme.scrollButtonColorBoxShadow);
 }, visibleStyles, invisibleStyles);
+
 /**
  * The button to scroll to either the top or bottom of the container.
  */
-
 var ScrollButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var container = _ref.container,
-      _ref$scrollTo = _ref.scrollTo,
-      scrollTo = _ref$scrollTo === void 0 ? 'top' : _ref$scrollTo,
-      _ref$minOffset = _ref.minOffset,
-      minOffset = _ref$minOffset === void 0 ? 500 : _ref$minOffset,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$scrollTo = _ref.scrollTo,
+    scrollTo = _ref$scrollTo === void 0 ? 'top' : _ref$scrollTo,
+    _ref$minOffset = _ref.minOffset,
+    minOffset = _ref$minOffset === void 0 ? 500 : _ref$minOffset,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var visible = (0, _useVisibility["default"])({
     container: container,
     scrollTo: scrollTo,
     minOffset: minOffset
   });
   var containerPosition = (0, _useContainerPosition["default"])(container);
-
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
-  var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay); // Scroll through the container when the user clicks the button
+    theme = _useTheme.theme;
+  var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
 
+  // Scroll through the container when the user clicks the button
   var clickHandler = (0, _react.useCallback)(function (e) {
     // Scroll the window if the container is not defined
     if (!container) {
@@ -96,15 +70,16 @@ var ScrollButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         top: scrollTo === 'top' ? 0 : document.body.scrollHeight
       });
       return;
-    } // Otherwise scroll the container
-
+    }
 
+    // Otherwise scroll the container
     var containerElement = container instanceof Element ? container : container.current;
     if (!containerElement) return;
     containerElement.scrollTo({
       top: scrollTo === 'top' ? 0 : containerElement.scrollHeight
-    }); // Call the passed onClick handler
+    });
 
+    // Call the passed onClick handler
     onClick(e);
   }, [container, scrollTo, onClick]);
   if (!mounted) return null;

package/dist/cjs/ScrollButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","StyledButton","styled","Button","omitEmotionProps","containerPosition","right","scrollButtonMargin","bottom","clr","scrollButtonColorBoxShadow","ScrollButton","forwardRef","ref","container","scrollTo","minOffset","onClick","rest","useVisibility","useContainerPosition","useTheme","mounted","useClosable","clickHandler","useCallback","e","window","top","document","body","scrollHeight","containerElement","Element","current","t","buttonPrimaryColorBg","scrollButtonColorBg","buttonPrimaryColorText","scrollButtonColorText","buttonPrimaryColorBgHover","scrollButtonColorBgHover","displayName"],"sources":["../../../src/ScrollButton/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n} from 'react';\nimport { Up, Down } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport Button, { ButtonProps } from '../Button';\nimport useContainerPosition, {\n  ContainerPosition,\n} from './utils/useContainerPosition';\nimport useVisibility from './utils/useVisibility';\n\nexport interface ScrollButtonProps extends Omit<ButtonProps, 'type' | 'wide'> {\n  /**\n   * The container that needs to be scrolled.\n   * @default undefined\n   */\n  container?: Element | RefObject<Element>;\n  /**\n   * Where the container should be scrolled.\n   * @default top\n   */\n  scrollTo?: 'top' | 'bottom';\n  /**\n   * The min scroll offset when the button is visible.\n   * @default 500\n   */\n  minOffset?: number;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface StyledButtonProps {\n  visible: boolean;\n  containerPosition: ContainerPosition;\n}\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('visible', 'containerPosition')\n)<StyledButtonProps>`\n  position: fixed;\n  right: ${(p) =>\n    p.containerPosition.right > 0\n      ? `calc(${p.containerPosition.right}px + ${p.theme.scrollButtonMargin}em)`\n      : `${p.theme.scrollButtonMargin}em`};\n  bottom: ${(p) =>\n    `calc(${\n      p.containerPosition.bottom > 0 ? `${p.containerPosition.bottom}px + ` : ''\n    }${p.theme.scrollButtonMargin}em + env(safe-area-inset-bottom))`};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.scrollButtonColorBoxShadow)};\n\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\n/**\n * The button to scroll to either the top or bottom of the container.\n */\nconst ScrollButton = forwardRef<HTMLButtonElement, ScrollButtonProps>(\n  (\n    {\n      container,\n      scrollTo = 'top',\n      minOffset = 500,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const visible = useVisibility({ container, scrollTo, minOffset });\n    const containerPosition = useContainerPosition(container);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Scroll through the container when the user clicks the button\n    const clickHandler = useCallback<MouseEventHandler<HTMLButtonElement>>(\n      (e) => {\n        // Scroll the window if the container is not defined\n        if (!container) {\n          window.scrollTo({\n            top: scrollTo === 'top' ? 0 : document.body.scrollHeight,\n          });\n          return;\n        }\n\n        // Otherwise scroll the container\n        const containerElement =\n          container instanceof Element ? container : container.current;\n        if (!containerElement) return;\n\n        containerElement.scrollTo({\n          top: scrollTo === 'top' ? 0 : containerElement.scrollHeight,\n        });\n\n        // Call the passed onClick handler\n        onClick(e);\n      },\n      [container, scrollTo, onClick]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal container={container}>\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPrimaryColorBg: t.scrollButtonColorBg,\n            buttonPrimaryColorText: t.scrollButtonColorText,\n            buttonPrimaryColorBgHover: t.scrollButtonColorBgHover,\n          })}\n        >\n          <StyledButton\n            visible={visible}\n            containerPosition={containerPosition}\n            wide='never'\n            size='small'\n            onClick={clickHandler}\n            aria-label={`Scroll to ${scrollTo}`}\n            {...rest}\n            ref={ref}\n          >\n            {scrollTo === 'top' ? <Up /> : <Down />}\n          </StyledButton>\n        </ThemeOverrider>\n      </Portal>\n    );\n  }\n);\n\nScrollButton.displayName = 'ScrollButton';\n\nexport default ScrollButton;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","StyledButton","styled","Button","omitEmotionProps","containerPosition","right","scrollButtonMargin","bottom","clr","scrollButtonColorBoxShadow","ScrollButton","forwardRef","ref","container","scrollTo","minOffset","onClick","rest","useVisibility","useContainerPosition","useTheme","mounted","useClosable","clickHandler","useCallback","e","window","top","document","body","scrollHeight","containerElement","Element","current","t","buttonPrimaryColorBg","scrollButtonColorBg","buttonPrimaryColorText","scrollButtonColorText","buttonPrimaryColorBgHover","scrollButtonColorBgHover","displayName"],"sources":["../../../src/ScrollButton/index.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n} from 'react';\nimport { Up, Down } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { useClosable, omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport Button, { ButtonProps } from '../Button';\nimport useContainerPosition, {\n  ContainerPosition,\n} from './utils/useContainerPosition';\nimport useVisibility from './utils/useVisibility';\n\nexport interface ScrollButtonProps extends Omit<ButtonProps, 'type' | 'wide'> {\n  /**\n   * The container that needs to be scrolled.\n   * @default undefined\n   */\n  container?: Element | RefObject<Element>;\n  /**\n   * Where the container should be scrolled.\n   * @default top\n   */\n  scrollTo?: 'top' | 'bottom';\n  /**\n   * The min scroll offset when the button is visible.\n   * @default 500\n   */\n  minOffset?: number;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst fadeOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst visibleStyles = (p) =>\n  p.visible &&\n  css`\n    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst invisibleStyles = (p) =>\n  !p.visible &&\n  css`\n    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ninterface StyledButtonProps {\n  visible: boolean;\n  containerPosition: ContainerPosition;\n}\nconst StyledButton = styled(\n  Button,\n  omitEmotionProps('visible', 'containerPosition')\n)<StyledButtonProps>`\n  position: fixed;\n  right: ${(p) =>\n    p.containerPosition.right > 0\n      ? `calc(${p.containerPosition.right}px + ${p.theme.scrollButtonMargin}em)`\n      : `${p.theme.scrollButtonMargin}em`};\n  bottom: ${(p) =>\n    `calc(${\n      p.containerPosition.bottom > 0 ? `${p.containerPosition.bottom}px + ` : ''\n    }${p.theme.scrollButtonMargin}em + env(safe-area-inset-bottom))`};\n  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.scrollButtonColorBoxShadow)};\n\n  ${visibleStyles};\n  ${invisibleStyles};\n`;\n\n/**\n * The button to scroll to either the top or bottom of the container.\n */\nconst ScrollButton = forwardRef<HTMLButtonElement, ScrollButtonProps>(\n  (\n    {\n      container,\n      scrollTo = 'top',\n      minOffset = 500,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const visible = useVisibility({ container, scrollTo, minOffset });\n    const containerPosition = useContainerPosition(container);\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n\n    // Scroll through the container when the user clicks the button\n    const clickHandler = useCallback<MouseEventHandler<HTMLButtonElement>>(\n      (e) => {\n        // Scroll the window if the container is not defined\n        if (!container) {\n          window.scrollTo({\n            top: scrollTo === 'top' ? 0 : document.body.scrollHeight,\n          });\n          return;\n        }\n\n        // Otherwise scroll the container\n        const containerElement =\n          container instanceof Element ? container : container.current;\n        if (!containerElement) return;\n\n        containerElement.scrollTo({\n          top: scrollTo === 'top' ? 0 : containerElement.scrollHeight,\n        });\n\n        // Call the passed onClick handler\n        onClick(e);\n      },\n      [container, scrollTo, onClick]\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal container={container}>\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPrimaryColorBg: t.scrollButtonColorBg,\n            buttonPrimaryColorText: t.scrollButtonColorText,\n            buttonPrimaryColorBgHover: t.scrollButtonColorBgHover,\n          })}\n        >\n          <StyledButton\n            visible={visible}\n            containerPosition={containerPosition}\n            wide='never'\n            size='small'\n            onClick={clickHandler}\n            aria-label={`Scroll to ${scrollTo}`}\n            {...rest}\n            ref={ref}\n          >\n            {scrollTo === 'top' ? <Up /> : <Down />}\n          </StyledButton>\n        </ThemeOverrider>\n      </Portal>\n    );\n  }\n);\n\nScrollButton.displayName = 'ScrollButton';\n\nexport default ScrollButton;\n"],"mappings":"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"}

package/dist/cjs/ScrollButton/utils/useContainerPosition.js

@@ -4,47 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _utils = require("@os-design/utils");
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 /**
  * Calculates the position of the container.
  */
 var useContainerPosition = function useContainerPosition(container) {
   var _useState = (0, _react.useState)({
-    right: 0,
-    bottom: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      position = _useState2[0],
-      setPosition = _useState2[1];
-
+      right: 0,
+      bottom: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
   var updatePosition = (0, _react.useCallback)(function () {
     if (!container) return;
     var element = container instanceof Element ? container : container.current;
     if (!element) return;
-
     var _element$getBoundingC = element.getBoundingClientRect(),
-        right = _element$getBoundingC.right,
-        bottom = _element$getBoundingC.bottom;
-
+      right = _element$getBoundingC.right,
+      bottom = _element$getBoundingC.bottom;
     var _window = window,
-        innerWidth = _window.innerWidth,
-        innerHeight = _window.innerHeight;
+      innerWidth = _window.innerWidth,
+      innerHeight = _window.innerHeight;
     setPosition({
       right: innerWidth - right,
       bottom: innerHeight - bottom
@@ -56,7 +44,6 @@ var useContainerPosition = function useContainerPosition(container) {
   (0, _utils.useResizeObserver)(container, updatePosition);
   return position;
 };
-
 var _default = useContainerPosition;
 exports["default"] = _default;
 //# sourceMappingURL=useContainerPosition.js.map

package/dist/cjs/ScrollButton/utils/useContainerPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useContainerPosition.js","names":["useContainerPosition","container","useState","right","bottom","position","setPosition","updatePosition","useCallback","element","Element","current","getBoundingClientRect","window","innerWidth","innerHeight","useBrowserLayoutEffect","useResizeObserver"],"sources":["../../../../src/ScrollButton/utils/useContainerPosition.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';\n\nexport interface ContainerPosition {\n  right: number;\n  bottom: number;\n}\n\n/**\n * Calculates the position of the container.\n */\nconst useContainerPosition = (\n  container?: Element | RefObject<Element>\n): ContainerPosition => {\n  const [position, setPosition] = useState<ContainerPosition>({\n    right: 0,\n    bottom: 0,\n  });\n\n  const updatePosition = useCallback(() => {\n    if (!container) return;\n    const element =\n      container instanceof Element ? container : container.current;\n    if (!element) return;\n\n    const { right, bottom } = element.getBoundingClientRect();\n    const { innerWidth, innerHeight } = window;\n\n    setPosition({\n      right: innerWidth - right,\n      bottom: innerHeight - bottom,\n    });\n  }, [container]);\n\n  useBrowserLayoutEffect(() => updatePosition(), [updatePosition]);\n  useResizeObserver(container as never, updatePosition);\n\n  return position;\n};\n\nexport default useContainerPosition;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAC3BC,SAD2B,EAEL;EACtB,gBAAgC,IAAAC,eAAA,EAA4B;IAC1DC,KAAK,EAAE,CADmD;IAE1DC,MAAM,EAAE;EAFkD,CAA5B,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAKA,IAAMC,cAAc,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACvC,IAAI,CAACP,SAAL,EAAgB;IAChB,IAAMQ,OAAO,GACXR,SAAS,YAAYS,OAArB,GAA+BT,SAA/B,GAA2CA,SAAS,CAACU,OADvD;IAEA,IAAI,CAACF,OAAL,EAAc;;IAEd,4BAA0BA,OAAO,CAACG,qBAAR,EAA1B;IAAA,IAAQT,KAAR,yBAAQA,KAAR;IAAA,IAAeC,MAAf,yBAAeA,MAAf;;IACA,cAAoCS,MAApC;IAAA,IAAQC,UAAR,WAAQA,UAAR;IAAA,IAAoBC,WAApB,WAAoBA,WAApB;IAEAT,WAAW,CAAC;MACVH,KAAK,EAAEW,UAAU,GAAGX,KADV;MAEVC,MAAM,EAAEW,WAAW,GAAGX;IAFZ,CAAD,CAAX;EAID,CAbsB,EAapB,CAACH,SAAD,CAboB,CAAvB;EAeA,IAAAe,6BAAA,EAAuB;IAAA,OAAMT,cAAc,EAApB;EAAA,CAAvB,EAA+C,CAACA,cAAD,CAA/C;EACA,IAAAU,wBAAA,EAAkBhB,SAAlB,EAAsCM,cAAtC;EAEA,OAAOF,QAAP;AACD,CA3BD;;eA6BeL,oB"}
+{"version":3,"file":"useContainerPosition.js","names":["useContainerPosition","container","useState","right","bottom","position","setPosition","updatePosition","useCallback","element","Element","current","getBoundingClientRect","window","innerWidth","innerHeight","useBrowserLayoutEffect","useResizeObserver"],"sources":["../../../../src/ScrollButton/utils/useContainerPosition.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';\n\nexport interface ContainerPosition {\n  right: number;\n  bottom: number;\n}\n\n/**\n * Calculates the position of the container.\n */\nconst useContainerPosition = (\n  container?: Element | RefObject<Element>\n): ContainerPosition => {\n  const [position, setPosition] = useState<ContainerPosition>({\n    right: 0,\n    bottom: 0,\n  });\n\n  const updatePosition = useCallback(() => {\n    if (!container) return;\n    const element =\n      container instanceof Element ? container : container.current;\n    if (!element) return;\n\n    const { right, bottom } = element.getBoundingClientRect();\n    const { innerWidth, innerHeight } = window;\n\n    setPosition({\n      right: innerWidth - right,\n      bottom: innerHeight - bottom,\n    });\n  }, [container]);\n\n  useBrowserLayoutEffect(() => updatePosition(), [updatePosition]);\n  useResizeObserver(container as never, updatePosition);\n\n  return position;\n};\n\nexport default useContainerPosition;\n"],"mappings":";;;;;;AAAA;AACA;AAA6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7E;AACA;AACA;AACA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,CACxBC,SAAwC,EAClB;EACtB,gBAAgC,IAAAC,eAAQ,EAAoB;MAC1DC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE;IACV,CAAC,CAAC;IAAA;IAHKC,QAAQ;IAAEC,WAAW;EAK5B,IAAMC,cAAc,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACvC,IAAI,CAACP,SAAS,EAAE;IAChB,IAAMQ,OAAO,GACXR,SAAS,YAAYS,OAAO,GAAGT,SAAS,GAAGA,SAAS,CAACU,OAAO;IAC9D,IAAI,CAACF,OAAO,EAAE;IAEd,4BAA0BA,OAAO,CAACG,qBAAqB,EAAE;MAAjDT,KAAK,yBAALA,KAAK;MAAEC,MAAM,yBAANA,MAAM;IACrB,cAAoCS,MAAM;MAAlCC,UAAU,WAAVA,UAAU;MAAEC,WAAW,WAAXA,WAAW;IAE/BT,WAAW,CAAC;MACVH,KAAK,EAAEW,UAAU,GAAGX,KAAK;MACzBC,MAAM,EAAEW,WAAW,GAAGX;IACxB,CAAC,CAAC;EACJ,CAAC,EAAE,CAACH,SAAS,CAAC,CAAC;EAEf,IAAAe,6BAAsB,EAAC;IAAA,OAAMT,cAAc,EAAE;EAAA,GAAE,CAACA,cAAc,CAAC,CAAC;EAChE,IAAAU,wBAAiB,EAAChB,SAAS,EAAWM,cAAc,CAAC;EAErD,OAAOF,QAAQ;AACjB,CAAC;AAAC,eAEaL,oBAAoB;AAAA"}

package/dist/cjs/ScrollButton/utils/useVisibility.js

@@ -4,40 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _utils = require("@os-design/utils");
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 /**
  * Controls the visibility of the button.
  */
 var useVisibility = function useVisibility(_ref) {
   var container = _ref.container,
-      scrollTo = _ref.scrollTo,
-      minOffset = _ref.minOffset;
-
+    scrollTo = _ref.scrollTo,
+    minOffset = _ref.minOffset;
   var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1]; // Update the visibility of the button when the user scrolls the container
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
 
+  // Update the visibility of the button when the user scrolls the container
   var updateVisibility = (0, _react.useCallback)(function () {
     var offset = 0;
-
     if (!container) {
       offset = scrollTo === 'top' ? window.scrollY : document.body.scrollHeight - window.scrollY - window.innerHeight;
     } else {
@@ -45,7 +34,6 @@ var useVisibility = function useVisibility(_ref) {
       if (containerElement === null) return;
       offset = scrollTo === 'top' ? containerElement.scrollTop : containerElement.scrollHeight - containerElement.scrollTop - containerElement.clientHeight;
     }
-
     setVisible(offset >= minOffset);
   }, [container, scrollTo, minOffset]);
   (0, _utils.useBrowserLayoutEffect)(function () {
@@ -54,7 +42,6 @@ var useVisibility = function useVisibility(_ref) {
   (0, _utils.useEvent)(container || (typeof window !== 'undefined' ? window : undefined), 'scroll', updateVisibility);
   return visible;
 };
-
 var _default = useVisibility;
 exports["default"] = _default;
 //# sourceMappingURL=useVisibility.js.map

package/dist/cjs/ScrollButton/utils/useVisibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisibility.js","names":["useVisibility","container","scrollTo","minOffset","useState","visible","setVisible","updateVisibility","useCallback","offset","window","scrollY","document","body","scrollHeight","innerHeight","containerElement","Element","current","scrollTop","clientHeight","useBrowserLayoutEffect","useEvent","undefined"],"sources":["../../../../src/ScrollButton/utils/useVisibility.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\n\ninterface UseVisibilityProps {\n  container?: Element | RefObject<Element>;\n  scrollTo: 'top' | 'bottom';\n  minOffset: number;\n}\n\n/**\n * Controls the visibility of the button.\n */\nconst useVisibility = ({\n  container,\n  scrollTo,\n  minOffset,\n}: UseVisibilityProps): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  // Update the visibility of the button when the user scrolls the container\n  const updateVisibility = useCallback(() => {\n    let offset = 0;\n\n    if (!container) {\n      offset =\n        scrollTo === 'top'\n          ? window.scrollY\n          : document.body.scrollHeight - window.scrollY - window.innerHeight;\n    } else {\n      const containerElement =\n        container instanceof Element ? container : container.current;\n      if (containerElement === null) return;\n\n      offset =\n        scrollTo === 'top'\n          ? containerElement.scrollTop\n          : containerElement.scrollHeight -\n            containerElement.scrollTop -\n            containerElement.clientHeight;\n    }\n\n    setVisible(offset >= minOffset);\n  }, [container, scrollTo, minOffset]);\n\n  useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as EventTarget),\n    'scroll',\n    updateVisibility\n  );\n\n  return visible;\n};\n\nexport default useVisibility;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,OAIa;EAAA,IAHjCC,SAGiC,QAHjCA,SAGiC;EAAA,IAFjCC,QAEiC,QAFjCA,QAEiC;EAAA,IADjCC,SACiC,QADjCA,SACiC;;EACjC,gBAA8B,IAAAC,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB,iBADiC,CAGjC;;;EACA,IAAMC,gBAAgB,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACzC,IAAIC,MAAM,GAAG,CAAb;;IAEA,IAAI,CAACR,SAAL,EAAgB;MACdQ,MAAM,GACJP,QAAQ,KAAK,KAAb,GACIQ,MAAM,CAACC,OADX,GAEIC,QAAQ,CAACC,IAAT,CAAcC,YAAd,GAA6BJ,MAAM,CAACC,OAApC,GAA8CD,MAAM,CAACK,WAH3D;IAID,CALD,MAKO;MACL,IAAMC,gBAAgB,GACpBf,SAAS,YAAYgB,OAArB,GAA+BhB,SAA/B,GAA2CA,SAAS,CAACiB,OADvD;MAEA,IAAIF,gBAAgB,KAAK,IAAzB,EAA+B;MAE/BP,MAAM,GACJP,QAAQ,KAAK,KAAb,GACIc,gBAAgB,CAACG,SADrB,GAEIH,gBAAgB,CAACF,YAAjB,GACAE,gBAAgB,CAACG,SADjB,GAEAH,gBAAgB,CAACI,YALvB;IAMD;;IAEDd,UAAU,CAACG,MAAM,IAAIN,SAAX,CAAV;EACD,CAtBwB,EAsBtB,CAACF,SAAD,EAAYC,QAAZ,EAAsBC,SAAtB,CAtBsB,CAAzB;EAwBA,IAAAkB,6BAAA,EAAuB;IAAA,OAAMd,gBAAgB,EAAtB;EAAA,CAAvB,EAAiD,CAACA,gBAAD,CAAjD;EACA,IAAAe,eAAA,EACErB,SAAS,KACL,OAAOS,MAAP,KAAkB,WAAlB,GAAgCA,MAAhC,GAAyCa,SADpC,CADX,EAGE,QAHF,EAIEhB,gBAJF;EAOA,OAAOF,OAAP;AACD,CAzCD;;eA2CeL,a"}
+{"version":3,"file":"useVisibility.js","names":["useVisibility","container","scrollTo","minOffset","useState","visible","setVisible","updateVisibility","useCallback","offset","window","scrollY","document","body","scrollHeight","innerHeight","containerElement","Element","current","scrollTop","clientHeight","useBrowserLayoutEffect","useEvent","undefined"],"sources":["../../../../src/ScrollButton/utils/useVisibility.ts"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport { useEvent, useBrowserLayoutEffect } from '@os-design/utils';\n\ninterface UseVisibilityProps {\n  container?: Element | RefObject<Element>;\n  scrollTo: 'top' | 'bottom';\n  minOffset: number;\n}\n\n/**\n * Controls the visibility of the button.\n */\nconst useVisibility = ({\n  container,\n  scrollTo,\n  minOffset,\n}: UseVisibilityProps): boolean => {\n  const [visible, setVisible] = useState(false);\n\n  // Update the visibility of the button when the user scrolls the container\n  const updateVisibility = useCallback(() => {\n    let offset = 0;\n\n    if (!container) {\n      offset =\n        scrollTo === 'top'\n          ? window.scrollY\n          : document.body.scrollHeight - window.scrollY - window.innerHeight;\n    } else {\n      const containerElement =\n        container instanceof Element ? container : container.current;\n      if (containerElement === null) return;\n\n      offset =\n        scrollTo === 'top'\n          ? containerElement.scrollTop\n          : containerElement.scrollHeight -\n            containerElement.scrollTop -\n            containerElement.clientHeight;\n    }\n\n    setVisible(offset >= minOffset);\n  }, [container, scrollTo, minOffset]);\n\n  useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);\n  useEvent(\n    container ||\n      ((typeof window !== 'undefined' ? window : undefined) as EventTarget),\n    'scroll',\n    updateVisibility\n  );\n\n  return visible;\n};\n\nexport default useVisibility;\n"],"mappings":";;;;;;AAAA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpE;AACA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAIgB;EAAA,IAHjCC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;EAET,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;;EAE1B;EACA,IAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACzC,IAAIC,MAAM,GAAG,CAAC;IAEd,IAAI,CAACR,SAAS,EAAE;MACdQ,MAAM,GACJP,QAAQ,KAAK,KAAK,GACdQ,MAAM,CAACC,OAAO,GACdC,QAAQ,CAACC,IAAI,CAACC,YAAY,GAAGJ,MAAM,CAACC,OAAO,GAAGD,MAAM,CAACK,WAAW;IACxE,CAAC,MAAM;MACL,IAAMC,gBAAgB,GACpBf,SAAS,YAAYgB,OAAO,GAAGhB,SAAS,GAAGA,SAAS,CAACiB,OAAO;MAC9D,IAAIF,gBAAgB,KAAK,IAAI,EAAE;MAE/BP,MAAM,GACJP,QAAQ,KAAK,KAAK,GACdc,gBAAgB,CAACG,SAAS,GAC1BH,gBAAgB,CAACF,YAAY,GAC7BE,gBAAgB,CAACG,SAAS,GAC1BH,gBAAgB,CAACI,YAAY;IACrC;IAEAd,UAAU,CAACG,MAAM,IAAIN,SAAS,CAAC;EACjC,CAAC,EAAE,CAACF,SAAS,EAAEC,QAAQ,EAAEC,SAAS,CAAC,CAAC;EAEpC,IAAAkB,6BAAsB,EAAC;IAAA,OAAMd,gBAAgB,EAAE;EAAA,GAAE,CAACA,gBAAgB,CAAC,CAAC;EACpE,IAAAe,eAAQ,EACNrB,SAAS,KACL,OAAOS,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGa,SAAS,CAAiB,EACvE,QAAQ,EACRhB,gBAAgB,CACjB;EAED,OAAOF,OAAO;AAChB,CAAC;AAAC,eAEaL,aAAa;AAAA"}