@os-design/core 1.0.156 → 1.0.157

package/dist/cjs/Select/SelectList.js

@@ -1,70 +1,48 @@
 "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 _reactWindow = require("react-window");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _media = require("@os-design/media");
-
 var _menuUtils = require("@os-design/menu-utils");
-
 var _MenuItem = _interopRequireDefault(require("../MenuItem"));
-
 var _useRWLoadNext = _interopRequireDefault(require("../List/utils/useRWLoadNext"));
-
 var _excluded = ["style"],
-    _excluded2 = ["title", "value", "onClick"];
-
+  _excluded2 = ["title", "value", "onClick"];
 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 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; }
-
 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; }
-
 var SelectList = function SelectList(_ref) {
   var searchVisible = _ref.searchVisible,
-      options = _ref.options,
-      visibleCount = _ref.visibleCount,
-      overscanCount = _ref.overscanCount,
-      threshold = _ref.threshold,
-      onLoadNext = _ref.onLoadNext,
-      maxSelectedItems = _ref.maxSelectedItems,
-      containerRef = _ref.containerRef,
-      value = _ref.value,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      id = _ref.id,
-      size = _ref.size;
+    options = _ref.options,
+    visibleCount = _ref.visibleCount,
+    overscanCount = _ref.overscanCount,
+    threshold = _ref.threshold,
+    onLoadNext = _ref.onLoadNext,
+    maxSelectedItems = _ref.maxSelectedItems,
+    containerRef = _ref.containerRef,
+    value = _ref.value,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    id = _ref.id,
+    size = _ref.size;
   var windowSize = (0, _utils.useSize)();
   var isMinXs = (0, _media.useIsMinWidth)('xs');
   var fontSize = (0, _utils.useFontSize)(document.body);
-
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
+    theme = _useTheme.theme;
   var scaleFactor = (0, _react.useMemo)(function () {
     var s = size || 'medium';
     return ['small', 'medium', 'large'].includes(s) ? theme.sizes[s] : Number(s.replace(/^([0-9]+(\.[0-9]+)?).*/, '$1')) || 1; // Extract the number
@@ -88,9 +66,8 @@ var SelectList = function SelectList(_ref) {
       var maxHeight = windowSize.height - theme.modalHeaderHeight * fontSize * scaleFactor - searchInputHeight;
       var curHeight = options.length * itemSize + paddingTop + paddingBottom;
       return curHeight < maxHeight ? curHeight : maxHeight;
-    } // Popover
-
-
+    }
+    // Popover
     var count = options.length < visibleCount ? options.length : visibleCount;
     return count * itemSize + paddingTop + paddingBottom;
   }, [isMinXs, options.length, visibleCount, itemSize, windowSize.height, theme.modalHeaderHeight, fontSize, scaleFactor, searchInputHeight, paddingTop, paddingBottom]);
@@ -106,12 +83,12 @@ var SelectList = function SelectList(_ref) {
     value: value || [],
     onChange: onChange,
     maxSelectedItems: maxSelectedItems
-  }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var InnerElement = (0, _react.useCallback)(function (_ref2) {
     var style = _ref2.style,
-        innerElementRest = _objectWithoutProperties(_ref2, _excluded);
-
+      innerElementRest = _objectWithoutProperties(_ref2, _excluded);
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
       style: _objectSpread(_objectSpread({}, style), {}, {
         height: "".concat(parseFloat(style.height) + paddingTop + paddingBottom, "px")
@@ -122,14 +99,12 @@ var SelectList = function SelectList(_ref) {
   }, [id, paddingBottom, paddingTop]);
   var listItemFn = (0, _react.useCallback)(function (_ref3) {
     var index = _ref3.index,
-        style = _ref3.style;
-
+      style = _ref3.style;
     var _options$index = options[index],
-        optionTitle = _options$index.title,
-        optionValue = _options$index.value,
-        optionOnClick = _options$index.onClick,
-        restOption = _objectWithoutProperties(_options$index, _excluded2);
-
+      optionTitle = _options$index.title,
+      optionValue = _options$index.value,
+      optionOnClick = _options$index.onClick,
+      restOption = _objectWithoutProperties(_options$index, _excluded2);
     return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], _extends({
       style: _objectSpread(_objectSpread({}, style), {}, {
         top: "".concat(parseFloat(style.top ? style.top.toString() : '0') + paddingTop, "px")
@@ -137,15 +112,15 @@ var SelectList = function SelectList(_ref) {
       selected: (value || []).includes(optionValue || ''),
       onClick: function onClick(e) {
         if (!optionValue) return;
-        onSelect(optionValue); // Focus the input.
+        onSelect(optionValue);
+
+        // Focus the input.
         // Otherwise, if the max number of selected items equals 1
         // and the user presses enter to select an item,
         // the input will lose focus.
-
         if (containerRef.current && maxSelectedItems === 1) {
           containerRef.current.focus();
         }
-
         if (optionOnClick) optionOnClick(e);
       },
       role: "option",
@@ -165,7 +140,6 @@ var SelectList = function SelectList(_ref) {
     innerElementType: InnerElement
   }, listItemFn);
 };
-
 SelectList.displayName = 'SelectList';
 var _default = SelectList;
 exports["default"] = _default;

package/dist/cjs/Select/SelectList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectList.js","names":["SelectList","searchVisible","options","visibleCount","overscanCount","threshold","onLoadNext","maxSelectedItems","containerRef","value","onChange","id","size","windowSize","useSize","isMinXs","useIsMinWidth","fontSize","useFontSize","document","body","useTheme","theme","scaleFactor","useMemo","s","includes","sizes","Number","replace","paddingBottom","paddingEm","menuPaddingVertical","modalBodyPaddingVertical","paddingTop","searchInputHeight","baseHeight","itemSize","menuItemHeight","height","maxHeight","modalHeaderHeight","curHeight","length","count","scrollHandler","useRWLoadNext","itemCount","onSelect","useSelectHandler","InnerElement","useCallback","style","innerElementRest","parseFloat","listItemFn","index","optionTitle","title","optionValue","optionOnClick","onClick","restOption","top","toString","e","current","focus","scrollOffset","displayName"],"sources":["../../../src/Select/SelectList.tsx"],"sourcesContent":["import React, { RefObject, useCallback, useMemo } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport { useFontSize, useSize } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { useSelectHandler } from '@os-design/menu-utils';\nimport MenuItem, { MenuItemProps } from '../MenuItem';\nimport useRWLoadNext from '../List/utils/useRWLoadNext';\n\nexport interface OptionProps extends MenuItemProps {\n  title?: string;\n}\n\ninterface SelectListProps extends WithSize {\n  searchVisible: boolean;\n  options: OptionProps[];\n  visibleCount: number;\n  overscanCount: number;\n  threshold: number;\n  onLoadNext: () => void;\n  maxSelectedItems: number | 'all';\n  containerRef: RefObject<HTMLDivElement>;\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  id?: string;\n}\n\nconst SelectList: React.FC<SelectListProps> = ({\n  searchVisible,\n  options,\n  visibleCount,\n  overscanCount,\n  threshold,\n  onLoadNext,\n  maxSelectedItems,\n  containerRef,\n  value,\n  onChange = () => {},\n  id,\n  size,\n}) => {\n  const windowSize = useSize();\n  const isMinXs = useIsMinWidth('xs');\n  const fontSize = useFontSize(document.body);\n  const { theme } = useTheme();\n\n  const scaleFactor = useMemo(() => {\n    const s = size || 'medium';\n    return ['small', 'medium', 'large'].includes(s)\n      ? theme.sizes[s]\n      : Number(s.replace(/^([0-9]+(\\.[0-9]+)?).*/, '$1')) || 1; // Extract the number\n  }, [size, theme.sizes]);\n\n  const paddingBottom = useMemo(() => {\n    const paddingEm = isMinXs\n      ? theme.menuPaddingVertical\n      : theme.modalBodyPaddingVertical[0];\n    return paddingEm * fontSize * scaleFactor;\n  }, [\n    isMinXs,\n    theme.menuPaddingVertical,\n    theme.modalBodyPaddingVertical,\n    fontSize,\n    scaleFactor,\n  ]);\n\n  const paddingTop = useMemo(\n    () => (searchVisible ? 5 * scaleFactor : paddingBottom),\n    [searchVisible, scaleFactor, paddingBottom]\n  );\n\n  const searchInputHeight = useMemo(\n    () =>\n      searchVisible\n        ? (theme.baseHeight + theme.menuPaddingVertical) *\n          fontSize *\n          scaleFactor\n        : 0,\n    [\n      searchVisible,\n      theme.baseHeight,\n      theme.menuPaddingVertical,\n      fontSize,\n      scaleFactor,\n    ]\n  );\n\n  const itemSize = useMemo(\n    () => theme.menuItemHeight * fontSize * scaleFactor,\n    [theme.menuItemHeight, fontSize, scaleFactor]\n  );\n\n  const height = useMemo(() => {\n    // Modal\n    if (!isMinXs) {\n      const maxHeight =\n        windowSize.height -\n        theme.modalHeaderHeight * fontSize * scaleFactor -\n        searchInputHeight;\n      const curHeight = options.length * itemSize + paddingTop + paddingBottom;\n      return curHeight < maxHeight ? curHeight : maxHeight;\n    }\n    // Popover\n    const count = options.length < visibleCount ? options.length : visibleCount;\n    return count * itemSize + paddingTop + paddingBottom;\n  }, [\n    isMinXs,\n    options.length,\n    visibleCount,\n    itemSize,\n    windowSize.height,\n    theme.modalHeaderHeight,\n    fontSize,\n    scaleFactor,\n    searchInputHeight,\n    paddingTop,\n    paddingBottom,\n  ]);\n\n  const scrollHandler = useRWLoadNext({\n    itemCount: options.length,\n    threshold,\n    itemSize,\n    paddingTop,\n    height,\n    onLoadNext,\n  });\n\n  const onSelect = useSelectHandler({\n    value: value || [],\n    onChange,\n    maxSelectedItems,\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const InnerElement = useCallback(\n    ({ style, ...innerElementRest }) => (\n      <div\n        style={{\n          ...style,\n          height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,\n        }}\n        role='listbox'\n        id={id}\n        {...innerElementRest}\n      />\n    ),\n    [id, paddingBottom, paddingTop]\n  );\n\n  const listItemFn = useCallback(\n    ({ index, style }) => {\n      const {\n        title: optionTitle,\n        value: optionValue,\n        onClick: optionOnClick,\n        ...restOption\n      } = options[index];\n      return (\n        <MenuItem\n          style={{\n            ...style,\n            top: `${\n              parseFloat(style.top ? style.top.toString() : '0') + paddingTop\n            }px`,\n          }}\n          selected={(value || []).includes(optionValue || '')}\n          onClick={(e) => {\n            if (!optionValue) return;\n            onSelect(optionValue);\n\n            // Focus the input.\n            // Otherwise, if the max number of selected items equals 1\n            // and the user presses enter to select an item,\n            // the input will lose focus.\n            if (containerRef.current && maxSelectedItems === 1) {\n              containerRef.current.focus();\n            }\n\n            if (optionOnClick) optionOnClick(e);\n          }}\n          role='option'\n          aria-selected={(value || []).includes(optionValue || '')}\n          {...restOption}\n        >\n          {optionTitle}\n        </MenuItem>\n      );\n    },\n    [containerRef, maxSelectedItems, onSelect, options, paddingTop, value]\n  );\n\n  return (\n    <FixedSizeList\n      width='100%'\n      height={height}\n      itemSize={itemSize}\n      itemCount={options.length}\n      overscanCount={overscanCount}\n      onScroll={({ scrollOffset }) => scrollHandler(scrollOffset)}\n      innerElementType={InnerElement}\n    >\n      {listItemFn}\n    </FixedSizeList>\n  );\n};\n\nSelectList.displayName = 'SelectList';\n\nexport default SelectList;\n"],"mappings":"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"}
+{"version":3,"file":"SelectList.js","names":["SelectList","searchVisible","options","visibleCount","overscanCount","threshold","onLoadNext","maxSelectedItems","containerRef","value","onChange","id","size","windowSize","useSize","isMinXs","useIsMinWidth","fontSize","useFontSize","document","body","useTheme","theme","scaleFactor","useMemo","s","includes","sizes","Number","replace","paddingBottom","paddingEm","menuPaddingVertical","modalBodyPaddingVertical","paddingTop","searchInputHeight","baseHeight","itemSize","menuItemHeight","height","maxHeight","modalHeaderHeight","curHeight","length","count","scrollHandler","useRWLoadNext","itemCount","onSelect","useSelectHandler","InnerElement","useCallback","style","innerElementRest","parseFloat","listItemFn","index","optionTitle","title","optionValue","optionOnClick","onClick","restOption","top","toString","e","current","focus","scrollOffset","displayName"],"sources":["../../../src/Select/SelectList.tsx"],"sourcesContent":["import React, { RefObject, useCallback, useMemo } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport { useFontSize, useSize } from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { useSelectHandler } from '@os-design/menu-utils';\nimport MenuItem, { MenuItemProps } from '../MenuItem';\nimport useRWLoadNext from '../List/utils/useRWLoadNext';\n\nexport interface OptionProps extends MenuItemProps {\n  title?: string;\n}\n\ninterface SelectListProps extends WithSize {\n  searchVisible: boolean;\n  options: OptionProps[];\n  visibleCount: number;\n  overscanCount: number;\n  threshold: number;\n  onLoadNext: () => void;\n  maxSelectedItems: number | 'all';\n  containerRef: RefObject<HTMLDivElement>;\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  id?: string;\n}\n\nconst SelectList: React.FC<SelectListProps> = ({\n  searchVisible,\n  options,\n  visibleCount,\n  overscanCount,\n  threshold,\n  onLoadNext,\n  maxSelectedItems,\n  containerRef,\n  value,\n  onChange = () => {},\n  id,\n  size,\n}) => {\n  const windowSize = useSize();\n  const isMinXs = useIsMinWidth('xs');\n  const fontSize = useFontSize(document.body);\n  const { theme } = useTheme();\n\n  const scaleFactor = useMemo(() => {\n    const s = size || 'medium';\n    return ['small', 'medium', 'large'].includes(s)\n      ? theme.sizes[s]\n      : Number(s.replace(/^([0-9]+(\\.[0-9]+)?).*/, '$1')) || 1; // Extract the number\n  }, [size, theme.sizes]);\n\n  const paddingBottom = useMemo(() => {\n    const paddingEm = isMinXs\n      ? theme.menuPaddingVertical\n      : theme.modalBodyPaddingVertical[0];\n    return paddingEm * fontSize * scaleFactor;\n  }, [\n    isMinXs,\n    theme.menuPaddingVertical,\n    theme.modalBodyPaddingVertical,\n    fontSize,\n    scaleFactor,\n  ]);\n\n  const paddingTop = useMemo(\n    () => (searchVisible ? 5 * scaleFactor : paddingBottom),\n    [searchVisible, scaleFactor, paddingBottom]\n  );\n\n  const searchInputHeight = useMemo(\n    () =>\n      searchVisible\n        ? (theme.baseHeight + theme.menuPaddingVertical) *\n          fontSize *\n          scaleFactor\n        : 0,\n    [\n      searchVisible,\n      theme.baseHeight,\n      theme.menuPaddingVertical,\n      fontSize,\n      scaleFactor,\n    ]\n  );\n\n  const itemSize = useMemo(\n    () => theme.menuItemHeight * fontSize * scaleFactor,\n    [theme.menuItemHeight, fontSize, scaleFactor]\n  );\n\n  const height = useMemo(() => {\n    // Modal\n    if (!isMinXs) {\n      const maxHeight =\n        windowSize.height -\n        theme.modalHeaderHeight * fontSize * scaleFactor -\n        searchInputHeight;\n      const curHeight = options.length * itemSize + paddingTop + paddingBottom;\n      return curHeight < maxHeight ? curHeight : maxHeight;\n    }\n    // Popover\n    const count = options.length < visibleCount ? options.length : visibleCount;\n    return count * itemSize + paddingTop + paddingBottom;\n  }, [\n    isMinXs,\n    options.length,\n    visibleCount,\n    itemSize,\n    windowSize.height,\n    theme.modalHeaderHeight,\n    fontSize,\n    scaleFactor,\n    searchInputHeight,\n    paddingTop,\n    paddingBottom,\n  ]);\n\n  const scrollHandler = useRWLoadNext({\n    itemCount: options.length,\n    threshold,\n    itemSize,\n    paddingTop,\n    height,\n    onLoadNext,\n  });\n\n  const onSelect = useSelectHandler({\n    value: value || [],\n    onChange,\n    maxSelectedItems,\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const InnerElement = useCallback(\n    ({ style, ...innerElementRest }) => (\n      <div\n        style={{\n          ...style,\n          height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,\n        }}\n        role='listbox'\n        id={id}\n        {...innerElementRest}\n      />\n    ),\n    [id, paddingBottom, paddingTop]\n  );\n\n  const listItemFn = useCallback(\n    ({ index, style }) => {\n      const {\n        title: optionTitle,\n        value: optionValue,\n        onClick: optionOnClick,\n        ...restOption\n      } = options[index];\n      return (\n        <MenuItem\n          style={{\n            ...style,\n            top: `${\n              parseFloat(style.top ? style.top.toString() : '0') + paddingTop\n            }px`,\n          }}\n          selected={(value || []).includes(optionValue || '')}\n          onClick={(e) => {\n            if (!optionValue) return;\n            onSelect(optionValue);\n\n            // Focus the input.\n            // Otherwise, if the max number of selected items equals 1\n            // and the user presses enter to select an item,\n            // the input will lose focus.\n            if (containerRef.current && maxSelectedItems === 1) {\n              containerRef.current.focus();\n            }\n\n            if (optionOnClick) optionOnClick(e);\n          }}\n          role='option'\n          aria-selected={(value || []).includes(optionValue || '')}\n          {...restOption}\n        >\n          {optionTitle}\n        </MenuItem>\n      );\n    },\n    [containerRef, maxSelectedItems, onSelect, options, paddingTop, value]\n  );\n\n  return (\n    <FixedSizeList\n      width='100%'\n      height={height}\n      itemSize={itemSize}\n      itemCount={options.length}\n      overscanCount={overscanCount}\n      onScroll={({ scrollOffset }) => scrollHandler(scrollOffset)}\n      innerElementType={InnerElement}\n    >\n      {listItemFn}\n    </FixedSizeList>\n  );\n};\n\nSelectList.displayName = 'SelectList';\n\nexport default SelectList;\n"],"mappings":"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"}

package/dist/cjs/Select/SelectToggle.js

@@ -1,69 +1,44 @@
 "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"] = exports.Title = exports.RightAddon = exports.Placeholder = exports.LeftAddon = exports.IconContainer = exports.Content = exports.Container = exports.ClearIcon = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _icons = require("@os-design/icons");
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _Tag = _interopRequireDefault(require("../Tag"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
-
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n"])));
-
 exports.Container = Container;
-
 var notHasLeftStyles = function notHasLeftStyles(p) {
   return !p.hasLeft && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-left: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
 };
-
 var notHasRightStyles = function notHasRightStyles(p) {
   return !p.hasRight && !p.unbordered && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding-right: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
 };
-
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('hasLeft', 'hasRight', 'unbordered'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1;\n  ", ";\n  ", ";\n  ", ";\n"])), notHasLeftStyles, notHasRightStyles, _styles.ellipsisStyles);
 exports.Content = Content;
-
 var Placeholder = _styled["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.inputColorPlaceholder);
 }, _styles.ellipsisStyles);
-
 exports.Placeholder = Placeholder;
-
 var unborderedTitleStyles = function unborderedTitleStyles(p) {
   return p.unbordered && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-weight: 500;\n    ", "\n  "])), !p.disabled && "color: ".concat((0, _theming.clr)(p.theme.colorPrimary), ";"));
 };
-
 var disabledStyles = function disabledStyles(p) {
   return p.disabled && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.inputDisabledColorText));
 };
-
 var Title = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('disabled', 'unbordered'))(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, unborderedTitleStyles, disabledStyles, _styles.ellipsisStyles);
@@ -71,7 +46,6 @@ exports.Title = Title;
 var ListItem = (0, _styled["default"])(_Tag["default"], (0, _utils.omitEmotionProps)('disabled'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ", "em;\n  ", ";\n"])), function (p) {
   return p.theme.selectToggleListItemHeight;
 }, disabledStyles);
-
 var List = _styled["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden; // For ellipsis styles\n\n  margin: 0 ", "em\n    ", "em 0;\n\n  & > div {\n    margin: 0 ", "em\n      ", "em 0;\n  }\n"])), function (p) {
   return p.theme.selectToggleListItemGap;
 }, function (p) {
@@ -81,17 +55,14 @@ var List = _styled["default"].div(_templateObject10 || (_templateObject10 = _tag
 }, function (p) {
   return p.theme.selectToggleListItemGap;
 });
-
 var DeleteButton = _styled["default"].button(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  display: inherit;\n  font-size: 1em;\n  margin-left: 0.2em;\n\n  background-color: transparent;\n  color: ", ";\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      color: ", ";\n    }\n  }\n\n  ", ";\n"])), _styles.resetButtonStyles, function (p) {
   return (0, _theming.clr)(p.theme.selectToggleDeleteButtonColorIcon);
 }, function (p) {
   return (0, _theming.clr)(p.theme.selectToggleDeleteButtonColorIconHover);
 }, (0, _styles.transitionStyles)('color'));
-
 var unborderedIconContainerStyles = function unborderedIconContainerStyles(p) {
   return p.unbordered && (0, _react2.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ", "\n  "])), !p.disabled && "color: ".concat((0, _theming.clr)(p.theme.colorPrimary), ";"));
 };
-
 var IconContainer = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('unbordered', 'disabled'))(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 1;\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.selectColorIcon);
 }, unborderedIconContainerStyles);
@@ -113,34 +84,32 @@ var RightAddon = (0, _styled["default"])(Addon)(_templateObject18 || (_templateO
   return p.hasPadding && (0, _react2.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      padding-right: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
 });
 exports.RightAddon = RightAddon;
-
 var SelectToggle = function SelectToggle(_ref) {
   var selectedItems = _ref.selectedItems,
-      onDelete = _ref.onDelete,
-      onClear = _ref.onClear,
-      opened = _ref.opened,
-      multiple = _ref.multiple,
-      left = _ref.left,
-      _ref$leftHasPadding = _ref.leftHasPadding,
-      leftHasPadding = _ref$leftHasPadding === void 0 ? false : _ref$leftHasPadding,
-      right = _ref.right,
-      _ref$rightHasPadding = _ref.rightHasPadding,
-      rightHasPadding = _ref$rightHasPadding === void 0 ? false : _ref$rightHasPadding,
-      placeholder = _ref.placeholder,
-      unbordered = _ref.unbordered,
-      loading = _ref.loading,
-      disabled = _ref.disabled,
-      clearVisible = _ref.clearVisible,
-      locale = _ref.locale;
+    onDelete = _ref.onDelete,
+    onClear = _ref.onClear,
+    opened = _ref.opened,
+    multiple = _ref.multiple,
+    left = _ref.left,
+    _ref$leftHasPadding = _ref.leftHasPadding,
+    leftHasPadding = _ref$leftHasPadding === void 0 ? false : _ref$leftHasPadding,
+    right = _ref.right,
+    _ref$rightHasPadding = _ref.rightHasPadding,
+    rightHasPadding = _ref$rightHasPadding === void 0 ? false : _ref$rightHasPadding,
+    placeholder = _ref.placeholder,
+    unbordered = _ref.unbordered,
+    loading = _ref.loading,
+    disabled = _ref.disabled,
+    clearVisible = _ref.clearVisible,
+    locale = _ref.locale;
   var renderContent = (0, _react.useCallback)(function () {
     if (selectedItems.length === 0) {
       return /*#__PURE__*/_react["default"].createElement(Placeholder, null, placeholder);
     }
-
     if (multiple) {
       return /*#__PURE__*/_react["default"].createElement(List, null, selectedItems.map(function (_ref2) {
         var title = _ref2.title,
-            value = _ref2.value;
+          value = _ref2.value;
         return /*#__PURE__*/_react["default"].createElement(ListItem, {
           key: value,
           disabled: disabled,
@@ -159,7 +128,6 @@ var SelectToggle = function SelectToggle(_ref) {
         }, title);
       }));
     }
-
     return /*#__PURE__*/_react["default"].createElement(Title, {
       disabled: disabled,
       unbordered: unbordered
@@ -170,7 +138,6 @@ var SelectToggle = function SelectToggle(_ref) {
   }, [clearVisible, selectedItems.length]);
   var rightValue = (0, _react.useMemo)(function () {
     if (loading) return /*#__PURE__*/_react["default"].createElement(_icons.Loading, null);
-
     if (showClearButton) {
       return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         type: "ghost",
@@ -188,7 +155,6 @@ var SelectToggle = function SelectToggle(_ref) {
         "aria-label": locale.clearLabel
       }, /*#__PURE__*/_react["default"].createElement(ClearIcon, null));
     }
-
     return right || /*#__PURE__*/_react["default"].createElement(IconContainer, {
       unbordered: unbordered,
       disabled: disabled
@@ -223,7 +189,6 @@ var SelectToggle = function SelectToggle(_ref) {
     hasPadding: rightHasPaddingValue
   }, rightValue)));
 };
-
 SelectToggle.displayName = 'SelectToggle';
 var _default = SelectToggle;
 exports["default"] = _default;

package/dist/cjs/Select/SelectToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectToggle.js","names":["Container","styled","div","notHasLeftStyles","p","hasLeft","css","theme","inputPaddingHorizontal","notHasRightStyles","hasRight","unbordered","Content","omitEmotionProps","ellipsisStyles","Placeholder","span","clr","inputColorPlaceholder","unborderedTitleStyles","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","colorText","ListItem","Tag","selectToggleListItemHeight","List","selectToggleListItemGap","DeleteButton","button","resetButtonStyles","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","transitionStyles","unborderedIconContainerStyles","IconContainer","selectColorIcon","ClearIcon","CloseCircle","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","left","leftHasPadding","right","rightHasPadding","placeholder","loading","clearVisible","locale","renderContent","useCallback","length","map","title","value","e","stopPropagation","deleteLabel","undefined","showClearButton","useMemo","rightValue","key","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","sizes","small","displayName"],"sources":["../../../src/Select/SelectToggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { Up, Down, Loading, Close, CloseCircle } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetButtonStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Tag from '../Tag';\nimport Button from '../Button';\nimport { SelectLocale } from './utils/defaultLocale';\n\ninterface SelectToggleProps {\n  selectedItems: Array<{ title: string; value: string }>;\n  onDelete: (value: string) => void;\n  onClear: () => void;\n  opened: boolean;\n  multiple: boolean;\n  left?: React.ReactNode;\n  leftHasPadding?: boolean;\n  right?: React.ReactNode;\n  rightHasPadding?: boolean;\n  placeholder?: string;\n  unbordered?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  clearVisible?: boolean;\n  locale: SelectLocale;\n}\n\nexport const Container = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  !p.unbordered &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface ContentProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n  unbordered?: boolean;\n}\nexport const Content = styled(\n  'div',\n  omitEmotionProps('hasLeft', 'hasRight', 'unbordered')\n)<ContentProps>`\n  flex: 1;\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n  ${ellipsisStyles};\n`;\n\nexport const Placeholder = styled.span`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  ${ellipsisStyles};\n`;\n\nconst unborderedTitleStyles = (p) =>\n  p.unbordered &&\n  css`\n    font-weight: 500;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.inputDisabledColorText)};\n  `;\n\ntype TitleProps = Pick<SelectToggleProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n  'span',\n  omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${unborderedTitleStyles};\n  ${disabledStyles};\n  ${ellipsisStyles};\n`;\n\ntype ListItemProps = Pick<SelectToggleProps, 'disabled'>;\nconst ListItem = styled(Tag, omitEmotionProps('disabled'))<ListItemProps>`\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ${(p) => p.theme.selectToggleListItemHeight}em;\n  ${disabledStyles};\n`;\n\nconst List = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden; // For ellipsis styles\n\n  margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n    ${(p) => -p.theme.selectToggleListItemGap}em 0;\n\n  & > div {\n    margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n      ${(p) => p.theme.selectToggleListItemGap}em 0;\n  }\n`;\n\nconst DeleteButton = styled.button`\n  ${resetButtonStyles};\n  cursor: pointer;\n  display: inherit;\n  font-size: 1em;\n  margin-left: 0.2em;\n\n  background-color: transparent;\n  color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIcon)};\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};\n    }\n  }\n\n  ${transitionStyles('color')};\n`;\n\nconst unborderedIconContainerStyles = (p) =>\n  p.unbordered &&\n  css`\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\ninterface IconContainerProps {\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const IconContainer = styled(\n  'span',\n  omitEmotionProps('unbordered', 'disabled')\n)<IconContainerProps>`\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n  line-height: 1;\n  ${unborderedIconContainerStyles};\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n  transform: scale(1.2) !important;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nexport const LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nexport const RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst SelectToggle: React.FC<SelectToggleProps> = ({\n  selectedItems,\n  onDelete,\n  onClear,\n  opened,\n  multiple,\n  left,\n  leftHasPadding = false,\n  right,\n  rightHasPadding = false,\n  placeholder,\n  unbordered,\n  loading,\n  disabled,\n  clearVisible,\n  locale,\n}) => {\n  const renderContent = useCallback(() => {\n    if (selectedItems.length === 0) {\n      return <Placeholder>{placeholder}</Placeholder>;\n    }\n    if (multiple) {\n      return (\n        <List>\n          {selectedItems.map(({ title, value }) => (\n            <ListItem\n              key={value}\n              disabled={disabled}\n              right={\n                !disabled ? (\n                  <DeleteButton\n                    onClick={(e) => {\n                      onDelete(value);\n                      e.stopPropagation();\n                    }}\n                    onKeyDown={(e) => e.stopPropagation()}\n                    aria-label={`${locale.deleteLabel} ${title}`}\n                    aria-hidden\n                  >\n                    <Close />\n                  </DeleteButton>\n                ) : undefined\n              }\n              aria-hidden\n            >\n              {title}\n            </ListItem>\n          ))}\n        </List>\n      );\n    }\n    return (\n      <Title disabled={disabled} unbordered={unbordered}>\n        {selectedItems[0].title}\n      </Title>\n    );\n  }, [\n    selectedItems,\n    multiple,\n    disabled,\n    unbordered,\n    placeholder,\n    locale.deleteLabel,\n    onDelete,\n  ]);\n\n  const showClearButton = useMemo(\n    () => clearVisible && selectedItems.length > 0,\n    [clearVisible, selectedItems.length]\n  );\n\n  const rightValue = useMemo(() => {\n    if (loading) return <Loading />;\n    if (showClearButton) {\n      return (\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          disabled={disabled}\n          onClick={(e) => {\n            onClear();\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') onClear();\n            e.stopPropagation();\n          }}\n          aria-label={locale.clearLabel}\n        >\n          <ClearIcon />\n        </Button>\n      );\n    }\n    return (\n      right || (\n        <IconContainer unbordered={unbordered} disabled={disabled}>\n          {opened ? <Up /> : <Down />}\n        </IconContainer>\n      )\n    );\n  }, [\n    disabled,\n    loading,\n    locale.clearLabel,\n    onClear,\n    opened,\n    right,\n    showClearButton,\n    unbordered,\n  ]);\n\n  const rightHasPaddingValue = useMemo(() => {\n    if (loading) return true;\n    if (showClearButton) return false;\n    return right ? rightHasPadding : true;\n  }, [loading, right, rightHasPadding, showClearButton]);\n\n  return (\n    <Container>\n      {left && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n        </ThemeOverrider>\n      )}\n\n      <Content hasLeft={!!left} hasRight={!!right} unbordered={unbordered}>\n        {renderContent()}\n      </Content>\n\n      {rightValue && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <RightAddon hasPadding={rightHasPaddingValue}>\n            {rightValue}\n          </RightAddon>\n        </ThemeOverrider>\n      )}\n    </Container>\n  );\n};\n\nSelectToggle.displayName = 'SelectToggle';\n\nexport default SelectToggle;\n"],"mappings":"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"}
+{"version":3,"file":"SelectToggle.js","names":["Container","styled","div","notHasLeftStyles","p","hasLeft","css","theme","inputPaddingHorizontal","notHasRightStyles","hasRight","unbordered","Content","omitEmotionProps","ellipsisStyles","Placeholder","span","clr","inputColorPlaceholder","unborderedTitleStyles","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","colorText","ListItem","Tag","selectToggleListItemHeight","List","selectToggleListItemGap","DeleteButton","button","resetButtonStyles","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","transitionStyles","unborderedIconContainerStyles","IconContainer","selectColorIcon","ClearIcon","CloseCircle","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","left","leftHasPadding","right","rightHasPadding","placeholder","loading","clearVisible","locale","renderContent","useCallback","length","map","title","value","e","stopPropagation","deleteLabel","undefined","showClearButton","useMemo","rightValue","key","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","sizes","small","displayName"],"sources":["../../../src/Select/SelectToggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { Up, Down, Loading, Close, CloseCircle } from '@os-design/icons';\nimport {\n  ellipsisStyles,\n  resetButtonStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport Tag from '../Tag';\nimport Button from '../Button';\nimport { SelectLocale } from './utils/defaultLocale';\n\ninterface SelectToggleProps {\n  selectedItems: Array<{ title: string; value: string }>;\n  onDelete: (value: string) => void;\n  onClear: () => void;\n  opened: boolean;\n  multiple: boolean;\n  left?: React.ReactNode;\n  leftHasPadding?: boolean;\n  right?: React.ReactNode;\n  rightHasPadding?: boolean;\n  placeholder?: string;\n  unbordered?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  clearVisible?: boolean;\n  locale: SelectLocale;\n}\n\nexport const Container = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  !p.unbordered &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface ContentProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n  unbordered?: boolean;\n}\nexport const Content = styled(\n  'div',\n  omitEmotionProps('hasLeft', 'hasRight', 'unbordered')\n)<ContentProps>`\n  flex: 1;\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n  ${ellipsisStyles};\n`;\n\nexport const Placeholder = styled.span`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  ${ellipsisStyles};\n`;\n\nconst unborderedTitleStyles = (p) =>\n  p.unbordered &&\n  css`\n    font-weight: 500;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.inputDisabledColorText)};\n  `;\n\ntype TitleProps = Pick<SelectToggleProps, 'disabled' | 'unbordered'>;\nexport const Title = styled(\n  'span',\n  omitEmotionProps('disabled', 'unbordered')\n)<TitleProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${unborderedTitleStyles};\n  ${disabledStyles};\n  ${ellipsisStyles};\n`;\n\ntype ListItemProps = Pick<SelectToggleProps, 'disabled'>;\nconst ListItem = styled(Tag, omitEmotionProps('disabled'))<ListItemProps>`\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ${(p) => p.theme.selectToggleListItemHeight}em;\n  ${disabledStyles};\n`;\n\nconst List = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  overflow: hidden; // For ellipsis styles\n\n  margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n    ${(p) => -p.theme.selectToggleListItemGap}em 0;\n\n  & > div {\n    margin: 0 ${(p) => p.theme.selectToggleListItemGap}em\n      ${(p) => p.theme.selectToggleListItemGap}em 0;\n  }\n`;\n\nconst DeleteButton = styled.button`\n  ${resetButtonStyles};\n  cursor: pointer;\n  display: inherit;\n  font-size: 1em;\n  margin-left: 0.2em;\n\n  background-color: transparent;\n  color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIcon)};\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      color: ${(p) => clr(p.theme.selectToggleDeleteButtonColorIconHover)};\n    }\n  }\n\n  ${transitionStyles('color')};\n`;\n\nconst unborderedIconContainerStyles = (p) =>\n  p.unbordered &&\n  css`\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}\n  `;\n\ninterface IconContainerProps {\n  unbordered?: boolean;\n  disabled?: boolean;\n}\nexport const IconContainer = styled(\n  'span',\n  omitEmotionProps('unbordered', 'disabled')\n)<IconContainerProps>`\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n  line-height: 1;\n  ${unborderedIconContainerStyles};\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n  transform: scale(1.2) !important;\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nexport const LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nexport const RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst SelectToggle: React.FC<SelectToggleProps> = ({\n  selectedItems,\n  onDelete,\n  onClear,\n  opened,\n  multiple,\n  left,\n  leftHasPadding = false,\n  right,\n  rightHasPadding = false,\n  placeholder,\n  unbordered,\n  loading,\n  disabled,\n  clearVisible,\n  locale,\n}) => {\n  const renderContent = useCallback(() => {\n    if (selectedItems.length === 0) {\n      return <Placeholder>{placeholder}</Placeholder>;\n    }\n    if (multiple) {\n      return (\n        <List>\n          {selectedItems.map(({ title, value }) => (\n            <ListItem\n              key={value}\n              disabled={disabled}\n              right={\n                !disabled ? (\n                  <DeleteButton\n                    onClick={(e) => {\n                      onDelete(value);\n                      e.stopPropagation();\n                    }}\n                    onKeyDown={(e) => e.stopPropagation()}\n                    aria-label={`${locale.deleteLabel} ${title}`}\n                    aria-hidden\n                  >\n                    <Close />\n                  </DeleteButton>\n                ) : undefined\n              }\n              aria-hidden\n            >\n              {title}\n            </ListItem>\n          ))}\n        </List>\n      );\n    }\n    return (\n      <Title disabled={disabled} unbordered={unbordered}>\n        {selectedItems[0].title}\n      </Title>\n    );\n  }, [\n    selectedItems,\n    multiple,\n    disabled,\n    unbordered,\n    placeholder,\n    locale.deleteLabel,\n    onDelete,\n  ]);\n\n  const showClearButton = useMemo(\n    () => clearVisible && selectedItems.length > 0,\n    [clearVisible, selectedItems.length]\n  );\n\n  const rightValue = useMemo(() => {\n    if (loading) return <Loading />;\n    if (showClearButton) {\n      return (\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          disabled={disabled}\n          onClick={(e) => {\n            onClear();\n            e.stopPropagation();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') onClear();\n            e.stopPropagation();\n          }}\n          aria-label={locale.clearLabel}\n        >\n          <ClearIcon />\n        </Button>\n      );\n    }\n    return (\n      right || (\n        <IconContainer unbordered={unbordered} disabled={disabled}>\n          {opened ? <Up /> : <Down />}\n        </IconContainer>\n      )\n    );\n  }, [\n    disabled,\n    loading,\n    locale.clearLabel,\n    onClear,\n    opened,\n    right,\n    showClearButton,\n    unbordered,\n  ]);\n\n  const rightHasPaddingValue = useMemo(() => {\n    if (loading) return true;\n    if (showClearButton) return false;\n    return right ? rightHasPadding : true;\n  }, [loading, right, rightHasPadding, showClearButton]);\n\n  return (\n    <Container>\n      {left && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n        </ThemeOverrider>\n      )}\n\n      <Content hasLeft={!!left} hasRight={!!right} unbordered={unbordered}>\n        {renderContent()}\n      </Content>\n\n      {rightValue && (\n        <ThemeOverrider\n          overrides={(t) => ({\n            buttonPaddingHorizontal: 0.8,\n            baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n          })}\n        >\n          <RightAddon hasPadding={rightHasPaddingValue}>\n            {rightValue}\n          </RightAddon>\n        </ThemeOverrider>\n      )}\n    </Container>\n  );\n};\n\nSelectToggle.displayName = 'SelectToggle';\n\nexport default SelectToggle;\n"],"mappings":"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"}