@os-design/core 1.0.138 → 1.0.142

package/dist/cjs/DatePicker/index.js

@@ -17,6 +17,8 @@ var _media = require("@os-design/media");
 
 var _datePickerUtils = require("@os-design/date-picker-utils");
 
+var _theming = require("@os-design/theming");
+
 var _Select = require("../Select");
 
 var _SelectToggle = require("../Select/SelectToggle");
@@ -29,7 +31,7 @@ var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar")
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-var _excluded = ["placeholder", "disabled", "format", "firstDayOfWeek", "locale", "value", "defaultValue", "onChange", "size"];
+var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "format", "firstDayOfWeek", "locale", "value", "defaultValue", "onChange", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -59,7 +61,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * The component to choose a date.
  */
 var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var placeholder = _ref.placeholder,
+  var 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,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$format = _ref.format,
@@ -113,6 +121,43 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   });
 
+  var valueIsSpecified = (0, _react.useMemo)(function () {
+    return formattedValue !== undefined && formattedValue !== null;
+  }, [formattedValue]);
+  var rightValue = (0, _react.useMemo)(function () {
+    if (valueIsSpecified) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        "aria-hidden": true
+      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        disabled: disabled,
+        onClick: function onClick(e) {
+          setForwardedValue(null);
+          e.stopPropagation();
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (disabled) return;
+
+          if (['Enter', ' '].includes(e.key)) {
+            setForwardedValue(null);
+            if (!containerRef.current) return;
+            containerRef.current.focus();
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        },
+        "aria-label": locale.clearLabel
+      }, /*#__PURE__*/_react["default"].createElement(_SelectToggle.ClearIcon, null)));
+    }
+
+    return right || /*#__PURE__*/_react["default"].createElement(_SelectToggle.IconContainer, null, opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null));
+  }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
+  var rightHasPaddingValue = (0, _react.useMemo)(function () {
+    if (valueIsSpecified) return false;
+    return right ? rightHasPadding : true;
+  }, [right, rightHasPadding, valueIsSpecified]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Select.SelectContainer, _extends({
     opened: opened,
     disabled: disabled,
@@ -138,33 +183,31 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-disabled": disabled
   }, rest, {
     ref: mergedContainerRef
-  }), formattedValue !== undefined && formattedValue !== null ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SelectToggle.Title, {
+  }), 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(_SelectToggle.LeftAddon, {
+    hasPadding: leftHasPadding
+  }, left)), /*#__PURE__*/_react["default"].createElement(_SelectToggle.Content, {
+    hasLeft: !!left,
+    hasRight: !!right
+  }, valueIsSpecified ? /*#__PURE__*/_react["default"].createElement(_SelectToggle.Title, {
     disabled: disabled,
     "aria-hidden": true
-  }, formattedValue), /*#__PURE__*/_react["default"].createElement(_SelectToggle.ClearButtonContainer, {
-    "aria-hidden": true
-  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    type: "ghost",
-    wide: "never",
-    size: "small",
-    disabled: disabled,
-    onClick: function onClick(e) {
-      setForwardedValue(null);
-      e.stopPropagation();
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (disabled) return;
-
-      if (['Enter', ' '].includes(e.key)) {
-        setForwardedValue(null);
-        if (!containerRef.current) return;
-        containerRef.current.focus();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    "aria-label": locale.clearLabel
-  }, /*#__PURE__*/_react["default"].createElement(_SelectToggle.ClearIcon, null)))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SelectToggle.Placeholder, null, placeholder), /*#__PURE__*/_react["default"].createElement(_SelectToggle.IconContainer, null, opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null)))), isMinXs ? /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
+  }, formattedValue) : /*#__PURE__*/_react["default"].createElement(_SelectToggle.Placeholder, null, placeholder)), 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(_SelectToggle.RightAddon, {
+    hasPadding: rightHasPaddingValue
+  }, rightValue))), isMinXs ? /*#__PURE__*/_react["default"].createElement(_Popover["default"], {
     trigger: containerRef,
     placement: "bottom-start",
     visible: opened,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DatePicker","forwardRef","ref","placeholder","disabled","format","defaultFormat","firstDayOfWeek","locale","defaultLocale","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","formattedValue","useMemo","Date","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","calendar","v","e","includes","key","preventDefault","getAccessibilityDateLabel","stopPropagation","current","focus","clearLabel","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearButtonContainer,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      placeholder,\n      disabled = false,\n      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\n      />\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {formattedValue !== undefined && formattedValue !== null ? (\n            <>\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n              <ClearButtonContainer aria-hidden>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (['Enter', ' '].includes(e.key)) {\n                      setForwardedValue(null);\n                      if (!containerRef.current) return;\n                      containerRef.current.focus();\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <ClearIcon />\n                </Button>\n              </ClearButtonContainer>\n            </>\n          ) : (\n            <>\n              <Placeholder>{placeholder}</Placeholder>\n              <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n            </>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","defaultFormat","firstDayOfWeek","locale","defaultLocale","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","formattedValue","useMemo","Date","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","getAccessibilityDateLabel","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { SelectContainer } from '../Select';\nimport {\n  Content,\n  LeftAddon,\n  RightAddon,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\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}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\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        </SelectContainer>\n\n        {isMinXs ? (\n          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}

package/dist/cjs/Select/SelectToggle.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Title = exports.Placeholder = exports.IconContainer = exports.ClearIcon = exports.ClearButtonContainer = void 0;
+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"));
 
@@ -25,7 +25,7 @@ var _Tag = _interopRequireDefault(require("../Tag"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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 }; }
 
@@ -35,29 +35,44 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Placeholder = _styled["default"].span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), function (p) {
+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 && (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'))(_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)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-weight: 500;\n    ", "\n  "])), !p.disabled && "color: ".concat((0, _theming.clr)(p.theme.colorPrimary), ";"));
+  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)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.inputDisabledColorText));
+  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'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
+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'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  // Reset tag styles\n  padding-top: 0;\n  padding-bottom: 0;\n\n  height: ", "em;\n  ", ";\n"])), function (p) {
+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(_templateObject6 || (_templateObject6 = _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) {
+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;
@@ -67,35 +82,52 @@ var List = _styled["default"].div(_templateObject6 || (_templateObject6 = _tagge
   return p.theme.selectToggleListItemGap;
 });
 
-var DeleteButton = _styled["default"].button(_templateObject7 || (_templateObject7 = _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) {
+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)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding-top: 0.2em;\n    font-size: 0.8em;\n    ", "\n  "])), !p.disabled && "color: ".concat((0, _theming.clr)(p.theme.colorPrimary), ";"));
+  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'))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: ", "em;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n  color: ", ";\n\n  ", ";\n"])), function (p) {
-  return p.theme.inputPaddingHorizontal;
-}, function (p) {
+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 ClearButtonContainer = (0, _styled["default"])(IconContainer)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  right: 0;\n"])));
-exports.ClearButtonContainer = ClearButtonContainer;
-var ClearIcon = (0, _styled["default"])(_icons.CloseCircle)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  transform: scale(1.2) !important;\n"])));
+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,
-      unbordered = _ref.unbordered,
       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,
@@ -133,31 +165,62 @@ var SelectToggle = function SelectToggle(_ref) {
       unbordered: unbordered
     }, selectedItems[0].title);
   }, [selectedItems, multiple, disabled, unbordered, placeholder, locale.deleteLabel, onDelete]);
-  var icon = (0, _react.useMemo)(function () {
+  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);
-    return opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null);
-  }, [loading, opened]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderContent(), clearVisible && selectedItems.length > 0 ? /*#__PURE__*/_react["default"].createElement(ClearButtonContainer, {
-    unbordered: unbordered,
-    disabled: disabled
-  }, /*#__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))) : /*#__PURE__*/_react["default"].createElement(IconContainer, {
-    unbordered: unbordered,
-    disabled: disabled
-  }, icon));
+
+    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
+  }, 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';

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

@@ -1 +1 @@
-{"version":3,"file":"SelectToggle.js","names":["Placeholder","styled","span","p","clr","theme","inputColorPlaceholder","ellipsisStyles","unborderedTitleStyles","unbordered","css","disabled","colorPrimary","disabledStyles","inputDisabledColorText","Title","omitEmotionProps","colorText","ListItem","Tag","selectToggleListItemHeight","List","div","selectToggleListItemGap","DeleteButton","button","resetButtonStyles","selectToggleDeleteButtonColorIcon","selectToggleDeleteButtonColorIconHover","transitionStyles","unborderedIconContainerStyles","IconContainer","inputPaddingHorizontal","selectColorIcon","ClearButtonContainer","ClearIcon","CloseCircle","SelectToggle","selectedItems","onDelete","onClear","opened","multiple","placeholder","loading","clearVisible","locale","renderContent","useCallback","length","map","title","value","e","stopPropagation","deleteLabel","undefined","icon","useMemo","key","clearLabel","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 } 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  placeholder?: string;\n  unbordered?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  clearVisible?: boolean;\n  locale: SelectLocale;\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  position: absolute;\n  top: 0;\n  right: ${(p) => p.theme.inputPaddingHorizontal}em;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n  color: ${(p) => clr(p.theme.selectColorIcon)};\n\n  ${unborderedIconContainerStyles};\n`;\n\nexport const ClearButtonContainer = styled(IconContainer)`\n  right: 0;\n`;\n\nexport const ClearIcon = styled(CloseCircle)`\n  transform: scale(1.2) !important;\n`;\n\nconst SelectToggle: React.FC<SelectToggleProps> = ({\n  selectedItems,\n  onDelete,\n  onClear,\n  opened,\n  unbordered,\n  multiple,\n  placeholder,\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 icon = useMemo(() => {\n    if (loading) return <Loading />;\n    return opened ? <Up /> : <Down />;\n  }, [loading, opened]);\n\n  return (\n    <>\n      {renderContent()}\n      {clearVisible && selectedItems.length > 0 ? (\n        <ClearButtonContainer unbordered={unbordered} disabled={disabled}>\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        </ClearButtonContainer>\n      ) : (\n        <IconContainer unbordered={unbordered} disabled={disabled}>\n          {icon}\n        </IconContainer>\n      )}\n    </>\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","Content","omitEmotionProps","ellipsisStyles","Placeholder","span","clr","inputColorPlaceholder","unborderedTitleStyles","unbordered","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  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface ContentProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const Content = styled(\n  'div',\n  omitEmotionProps('hasLeft', 'hasRight')\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}>\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/cjs/Select/index.js

@@ -33,7 +33,7 @@ var _SelectList = _interopRequireDefault(require("./SelectList"));
 
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
 
-var _excluded = ["options", "placeholder", "searchVisible", "searchProps", "notFoundText", "unbordered", "loading", "disabled", "clearVisible", "threshold", "visibleCount", "overscanCount", "maxSelectedItems", "locale", "value", "defaultValue", "onChange", "onLoadNext", "size", "placement"];
+var _excluded = ["options", "left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "searchVisible", "searchProps", "notFoundText", "unbordered", "loading", "disabled", "clearVisible", "threshold", "visibleCount", "overscanCount", "maxSelectedItems", "locale", "value", "defaultValue", "onChange", "onLoadNext", "size", "placement"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
@@ -65,7 +65,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var paddingStyles = function paddingStyles(p) {
   var paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
-  return (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: calc(", "em - 1px) 3.5em\n      calc(", "em - 1px) ", "em;\n  "])), paddingVertical, paddingVertical, p.theme.inputPaddingHorizontal);
+  return (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: calc(", "em - 1px) 0;\n  "])), paddingVertical);
 };
 
 var openedStyles = function openedStyles(p) {
@@ -73,7 +73,7 @@ var openedStyles = function openedStyles(p) {
 };
 
 var unborderedStyles = function unborderedStyles(p) {
-  return p.unbordered && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border: 0;\n    padding-right: 1.8em;\n    box-shadow: none !important;\n    ", ";\n  "])), (0, _styles.transitionStyles)('background-color')(p));
+  return p.unbordered && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    border: 0;\n    box-shadow: none !important;\n    ", ";\n  "])), (0, _styles.transitionStyles)('background-color')(p));
 };
 
 var unborderedHoverStyles = function unborderedHoverStyles(p) {
@@ -111,6 +111,12 @@ var InputSearchContainer = _styled["default"].div(_templateObject8 || (_template
 var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
+      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,
       _ref$searchVisible = _ref.searchVisible,
       searchVisible = _ref$searchVisible === void 0 ? false : _ref$searchVisible,
@@ -249,11 +255,15 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       containerRef.current.focus();
     },
     opened: opened,
-    unbordered: unbordered,
     multiple: maxSelectedItems !== 1,
+    placeholder: placeholder,
+    left: left,
+    leftHasPadding: leftHasPadding,
+    right: right,
+    rightHasPadding: rightHasPadding,
+    unbordered: unbordered,
     disabled: disabled,
     clearVisible: clearVisible,
-    placeholder: placeholder,
     loading: loading,
     locale: locale
   })), /*#__PURE__*/_react["default"].createElement(SelectMenu, {