@os-design/core 1.0.182 → 1.0.184

package/dist/cjs/Select/SelectToggle.js

@@ -1,195 +0,0 @@
-"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);
-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) {
-  return -p.theme.selectToggleListItemGap;
-}, function (p) {
-  return p.theme.selectToggleListItemGap;
-}, 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);
-exports.IconContainer = IconContainer;
-var ClearIcon = (0, _styled["default"])(_icons.CloseCircle)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  transform: scale(1.2) !important;\n"])));
-exports.ClearIcon = ClearIcon;
-var Addon = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('hasPadding'))(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ", ";\n\n  svg {\n    transform: scale(1.2);\n  }\n"])), function (p) {
-  return (0, _theming.clr)(p.theme.inputColorPlaceholder);
-});
-var LeftAddon = (0, _styled["default"])(Addon)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding-right: ", "em;\n  ", "\n"])), function (p) {
-  return p.theme.inputAddonPaddingHorizontal;
-}, function (p) {
-  return p.hasPadding && (0, _react2.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      padding-left: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
-});
-exports.LeftAddon = LeftAddon;
-var RightAddon = (0, _styled["default"])(Addon)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  padding-left: ", "em;\n  ", "\n"])), function (p) {
-  return p.theme.inputAddonPaddingHorizontal;
-}, function (p) {
-  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;
-  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;
-        return /*#__PURE__*/_react["default"].createElement(ListItem, {
-          key: value,
-          disabled: disabled,
-          right: !disabled ? /*#__PURE__*/_react["default"].createElement(DeleteButton, {
-            onClick: function onClick(e) {
-              onDelete(value);
-              e.stopPropagation();
-            },
-            onKeyDown: function onKeyDown(e) {
-              return e.stopPropagation();
-            },
-            "aria-label": "".concat(locale.deleteLabel, " ").concat(title),
-            "aria-hidden": true
-          }, /*#__PURE__*/_react["default"].createElement(_icons.Close, null)) : undefined,
-          "aria-hidden": true
-        }, title);
-      }));
-    }
-    return /*#__PURE__*/_react["default"].createElement(Title, {
-      disabled: disabled,
-      unbordered: unbordered
-    }, selectedItems[0].title);
-  }, [selectedItems, multiple, disabled, unbordered, placeholder, locale.deleteLabel, onDelete]);
-  var showClearButton = (0, _react.useMemo)(function () {
-    return clearVisible && selectedItems.length > 0;
-  }, [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",
-        wide: "never",
-        size: "small",
-        disabled: disabled,
-        onClick: function onClick(e) {
-          onClear();
-          e.stopPropagation();
-        },
-        onKeyDown: function onKeyDown(e) {
-          if (e.key === 'Enter') onClear();
-          e.stopPropagation();
-        },
-        "aria-label": locale.clearLabel
-      }, /*#__PURE__*/_react["default"].createElement(ClearIcon, null));
-    }
-    return right || /*#__PURE__*/_react["default"].createElement(IconContainer, {
-      unbordered: unbordered,
-      disabled: disabled
-    }, opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null));
-  }, [disabled, loading, locale.clearLabel, onClear, opened, right, showClearButton, unbordered]);
-  var rightHasPaddingValue = (0, _react.useMemo)(function () {
-    if (loading) return true;
-    if (showClearButton) return false;
-    return right ? rightHasPadding : true;
-  }, [loading, right, rightHasPadding, showClearButton]);
-  return /*#__PURE__*/_react["default"].createElement(Container, null, left && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
-    overrides: function overrides(t) {
-      return {
-        buttonPaddingHorizontal: 0.8,
-        baseHeight: t.selectToggleListItemHeight / t.sizes.small
-      };
-    }
-  }, /*#__PURE__*/_react["default"].createElement(LeftAddon, {
-    hasPadding: leftHasPadding
-  }, left)), /*#__PURE__*/_react["default"].createElement(Content, {
-    hasLeft: !!left,
-    hasRight: !!right,
-    unbordered: unbordered
-  }, renderContent()), rightValue && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
-    overrides: function overrides(t) {
-      return {
-        buttonPaddingHorizontal: 0.8,
-        baseHeight: t.selectToggleListItemHeight / t.sizes.small
-      };
-    }
-  }, /*#__PURE__*/_react["default"].createElement(RightAddon, {
-    hasPadding: rightHasPaddingValue
-  }, rightValue)));
-};
-SelectToggle.displayName = 'SelectToggle';
-var _default = SelectToggle;
-exports["default"] = _default;
-//# sourceMappingURL=SelectToggle.js.map

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

@@ -1 +0,0 @@
-{"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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"}

package/dist/esm/Select/SelectList.js

@@ -1,125 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useCallback, useMemo } from 'react';
-import { FixedSizeList } from 'react-window';
-import { useFontSize, useSize } from '@os-design/utils';
-import { useTheme } from '@os-design/theming';
-import { useIsMinWidth } from '@os-design/media';
-import { useSelectHandler } from '@os-design/menu-utils';
-import MenuItem from '../MenuItem';
-import useRWLoadNext from '../List/utils/useRWLoadNext';
-const SelectList = ({
-  searchVisible,
-  options,
-  visibleCount,
-  overscanCount,
-  threshold,
-  onLoadNext,
-  maxSelectedItems,
-  containerRef,
-  value,
-  onChange = () => {},
-  id,
-  size
-}) => {
-  const windowSize = useSize();
-  const isMinXs = useIsMinWidth('xs');
-  const fontSize = useFontSize(document.body);
-  const {
-    theme
-  } = useTheme();
-  const scaleFactor = useMemo(() => {
-    const s = size || 'medium';
-    return ['small', 'medium', 'large'].includes(s) ? theme.sizes[s] : Number(s.replace(/^([0-9]+(\.[0-9]+)?).*/, '$1')) || 1; // Extract the number
-  }, [size, theme.sizes]);
-  const paddingBottom = useMemo(() => {
-    const paddingEm = isMinXs ? theme.menuPaddingVertical : theme.modalBodyPaddingVertical[0];
-    return paddingEm * fontSize * scaleFactor;
-  }, [isMinXs, theme.menuPaddingVertical, theme.modalBodyPaddingVertical, fontSize, scaleFactor]);
-  const paddingTop = useMemo(() => searchVisible ? 5 * scaleFactor : paddingBottom, [searchVisible, scaleFactor, paddingBottom]);
-  const searchInputHeight = useMemo(() => searchVisible ? (theme.baseHeight + theme.menuPaddingVertical) * fontSize * scaleFactor : 0, [searchVisible, theme.baseHeight, theme.menuPaddingVertical, fontSize, scaleFactor]);
-  const itemSize = useMemo(() => theme.menuItemHeight * fontSize * scaleFactor, [theme.menuItemHeight, fontSize, scaleFactor]);
-  const height = useMemo(() => {
-    // Modal
-    if (!isMinXs) {
-      const maxHeight = windowSize.height - theme.modalHeaderHeight * fontSize * scaleFactor - searchInputHeight;
-      const curHeight = options.length * itemSize + paddingTop + paddingBottom;
-      return curHeight < maxHeight ? curHeight : maxHeight;
-    }
-    // Popover
-    const 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]);
-  const scrollHandler = useRWLoadNext({
-    itemCount: options.length,
-    threshold,
-    itemSize,
-    paddingTop,
-    height,
-    onLoadNext
-  });
-  const onSelect = useSelectHandler({
-    value: value || [],
-    onChange,
-    maxSelectedItems
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const InnerElement = useCallback(({
-    style,
-    ...innerElementRest
-  }) => /*#__PURE__*/React.createElement("div", _extends({
-    style: {
-      ...style,
-      height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`
-    },
-    role: "listbox",
-    id: id
-  }, innerElementRest)), [id, paddingBottom, paddingTop]);
-  const listItemFn = useCallback(({
-    index,
-    style
-  }) => {
-    const {
-      title: optionTitle,
-      value: optionValue,
-      onClick: optionOnClick,
-      ...restOption
-    } = options[index];
-    return /*#__PURE__*/React.createElement(MenuItem, _extends({
-      style: {
-        ...style,
-        top: `${parseFloat(style.top ? style.top.toString() : '0') + paddingTop}px`
-      },
-      selected: (value || []).includes(optionValue || ''),
-      onClick: e => {
-        if (!optionValue) return;
-        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",
-      "aria-selected": (value || []).includes(optionValue || '')
-    }, restOption), optionTitle);
-  }, [containerRef, maxSelectedItems, onSelect, options, paddingTop, value]);
-  return /*#__PURE__*/React.createElement(FixedSizeList, {
-    width: "100%",
-    height: height,
-    itemSize: itemSize,
-    itemCount: options.length,
-    overscanCount: overscanCount,
-    onScroll: ({
-      scrollOffset
-    }) => scrollHandler(scrollOffset),
-    innerElementType: InnerElement
-  }, listItemFn);
-};
-SelectList.displayName = 'SelectList';
-export default SelectList;
-//# sourceMappingURL=SelectList.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectList.js","names":["React","useCallback","useMemo","FixedSizeList","useFontSize","useSize","useTheme","useIsMinWidth","useSelectHandler","MenuItem","useRWLoadNext","SelectList","searchVisible","options","visibleCount","overscanCount","threshold","onLoadNext","maxSelectedItems","containerRef","value","onChange","id","size","windowSize","isMinXs","fontSize","document","body","theme","scaleFactor","s","includes","sizes","Number","replace","paddingBottom","paddingEm","menuPaddingVertical","modalBodyPaddingVertical","paddingTop","searchInputHeight","baseHeight","itemSize","menuItemHeight","height","maxHeight","modalHeaderHeight","curHeight","length","count","scrollHandler","itemCount","onSelect","InnerElement","style","innerElementRest","parseFloat","listItemFn","index","title","optionTitle","optionValue","onClick","optionOnClick","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/esm/Select/SelectToggle.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectToggle.js","names":["React","useCallback","useMemo","styled","Up","Down","Loading","Close","CloseCircle","ellipsisStyles","resetButtonStyles","transitionStyles","omitEmotionProps","clr","ThemeOverrider","css","Tag","Button","Container","div","notHasLeftStyles","p","hasLeft","theme","inputPaddingHorizontal","notHasRightStyles","hasRight","unbordered","Content","Placeholder","span","inputColorPlaceholder","unborderedTitleStyles","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","colorText","ListItem","selectToggleListItemHeight","List","selectToggleListItemGap","DeleteButton","button","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","unborderedIconContainerStyles","IconContainer","selectColorIcon","ClearIcon","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","left","leftHasPadding","right","rightHasPadding","placeholder","loading","clearVisible","locale","renderContent","length","map","title","value","e","stopPropagation","deleteLabel","undefined","showClearButton","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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"}