@os-design/core 1.0.155 → 1.0.157

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

@@ -4,67 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _utils = require("@os-design/utils");
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var popoverPositionGetters = function popoverPositionGetters(rectKey) {
   var sizeKey = rectKey === 'top' ? 'height' : 'width';
   var windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';
   var windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';
-
   var fitToWindow = function fitToWindow(start, _ref) {
     var elementRect = _ref.elementRect,
-        popoverRect = _ref.popoverRect;
+      popoverRect = _ref.popoverRect;
     var popoverStart = start;
     var windowStart = window[windowOffsetKey];
     var windowEnd = windowStart + window[windowSizeKey];
     var elementStart = windowStart + elementRect[rectKey];
     var elementEnd = elementStart + elementRect[sizeKey];
-    var popoverEnd = popoverStart + popoverRect[sizeKey]; // Fit the popover to the end of the window
+    var 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: function before(options) {
       var elementRect = options.elementRect,
-          popoverRect = options.popoverRect,
-          gap = options.gap,
-          flip = options.flip;
+        popoverRect = options.popoverRect,
+        gap = options.gap,
+        flip = options.flip;
       var windowStart = window[windowOffsetKey];
       var windowEnd = windowStart + window[windowSizeKey];
       var elementStart = windowStart + elementRect[rectKey];
       var popoverStart = elementStart - popoverRect[sizeKey] - gap;
-
       if (flip && popoverStart < windowStart) {
         var afterPopoverStart = this.after(_objectSpread(_objectSpread({}, options), {}, {
           flip: false
@@ -74,21 +59,19 @@ var popoverPositionGetters = function popoverPositionGetters(rectKey) {
         var diffEnd = afterPopoverEnd - windowEnd;
         if (afterPopoverEnd <= windowEnd || diffStart > diffEnd) return afterPopoverStart;
       }
-
       return popoverStart;
     },
     after: function after(options) {
       var elementRect = options.elementRect,
-          popoverRect = options.popoverRect,
-          gap = options.gap,
-          flip = options.flip;
+        popoverRect = options.popoverRect,
+        gap = options.gap,
+        flip = options.flip;
       var windowStart = window[windowOffsetKey];
       var windowEnd = windowStart + window[windowSizeKey];
       var elementStart = windowStart + elementRect[rectKey];
       var elementEnd = elementStart + elementRect[sizeKey];
       var popoverStart = elementEnd + gap;
       var popoverEnd = popoverStart + popoverRect[sizeKey];
-
       if (flip && popoverEnd > windowEnd) {
         var beforePopoverStart = this.before(_objectSpread(_objectSpread({}, options), {}, {
           flip: false
@@ -97,12 +80,11 @@ var popoverPositionGetters = function popoverPositionGetters(rectKey) {
         var diffEnd = popoverEnd - windowEnd;
         if (beforePopoverStart >= windowStart || diffEnd > diffStart) return beforePopoverStart;
       }
-
       return popoverStart;
     },
     start: function start(_ref2) {
       var elementRect = _ref2.elementRect,
-          popoverRect = _ref2.popoverRect;
+        popoverRect = _ref2.popoverRect;
       var windowStart = window[windowOffsetKey];
       var elementStart = windowStart + elementRect[rectKey];
       return fitToWindow(elementStart, {
@@ -112,7 +94,7 @@ var popoverPositionGetters = function popoverPositionGetters(rectKey) {
     },
     end: function end(_ref3) {
       var elementRect = _ref3.elementRect,
-          popoverRect = _ref3.popoverRect;
+        popoverRect = _ref3.popoverRect;
       var windowStart = window[windowOffsetKey];
       var elementStart = windowStart + elementRect[rectKey];
       var elementEnd = elementStart + elementRect[sizeKey];
@@ -124,7 +106,7 @@ var popoverPositionGetters = function popoverPositionGetters(rectKey) {
     },
     center: function center(_ref4) {
       var elementRect = _ref4.elementRect,
-          popoverRect = _ref4.popoverRect;
+        popoverRect = _ref4.popoverRect;
       var windowStart = window[windowOffsetKey];
       var elementStart = windowStart + elementRect[rectKey];
       var popoverStart = elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;
@@ -135,14 +117,12 @@ var popoverPositionGetters = function popoverPositionGetters(rectKey) {
     }
   };
 };
-
 var getPopoverPosition = function getPopoverPosition(top, left, options) {
   return {
     top: popoverPositionGetters('top')[top](options),
     left: popoverPositionGetters('left')[left](options)
   };
 };
-
 var placementPositionKeysMap = {
   top: ['before', 'center'],
   bottom: ['after', 'center'],
@@ -157,7 +137,6 @@ var 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,13 +144,13 @@ var placementPositionKeysMap = {
  */
 var usePopoverPosition = function usePopoverPosition(_ref5) {
   var elementRect = _ref5.elementRect,
-      popoverRect = _ref5.popoverRect,
-      _ref5$placement = _ref5.placement,
-      placement = _ref5$placement === void 0 ? 'top' : _ref5$placement,
-      _ref5$gap = _ref5.gap,
-      gap = _ref5$gap === void 0 ? 0.5 : _ref5$gap,
-      _ref5$flip = _ref5.flip,
-      flip = _ref5$flip === void 0 ? true : _ref5$flip;
+    popoverRect = _ref5.popoverRect,
+    _ref5$placement = _ref5.placement,
+    placement = _ref5$placement === void 0 ? 'top' : _ref5$placement,
+    _ref5$gap = _ref5.gap,
+    gap = _ref5$gap === void 0 ? 0.5 : _ref5$gap,
+    _ref5$flip = _ref5.flip,
+    flip = _ref5$flip === void 0 ? true : _ref5$flip;
   var bodyFontSize = (0, _utils.useFontSize)(document.body);
   var gapPx = (0, _react.useMemo)(function () {
     return gap * bodyFontSize;
@@ -187,7 +166,6 @@ var usePopoverPosition = function usePopoverPosition(_ref5) {
     flip: flip
   }]));
 };
-
 var _default = usePopoverPosition;
 exports["default"] = _default;
 //# sourceMappingURL=usePopoverPosition.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePopoverPosition.js","names":["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","useFontSize","document","body","gapPx","useMemo","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":["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","useFontSize","document","body","gapPx","useMemo","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":";;;;;;AAAA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiE/C,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,CAC1BC,OAAuB,EACI;EAC3B,IAAMC,OAAO,GAAGD,OAAO,KAAK,KAAK,GAAG,QAAQ,GAAG,OAAO;EACtD,IAAME,aAAa,GAAGF,OAAO,KAAK,KAAK,GAAG,aAAa,GAAG,YAAY;EACtE,IAAMG,eAAe,GAAGH,OAAO,KAAK,KAAK,GAAG,aAAa,GAAG,aAAa;EAEzE,IAAMI,WAAW,GAAG,SAAdA,WAAW,CACfC,KAAa,QAEF;IAAA,IADTC,WAAW,QAAXA,WAAW;MAAEC,WAAW,QAAXA,WAAW;IAE1B,IAAIC,YAAY,GAAGH,KAAK;IACxB,IAAMI,WAAW,GAAGC,MAAM,CAACP,eAAe,CAAC;IAC3C,IAAMQ,SAAS,GAAGF,WAAW,GAAGC,MAAM,CAACR,aAAa,CAAC;IACrD,IAAMU,YAAY,GAAGH,WAAW,GAAGH,WAAW,CAACN,OAAO,CAAC;IACvD,IAAMa,UAAU,GAAGD,YAAY,GAAGN,WAAW,CAACL,OAAO,CAAC;IACtD,IAAMa,UAAU,GAAGN,YAAY,GAAGD,WAAW,CAACN,OAAO,CAAC;;IAEtD;IACA,IAAIa,UAAU,GAAGH,SAAS,EAAE;MAC1B,IAAIE,UAAU,GAAGF,SAAS,EACxBH,YAAY,GAAGG,SAAS,GAAGJ,WAAW,CAACN,OAAO,CAAC,CAAC,KAC7C,IAAIM,WAAW,CAACN,OAAO,CAAC,GAAGK,WAAW,CAACL,OAAO,CAAC,EAClDO,YAAY,GAAGK,UAAU,GAAGN,WAAW,CAACN,OAAO,CAAC,CAAC,KAC9C,IAAIU,SAAS,GAAGC,YAAY,GAAGL,WAAW,CAACN,OAAO,CAAC,EACtDO,YAAY,GAAGG,SAAS,GAAGJ,WAAW,CAACN,OAAO,CAAC,CAAC,KAC7CO,YAAY,GAAGI,YAAY;IAClC;;IAEA;IACA,IAAIJ,YAAY,GAAGC,WAAW,EAAE;MAC9B,IAAIG,YAAY,GAAGH,WAAW,EAAED,YAAY,GAAGC,WAAW,CAAC,KACtD,IAAIF,WAAW,CAACN,OAAO,CAAC,GAAGK,WAAW,CAACL,OAAO,CAAC,EAClDO,YAAY,GAAGI,YAAY,CAAC,KACzB,IAAIC,UAAU,GAAGJ,WAAW,GAAGF,WAAW,CAACN,OAAO,CAAC,EACtDO,YAAY,GAAGC,WAAW,CAAC,KACxBD,YAAY,GAAGK,UAAU,GAAGN,WAAW,CAACN,OAAO,CAAC;IACvD;IAEA,OAAOO,YAAY;EACrB,CAAC;EAED,OAAO;IACLO,MAAM,kBAACC,OAAO,EAAE;MACd,IAAQV,WAAW,GAA6BU,OAAO,CAA/CV,WAAW;QAAEC,WAAW,GAAgBS,OAAO,CAAlCT,WAAW;QAAEU,GAAG,GAAWD,OAAO,CAArBC,GAAG;QAAEC,IAAI,GAAKF,OAAO,CAAhBE,IAAI;MAC3C,IAAMT,WAAW,GAAGC,MAAM,CAACP,eAAe,CAAC;MAC3C,IAAMQ,SAAS,GAAGF,WAAW,GAAGC,MAAM,CAACR,aAAa,CAAC;MACrD,IAAMU,YAAY,GAAGH,WAAW,GAAGH,WAAW,CAACN,OAAO,CAAC;MACvD,IAAMQ,YAAY,GAAGI,YAAY,GAAGL,WAAW,CAACN,OAAO,CAAC,GAAGgB,GAAG;MAC9D,IAAIC,IAAI,IAAIV,YAAY,GAAGC,WAAW,EAAE;QACtC,IAAMU,iBAAiB,GAAG,IAAI,CAACC,KAAK,iCAAMJ,OAAO;UAAEE,IAAI,EAAE;QAAK,GAAG;QACjE,IAAMG,eAAe,GAAGF,iBAAiB,GAAGZ,WAAW,CAACN,OAAO,CAAC;QAChE,IAAMqB,SAAS,GAAGb,WAAW,GAAGD,YAAY;QAC5C,IAAMe,OAAO,GAAGF,eAAe,GAAGV,SAAS;QAC3C,IAAIU,eAAe,IAAIV,SAAS,IAAIW,SAAS,GAAGC,OAAO,EACrD,OAAOJ,iBAAiB;MAC5B;MACA,OAAOX,YAAY;IACrB,CAAC;IACDY,KAAK,iBAACJ,OAAO,EAAE;MACb,IAAQV,WAAW,GAA6BU,OAAO,CAA/CV,WAAW;QAAEC,WAAW,GAAgBS,OAAO,CAAlCT,WAAW;QAAEU,GAAG,GAAWD,OAAO,CAArBC,GAAG;QAAEC,IAAI,GAAKF,OAAO,CAAhBE,IAAI;MAC3C,IAAMT,WAAW,GAAGC,MAAM,CAACP,eAAe,CAAC;MAC3C,IAAMQ,SAAS,GAAGF,WAAW,GAAGC,MAAM,CAACR,aAAa,CAAC;MACrD,IAAMU,YAAY,GAAGH,WAAW,GAAGH,WAAW,CAACN,OAAO,CAAC;MACvD,IAAMa,UAAU,GAAGD,YAAY,GAAGN,WAAW,CAACL,OAAO,CAAC;MACtD,IAAMO,YAAY,GAAGK,UAAU,GAAGI,GAAG;MACrC,IAAMH,UAAU,GAAGN,YAAY,GAAGD,WAAW,CAACN,OAAO,CAAC;MACtD,IAAIiB,IAAI,IAAIJ,UAAU,GAAGH,SAAS,EAAE;QAClC,IAAMa,kBAAkB,GAAG,IAAI,CAACT,MAAM,iCAAMC,OAAO;UAAEE,IAAI,EAAE;QAAK,GAAG;QACnE,IAAMI,SAAS,GAAGb,WAAW,GAAGe,kBAAkB;QAClD,IAAMD,OAAO,GAAGT,UAAU,GAAGH,SAAS;QACtC,IAAIa,kBAAkB,IAAIf,WAAW,IAAIc,OAAO,GAAGD,SAAS,EAC1D,OAAOE,kBAAkB;MAC7B;MACA,OAAOhB,YAAY;IACrB,CAAC;IACDH,KAAK,EAAE,sBAAkC;MAAA,IAA/BC,WAAW,SAAXA,WAAW;QAAEC,WAAW,SAAXA,WAAW;MAChC,IAAME,WAAW,GAAGC,MAAM,CAACP,eAAe,CAAC;MAC3C,IAAMS,YAAY,GAAGH,WAAW,GAAGH,WAAW,CAACN,OAAO,CAAC;MACvD,OAAOI,WAAW,CAACQ,YAAY,EAAE;QAAEN,WAAW,EAAXA,WAAW;QAAEC,WAAW,EAAXA;MAAY,CAAC,CAAC;IAChE,CAAC;IACDkB,GAAG,EAAE,oBAAkC;MAAA,IAA/BnB,WAAW,SAAXA,WAAW;QAAEC,WAAW,SAAXA,WAAW;MAC9B,IAAME,WAAW,GAAGC,MAAM,CAACP,eAAe,CAAC;MAC3C,IAAMS,YAAY,GAAGH,WAAW,GAAGH,WAAW,CAACN,OAAO,CAAC;MACvD,IAAMa,UAAU,GAAGD,YAAY,GAAGN,WAAW,CAACL,OAAO,CAAC;MACtD,IAAMO,YAAY,GAAGK,UAAU,GAAGN,WAAW,CAACN,OAAO,CAAC;MACtD,OAAOG,WAAW,CAACI,YAAY,EAAE;QAAEF,WAAW,EAAXA,WAAW;QAAEC,WAAW,EAAXA;MAAY,CAAC,CAAC;IAChE,CAAC;IACDmB,MAAM,EAAE,uBAAkC;MAAA,IAA/BpB,WAAW,SAAXA,WAAW;QAAEC,WAAW,SAAXA,WAAW;MACjC,IAAME,WAAW,GAAGC,MAAM,CAACP,eAAe,CAAC;MAC3C,IAAMS,YAAY,GAAGH,WAAW,GAAGH,WAAW,CAACN,OAAO,CAAC;MACvD,IAAMQ,YAAY,GAChBI,YAAY,GAAG,CAACN,WAAW,CAACL,OAAO,CAAC,GAAGM,WAAW,CAACN,OAAO,CAAC,IAAI,CAAC;MAClE,OAAOG,WAAW,CAACI,YAAY,EAAE;QAAEF,WAAW,EAAXA,WAAW;QAAEC,WAAW,EAAXA;MAAY,CAAC,CAAC;IAChE;EACF,CAAC;AACH,CAAC;AAED,IAAMoB,kBAAkB,GAAG,SAArBA,kBAAkB,CACtBC,GAAiB,EACjBC,IAAkB,EAClBb,OAAqC;EAAA,OACjC;IACJY,GAAG,EAAE7B,sBAAsB,CAAC,KAAK,CAAC,CAAC6B,GAAG,CAAC,CAACZ,OAAO,CAAC;IAChDa,IAAI,EAAE9B,sBAAsB,CAAC,MAAM,CAAC,CAAC8B,IAAI,CAAC,CAACb,OAAO;EACpD,CAAC;AAAA,CAAC;AAGF,IAAMc,wBAAkD,GAAG;EACzDF,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;EACzBG,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;EAC3BF,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;EAC1BG,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;EAC1B,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;EAChC,SAAS,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;EAC5B,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;EAClC,YAAY,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;EAC9B,YAAY,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;EACjC,UAAU,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;EAC7B,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;EACjC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO;AAC9B,CAAC;AAOD;AACA;AACA;AACA;AACA;AACA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,QAMwB;EAAA,IAL9C3B,WAAW,SAAXA,WAAW;IACXC,WAAW,SAAXA,WAAW;IAAA,wBACX2B,SAAS;IAATA,SAAS,gCAAG,KAAK;IAAA,kBACjBjB,GAAG;IAAHA,GAAG,0BAAG,GAAG;IAAA,mBACTC,IAAI;IAAJA,IAAI,2BAAG,IAAI;EAEX,IAAMiB,YAAY,GAAG,IAAAC,kBAAW,EAACC,QAAQ,CAACC,IAAI,CAAC;EAC/C,IAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC;IAAA,OAAMvB,GAAG,GAAGkB,YAAY;EAAA,GAAE,CAAClB,GAAG,EAAEkB,YAAY,CAAC,CAAC;EAEpE,IAAMM,YAAY,GAAG,IAAAD,cAAO,EAAC,YAAM;IACjC,IAAI,OAAON,SAAS,KAAK,QAAQ,IAAI,CAAC,CAACJ,wBAAwB,CAACI,SAAS,CAAC,EACxE,OAAOJ,wBAAwB,CAACI,SAAS,CAAC;IAC5C,OAAOJ,wBAAwB,CAACF,GAAG;EACrC,CAAC,EAAE,CAACM,SAAS,CAAC,CAAC;EAEf,OAAOP,kBAAkB,kCAAIc,YAAY,UAAE;IACzCnC,WAAW,EAAXA,WAAW;IACXC,WAAW,EAAXA,WAAW;IACXU,GAAG,EAAEsB,KAAK;IACVrB,IAAI,EAAJA;EACF,CAAC,GAAC;AACJ,CAAC;AAAC,eAEae,kBAAkB;AAAA"}

package/dist/cjs/Progress/index.js

@@ -1,40 +1,24 @@
 "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 _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _excluded = ["percent", "text", "height"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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  align-items: center;\n  ", ";\n"])), _styles.sizeStyles);
 var Trail = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('height'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden; // To hide the border of the progress bar\n"])), function (p) {
   return (0, _theming.clr)(p.theme.progressColorTrail);
@@ -52,23 +36,20 @@ var Stroke = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('percen
 }, function (p) {
   return p.percent < 100 ? (0, _theming.clr)(p.theme.progressColorStroke) : (0, _theming.clr)(p.theme.progressColorStrokeSuccess);
 }, (0, _styles.transitionStyles)('width', 'background-color'));
-
 var Text = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 0.5em;\n  color: ", ";\n  line-height: 1;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.progressColorPercentage);
 });
+
 /**
  * The progress bar.
  */
-
-
 var Progress = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$percent = _ref.percent,
-      percent = _ref$percent === void 0 ? 0 : _ref$percent,
-      text = _ref.text,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? '0.5em' : _ref$height,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    percent = _ref$percent === void 0 ? 0 : _ref$percent,
+    text = _ref.text,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '0.5em' : _ref$height,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var validPercent = (0, _react.useMemo)(function () {
     if (percent < 0) return 0;
     if (percent > 100) return 100;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Trail","p","clr","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","transitionStyles","Text","div","progressColorPercentage","Progress","forwardRef","ref","text","rest","validPercent","useMemo","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":"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"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Trail","p","clr","theme","progressColorTrail","height","Stroke","percent","progressColorStroke","progressColorStrokeSuccess","transitionStyles","Text","div","progressColorPercentage","Progress","forwardRef","ref","text","rest","validPercent","useMemo","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;AACA;AACA;AACA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBzC,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,2HAGrDC,kBAAU,CACb;AAGD,IAAMC,KAAK,GAAG,IAAAH,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,QAAQ,CAAC,CAAC,4MAEjC,UAACG,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,kBAAkB,CAAC;AAAA,GACzC,UAACH,CAAC;EAAA,sBAAaA,CAAC,CAACI,MAAM;AAAA,CAAO,CAEhD;AAGD,IAAMC,MAAM,GAAG,IAAAT,kBAAM,EACnB,KAAK,EACL,IAAAC,uBAAgB,EAAC,SAAS,EAAE,QAAQ,CAAC,CACtC,sLACU,UAACG,CAAC;EAAA,OAAKA,CAAC,CAACM,OAAO;AAAA,GACf,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACI,MAAM;AAAA,GACN,UAACJ,CAAC;EAAA,sBAAaA,CAAC,CAACI,MAAM;AAAA,CAAO,EAC7C,UAACJ,CAAC;EAAA,sBAAaA,CAAC,CAACI,MAAM;AAAA,CAAO,EACd,UAACJ,CAAC;EAAA,OACpBA,CAAC,CAACM,OAAO,GAAG,GAAG,GACX,IAAAL,YAAG,EAACD,CAAC,CAACE,KAAK,CAACK,mBAAmB,CAAC,GAChC,IAAAN,YAAG,EAACD,CAAC,CAACE,KAAK,CAACM,0BAA0B,CAAC;AAAA,GAC3C,IAAAC,wBAAgB,EAAC,OAAO,EAAE,kBAAkB,CAAC,CAChD;AAED,IAAMC,IAAI,GAAGd,kBAAM,CAACe,GAAG,oIAEZ,UAACX,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACU,uBAAuB,CAAC;AAAA,EAErD;;AAED;AACA;AACA;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAAmDC,GAAG,EAAK;EAAA,wBAAxDT,OAAO;IAAPA,OAAO,6BAAG,CAAC;IAAEU,IAAI,QAAJA,IAAI;IAAA,mBAAEZ,MAAM;IAANA,MAAM,4BAAG,OAAO;IAAKa,IAAI;EAC7C,IAAMC,YAAY,GAAG,IAAAC,cAAO,EAAC,YAAM;IACjC,IAAIb,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,IAAMc,MAAM,GAAG,IAAAD,cAAO,EACpB;IAAA,mCAA2BE,IAAI,CAACC,MAAM,EAAE,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAAA,CAAE,EACpE,EAAE,CACH;EAED,oBACE,gCAAC,SAAS;IACR,IAAI,EAAC,aAAa;IAClB,iBAAeN,YAAa;IAC5B,iBAAe,CAAE;IACjB,iBAAe,GAAI;IACnB,oBAAkBE;EAAO,GACrBH,IAAI;IACR,GAAG,EAAEF;EAAI,iBAET,gCAAC,KAAK;IAAC,MAAM,EAAEX;EAAO,gBACpB,gCAAC,MAAM;IAAC,OAAO,EAAEc,YAAa;IAAC,MAAM,EAAEd;EAAO,EAAG,CAC3C,EACPY,IAAI,iBAAI,gCAAC,IAAI;IAAC,EAAE,EAAEI;EAAO,GAAEJ,IAAI,CAAQ,CAC9B;AAEhB,CAAC,CACF;AAEDH,QAAQ,CAACY,WAAW,GAAG,UAAU;AAAC,eAEnBZ,QAAQ;AAAA"}

package/dist/cjs/RadioGroup/index.js

@@ -1,98 +1,70 @@
 "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 _utils = require("@os-design/utils");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _media = require("@os-design/media");
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _excluded = ["options", "wide", "disabled", "value", "defaultValue", "onChange", "size"],
-    _excluded2 = ["title", "value", "disabled", "onClick"];
-
+  _excluded2 = ["title", "value", "disabled", "onClick"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 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 _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; }
-
 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 wideDefaultStyles = function wideDefaultStyles(p) {
   return p.wide === 'default' && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", " {\n      width: 100%;\n      & > button {\n        flex: 1;\n      }\n    }\n  "])), _media.m.max.xxs);
 };
-
 var wideAlwaysStyles = function wideAlwaysStyles(p) {
   return p.wide === 'always' && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    & > button {\n      flex: 1;\n    }\n  "])));
 };
-
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('wide', 'disabled'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  border-radius: ", "em;\n  overflow: hidden;\n  border: 1px solid\n    ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.borderRadius;
 }, function (p) {
   return p.disabled ? (0, _theming.clr)(p.theme.buttonDisabledGhostColorText) : (0, _theming.clr)(p.theme.colorPrimary);
 }, wideDefaultStyles, wideAlwaysStyles);
 var StyledButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 0;\n"])));
+
 /**
  * The radio buttons that allow a user to select only one of a limited number of options.
  */
-
 var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      _ref$wide = _ref.wide,
-      wide = _ref$wide === void 0 ? 'default' : _ref$wide,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      value = _ref.value,
-      defaultValue = _ref.defaultValue,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$wide = _ref.wide,
+    wide = _ref$wide === void 0 ? 'default' : _ref$wide,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedState = (0, _utils.useForwardedState)({
-    value: value,
-    defaultValue: defaultValue,
-    onChange: onChange
-  }),
-      _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
-      forwardedValue = _useForwardedState2[0],
-      setForwardedValue = _useForwardedState2[1];
-
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
+    forwardedValue = _useForwardedState2[0],
+    setForwardedValue = _useForwardedState2[1];
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Container, _extends({
     wide: wide,
     disabled: disabled
@@ -100,12 +72,11 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: ref
   }), options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
     var title = _ref2.title,
-        valueOption = _ref2.value,
-        disabledOption = _ref2.disabled,
-        _ref2$onClick = _ref2.onClick,
-        _onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
-        buttonRest = _objectWithoutProperties(_ref2, _excluded2);
-
+      valueOption = _ref2.value,
+      disabledOption = _ref2.disabled,
+      _ref2$onClick = _ref2.onClick,
+      _onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
+      buttonRest = _objectWithoutProperties(_ref2, _excluded2);
     return /*#__PURE__*/_react["default"].createElement(StyledButton, _extends({
       key: valueOption,
       type: forwardedValue === valueOption ? 'primary' : 'ghost',
@@ -114,7 +85,6 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       size: size,
       onClick: function onClick(e) {
         setForwardedValue(valueOption);
-
         _onClick(e);
       }
     }, buttonRest), title);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["wideDefaultStyles","p","wide","css","m","max","xxs","wideAlwaysStyles","Container","styled","omitEmotionProps","theme","borderRadius","disabled","clr","buttonDisabledGhostColorText","colorPrimary","StyledButton","Button","RadioGroup","forwardRef","ref","options","value","defaultValue","onChange","size","rest","useForwardedState","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;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD;EAAA,OACxBA,CAAC,CAACC,IAAF,KAAW,SAAX,QACAC,WADA,iKAEIC,QAAA,CAAEC,GAAF,CAAMC,GAFV,CADwB;AAAA,CAA1B;;AAWA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACN,CAAD;EAAA,OACvBA,CAAC,CAACC,IAAF,KAAW,QAAX,QACAC,WADA,uIADuB;AAAA,CAAzB;;AAUA,IAAMK,SAAS,GAAG,IAAAC,kBAAA,EAChB,KADgB,EAEhB,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,UAAzB,CAFgB,CAAH,4NAOI,UAACT,CAAD;EAAA,OAAOA,CAAC,CAACU,KAAF,CAAQC,YAAf;AAAA,CAPJ,EAUT,UAACX,CAAD;EAAA,OACAA,CAAC,CAACY,QAAF,GACI,IAAAC,YAAA,EAAIb,CAAC,CAACU,KAAF,CAAQI,4BAAZ,CADJ,GAEI,IAAAD,YAAA,EAAIb,CAAC,CAACU,KAAF,CAAQK,YAAZ,CAHJ;AAAA,CAVS,EAeXhB,iBAfW,EAgBXO,gBAhBW,CAAf;AAmBA,IAAMU,YAAY,GAAG,IAAAR,kBAAA,EAAOS,kBAAP,CAAH,8FAAlB;AAIA;AACA;AACA;;AACA,IAAMC,UAAU,gBAAG,IAAAC,iBAAA,EACjB,gBAWEC,GAXF,EAYK;EAAA,wBAVDC,OAUC;EAAA,IAVDA,OAUC,6BAVS,EAUT;EAAA,qBATDpB,IASC;EAAA,IATDA,IASC,0BATM,SASN;EAAA,yBARDW,QAQC;EAAA,IARDA,QAQC,8BARU,KAQV;EAAA,IAPDU,KAOC,QAPDA,KAOC;EAAA,IANDC,YAMC,QANDA,YAMC;EAAA,yBALDC,QAKC;EAAA,IALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;EAAA,IAJDC,IAIC,QAJDA,IAIC;EAAA,IAHEC,IAGF;;EACH,yBAA4C,IAAAC,wBAAA,EAAkB;IAC5DL,KAAK,EAALA,KAD4D;IAE5DC,YAAY,EAAZA,YAF4D;IAG5DC,QAAQ,EAARA;EAH4D,CAAlB,CAA5C;EAAA;EAAA,IAAOI,cAAP;EAAA,IAAuBC,iBAAvB;;EAMA,oBACE,0DACE,gCAAC,SAAD;IAAW,IAAI,EAAE5B,IAAjB;IAAuB,QAAQ,EAAEW;EAAjC,GAA+Cc,IAA/C;IAAqD,GAAG,EAAEN;EAA1D,IACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CACC;IAAA,IACEC,KADF,SACEA,KADF;IAAA,IAESC,WAFT,SAEEV,KAFF;IAAA,IAGYW,cAHZ,SAGErB,QAHF;IAAA,0BAIEsB,OAJF;IAAA,IAIEA,QAJF,8BAIY,YAAM,CAAE,CAJpB;IAAA,IAKKC,UALL;;IAAA,oBAOE,gCAAC,YAAD;MACE,GAAG,EAAEH,WADP;MAEE,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;MAGE,IAAI,EAAC,OAHP;MAIE,QAAQ,EAAEpB,QAAQ,IAAIqB,cAJxB;MAKE,IAAI,EAAER,IALR;MAME,OAAO,EAAE,iBAACW,CAAD,EAAO;QACdP,iBAAiB,CAACG,WAAD,CAAjB;;QACAE,QAAO,CAACE,CAAD,CAAP;MACD;IATH,GAUMD,UAVN,GAYGJ,KAZH,CAPF;EAAA,CADD,CADH,CADF,CADF;AA8BD,CAlDgB,CAAnB;AAqDAb,UAAU,CAACmB,WAAX,GAAyB,YAAzB;eAEenB,U"}
+{"version":3,"file":"index.js","names":["wideDefaultStyles","p","wide","css","m","max","xxs","wideAlwaysStyles","Container","styled","omitEmotionProps","theme","borderRadius","disabled","clr","buttonDisabledGhostColorText","colorPrimary","StyledButton","Button","RadioGroup","forwardRef","ref","options","value","defaultValue","onChange","size","rest","useForwardedState","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;AAEA;AACA;AACA;AACA;AACA;AACA;AAAgD;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuDhD,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAC;EAAA,OAC1BA,CAAC,CAACC,IAAI,KAAK,SAAS,QACpBC,WAAG,iKACCC,QAAC,CAACC,GAAG,CAACC,GAAG,CAMZ;AAAA;AAEH,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIN,CAAC;EAAA,OACzBA,CAAC,CAACC,IAAI,KAAK,QAAQ,QACnBC,WAAG,uIAKF;AAAA;AAGH,IAAMK,SAAS,GAAG,IAAAC,kBAAM,EACtB,KAAK,EACL,IAAAC,uBAAgB,EAAC,MAAM,EAAE,UAAU,CAAC,CACrC,4NAIkB,UAACT,CAAC;EAAA,OAAKA,CAAC,CAACU,KAAK,CAACC,YAAY;AAAA,GAGxC,UAACX,CAAC;EAAA,OACFA,CAAC,CAACY,QAAQ,GACN,IAAAC,YAAG,EAACb,CAAC,CAACU,KAAK,CAACI,4BAA4B,CAAC,GACzC,IAAAD,YAAG,EAACb,CAAC,CAACU,KAAK,CAACK,YAAY,CAAC;AAAA,GAE/BhB,iBAAiB,EACjBO,gBAAgB,CACnB;AAED,IAAMU,YAAY,GAAG,IAAAR,kBAAM,EAACS,kBAAM,CAAC,8FAElC;;AAED;AACA;AACA;AACA,IAAMC,UAAU,gBAAG,IAAAC,iBAAU,EAC3B,gBAWEC,GAAG,EACA;EAAA,wBAVDC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAA,iBACZpB,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,qBAChBW,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBU,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IAAA,qBACZC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IACnBC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAIT,yBAA4C,IAAAC,wBAAiB,EAAC;MAC5DL,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKI,cAAc;IAAEC,iBAAiB;EAMxC,oBACE,0DACE,gCAAC,SAAS;IAAC,IAAI,EAAE5B,IAAK;IAAC,QAAQ,EAAEW;EAAS,GAAKc,IAAI;IAAE,GAAG,EAAEN;EAAI,IAC3DC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,GAAG,CACX;IAAA,IACEC,KAAK,SAALA,KAAK;MACEC,WAAW,SAAlBV,KAAK;MACKW,cAAc,SAAxBrB,QAAQ;MAAA,sBACRsB,OAAO;MAAPA,QAAO,8BAAG,YAAM,CAAC,CAAC;MACfC,UAAU;IAAA,oBAEb,gCAAC,YAAY;MACX,GAAG,EAAEH,WAAY;MACjB,IAAI,EAAEJ,cAAc,KAAKI,WAAW,GAAG,SAAS,GAAG,OAAQ;MAC3D,IAAI,EAAC,OAAO;MACZ,QAAQ,EAAEpB,QAAQ,IAAIqB,cAAe;MACrC,IAAI,EAAER,IAAK;MACX,OAAO,EAAE,iBAACW,CAAC,EAAK;QACdP,iBAAiB,CAACG,WAAW,CAAC;QAC9BE,QAAO,CAACE,CAAC,CAAC;MACZ;IAAE,GACED,UAAU,GAEbJ,KAAK,CACO;EAAA,CAChB,CACF,CACS,CACR;AAEV,CAAC,CACF;AAEDb,UAAU,CAACmB,WAAW,GAAG,YAAY;AAAC,eAEvBnB,UAAU;AAAA"}

package/dist/cjs/RadioGroupSkeleton/index.js

@@ -1,52 +1,35 @@
 "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 _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _excluded = ["width"];
-
 var _templateObject;
-
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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 StyledRadioGroupSkeleton = (0, _styled["default"])(_Skeleton["default"], (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: calc(", "em + 2px);\n  ", ";\n"])), function (p) {
   return p.theme.baseHeight;
 }, _styles.sizeStyles);
+
 /**
  * Provides a radio group placeholder while a user waits for the content to load.
  */
-
 var RadioGroupSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '10em' : _ref$width,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    width = _ref$width === void 0 ? '10em' : _ref$width,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(StyledRadioGroupSkeleton, _extends({
     width: width
   }, rest, {