@os-design/core 1.0.142 → 1.0.143

package/dist/cjs/Select/SelectToggle.js

@@ -210,7 +210,7 @@ var SelectToggle = function SelectToggle(_ref) {
     hasPadding: leftHasPadding
   }, left)), /*#__PURE__*/_react["default"].createElement(Content, {
     hasLeft: !!left,
-    hasRight: !!right
+    hasRight: !!right && !unbordered
   }, renderContent()), rightValue && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     overrides: function overrides(t) {
       return {

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

@@ -1 +1 @@
-{"version":3,"file":"SelectToggle.js","names":["Container","styled","div","notHasLeftStyles","p","hasLeft","css","theme","inputPaddingHorizontal","notHasRightStyles","hasRight","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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"}
+{"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 && !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/SelectToggle.js

@@ -214,7 +214,7 @@ const SelectToggle = ({
     hasPadding: leftHasPadding
   }, left)), /*#__PURE__*/React.createElement(Content, {
     hasLeft: !!left,
-    hasRight: !!right
+    hasRight: !!right && !unbordered
   }, renderContent()), rightValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
     overrides: t => ({
       buttonPaddingHorizontal: 0.8,

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

@@ -1 +1 @@
-{"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","Content","Placeholder","span","inputColorPlaceholder","unborderedTitleStyles","unbordered","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  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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"}
+{"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","Content","Placeholder","span","inputColorPlaceholder","unborderedTitleStyles","unbordered","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  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 && !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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.142",
+  "version": "1.0.143",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -57,5 +57,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "47090ec1530d21dbcbf71515c87b0401e7af3c70"
+  "gitHead": "3fbab69122bb1ffb06fd786253aa36c011374d34"
 }