@os-design/core 1.0.155 → 1.0.157

package/dist/esm/Popover/utils/usePopoverPosition.js

@@ -1,11 +1,9 @@
 import { useMemo } from 'react';
 import { useFontSize } from '@os-design/utils';
-
 const popoverPositionGetters = rectKey => {
   const sizeKey = rectKey === 'top' ? 'height' : 'width';
   const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';
   const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';
-
   const fitToWindow = (start, {
     elementRect,
     popoverRect
@@ -15,20 +13,19 @@ const popoverPositionGetters = rectKey => {
     const windowEnd = windowStart + window[windowSizeKey];
     const elementStart = windowStart + elementRect[rectKey];
     const elementEnd = elementStart + elementRect[sizeKey];
-    const popoverEnd = popoverStart + popoverRect[sizeKey]; // Fit the popover to the end of the window
+    const popoverEnd = popoverStart + popoverRect[sizeKey];
 
+    // Fit the popover to the end of the window
     if (popoverEnd > windowEnd) {
       if (elementEnd < windowEnd) popoverStart = windowEnd - popoverRect[sizeKey];else if (popoverRect[sizeKey] > elementRect[sizeKey]) popoverStart = elementEnd - popoverRect[sizeKey];else if (windowEnd - elementStart > popoverRect[sizeKey]) popoverStart = windowEnd - popoverRect[sizeKey];else popoverStart = elementStart;
-    } // Fit the popover to the beginning of the window
-
+    }
 
+    // Fit the popover to the beginning of the window
     if (popoverStart < windowStart) {
       if (elementStart > windowStart) popoverStart = windowStart;else if (popoverRect[sizeKey] > elementRect[sizeKey]) popoverStart = elementStart;else if (elementEnd - windowStart > popoverRect[sizeKey]) popoverStart = windowStart;else popoverStart = elementEnd - popoverRect[sizeKey];
     }
-
     return popoverStart;
   };
-
   return {
     before(options) {
       const {
@@ -41,9 +38,9 @@ const popoverPositionGetters = rectKey => {
       const windowEnd = windowStart + window[windowSizeKey];
       const elementStart = windowStart + elementRect[rectKey];
       const popoverStart = elementStart - popoverRect[sizeKey] - gap;
-
       if (flip && popoverStart < windowStart) {
-        const afterPopoverStart = this.after({ ...options,
+        const afterPopoverStart = this.after({
+          ...options,
           flip: false
         });
         const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];
@@ -51,10 +48,8 @@ const popoverPositionGetters = rectKey => {
         const diffEnd = afterPopoverEnd - windowEnd;
         if (afterPopoverEnd <= windowEnd || diffStart > diffEnd) return afterPopoverStart;
       }
-
       return popoverStart;
     },
-
     after(options) {
       const {
         elementRect,
@@ -68,19 +63,17 @@ const popoverPositionGetters = rectKey => {
       const elementEnd = elementStart + elementRect[sizeKey];
       const popoverStart = elementEnd + gap;
       const popoverEnd = popoverStart + popoverRect[sizeKey];
-
       if (flip && popoverEnd > windowEnd) {
-        const beforePopoverStart = this.before({ ...options,
+        const beforePopoverStart = this.before({
+          ...options,
           flip: false
         });
         const diffStart = windowStart - beforePopoverStart;
         const diffEnd = popoverEnd - windowEnd;
         if (beforePopoverStart >= windowStart || diffEnd > diffStart) return beforePopoverStart;
       }
-
       return popoverStart;
     },
-
     start: ({
       elementRect,
       popoverRect
@@ -119,12 +112,10 @@ const popoverPositionGetters = rectKey => {
     }
   };
 };
-
 const getPopoverPosition = (top, left, options) => ({
   top: popoverPositionGetters('top')[top](options),
   left: popoverPositionGetters('left')[left](options)
 });
-
 const placementPositionKeysMap = {
   top: ['before', 'center'],
   bottom: ['after', 'center'],
@@ -139,7 +130,6 @@ const placementPositionKeysMap = {
   'right-start': ['start', 'after'],
   'right-end': ['end', 'after']
 };
-
 /**
  * Computes the position of the popover.
  * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.
@@ -165,6 +155,5 @@ const usePopoverPosition = ({
     flip
   });
 };
-
 export default usePopoverPosition;
 //# sourceMappingURL=usePopoverPosition.js.map

package/dist/esm/Popover/utils/usePopoverPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverPosition.js","names":["useMemo","useFontSize","popoverPositionGetters","rectKey","sizeKey","windowSizeKey","windowOffsetKey","fitToWindow","start","elementRect","popoverRect","popoverStart","windowStart","window","windowEnd","elementStart","elementEnd","popoverEnd","before","options","gap","flip","afterPopoverStart","after","afterPopoverEnd","diffStart","diffEnd","beforePopoverStart","end","center","getPopoverPosition","top","left","placementPositionKeysMap","bottom","right","usePopoverPosition","placement","bodyFontSize","document","body","gapPx","positionKeys"],"sources":["../../../../src/Popover/utils/usePopoverPosition.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useFontSize } from '@os-design/utils';\n\nexport type Placement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\ninterface UsePopoverPositionProps {\n  /**\n   * The rect of the element.\n   */\n  elementRect: Rect;\n  /**\n   * The rect of the popover.\n   */\n  popoverRect: Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.5\n   */\n  gap?: number;\n  /**\n   * Whether to flip the popover if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n}\n\ninterface PopoverPositionGetterOptions {\n  elementRect: Rect;\n  popoverRect: Rect;\n  gap: number;\n  flip: boolean;\n}\ntype PositionKeys = 'before' | 'after' | 'start' | 'end' | 'center';\ntype PopoverPositionGetterFn = (\n  options: PopoverPositionGetterOptions\n) => number;\ntype PopoverPositionGetters = Record<PositionKeys, PopoverPositionGetterFn>;\ntype FitToWindow = Pick<\n  PopoverPositionGetterOptions,\n  'elementRect' | 'popoverRect'\n>;\n\nconst popoverPositionGetters = (\n  rectKey: 'top' | 'left'\n): PopoverPositionGetters => {\n  const sizeKey = rectKey === 'top' ? 'height' : 'width';\n  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';\n  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';\n\n  const fitToWindow = (\n    start: number,\n    { elementRect, popoverRect }: FitToWindow\n  ): number => {\n    let popoverStart = start;\n    const windowStart = window[windowOffsetKey];\n    const windowEnd = windowStart + window[windowSizeKey];\n    const elementStart = windowStart + elementRect[rectKey];\n    const elementEnd = elementStart + elementRect[sizeKey];\n    const popoverEnd = popoverStart + popoverRect[sizeKey];\n\n    // Fit the popover to the end of the window\n    if (popoverEnd > windowEnd) {\n      if (elementEnd < windowEnd)\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementEnd - popoverRect[sizeKey];\n      else if (windowEnd - elementStart > popoverRect[sizeKey])\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else popoverStart = elementStart;\n    }\n\n    // Fit the popover to the beginning of the window\n    if (popoverStart < windowStart) {\n      if (elementStart > windowStart) popoverStart = windowStart;\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementStart;\n      else if (elementEnd - windowStart > popoverRect[sizeKey])\n        popoverStart = windowStart;\n      else popoverStart = elementEnd - popoverRect[sizeKey];\n    }\n\n    return popoverStart;\n  };\n\n  return {\n    before(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart = elementStart - popoverRect[sizeKey] - gap;\n      if (flip && popoverStart < windowStart) {\n        const afterPopoverStart = this.after({ ...options, flip: false });\n        const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];\n        const diffStart = windowStart - popoverStart;\n        const diffEnd = afterPopoverEnd - windowEnd;\n        if (afterPopoverEnd <= windowEnd || diffStart > diffEnd)\n          return afterPopoverStart;\n      }\n      return popoverStart;\n    },\n    after(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd + gap;\n      const popoverEnd = popoverStart + popoverRect[sizeKey];\n      if (flip && popoverEnd > windowEnd) {\n        const beforePopoverStart = this.before({ ...options, flip: false });\n        const diffStart = windowStart - beforePopoverStart;\n        const diffEnd = popoverEnd - windowEnd;\n        if (beforePopoverStart >= windowStart || diffEnd > diffStart)\n          return beforePopoverStart;\n      }\n      return popoverStart;\n    },\n    start: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      return fitToWindow(elementStart, { elementRect, popoverRect });\n    },\n    end: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd - popoverRect[sizeKey];\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n    center: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart =\n        elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n  };\n};\n\nconst getPopoverPosition = (\n  top: PositionKeys,\n  left: PositionKeys,\n  options: PopoverPositionGetterOptions\n) => ({\n  top: popoverPositionGetters('top')[top](options),\n  left: popoverPositionGetters('left')[left](options),\n});\n\ntype PlacementPositionKeysMap = Record<Placement, [PositionKeys, PositionKeys]>;\nconst placementPositionKeysMap: PlacementPositionKeysMap = {\n  top: ['before', 'center'],\n  bottom: ['after', 'center'],\n  left: ['center', 'before'],\n  right: ['center', 'after'],\n  'top-start': ['before', 'start'],\n  'top-end': ['before', 'end'],\n  'bottom-start': ['after', 'start'],\n  'bottom-end': ['after', 'end'],\n  'left-start': ['start', 'before'],\n  'left-end': ['end', 'before'],\n  'right-start': ['start', 'after'],\n  'right-end': ['end', 'after'],\n};\n\ninterface PopoverPosition {\n  top: number;\n  left: number;\n}\n\n/**\n * Computes the position of the popover.\n * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.\n * In most cases, it will be the window.\n */\nconst usePopoverPosition = ({\n  elementRect,\n  popoverRect,\n  placement = 'top',\n  gap = 0.5,\n  flip = true,\n}: UsePopoverPositionProps): PopoverPosition => {\n  const bodyFontSize = useFontSize(document.body);\n  const gapPx = useMemo(() => gap * bodyFontSize, [gap, bodyFontSize]);\n\n  const positionKeys = useMemo(() => {\n    if (typeof placement === 'string' && !!placementPositionKeysMap[placement])\n      return placementPositionKeysMap[placement];\n    return placementPositionKeysMap.top;\n  }, [placement]);\n\n  return getPopoverPosition(...positionKeys, {\n    elementRect,\n    popoverRect,\n    gap: gapPx,\n    flip,\n  });\n};\n\nexport default usePopoverPosition;\n"],"mappings":"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"}
+{"version":3,"file":"usePopoverPosition.js","names":["useMemo","useFontSize","popoverPositionGetters","rectKey","sizeKey","windowSizeKey","windowOffsetKey","fitToWindow","start","elementRect","popoverRect","popoverStart","windowStart","window","windowEnd","elementStart","elementEnd","popoverEnd","before","options","gap","flip","afterPopoverStart","after","afterPopoverEnd","diffStart","diffEnd","beforePopoverStart","end","center","getPopoverPosition","top","left","placementPositionKeysMap","bottom","right","usePopoverPosition","placement","bodyFontSize","document","body","gapPx","positionKeys"],"sources":["../../../../src/Popover/utils/usePopoverPosition.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useFontSize } from '@os-design/utils';\n\nexport type Placement =\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-end'\n  | 'right-start'\n  | 'right-end';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\ninterface UsePopoverPositionProps {\n  /**\n   * The rect of the element.\n   */\n  elementRect: Rect;\n  /**\n   * The rect of the popover.\n   */\n  popoverRect: Rect;\n  /**\n   * On which side of the element the popover will appear.\n   * @default top\n   */\n  placement?: Placement;\n  /**\n   * The gap between the element and the popover in em.\n   * @default 0.5\n   */\n  gap?: number;\n  /**\n   * Whether to flip the popover if it does not fit in the window.\n   * @default true\n   */\n  flip?: boolean;\n}\n\ninterface PopoverPositionGetterOptions {\n  elementRect: Rect;\n  popoverRect: Rect;\n  gap: number;\n  flip: boolean;\n}\ntype PositionKeys = 'before' | 'after' | 'start' | 'end' | 'center';\ntype PopoverPositionGetterFn = (\n  options: PopoverPositionGetterOptions\n) => number;\ntype PopoverPositionGetters = Record<PositionKeys, PopoverPositionGetterFn>;\ntype FitToWindow = Pick<\n  PopoverPositionGetterOptions,\n  'elementRect' | 'popoverRect'\n>;\n\nconst popoverPositionGetters = (\n  rectKey: 'top' | 'left'\n): PopoverPositionGetters => {\n  const sizeKey = rectKey === 'top' ? 'height' : 'width';\n  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';\n  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';\n\n  const fitToWindow = (\n    start: number,\n    { elementRect, popoverRect }: FitToWindow\n  ): number => {\n    let popoverStart = start;\n    const windowStart = window[windowOffsetKey];\n    const windowEnd = windowStart + window[windowSizeKey];\n    const elementStart = windowStart + elementRect[rectKey];\n    const elementEnd = elementStart + elementRect[sizeKey];\n    const popoverEnd = popoverStart + popoverRect[sizeKey];\n\n    // Fit the popover to the end of the window\n    if (popoverEnd > windowEnd) {\n      if (elementEnd < windowEnd)\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementEnd - popoverRect[sizeKey];\n      else if (windowEnd - elementStart > popoverRect[sizeKey])\n        popoverStart = windowEnd - popoverRect[sizeKey];\n      else popoverStart = elementStart;\n    }\n\n    // Fit the popover to the beginning of the window\n    if (popoverStart < windowStart) {\n      if (elementStart > windowStart) popoverStart = windowStart;\n      else if (popoverRect[sizeKey] > elementRect[sizeKey])\n        popoverStart = elementStart;\n      else if (elementEnd - windowStart > popoverRect[sizeKey])\n        popoverStart = windowStart;\n      else popoverStart = elementEnd - popoverRect[sizeKey];\n    }\n\n    return popoverStart;\n  };\n\n  return {\n    before(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart = elementStart - popoverRect[sizeKey] - gap;\n      if (flip && popoverStart < windowStart) {\n        const afterPopoverStart = this.after({ ...options, flip: false });\n        const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];\n        const diffStart = windowStart - popoverStart;\n        const diffEnd = afterPopoverEnd - windowEnd;\n        if (afterPopoverEnd <= windowEnd || diffStart > diffEnd)\n          return afterPopoverStart;\n      }\n      return popoverStart;\n    },\n    after(options) {\n      const { elementRect, popoverRect, gap, flip } = options;\n      const windowStart = window[windowOffsetKey];\n      const windowEnd = windowStart + window[windowSizeKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd + gap;\n      const popoverEnd = popoverStart + popoverRect[sizeKey];\n      if (flip && popoverEnd > windowEnd) {\n        const beforePopoverStart = this.before({ ...options, flip: false });\n        const diffStart = windowStart - beforePopoverStart;\n        const diffEnd = popoverEnd - windowEnd;\n        if (beforePopoverStart >= windowStart || diffEnd > diffStart)\n          return beforePopoverStart;\n      }\n      return popoverStart;\n    },\n    start: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      return fitToWindow(elementStart, { elementRect, popoverRect });\n    },\n    end: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const elementEnd = elementStart + elementRect[sizeKey];\n      const popoverStart = elementEnd - popoverRect[sizeKey];\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n    center: ({ elementRect, popoverRect }) => {\n      const windowStart = window[windowOffsetKey];\n      const elementStart = windowStart + elementRect[rectKey];\n      const popoverStart =\n        elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;\n      return fitToWindow(popoverStart, { elementRect, popoverRect });\n    },\n  };\n};\n\nconst getPopoverPosition = (\n  top: PositionKeys,\n  left: PositionKeys,\n  options: PopoverPositionGetterOptions\n) => ({\n  top: popoverPositionGetters('top')[top](options),\n  left: popoverPositionGetters('left')[left](options),\n});\n\ntype PlacementPositionKeysMap = Record<Placement, [PositionKeys, PositionKeys]>;\nconst placementPositionKeysMap: PlacementPositionKeysMap = {\n  top: ['before', 'center'],\n  bottom: ['after', 'center'],\n  left: ['center', 'before'],\n  right: ['center', 'after'],\n  'top-start': ['before', 'start'],\n  'top-end': ['before', 'end'],\n  'bottom-start': ['after', 'start'],\n  'bottom-end': ['after', 'end'],\n  'left-start': ['start', 'before'],\n  'left-end': ['end', 'before'],\n  'right-start': ['start', 'after'],\n  'right-end': ['end', 'after'],\n};\n\ninterface PopoverPosition {\n  top: number;\n  left: number;\n}\n\n/**\n * Computes the position of the popover.\n * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.\n * In most cases, it will be the window.\n */\nconst usePopoverPosition = ({\n  elementRect,\n  popoverRect,\n  placement = 'top',\n  gap = 0.5,\n  flip = true,\n}: UsePopoverPositionProps): PopoverPosition => {\n  const bodyFontSize = useFontSize(document.body);\n  const gapPx = useMemo(() => gap * bodyFontSize, [gap, bodyFontSize]);\n\n  const positionKeys = useMemo(() => {\n    if (typeof placement === 'string' && !!placementPositionKeysMap[placement])\n      return placementPositionKeysMap[placement];\n    return placementPositionKeysMap.top;\n  }, [placement]);\n\n  return getPopoverPosition(...positionKeys, {\n    elementRect,\n    popoverRect,\n    gap: gapPx,\n    flip,\n  });\n};\n\nexport default usePopoverPosition;\n"],"mappings":"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"}

package/dist/esm/Progress/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef, useMemo } from 'react';
 import { sizeStyles, transitionStyles } from '@os-design/styles';
@@ -29,10 +28,10 @@ const Text = styled.div`
   color: ${p => clr(p.theme.progressColorPercentage)};
   line-height: 1;
 `;
+
 /**
  * The progress bar.
  */
-
 const Progress = /*#__PURE__*/forwardRef(({
   percent = 0,
   text,

package/dist/esm/Progress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","useMemo","sizeStyles","transitionStyles","omitEmotionProps","clr","Container","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","div","progressColorPercentage","Progress","text","rest","ref","validPercent","textId","Math","random","toString","slice","displayName"],"sources":["../../../src/Progress/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ProgressProps extends JsxDivProps, WithSize {\n  /**\n   * The percentage of completion.\n   * @default 0\n   */\n  percent?: number;\n  /**\n   * The text that is displayed to the right of the progress bar.\n   * @default undefined\n   */\n  text?: string;\n  /**\n   * The height of the progress bar.\n   * @default 0.5em\n   */\n  height?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  ${sizeStyles};\n`;\n\ntype TrailProps = Required<Pick<ProgressProps, 'height'>>;\nconst Trail = styled('div', omitEmotionProps('height'))<TrailProps>`\n  width: 100%;\n  background-color: ${(p) => clr(p.theme.progressColorTrail)};\n  border-radius: ${(p) => `calc(${p.height} / 2)`};\n  overflow: hidden; // To hide the border of the progress bar\n`;\n\ntype StrokeProps = Required<Pick<ProgressProps, 'percent' | 'height'>>;\nconst Stroke = styled(\n  'div',\n  omitEmotionProps('percent', 'height')\n)<StrokeProps>`\n  width: ${(p) => p.percent}%;\n  height: ${(p) => p.height};\n  border-radius: 0 ${(p) => `calc(${p.height} / 2)`}\n    ${(p) => `calc(${p.height} / 2)`} 0;\n  background-color: ${(p) =>\n    p.percent < 100\n      ? clr(p.theme.progressColorStroke)\n      : clr(p.theme.progressColorStrokeSuccess)};\n  ${transitionStyles('width', 'background-color')};\n`;\n\nconst Text = styled.div`\n  margin-left: 0.5em;\n  color: ${(p) => clr(p.theme.progressColorPercentage)};\n  line-height: 1;\n`;\n\n/**\n * The progress bar.\n */\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  ({ percent = 0, text, height = '0.5em', ...rest }, ref) => {\n    const validPercent = useMemo(() => {\n      if (percent < 0) return 0;\n      if (percent > 100) return 100;\n      return percent;\n    }, [percent]);\n\n    const textId = useMemo(\n      () => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    return (\n      <Container\n        role='progressbar'\n        aria-valuenow={validPercent}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-describedby={textId}\n        {...rest}\n        ref={ref}\n      >\n        <Trail height={height}>\n          <Stroke percent={validPercent} height={height} />\n        </Trail>\n        {text && <Text id={textId}>{text}</Text>}\n      </Container>\n    );\n  }\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,SAASC,UAAT,EAAqBC,gBAArB,QAAuD,mBAAvD;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAqBA,MAAMC,SAAS,GAAGR,MAAM,CAAC,KAAD,EAAQM,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA,IAAIF,UAAW;AACf,CAJA;AAOA,MAAMK,KAAK,GAAGT,MAAM,CAAC,KAAD,EAAQM,gBAAgB,CAAC,QAAD,CAAxB,CAAgD;AACpE;AACA,sBAAuBI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQC,kBAAT,CAA6B;AAC7D,mBAAoBF,CAAD,IAAQ,QAAOA,CAAC,CAACG,MAAO,OAAO;AAClD;AACA,CALA;AAQA,MAAMC,MAAM,GAAGd,MAAM,CACnB,KADmB,EAEnBM,gBAAgB,CAAC,SAAD,EAAY,QAAZ,CAFG,CAGN;AACf,WAAYI,CAAD,IAAOA,CAAC,CAACK,OAAQ;AAC5B,YAAaL,CAAD,IAAOA,CAAC,CAACG,MAAO;AAC5B,qBAAsBH,CAAD,IAAQ,QAAOA,CAAC,CAACG,MAAO,OAAO;AACpD,MAAOH,CAAD,IAAQ,QAAOA,CAAC,CAACG,MAAO,OAAO;AACrC,sBAAuBH,CAAD,IAClBA,CAAC,CAACK,OAAF,GAAY,GAAZ,GACIR,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQK,mBAAT,CADP,GAEIT,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQM,0BAAT,CAAqC;AAChD,IAAIZ,gBAAgB,CAAC,OAAD,EAAU,kBAAV,CAA8B;AAClD,CAbA;AAeA,MAAMa,IAAI,GAAGlB,MAAM,CAACmB,GAAI;AACxB;AACA,WAAYT,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQS,uBAAT,CAAkC;AACvD;AACA,CAJA;AAMA;AACA;AACA;;AACA,MAAMC,QAAQ,gBAAGnB,UAAU,CACzB,CAAC;EAAEa,OAAO,GAAG,CAAZ;EAAeO,IAAf;EAAqBT,MAAM,GAAG,OAA9B;EAAuC,GAAGU;AAA1C,CAAD,EAAmDC,GAAnD,KAA2D;EACzD,MAAMC,YAAY,GAAGtB,OAAO,CAAC,MAAM;IACjC,IAAIY,OAAO,GAAG,CAAd,EAAiB,OAAO,CAAP;IACjB,IAAIA,OAAO,GAAG,GAAd,EAAmB,OAAO,GAAP;IACnB,OAAOA,OAAP;EACD,CAJ2B,EAIzB,CAACA,OAAD,CAJyB,CAA5B;EAMA,MAAMW,MAAM,GAAGvB,OAAO,CACpB,MAAO,qBAAoBwB,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAwC,EAD/C,EAEpB,EAFoB,CAAtB;EAKA,oBACE,oBAAC,SAAD;IACE,IAAI,EAAC,aADP;IAEE,iBAAeL,YAFjB;IAGE,iBAAe,CAHjB;IAIE,iBAAe,GAJjB;IAKE,oBAAkBC;EALpB,GAMMH,IANN;IAOE,GAAG,EAAEC;EAPP,iBASE,oBAAC,KAAD;IAAO,MAAM,EAAEX;EAAf,gBACE,oBAAC,MAAD;IAAQ,OAAO,EAAEY,YAAjB;IAA+B,MAAM,EAAEZ;EAAvC,EADF,CATF,EAYGS,IAAI,iBAAI,oBAAC,IAAD;IAAM,EAAE,EAAEI;EAAV,GAAmBJ,IAAnB,CAZX,CADF;AAgBD,CA7BwB,CAA3B;AAgCAD,QAAQ,CAACU,WAAT,GAAuB,UAAvB;AAEA,eAAeV,QAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","useMemo","sizeStyles","transitionStyles","omitEmotionProps","clr","Container","Trail","p","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","Text","div","progressColorPercentage","Progress","text","rest","ref","validPercent","textId","Math","random","toString","slice","displayName"],"sources":["../../../src/Progress/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ProgressProps extends JsxDivProps, WithSize {\n  /**\n   * The percentage of completion.\n   * @default 0\n   */\n  percent?: number;\n  /**\n   * The text that is displayed to the right of the progress bar.\n   * @default undefined\n   */\n  text?: string;\n  /**\n   * The height of the progress bar.\n   * @default 0.5em\n   */\n  height?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  ${sizeStyles};\n`;\n\ntype TrailProps = Required<Pick<ProgressProps, 'height'>>;\nconst Trail = styled('div', omitEmotionProps('height'))<TrailProps>`\n  width: 100%;\n  background-color: ${(p) => clr(p.theme.progressColorTrail)};\n  border-radius: ${(p) => `calc(${p.height} / 2)`};\n  overflow: hidden; // To hide the border of the progress bar\n`;\n\ntype StrokeProps = Required<Pick<ProgressProps, 'percent' | 'height'>>;\nconst Stroke = styled(\n  'div',\n  omitEmotionProps('percent', 'height')\n)<StrokeProps>`\n  width: ${(p) => p.percent}%;\n  height: ${(p) => p.height};\n  border-radius: 0 ${(p) => `calc(${p.height} / 2)`}\n    ${(p) => `calc(${p.height} / 2)`} 0;\n  background-color: ${(p) =>\n    p.percent < 100\n      ? clr(p.theme.progressColorStroke)\n      : clr(p.theme.progressColorStrokeSuccess)};\n  ${transitionStyles('width', 'background-color')};\n`;\n\nconst Text = styled.div`\n  margin-left: 0.5em;\n  color: ${(p) => clr(p.theme.progressColorPercentage)};\n  line-height: 1;\n`;\n\n/**\n * The progress bar.\n */\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  ({ percent = 0, text, height = '0.5em', ...rest }, ref) => {\n    const validPercent = useMemo(() => {\n      if (percent < 0) return 0;\n      if (percent > 100) return 100;\n      return percent;\n    }, [percent]);\n\n    const textId = useMemo(\n      () => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`,\n      []\n    );\n\n    return (\n      <Container\n        role='progressbar'\n        aria-valuenow={validPercent}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-describedby={textId}\n        {...rest}\n        ref={ref}\n      >\n        <Trail height={height}>\n          <Stroke percent={validPercent} height={height} />\n        </Trail>\n        {text && <Text id={textId}>{text}</Text>}\n      </Container>\n    );\n  }\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,SAASC,UAAU,EAAEC,gBAAgB,QAAkB,mBAAmB;AAC1E,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AAqBxC,MAAMC,SAAS,GAAGR,MAAM,CAAC,KAAK,EAAEM,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,IAAIF,UAAW;AACf,CAAC;AAGD,MAAMK,KAAK,GAAGT,MAAM,CAAC,KAAK,EAAEM,gBAAgB,CAAC,QAAQ,CAAC,CAAc;AACpE;AACA,sBAAuBI,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACC,kBAAkB,CAAE;AAC7D,mBAAoBF,CAAC,IAAM,QAAOA,CAAC,CAACG,MAAO,OAAO;AAClD;AACA,CAAC;AAGD,MAAMC,MAAM,GAAGd,MAAM,CACnB,KAAK,EACLM,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CACxB;AACf,WAAYI,CAAC,IAAKA,CAAC,CAACK,OAAQ;AAC5B,YAAaL,CAAC,IAAKA,CAAC,CAACG,MAAO;AAC5B,qBAAsBH,CAAC,IAAM,QAAOA,CAAC,CAACG,MAAO,OAAO;AACpD,MAAOH,CAAC,IAAM,QAAOA,CAAC,CAACG,MAAO,OAAO;AACrC,sBAAuBH,CAAC,IACpBA,CAAC,CAACK,OAAO,GAAG,GAAG,GACXR,GAAG,CAACG,CAAC,CAACC,KAAK,CAACK,mBAAmB,CAAC,GAChCT,GAAG,CAACG,CAAC,CAACC,KAAK,CAACM,0BAA0B,CAAE;AAChD,IAAIZ,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAE;AAClD,CAAC;AAED,MAAMa,IAAI,GAAGlB,MAAM,CAACmB,GAAI;AACxB;AACA,WAAYT,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACS,uBAAuB,CAAE;AACvD;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGnB,UAAU,CACzB,CAAC;EAAEa,OAAO,GAAG,CAAC;EAAEO,IAAI;EAAET,MAAM,GAAG,OAAO;EAAE,GAAGU;AAAK,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAMC,YAAY,GAAGtB,OAAO,CAAC,MAAM;IACjC,IAAIY,OAAO,GAAG,CAAC,EAAE,OAAO,CAAC;IACzB,IAAIA,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG;IAC7B,OAAOA,OAAO;EAChB,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMW,MAAM,GAAGvB,OAAO,CACpB,MAAO,qBAAoBwB,IAAI,CAACC,MAAM,EAAE,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAE,EAAC,EACpE,EAAE,CACH;EAED,oBACE,oBAAC,SAAS;IACR,IAAI,EAAC,aAAa;IAClB,iBAAeL,YAAa;IAC5B,iBAAe,CAAE;IACjB,iBAAe,GAAI;IACnB,oBAAkBC;EAAO,GACrBH,IAAI;IACR,GAAG,EAAEC;EAAI,iBAET,oBAAC,KAAK;IAAC,MAAM,EAAEX;EAAO,gBACpB,oBAAC,MAAM;IAAC,OAAO,EAAEY,YAAa;IAAC,MAAM,EAAEZ;EAAO,EAAG,CAC3C,EACPS,IAAI,iBAAI,oBAAC,IAAI;IAAC,EAAE,EAAEI;EAAO,GAAEJ,IAAI,CAAQ,CAC9B;AAEhB,CAAC,CACF;AAEDD,QAAQ,CAACU,WAAW,GAAG,UAAU;AAEjC,eAAeV,QAAQ"}

package/dist/esm/RadioGroup/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef } from 'react';
 import { omitEmotionProps, useForwardedState } from '@os-design/utils';
 import styled from '@emotion/styled';
@@ -7,7 +6,6 @@ import { m } from '@os-design/media';
 import { clr } from '@os-design/theming';
 import { css } from '@emotion/react';
 import Button from '../Button';
-
 const wideDefaultStyles = p => p.wide === 'default' && css`
     ${m.max.xxs} {
       width: 100%;
@@ -16,14 +14,12 @@ const wideDefaultStyles = p => p.wide === 'default' && css`
       }
     }
   `;
-
 const wideAlwaysStyles = p => p.wide === 'always' && css`
     width: 100%;
     & > button {
       flex: 1;
     }
   `;
-
 const Container = styled('div', omitEmotionProps('wide', 'disabled'))`
   display: inline-flex;
   flex-wrap: wrap;
@@ -39,10 +35,10 @@ const Container = styled('div', omitEmotionProps('wide', 'disabled'))`
 const StyledButton = styled(Button)`
   border-radius: 0;
 `;
+
 /**
  * The radio buttons that allow a user to select only one of a limited number of options.
  */
-
 const RadioGroup = /*#__PURE__*/forwardRef(({
   options = [],
   wide = 'default',

package/dist/esm/RadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","omitEmotionProps","useForwardedState","styled","m","clr","css","Button","wideDefaultStyles","p","wide","max","xxs","wideAlwaysStyles","Container","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","StyledButton","RadioGroup","options","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"sources":["../../../src/RadioGroup/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group has full width.\n   * Possible values:\n   * `default` – the radio group has full width if the screen width is less than xs;\n   * `always` – the radio group always has full width;\n   * `never` – the radio group never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>>;\nconst Container = styled(\n  'div',\n  omitEmotionProps('wide', 'disabled')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      wide = 'default',\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container wide={wide} disabled={disabled} {...rest} ref={ref}>\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                size={size}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AAEA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,kBAApD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,MAAP,MAAoC,WAApC;;AAuDA,MAAMC,iBAAiB,GAAIC,CAAD,IACxBA,CAAC,CAACC,IAAF,KAAW,SAAX,IACAJ,GAAI;AACN,MAAMF,CAAC,CAACO,GAAF,CAAMC,GAAI;AAChB;AACA;AACA;AACA;AACA;AACA,GATA;;AAWA,MAAMC,gBAAgB,GAAIJ,CAAD,IACvBA,CAAC,CAACC,IAAF,KAAW,QAAX,IACAJ,GAAI;AACN;AACA;AACA;AACA;AACA,GAPA;;AAUA,MAAMQ,SAAS,GAAGX,MAAM,CACtB,KADsB,EAEtBF,gBAAgB,CAAC,MAAD,EAAS,UAAT,CAFM,CAGN;AAClB;AACA;AACA;AACA,mBAAoBQ,CAAD,IAAOA,CAAC,CAACM,KAAF,CAAQC,YAAa;AAC/C;AACA;AACA,MAAOP,CAAD,IACAA,CAAC,CAACQ,QAAF,GACIZ,GAAG,CAACI,CAAC,CAACM,KAAF,CAAQG,4BAAT,CADP,GAEIb,GAAG,CAACI,CAAC,CAACM,KAAF,CAAQI,YAAT,CAAuB;AACpC;AACA,IAAIX,iBAAkB;AACtB,IAAIK,gBAAiB;AACrB,CAjBA;AAmBA,MAAMO,YAAY,GAAGjB,MAAM,CAACI,MAAD,CAAS;AACpC;AACA,CAFA;AAIA;AACA;AACA;;AACA,MAAMc,UAAU,gBAAGrB,UAAU,CAC3B,CACE;EACEsB,OAAO,GAAG,EADZ;EAEEZ,IAAI,GAAG,SAFT;EAGEO,QAAQ,GAAG,KAHb;EAIEM,KAJF;EAKEC,YALF;EAMEC,QAAQ,GAAG,MAAM,CAAE,CANrB;EAOEC,IAPF;EAQE,GAAGC;AARL,CADF,EAWEC,GAXF,KAYK;EACH,MAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsC5B,iBAAiB,CAAC;IAC5DqB,KAD4D;IAE5DC,YAF4D;IAG5DC;EAH4D,CAAD,CAA7D;EAMA,oBACE,8CACE,oBAAC,SAAD;IAAW,IAAI,EAAEf,IAAjB;IAAuB,QAAQ,EAAEO;EAAjC,GAA+CU,IAA/C;IAAqD,GAAG,EAAEC;EAA1D,IACGN,OAAO,EAAES,GAAT,CACC,CAAC;IACCC,KADD;IAECT,KAAK,EAAEU,WAFR;IAGChB,QAAQ,EAAEiB,cAHX;IAICC,OAAO,GAAG,MAAM,CAAE,CAJnB;IAKC,GAAGC;EALJ,CAAD,kBAOE,oBAAC,YAAD;IACE,GAAG,EAAEH,WADP;IAEE,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;IAGE,IAAI,EAAC,OAHP;IAIE,QAAQ,EAAEhB,QAAQ,IAAIiB,cAJxB;IAKE,IAAI,EAAER,IALR;IAME,OAAO,EAAGW,CAAD,IAAO;MACdP,iBAAiB,CAACG,WAAD,CAAjB;MACAE,OAAO,CAACE,CAAD,CAAP;IACD;EATH,GAUMD,UAVN,GAYGJ,KAZH,CARH,CADH,CADF,CADF;AA8BD,CAlD0B,CAA7B;AAqDAX,UAAU,CAACiB,WAAX,GAAyB,YAAzB;AAEA,eAAejB,UAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","omitEmotionProps","useForwardedState","styled","m","clr","css","Button","wideDefaultStyles","p","wide","max","xxs","wideAlwaysStyles","Container","theme","borderRadius","disabled","buttonDisabledGhostColorText","colorPrimary","StyledButton","RadioGroup","options","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","e","displayName"],"sources":["../../../src/RadioGroup/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n  /**\n   * The title of the option.\n   */\n  title: string;\n  /**\n   * The value of the option.\n   */\n  value: string;\n}\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n  /**\n   * Options of the radio group.\n   * @default undefined\n   */\n  options?: RadioGroupOption[];\n  /**\n   * Whether the radio group has full width.\n   * Possible values:\n   * `default` – the radio group has full width if the screen width is less than xs;\n   * `always` – the radio group always has full width;\n   * `never` – the radio group never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Whether the radio group is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Selected option.\n   * @default false\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  `;\n\ntype ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>>;\nconst Container = styled(\n  'div',\n  omitEmotionProps('wide', 'disabled')\n)<ContainerProps>`\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  border: 1px solid\n    ${(p) =>\n      p.disabled\n        ? clr(p.theme.buttonDisabledGhostColorText)\n        : clr(p.theme.colorPrimary)};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n`;\n\nconst StyledButton = styled(Button)`\n  border-radius: 0;\n`;\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      options = [],\n      wide = 'default',\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <div>\n        <Container wide={wide} disabled={disabled} {...rest} ref={ref}>\n          {options?.map(\n            ({\n              title,\n              value: valueOption,\n              disabled: disabledOption,\n              onClick = () => {},\n              ...buttonRest\n            }) => (\n              <StyledButton\n                key={valueOption}\n                type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n                wide='never'\n                disabled={disabled || disabledOption}\n                size={size}\n                onClick={(e) => {\n                  setForwardedValue(valueOption);\n                  onClick(e);\n                }}\n                {...buttonRest}\n              >\n                {title}\n              </StyledButton>\n            )\n          )}\n        </Container>\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,kBAAkB;AACtE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAuB,WAAW;AAuD/C,MAAMC,iBAAiB,GAAIC,CAAC,IAC1BA,CAAC,CAACC,IAAI,KAAK,SAAS,IACpBJ,GAAI;AACN,MAAMF,CAAC,CAACO,GAAG,CAACC,GAAI;AAChB;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,MAAMC,gBAAgB,GAAIJ,CAAC,IACzBA,CAAC,CAACC,IAAI,KAAK,QAAQ,IACnBJ,GAAI;AACN;AACA;AACA;AACA;AACA,GAAG;AAGH,MAAMQ,SAAS,GAAGX,MAAM,CACtB,KAAK,EACLF,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CACpB;AAClB;AACA;AACA;AACA,mBAAoBQ,CAAC,IAAKA,CAAC,CAACM,KAAK,CAACC,YAAa;AAC/C;AACA;AACA,MAAOP,CAAC,IACFA,CAAC,CAACQ,QAAQ,GACNZ,GAAG,CAACI,CAAC,CAACM,KAAK,CAACG,4BAA4B,CAAC,GACzCb,GAAG,CAACI,CAAC,CAACM,KAAK,CAACI,YAAY,CAAE;AACpC;AACA,IAAIX,iBAAkB;AACtB,IAAIK,gBAAiB;AACrB,CAAC;AAED,MAAMO,YAAY,GAAGjB,MAAM,CAACI,MAAM,CAAE;AACpC;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMc,UAAU,gBAAGrB,UAAU,CAC3B,CACE;EACEsB,OAAO,GAAG,EAAE;EACZZ,IAAI,GAAG,SAAS;EAChBO,QAAQ,GAAG,KAAK;EAChBM,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAG,MAAM,CAAC,CAAC;EACnBC,IAAI;EACJ,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG5B,iBAAiB,CAAC;IAC5DqB,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF,oBACE,8CACE,oBAAC,SAAS;IAAC,IAAI,EAAEf,IAAK;IAAC,QAAQ,EAAEO;EAAS,GAAKU,IAAI;IAAE,GAAG,EAAEC;EAAI,IAC3DN,OAAO,EAAES,GAAG,CACX,CAAC;IACCC,KAAK;IACLT,KAAK,EAAEU,WAAW;IAClBhB,QAAQ,EAAEiB,cAAc;IACxBC,OAAO,GAAG,MAAM,CAAC,CAAC;IAClB,GAAGC;EACL,CAAC,kBACC,oBAAC,YAAY;IACX,GAAG,EAAEH,WAAY;IACjB,IAAI,EAAEJ,cAAc,KAAKI,WAAW,GAAG,SAAS,GAAG,OAAQ;IAC3D,IAAI,EAAC,OAAO;IACZ,QAAQ,EAAEhB,QAAQ,IAAIiB,cAAe;IACrC,IAAI,EAAER,IAAK;IACX,OAAO,EAAGW,CAAC,IAAK;MACdP,iBAAiB,CAACG,WAAW,CAAC;MAC9BE,OAAO,CAACE,CAAC,CAAC;IACZ;EAAE,GACED,UAAU,GAEbJ,KAAK,CAET,CACF,CACS,CACR;AAEV,CAAC,CACF;AAEDX,UAAU,CAACiB,WAAW,GAAG,YAAY;AAErC,eAAejB,UAAU"}

package/dist/esm/RadioGroupSkeleton/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef } from 'react';
 import { sizeStyles } from '@os-design/styles';
@@ -9,10 +8,10 @@ const StyledRadioGroupSkeleton = styled(Skeleton, omitEmotionProps('size'))`
   height: calc(${p => p.theme.baseHeight}em + 2px);
   ${sizeStyles};
 `;
+
 /**
  * Provides a radio group placeholder while a user waits for the content to load.
  */
-
 const RadioGroupSkeleton = /*#__PURE__*/forwardRef(({
   width = '10em',
   ...rest

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledRadioGroupSkeleton","p","theme","baseHeight","RadioGroupSkeleton","width","rest","ref","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,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAwC,aAAxC;AAUA,MAAMC,wBAAwB,GAAGN,MAAM,CACrCK,QADqC,EAErCD,gBAAgB,CAAC,MAAD,CAFqB,CAG3B;AACZ,iBAAkBG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,UAAW;AAC3C,IAAIN,UAAW;AACf,CANA;AAQA;AACA;AACA;;AACA,MAAMO,kBAAkB,gBAAGR,UAAU,CACnC,CAAC;EAAES,KAAK,GAAG,MAAV;EAAkB,GAAGC;AAArB,CAAD,EAA8BC,GAA9B,kBACE,oBAAC,wBAAD;EAA0B,KAAK,EAAEF;AAAjC,GAA4CC,IAA5C;EAAkD,GAAG,EAAEC;AAAvD,GAFiC,CAArC;AAMAH,kBAAkB,CAACI,WAAnB,GAAiC,oBAAjC;AAEA,eAAeJ,kBAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledRadioGroupSkeleton","p","theme","baseHeight","RadioGroupSkeleton","width","rest","ref","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,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,QAAQ,MAAyB,aAAa;AAUrD,MAAMC,wBAAwB,GAAGN,MAAM,CACrCK,QAAQ,EACRD,gBAAgB,CAAC,MAAM,CAAC,CACd;AACZ,iBAAkBG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,UAAW;AAC3C,IAAIN,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMO,kBAAkB,gBAAGR,UAAU,CACnC,CAAC;EAAES,KAAK,GAAG,MAAM;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC/B,oBAAC,wBAAwB;EAAC,KAAK,EAAEF;AAAM,GAAKC,IAAI;EAAE,GAAG,EAAEC;AAAI,GAC5D,CACF;AAEDH,kBAAkB,CAACI,WAAW,GAAG,oBAAoB;AAErD,eAAeJ,kBAAkB"}

package/dist/esm/Result/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { sizeStyles } from '@os-design/styles';
@@ -59,11 +58,11 @@ const ActiveElements = styled.div`
 const ChildrenContainer = styled.div`
   margin-top: 2em;
 `;
+
 /**
  * Used to give the user feedback instead of results.
  * For example, error happened, results not found, no results yet.
  */
-
 const Result = /*#__PURE__*/forwardRef(({
   title,
   description,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","sizeStyles","omitEmotionProps","clr","m","Container","p","theme","colorText","IconContainer","div","resultColorIcon","Text","Title","sizes","large","Description","small","resultColorDescription","ActiveElements","min","sm","ChildrenContainer","Result","title","description","icon","actions","children","rest","ref","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,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AAyBA,MAAMC,SAAS,GAAGL,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQC,SAAT,CAAoB;AACzC;AACA;AACA,IAAIP,UAAW;AACf,CATA;AAWA,MAAMQ,aAAa,GAAGT,MAAM,CAACU,GAAI;AACjC;AACA;AACA,WAAYJ,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQI,eAAT,CAA0B;AAC/C;AACA,CALA;AAOA,MAAMC,IAAI,GAAGZ,MAAM,CAACU,GAAI;AACxB;AACA;AACA,CAHA;AAKA,MAAMG,KAAK,GAAGb,MAAM,CAACY,IAAD,CAAO;AAC3B,eAAgBN,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQO,KAAR,CAAcC,KAAM;AAC1C;AACA,CAHA;AAKA,MAAMC,WAAW,GAAGhB,MAAM,CAACY,IAAD,CAAO;AACjC,eAAgBN,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQO,KAAR,CAAcG,KAAM;AAC1C,WAAYX,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQW,sBAAT,CAAiC;AACtD;AACA,CAJA;AAMA,MAAMC,cAAc,GAAGnB,MAAM,CAACU,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIN,CAAC,CAACgB,GAAF,CAAMC,EAAG;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CApBA;AAsBA,MAAMC,iBAAiB,GAAGtB,MAAM,CAACU,GAAI;AACrC;AACA,CAFA;AAIA;AACA;AACA;AACA;;AACA,MAAMa,MAAM,gBAAGxB,UAAU,CACvB,CAAC;EAAEyB,KAAF;EAASC,WAAT;EAAsBC,IAAtB;EAA4BC,OAA5B;EAAqCC,QAArC;EAA+C,GAAGC;AAAlD,CAAD,EAA2DC,GAA3D,kBACE,oBAAC,SAAD,eAAeD,IAAf;EAAqB,GAAG,EAAEC;AAA1B,IACGJ,IAAI,iBAAI,oBAAC,aAAD,QAAgBA,IAAhB,CADX,eAEE,oBAAC,KAAD,QAAQF,KAAR,CAFF,EAGGC,WAAW,iBAAI,oBAAC,WAAD,QAAcA,WAAd,CAHlB,EAIGE,OAAO,iBAAI,oBAAC,cAAD,QAAiBA,OAAjB,CAJd,EAKGC,QAAQ,iBAAI,oBAAC,iBAAD,QAAoBA,QAApB,CALf,CAFqB,CAAzB;AAYAL,MAAM,CAACQ,WAAP,GAAqB,QAArB;AAEA,eAAeR,MAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","sizeStyles","omitEmotionProps","clr","m","Container","p","theme","colorText","IconContainer","div","resultColorIcon","Text","Title","sizes","large","Description","small","resultColorDescription","ActiveElements","min","sm","ChildrenContainer","Result","title","description","icon","actions","children","rest","ref","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,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,CAAC,QAAQ,kBAAkB;AAyBpC,MAAMC,SAAS,GAAGL,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA;AACA,IAAIP,UAAW;AACf,CAAC;AAED,MAAMQ,aAAa,GAAGT,MAAM,CAACU,GAAI;AACjC;AACA;AACA,WAAYJ,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACI,eAAe,CAAE;AAC/C;AACA,CAAC;AAED,MAAMC,IAAI,GAAGZ,MAAM,CAACU,GAAI;AACxB;AACA;AACA,CAAC;AAED,MAAMG,KAAK,GAAGb,MAAM,CAACY,IAAI,CAAE;AAC3B,eAAgBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACO,KAAK,CAACC,KAAM;AAC1C;AACA,CAAC;AAED,MAAMC,WAAW,GAAGhB,MAAM,CAACY,IAAI,CAAE;AACjC,eAAgBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACO,KAAK,CAACG,KAAM;AAC1C,WAAYX,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACW,sBAAsB,CAAE;AACtD;AACA,CAAC;AAED,MAAMC,cAAc,GAAGnB,MAAM,CAACU,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIN,CAAC,CAACgB,GAAG,CAACC,EAAG;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,iBAAiB,GAAGtB,MAAM,CAACU,GAAI;AACrC;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA,MAAMa,MAAM,gBAAGxB,UAAU,CACvB,CAAC;EAAEyB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC5D,oBAAC,SAAS,eAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,IAC3BJ,IAAI,iBAAI,oBAAC,aAAa,QAAEA,IAAI,CAAiB,eAC9C,oBAAC,KAAK,QAAEF,KAAK,CAAS,EACrBC,WAAW,iBAAI,oBAAC,WAAW,QAAEA,WAAW,CAAe,EACvDE,OAAO,iBAAI,oBAAC,cAAc,QAAEA,OAAO,CAAkB,EACrDC,QAAQ,iBAAI,oBAAC,iBAAiB,QAAEA,QAAQ,CAAqB,CAEjE,CACF;AAEDL,MAAM,CAACQ,WAAW,GAAG,QAAQ;AAE7B,eAAeR,MAAM"}

package/dist/esm/ScrollButton/index.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { forwardRef, useCallback } from 'react';
 import { Up, Down } from '@os-design/icons';
 import styled from '@emotion/styled';
@@ -18,15 +17,12 @@ const fadeOut = keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
-
 const visibleStyles = p => p.visible && css`
     animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const invisibleStyles = p => !p.visible && css`
     animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const StyledButton = styled(Button, omitEmotionProps('visible', 'containerPosition'))`
   position: fixed;
   right: ${p => p.containerPosition.right > 0 ? `calc(${p.containerPosition.right}px + ${p.theme.scrollButtonMargin}em)` : `${p.theme.scrollButtonMargin}em`};
@@ -36,10 +32,10 @@ const StyledButton = styled(Button, omitEmotionProps('visible', 'containerPositi
   ${visibleStyles};
   ${invisibleStyles};
 `;
+
 /**
  * The button to scroll to either the top or bottom of the container.
  */
-
 const ScrollButton = /*#__PURE__*/forwardRef(({
   container,
   scrollTo = 'top',
@@ -56,8 +52,9 @@ const ScrollButton = /*#__PURE__*/forwardRef(({
   const {
     theme
   } = useTheme();
-  const mounted = useClosable(visible, theme.transitionDelay); // Scroll through the container when the user clicks the button
+  const mounted = useClosable(visible, theme.transitionDelay);
 
+  // Scroll through the container when the user clicks the button
   const clickHandler = useCallback(e => {
     // Scroll the window if the container is not defined
     if (!container) {
@@ -65,15 +62,16 @@ const ScrollButton = /*#__PURE__*/forwardRef(({
         top: scrollTo === 'top' ? 0 : document.body.scrollHeight
       });
       return;
-    } // Otherwise scroll the container
-
+    }
 
+    // Otherwise scroll the container
     const 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/esm/ScrollButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","Up","Down","styled","useClosable","omitEmotionProps","clr","ThemeOverrider","useTheme","css","keyframes","Portal","Button","useContainerPosition","useVisibility","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","StyledButton","containerPosition","right","scrollButtonMargin","bottom","scrollButtonColorBoxShadow","ScrollButton","container","scrollTo","minOffset","onClick","rest","ref","mounted","clickHandler","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":["React","forwardRef","useCallback","Up","Down","styled","useClosable","omitEmotionProps","clr","ThemeOverrider","useTheme","css","keyframes","Portal","Button","useContainerPosition","useVisibility","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","StyledButton","containerPosition","right","scrollButtonMargin","bottom","scrollButtonColorBoxShadow","ScrollButton","container","scrollTo","minOffset","onClick","rest","ref","mounted","clickHandler","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/esm/ScrollButton/utils/useContainerPosition.js

@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'react';
 import { useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';
-
 /**
  * Calculates the position of the container.
  */
@@ -30,6 +29,5 @@ const useContainerPosition = container => {
   useResizeObserver(container, updatePosition);
   return position;
 };
-
 export default useContainerPosition;
 //# sourceMappingURL=useContainerPosition.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useContainerPosition.js","names":["useCallback","useState","useResizeObserver","useBrowserLayoutEffect","useContainerPosition","container","position","setPosition","right","bottom","updatePosition","element","Element","current","getBoundingClientRect","innerWidth","innerHeight","window"],"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,SAAoBA,WAApB,EAAiCC,QAAjC,QAAiD,OAAjD;AACA,SAASC,iBAAT,EAA4BC,sBAA5B,QAA0D,kBAA1D;;AAOA;AACA;AACA;AACA,MAAMC,oBAAoB,GACxBC,SAD2B,IAEL;EACtB,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BN,QAAQ,CAAoB;IAC1DO,KAAK,EAAE,CADmD;IAE1DC,MAAM,EAAE;EAFkD,CAApB,CAAxC;EAKA,MAAMC,cAAc,GAAGV,WAAW,CAAC,MAAM;IACvC,IAAI,CAACK,SAAL,EAAgB;IAChB,MAAMM,OAAO,GACXN,SAAS,YAAYO,OAArB,GAA+BP,SAA/B,GAA2CA,SAAS,CAACQ,OADvD;IAEA,IAAI,CAACF,OAAL,EAAc;IAEd,MAAM;MAAEH,KAAF;MAASC;IAAT,IAAoBE,OAAO,CAACG,qBAAR,EAA1B;IACA,MAAM;MAAEC,UAAF;MAAcC;IAAd,IAA8BC,MAApC;IAEAV,WAAW,CAAC;MACVC,KAAK,EAAEO,UAAU,GAAGP,KADV;MAEVC,MAAM,EAAEO,WAAW,GAAGP;IAFZ,CAAD,CAAX;EAID,CAbiC,EAa/B,CAACJ,SAAD,CAb+B,CAAlC;EAeAF,sBAAsB,CAAC,MAAMO,cAAc,EAArB,EAAyB,CAACA,cAAD,CAAzB,CAAtB;EACAR,iBAAiB,CAACG,SAAD,EAAqBK,cAArB,CAAjB;EAEA,OAAOJ,QAAP;AACD,CA3BD;;AA6BA,eAAeF,oBAAf"}
+{"version":3,"file":"useContainerPosition.js","names":["useCallback","useState","useResizeObserver","useBrowserLayoutEffect","useContainerPosition","container","position","setPosition","right","bottom","updatePosition","element","Element","current","getBoundingClientRect","innerWidth","innerHeight","window"],"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,SAAoBA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACxD,SAASC,iBAAiB,EAAEC,sBAAsB,QAAQ,kBAAkB;AAO5E;AACA;AACA;AACA,MAAMC,oBAAoB,GACxBC,SAAwC,IAClB;EACtB,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGN,QAAQ,CAAoB;IAC1DO,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAGV,WAAW,CAAC,MAAM;IACvC,IAAI,CAACK,SAAS,EAAE;IAChB,MAAMM,OAAO,GACXN,SAAS,YAAYO,OAAO,GAAGP,SAAS,GAAGA,SAAS,CAACQ,OAAO;IAC9D,IAAI,CAACF,OAAO,EAAE;IAEd,MAAM;MAAEH,KAAK;MAAEC;IAAO,CAAC,GAAGE,OAAO,CAACG,qBAAqB,EAAE;IACzD,MAAM;MAAEC,UAAU;MAAEC;IAAY,CAAC,GAAGC,MAAM;IAE1CV,WAAW,CAAC;MACVC,KAAK,EAAEO,UAAU,GAAGP,KAAK;MACzBC,MAAM,EAAEO,WAAW,GAAGP;IACxB,CAAC,CAAC;EACJ,CAAC,EAAE,CAACJ,SAAS,CAAC,CAAC;EAEfF,sBAAsB,CAAC,MAAMO,cAAc,EAAE,EAAE,CAACA,cAAc,CAAC,CAAC;EAChER,iBAAiB,CAACG,SAAS,EAAWK,cAAc,CAAC;EAErD,OAAOJ,QAAQ;AACjB,CAAC;AAED,eAAeF,oBAAoB"}

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

@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'react';
 import { useEvent, useBrowserLayoutEffect } from '@os-design/utils';
-
 /**
  * Controls the visibility of the button.
  */
@@ -9,11 +8,11 @@ const useVisibility = ({
   scrollTo,
   minOffset
 }) => {
-  const [visible, setVisible] = useState(false); // Update the visibility of the button when the user scrolls the container
+  const [visible, setVisible] = useState(false);
 
+  // Update the visibility of the button when the user scrolls the container
   const updateVisibility = useCallback(() => {
     let offset = 0;
-
     if (!container) {
       offset = scrollTo === 'top' ? window.scrollY : document.body.scrollHeight - window.scrollY - window.innerHeight;
     } else {
@@ -21,13 +20,11 @@ const useVisibility = ({
       if (containerElement === null) return;
       offset = scrollTo === 'top' ? containerElement.scrollTop : containerElement.scrollHeight - containerElement.scrollTop - containerElement.clientHeight;
     }
-
     setVisible(offset >= minOffset);
   }, [container, scrollTo, minOffset]);
   useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);
   useEvent(container || (typeof window !== 'undefined' ? window : undefined), 'scroll', updateVisibility);
   return visible;
 };
-
 export default useVisibility;
 //# sourceMappingURL=useVisibility.js.map